/* Site-eigen laag, Ares Flow _v7
 *
 * Laadt na tokens.css en componenten.css. Hier staat uitsluitend wat maar op
 * deze site voorkomt en dus niet in de bibliotheek hoort, volgens de laatste
 * regel van componenten/CONVENTIE.md.
 *
 * Twee regels gelden hier onverkort. Geen enkele kleurwaarde: alles loopt via
 * een rol uit het thema. Geen losse maat waar een ruimtestap bestaat. Wat
 * hieronder als vaste pixelwaarde staat is een lijndikte, een radius of een
 * icoonmaat, en die horen niet op de ruimteschaal.
 */

/* ---------- basis ---------- */

:root {
  --font-heading: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', 'Segoe Print', cursive;
  --radius-soft: 24px;
  --radius-arch: 999px 999px var(--radius-soft) var(--radius-soft);
  --shape-orbit: clamp(250px, 35vw, 430px);

  /* Beweging bij het in beeld komen. Deze vijf staan hier en niet in het thema,
     want de tokengenerator kent geen motionrol; hij leest kleur, ruimte, letter
     en vorm. Ze horen bij het gedrag van deze site en niet bij de merkidentiteit,
     dus een centrale plek in site.css is de juiste.

     Dit zijn de vijf knoppen voor de hele site. Eén waarde hier veranderen werkt
     door op elke pagina; er staat nergens anders een getal voor deze animatie.

       afstand    hoe ver een blok van onderaf omhoogkomt
       duur       hoe lang die beweging duurt
       curve      hoe hij versnelt en afremt; deze begint snel en remt lang uit
       onscherp   hoe wazig een kaart begint, alleen binnen een rij
       stap       de tussentijd van kaart tot kaart binnen diezelfde rij

     Op 14 augustus 2026 van .8s naar 1.2s gegaan en van 110 naar 170 ms, omdat
     de beweging voorbij was voordat je hem zag. De afstand is meegegroeid van 24
     naar 30 pixels: langer duren zonder verder komen leest als traag in plaats
     van rustig. */
  --reveal-afstand: 30px;
  --reveal-duur: 1.2s;
  --reveal-curve: cubic-bezier(.16, 1, .3, 1);
  --reveal-onscherp: 6px;
  --reveal-stap: 170ms;
}

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

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

body {
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* De gedeelde componentpadding komt op mobiel uit op 39px. De interactieve
   hoofdknoppen en menuknop houden daarom hier de minimale aanraakhoogte. */
.button, .nav__toggle { min-height: 44px; }

/* De ankers zitten onder een vaste navigatiebalk; zonder deze marge valt de kop
   van een sectie erachter zodra je op een menu-item klikt. */
[id] { scroll-margin-block-start: calc(var(--sp-4) + var(--sp-1)); }

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--sp-1);
  z-index: 200;
  background: var(--color-action);
  color: var(--color-on-action);
  font: var(--type-label);
  padding: var(--sp-0) var(--sp-1);
  border-radius: 6px;
}
.skip-link:focus { inset-block-start: var(--sp-0); }
/* De browser tekent hier zijn eigen ring van tweederde pixel in bijna-zwart, en
   die valt op het limevlak weg. */
.skip-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

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

/* ---------- merk in nav en footer ----------
 * Het monogram staat als masker en niet als afbeelding, zodat het de tekstkleur
 * van zijn omgeving overneemt. Het bestand in Afbeeldingen/ heeft #1a1a1a
 * ingebakken en is daardoor onzichtbaar op het donkere olijfvlak van de hero en
 * de footer; het masker leest alleen de vorm en kleurt met currentColor mee. */

.merk { display: inline-flex; align-items: center; gap: var(--sp-0); }
.merk__mark {
  width: 30px;
  aspect-ratio: 482 / 399;
  background: currentColor;
  -webkit-mask: url('monogram.svg') center / contain no-repeat;
  mask: url('monogram.svg') center / contain no-repeat;
  flex: none;
}
.merk__naam { font: var(--type-label); letter-spacing: .01em; }
.merk:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 4px; }

/* Alleen de Ares Flow-elementen die niet in de generieke nav zitten. De inverse
 * navvariant, drawer-states en generieke focuskleur komen uit componenten.css. */
.nav--op-donker:not(.is-gescrold) .nav__knop:hover { color: var(--color-action); }
.nav--op-donker:not(.is-gescrold) .nav__uitklap { color: var(--color-text); }
.nav--op-donker:not(.is-gescrold) .nav__link[aria-current="page"] {
  color: var(--color-action);
  text-decoration: underline;
}
.nav--op-donker:not(.is-gescrold) .merk:focus-visible,
.nav--op-donker:not(.is-gescrold) .nav__knop:focus-visible {
  outline-color: var(--color-text-inverse);
}

/* ---------- navigatie: het diensten-menu ----------
 * De bibliotheek kent nav, maar geen uitklapmenu; dat komt alleen op deze site
 * voor. Het is een echte knop met aria-expanded, zodat het met het toetsenbord
 * werkt en een schermlezer de toestand voorleest. */

.nav__item { position: relative; }

/* Het raakvlak is 44 pixels hoog. Zonder die padding was de knop even hoog als
   de letters, dus zeventien pixels, en dat is te weinig om aan te wijzen; op
   een touchscreen-laptop opent het menu dan pas na een paar pogingen.
   Gemeten in ronde 6 op 1024 en 1440. */
.nav__knop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: var(--type-label);
}
.nav__knop:hover { color: var(--color-accent-text); }
.nav__knop:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__knop svg { transition: transform .2s; }
.nav__knop[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav__uitklap {
  position: absolute;
  inset-block-start: calc(100% + var(--sp-0));
  inset-inline-start: 0;
  min-width: 15rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--sp-0);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
/* Openen gaat met de muis via hover en met het toetsenbord via de knop, die
   .is-open zet. Niet met :focus-within op het hele item: de knop zit daar zelf
   in, dus dan blijft het menu openstaan zodra de knop focus heeft en doet
   Escape zichtbaar niets. */
.nav__item:hover .nav__uitklap,
.nav__uitklap.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__uitklap a {
  display: block;
  font: var(--type-body-sm);
  padding: var(--sp-0);
  border-radius: 6px;
}
.nav__uitklap a:hover { background: var(--color-bg); color: var(--color-accent-text); }
.nav__uitklap a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.nav__uitklap a[aria-current="page"],
.nav__drawer a[aria-current="page"] {
  color: var(--color-accent-text);
  text-decoration: underline;
}

/* De knop in de balk. Draagt de actiekleur en staat daarom los van .nav__link. */
.nav__cta { font: var(--type-label); }

.nav__drawer-kop {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--color-text-subtle);
  display: block;
  padding-block: var(--sp-0);
}
.nav__drawer a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }

/* ---------- hero en eenmalige zoekdemo ----------
 * De referentie zet de tekst naast een open compositie van portret en zoekdemo.
 * Op mobiel volgt de DOM-volgorde: copy, demo en portret. */

.hero--v7 .hero__inner {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--sp-3);
}

.hero__titel { max-width: 24ch; }
.hero__lead { max-width: 52ch; }

/* De feitenregel draagt inhoud en is geen bijschrift. Op bijschriftformaat komt
   hij op een telefoon uit op ruim tien pixels, en dan leest niemand hem. */
.hero__feiten { font: var(--type-body-sm); }

/* Twee knoppen naast elkaar passen op een telefoon wel, maar krijgen dan elk de
   breedte van hun eigen tekst en staan daardoor rafelig onder elkaar. */
@media (max-width: 520px) {
  .hero__acties { flex-direction: column; align-items: stretch; }
}

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

.hero__portret {
  width: 100%;
  max-width: none;
  margin-inline-start: auto;
}

.zoekdemo {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.zoekdemo__balk {
  display: flex;
  align-items: center;
  gap: var(--sp-0);
  padding: var(--sp-1);
  border-block-end: 1px solid var(--color-border);
}

.zoekdemo__balk svg { flex: none; color: var(--color-text-subtle); }
.zoekdemo__vraag { position: relative; font: var(--type-body-sm); white-space: nowrap; }
.zoekdemo__vraag::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-surface);
  transform: scaleX(0);
  transform-origin: right;
}

.zoekdemo__cursor {
  width: 1px;
  height: 1em;
  background: var(--color-accent);
  opacity: 0;
}

/* De demo hoort bij de vier pijnpunten: eerst zien wat een klant ziet, dan pas
   de vier vormen waarin het probleem zich voordoet. */
.zoekbewijs { display: grid; gap: var(--sp-2); align-items: center; }
.zoekbewijs__uitleg {
  font: var(--type-lead);
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.7rem);
  line-height: 1.35;
  max-width: 26ch;
  color: var(--color-text);
}

/* De namen, cijfers en aantallen in de demo zijn verzonnen. Ze zien er echt
   genoeg uit om voor echte data door te gaan, dus staat er zichtbaar bij dat
   het een voorbeeld is. */
.zoekdemo__balkrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  padding: var(--sp-0) var(--sp-1);
  border-block-end: 1px solid var(--color-border);
}
.zoekdemo__voorbeeld {
  flex: none;
  padding: 2px var(--sp-0);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-subtle);
  font: var(--type-caption);
}
.zoekdemo__tabs {
  display: flex;
  gap: var(--sp-1);
  min-width: 0;
  font: var(--type-caption);
  color: var(--color-text-subtle);
}
.zoekdemo__tab--actief {
  position: relative;
  color: var(--color-accent-text);
  font-weight: 600;
}
.zoekdemo__tab--actief::after {
  content: '';
  position: absolute;
  inset: auto 0 calc(var(--sp-0) * -1 - 1px) 0;
  height: 2px;
  background: var(--color-accent);
}
@media (max-width: 420px) {
  .zoekdemo__tab:nth-child(n+3) { display: none; }
}
.zoekdemo__tekst { display: grid; }
.zoekdemo__meta {
  margin-block-start: 2px;
  font: var(--type-caption);
  color: var(--color-text-subtle);
}
.zoekdemo__sterren { color: var(--color-rating); letter-spacing: -1px; }
.zoekdemo__resultaten { padding-block: var(--sp-0); }
.zoekdemo__resultaat { overflow: hidden; }
.zoekdemo__resultaat-inhoud {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--sp-0);
  padding: var(--sp-0) var(--sp-1);
}
.zoekdemo__resultaat-inhoud > span:last-child { display: grid; }
.zoekdemo__resultaat strong { font: var(--type-label); color: var(--color-competitor); }
/* De teller maakt duidelijk dat de lijst doorloopt en dat jij daar ergens
   tussen staat, niet op plek vier. */
.zoekdemo__meer {
  margin-block-start: var(--sp-0);
  padding: var(--sp-0) var(--sp-1) 0;
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font: var(--type-caption);
}
.zoekdemo__resultaat i {
  display: block;
  width: 76%;
  height: 5px;
  margin-block-start: var(--sp-0);
  border-radius: 3px;
  background: var(--color-border);
}
.zoekdemo__resultaat i + i { width: 54%; }
.zoekdemo__icoon {
  width: var(--sp-1);
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

/* Het raakvlak is 44 pixels hoog, de onderstreepte tekst blijft klein. Zonder
   die padding was de knop vijftien pixels en op een telefoon niet te raken;
   gemeten op 375 in ronde 6. */
.zoekdemo__overslaan {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline: var(--sp-1);
  margin-block-end: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent-text);
  font: var(--type-caption);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.zoekdemo__overslaan:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.zoekdemo__overslaan[aria-disabled="true"] {
  color: var(--color-text-subtle);
  text-decoration: none;
  cursor: default;
}

/* Tijdens de animatie staat de vraag afgedekt en staan de resultaten links
   buiten hun rij. JavaScript wisselt alleen de klassen; de eindtoestand is de
   gewone, statische opmaak hierboven. */
.zoekdemo.is-bezig .zoekdemo__vraag::after { transform: scaleX(1); }
/* Na het typen houdt is-getypt het masker weg. Zonder die rusttoestand valt het
   masker terug op de regel hierboven zodra de typ-klasse verdwijnt, en dan is
   de net getypte tekst meteen weer onzichtbaar. */
.zoekdemo.is-getypt .zoekdemo__vraag::after { transform: scaleX(0); }
.zoekdemo.is-typen .zoekdemo__vraag::after { animation: zoekdemo-typen .7s steps(16, end) forwards; }
.zoekdemo.is-wissen .zoekdemo__vraag::after { animation: zoekdemo-wissen .26s steps(8, end) forwards; }
.zoekdemo.is-bezig .zoekdemo__cursor { animation: zoekdemo-cursor .6s steps(1, end) infinite; }
/* Bij het begin van een nieuwe ronde verdwijnt is-resultaten en schuiven de
   regels terug. Zonder transitie is dat een harde knip. */
.zoekdemo.is-bezig .zoekdemo__resultaat-inhoud {
  transform: translateX(-110%);
  transition: transform .3s ease-in;
}
.zoekdemo.is-bezig .zoekdemo__meer { opacity: 0; }
.zoekdemo.is-resultaten .zoekdemo__resultaat-inhoud {
  animation: zoekdemo-resultaat .5s cubic-bezier(.22, 1, .36, 1) forwards;
}
.zoekdemo.is-resultaten .zoekdemo__resultaat:nth-child(1) .zoekdemo__resultaat-inhoud { animation-delay: .05s; }
.zoekdemo.is-resultaten .zoekdemo__resultaat:nth-child(2) .zoekdemo__resultaat-inhoud { animation-delay: .2s; }
.zoekdemo.is-resultaten .zoekdemo__resultaat:nth-child(3) .zoekdemo__resultaat-inhoud { animation-delay: .35s; }
.zoekdemo.is-resultaten .zoekdemo__resultaat:nth-child(4) .zoekdemo__resultaat-inhoud { animation-delay: .5s; }
.zoekdemo.is-resultaten .zoekdemo__meer { animation: zoekdemo-meer .4s ease-out .7s forwards; }

@keyframes zoekdemo-typen { to { transform: scaleX(0); } }
@keyframes zoekdemo-wissen { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes zoekdemo-cursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes zoekdemo-resultaat { to { transform: none; } }
@keyframes zoekdemo-meer { to { opacity: 1; } }

@media (max-width: 1200px) {
  .hero__visual { grid-template-columns: 1fr; gap: var(--sp-2); }
  .zoekdemo {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .hero__portret {
    grid-column: 1;
    grid-row: 2;
    max-width: 380px;
    margin-inline: auto;
  }
}

@media (max-width: 860px) {
  .hero--v7 .hero__inner { grid-template-columns: 1fr; }
}

/* ---------- vier ondernemersvragen ---------- */

.pijlers { display: grid; gap: var(--sp-1); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 760px) { .pijlers { grid-template-columns: 1fr; } }

.pijler {
  display: flex;
  flex-direction: column;
  color: var(--color-text);
}
.pijler { padding: var(--sp-2); }
.pijler:first-child { padding: var(--sp-3); }
.pijler:first-child .pijler__kop { font: var(--type-h2); }
/* Het icoon zit in een ronde drager, hetzelfde ronde motief als de Groeiscan
   en de boog bij de prijzen. */
.pijler__icoon {
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 1;
  margin-block-end: var(--sp-1);
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-accent-text);
}
.pijler:first-child .pijler__icoon { width: 64px; }
.pijler__icoon svg {
  width: 55%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pijler__nummer {
  width: max-content;
  color: var(--color-accent-text);
  font: var(--type-h3);
  border-block-end: 2px solid var(--color-accent);
  margin-block-end: var(--sp-2);
}
.pijler__kop { font: var(--type-h3); }
.pijler__tekst { font: var(--type-body); color: var(--color-text-subtle); margin-block-start: var(--sp-0); }
.pijler:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* De verwijzing onderaan de kaart. Duwt zichzelf naar beneden zodat vier kaarten
   met ongelijke tekstlengte toch op één lijn eindigen. */
.pijler__meer {
  font: var(--type-label);
  color: var(--color-accent-text);
  margin-block-start: auto;
  padding-block-start: var(--sp-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pijler__meer::after { content: '\2192'; transition: transform .2s; }

@media (hover: hover) and (pointer: fine) {
  .pijler { transition: border-color .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1); }
  .pijler:hover { border-color: var(--color-accent); transform: translateY(-2px); }
  .pijler:hover .pijler__meer::after { transform: translateX(3px); }
}

@media (max-width: 520px) {
  .pijler:first-child { padding: var(--sp-2); }
  .pijler:first-child .pijler__kop { font: var(--type-h3); }
}

/* ---------- websites als eigen blok ----------
 * Verving in ronde 6 de sectie met drie dienstroutes. Die stelde dezelfde
 * keuze als de pijnpunten erboven, alleen in de taal van het aanbod, en
 * Websites was de enige dienst zonder eigen verhaal op de homepage.
 *
 * De twee redenen rechts sluiten aan op de zoekdemo: reden 1 is precies wat de
 * demo laat zien, reden 2 is wat er daarna misgaat. */

/* De twee kolommen lijnen boven en onder uit. Stond tot 14 augustus 2026 op
   `start`, waardoor de tekstkolom 149 pixels verder doorliep dan de twee kaarten
   ernaast en er onderaan een gat viel dat als onrust leest. De kaarten vullen nu
   samen dezelfde hoogte, en binnen een kaart zakt de link naar de onderrand zodat
   de extra ruimte niet als leegte onder de tekst blijft hangen. */
.websites-v7__grid { display: grid; gap: var(--sp-2); align-items: stretch; }
.websites-v7__copy { align-items: flex-start; }
.websites-v7__copy .lead { max-width: 46ch; }
.websites-v7__prijszin {
  padding-inline-start: var(--sp-1);
  border-inline-start: 2px solid var(--color-accent);
  color: var(--color-text-subtle);
}
.websites-v7__prijszin strong { color: var(--color-text); }
.websites-v7__acties { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1); }

.websites-v7__redenen { display: grid; gap: var(--sp-1); grid-auto-rows: 1fr; }

.reden {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  /* De ruimte die overblijft wordt over beide tussenruimtes verdeeld in plaats
     van in één gat onder de tekst te vallen. Bij twee kaarten van gelijke hoogte
     met ongelijk lange koppen zakt de tekst daardoor mee naar het midden en
     staan de links nog steeds op dezelfde lijn. */
  justify-content: space-between;
  gap: var(--sp-1);
  padding: var(--sp-2);
  padding-block-start: var(--sp-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-soft);
}
/* Het nummer is een ordening en geen stap in een proces; het staat daarom in de
   rand en niet voor de kop. */
.reden__nummer {
  position: absolute;
  inset-block-start: var(--sp-1);
  inset-inline-start: var(--sp-2);
  font: var(--type-h2);
  line-height: 1;
  color: var(--color-accent);
  opacity: .38;
}
.reden__kop { font: var(--type-h3); }
.reden__tekst { margin-block-start: var(--sp-0); font: var(--type-body-sm); color: var(--color-text-subtle); }
.reden__link {
  display: inline-block;
  margin-block-start: var(--sp-1);
  color: var(--color-accent-text);
  font: var(--type-label);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reden__link::after { content: ' \2192'; }
.reden__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .reden__link::after { display: inline-block; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
  .reden__link:hover::after { transform: translateX(3px); }
}

@media (min-width: 861px) {
  .websites-v7__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-3); }
}

/* ---------- tekstsectie met een kop naast de tekst ----------
 * Twee kolommen op een breed scherm, gestapeld op een smal. De kop blijft
 * meelopen tijdens het scrollen zodat je bij een lange tekst ziet waar je bent. */

.tekstblok { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--sp-3); align-items: start; }
@media (max-width: 860px) { .tekstblok { grid-template-columns: 1fr; gap: var(--sp-1); } }

.tekstblok__kop { position: sticky; inset-block-start: calc(var(--sp-4) + var(--sp-0)); }
@media (max-width: 860px) { .tekstblok__kop { position: static; } }

.tekstblok__body { max-width: var(--leeskolom-max); }
.tekstblok__body > p + p { margin-block-start: var(--sp-1); }

/* De laatste zin van een blok, de vraag die naar het gesprek leidt. Krijgt een
   lijn ervoor zodat hij zich losmaakt van de alinea's erboven. */
.slotzin {
  font: var(--type-lead);
  color: var(--color-text);
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: var(--sp-1);
  margin-block-start: var(--sp-2);
}

/* ---------- de ingang naar de AI-scan ----------
 * Staat onder de AI-sectie en niet in de navigatie. Een omkaderd blok met een
 * accentlijn ervoor, zodat het zich losmaakt van de lopende tekst zonder een
 * eigen sectie te worden. */

.scan-ingang {
  margin-block-start: var(--sp-2);
  padding: var(--sp-1);
  border: 1px solid var(--color-border);
  border-inline-start: 2px solid var(--color-accent);
  border-radius: 8px;
  background: var(--color-surface);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
}
.scan-ingang__tekst { font: var(--type-body-sm); color: var(--color-text-subtle); max-width: 46ch; }
@media (max-width: 520px) { .scan-ingang .button { width: 100%; } }

/* ---------- de vier blokjes bij de Groeiscan ----------
 * Bewust zonder nummers: de volgorde is geen stappenplan, het zijn vier dingen
 * die je krijgt. */

.blokjes { display: grid; gap: var(--sp-1); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.blokje__kop { font: var(--type-label); color: var(--color-accent-text); }
.blokje__tekst { font: var(--type-body-sm); color: var(--color-text-subtle); margin-block-start: 4px; }

.prijsregel {
  font: var(--type-h3);
  color: var(--color-text);
}
/* Eigen klasse en niet .prijsregel span, want dan wordt het bedrag zelf ook
   klein en gedempt, en juist dat is waar de bezoeker naar kijkt. */
.prijsregel__btw { font: var(--type-body-sm); color: var(--color-text-subtle); }

/* De Groeiscan staat op het donkere olijfvlak. Deze klassen zijn van deze site
   en hebben dus geen omkering uit de bibliotheek; zonder deze regels staat er
   bijna-zwarte en olijfgroene tekst op olijfgroen. */
.section--inverse .prijsregel,
.section--inverse .blokje__kop,
.section--inverse .slotzin { color: var(--color-text-inverse); }
.section--inverse .prijsregel__btw,
.section--inverse .blokje__tekst { color: var(--color-text-inverse); opacity: .82; }
.section--inverse .slotzin { border-inline-start-color: var(--color-text-inverse); }

/* ---------- werkwijze ---------- */

.werkwijze { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.stap__kop { font: var(--type-h3); }
.stap__tekst { color: var(--color-text-subtle); }
.stap__tekst > p + p { margin-block-start: var(--sp-1); }

/* ---------- pakketten ---------- */

.pakket { display: flex; flex-direction: column; }

/* "Alles uit Starter, plus" moet je zien zonder de kaarten te vergelijken, dus
   het staat op labelformaat en niet op bijschriftformaat. */
.pakket__erfenis {
  font: var(--type-label);
  color: var(--color-accent-text);
  text-transform: none;
}
.pakket__prijs { font: var(--type-h3); color: var(--color-text); white-space: nowrap; }
/* "vanaf" is geen deel van het bedrag en krijgt daarom niet het gewicht ervan. */
.pakket__vanaf { font: var(--type-body-sm); color: var(--color-text-subtle); }
/* De btw-regel staat onder de prijs en aan dezelfde kant uitgelijnd. */
.pakket__btw { font: var(--type-caption); color: var(--color-text-subtle); text-align: end; }
.pakket__voor { font: var(--type-body-sm); color: var(--color-text-subtle); }
.pakket__lijst { margin-block-start: var(--sp-1); }
.pakket__lijst li {
  font: var(--type-body-sm);
  padding-block: 5px;
  padding-inline-start: var(--sp-1);
  position: relative;
}
.pakket__lijst li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: .65em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}
/* Doorlooptijd en betaalmoment staan hier. Dat is geen bijschrift maar een
   antwoord op de vraag die na de prijs komt, en het staat daarom op
   leesformaat. */
.pakket__voet {
  font: var(--type-body-sm);
  color: var(--color-text-subtle);
  margin-block-start: auto;
  padding-block-start: var(--sp-1);
  border-block-start: 1px solid var(--color-border);
}

/* Het label op de kaart die de meeste bedrijven kiezen. Staat er als tekst en
   niet als kleurvlak, want het is een aanbeveling en geen claim over aantallen.
 *
 * Het hangt op de bovenrand en niet in de kolom. In de kolom duwt het de kop en
 * de prijs van deze ene kaart omlaag, en dan staan de drie bedragen niet meer
 * op één lijn terwijl je ze juist naast elkaar legt. */
.pakket { position: relative; }
.pakket__label {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  background: var(--color-bg);
  font: var(--type-caption);
  color: var(--color-accent-text);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 2px var(--sp-0);
}

/* Het label staat buiten de flow maar telt nog wel mee als kind van de stack,
   waardoor de regel eronder ruimte krijgt die de andere twee kaarten niet
   hebben. Twaalf pixels verschil, precies genoeg om de bedragen scheef te
   zetten. */
.stack--dicht > .pakket__label + * { margin-block-start: 0; }

/* Starter heeft geen erfenisregel, want er zit niets vóór. De regel staat er
   wel, onzichtbaar en buiten de voorleesvolgorde, zodat de drie koppen op
   dezelfde hoogte beginnen. */
.pakket__erfenis--leeg { visibility: hidden; }

/* ---------- de tweede rij bij de prijzen ----------
 * Groeiscan, AI-startsessie en AI-workshop. Deze staan bewust niet in een witte
 * kaart met een kader zoals de drie websitepakketten erboven, maar als kolom
 * onder een accentlijn. Zo zie je aan de vorm dat het een ander soort dienst is
 * zonder dat er een kopje boven hoeft dat dat uitlegt. */

.sessie-rij { display: grid; gap: var(--sp-2); }
.sessie-rij--een { grid-template-columns: 1fr; }
.sessie-rij--twee { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .sessie-rij--twee { grid-template-columns: 1fr; } }

.sessie {
  display: flex;
  flex-direction: column;
  border-block-start: 2px solid var(--color-accent);
  padding-block-start: var(--sp-1);
}
.sessie__kop { font: var(--type-h3); }
.sessie__prijs { font: var(--type-h3); color: var(--color-text); white-space: nowrap; }
.sessie__meer { margin-block-start: auto; padding-block-start: var(--sp-1); font: var(--type-body-sm); }

/* ---------- sessie 5: zelfstandige homepageblokken ---------- */

.groeiscan-v7__grid {
  display: grid;
  gap: var(--sp-3);
  align-items: center;
}
.groeiscan-v7__copy { align-items: flex-start; }
.groeiscan-v7__copy .button { width: auto; }
/* De prijszin blijft één zin voor wie hem laat voorlezen; alleen het bedrag
   krijgt het gewicht dat het in de referentie heeft. */
.groeiscan-v7__prijs { display: grid; justify-items: start; }
.groeiscan-v7__prijszin { font: var(--type-body-sm); color: var(--color-text-inverse); opacity: .8; }
.groeiscan-v7__bedrag {
  font: var(--type-h2);
  font-size: clamp(2.6rem, 2rem + 2.6vw, 4rem);
  line-height: 1.05;
  color: var(--color-action);
}
/* Lime knop op het donkere vlak, zoals in groeiscan.png. Zwarte tekst op lime
   haalt ruim 9:1 met de olive-deep achtergrond eromheen. */
.section--inverse .groeiscan-v7__cta {
  background: var(--color-action);
  color: var(--color-text);
}
.section--inverse .groeiscan-v7__cta:hover { background: var(--color-action-hover); }
.groeiscan-v7__uitkomsten {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-1);
  isolation: isolate;
}
.groeiscan-v7__baan { display: none; }
.groeiscan-v7__kern {
  display: none;
  color: var(--color-action);
}
.groeiscan-label {
  min-width: 0;
  margin: 0;
  text-align: center;
}
.groeiscan-label svg {
  width: var(--sp-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-action);
}
/* Een uitspraak, geen kopje. Het formaat is een stap kleiner dan het label dat
   hier tot ronde 6 stond, want vier citaten van een halve regel passen anders
   niet binnen de ellips zonder dat de baan mee moet groeien. */
.groeiscan-label figcaption {
  margin-block-start: var(--sp-0);
  font: var(--type-body-sm);
  font-style: italic;
  text-wrap: balance;
}

/* ---------- Groeiscan: vier ballonnen (ronde 7, variant B na review) ----------
   Eigen klassenamen met de prefix gsv-b, naast de .groeiscan-label-regels
   hierboven: die blijven staan, want _richtingen/werkwijze-loper en
   _richtingen/hero-gradient gebruiken ze nog. Op de homepage vervangt dit
   blok de ellips met kernbadge. Mobile-first: de figuur staat boven de
   ballon met een staartje omhoog naar de mond, op elke breedte, want een
   ballon naast de figuur laat op tabletbreedte geen ruimte over voor het
   langste woord in een citaat. Vanaf 768px verandert alleen het aantal
   kolommen en de verspringing. */

.gsv-b__personen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
}

.gsv-b__persoon {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
  margin: 0;
  min-width: 0;
  text-align: start;
  /* Breedte van de figuur als custom property, zodat het ballonstaartje
     verderop precies onder het hoofd landt zonder de maat te dupliceren.
     --kop-x is de horizontale positie van het hoofd als fractie van de
     88-brede viewBox van de figuren. 94px is een weergavemaat voor een
     icoon, geen spacing-waarde; het dichtstbijzijnde token (--sp-4, tot
     100.2px) schaalt mee met de viewport en zou de verhouding met de
     ballon op smalle breedtes verstoren. */
  --fig-breedte: 94px;
}

.gsv-b__figuur {
  flex-shrink: 0;
  width: var(--fig-breedte);
  height: auto;
  color: var(--color-action);
}

.gsv-b__persoon--een  { --kop-x: 0.3636; }
.gsv-b__persoon--twee { --kop-x: 0.3864; }
.gsv-b__persoon--drie { --kop-x: 0.6364; }
.gsv-b__persoon--vier { --kop-x: 0.5; }

/* De ballon is een gewone figcaption, opgemaakt als tekstballon. */
.gsv-b__ballon {
  position: relative;
  margin: 0;
  /* Leesbreedte van het citaat. Geen match met --leeskolom-max (68ch): dat
     token is voor lopende tekst, dit is een kort citaat in een ballon. */
  max-width: 32ch;
  padding: var(--sp-1) calc(var(--sp-1) * 1.2);
  border-radius: calc(var(--radius-soft) - 8px);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--type-body);
  font-size: var(--fs-1);
  line-height: var(--lh-snug);
  text-wrap: balance;
  /* Geen schaduw-token in dit systeem; waarde ligt in dezelfde orde als de
     andere box-shadows op witte kaarten in dit bestand (8-16px blur,
     color-mix met --color-text). */
  box-shadow: 0 10px 28px color-mix(in srgb, var(--color-text) 18%, transparent);
}

/* Het staartje wijst omhoog naar de mond van de figuur erboven: een vierkant
   van dezelfde kleur, 45 graden gedraaid, dezelfde techniek als het puntje
   van de avatar-chatkaart. inset-inline-start rekent de kop-fractie
   (--kop-x) om naar de werkelijke figuurbreedte, zodat het staartje op elke
   breedte precies onder het hoofd landt. De maten 6px/14px/7px zijn op de
   diamantvorm van dit staartje afgestemd; het dichtstbijzijnde token,
   --sp-0 (10-12px), is te grof voor dit detail. */
.gsv-b__ballon::after {
  content: '';
  position: absolute;
  inset-block-start: -6px;
  inset-inline-start: calc(var(--fig-breedte) * var(--kop-x) - 7px);
  width: 14px;
  height: 14px;
  background: var(--color-surface);
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .gsv-b__personen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-3);
    row-gap: var(--sp-3);
    padding-block: var(--sp-1);
  }

  /* De rechterkolom ligt lager dan de linker: asymmetrie in plaats van een
     strak 2x2-raster, met dezelfde lichte speelsheid als elders op de
     site. */
  .gsv-b__persoon--twee,
  .gsv-b__persoon--vier {
    margin-block-start: var(--sp-4);
  }

  /* Zelfde overweging als bij --fig-breedte hierboven: iconschaal op maat
     van de proef in _richtingen, geen spacing-token. */
  .gsv-b__persoon { --fig-breedte: clamp(86px, 6vw + 52px, 116px); }
}

/* Dezelfde tweedeling als bij Websites en de Groeiscan: het verhaal links, het
   blok dat iets doet rechts. Zonder die kolom bleef de halve sectie leeg. */
.ai-uitnodiging__grid { display: grid; gap: var(--sp-2); align-items: start; }
.ai-uitnodiging__grid > .stack { max-width: var(--leeskolom-max); }
.ai-uitnodiging__kop { font: var(--type-h3); font-size: var(--fs-1); }
.ai-uitnodiging__scan {
  margin-block-start: var(--sp-0);
  color: var(--color-text-subtle);
  font: var(--type-body-sm);
}
.ai-uitnodiging__inner {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-soft);
  background: var(--color-surface);
}
.ai-uitnodiging__actie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
}
.ai-uitnodiging__actie svg {
  width: var(--sp-3);
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Werkwijze: vier stappen die op één doorlopend pad liggen.
   Mobiel is dat een rechte verticale route, vanaf 900px het golvende pad uit
   de referentie. De knooppunten zijn segmentgrenzen van het SVG-pad; de
   stappen staan op dezelfde percentages, dus punt en pad kunnen niet
   uit elkaar lopen. */
.werkwijze-v7__baan { position: relative; }
.werkwijze-v7 {
  position: relative;
  display: grid;
  gap: var(--sp-2);
}
.werkwijze-v7::before {
  content: '';
  position: absolute;
  inset-block: 10px var(--sp-1);
  inset-inline-start: 9px;
  width: 2px;
  background: var(--color-accent);
  opacity: .4;
}
.werkwijze-v7__pad { display: none; }
.werkwijze-v7__stap {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: var(--sp-1);
  row-gap: var(--sp-0);
  align-items: start;
}
.werkwijze-v7__icoon {
  grid-column: 2;
  grid-row: 1;
  width: 40px;
  height: 40px;
  color: var(--color-accent-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.werkwijze-v7__punt {
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
  margin-block-start: 10px;
  border: 3px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-bg-alt);
}
.werkwijze-v7__tekst { grid-column: 2; grid-row: 2; }
.werkwijze-v7__tekst h3 {
  font: var(--type-h3);
  font-size: var(--fs-1);
  color: var(--color-accent-text);
}
.werkwijze-v7__tekst p { margin-block-start: var(--sp-0); color: var(--color-text-subtle); }
.werkwijze-v7__link { width: max-content; }

/* ---------- de loper over het pad ----------
 * Het element staat niet in de HTML. site.js maakt het aan, en alleen wanneer
 * beweging is toegestaan. Zonder JavaScript en onder prefers-reduced-motion
 * blijft de sectie exact zoals hij was: hetzelfde pad, dezelfde holle punten.
 *
 * Deze sectie draagt bewust geen reveal. De loper is hier de beweging; een
 * blok dat ook nog omhoogkomt vraagt om dezelfde aandacht op hetzelfde moment. */

.werkwijze-v7__loper {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 13px;
  height: 13px;
  /* De negatieve marge zet het midden van de punt op de coördinaat, zodat de
     transform de positie van het pad rechtstreeks kan overnemen. */
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 15%, transparent);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

/* Op het golvende pad stuurt JavaScript elke frame; een transitie zou daar
   overheen lopen. Op de verticale route springt de loper van knooppunt naar
   knooppunt en doet de transitie het werk.

   Daar is hij ook geen punt maar een ring. Hij komt tot stilstand op een
   knooppunt dat op dat moment zelf gevuld raakt, en een punt op een punt is
   niet te zien. De ring staat eromheen en glijdt er zichtbaar overheen naar de
   volgende stap. */
.werkwijze-v7__loper--stappen {
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: transparent;
  border: 2px solid var(--color-accent);
  box-shadow: none;
  transition: transform 600ms cubic-bezier(.33, .08, .2, 1), opacity 320ms ease;
}
/* De eerste plaatsing gebeurt zonder overgang, anders valt de loper zichtbaar
   vanuit de linkerbovenhoek naar de eerste stap. */
.werkwijze-v7__loper--stappen.is-plaatsen { transition: none; }
.werkwijze-v7__loper.is-zichtbaar { opacity: 1; }

.werkwijze-v7__punt { transition: background-color 300ms ease; }
.werkwijze-v7__stap.is-bereikt .werkwijze-v7__punt { background: var(--color-accent); }

.over-v7 {
  display: grid;
  gap: var(--sp-2);
  align-items: center;
}
.over-v7__beeld {
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-soft);
}
.over-v7__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 23%;
}
.over-v7__copy { align-items: flex-start; }
.script-accent {
  font: 500 var(--fs-2)/var(--lh-tight) var(--font-script);
  color: var(--color-accent-text);
  transform: rotate(-2deg);
}

/* Prijzen: websites als dominante donkere groep, AI als eigen rustige groep en
   de Groeiscan als boog ernaast. De kaartregels liggen op subgrid, zodat titel,
   prijs, btw, beide tekstregels en de knop bij elk pakket op dezelfde lijn
   beginnen, ongeacht hoe lang de tekst is. */
.sprite { display: none; }

.prijzen-v7__compositie { display: grid; gap: var(--sp-2); }

.prijsgroep {
  min-width: 0;
  padding: var(--sp-2);
  border-radius: var(--radius-soft);
}
.prijsgroep__kop {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1);
  align-items: start;
  margin-block-end: var(--sp-2);
}
.prijsgroep__icoon {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.prijsgroep__icoon--groot { width: 40px; height: 40px; color: var(--color-accent-text); }
.prijsgroep__naam { font: var(--type-h3); }
.prijsgroep__uitleg { margin-block-start: var(--sp-0); font: var(--type-body-sm); opacity: .85; }
.prijsgroep__meer { display: inline-block; margin-block-start: var(--sp-2); }

.prijsgroep--websites { background: var(--color-bg-inverse); }
.prijsgroep--ai { border: 1px solid var(--color-border); background: var(--color-surface); }
.prijsgroep--boog {
  display: grid;
  align-content: start;
  justify-items: center;
  padding-block-start: clamp(var(--sp-3), 9vw, 116px);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-arch);
  background: var(--color-surface);
  text-align: center;
}

.pakketrij,
.aikaarten { display: grid; gap: var(--sp-1); }
.pakketkaart,
.aikaart {
  display: grid;
  grid-template-rows: subgrid;
  gap: 0;
  min-width: 0;
  align-content: start;
}
.pakketkaart {
  position: relative;
  grid-row: span 8;
  padding: var(--sp-1);
  border: 2px solid transparent;
  border-radius: var(--radius-soft);
  background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
}
.pakketkaart--accent { border-color: var(--color-action); }
/* De badge ligt op de bovenrand en staat buiten de rijen. Als hij een eigen rij
   krijgt, houden de twee kaarten zonder badge een kaal vlak van twee regels
   boven hun titel over. */
.pakketkaart__badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline: var(--sp-1);
  padding: calc(var(--sp-0) / 2) var(--sp-0);
  border-radius: 999px;
  background: var(--color-action);
  color: var(--color-text);
  font: var(--type-label);
  transform: translateY(-52%);
}
.pakketkaart__erfenis {
  grid-row: 2;
  align-self: end;
  padding-block-start: var(--sp-0);
  color: var(--color-accent-text);
  font: var(--type-label);
}
.pakketkaart__titel { grid-row: 3; padding-block-start: var(--sp-0); font: var(--type-h3); }
.pakketkaart__prijs {
  grid-row: 4;
  font: var(--type-h2);
  font-size: clamp(1.9rem, 1.55rem + 1.1vw, 2.4rem);
  color: var(--color-accent-text);
  line-height: 1.1;
  white-space: nowrap;
}
.pakketkaart__vanaf { font: var(--type-body-sm); color: var(--color-text-subtle); }
.pakketkaart__btw { grid-row: 5; font: var(--type-caption); color: var(--color-text-subtle); }
.pakketkaart__punt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-0);
  align-items: start;
  padding-block-start: var(--sp-1);
  font: var(--type-body-sm);
  color: var(--color-text-subtle);
  text-align: start;
}
.pakketkaart__punt--eerste {
  grid-row: 6;
  margin-block-start: var(--sp-1);
  border-block-start: 1px solid var(--color-border);
}
.pakketkaart__punt:not(.pakketkaart__punt--eerste) { grid-row: 7; }
.pakketkaart__icoon {
  width: 18px;
  height: 18px;
  margin-block-start: 2px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pakketkaart__cta { grid-row: 8; align-self: end; margin-block-start: var(--sp-1); }
.pakketkaart .button--primair {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding-inline: var(--sp-0);
  background: var(--color-action);
  color: var(--color-text);
  font-size: var(--fs--1);
  white-space: nowrap;
}
.pakketkaart__cta::after,
.boog__cta::after,
.aikaart__cta::after { content: '\2192'; transition: transform .2s; }
.pakketkaart .button--primair:hover { background: var(--color-action-hover); }

.aikaart { grid-row: span 6; padding-block: var(--sp-0); }
.aikaart__titel { grid-row: 1; font: var(--type-h3); font-size: var(--fs-1); }
.aikaart__prijs {
  grid-row: 2;
  font: var(--type-h3);
  color: var(--color-accent-text);
  white-space: nowrap;
}
.aikaart .pakketkaart__btw { grid-row: 3; }
.aikaart .pakketkaart__punt--eerste { grid-row: 4; }
.aikaart .pakketkaart__punt:not(.pakketkaart__punt--eerste) { grid-row: 5; }
.aikaart__cta {
  grid-row: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: end;
  justify-self: start;
  width: max-content;
  margin-block-start: var(--sp-1);
  background: var(--color-action);
  color: var(--color-text);
  font-size: var(--fs--1);
}
.aikaart__cta:hover { background: var(--color-action-hover); }
.boog__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.boog__kop { font: var(--type-label); color: var(--color-text-subtle); }
.boog__prijs {
  margin-block-start: var(--sp-0);
  font: var(--type-h2);
  font-size: clamp(2.4rem, 1.9rem + 2vw, 3.4rem);
  line-height: 1.05;
  color: var(--color-accent-text);
}
.prijsgroep--boog .pakketkaart__punt { width: 100%; }
.prijsgroep--boog .pakketkaart__punt--eerste {
  margin-block-start: var(--sp-1);
  border-block-start: 1px solid var(--color-border);
}
.boog__cta { width: 100%; margin-block-start: var(--sp-2); }

/* De verdiepingspagina bevat de volledige drie pakketten. */
/* De drie volledige pakketten. Acht gedeelde rijen: naam, erfenislabel,
   doelgroep, prijs, btw, vijf punten, termijn en knop. Elke kolom zet zijn
   inhoud in dezelfde rij, dus de lijnen lopen door ongeacht de tekstlengte. */
.websitepakketten-v7__grid { display: grid; gap: var(--sp-1); }
.websitepakket-v7 {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 8;
  min-width: 0;
  padding: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-soft);
  background: var(--color-surface);
}
.websitepakket-v7--accent { border-color: var(--color-accent); }
.websitepakket-v7__kop {
  grid-row: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-0);
  align-items: center;
}
.websitepakket-v7__icoon {
  width: 32px;
  height: 32px;
  color: var(--color-accent-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.websitepakket-v7__naam { font: var(--type-h3); }
.websitepakket-v7__label {
  grid-row: 2;
  align-self: end;
  padding-block-start: var(--sp-1);
  color: var(--color-accent-text);
  font: var(--type-label);
}
.websitepakket-v7__voor {
  grid-row: 3;
  padding-block-start: var(--sp-0);
  color: var(--color-text-subtle);
  font: var(--type-body-sm);
}
.websitepakket-v7__prijs {
  grid-row: 4;
  padding-block-start: var(--sp-1);
  font: var(--type-h2);
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem);
  line-height: 1.1;
  color: var(--color-accent-text);
  white-space: nowrap;
}
.websitepakket-v7__vanaf { font: var(--type-body-sm); color: var(--color-text-subtle); }
.websitepakket-v7__btw { grid-row: 5; font: var(--type-caption); color: var(--color-text-subtle); }
.websitepakket-v7__lijst {
  grid-row: 6;
  display: grid;
  gap: var(--sp-0);
  align-content: start;
  margin-block-start: var(--sp-1);
  padding-block-start: var(--sp-1);
  border-block-start: 1px solid var(--color-border);
}
.websitepakket-v7__lijst li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-0);
  align-items: start;
  font: var(--type-body-sm);
}
.websitepakket-v7__lijst svg,
.websitepakket-v7__termijn svg {
  width: 18px;
  height: 18px;
  margin-block-start: 2px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.websitepakket-v7__termijn {
  grid-row: 7;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-0);
  align-items: start;
  align-content: start;
  margin-block-start: var(--sp-1);
  padding-block-start: var(--sp-1);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  font: var(--type-body-sm);
}
.websitepakket-v7__cta { grid-row: 8; align-self: end; margin-block-start: var(--sp-1); }
.websitepakket-v7 .button { width: 100%; }
.websitepakketten-v7__standaard {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2);
  border-inline-start: 2px solid var(--color-accent);
  background: var(--color-surface);
}

.vragen-contact-v7__vragen { display: grid; gap: var(--sp-2); }
.vragen-contact-v7__lijst { min-width: 0; }
.contact-v7 {
  display: grid;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
  padding: var(--sp-2);
  border-radius: var(--radius-soft);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.contact-v7__intro { align-content: start; }
.contact-v7__kanalen { display: grid; justify-items: start; gap: var(--sp-1); }
.contact-v7__intro .link { color: var(--color-text-inverse); }
.contact-v7__intro .button:focus-visible,
.contact-v7__intro .link:focus-visible { outline-color: var(--color-text-inverse); }
.contact-v7__form {
  padding: var(--sp-2);
  border-radius: calc(var(--radius-soft) - 6px);
  background: var(--color-surface);
  color: var(--color-text);
}
.contact-v7__form .button { justify-self: start; }

@media (min-width: 768px) {
  .groeiscan-v7__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
  /* De vier uitkomsten liggen in een 2x2 binnen de ellips; de knooppunten in de
     SVG staan op de ellipsrand zelf, dus baan en punten kunnen niet los raken.
     De verhouding van de viewBox stuurt de hoogte van het hele blok. */
  .groeiscan-v7__uitkomsten {
    aspect-ratio: 650 / 600;
    align-content: center;
    column-gap: clamp(120px, 22%, 190px);
    row-gap: clamp(var(--sp-3), 24%, 168px);
    padding: 7%;
  }
  .groeiscan-label { max-width: 200px; justify-self: center; }
  .groeiscan-v7__baan {
    position: absolute;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--color-action);
    stroke-width: 1.5;
    opacity: .45;
    z-index: -1;
  }
  .groeiscan-v7__baan circle { fill: var(--color-bg-inverse); }
  .groeiscan-v7__kern {
    position: absolute;
    display: grid;
    place-items: center;
    width: clamp(96px, 17%, 148px);
    aspect-ratio: 1;
    inset: 50% auto auto 50%;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-accent-text);
    transform: translate(-50%, -50%);
  }
  .groeiscan-v7__kern svg { width: 44%; }

  .ai-uitnodiging__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--sp-3); }
  .ai-uitnodiging__actie { flex-direction: row; align-items: center; }
  .ai-uitnodiging__actie .button { flex: 1 1 auto; text-align: center; }

  .over-v7 { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: var(--sp-3); }
  .over-v7__beeld { aspect-ratio: 16 / 11; }

  .zoekbewijs { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--sp-3); }
  .aikaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-2); }
  .aikaarten .aikaart:last-child {
    padding-inline-start: var(--sp-2);
    border-inline-start: 1px solid var(--color-border);
  }

  .websitepakketten-v7__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .websitepakketten-v7__standaard { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .vragen-contact-v7__vragen { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: start; }
  .contact-v7 { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); padding: var(--sp-3); }
}

@media (min-width: 900px) {
  .pakketrij { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prijzen-v7__compositie {
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
    align-items: start;
  }
  .prijsgroep--websites { grid-column: 1; grid-row: 1; }
  /* De AI-groep loopt over beide kolommen. In de referentie staat de boog ook
     langs AI, maar onze AI-uitleg is een stuk langer dan de tekst in het beeld;
     doorlopen zou daar een leeg boogstuk van honderden pixels opleveren. */
  .prijsgroep--ai { grid-column: 1 / -1; grid-row: 2; }
  .prijsgroep--boog {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-block-start: var(--sp-3);
    padding-inline: var(--sp-2);
  }

  /* De baan is exact even hoog als de viewBox (200), zodat een knooppunt op
     y% van de baan hetzelfde punt is als y% van het pad. --x en --y komen uit
     de padcoördinaten: 144/445/728/1016 op 1200 en 180/107/30/153 op 200. */
  .werkwijze-v7__baan {
    height: 240px;
    margin-block: 76px 180px;
  }
  .werkwijze-v7__pad,
  .werkwijze-v7 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .werkwijze-v7__pad {
    display: block;
    overflow: visible;
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 3;
    stroke-linecap: round;
    opacity: .62;
  }
  .werkwijze-v7 { display: block; gap: 0; }
  .werkwijze-v7::before { display: none; }
  .werkwijze-v7__stap {
    --label: min(15rem, 21vw);
    position: absolute;
    inset-block-start: var(--y);
    inset-inline-start: var(--x);
    width: var(--label);
    margin-inline-start: calc(var(--label) / -2);
    /* icoonrij 64 plus gap 10 plus de helft van de puntrij 20 */
    margin-block-start: -84px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    row-gap: 10px;
  }
  .werkwijze-v7__stap--een  { --x: 12%;     --y: 90%; }
  .werkwijze-v7__stap--twee { --x: 37.08%;  --y: 53.5%; }
  .werkwijze-v7__stap--drie { --x: 60.67%;  --y: 15%; }
  .werkwijze-v7__stap--vier { --x: 84.67%;  --y: 76.5%; }
  .werkwijze-v7__icoon { grid-column: 1; grid-row: 1; width: 64px; height: 64px; }
  .werkwijze-v7__punt { grid-column: 1; grid-row: 2; margin-block-start: 0; }
  .werkwijze-v7__tekst { grid-column: 1; grid-row: 3; margin-block-start: var(--sp-1); }
  .werkwijze-v7__tekst p { margin-block-start: calc(var(--sp-0) * .75); }
}

@media (hover: hover) and (pointer: fine) {
  .websitepakket-v7,
  .pakketkaart {
    transition: border-color .2s, transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease-out;
  }
  /* De kaart komt als geheel omhoog en krijgt schaduw. Dat mag, want alle drie
     de kaarten staan in rust nog steeds op dezelfde lijnen; alleen de kaart
     waar de muis op staat wijkt tijdelijk af. */
  .websitepakket-v7:hover,
  .pakketkaart:hover {
    border-color: var(--color-accent);
    transform: translateY(-6px);
    box-shadow: 0 20px 44px -20px rgba(46, 61, 0, .5);
  }
}

/* ---------- de kop die per woord omhoogkomt ----------
 * Elk woord staat in twee spans. De buitenste klipt, de binnenste schuift. De
 * vertraging loopt op met nth-child en niet met een inline stijl per woord.
 *
 * Zonder JavaScript blijft de kop gewoon staan, want de begintoestand hangt aan
 * de klasse js op html en die wordt pas door het script gezet. */

.kop-woorden > span { display: inline-block; overflow: hidden; vertical-align: bottom; }
.kop-woorden > span > span { display: inline-block; }

.js .kop-woorden > span > span { transform: translateY(105%); }
.js .is-zichtbaar .kop-woorden > span > span,
.js .kop-woorden.is-zichtbaar > span > span {
  transform: none;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.js .is-zichtbaar .kop-woorden > span:nth-child(1) > span { transition-delay: 0ms; }
.js .is-zichtbaar .kop-woorden > span:nth-child(2) > span { transition-delay: 60ms; }
.js .is-zichtbaar .kop-woorden > span:nth-child(3) > span { transition-delay: 120ms; }
.js .is-zichtbaar .kop-woorden > span:nth-child(4) > span { transition-delay: 180ms; }
.js .is-zichtbaar .kop-woorden > span:nth-child(5) > span { transition-delay: 240ms; }
.js .is-zichtbaar .kop-woorden > span:nth-child(6) > span { transition-delay: 300ms; }
.js .is-zichtbaar .kop-woorden > span:nth-child(7) > span { transition-delay: 360ms; }
.js .is-zichtbaar .kop-woorden > span:nth-child(8) > span { transition-delay: 420ms; }

/* ---------- kaarten die na elkaar scherp worden ----------
 * Een rij die [data-reveal-groep] draagt beweegt zelf niet. De beweging zit in
 * de kinderen, die na elkaar van onscherp naar scherp komen. Dezelfde waarnemer
 * als de gewone reveal; het attribuut bestaat alleen om die waarnemer te laten
 * aanslaan zonder dat de rij ook zelf verschuift.
 *
 * Tot 14 augustus 2026 heetten deze selectors .pakket-rij en .sessie-rij. Die
 * klassen stonden in geen enkel HTML-bestand, dus de opmaak was dode letter. Het
 * neutrale attribuut werkt op elke rij: pakketten, AI-kaarten en pijnpunten.
 *
 * De onscherpte staat hier wel en op tekstblokken niet. Een kaart heeft een
 * begrensd oppervlak; een tekstblok kan een halve pagina beslaan en dan rekent
 * de browser die vervaging elk beeldje opnieuw uit. */

.js [data-reveal-groep] > * {
  opacity: 0;
  filter: blur(var(--reveal-onscherp));
  transform: translateY(var(--reveal-afstand));
}
.js [data-reveal-groep].is-zichtbaar > * {
  opacity: 1;
  filter: none;
  transform: none;
  transition:
    opacity var(--reveal-duur) var(--reveal-curve),
    filter var(--reveal-duur) var(--reveal-curve),
    transform var(--reveal-duur) var(--reveal-curve);
}
.js [data-reveal-groep].is-zichtbaar > *:nth-child(2) { transition-delay: var(--reveal-stap); }
.js [data-reveal-groep].is-zichtbaar > *:nth-child(3) { transition-delay: calc(var(--reveal-stap) * 2); }
.js [data-reveal-groep].is-zichtbaar > *:nth-child(n + 4) { transition-delay: calc(var(--reveal-stap) * 3); }

/* Het blok met de kop erin: de woorden schuiven al, dus het blok eromheen doet
   alleen de fade. */
.js .reveal:has(.kop-woorden) { transform: none; }

/* ---------- contact ---------- */

.contact__blok { display: grid; gap: var(--sp-1); }
.contact__rij { display: flex; flex-wrap: wrap; gap: var(--sp-0); align-items: baseline; }
.contact__rij dt { font: var(--type-caption); color: var(--color-text-subtle); min-width: 7em; }
.contact__rij dd { font: var(--type-body); }

.form__rij + .form__rij { margin-block-start: var(--sp-1); }
select.field__input { appearance: none; background-image: none; }

/* Het honeypot-veld voor Netlify. Blijft in de DOM staan en gaat uit beeld. */
.hp { position: absolute; inset-inline-start: -9999px; }

/* ---------- footer ---------- */

.footer__kolom { font: var(--type-caption); }
.footer__kolom a { text-decoration: underline; text-underline-offset: 3px; }
.footer__kolom a:hover { color: var(--color-text-inverse); }
.footer__kolom a:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: 2px; }

/* ---------- beweging bij het in beeld komen ----------
 * De waarnemer zet .is-zichtbaar zodra een blok in beeld komt. Zonder
 * JavaScript blijft alles staan waar het staat, want de begintoestand wordt
 * pas gezet zodra het script draait. */

.js .reveal { opacity: 0; transform: translateY(var(--reveal-afstand)); }
.js .reveal.is-zichtbaar {
  opacity: 1;
  transform: none;
  transition: opacity var(--reveal-duur) var(--reveal-curve), transform var(--reveal-duur) var(--reveal-curve);
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.is-zichtbaar { transition: none; }
  .js [data-reveal-groep] > * { opacity: 1; filter: none; transform: none; }
  .js [data-reveal-groep].is-zichtbaar > * { transition: none; }
  .js [data-reveal-groep].is-zichtbaar > *:nth-child(2),
  .js [data-reveal-groep].is-zichtbaar > *:nth-child(3),
  .js [data-reveal-groep].is-zichtbaar > *:nth-child(n + 4) { transition-delay: 0s; }
  .nav__uitklap, .nav__knop svg, .pijler__meer::after { transition: none; }
  .zoekdemo__vraag::after,
  .zoekdemo__cursor,
  .zoekdemo__resultaat-inhoud {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .zoekdemo__overslaan { display: none; }

  /* De loper wordt door site.js al niet aangemaakt bij deze voorkeur. Deze twee
     regels vangen de wissel halverwege af, wanneer het element er al staat. */
  .werkwijze-v7__loper { display: none; }
  .werkwijze-v7__punt { transition: none; }

  /* De kop en de kaarten staan meteen goed. Geen vertraging, geen onscherpte,
     geen verschuiving, want dat is precies waar deze voorkeur over gaat. */
  .js .kop-woorden > span > span { transform: none; transition: none; }
  .websitepakket-v7,
  .pakketkaart { transition: none; }
  .websitepakket-v7:hover,
  .pakketkaart:hover { transform: none; }
}

/* ---------- de AI-scan die op de homepage openklapt ----------
 * Het blok staat in de gewone leesbreedte en niet als overlay: de scan is
 * inhoud van deze sectie en niet iets dat de pagina overneemt. */

.scanblok {
  position: relative;
  margin-block-start: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-soft);
  background: var(--color-surface);
}
.scanblok[hidden] { display: none; }
/* De kaart uit ai-scan.css draagt daar zijn eigen rand en padding; binnen dit
   blok zou dat een kader in een kader worden. */
.scanblok .scan__kaart {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.scanblok__sluit {
  position: absolute;
  inset-block-start: var(--sp-0);
  inset-inline-end: var(--sp-0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-subtle);
  cursor: pointer;
}
.scanblok__sluit:hover { background: var(--color-bg); color: var(--color-text); }
.scanblok__sluit:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.scan__geenjs {
  padding: var(--sp-1);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-subtle);
}

/* ---------- contextavatar ----------
 * De opbouw komt van de live site: de cirkel los rechts, de tip erlangs, en een
 * kaart die bij een klik opengaat met een zin die getypt wordt.
 *
 * Alle waarden lopen via de tokens en de bibliotheek. In de eerste opzet van
 * ronde 6 stonden hier losse hexkleuren en losse pixelmaten, overgenomen uit de
 * live CSS die van vóór het designsysteem is. De knoppen zijn daarom nu
 * .button--whatsapp en .button--primair uit de bibliotheek, en niet een eigen
 * groen en een eigen zwart.
 *
 * Wat wel in pixels blijft: de maat van het portret en de positie van de
 * widget. Die horen niet bij het typografische raster maar bij het scherm, en
 * een zwevend element dat meeschaalt met de tekstgrootte wordt op een grote
 * viewport te groot. */

.avatar-widget {
  position: fixed;
  inset-block-end: var(--sp-2);
  inset-inline-end: var(--sp-2);
  z-index: 85;
  display: flex;
  align-items: flex-end;
  gap: var(--sp-0);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .5s cubic-bezier(.19, 1, .22, 1), transform .5s cubic-bezier(.19, 1, .22, 1);
}
.avatar-widget.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.avatar-widget.open .avatar-tip { display: none; }

.avatar-stack { display: flex; flex-direction: column; align-items: flex-end; }

/* De tip die meeloopt met de sectie. Alleen op desktop; op een telefoon kost
   hij de halve breedte en zegt hij hetzelfde als de kaart eronder. */
.avatar-tip {
  position: relative;
  max-width: 30ch;
  margin-block-end: var(--sp-0);
  padding: var(--sp-0) var(--sp-1);
  /* De tip is een echte knop sinds de avatar op elke pagina staat. Dat scheelt
     de eigen toetsafhandeling voor Enter en spatie, en een schermlezer hoort nu
     dat het iets is om aan te klikken zonder dat er een rol op geplakt wordt.
     Een knop brengt wel zijn eigen rand, uitlijning en lettertype mee, dus die
     worden hier teruggezet. */
  appearance: none;
  border: 0;
  border-radius: 10px;
  border-inline-start: 2px solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--type-body-sm);
  text-align: start;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 10%, transparent);
  cursor: pointer;
  transition: opacity .2s, transform .25s;
}
.avatar-tip.fading { opacity: 0; transform: translateX(6px); }
.avatar-tip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* Het portret en de sluitknop zitten sinds 14 augustus in een eigen omhulsel.
   Daarvoor stond de sluitknop binnen het portret, en het portret droeg
   role="button"; een knop in een knop is voor een schermlezer en voor het
   toetsenbord geen te bedienen combinatie. Nu zijn het twee losse knoppen naast
   elkaar, en het omhulsel draagt de plaatsing. */
.avatar-cirkelwrap { position: relative; flex-shrink: 0; }

.avatar-circle {
  display: block;
  width: 84px;
  height: 84px;
  padding: 0;
  appearance: none;
  border-radius: 50%;
  overflow: visible;
  background: var(--color-bg-alt);
  border: 2px solid var(--color-accent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-text) 12%, transparent);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .25s;
}
.avatar-circle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.avatar-circle .avatar-img-wrap { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.avatar-circle img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (hover: hover) and (pointer: fine) {
  .avatar-circle:hover {
    transform: scale(1.05);
    box-shadow: 0 14px 32px color-mix(in srgb, var(--color-text) 16%, transparent);
  }
}

/* De sluitknop hangt op de rand van het portret. Hij is 26 pixels en daarmee
   kleiner dan de 44 die voor gewone knoppen geldt; het portret eronder is de
   grote knop, en die sluit de kaart ook. */
.avatar-close {
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -6px;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: var(--color-text);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.avatar-close:hover { background: var(--color-accent-text); transform: scale(1.08); }
.avatar-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.avatar-widget.open .avatar-close { display: inline-flex; }

/* De kaart. Zelfde vlak, rand en radius als een kaart uit de bibliotheek.
   Hij krijgt de focus zodra hij opengaat, want in de opbouw staat hij vóór het
   portret en zonder die stap loopt Tab de verkeerde kant op. Bij een klik met de
   muis blijft de ring weg; wie met het toetsenbord opende ziet hem wel. */
.avatar-chat:focus { outline: none; }
.avatar-chat:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.avatar-chat {
  position: relative;
  display: none;
  width: 320px;
  margin-block-end: var(--sp-0);
  padding: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: 0 16px 44px color-mix(in srgb, var(--color-text) 14%, transparent);
}
.avatar-widget.open .avatar-chat { display: block; }
/* Het puntje dat naar het portret wijst. */
.avatar-chat::after {
  content: '';
  position: absolute;
  inset-block-end: -7px;
  inset-inline-end: 30px;
  width: 12px;
  height: 12px;
  background: var(--color-surface);
  border-inline-end: 1px solid var(--color-border);
  border-block-end: 1px solid var(--color-border);
  transform: rotate(45deg);
}

.avatar-chat-header {
  display: flex;
  align-items: center;
  gap: var(--sp-0);
  margin-block-end: var(--sp-1);
  padding-block-end: var(--sp-1);
  border-block-end: 1px solid var(--color-border);
}
.avatar-chat-header .ach-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.avatar-chat-header .ach-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-chat-header .ach-name { font: var(--type-label); color: var(--color-text); }
.avatar-chat-header .ach-status {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-block-start: 2px;
  font: var(--type-caption);
  color: var(--color-accent-text);
}
.avatar-chat-header .ach-status::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.avatar-chat-body {
  min-height: 4.5em;
  margin-block-end: var(--sp-1);
  font: var(--type-body-sm);
  color: var(--color-text);
}
/* De cursor die tijdens het typen knippert. Verdwijnt zodra de zin af is. */
.avatar-chat-body .typing-cursor {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-inline-start: 1px;
  background: var(--color-text);
  vertical-align: text-bottom;
  animation: avatar-blink .8s step-end infinite;
}
@keyframes avatar-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* De acties zijn gewone bibliotheekknoppen. Ze staan onder elkaar en vullen de
   breedte, want de kaart is smal en twee knoppen naast elkaar breken dan af. */
.avatar-chat-actions { display: grid; gap: var(--sp-0); }
.avatar-chat-actions .button { width: 100%; }
/* De bibliotheek maat alleen het WhatsApp-icoon; de tweede knop draagt hier
   een pijl of een agenda-icoon en zou zonder deze regel op zijn viewBox van
   24 bij 24 blijven staan en de knop drie regels hoog maken. */
.avatar-chat-actions .button svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Bellen stond tot 14 augustus alleen in de contactdock op de subpagina's. Die
   dock is weg omdat de avatar er nu ook staat, en zonder deze regel zou de site
   een contactmogelijkheid verliezen. Hij hoort onder de knoppen en niet ertussen:
   het is de uitwijk voor wie niet wil appen, geen derde hoofdactie. */
.avatar-chat-bellen {
  margin-block-start: var(--sp-0);
  font: var(--type-caption);
  color: var(--color-text-subtle);
  text-align: center;
}
.avatar-chat-bellen a { color: inherit; text-decoration: underline; }
.avatar-chat-bellen a:hover { color: var(--color-text); }
.avatar-chat-bellen a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .avatar-widget { inset-block-end: var(--sp-1); inset-inline-end: var(--sp-1); }
  .avatar-circle { width: 64px; height: 64px; }
  /* De tip stond hier op display: none, want permanent naast het portret kost
     hij op een telefoon de halve breedte. Sinds 19 augustus komt hij bij een
     contextwissel vier seconden op en trekt hij zich daarna terug, zodat de
     zin bij de sectie wel gelezen wordt en het scherm daarna weer vrij is.
     Geen display: none meer, want daar is geen overgang op mogelijk, en geen
     pointer-events zolang hij weg is, zodat een tik door de tip heen op de
     pagina eronder landt. De breedte laat het portret en de marges staan:
     op 360 pixels blijft er 220 over van de 254 die er zijn. Zie site.js,
     blok 8, toonTipEven. */
  .avatar-tip {
    max-width: calc(100vw - 140px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(6px);
  }
  .avatar-tip.toont {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .avatar-chat { width: calc(100vw - 96px); max-width: 300px; }
  .avatar-chat::after { inset-inline-end: 24px; }
  .avatar-close { inset-block-start: -4px; inset-inline-end: -4px; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar-widget,
  .avatar-tip,
  .avatar-circle { transition: none; }
  .avatar-circle:hover { transform: none; }
  .avatar-chat-body .typing-cursor { animation: none; }
}

/* De dock stond linksonder en de avatar rechtsonder; op de smalle band
   daartussen raakten ze elkaar. Sinds 14 augustus staat de avatar op elke
   pagina en is de dock overal weggehaald, dus dit samenspel bestaat niet meer.
   De regel blijft staan omdat de dock als component in de bibliotheek blijft:
   komt hij ergens terug naast de avatar, dan is dit de maat die werkte. */
@media (min-width: 861px) and (max-width: 1100px) {
  .contact-dock { max-width: 46vw; }
}

/* ---------- de doorlopende gloed ----------
 * Eén laag achter de hele pagina, met vlekken die door de secties heen te zien
 * zijn. Daardoor loopt het licht door van de hero, langs de lichte vlakken, tot
 * in de donkere blokken eronder, in plaats van bij elke sectiegrens opnieuw te
 * beginnen.
 *
 * Drie dingen maken dit anders dan een gewone gradient, en alle drie zijn nodig:
 *
 * 1. Een blur over de hele laag, met de laag zestien procent uitstekend zodat
 *    de blur niet aan de rand afknipt. Dat maakt van cirkels wolken.
 * 2. Een korrellaag met mix-blend-mode overlay. Zonder korrel leest een gladde
 *    gradient als een verloop uit een programma.
 * 3. Vijf kleurstops per vlek, zodat de kleur uitloopt in plaats van in een
 *    ring te eindigen.
 *
 * De eenheid is cqmin, een percentage van de kortste zijde van de laag.
 * Daardoor schaalt de blur mee en ziet hij er op een telefoon hetzelfde uit als
 * op een breed scherm.
 *
 * De drie vlekken in --gloed-donker halen het donkerste punt terug op de kleur
 * die zonder gloed op de site staat. Zonder die drie tilt de blur de hele laag
 * op en blijft er een middentint over.
 *
 * Alles wat je hier zou willen wijzigen staat als token in het blok hieronder.
 */

:root {
  /* De drie kleuren van de gloed. Ze verwijzen naar het palet, dus een
     paletwijziging werkt hier vanzelf door. Wil je alleen de gloed anders,
     wijzig dan deze drie. */
  --gloed-licht:  var(--lime);
  --gloed-midden: var(--olive);
  --gloed-donker: var(--olive-deep);

  /* Hoe onscherp en hoeveel de laag uitsteekt. De tweede hoort minstens het
     dubbele van de eerste te zijn, anders knipt de blur af aan de rand. */
  --gloed-blur: 8cqmin;
  --gloed-overhang: 16cqmin;

  /* Hoeveel de korrel meedoet. Op nul is de gradient glad. */
  --gloed-korrel: .305;

  /* Hoeveel de secties van de gloed doorlaten. Hoger is dekkender. */
  --gloed-door-licht: 82%;
  --gloed-door-alt: 74%;
  --gloed-door-donker: 74%;
}

.paginagloed {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}

.paginagloed__kleur {
  position: absolute;
  inset: calc(var(--gloed-overhang) * -1);
  filter: blur(var(--gloed-blur));
  background-color: var(--color-bg-inverse);
  background-image:
    /* Drie vlekken in de basiskleur, bovenop en compact. Ze halen het donker
       terug op hun eigen plek en laten het licht ertussen staan. */
    radial-gradient(circle at 14% 12%,
      color-mix(in srgb, var(--gloed-donker) 100%, transparent) 0%,
      color-mix(in srgb, var(--gloed-donker) 84%, transparent) 7%,
      color-mix(in srgb, var(--gloed-donker) 50%, transparent) 14%,
      color-mix(in srgb, var(--gloed-donker) 16%, transparent) 21%,
      transparent 28%),
    radial-gradient(circle at 94% 38%,
      color-mix(in srgb, var(--gloed-donker) 100%, transparent) 0%,
      color-mix(in srgb, var(--gloed-donker) 84%, transparent) 7%,
      color-mix(in srgb, var(--gloed-donker) 50%, transparent) 14%,
      color-mix(in srgb, var(--gloed-donker) 16%, transparent) 21%,
      transparent 28%),
    radial-gradient(circle at 6% 88%,
      color-mix(in srgb, var(--gloed-donker) 100%, transparent) 0%,
      color-mix(in srgb, var(--gloed-donker) 84%, transparent) 8%,
      color-mix(in srgb, var(--gloed-donker) 50%, transparent) 16%,
      color-mix(in srgb, var(--gloed-donker) 16%, transparent) 24%,
      transparent 32%),

    /* De zes lichte vlekken. */
    radial-gradient(circle at 78% 8%,
      color-mix(in srgb, var(--gloed-licht) 62%, transparent) 0%,
      color-mix(in srgb, var(--gloed-licht) 52%, transparent) 10%,
      color-mix(in srgb, var(--gloed-licht) 31%, transparent) 20%,
      color-mix(in srgb, var(--gloed-licht) 10%, transparent) 30%,
      transparent 40%),
    radial-gradient(circle at 62% 22%,
      color-mix(in srgb, var(--gloed-midden) 100%, transparent) 0%,
      color-mix(in srgb, var(--gloed-midden) 84%, transparent) 11%,
      color-mix(in srgb, var(--gloed-midden) 50%, transparent) 22%,
      color-mix(in srgb, var(--gloed-midden) 16%, transparent) 33%,
      transparent 45%),
    radial-gradient(circle at 14% 44%,
      color-mix(in srgb, var(--gloed-midden) 74%, transparent) 0%,
      color-mix(in srgb, var(--gloed-midden) 62%, transparent) 11%,
      color-mix(in srgb, var(--gloed-midden) 37%, transparent) 22%,
      color-mix(in srgb, var(--gloed-midden) 12%, transparent) 33%,
      transparent 45%),
    radial-gradient(circle at 88% 58%,
      color-mix(in srgb, var(--gloed-licht) 44%, transparent) 0%,
      color-mix(in srgb, var(--gloed-licht) 37%, transparent) 11%,
      color-mix(in srgb, var(--gloed-licht) 22%, transparent) 22%,
      color-mix(in srgb, var(--gloed-licht) 7%, transparent) 33%,
      transparent 45%),
    radial-gradient(circle at 34% 72%,
      color-mix(in srgb, var(--gloed-midden) 96%, transparent) 0%,
      color-mix(in srgb, var(--gloed-midden) 81%, transparent) 11%,
      color-mix(in srgb, var(--gloed-midden) 48%, transparent) 22%,
      color-mix(in srgb, var(--gloed-midden) 15%, transparent) 33%,
      transparent 45%),
    radial-gradient(circle at 78% 92%,
      color-mix(in srgb, var(--gloed-midden) 68%, transparent) 0%,
      color-mix(in srgb, var(--gloed-midden) 57%, transparent) 11%,
      color-mix(in srgb, var(--gloed-midden) 34%, transparent) 22%,
      color-mix(in srgb, var(--gloed-midden) 11%, transparent) 33%,
      transparent 45%);
}

/* Op een smal scherm is de pagina vier keer zo hoog als op een breed, terwijl
   de vlekken op fracties van die hoogte staan. In de eerste schermvulling zit
   dan bijna niets en is het effect weg, precies op het formaat waar de meeste
   bezoekers zitten.

   Daarom herhaalt het patroon zich daar per tweeënhalve schermhoogte. Dat geeft
   dezelfde afwisseling van licht en donker als op een breed scherm, en de
   naad valt weg onder de blur. */
@media (max-width: 860px) {
  .paginagloed__kleur {
    background-size: 100% 250vh;
    background-repeat: repeat-y;
  }
}

.paginagloed__korrel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--gloed-korrel);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* De pagina-inhoud staat boven de laag. */
body:has(.paginagloed) { position: relative; }
body:has(.paginagloed) > main,
body:has(.paginagloed) > footer { position: relative; z-index: 1; }

/* De secties laten de gloed door. De donkere vlakken faden bovendien aan hun
   boven- en onderrand uit, zodat er een overgang staat waar eerst een streep
   stond. */
body:has(.paginagloed) main > section:not(.section--inverse),
body:has(.paginagloed) main > article.section {
  background: color-mix(in srgb, var(--color-bg) var(--gloed-door-licht), transparent);
}
body:has(.paginagloed) main > .section--alt {
  background: color-mix(in srgb, var(--color-bg-alt) var(--gloed-door-alt), transparent);
}
body:has(.paginagloed) main > .section--inverse {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--color-bg-inverse) var(--gloed-door-donker), transparent) 13%,
    color-mix(in srgb, var(--color-bg-inverse) var(--gloed-door-donker), transparent) 87%,
    transparent 100%
  );
}

/* De hero begint bovenaan de pagina, dus alleen onderaan faden. */
body:has(.paginagloed) main > .hero {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--color-bg-inverse) 72%, transparent) 0%,
    color-mix(in srgb, var(--color-bg-inverse) 72%, transparent) 84%,
    transparent 100%
  );
}

/* De voettekst sluit de pagina af en fadet alleen aan de bovenkant in. */
body:has(.paginagloed) > footer.section--inverse {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--color-bg-inverse) var(--gloed-door-donker), transparent) 22%,
    color-mix(in srgb, var(--color-bg-inverse) var(--gloed-door-donker), transparent) 100%
  );
}

/* Wat op een sectie ligt blijft dekkend. Een kaart die de gloed doorlaat wordt
   onleesbaar zodra het licht eronder verschuift. */
body:has(.paginagloed) .card,
body:has(.paginagloed) .reden,
body:has(.paginagloed) .ai-uitnodiging__inner,
body:has(.paginagloed) .zoekdemo,
body:has(.paginagloed) .pijler,
body:has(.paginagloed) .scanblok,
body:has(.paginagloed) .blogrij,
body:has(.paginagloed) .blog-uitgelicht__citaat,
body:has(.paginagloed) .avatar-chat,
body:has(.paginagloed) .avatar-tip { background: var(--color-surface); }

/* De navigatiebalk houdt zijn eigen vlak zodra hij een achtergrond krijgt,
   anders verschuift de kleur eronder terwijl je scrollt. */
body:has(.paginagloed) .nav.is-gescrold { background: var(--color-bg); }

/* Zonder :has valt alles terug op de effen kleuren uit de bibliotheek en is de
   gloed onzichtbaar. Dat is een oudere browser zonder gradient, geen kapotte
   pagina. */
@supports not selector(:has(*)) {
  .paginagloed { display: none; }
}