/* kit: standaard-opmaak van de registratie-kit */
/* Eén vormtaal voor de meegeleverde pagina's (beheer, mijn gegevens, wachtwoord, activeren):
   alleen design-systeem-tokens, dus elk project krijgt 'm in z'n eigen look. */
.kit-pagina { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-2); }
.kit-pagina .kit-kop { max-width: 46rem; }
.kit-pagina .kit-eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-primary); }
.kit-pagina .kit-titel { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-heading); }
.kit-pagina .kit-lead { margin: 0; max-width: 40rem; font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.kit-pagina .kit-paneel { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--color-bg-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); min-width: 0; }
.kit-pagina .kit-paneel-primair { border-top: 3px solid var(--color-primary); }
.kit-pagina .kit-voet { margin: 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-muted); }
.kit-pagina .kit-vrij { margin: 0; }
/* Een formulier of lijst ín een paneel is geen tweede kaart. */
.kit-pagina .kit-paneel .inline-form { margin: 0; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; }
.kit-pagina .inline-form-title { font-size: var(--text-lg); margin-bottom: var(--space-4); }
.kit-pagina .view { gap: var(--space-4); }
.kit-pagina .vh-title h1 { font-size: var(--text-xl); }

/* Beheer: de gebruikers zijn het werk (breed), registreren en de rollen staan ernaast. */
.kit-beheer .kit-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); align-items: start; }
.kit-beheer .kit-zij { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; }
.kit-beheer .kit-hoofd .table-wrap { box-shadow: var(--shadow-md); }

/* Mijn gegevens en wachtwoord: op de as van de app, één rustig paneel met uitleg ernaast. */
.kit-account .kit-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 36rem) minmax(14rem, 18rem); align-items: start; }
.kit-account .kit-uitleg { margin: 0; padding-top: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }

/* Activeren: je komt uit een mail en hebt één taak — een gerichte kolom, kop en formulier op één as. */
.kit-activeren { max-width: 34rem; margin-inline: auto; text-align: left; }
.kit-activeren .kit-kop { max-width: none; }
/* Eén formulier op z'n eigen pagina: de paginakop zegt al wat het is — geen tweede titel erboven. */
.kit-account .inline-form-title, .kit-activeren .inline-form-title { display: none; }

@media (max-width: 900px) {
  .kit-pagina { gap: var(--space-6); }
  .kit-beheer .kit-raster, .kit-account .kit-raster { grid-template-columns: 1fr; }
}

/* site (Helder): kleine aanvullingen bovenop het design-systeem */
.es-site .es-antwoord { margin-top: var(--space-8); font-size: var(--text-lg); color: var(--color-text-secondary); max-width: 60ch; }
.es-site .es-vlak { background: var(--color-bg-subtle); }
.es-site .es-portret { max-width: 22rem; justify-self: center; }
.es-site .section-title + p, .es-site p + .section-title { margin-top: var(--space-6); }

.es-site #contact .duo { align-items: start; }

.es-site .es-hero-breed { padding-bottom: var(--space-10); }
.es-site .es-hero-tekst { max-width: 46rem; }
.es-site .es-model-breed { margin-top: var(--space-10); max-width: 90rem; }
.es-site .es-model-breed .hero-beeld img { width: 100%; }

.es-site .es-hero-raster { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 60rem) { .es-site .es-hero-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); } }
.es-site .es-hero-raster .hero-title { margin: 0; font-size: var(--text-5xl); }
.es-site .es-hero-raster .hero-lead { margin-bottom: var(--space-6); font-size: var(--text-lg); }

/* kop (blauwdruk, 10-16): over de volle breedte op de papiergrond, inhoud op de as van de pagina,
   één haarlijn eronder. Naam links, menu rechts, Kennismaken als enige knop, Inloggen als stille link. */
.app-header { background: var(--color-bg); border-bottom: 1px solid var(--color-border); box-shadow: none; }
.app-header .tagline { display: none; }
.app-header .theme-toggle { display: none; }
.app-header .brand-mark.has-logo { height: 36px; min-width: 36px; }
.app-header .wordmark { font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.01em; }
@media (min-width: 60rem) {
  .app-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-8); min-height: 4.5rem;
    padding-inline: max(var(--container-padding), calc((100% - var(--container-max)) / 2 + var(--space-6) + var(--container-padding))); }
  .app-header .app-header-inner { display: contents; }
  .app-header .brand { grid-column: 1; grid-row: 1; }
  .app-header .chapters { display: none; }
  .app-header .hub-nav { grid-column: 2; grid-row: 1; justify-self: end; align-items: center; max-width: none; margin: 0; padding: 0; gap: var(--space-6); border: 0; background: transparent; box-shadow: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .app-header .hub-nav .hub-indicator { display: none; }
  .app-header .hub-tab { padding: var(--space-2) 0; border: 0; border-radius: 0; font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; color: var(--color-text-secondary); }
  .app-header .hub-tab .ht-icoon, .app-header .hub-tab .ht-glyph { display: none; }
  .app-header .hub-tab:hover { color: var(--color-text-heading); background: none; }
  .app-header .hub-tab[aria-current] { color: var(--color-text-heading); box-shadow: inset 0 -1px 0 var(--color-text-heading); }
  .app-header .hub-tab[data-page="page-contact"] { margin-left: var(--space-2); padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-text-on-primary); font-weight: 600; box-shadow: none; }
  .app-header .hub-tab[data-page="page-contact"]:hover { background: var(--color-primary-bright); color: var(--color-text-on-primary); }
  .app-header .persona-bar { grid-column: 3; grid-row: 1; padding-left: var(--space-6); border-left: 1px solid var(--color-border); }
}
.app-header .persona-login { padding: var(--space-2) 0; background: transparent; border: 0; color: var(--color-text-secondary); font-family: var(--font-body); font-size: var(--text-base); font-weight: 500; }
.app-header .persona-login:hover { background: transparent; color: var(--color-text-heading); }
@media (max-width: 59.99rem) { .app-header .app-header-inner { padding-inline: calc(var(--space-4) + var(--container-padding)); } }


/* landing (blauwdruk, 10-16): de pagina leest als een technische tekening; zie onderzoek-websites.md */
.es-b { --es-b-lijn: 1px solid var(--color-border); }
.es-b .es-b-label { max-width: none; margin: 0 0 var(--space-8); padding-top: var(--space-3); border-top: var(--es-b-lijn); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-link { font-weight: 600; color: var(--color-text-heading); text-decoration: none; border-bottom: 1px solid var(--color-primary); padding-bottom: 2px; white-space: nowrap; }
.es-b .es-b-link:hover { color: var(--color-primary); }
.es-b .es-b-hero { padding-block: var(--space-16) var(--space-24); }
.es-b .es-b-hero-raster { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 60rem) { .es-b .es-b-hero-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-16); } }
.es-b .es-b-kop { margin: 0; font-size: calc(var(--text-5xl) * 1.3); font-weight: 500; line-height: 1; letter-spacing: -0.035em; max-width: 12ch; text-wrap: balance; }
.es-b .es-b-lead { margin: 0 0 var(--space-6); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.es-b .es-b-acties { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.es-b .es-b-plaat { margin: var(--space-16) 0 0; }
.es-b .es-b-onderschrift { display: flex; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.es-b .es-b-onderschrift span:first-child { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding-top: 0.15em; }
.es-b .es-b-sectie { padding-block: var(--space-12) var(--space-24); }
.es-b .es-b-titel { margin: 0 0 var(--space-10); font-size: var(--text-4xl); font-weight: 500; letter-spacing: -0.03em; }
.es-b .es-b-groot { font-size: calc(var(--text-5xl) * 1.3); line-height: 1; letter-spacing: -0.035em; }
.es-b .es-b-kopregel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-10); }
.es-b .es-b-kopregel .es-b-titel { margin: 0; }
/* cellen met haarlijnen: het raster is de vorm */
.es-b .es-b-cellen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); background: var(--color-border); border: var(--es-b-lijn); border-radius: var(--radius-lg); overflow: hidden; }
.es-b .es-b-cellen li { background: var(--color-bg-surface); padding: var(--space-8) var(--space-6) var(--space-10); min-width: 0; }
.es-b .es-b-nr { display: block; margin-bottom: var(--space-12); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-primary); }
.es-b .es-b-cellen h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.es-b .es-b-cellen p { margin: 0; color: var(--color-text-secondary); }
.es-b .es-b-werk { display: grid; gap: var(--space-12) var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.es-b .es-b-project { min-width: 0; }
.es-b .es-b-lijst { padding: var(--space-6) var(--space-6) 0; background: var(--color-bg-subtle); border: var(--es-b-lijn); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-5); }
.es-b .es-b-lijst img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: var(--radius-md) var(--radius-md) 0 0; border: var(--es-b-lijn); border-bottom: 0; }
.es-b .es-b-projectregel { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.es-b .es-b-projectregel h3 { margin: 0; font-size: var(--text-xl); }
.es-b .es-b-project p { margin: 0; max-width: 48ch; color: var(--color-text-secondary); }
.es-b .es-b-contact { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .es-b .es-b-contact { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); } }
.es-b .es-b-zijtekst { margin: 0; max-width: 34ch; font-size: var(--text-lg); color: var(--color-text-secondary); }
.es-b #contact .inline-form, .es-b #contact form { max-width: none; box-shadow: none; }
/* het aanbod-component: cellen in hetzelfde haarlijnraster */
.es-b #aanbod .wd-titel { font-size: var(--text-4xl); font-weight: 500; letter-spacing: -0.03em; }
.es-b #aanbod .wd-kop { margin-bottom: var(--space-10); }
.es-b #aanbod .wd-kaarten { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1px; background: var(--color-border); border: var(--es-b-lijn); border-radius: var(--radius-lg); overflow: hidden; }
.es-b #aanbod .wd-kaart, .es-b #aanbod .wd-kaart:hover { border: 0; border-radius: 0; box-shadow: none; transform: none; }
.es-b #aanbod .wd-kaart:hover .wd-kaarttitel { color: var(--color-primary); }
.es-b #aanbod .wd-beeld { background: var(--color-bg-subtle); aspect-ratio: 2 / 1; }
.es-b #aanbod .wd-soort { background: none; padding: 0; font-family: var(--font-mono); font-weight: 500; color: var(--color-text-muted); }
@media (max-width: 48rem) {
  .es-b .es-b-hero { padding-block: var(--space-10) var(--space-16); }
  .es-b .es-b-sectie { padding-block: var(--space-8) var(--space-16); }
}

/* kleur (10-16): elk blok een eigen steunkleur via --es-kleur/--es-zacht; petrol blijft het merk */
.es-b .es-b-amber  { --es-kleur: var(--color-amber); --es-zacht: var(--color-amber-soft); }
.es-b .es-b-coral  { --es-kleur: var(--color-coral); --es-zacht: var(--color-coral-soft); }
.es-b .es-b-sage   { --es-kleur: var(--color-sage);  --es-zacht: var(--color-sage-soft); }
.es-b .es-b-iris   { --es-kleur: var(--color-iris);  --es-zacht: var(--color-iris-soft); }
.es-b .es-b-petrol { --es-kleur: var(--color-primary); --es-zacht: var(--color-primary-soft); }

/* Fig. 1 (10-16): een echt stukje event model. Kolom = slice, rij = laan; scherm, command en event
   onder elkaar, read models in de middenlaan. Kleur met betekenis: command iris, read model salie,
   event amber, scherm wit. Lijnen liggen onder de blokken (z-index). */
.es-b .es-b-scroll { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.es-b .es-b-bord { position: relative; display: grid; min-width: 46rem; grid-template-columns: 7.5rem repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(3, 7.5rem);
  background-image:
    linear-gradient(to bottom, transparent calc(33.333% - 1px), var(--color-border) calc(33.333% - 1px), var(--color-border) 33.333%, transparent 33.333%, transparent calc(66.666% - 1px), var(--color-border) calc(66.666% - 1px), var(--color-border) 66.666%, transparent 66.666%); }
.es-b .es-b-laanlabel { grid-column: 1; align-self: stretch; padding: var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-snug); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); border-right: 1px solid var(--color-border); }
.es-b .es-b-r1 { grid-row: 1; } .es-b .es-b-r2 { grid-row: 2; } .es-b .es-b-r3 { grid-row: 3; }
.es-b .es-b-c1 { grid-column: 2; } .es-b .es-b-c2 { grid-column: 3; } .es-b .es-b-c3 { grid-column: 4; } .es-b .es-b-c4 { grid-column: 5; } .es-b .es-b-c5 { grid-column: 6; }
/* sticky */
.es-b .es-b-st { position: relative; z-index: 2; align-self: center; justify-self: center; display: flex; flex-direction: column; gap: 0.15rem; width: 76%; min-height: 4.75rem; padding: var(--space-2) var(--space-3); border: 1px solid; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; line-height: var(--leading-snug); color: var(--color-text-heading); }
.es-b .es-b-st small { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-st-scherm { background: var(--color-bg-surface); border-color: var(--color-border-strong); padding-top: calc(var(--space-2) + 0.5rem); }
.es-b .es-b-st-scherm::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.45rem; border-bottom: 1px solid var(--color-border-strong); background: var(--color-bg-subtle); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.es-b .es-b-st-cmd { --es-st: var(--color-iris); }
.es-b .es-b-st-rm  { --es-st: var(--color-sage); }
.es-b .es-b-st-ev  { --es-st: var(--color-amber); }
/* verbindingen binnen een slice (verticaal, van midden naar midden) */
.es-b .es-b-lijn { position: relative; z-index: 1; justify-self: center; align-self: center; width: 0; border-left: 1px solid var(--color-text-muted); }
.es-b .es-b-r1-3 { grid-row: 1 / 4; height: 66.666%; }
.es-b .es-b-r1-2 { grid-row: 1 / 3; height: 50%; }
/* event -> read model in de volgende slice: haak (onder langs, dan omhoog) */
.es-b .es-b-haak { position: relative; z-index: 1; grid-row: 2 / 4; align-self: center; justify-self: center; width: 50%; height: 50%; border-right: 1px solid var(--color-text-muted); border-bottom: 1px solid var(--color-text-muted); border-bottom-right-radius: var(--radius-md); }
.es-b .es-b-h1 { grid-column: 2 / 4; } .es-b .es-b-h3 { grid-column: 4 / 6; }
/* subtiel (10-16): wit blokje, kleur alleen als randje links en in het typelabel */
.es-b .es-b-st-cmd, .es-b .es-b-st-rm, .es-b .es-b-st-ev { background: var(--color-bg-surface); border-color: var(--color-border-strong); box-shadow: inset 3px 0 0 var(--es-st); padding-left: calc(var(--space-3) + 3px); }
.es-b .es-b-st-cmd small, .es-b .es-b-st-rm small, .es-b .es-b-st-ev small { color: var(--es-st); }
.es-b .es-b-st-ev small { color: var(--color-warning); }
.es-b .es-b-lijn, .es-b .es-b-haak { border-color: var(--color-border-strong); }
/* processor (10-16): in de bovenste laan, net als een scherm, maar zonder venster; randje in koraal */
.es-b .es-b-st-proc { --es-st: var(--color-coral); background: var(--color-bg-surface); border-color: var(--color-border-strong); border-style: dashed; box-shadow: inset 3px 0 0 var(--es-st); padding-left: calc(var(--space-3) + 3px); hyphens: manual; }
.es-b .es-b-st-proc small { color: var(--es-st); }
.es-b .es-b-r2-3 { grid-row: 2 / 4; height: 50%; }
/* processor -> command in de volgende slice: haak (rechts langs, dan omlaag) */
.es-b .es-b-haak-af { position: relative; z-index: 1; grid-row: 1 / 3; align-self: center; justify-self: center; width: 50%; height: 50%; border-top: 1px solid var(--color-border-strong); border-right: 1px solid var(--color-border-strong); border-top-right-radius: var(--radius-md); }
.es-b .es-b-a2 { grid-column: 3 / 5; }
/* solide maar subtiel (10-16): zachte vulling per soort, de rand een tint donkerder, geen randje links */
.es-b .es-b-st-cmd  { --es-vul: var(--color-iris-soft); }
.es-b .es-b-st-rm   { --es-vul: var(--color-sage-soft); }
.es-b .es-b-st-ev   { --es-vul: var(--color-amber-soft); }
.es-b .es-b-st-proc { --es-vul: var(--color-coral-soft); }
.es-b .es-b-st-cmd, .es-b .es-b-st-rm, .es-b .es-b-st-ev, .es-b .es-b-st-proc { background: var(--es-vul); box-shadow: none; padding-left: var(--space-3);
  border-color: var(--es-st); border-color: color-mix(in srgb, var(--es-st) 45%, var(--es-vul)); }
.es-b .es-b-st-proc { border-style: dashed; }
/* processor-symbool: een tandwiel rechtsboven, in de kleur van het label */
.es-b .es-b-st-proc::after { content: "\2699\FE0E"; position: absolute; top: var(--space-1); right: var(--space-2); font-family: var(--font-body); font-size: var(--text-base); line-height: 1; color: var(--es-st); opacity: 0.8; }

/* 01 Aanpak (10-16): de perfecte match als som in het haarlijnraster: drie cellen, plus, is */
.es-b .es-b-match { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); background: var(--color-border); border: var(--es-b-lijn); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 60rem) { .es-b .es-b-match { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.es-b .es-b-match > li { position: relative; min-width: 0; background: var(--color-bg-surface); padding: var(--space-8) var(--space-6) var(--space-10); }
.es-b .es-b-match small { display: block; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-match h3 { margin: 0 0 var(--space-3); font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; }
.es-b .es-b-match p { margin: 0; max-width: 34ch; color: var(--color-text-secondary); }
/* het teken op de naad: + tussen de drie, = boven de uitkomst */
.es-b .es-b-match > li + li::before { content: "+"; position: absolute; z-index: 2; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; top: 0; left: 50%; transform: translate(-50%, -50%); border: var(--es-b-lijn); border-radius: var(--radius-full); background: var(--color-bg); font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1; color: var(--color-text-muted); }
.es-b .es-b-match > li.es-b-som::before { content: "="; color: var(--color-primary); border-color: var(--color-primary); }
@media (min-width: 60rem) {
  .es-b .es-b-match > li + li::before { top: calc(var(--space-8) + 2.5rem); left: 0; }
  .es-b .es-b-match > li.es-b-som::before { top: 0; left: 50%; }
}
.es-b .es-b-som { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-8); }
.es-b .es-b-match > li.es-b-som { background: var(--color-bg-subtle); padding-block: var(--space-8); }
.es-b .es-b-match .es-b-somkop { margin: 0; max-width: none; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 500; letter-spacing: -0.03em; color: var(--color-primary); }
/* de pictogrammen: kleine stukjes event model, dezelfde kleuren als Fig. 1 */
.es-b .es-b-ico { position: relative; display: block; width: 5rem; height: 5rem; margin-bottom: var(--space-8); }
.es-b .es-b-ico i { position: absolute; display: block; border: 1px solid; border-radius: var(--radius-sm); }
.es-b .es-b-ico-em i { width: 2.1rem; height: 1.4rem; }
.es-b .es-b-ico-em i:nth-child(1) { top: 0.4rem; left: 0; background: var(--color-iris-soft); border-color: var(--color-iris); }
.es-b .es-b-ico-em i:nth-child(2) { top: 0.4rem; left: 2.6rem; background: var(--color-sage-soft); border-color: var(--color-sage); }
.es-b .es-b-ico-em i:nth-child(3) { top: 2.2rem; left: 1.3rem; background: var(--color-amber-soft); border-color: var(--color-amber); }
.es-b .es-b-ico-em::after { content: ""; position: absolute; left: 0; right: 0.2rem; bottom: 0.55rem; border-top: 1px solid var(--color-text-muted); }
.es-b .es-b-ico-em::before { content: ""; position: absolute; right: 0.2rem; bottom: 0.3rem; width: 0.5rem; height: 0.5rem; border-top: 1px solid var(--color-text-muted); border-right: 1px solid var(--color-text-muted); transform: rotate(45deg); }
.es-b .es-b-ico-ai i { border: 0; border-radius: 0; background: var(--color-text-heading); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.es-b .es-b-ico-ai i:nth-child(1) { top: 0.3rem; left: 0.3rem; width: 3.2rem; height: 3.2rem; }
.es-b .es-b-ico-ai i:nth-child(2) { top: 3rem; left: 3.2rem; width: 1.4rem; height: 1.4rem; background: var(--color-primary); }
.es-b .es-b-ico-es i { left: 0.2rem; width: 4.4rem; height: 0.85rem; background: var(--color-amber-soft); border-color: var(--color-amber); }
.es-b .es-b-ico-es i:nth-child(1) { top: 0.5rem; } .es-b .es-b-ico-es i:nth-child(2) { top: 1.6rem; }
.es-b .es-b-ico-es i:nth-child(3) { top: 2.7rem; } .es-b .es-b-ico-es i:nth-child(4) { top: 3.8rem; }

/* 02 Event sourcing (10-16): tekst links, Fig. 2 rechts; twee manieren om dezelfde aanvraag te onthouden */
.es-b .es-b-geheugen { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .es-b .es-b-geheugen { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); } }
.es-b .es-b-geheugen-tekst p:not(.es-b-label) { margin: 0 0 var(--space-4); max-width: 46ch; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.es-b .es-b-geheugen .es-b-titel { margin-bottom: var(--space-6); }
.es-b .es-b-vergelijk { margin: 0; }
.es-b .es-b-panelen { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); background: var(--color-border); border: var(--es-b-lijn); border-radius: var(--radius-lg); overflow: hidden; }
.es-b .es-b-paneel { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding: var(--space-6); background: var(--color-bg-surface); }
.es-b .es-b-paneel > small { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-paneel > p { margin: auto 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.es-b .es-b-rij { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-waarden { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); font-weight: 400; }
.es-b .es-b-oud { color: var(--color-text-muted); text-decoration: line-through; }
.es-b .es-b-waarden .es-b-nu { font-weight: 600; }
.es-b .es-b-feiten { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.es-b .es-b-feiten li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.es-b .es-b-feiten .es-b-tijd { flex: none; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.es-b .es-b-feiten span:not(.es-b-tijd) { flex: 1; min-width: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-amber); border-radius: var(--radius-sm); background: var(--color-amber-soft); font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-stand { display: flex; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border-strong); font-size: var(--text-sm); }
.es-b .es-b-stand span:not(.es-b-nu) { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-muted); }
.es-b .es-b-stand .es-b-nu { font-weight: 600; color: var(--color-primary); }

/* bodem (10-16): op dezelfde as als de inhoud */
.app-footer { padding-inline: var(--container-padding); border-top-color: var(--color-border); }
.es-b .es-b-onderschrift span:first-child { flex: none; white-space: nowrap; }
@media (max-width: 59.99rem) { .es-b .es-b-ico { margin-bottom: var(--space-5); } }

/* Concepten (10-16): naslag; per begrip een label over de volle breedte, kop links (blijft staan), tekst rechts */
.es-b .es-b-doc-hero { padding-bottom: var(--space-12); }
.es-b .es-b-doc { padding-block: var(--space-8) var(--space-16); }
.es-b .es-b-doc-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) {
  .es-b .es-b-doc-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-16); }
  .es-b .es-b-doc-kop { position: sticky; top: var(--space-8); }
}
.es-b .es-b-doc-kop { margin: 0; font-size: var(--text-3xl); }
.es-b .es-b-doc-tekst { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.es-b .es-b-doc-tekst > p { margin: 0; max-width: 62ch; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.es-b .es-b-doc-tekst > .es-b-plaat, .es-b .es-b-doc-tekst > .es-b-legenda { margin-top: var(--space-6); }
.es-b .es-b-doc-slot .es-b-titel { margin: 0; }
/* bouwstenen als chip, in de kleuren van Fig. 1 */
.es-b .es-b-chip { display: inline-block; flex: none; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg-surface); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-chip-cmd  { background: var(--color-iris-soft);  border-color: var(--color-iris); }
.es-b .es-b-chip-rm   { background: var(--color-sage-soft);  border-color: var(--color-sage); }
.es-b .es-b-chip-ev   { background: var(--color-amber-soft); border-color: var(--color-amber); }
.es-b .es-b-chip-proc { background: var(--color-coral-soft); border-color: var(--color-coral); border-style: dashed; }
.es-b .es-b-legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--color-border); border: var(--es-b-lijn); border-radius: var(--radius-lg); overflow: hidden; }
.es-b .es-b-legenda li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-bg-surface); color: var(--color-text-secondary); }
.es-b .es-b-legenda .es-b-chip { justify-self: start; }
/* Fig. 3: een voorbeeld als drie regels */
.es-b .es-b-spec { margin-bottom: 0; }
.es-b .es-b-specrijen { list-style: none; margin: 0; padding: var(--space-5); display: grid; gap: var(--space-3); background: var(--color-bg-surface); border: var(--es-b-lijn); border-radius: var(--radius-lg); }
.es-b .es-b-specrijen li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.es-b .es-b-specrijen .es-b-chip { justify-self: start; }
.es-b .es-b-specwoord { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
@media (max-width: 30rem) { .es-b .es-b-legenda li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); } }

/* Concepten v2 (10-16): minder dictaat. Inhoud als raster, elke sectie een eigen vorm: tekst + legenda,
   breed bord met slice-kader, tekst + figuur, figuur links, een stelling, een foto, drie cellen. */
.es-b .es-b-inhoud { list-style: none; margin: var(--space-16) 0 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); background: var(--color-border); border: var(--es-b-lijn); border-radius: var(--radius-lg); overflow: hidden; }
.es-b .es-b-inhoud a { display: flex; flex-direction: column; gap: var(--space-1); height: 100%; padding: var(--space-5) var(--space-5) var(--space-6); background: var(--color-bg-surface); color: var(--color-text-secondary); text-decoration: none; }
.es-b .es-b-inhoud a:hover { background: var(--color-bg-subtle); }
.es-b .es-b-inhoud a:hover strong { color: var(--color-primary); }
.es-b .es-b-inhoud .es-b-nr { margin-bottom: var(--space-4); }
.es-b .es-b-inhoud strong { font-size: var(--text-lg); font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-inhoud span:last-child { font-size: var(--text-sm); }
.es-b .es-b-doc { padding-block: var(--space-12) var(--space-16); scroll-margin-top: var(--space-8); }
.es-b .es-b-duo { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) {
  .es-b .es-b-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); }
  .es-b .es-b-duo-om { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .es-b .es-b-duo-om > .es-b-duo-tekst { order: 2; }
  .es-b .es-b-duo-gelijk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-b .es-b-duo-foto { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
}
.es-b .es-b-duo-tekst { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.es-b .es-b-duo-tekst > p, .es-b .es-b-duo > p { margin: 0; max-width: 52ch; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.es-b.es-b-concepten .es-b-doc-kop { position: static; margin: 0 0 var(--space-2); font-size: var(--text-4xl); }
.es-b .es-b-doc-breed { margin-bottom: var(--space-8); }
.es-b .es-b-doc-breed .es-b-zijtekst { max-width: 44ch; }
/* het slice-kader op het bord */
.es-b .es-b-kader { position: relative; z-index: 3; grid-row: 1 / 4; margin: var(--space-2); border: 2px solid var(--color-primary); border-radius: var(--radius-md); pointer-events: none; }
.es-b .es-b-kader small { position: absolute; bottom: calc(-1 * var(--space-2)); left: 50%; transform: translate(-50%, 50%); padding: 0 var(--space-2); background: var(--color-primary); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; color: var(--color-text-on-primary); }
.es-b.es-b-concepten .es-b-bord { grid-template-rows: repeat(3, 7.5rem); padding-bottom: var(--space-4); }
/* de stelling: één zin groot, dat geeft lucht */
.es-b .es-b-stelling { margin: 0 0 var(--space-10); max-width: 30ch; font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--color-text-heading); text-wrap: balance; }
/* de foto */
.es-b .es-b-foto { margin: 0; min-width: 0; }
.es-b .es-b-foto img { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); }
.es-b .es-b-tech { margin-top: var(--space-8); }
.es-b .es-b-tech .es-b-nr { margin-bottom: var(--space-8); }
@media (max-width: 48rem) { .es-b .es-b-stelling { font-size: var(--text-3xl); } .es-b.es-b-concepten .es-b-doc-kop { font-size: var(--text-3xl); } }

/* inhoud v3: als register in de rechterkolom van de hero, één regel per begrip (geen lege cellen) */
.es-b.es-b-concepten .es-b-hero-raster { align-items: start; }
.es-b.es-b-concepten .es-b-hero-zij { padding-top: var(--space-4); }
.es-b .es-b-inhoud-kop { margin: var(--space-8) 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-inhoud { margin: 0; display: block; background: none; border: 0; border-top: var(--es-b-lijn); border-radius: 0; }
.es-b .es-b-inhoud li { border-bottom: var(--es-b-lijn); }
.es-b .es-b-inhoud a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); padding: var(--space-3) var(--space-1); background: none; }
.es-b .es-b-inhoud a:hover { background: var(--color-bg-subtle); }
.es-b .es-b-inhoud .es-b-nr { margin: 0; }
.es-b .es-b-inhoud strong { font-size: var(--text-base); }
.es-b .es-b-inhoud span:last-child { color: var(--color-text-muted); text-align: right; }
@media (max-width: 30rem) { .es-b .es-b-inhoud span:last-child { display: none; } }
/* slice-kader: label binnen het kader, in de lege bovenste cel */
.es-b .es-b-kader small { bottom: auto; top: var(--space-2); transform: translateX(-50%); }
.es-b .es-b-duo-gelijk { gap: var(--space-4) var(--space-16); }

/* fotoband (10-16): een echte foto tussen Fig. 1 en de aanpak; op halve breedte, want de bron is 720 breed */
.es-b .es-b-fotoband { padding-block: 0 var(--space-12); }
.es-b .es-b-fotoband-raster { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 60rem) { .es-b .es-b-fotoband-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-16); } }
.es-b .es-b-fotoband-tekst { display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-2); }
.es-b .es-b-fotoband-zin { margin: 0; max-width: 18ch; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; color: var(--color-text-heading); text-wrap: balance; }
.es-b .es-b-fotoband .es-b-onderschrift { margin: 0; }
.es-b .es-b-hero:has(+ .es-b-fotoband) { padding-bottom: var(--space-16); }

/* Werkwijze als plaat (10-16): de route van domeinkennis naar applicatie, naar Remco's infographic.
   Drie stappen in het haarlijnraster (stap 1 breder: 80% van het werk), pijl op de naad, fundament eronder. */
.es-b .es-b-route { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); background: var(--color-border); border: var(--es-b-lijn); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 60rem) { .es-b .es-b-route { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.es-b .es-b-stap { position: relative; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; padding: var(--space-6) var(--space-6) var(--space-8); background: var(--color-bg-surface); }
.es-b .es-b-stap + .es-b-stap::before { content: "\203A"; position: absolute; z-index: 2; top: 0; left: 50%; transform: translate(-50%, -50%) rotate(90deg); display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: var(--es-b-lijn); border-radius: var(--radius-full); background: var(--color-bg); font-size: var(--text-lg); line-height: 1; color: var(--color-primary); }
@media (min-width: 60rem) { .es-b .es-b-stap + .es-b-stap::before { top: 2.1rem; left: 0; transform: translate(-50%, -50%); } }
.es-b .es-b-stapkop { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.es-b .es-b-stapkop h3 { margin: 0; font-size: var(--text-2xl); font-weight: 500; letter-spacing: -0.02em; }
.es-b .es-b-stapnr { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-on-primary); font-family: var(--font-mono); font-size: var(--text-sm); }
.es-b .es-b-aandeel { margin-left: auto; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-primary); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary); }
.es-b .es-b-stapsub { margin-top: calc(-1 * var(--space-3)); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-stapvoet { margin: auto 0 0; padding-top: var(--space-4); border-top: 1px dashed var(--color-border-strong); font-size: var(--text-sm); color: var(--color-text-secondary); }
/* stap 1: de tafel, mensen links, agents rechts, de zin ertussen */
.es-b .es-b-tafel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--space-6); padding: var(--space-6) var(--space-2) var(--space-2); }
.es-b .es-b-groep { display: grid; grid-auto-flow: column; justify-content: center; align-items: end; gap: var(--space-2); }
.es-b .es-b-groep small { grid-row: 2; grid-column: 1 / -1; margin-top: var(--space-2); text-align: center; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-mens { position: relative; display: block; width: 2.4rem; height: 3.4rem; }
.es-b .es-b-mens::before { content: ""; position: absolute; top: 0; left: 50%; width: 1.2rem; height: 1.2rem; transform: translateX(-50%); border-radius: var(--radius-full); background: var(--color-text-heading); }
.es-b .es-b-mens::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1.9rem; border-radius: 1.2rem 1.2rem var(--radius-sm) var(--radius-sm); background: var(--color-text-heading); }
.es-b .es-b-agent { position: relative; display: block; width: 2.8rem; height: 2.8rem; border: 1px solid var(--color-iris); border-radius: var(--radius-md); background: var(--color-iris-soft); }
.es-b .es-b-agent::before { content: ""; position: absolute; inset: 0.55rem; background: var(--color-iris); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.es-b .es-b-tafelzin { margin: 0 0 var(--space-8); text-align: center; font-family: var(--font-heading); font-size: var(--text-lg); font-style: italic; line-height: var(--leading-snug); color: var(--color-text-secondary); text-wrap: balance; }
@media (max-width: 36rem) { .es-b .es-b-tafel { grid-template-columns: 1fr 1fr; } .es-b .es-b-tafelzin { grid-column: 1 / -1; grid-row: 1; margin: 0; } }
/* stap 2: drie vinkjes in salie */
.es-b .es-b-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.es-b .es-b-checks li { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-sage); border-radius: var(--radius-sm); background: var(--color-sage-soft); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-checks li::before { content: "\2713"; margin-right: var(--space-2); color: var(--color-success); }
/* stap 3: de verhouding als ring */
.es-b .es-b-donutregel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.es-b .es-b-donut { position: relative; display: grid; place-items: center; flex: none; width: 6.5rem; height: 6.5rem; border-radius: var(--radius-full); background: conic-gradient(var(--color-primary) 0 90%, var(--color-iris) 90% 100%); }
.es-b .es-b-donut::before { content: ""; position: absolute; inset: 0.9rem; border-radius: var(--radius-full); background: var(--color-bg-surface); }
.es-b .es-b-donut b { position: relative; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-donutlegenda { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
.es-b .es-b-donutlegenda li { display: flex; align-items: center; gap: var(--space-2); }
.es-b .es-b-donutlegenda i { display: block; width: 0.75rem; height: 0.75rem; border-radius: 2px; }
.es-b .es-b-vlak-gen { background: var(--color-primary); } .es-b .es-b-vlak-ai { background: var(--color-iris); }
/* het fundament: over de volle breedte, het enige donkere vlak */
.es-b .es-b-fundament { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-10); padding: var(--space-6); background: var(--color-text-heading); color: var(--color-bg); }
.es-b .es-b-fundkop { margin: 0 0 var(--space-1); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 500; color: var(--color-bg); }
.es-b .es-b-fundament small { font-size: var(--text-sm); color: var(--color-bg); opacity: 0.75; }
.es-b .es-b-fundament ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.es-b .es-b-fundament li { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: var(--text-sm); color: var(--color-bg); }
.es-b .es-b-fundament li::before { content: "\2713"; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 1px solid var(--color-bg); border-radius: var(--radius-full); font-size: var(--text-xs); opacity: 0.85; }
/* de uitkomst: het hoogtepunt, één zin groot */
.es-b .es-b-uitkomst { padding-block: 0 var(--space-24); }
.es-b .es-b-uitkomstzin { margin: 0; font-family: var(--font-heading); font-size: calc(var(--text-5xl) * 1.3); font-weight: 500; line-height: 1; letter-spacing: -0.035em; color: var(--color-primary); }
.es-b .es-b-uitkomst .es-b-kopregel, .es-b .es-b-uitkomst.es-b-sectie .container { margin-bottom: 0; align-items: center; }

/* Werkwijze-pagina en teaser (10-16) */
.es-b .es-b-groep { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.es-b .es-b-figuren { display: flex; align-items: flex-end; gap: var(--space-2); }
.es-b .es-b-groep small { grid-row: auto; margin: 0; }
.es-b .es-b-tafel { align-items: center; padding-block: var(--space-8) var(--space-4); }
.es-b .es-b-tafelzin { margin: 0; }
.es-b.es-b-werkwijze .es-b-plaat { margin-top: var(--space-12); }
.es-b.es-b-werkwijze .es-b-doc-kop { margin: 0; font-size: var(--text-3xl); }
.es-b .es-b-route-kort { list-style: none; margin: 0; padding: 0; }
@media (min-width: 60rem) { .es-b .es-b-route-kort { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.es-b .es-b-route-kort .es-b-stap { gap: var(--space-3); padding-bottom: var(--space-8); }
.es-b .es-b-route-kort p { margin: 0; color: var(--color-text-secondary); }

/* plaat voor de website (10-16): het event model als resultaat van stap 1, een stempel bij stap 2 */
.es-b .es-b-mini { display: flex; flex-direction: column; gap: var(--space-2); }
.es-b .es-b-mini small { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-minibord { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(3, 2.25rem); align-items: center; justify-items: center; padding-inline: var(--space-2); border: var(--es-b-lijn); border-radius: var(--radius-md); background-color: var(--color-bg-surface);
  background-image: linear-gradient(to bottom, transparent calc(33.333% - 1px), var(--color-border) calc(33.333% - 1px), var(--color-border) 33.333%, transparent 33.333%, transparent calc(66.666% - 1px), var(--color-border) calc(66.666% - 1px), var(--color-border) 66.666%, transparent 66.666%); }
.es-b .es-b-mc { display: block; width: 72%; height: 1.35rem; border: 1px solid var(--color-border-strong); border-radius: 3px; background: var(--color-bg-surface); }
.es-b .es-b-mc-cmd  { background: var(--color-iris-soft);  border-color: var(--color-iris); }
.es-b .es-b-mc-rm   { background: var(--color-sage-soft);  border-color: var(--color-sage); }
.es-b .es-b-mc-ev   { background: var(--color-amber-soft); border-color: var(--color-amber); }
.es-b .es-b-mc-proc { background: var(--color-coral-soft); border-color: var(--color-coral); border-style: dashed; }
.es-b .es-b-mc-scherm { border-top-width: 4px; }
.es-b .es-b-mk1 { grid-column: 1; } .es-b .es-b-mk2 { grid-column: 2; } .es-b .es-b-mk3 { grid-column: 3; }
.es-b .es-b-mk4 { grid-column: 4; } .es-b .es-b-mk5 { grid-column: 5; } .es-b .es-b-mk6 { grid-column: 6; }
.es-b .es-b-mr1 { grid-row: 1; } .es-b .es-b-mr2 { grid-row: 2; } .es-b .es-b-mr3 { grid-row: 3; }
.es-b .es-b-stempel { align-self: flex-start; margin: auto 0 0; padding: var(--space-2) var(--space-4); border: 1.5px solid var(--color-success); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--color-success); }
.es-b .es-b-stempel::before { content: "\2713"; margin-right: var(--space-2); }
.es-b .es-b-platformchip { display: inline-block; margin: var(--space-2) 0 0; }
.es-b.es-b-werkwijze .es-b-kop { max-width: 16ch; }
.es-b .es-b-stempel { border-radius: var(--radius-md); }

/* hero-plaat (10-16): de perfecte match in plaats van het event model; gecentreerd, grotere pictogrammen */
.es-b .es-b-match-hero > li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-12) var(--space-6) var(--space-10); }
.es-b .es-b-match-hero .es-b-ico { transform: scale(1.35); margin: var(--space-4) 0 var(--space-10); }
.es-b .es-b-match-hero h3 { margin: 0 0 var(--space-1); font-size: var(--text-3xl); }
.es-b .es-b-match-hero small { margin: 0; }
@media (min-width: 60rem) { .es-b .es-b-match-hero > li + li::before { top: calc(var(--space-12) + 2.5rem + var(--space-4)); } }
.es-b .es-b-match-hero > li.es-b-som { justify-content: center; padding-block: var(--space-8); }
.es-b .es-b-match-hero .es-b-somkop { font-size: var(--text-4xl); }
@media (max-width: 59.99rem) {
  .es-b .es-b-match-hero > li:not(.es-b-som) { display: grid; grid-template-columns: 5rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: var(--space-5); align-items: center; text-align: left; padding: var(--space-6); }
  .es-b .es-b-match-hero .es-b-ico { grid-row: 1 / 3; transform: none; margin: 0; }
  .es-b .es-b-match-hero h3 { align-self: end; font-size: var(--text-2xl); }
  .es-b .es-b-match-hero small { align-self: start; }
  .es-b .es-b-match-hero .es-b-somkop { font-size: var(--text-3xl); }
}

/* werkwijze op de landing (10-16): het dagritme als tijdlijn. Vier momenten op één lijn, elk met een
   klein beeld uit de werkwijze-plaat (model, vinkjes, ring, app) en wat het oplevert. */
.es-b .es-b-dag-lead { margin: calc(-1 * var(--space-4)) 0 var(--space-12); max-width: 58ch; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.es-b .es-b-dag { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-10) var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .es-b .es-b-dag { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60rem) { .es-b .es-b-dag { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); } }
.es-b .es-b-dag li { position: relative; display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding-top: var(--space-6); border-top: 1px solid var(--color-border-strong); }
.es-b .es-b-dag li::before { content: ""; position: absolute; top: 0; left: 0; width: 0.75rem; height: 0.75rem; transform: translateY(-50%); border-radius: var(--radius-full); background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-bg); }
.es-b .es-b-dag li:last-child::after { content: "\21BB"; position: absolute; top: 0; right: 0; transform: translateY(-55%); padding-left: var(--space-2); background: var(--color-bg); font-size: var(--text-lg); line-height: 1; color: var(--color-primary); }
.es-b .es-b-dag-tijd { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary); }
.es-b .es-b-dag-beeld { display: flex; align-items: center; height: 5.5rem; margin-block: var(--space-2); }
.es-b .es-b-dag h3 { margin: 0; font-size: var(--text-xl); font-weight: 600; }
.es-b .es-b-dag p { margin: 0; color: var(--color-text-secondary); }
.es-b .es-b-dag small { margin-top: auto; padding-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-minibord-klein { width: 9.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, 1.6rem); padding-inline: var(--space-1); }
.es-b .es-b-minibord-klein .es-b-mc { height: 0.95rem; }
.es-b .es-b-dag-checks { display: grid; gap: var(--space-2); }
.es-b .es-b-dag-checks i { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-sage); border-radius: var(--radius-sm); background: var(--color-sage-soft); font-style: normal; font-size: var(--text-xs); font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-donut-klein { width: 4.75rem; height: 4.75rem; }
.es-b .es-b-donut-klein::before { inset: 0.65rem; }
.es-b .es-b-donut-klein b { font-size: var(--text-base); }
.es-b .es-b-dag-app { position: relative; display: grid; gap: 0.35rem; align-content: start; width: 7rem; height: 4.75rem; padding: 1.1rem var(--space-3) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.es-b .es-b-dag-app::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0.6rem; border-bottom: 1px solid var(--color-border-strong); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--color-bg-subtle); }
.es-b .es-b-dag-app::after { content: "\2713"; position: absolute; right: -0.6rem; bottom: -0.6rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: var(--radius-full); background: var(--color-success); font-size: var(--text-xs); color: var(--color-text-on-primary); }
.es-b .es-b-dag-app i { display: block; height: 0.4rem; border-radius: 2px; background: var(--color-border); }
.es-b .es-b-dag-app i:nth-child(2) { width: 70%; } .es-b .es-b-dag-app i:nth-child(3) { width: 45%; height: 0.75rem; background: var(--color-primary); }
.es-b .es-b-dag-titel { max-width: 22ch; margin-bottom: var(--space-8); text-wrap: balance; }
.es-b .es-b-dag-lead { margin-top: 0; }
.es-b .es-b-dag-meer { margin: var(--space-12) 0 0; }
/* dagritme v2: kop links, inleiding rechts op de basislijn; oplevering als label + waarde, altijd twee regels */
.es-b .es-b-dag-kop { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: end; margin-bottom: var(--space-12); }
@media (min-width: 60rem) { .es-b .es-b-dag-kop { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-16); } }
.es-b .es-b-dag-kop .es-b-dag-titel { margin: 0; max-width: 18ch; }
.es-b .es-b-dag-kop .es-b-dag-lead { margin: 0; }
.es-b .es-b-dag .es-b-dag-uit { display: flex; flex-direction: column; gap: var(--space-1); text-transform: none; letter-spacing: 0; }
.es-b .es-b-dag-uit span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-dag-uit b { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-dag-kop .es-b-dag-titel { max-width: 22ch; }
.es-b .es-b-dag-kop { margin-bottom: var(--space-16); }
.es-b .es-b-lead strong { font-weight: 600; color: var(--color-text-heading); }
@media (min-width: 60rem) { .es-b .es-b-hero .es-b-lead { font-size: var(--text-xl); line-height: 1.55; } }
/* hero: kop en inleiding bovenaan uitgelijnd (10-16), de eerste regel van de inleiding op de kapitaalhoogte van de kop */
.es-b .es-b-hero-raster { align-items: start; }
@media (min-width: 60rem) { .es-b .es-b-hero-zij { padding-top: 0.55rem; } }
@media (min-width: 60rem) { .es-b .es-b-hero-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); } .es-b .es-b-hero .es-b-lead { max-width: 46ch; } }

/* projecten (10-16): klikbaar op de landing, eigen detailpagina */
.es-b a.es-b-project { display: block; color: inherit; text-decoration: none; }
.es-b a.es-b-project .es-b-lijst { transition: border-color 0.15s ease; }
.es-b a.es-b-project:hover .es-b-lijst { border-color: var(--color-primary); }
.es-b a.es-b-project:hover h3 { color: var(--color-primary); }
.es-b .es-b-pijl { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-pijl::after { content: " \2192"; }
.es-b a.es-b-project:hover .es-b-pijl { color: var(--color-primary); }
.es-b .es-b-terug { color: inherit; text-decoration: none; }
.es-b .es-b-terug::before { content: "\2190  "; }
.es-b .es-b-terug:hover { color: var(--color-primary); }
.es-b .es-b-feiten-rij { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-top: var(--space-12); background: var(--color-border); border-block: var(--es-b-lijn); }
.es-b .es-b-feiten-rij > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-4) var(--space-4) 0; background: var(--color-bg); }
.es-b .es-b-feiten-rij > div + div { padding-left: var(--space-4); }
.es-b .es-b-feiten-rij span:first-child { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-feiten-rij span:last-child { font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-projectbeeld { margin: var(--space-12) 0 0; }
.es-b .es-b-projectbeeld img { aspect-ratio: auto; }
.es-b .es-b-projectpagina .es-b-doc-kop { margin: 0; font-size: var(--text-3xl); }
.es-b .es-b-volgende { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; }
.es-b .es-b-volgende span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-volgende a { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 500; letter-spacing: -0.02em; color: var(--color-text-heading); text-decoration: none; }
.es-b .es-b-volgende a::after { content: " \2192"; color: var(--color-primary); }
.es-b .es-b-volgende a:hover { color: var(--color-primary); }
/* hartjes op de naden van de hero-plaat (10-16): binnenhart in de grondkleur met het teken, buitenhart als rand */
.es-b .es-b-match-hero > li + li::before, .es-b .es-b-match-hero > li + li::after { width: 28px; height: 26px; border: 0; border-radius: 0; clip-path: path('M14 25.5C14 25.5 0.8 17 0.8 8.4C0.8 4.2 4 0.8 8 0.8C10.6 0.8 12.8 2.3 14 4.5C15.2 2.3 17.4 0.8 20 0.8C24 0.8 27.2 4.2 27.2 8.4C27.2 17 14 25.5 14 25.5Z'); }
.es-b .es-b-match-hero > li + li::before { background: var(--color-bg); padding-bottom: 3px; transform: translate(-50%, -50%) scale(0.88); }
.es-b .es-b-match-hero > li + li::after { content: ""; position: absolute; z-index: 1; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--color-border-strong); }
.es-b .es-b-match-hero > li.es-b-som::after { background: var(--color-primary); }
@media (min-width: 60rem) {
  .es-b .es-b-match-hero > li + li::after { top: calc(var(--space-12) + 2.5rem + var(--space-4)); left: 0; }
  .es-b .es-b-match-hero > li.es-b-som::after { top: 0; left: 50%; }
}
/* hartjes: speels, in koraal (AI houdt van event modeling en event sourcing); het = blijft een rondje */
.es-b .es-b-match-hero > li + li:not(.es-b-som)::before { background: var(--color-coral-soft); color: var(--color-coral); font-weight: 600; }
.es-b .es-b-match-hero > li + li:not(.es-b-som)::after { background: var(--color-coral); }
.es-b .es-b-match-hero > li.es-b-som::before { width: 1.75rem; height: 1.75rem; padding: 0; clip-path: none; border: 1px solid var(--color-primary); border-radius: var(--radius-full); background: var(--color-bg); transform: translate(-50%, -50%); }
.es-b .es-b-match-hero > li.es-b-som::after { content: none; }
/* hartjes met een rode rand */
.es-b .es-b-match-hero > li + li:not(.es-b-som)::after { background: var(--color-danger); }
.es-b .es-b-match-hero > li + li:not(.es-b-som)::before { background: var(--color-bg); color: var(--color-danger); }
/* links (10-16): tekst in petrol, subtieler dan inktzwart; lijn eronder iets lichter */
.es-b .es-b-link { color: var(--color-primary); border-bottom-color: var(--color-primary-soft); border-bottom-color: color-mix(in srgb, var(--color-primary) 35%, transparent); }
.es-b .es-b-link:hover { color: var(--color-text-heading); border-bottom-color: var(--color-text-heading); }
/* links als actie, los van de lopende tekst: pijl erachter, meer lucht erboven */
.es-b .es-b-link::after { content: "\00A0\2192"; display: inline-block; transition: transform 0.15s ease; }
.es-b .es-b-link:hover::after { transform: translateX(3px); }
.es-b .es-b-hero .es-b-lead { margin-bottom: var(--space-8); }
.es-b .es-b-dag-meer { margin-top: var(--space-16); }
/* contact op de landing: geen voorbeeldzin bij Bericht */
.es-b #contact .form-hint:not(.keuzes-leeg) { display: none; }
/* contact (10-16): de linkerkolom zegt wat er na het bericht gebeurt; formulier zonder eigen titel */
.es-b #contact .es-b-contact { align-items: start; }
.es-b #contact .inline-form-title { display: none; }
.es-b .es-b-vervolg-kop { margin: var(--space-10) 0 var(--space-4); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-vervolg { list-style: none; margin: 0; padding: 0; max-width: 32rem; border-top: var(--es-b-lijn); }
.es-b .es-b-vervolg li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-5); border-bottom: var(--es-b-lijn); }
.es-b .es-b-vervolg .es-b-nr { margin: 0; padding-top: 0.2rem; }
.es-b .es-b-vervolg h3 { margin: 0 0 var(--space-1); font-size: var(--text-lg); font-weight: 600; }
.es-b .es-b-vervolg p { margin: 0; color: var(--color-text-secondary); }
@media (min-width: 60rem) { .es-b #contact [data-mock-screen] { margin-top: var(--space-4); } }

/* review 10-16: knop in de hero */
.es-b .es-b-knop { display: inline-flex; align-items: center; min-height: 2.75rem; padding: var(--space-2) var(--space-6); border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-text-on-primary); font-weight: 600; text-decoration: none; }
.es-b .es-b-knop:hover { background: var(--color-primary-bright); color: var(--color-text-on-primary); }
.es-b .es-b-acties { gap: var(--space-4) var(--space-8); }
/* de ring met uitleg */
.es-b .es-b-dag-beeld { gap: var(--space-4); }
.es-b .es-b-donut-uitleg { max-width: 9rem; margin: 0; padding: 0; font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; color: var(--color-text-secondary); line-height: var(--leading-snug); }
.es-b .es-b-dag .es-b-donut-uitleg { margin-top: 0; padding-top: 0; }
/* kickstart: het aanbod als één paneel, prijs rechts */
.es-b .es-b-ks { display: grid; grid-template-columns: minmax(0, 1fr); border: var(--es-b-lijn); border-radius: var(--radius-lg); background: var(--color-bg-surface); overflow: hidden; }
@media (min-width: 60rem) { .es-b .es-b-ks { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.es-b .es-b-ks-hoofd { padding: var(--space-10) var(--space-8); }
.es-b .es-b-ks-label { margin: 0 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-primary); }
.es-b .es-b-ks .es-b-titel { margin: 0 0 var(--space-4); }
.es-b .es-b-ks-lead { margin: 0 0 var(--space-8); max-width: 58ch; font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.es-b .es-b-ks-kolommen { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); padding-top: var(--space-6); border-top: var(--es-b-lijn); }
.es-b .es-b-ks-kolommen h3 { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 600; }
.es-b .es-b-ks-kolommen p { margin: 0; color: var(--color-text-secondary); }
.es-b .es-b-ks-kolommen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); color: var(--color-text-secondary); }
.es-b .es-b-ks-kolommen li::before { content: "\2713"; margin-right: var(--space-2); color: var(--color-success); font-weight: 600; }
.es-b .es-b-ks-prijs { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-1); padding: var(--space-10) var(--space-8); background: var(--color-bg-subtle); border-top: var(--es-b-lijn); }
@media (min-width: 60rem) { .es-b .es-b-ks-prijs { border-top: 0; border-left: var(--es-b-lijn); } }
.es-b .es-b-ks-duur { margin: 0; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-ks-bedrag { margin: 0; font-family: var(--font-heading); font-size: calc(var(--text-5xl) * 1.1); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: var(--color-text-heading); }
.es-b .es-b-ks-btw { margin: 0 0 var(--space-6); font-size: var(--text-sm); color: var(--color-text-secondary); }
/* vragen: kop links, vragen als register rechts */
.es-b .es-b-vragen-raster { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .es-b .es-b-vragen-raster { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-16); } }
.es-b .es-b-vragen-raster .es-b-titel { margin: 0; }
.es-b .es-b-vragen { list-style: none; margin: 0; padding: 0; border-top: var(--es-b-lijn); }
.es-b .es-b-vragen li { padding-block: var(--space-5); border-bottom: var(--es-b-lijn); }
.es-b .es-b-vragen h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; }
.es-b .es-b-vragen p { margin: 0; max-width: 60ch; color: var(--color-text-secondary); }
.es-b .es-b-dag small.es-b-donut-uitleg { max-width: 9rem; margin: 0; padding: 0; font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; color: var(--color-text-secondary); line-height: var(--leading-snug); }
/* werkwijze-kop zoals de hero: bovenaan uitgelijnd, zelfde kolomverhouding */
.es-b .es-b-dag-kop { align-items: start; }
@media (min-width: 60rem) { .es-b .es-b-dag-kop { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); } .es-b .es-b-dag-kop .es-b-dag-lead { padding-top: 0.45rem; } }

/* UI/UX-review (10-16) */
/* projecten groter: één per rij, beeld breed en leesbaar, tekst ernaast; om en om gespiegeld */
.es-b .es-b-werk { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
@media (min-width: 60rem) {
  .es-b a.es-b-project { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "beeld kop" "beeld tekst"; grid-template-rows: auto 1fr; column-gap: var(--space-12); align-items: start; }
  .es-b a.es-b-project:nth-child(even) { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-areas: "kop beeld" "tekst beeld"; }
  .es-b a.es-b-project .es-b-lijst { grid-area: beeld; margin: 0; }
  .es-b a.es-b-project .es-b-projectregel { grid-area: kop; align-self: end; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); }
  .es-b a.es-b-project > p { grid-area: tekst; }
  .es-b a.es-b-project .es-b-projectregel h3 { font-size: var(--text-2xl); }
  .es-b .es-b-pijl { order: 2; }
}
/* onderbalk op mobiel: vier gelijke iconen zeggen niets; alleen de woorden, groter */
@media (max-width: 48rem) {
  .hub-nav.is-onderbalk .ht-icoon { display: none; }
  .hub-nav.is-onderbalk .hub-tab { min-height: 52px; font-size: var(--text-sm); }
  .hub-nav.is-onderbalk .hub-tab[data-page="page-contact"] { color: var(--color-primary); }
}
@media (min-width: 60rem) {
  /* tekst verticaal midden naast het beeld, met een lijn erboven: geen lege kolom meer onder de tekst */
  .es-b a.es-b-project { grid-template-rows: 1fr auto auto 1fr; grid-template-areas: "beeld ." "beeld kop" "beeld tekst" "beeld ."; }
  .es-b a.es-b-project:nth-child(even) { grid-template-areas: ". beeld" "kop beeld" "tekst beeld" ". beeld"; }
  .es-b a.es-b-project .es-b-projectregel { align-self: auto; padding-top: var(--space-5); border-top: var(--es-b-lijn); }
  .es-b .es-b-werk { gap: var(--space-24); }
}
@media (min-width: 60rem) { .es-b a.es-b-project:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "beeld ." "beeld kop" "beeld tekst" "beeld ."; } }
.es-b .es-b-hero .es-b-kop { max-width: 14ch; }

/* review-variant (16-10): minder mono-hoofdletters, "Bekijk" als link, voettekst */
.es-b .es-b-match small,
.es-b .es-b-dag-uit span,
.es-b .es-b-vervolg-kop { font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: 0; text-transform: none; color: var(--color-text-muted); }
.es-b .es-b-pijl { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-primary-soft); text-underline-offset: .25em; }
.es-b .es-b-voet { padding-block: var(--space-8) var(--space-12); font-size: var(--text-sm); color: var(--color-text-muted); }
.es-b .es-b-voet .es-b-voet-rij { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
/* de landing heeft een eigen voettekst; de generieke bodem zou het merk herhalen */
.mock-landing-artifact:has(.es-b-voet) + .app-footer { display: none; }
.es-b .es-b-voet-kol { display: flex; flex-direction: column; gap: var(--space-2); }
.es-b .es-b-voet p { margin: 0; max-width: 32ch; }
.es-b .es-b-voet .es-b-voet-merk { font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-voet a { color: var(--color-text-secondary); text-decoration: none; }
.es-b .es-b-voet a:hover { color: var(--color-primary); text-decoration: underline; }

/* fotokaders (16-10, tijdelijk): waar een echte foto kan staan */
.es-b .es-b-fotokader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); text-align: center;
  border: 2px dashed var(--color-primary); border-radius: var(--radius-lg); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; padding: var(--space-4); }
.es-b .es-b-fotokader-a { aspect-ratio: 3 / 1; margin-block: var(--space-12) var(--space-8); }
.es-b .es-b-fotokader-b { aspect-ratio: 21 / 9; }
.es-b .es-b-fotokader-tag { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--color-text-on-primary); }
.es-b .es-b-fotokader-sub { font-weight: 400; color: var(--color-text-muted); }
@media (max-width: 48rem) { .es-b .es-b-fotokader-a, .es-b .es-b-fotokader-b { aspect-ratio: 4 / 3; } }

/* landschap A (17-10): getekend pad i.p.v. foto; het beeld zelf is media/m55.svg (eigen licht/donker, eigen animatie) */
.es-b .es-b-landschap { margin: var(--space-12) 0 var(--space-8); }
.es-b .es-b-landschap img { display: block; width: 100%; height: auto; }
@media (max-width: 48rem) { .es-b .es-b-landschap { margin-inline: calc(-1 * var(--space-4)); } }

/* intro tussen landschap en de perfecte match (17-10) */
.es-b .es-b-intro { margin: var(--space-10) 0; max-width: 64ch; }
.es-b .es-b-intro strong { font-weight: 600; color: var(--color-text-heading); }

/* perfecte match links, intro rechts (17-10): zelfde kolommen als de hero, tekst op de lijn van de hero-lead */
.es-b .es-b-intro-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; margin: 0 0 var(--space-12); }
.es-b .es-b-intro-raster .es-b-heromatch, .es-b .es-b-intro-raster .es-b-intro { margin: 0; }
@media (min-width: 48rem) { .es-b .es-b-intro-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-12); } }

.es-b .es-b-intro-raster { margin-top: var(--space-12); }
.es-b .es-b-intro-raster { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: start; }


/* intro met kop (17-10): kop links, tekst rechts zoals Werkwijze; de match eronder als één strook van vier vakken */
.es-b .es-b-intro-raster .es-b-intro-kop { margin: 0; }
.es-b .es-b-intro-raster .es-b-intro-kop strong { font-weight: 600; color: var(--color-text-heading); }

/* project in ontwikkeling (10-17): voortgang i.p.v. Bekijk, nog geen url */
.es-b .es-b-voortgang { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.es-b .es-b-voortgang li { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-bg-surface); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-voortgang .es-b-af { border-color: var(--color-sage); background: var(--color-sage-soft); }
.es-b .es-b-voortgang .es-b-af::before { content: "\2713"; color: var(--color-sage); }
.es-b .es-b-voortgang .es-b-bezig { border-color: var(--color-amber); border-style: dashed; background: var(--color-amber-soft); }
.es-b .es-b-voortgang .es-b-bezig::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--color-amber); }

/* voorlopig (10-17): mock = de statische site van vanavond. Formulier is een mailto-kaart, Inloggen verborgen.
   Terug: deze regels weg, slot data-mock-screen terug, placement page-contact terug (backup cms-voor-componenten-eraf.json). */
.es-mailkaart { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.es-mailkaart h3 { margin: 0 0 var(--space-2); }
.es-mailkaart p { margin: 0 0 var(--space-5); color: var(--color-text-secondary); }
.es-mailkaart .btn { display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-decoration: none; }

.es-b .es-b-voet-gegevens { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.es-b .es-b-voet-gegevens a { color: inherit; }

/* subpagina's concepten (10-17): stap per stap, beeld over de volle breedte */
.es-b .es-b-beeld-volgt { display: grid; place-items: center; aspect-ratio: 2 / 1; background: repeating-linear-gradient(135deg, var(--color-bg-surface) 0 12px, var(--color-bg) 12px 24px); }
.es-b .es-b-beeld-volgt span { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b.es-b-subconcept .es-b-inhoud a { grid-template-columns: auto 1fr; }

/* concepten-overzicht (10-17): twee kaarten naar de subpagina's */
.es-b .es-b-conceptkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-6); }
.es-b a.es-b-conceptkaart { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-surface); color: inherit; text-decoration: none; transition: border-color .15s ease; }
.es-b a.es-b-conceptkaart:hover { border-color: var(--color-primary); }
.es-b .es-b-conceptkaart .es-b-titel { margin: var(--space-2) 0 0; }
.es-b .es-b-conceptkaart small { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.es-b .es-b-conceptkaart p { margin: var(--space-3) 0 var(--space-4); color: var(--color-text-secondary); max-width: 46ch; }
.es-b .es-b-conceptkaart .es-b-pijl { margin-top: auto; }

.es-b.es-b-subconcept .es-b-vergelijk { margin-top: var(--space-12); }

/* schermafdruk uit het platform: symmetrisch kader, beeld niet bijgesneden */
.es-b .es-b-lijst.es-b-platform { padding: var(--space-6); }
.es-b .es-b-platform img { aspect-ratio: auto; object-fit: contain; border-radius: var(--radius-md); border-bottom: var(--es-b-lijn); }

.es-b .es-b-duo-vervolg { margin-top: var(--space-16); }
.es-b .es-b-doc-subkop { margin: 0; font-size: var(--text-2xl); line-height: var(--leading-tight); }

/* platformbeelden op mobiel (10-17): leesbaar door horizontaal te scrollen i.p.v. te verkleinen */
@media (max-width: 48rem) {
  .es-b .es-b-lijst.es-b-platform { padding: var(--space-3); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .es-b .es-b-platform img { width: 46rem; max-width: none; height: auto; }
}

/* samengevat (10-17): de twee patronen naast elkaar */
.es-b .es-b-chip-scherm { background: var(--color-bg-surface); border-color: var(--color-border-strong); }
.es-b .es-b-patronen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--space-6); margin-top: var(--space-12); }
.es-b .es-b-patroon { padding: var(--space-6); border: var(--es-b-lijn); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.es-b .es-b-patroon h3 { margin: 0 0 var(--space-4); }
.es-b .es-b-patroon-rij { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.es-b .es-b-patroon-pijl { color: var(--color-text-muted); }
.es-b .es-b-patroon p:last-child { margin: 0; color: var(--color-text-secondary); }

.es-b .es-b-patroon-label { margin: 0 0 var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
@media (max-width: 30rem) {
  .es-b .es-b-patroon-rij { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
  .es-b .es-b-patroon-pijl { display: block; transform: rotate(90deg); margin-left: var(--space-4); line-height: 1; }
}

/* samengevat met platformbeelden (10-17): begrippen als tekst, patronen als figuren naast elkaar */
.es-b .es-b-begrippen { margin: 0; display: grid; gap: 0; border-top: var(--es-b-lijn); }
.es-b .es-b-begrippen > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--es-b-lijn); }
.es-b .es-b-begrippen dt { font-weight: 600; color: var(--color-text-heading); }
.es-b .es-b-begrippen dd { margin: 0; color: var(--color-text-secondary); }
.es-b .es-b-patronen .es-b-patroon { padding: 0; border: 0; background: transparent; }
.es-b .es-b-patronen .es-b-projectbeeld { margin-top: var(--space-4); }
@media (max-width: 30rem) { .es-b .es-b-begrippen > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

.es-b ul.es-b-begrippen { list-style: none; padding: 0; }
.es-b ul.es-b-begrippen li { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-bottom: var(--es-b-lijn); }
.es-b ul.es-b-begrippen strong { color: var(--color-text-heading); }
.es-b ul.es-b-begrippen span { color: var(--color-text-secondary); }
.es-b .es-b-patronen { margin-top: var(--space-8); }
@media (max-width: 30rem) { .es-b ul.es-b-begrippen li { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

/* samengevat met de echte symbolen uit het platform (10-17) */
.es-b .es-b-symbolen li { grid-template-columns: 6rem minmax(0, 1fr); }
.es-b .es-b-symbolen li > span { display: grid; gap: 2px; }
.es-b .es-b-symbolen li strong { color: var(--color-text-heading); }
.es-b img.es-b-symbool { display: block; width: 5rem; height: auto; justify-self: start; }
.es-b .es-b-patronen .es-b-patroon { padding: var(--space-6); border: var(--es-b-lijn); background: var(--color-bg-surface); }
.es-b .es-b-patroon-rij { gap: var(--space-3); }
.es-b img.es-b-symbool-klein { width: 4.25rem; }
@media (max-width: 30rem) { .es-b .es-b-symbolen li { grid-template-columns: 5rem minmax(0, 1fr); } }

.es-b img.es-b-symbool { width: 5.5rem; }
.es-b img.es-b-symbool-klein { width: 5rem; }
@media (max-width: 30rem) {
  .es-b .es-b-patroon-rij { flex-direction: row; align-items: center; gap: var(--space-2); }
  .es-b .es-b-patroon-pijl { transform: none; margin-left: 0; }
  .es-b img.es-b-symbool-klein { width: 3.75rem; }
}

.es-b .es-b-platform-cellen { margin-top: var(--space-10); }

/* concepten met kleur en pictogrammen (10-17): subtiele tinten uit het designsysteem */
.es-b a.es-b-conceptkaart { position: relative; overflow: hidden; border-top-width: 4px; }
.es-b a.es-b-ck-em { border-top-color: var(--color-iris); background: linear-gradient(180deg, var(--color-iris-soft) 0, var(--color-bg-surface) 9rem); }
.es-b a.es-b-ck-es { border-top-color: var(--color-amber); background: linear-gradient(180deg, var(--color-amber-soft) 0, var(--color-bg-surface) 9rem); }
.es-b .es-b-ck-kop { display: flex; align-items: flex-start; justify-content: space-between; }
.es-b .es-b-ck-icoon { display: grid; place-items: center; width: 6.5rem; height: 5.5rem; border-radius: var(--radius-lg); background: var(--color-bg-surface); border: 1px solid var(--color-border); }
.es-b .es-b-ck-icoon img { width: 4.5rem; height: auto; }
.es-b a.es-b-ck-em:hover { border-color: var(--color-iris); }
.es-b a.es-b-ck-es:hover { border-color: var(--color-amber); }
.es-b a.es-b-ck-em:hover .es-b-pijl { color: var(--color-iris); }
.es-b .es-b-ai-cellen li { position: relative; }
.es-b .es-b-cel-icoon { display: grid; place-items: center; width: 3.5rem; height: 2.75rem; margin-bottom: var(--space-4); border-radius: var(--radius-md); }
.es-b .es-b-cel-icoon img { width: 2.75rem; height: auto; }
.es-b .es-b-cel-iris { background: var(--color-iris-soft); }
.es-b .es-b-cel-amber { background: var(--color-amber-soft); }
.es-b .es-b-cel-sage { background: var(--color-sage-soft); }
.es-b .es-b-ai-cellen li:nth-child(1) .es-b-nr { color: var(--color-iris); }
.es-b .es-b-ai-cellen li:nth-child(2) .es-b-nr { color: var(--color-amber-strong, #B87418); }
.es-b .es-b-ai-cellen li:nth-child(3) .es-b-nr { color: var(--color-sage); }

.es-b .es-b-cel-icoon { width: 4rem; height: 3.25rem; }
.es-b .es-b-cel-icoon img { width: 3.25rem; }

.es-b .es-b-platform-smal img { max-width: 73%; margin-inline: auto; }
@media (max-width: 48rem) { .es-b .es-b-platform-smal img { max-width: none; } }

.es-b .es-b-voordelen { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.es-b .es-b-voordelen h3 { margin-top: 0; }
.es-b .es-b-voordelen li:first-child h3 { color: var(--color-primary); }

/* Smalle schermen: de kop schaalt mee, zodat het langste woord ("softwareproject.") binnen de kolom past. */
@media (max-width: 480px) { .es-b .es-b-kop { font-size: min(calc(var(--text-5xl) * 1.3), 10.5vw); } }

/* Heel smalle schermen (320 px): lange woorden breken af, kolommen mogen krimpen. */
@media (max-width: 359px) { .es-b h2, .es-b h3, .es-b p, .es-b li { hyphens: auto; overflow-wrap: break-word; } .es-b .es-b-contact > *, .es-b .es-b-duo > *, .es-b .es-b-contact form * { min-width: 0; max-width: 100%; } .es-b .es-b-link { white-space: normal; } }


/* lead onder 'Geïmplementeerd met deze werkwijze' (18-10) */
.es-b .es-b-werk-lead { max-width: 60ch; }

/* bronvermelding onder de lead van een conceptpagina (18-10) */
.es-b .es-b-bron { margin: calc(-1 * var(--space-4)) 0 0; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.es-b .es-b-bron a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* privacyverklaring (18-10) */
.es-privacy { max-width: 44rem; }
.es-privacy h2 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-xl); }
.es-privacy .es-privacy-lead { font-size: var(--text-lg); color: var(--color-text-secondary); }
.es-privacy .es-privacy-datum { margin-top: var(--space-8); font-size: var(--text-sm); color: var(--color-text-secondary); }
.es-privacy code { font-size: 0.95em; }

[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-kop {  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8);  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-titel {  margin: 0; font-size: var(--text-3xl);  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-kaarten {  display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-kaart {  display: flex; flex-direction: column; background: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-base), transform var(--transition-base);  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-kaart:hover {  box-shadow: var(--shadow-md); transform: translateY(-2px);  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-beeld {  aspect-ratio: 16 / 9; background: var(--color-primary-soft); display: grid; place-items: center; overflow: hidden;  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-beeld img {  width: 100%; height: 100%; object-fit: cover;  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-tekst {  display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6);  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-soort {  align-self: flex-start; padding: 0.1rem var(--space-3); border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase;  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-kaarttitel {  margin: 0; font-size: var(--text-xl);  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-samenvatting {  margin: 0; color: var(--color-text-secondary);  }
[data-sa="s1792146591255-89stu3"]:not(:where([data-sa-pagina])) .wd-leeg {  color: var(--color-text-muted);  }