@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-normal-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/geist-normal-0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/geist-mono-normal-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-italic-2.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-normal-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/unbounded-normal-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(fonts/unbounded-normal-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Eén lichte stijl. Vier deelkleuren (k1..k4) sturen koppen, tegels, kaarten en de dock.
   Maten volgen het handboek zelf: 4-punts raster, zes lettergroottes, twee gewichten per font,
   één radiustrap (binnenradius = buitenradius - padding), tikdoelen van minstens 44px. */
:root {
  color-scheme: light;
  --paper: #f8f7fd;
  --surface: #ffffff;
  --wash: #ebe9f6;
  --ink: #16123a;
  --muted: #57536f;
  --line: #e1def0;
  --p1: #2b3bff; --p1-on: #ffffff; --p1-ink: #2330e8; --p1-soft: #e3e6ff;
  --p2: #e5007a; --p2-on: #ffffff; --p2-ink: #c4005f; --p2-soft: #ffe0ef;
  --p3: #ff6a13; --p3-on: #2a1000; --p3-ink: #a83c00; --p3-soft: #ffe6d6;
  --p4: #b8f02a; --p4-on: #1c2b00; --p4-ink: #3f6b00; --p4-soft: #ecfbc7;
  --p5: #d9d5f1; --p5-on: #16123a; --p5-ink: #16123a; --p5-soft: #ebe9f6;
  --good: #0e6239;
  --bad: #b3182f;
  --mobile: #086a5c;
  --desktop: #6a35d9;
  --glass: color-mix(in srgb, #ffffff 72%, transparent);
  --glass-edge: color-mix(in srgb, #ffffff 85%, transparent);
  --shade: color-mix(in srgb, #16123a 18%, transparent);
  --display: "Unbounded", "Arial Black", "Helvetica Neue", sans-serif;
  --body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --spring: cubic-bezier(.3, 1.55, .5, 1);
  /* ruimte: veelvouden van 4 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  /* hoeken: 40 > 28 > 20 > 12, telkens 8px padding ertussen */
  --r-s: 12px; --r-m: 20px; --r-l: 28px; --r-xl: 40px; --r-pill: 999px;
  /* letters: zes maten, stappen rond de wortel van de gulden snede (1,27); de twee grootste schalen vloeiend */
  --t-meta: 13px; --t-body: 16px; --t-lead: 20px;
  --t-h3: clamp(22px, 1rem + .7vw, 26px);
  --t-h2: clamp(32px, .9rem + 3.4vw, 64px);
  --tap: 44px;
  --gut: clamp(16px, 3vw, 40px);
  --h: var(--p1); --h-on: var(--p1-on); --h-ink: var(--p1-ink); --h-soft: var(--p1-soft);
}
.k1 { --h: var(--p1); --h-on: var(--p1-on); --h-ink: var(--p1-ink); --h-soft: var(--p1-soft); }
.k2 { --h: var(--p2); --h-on: var(--p2-on); --h-ink: var(--p2-ink); --h-soft: var(--p2-soft); }
.k3 { --h: var(--p3); --h-on: var(--p3-on); --h-ink: var(--p3-ink); --h-soft: var(--p3-soft); }
.k4 { --h: var(--p4); --h-on: var(--p4-on); --h-ink: var(--p4-ink); --h-soft: var(--p4-soft); }
.k5 { --h: var(--p5); --h-on: var(--p5-on); --h-ink: var(--p5-ink); --h-soft: var(--p5-soft); }

* { box-sizing: border-box; }
html { scrollbar-color: var(--p1) var(--wash); }
body { background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--t-body); line-height: 1.5; margin: 0; padding: 0; accent-color: var(--p1); caret-color: var(--p2); -webkit-font-smoothing: antialiased; }
::selection { background: var(--p1); color: var(--p1-on); }
a { color: inherit; text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* Tekstlink: onderstreept en in de deelkleur; het tikvlak is hoger dan de regel */
.lnk { padding-block: var(--s3); color: var(--p1-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; border-radius: var(--s1); transition: color .2s; }
@media (hover: hover) { .lnk:hover { color: var(--ink); } }
.lnk:active { color: var(--p2-ink); }
.lnk:focus-visible { outline-offset: -8px; }
.slab .lnk { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wrap { overflow-x: clip; padding-bottom: calc(var(--s9) + env(safe-area-inset-bottom, 0px)); }
.in { max-width: 1360px; margin-inline: auto; padding-inline: max(var(--gut), env(safe-area-inset-left, 0px)) max(var(--gut), env(safe-area-inset-right, 0px)); }

/* Knoppen: één gevulde hoofdactie, de rest een rand. Padding links/rechts = 2x boven/onder.
   Staten komen uit de basiskleur: hover feller, ingedrukt donkerder en kleiner, uit = ontkleurd. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: var(--s3) var(--s5); border: 0; border-radius: var(--r-pill); background: var(--h); color: var(--h-on); font: 600 var(--t-body)/1.5 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter .2s, transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 28%, transparent); }
@media (hover: hover) {
  .btn:hover { filter: brightness(1.12) saturate(1.1); box-shadow: 0 12px 24px -16px var(--h-ink); }
  .btn.ghost:hover { filter: none; background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); }
}
.btn:active { filter: brightness(.9); transform: scale(.97); box-shadow: none; }
.btn.ghost:active { filter: none; background: color-mix(in srgb, var(--ink) 13%, transparent); }
.btn:disabled, .btn[aria-disabled="true"] { filter: grayscale(1); opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Held: de naam reusachtig (de enige reuzentekst op de pagina), met een uitbarsting vanuit de apostrof ── */
.hero { position: relative; overflow: clip; padding-block: clamp(48px, 6vw, 96px) var(--s6); container-type: inline-size; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 120px; background: linear-gradient(transparent, var(--paper)); pointer-events: none; z-index: 0; }
.hero .in { position: relative; z-index: 1; }
h1 { font-family: var(--display); font-weight: 900; font-size: clamp(60px, 15cqi, 300px); line-height: 1; letter-spacing: -.03em; margin: 0; position: relative; isolation: isolate; white-space: nowrap; }
h1 .w { display: inline-block; transform-origin: 40% 80%; animation: klop .95s var(--spring) .15s both; }
h1 .w:nth-child(even) { animation-name: klop2; }
h1.stack .w { display: block; width: max-content; }
.kiss { position: relative; display: inline-block; margin-inline: .03em -.025em; color: var(--p2); animation: smak .8s var(--spring) .85s both; }
.kiss.los { width: 0; height: 1em; vertical-align: top; }
.fan { position: absolute; left: 50%; top: 34%; width: min(175vw, 1500px); aspect-ratio: 1; translate: -50% -50%; z-index: -2; border-radius: 50%; pointer-events: none; opacity: .5; will-change: transform;
  background:
    repeating-conic-gradient(from 8deg, color-mix(in srgb, var(--paper) 46%, transparent) 0 5deg, transparent 5deg 15deg),
    conic-gradient(from 215deg, var(--p1), var(--p2), var(--p3), var(--p4), var(--p1));
  -webkit-mask-image: radial-gradient(closest-side, #000 0, rgba(0, 0, 0, .7) 30%, transparent 78%);
  mask-image: radial-gradient(closest-side, #000 0, rgba(0, 0, 0, .7) 30%, transparent 78%);
  animation: waaier 1.5s var(--ease) .8s both, draai 90s linear 2.3s infinite; }
.sparks { position: absolute; left: 50%; top: 34%; width: 0; height: 0; z-index: -1; pointer-events: none; }
.sparks i { position: absolute; left: 0; top: 0; width: calc(var(--s) * .1em); aspect-ratio: 1; margin: calc(var(--s) * -.05em) 0 0 calc(var(--s) * -.05em); background: var(--c); translate: calc(var(--x) * 1em) calc(var(--y) * 1em);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: spat .9s var(--spring) calc(.9s + var(--d) * 60ms) both, twinkel calc(3.6s + var(--d) * .3s) ease-in-out calc(2.2s + var(--d) * .2s) infinite alternate; }
.sparks i.o { clip-path: none; border-radius: 50%; background: none; border: .014em solid var(--c); }
.sparks i.x { clip-path: polygon(20% 0, 50% 30%, 80% 0, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0 80%, 30% 50%, 0 20%); }
@keyframes klop { from { translate: -.07em .06em; rotate: -4deg; } }
@keyframes klop2 { from { translate: .09em -.04em; rotate: 3.5deg; } }
@keyframes smak { 0% { scale: 1; } 45% { scale: 1.7; } }
@keyframes waaier { from { scale: .08; rotate: -120deg; opacity: 0; } }
@keyframes draai { to { rotate: 360deg; } }
@keyframes spat { from { translate: 0 0; scale: 0; } }
@keyframes twinkel { to { rotate: 45deg; scale: .72; } }

/* Tekstblok: belofte, één regel uitleg, dan de knoppen op ruim dubbele afstand */
.intro { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6) clamp(24px, 4vw, 64px); align-items: end; margin-top: clamp(24px, 3.4vw, 48px); }
.claim { margin: 0; max-width: 22ch; font: 700 var(--t-h3)/1.2 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.lede { margin: var(--s3) 0 0; max-width: 44ch; font-size: var(--t-lead); line-height: 1.4; text-wrap: pretty; }
.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.stats { margin: 0; display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: var(--s4) var(--s5); padding: var(--s5) clamp(24px, 2.4vw, 32px); border-radius: var(--r-l); background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 16px 48px -24px var(--shade); }
.st { display: flex; flex-direction: column-reverse; gap: var(--s1); }
.st dt { font: 400 var(--t-meta)/1.4 var(--mono); color: var(--muted); }
.st dd { margin: 0; font: 700 var(--t-h2)/1 var(--display); letter-spacing: -.03em; color: var(--h-ink); font-variant-numeric: tabular-nums; }

/* ── Lopende band met kernregels; elke regel springt naar zijn hoofdstuk ── */
.tape { overflow: hidden; padding-block: var(--s2); display: grid; gap: var(--s2); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.row { display: flex; width: max-content; animation: band 110s linear infinite; }
.row.r2 { animation-direction: reverse; animation-duration: 130s; }
.tape:hover .row, .tape:active .row { animation-play-state: paused; }
.row a { flex: none; display: flex; align-items: center; min-height: var(--tap); margin-right: var(--s2); padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--h); color: var(--h-on); font: 600 var(--t-body)/1.5 var(--body); white-space: nowrap; text-decoration: none; transition: filter .2s; }
.row a:nth-child(3n) { background: var(--h-soft); color: var(--ink); }
@media (hover: hover) { .row a:hover { filter: brightness(1.1) saturate(1.1); text-decoration: underline; } }
.row a:active { filter: brightness(.9); }
@keyframes band { to { transform: translateX(-50%); } }

/* ── Inhoudsopgave als bento ── */
.bento { padding-top: clamp(48px, 6vw, 80px); }
.bento .in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
.grp { display: grid; grid-template-rows: auto 1fr; gap: var(--s3); min-width: 0; }
.grp h2 { margin: 0; display: flex; align-items: baseline; gap: var(--s3); font: 700 var(--t-h3)/1.15 var(--display); letter-spacing: -.03em; color: var(--h-ink); }
.grp h2 small { font: 400 var(--t-meta)/1.4 var(--mono); letter-spacing: 0; color: var(--muted); }
.tiles { display: grid; gap: var(--s4); grid-auto-rows: minmax(160px, 1fr); }
.g1 { grid-column: span 7; } .g1 .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g1 .tile:nth-child(1), .g1 .tile:nth-child(4) { grid-column: span 2; }
.g2 { grid-column: span 5; } .g2 .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g2 .tile:nth-child(1) { grid-column: span 2; }
.g3 { grid-column: span 4; } .g3 .tiles { grid-template-columns: minmax(0, 1fr); }
.g4 { grid-column: span 8; } .g4 .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g4 .tile:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.g5 { grid-column: 1 / -1; grid-template-rows: auto; }
.tile { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; gap: var(--s2); padding: var(--s5) var(--s5) var(--s5) var(--s5); border-radius: var(--r-l); text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); --gc: var(--h); --dim: .72;
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--up, 0px)) scale(var(--sc, 1)); transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.tile:nth-child(even) { background: var(--h-soft); border-color: transparent; --gc: var(--h-ink); }
/* op het volle kleurvlak blijft bijtekst op volle dekking, anders zakt het contrast onder 4,5:1 */
.tile:nth-child(1) { background: var(--h); color: var(--h-on); border-color: transparent; --gc: var(--h-on); --dim: 1; }
.tile::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, #ffffff 55%, transparent), transparent 70%); }
.tile .top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3); }
.tile .cnt { font: 700 var(--t-h3)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; text-align: right; }
.tile .cnt small { display: block; font: 400 var(--t-meta)/1.4 var(--mono); letter-spacing: 0; margin-top: var(--s1); opacity: var(--dim); }
.tile .nm { align-self: end; display: grid; gap: var(--s1); }
.tile .n { font: 400 var(--t-meta)/1.4 var(--mono); opacity: var(--dim); }
.tile b { font: 700 var(--t-lead)/1.15 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.tile:nth-child(1) b { font-size: var(--t-h3); }
.tile .sub { font-size: var(--t-meta); line-height: 1.4; opacity: var(--dim); }
.tile.leeg { filter: grayscale(1); opacity: .45; pointer-events: none; }
.g5 .tile { grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; gap: var(--s5); padding: var(--s4) var(--s5); }
.g5 .tile b { font-size: var(--t-h3); }
@media (hover: hover) {
  .tile:hover { --up: -4px; box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--h-ink) 55%, transparent); }
  .tile:hover::after { opacity: 1; }
}
.tile:active { --up: 0px; --sc: .98; }

/* Hoofdstuktekens: één achtergrond per stuk, in de kleur van het deel */
.gl { display: block; flex: none; width: 44px; height: 44px; color: var(--gc, var(--h)); background-repeat: no-repeat; }
.g-hierarchie { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 100% 42%, 68% 20%, 40% 14%; background-position: 0 0, 0 64%, 0 100%; }
.g-layout { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 58% 58%, 34% 58%, 34% 34%, 58% 34%; background-position: 0 0, 100% 0, 0 100%, 100% 100%; }
.g-typografie::before { content: "Aa"; font: 700 30px/44px var(--display); letter-spacing: -.06em; }
.g-kleur { background-image: radial-gradient(circle at 34% 36%, currentColor 0 33%, transparent 34%), radial-gradient(circle at 68% 62%, color-mix(in srgb, currentColor 55%, transparent) 0 36%, transparent 37%); }
.g-componenten { background-image: linear-gradient(currentColor, currentColor), radial-gradient(circle, currentColor 0 62%, transparent 66%), linear-gradient(color-mix(in srgb, currentColor 45%, transparent), color-mix(in srgb, currentColor 45%, transparent)); background-size: 100% 44%, 40% 40%, 52% 22%; background-position: 0 0, 0 100%, 100% 88%; }
.g-navigatie { background-image: linear-gradient(currentColor, currentColor), radial-gradient(circle, currentColor 0 56%, transparent 60%); background-size: 100% 52%, 33.33% 30%; background-position: 0 0, 0 100%; background-repeat: no-repeat, repeat-x; }
.g-interactie-motion { border-radius: 50%; background-image: repeating-radial-gradient(circle, currentColor 0 4px, transparent 4px 10px); }
.g-dashboards { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 19% 40%, 19% 78%, 19% 56%, 19% 100%; background-position: 0 100%, 33.3% 100%, 66.6% 100%, 100% 100%; }
.g-landingspaginas { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 100% 54%, 30% 34%, 30% 34%, 30% 34%; background-position: 0 0, 0 100%, 50% 100%, 100% 100%; }
.g-ux-denken { background-image: radial-gradient(circle, currentColor 0 22%, transparent 24% 44%, currentColor 46% 62%, transparent 65%); }
.g-proces-workflow { background-image: linear-gradient(currentColor, currentColor), radial-gradient(circle, currentColor 0 60%, transparent 64%); background-size: 100% 4px, 33.33% 34%; background-position: 0 50%, 0 50%; background-repeat: no-repeat, repeat-x; }
.g-ai-vibecoding { background-image: repeating-linear-gradient(45deg, currentColor 0 5px, transparent 5px 11px); border-radius: var(--r-s); }
.g-carriere-klanten { background-image: linear-gradient(color-mix(in srgb, currentColor 45%, transparent), color-mix(in srgb, currentColor 45%, transparent)), linear-gradient(currentColor, currentColor); background-size: 72% 62%, 72% 62%; background-position: 100% 0, 0 100%; }
.g-tools-bronnen { background-image: radial-gradient(circle, currentColor 0 48%, transparent 52%); background-size: 33.33% 33.33%; background-repeat: repeat; }
.g-bronnen, .g-leeg { background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor); background-size: 100% 20%, 100% 20%, 62% 20%; background-position: 0 0, 0 50%, 0 100%; }

/* ── Hoofdstukken ── */
main { display: block; min-height: 40vh; }
section.ch { padding-top: clamp(48px, 7vw, 96px); content-visibility: auto; contain-intrinsic-size: auto 1500px; scroll-margin-top: 0; }
.slab { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s2) clamp(16px, 3vw, 48px); align-items: center; padding: clamp(24px, 3.4vw, 48px); margin-bottom: var(--s4); border-radius: var(--r-xl); background: var(--h); color: var(--h-on); --gc: var(--h-on); }
.slab::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 92% -10%, color-mix(in srgb, #ffffff 34%, transparent), transparent 60%), radial-gradient(40% 90% at 0% 110%, color-mix(in srgb, var(--ink) 16%, transparent), transparent 70%); }
.slab > * { position: relative; }
/* nummer even groot als de titel; het verschil zit in de vorm (alleen omlijnd), niet in nog een maat */
.slab .no { align-self: start; font: 900 var(--t-h2)/1.1 var(--display); letter-spacing: -.03em; color: var(--h); paint-order: stroke fill; -webkit-text-stroke: 4px var(--h-on); font-variant-numeric: tabular-nums; }
.slab h2 { margin: 0; font: 700 var(--t-h2)/1.1 var(--display); letter-spacing: -.03em; text-wrap: balance; overflow-wrap: anywhere; }
.slab .sub { margin: var(--s2) 0 0; max-width: 56ch; font-size: var(--t-lead); line-height: 1.4; }
.facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: var(--s4) 0 0; padding: 0; list-style: none; font: 400 var(--t-meta)/1.4 var(--mono); }
.slab .gl { width: clamp(72px, 8vw, 112px); height: clamp(72px, 8vw, 112px); }
.slab .g-typografie::before { font-size: clamp(48px, 5.4vw, 76px); line-height: clamp(72px, 8vw, 112px); }

.tips { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); grid-auto-flow: dense; }
@media (min-width: 700px) { .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .tips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* De kaart is geen link: hij beweegt dus ook niet mee met de aanwijzer */
.tip { min-width: 0; display: grid; align-content: start; padding: var(--s2); border-radius: var(--r-l); border: 1px solid var(--line); }
.tip.kern { background: var(--surface); border-color: transparent; box-shadow: 0 16px 40px -28px color-mix(in srgb, var(--h-ink) 45%, transparent); }
/* Rangorde in de kaart: titel (vet, 20) > uitleg (volle dekking, 16) > waarden (mono op tint) > labels en bron (gedempt, 13).
   Afstanden lopen op: 8 > 12 > 16. */
.tx { display: grid; padding: var(--s3); align-content: start; justify-items: start; }
.tip h3 { margin: 0; max-width: 34ch; font: 600 var(--t-lead)/1.25 var(--body); letter-spacing: -.012em; text-wrap: balance; }
.tip p { margin: var(--s2) 0 0; max-width: 62ch; font-size: var(--t-body); line-height: 1.5; text-wrap: pretty; }
.val { margin-top: var(--s3); max-width: 62ch; font: 400 var(--t-meta)/1.45 var(--mono); padding: var(--s2) var(--s4); border-radius: var(--r-s); background: var(--h-soft); color: var(--ink); overflow-wrap: anywhere; }
.meta { justify-self: stretch; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s4); font: 400 var(--t-meta)/1.4 var(--mono); color: var(--muted); }
.pf { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4) var(--s2) var(--s3); border-radius: var(--r-pill); background: var(--wash); white-space: nowrap; }
.pf::before { content: ""; width: 7px; height: 11px; border: 1.5px solid currentColor; border-radius: 2.5px; }
.pf.desktop::before { width: 13px; height: 9px; border-radius: 2px; }
.pf.beide::before { width: 13px; height: 9px; border-radius: 2px; box-shadow: 5px 3px 0 -1.5px var(--wash), 5px 3px 0 0 currentColor; margin-right: var(--s1); }
.pf.mobile { color: var(--mobile); } .pf.desktop { color: var(--desktop); }
/* 'Kernregel' zegt alleen iets tussen gewone regels; in een lijst met louter kernregels is het ruis */
.rid { display: inline-flex; align-items: center; gap: var(--s2); min-height: var(--tap); margin-block: -8px; padding: 0 var(--s4); border: 0; border-radius: var(--r-pill); background: var(--h-soft); color: var(--h-ink); font: inherit; white-space: nowrap; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.rid .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
@media (hover: hover) { .rid:hover { background: var(--h); color: var(--h-on); } }
.rid:active { transform: scale(.96); }
.tip.hit { box-shadow: 0 0 0 3px var(--h), 0 18px 40px -22px var(--shade); }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); z-index: 60; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font: 400 var(--t-body)/1.3 var(--body); white-space: nowrap; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.toast.aan { opacity: 1; transform: translate(-50%, 0); }
.toast b { font: 400 var(--t-meta)/1 var(--mono); opacity: .8; }
@media (prefers-reduced-motion: reduce) { .rid, .toast { transition: none; } }
.kn { display: none; padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--h-soft); color: var(--h-ink); }
.tips.mix .kn { display: inline-block; }
.src { position: relative; margin-left: auto; display: grid; place-items: center; width: var(--tap); height: var(--tap); margin-block: -8px; margin-right: -8px; border-radius: var(--r-pill); color: var(--h-ink); }
/* de cirkel groeit vanuit het midden achter het icoon en krimpt daar weer naartoe */
.src::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--h-soft); transform: scale(0); transition: transform .45s cubic-bezier(.45, 0, .25, 1); }
.src svg { position: relative; width: 26px; height: 26px; display: block; opacity: .42; transition: opacity .45s cubic-bezier(.45, 0, .25, 1), transform .2s var(--ease); }
@media (hover: hover) { .src:hover::before { transform: scale(1); transition: transform .32s var(--ease); } .src:hover svg { opacity: 1; transition: opacity .32s var(--ease), transform .2s var(--ease); } }
.src:focus-visible::before { transform: scale(1); }
.src:focus-visible svg { opacity: 1; }
.src:active svg { opacity: 1; transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .src::before, .src svg { transition: none; } }
@media (min-width: 700px) { .tip.wide { grid-column: span 2; } }

/* Voorbeelden: de lijst is van de pagina, de stage en zijn tokens zijn van het voorbeeld */
.ex { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s2); padding: var(--s2); border-radius: var(--r-m); background: var(--h-soft); }
.pane { margin: 0; display: grid; gap: var(--s1); min-width: 0; }
.stage { height: 190px; overflow: hidden; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; padding: 12px; font-size: 11px; line-height: 1.35; color: var(--ink); }
.stage { --bg: #eef2ff; --surface: #ffffff; --ink: #141a33; --muted: #5a6385; --line: #d3daf3;
  --accent: #3b5bfd; --accent-soft: #e1e8ff; --desktop: #8a3ffc; --mobile: #00a388; --good: #1a9f5c; --bad: #e5484d;
  --c1: #3b5bfd; --c2: #8a3ffc; --c3: #00a388; --c4: #ff8a1f; --c5: #ff4f8b; --c6: #ffc53d;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif; }
.stage * { box-sizing: border-box; }
.pane figcaption { display: flex; align-items: baseline; gap: var(--s2); padding: var(--s1); font: 400 var(--t-meta)/1.4 var(--mono); color: var(--good); }
.pane figcaption::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--good); }
.pane.fout figcaption { color: var(--bad); }
.pane.fout figcaption::before { background: var(--bad); border-radius: 50%; }
.ph { width: 104px; height: 166px; border: 2px solid var(--ink); border-radius: 16px; background: var(--bg); overflow: hidden; position: relative; display: flex; flex-direction: column; font-size: 7px; line-height: 1.3; }

.more { display: flex; margin: var(--s5) auto 0; }

/* ── Zoekstaat en lege staat ── */
.found { padding-top: clamp(32px, 4vw, 48px); display: grid; justify-items: start; }
.found h2 { margin: 0; font: 700 var(--t-h2)/1.1 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; color: var(--p1-ink); }
.found p { margin: var(--s2) 0 0; font-size: var(--t-lead); line-height: 1.4; color: var(--muted); max-width: 50ch; }
.found .acts { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.found.niets { padding-top: clamp(48px, 8vw, 96px); }
.found.niets .gl { width: 64px; height: 64px; margin-bottom: var(--s5); color: var(--p1); opacity: .5; }
.found .btn { --h: var(--ink); --h-on: var(--paper); --h-ink: var(--ink); }
.zoekt .hero, .zoekt .tape, .zoekt .bento { display: none; }
.zoekt section.ch { padding-top: var(--s6); scroll-margin-top: var(--s4); }
.zoekt .slab { grid-template-columns: auto minmax(0, 1fr); padding: var(--s4) var(--s5); border-radius: var(--r-l); }
.zoekt .slab .no, .zoekt .slab h2 { font-size: var(--t-h3); }
.zoekt .slab .no { -webkit-text-stroke-width: 3px; align-self: center; }
.zoekt .slab .sub, .zoekt .slab .gl { display: none; }
.zoekt .facts { margin-top: var(--s1); }

.sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: var(--s3); }
.sources a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s4); align-content: start; padding: var(--s4) var(--s5); border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: transform .4s var(--ease), border-color .3s, background-color .2s; }
.sources a b { font-weight: 600; line-height: 1.3; text-wrap: balance; }
.sources a i { display: inline-flex; align-items: center; gap: var(--s1); font: 400 var(--t-meta)/1.4 var(--mono); font-style: normal; white-space: nowrap; padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--wash); align-self: start; }
.sources a span { grid-column: 1 / -1; color: var(--muted); line-height: 1.5; max-width: 62ch; }
@media (hover: hover) { .sources a:hover { transform: translateY(-3px); border-color: var(--ink); } }
.sources a:active { transform: scale(.99); background: var(--wash); }

.foot { padding-top: var(--s8); color: var(--muted); }
.foot b { font-weight: 600; color: var(--ink); margin-right: var(--s2); }

/* ── Zwevende dock: op groot scherm vier groepen, op telefoon drie tikdoelen op één rij ── */
/* ── Meelopend hoofdstukmenu ──
   Staat in de pagina vlak boven hoofdstuk 01, scrolt daarmee mee omhoog en blijft
   bovenaan plakken. Elk hoofdstuk draagt de kleur van zijn deel; het actieve is gevuld. */
:root { --navh: 60px; }
.chnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--s2)); z-index: 18; margin-top: clamp(32px, 5vw, 64px); padding-inline: max(var(--s3), env(safe-area-inset-left, 0px)) max(var(--s3), env(safe-area-inset-right, 0px)); display: grid; justify-items: center; pointer-events: none; }
.rail { pointer-events: auto; max-width: 100%; display: flex; gap: var(--s1); padding: var(--s2); border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7); box-shadow: 0 1px 0 var(--glass-edge) inset, 0 16px 40px -24px var(--shade), 0 6px 16px -12px var(--shade); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--s5); }
.rail::-webkit-scrollbar { display: none; }
.rail a { flex: none; display: inline-flex; align-items: center; gap: var(--s2); height: var(--tap); padding: 0 var(--s4); border-radius: var(--r-pill); font: 600 var(--t-meta)/1 var(--body); white-space: nowrap; text-decoration: none; color: var(--h-ink); background: transparent; transition: background-color .25s var(--ease), color .25s var(--ease), transform .2s var(--ease); }
.rail a .n { font: 400 var(--t-meta)/1 var(--mono); opacity: .7; }
.rail a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--h); flex: none; transition: transform .25s var(--ease), background-color .25s var(--ease); }
@media (hover: hover) { .rail a:hover { background: var(--h-soft); } }
.rail a:active { transform: scale(.96); }
/* De actieve staat is een los vlak (.ind) dat naar het nieuwe hoofdstuk schuift en
   onderweg van deelkleur wisselt; de tekst kleurt mee. */
.ind { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: var(--r-pill); background: var(--h); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.45, 0, .25, 1), width .5s cubic-bezier(.45, 0, .25, 1), height .5s cubic-bezier(.45, 0, .25, 1), background-color .5s cubic-bezier(.45, 0, .25, 1), opacity .2s linear; }
.ind.aan { opacity: 1; }
.ind.nu { transition: none; }
.rail a, .rail .lbl { position: relative; z-index: 1; }
.rail a[aria-current="true"] { background: transparent; color: var(--h-on); }
.rail a { transition: background-color .25s var(--ease), color .5s cubic-bezier(.45, 0, .25, 1), transform .2s var(--ease); }
.rail a[aria-current="true"]::before { background: var(--h-on); transform: scale(1.25); }
.rail a[aria-current="true"] .n { opacity: .85; }
.rail a.leeg { opacity: .4; pointer-events: none; }
.rail .lbl { display: none; }
.rail { position: relative; }
.zoekt .chnav { display: none; }
.chnav { padding-inline: 0; }
@media (min-width: 1100px) {
  :root { --navh: 0px; }
  /* Verticaal menu links. De kolom begint op de hoogte van hoofdstuk 01, scrolt daarmee
     mee omhoog en blijft dan staan. */
  .lay { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: var(--s6); align-items: start; }
  .zoekt .lay { display: block; }
  .chnav { top: calc(env(safe-area-inset-top, 0px) + var(--s5)); margin-top: clamp(48px, 7vw, 96px); display: block; pointer-events: auto; }
  .rail { flex-direction: column; gap: 2px; padding: var(--s3); border-radius: var(--r-l); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; max-height: calc(100vh - var(--s5) * 2 - 96px); max-height: calc(100dvh - var(--s5) * 2 - 96px); }
  .rail a { height: 36px; padding: 0 var(--s3); }
  .rail .lbl { display: block; padding: var(--s3) var(--s3) var(--s1); font: 400 var(--t-meta)/1 var(--mono); color: var(--h-ink); }
  .rail .lbl:first-child { padding-top: var(--s1); }
  /* de inhoudskolom is smaller: pas op heel brede schermen vier kolommen */
  .tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1560px) { .tips { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
section.ch { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--navh) + var(--s4)); }
.tip { scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--navh) + var(--s5)); }
@media (prefers-reduced-motion: reduce) { .rail a, .rail a::before, .ind { transition: none; } }

.dockwrap { position: fixed; inset: auto 0 0 0; z-index: 20; display: grid; justify-items: center; padding: 0 max(var(--s3), env(safe-area-inset-right, 0px)) calc(var(--s3) + env(safe-area-inset-bottom, 0px)) max(var(--s3), env(safe-area-inset-left, 0px)); pointer-events: none; }
.dock { pointer-events: auto; position: relative; width: min(960px, 100%); display: flex; align-items: center; gap: var(--s2); padding: var(--s2); border-radius: var(--r-pill); background: var(--glass); border: 1px solid var(--glass-edge); -webkit-backdrop-filter: blur(22px) saturate(1.7); backdrop-filter: blur(22px) saturate(1.7);
  box-shadow: 0 1px 0 var(--glass-edge) inset, 0 20px 48px -24px color-mix(in srgb, var(--h-ink) 45%, transparent), 0 8px 20px -12px var(--shade); transition: box-shadow .5s var(--ease); }
.seg { display: flex; flex: none; border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.seg button { border: 0; background: none; min-height: var(--tap); padding: var(--s2) var(--s5); border-radius: var(--r-pill); font: 600 var(--t-body)/1.5 var(--body); color: var(--ink); cursor: pointer; white-space: nowrap; transition: transform .2s var(--ease), background-color .2s, filter .2s; }
@media (hover: hover) {
  .seg button:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
  .seg button[aria-pressed="true"]:hover { background: var(--h); filter: brightness(1.12) saturate(1.1); }
}
.seg button:active { transform: scale(.96); background: color-mix(in srgb, var(--ink) 15%, transparent); }
.seg button[aria-pressed="true"] { background: var(--h); color: var(--h-on); }
.seg button[aria-pressed="true"]:active { background: var(--h); filter: brightness(.9); }
.search { position: relative; flex: 1 1 160px; min-width: 0; display: block; }
.search > .ic { position: absolute; left: 14px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.search input { width: 100%; height: var(--tap); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: var(--r-pill); padding: 0 var(--tap) 0 40px; background: var(--surface); font-size: var(--t-body); text-overflow: ellipsis; transition: border-color .2s, box-shadow .2s; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
@media (hover: hover) { .search input:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); } }
.search input:focus-visible { outline: none; border-color: var(--h-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h) 30%, transparent); }
.wis { position: absolute; right: 0; top: 0; width: var(--tap); height: var(--tap); display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; transition: color .2s, transform .2s var(--ease); }
.wis[hidden] { display: none; }
@media (hover: hover) { .wis:hover { color: var(--ink); } }
.wis:active { transform: scale(.88); color: var(--ink); }
.count { flex: none; font: 400 var(--t-meta)/1.4 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline: var(--s1); }
.count b { display: inline-block; color: var(--ink); font-weight: 400; }
.count.tik b { animation: tik .5s var(--ease); }
@keyframes tik { from { scale: 1.35; color: var(--h-ink); } }
.pick { flex: none; position: relative; display: block; color: var(--h-on); }
.pick select { -webkit-appearance: none; appearance: none; height: var(--tap); max-width: 216px; border: 0; border-radius: var(--r-pill); padding: 0 40px 0 var(--s5); font: 600 var(--t-body)/1.5 var(--body); color: inherit; background: var(--h); cursor: pointer; text-overflow: ellipsis; transition: filter .2s, transform .2s var(--ease); }
.pick::after { content: ""; position: absolute; right: 18px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border: solid currentColor; border-width: 0 2px 2px 0; border-radius: 1px; rotate: 45deg; pointer-events: none; }
@media (hover: hover) { .pick select:hover { filter: brightness(1.12) saturate(1.1); } }
.pick select:active { filter: brightness(.9); transform: scale(.97); }
.pick.pfp { display: none; color: var(--ink); }
.pick.pfp select { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.pick.pfp.aan { color: var(--h-on); }
.pick.pfp.aan select { background: var(--h); }
@media (prefers-reduced-transparency: reduce) { .dock, .stats { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

@media (max-width: 1000px) {
  .g1, .g2, .g3, .g4 { grid-column: 1 / -1; }
  .g3 .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
/* Compacte dock: platform wordt een keuzelijst (het systeem opent die als blad van onderen),
   de teller verschijnt alleen als er gefilterd of gezocht wordt. */
@media (max-width: 900px) {
  :root { --tap: 48px; }
  .seg { display: none; }
  .pick.pfp { display: block; }
  .pick select { max-width: 132px; padding-left: var(--s4); padding-right: var(--s6); }
  .pick::after { right: 14px; }
  .dock { border-radius: var(--r-xl); }
  .count { display: none; position: absolute; right: var(--s3); bottom: calc(100% + var(--s2)); padding: var(--s2) var(--s4); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 16px -10px var(--shade); color: var(--ink); }
  .dock.filt .count { display: block; }
  .dockwrap:has(#q:focus) { inset: 0 0 auto 0; padding-top: calc(var(--s3) + env(safe-area-inset-top, 0px)); padding-bottom: 0; }
  .dockwrap:has(#q:focus) .pick { display: none; }
  .dockwrap:has(#q:focus) .count { display: block; bottom: auto; top: calc(100% + var(--s2)); }
  .wrap:has(#q:focus) .found { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }
}
/* Telefoon: zoeken is een vergrootglas tot je het aantikt; dan krijgt het veld de hele balk.
   Zo blijven er drie ruime tikdoelen op één rij over. */
@media (max-width: 560px) {
  .pick { flex: 1 1 0; min-width: 0; }
  .pick select { width: 100%; max-width: none; }
  .search { flex: 0 0 var(--tap); }
  .search > .ic { left: 16px; }
  .search input { padding: 0; color: transparent; }
  .search input::placeholder { color: transparent; }
  .zoekt .search, .dockwrap:has(#q:focus) .search { flex: 1 1 0; }
  .zoekt .search input, .dockwrap:has(#q:focus) .search input { padding: 0 var(--tap) 0 40px; color: var(--ink); }
  .dockwrap:has(#q:focus) .search input::placeholder { color: var(--muted); }
  .zoekt .pick:not(.pfp) { display: none; }
  .zoekt .pick.pfp { flex: 0 0 auto; }
  .zoekt .pick.pfp select { width: auto; }
}
@media (max-width: 760px) {
  h1 { font-size: 25cqi; white-space: normal; }
  h1 .w { display: block; width: max-content; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta .btn { flex: 1 1 auto; }
  .bento .in { gap: var(--s5); }
  .grp .tiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: var(--s2); }
  .grp .tile, .grp .tile:nth-child(1), .g1 .tile:nth-child(4) { grid-column: auto; grid-row: auto; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-rows: auto; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s3) var(--s4) var(--s3) var(--s3); border-radius: var(--r-m); }
  .tile .top { display: contents; }
  .tile .nm { align-self: center; }
  .tile .gl { width: 32px; height: 32px; }
  .tile .g-typografie::before { font-size: 22px; line-height: 32px; }
  .tile .cnt { order: 3; font-size: var(--t-lead); }
  .tile .cnt small, .tile .sub, .tile .n { display: none; }
  /* op alineaformaat geen displayfont: de tegelnaam gaat naar de broodletter */
  .tile b, .tile:nth-child(1) b, .g5 .tile b { font: 600 var(--t-body)/1.3 var(--body); letter-spacing: 0; }
  .slab { grid-template-columns: auto minmax(0, 1fr); align-items: start; border-radius: var(--r-l); }
  .slab .gl { display: none; }
  .slab .sub { grid-column: 1 / -1; }
  .slab > div { display: contents; }
  .slab h2 { align-self: center; }
  .slab .sub, .facts { grid-column: 1 / -1; }
  /* geen kaart in kaart in kaart: het voorbeeld ligt direct op de regelkaart */
  .ex { padding: 0; background: none; }
  .tip .stage { border-radius: var(--r-m); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tape .row { flex-wrap: wrap; width: auto; justify-content: center; row-gap: var(--s2); }
  .tape .row a:nth-child(n+7) { display: none; }
  .tape { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gut); }
}

/* animaties uit de voorbeelden */
.x-c01g-row{animation:x-c01g-row 4.5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c01g-row{0%,22%{transform:translateX(0)}40%,78%{transform:translateX(-40px)}94%,100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){[class*="x-c01g-"]{animation:none!important}}
.x-c04g-h{animation:x-c04g-h 2.6s ease-in-out infinite}@keyframes x-c04g-h{0%,45%,100%{transform:translateY(0);opacity:.75}22%{transform:translateY(-5px);opacity:1}}@media (prefers-reduced-motion:reduce){[class*="x-c04g-"]{animation:none!important}}
@keyframes x-c06f-tap{0%,10%{opacity:0;transform:scale(.6)}16%,20%{opacity:1;transform:scale(1)}28%,100%{opacity:0;transform:scale(1.35)}}.x-c06f-tap{animation:x-c06f-tap 4s ease-out infinite}@media (prefers-reduced-motion:reduce){[class*="x-c06f-"]{animation:none!important}}
@keyframes x-c06g-tap{0%,10%{opacity:0;transform:scale(.6)}16%,20%{opacity:1;transform:scale(1)}28%,100%{opacity:0;transform:scale(1.35)}}.x-c06g-tap{animation:x-c06g-tap 4s ease-out infinite}.x-c06g-chip{animation:x-c06g-chip 4s cubic-bezier(.2,.9,.3,1) infinite}@keyframes x-c06g-chip{0%,20%{opacity:0;transform:translateY(9px)}30%,74%{opacity:1;transform:translateY(0)}84%,100%{opacity:0;transform:translateY(-3px)}}.x-c06g-a{animation:x-c06g-a 4s linear infinite}@keyframes x-c06g-a{0%,20%{opacity:1}24%,78%{opacity:0}84%,100%{opacity:1}}.x-c06g-b{animation:x-c06g-b 4s linear infinite}@keyframes x-c06g-b{0%,20%{opacity:0}24%,78%{opacity:1}84%,100%{opacity:0}}@media (prefers-reduced-motion:reduce){[class*="x-c06g-"]{animation:none!important}}
.x-c07f-m{animation:x-c07f-m 3.6s linear infinite}@keyframes x-c07f-m{0%,10%{transform:translateX(0)}44%,60%{transform:translateX(calc(100% - 22px))}94%,100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){[class*="x-c07f-"]{animation:none!important}}
.x-c07g-m{animation:x-c07g-m 3.6s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c07g-m{0%,10%{transform:translateX(0)}44%,60%{transform:translateX(calc(100% - 22px))}94%,100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){[class*="x-c07g-"]{animation:none!important}}
.x-c08g-s{animation:x-c08g-s 5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c08g-s{0%,30%{transform:translateY(0)}46%,66%{transform:translateY(100%)}82%,100%{transform:translateY(0)}}.x-c08g-p{animation:x-c08g-p 5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c08g-p{0%,30%{transform:scale(.92) translateY(3px)}46%,66%{transform:scale(1) translateY(0)}82%,100%{transform:scale(.92) translateY(3px)}}.x-c08g-d{animation:x-c08g-d 5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c08g-d{0%,30%{opacity:1}46%,66%{opacity:0}82%,100%{opacity:1}}.x-c08g-tap{animation:x-c08g-tap 5s linear infinite}@keyframes x-c08g-tap{0%,18%{opacity:0}24%,40%{opacity:1}46%,100%{opacity:0}}@media (prefers-reduced-motion:reduce){[class*="x-c08g-"]{animation:none!important}}
@keyframes x-c10f-tap{0%,18%{opacity:0;transform:scale(.7)}26%,62%{opacity:1;transform:scale(1)}72%,100%{opacity:0;transform:scale(1)}}.x-c10f-tap{animation:x-c10f-tap 3.2s ease-out infinite}@media (prefers-reduced-motion:reduce){[class*="x-c10f-"]{animation:none!important}}
@keyframes x-c10g-tap{0%,18%{opacity:0;transform:scale(.7)}26%,62%{opacity:1;transform:scale(1)}72%,100%{opacity:0;transform:scale(1)}}.x-c10g-tap{animation:x-c10g-tap 3.2s ease-out infinite}.x-c10g-o{animation:x-c10g-o 3.2s ease-out infinite}@keyframes x-c10g-o{0%,24%{opacity:0}29%,64%{opacity:1}76%,100%{opacity:0}}@media (prefers-reduced-motion:reduce){[class*="x-c10g-"]{animation:none!important}}
@keyframes x-c17f-tap{0%,8%{opacity:0;transform:scale(.6)}13%,16%{opacity:1;transform:scale(1)}22%,100%{opacity:0;transform:scale(1.3)}}.x-c17f-tap{animation:x-c17f-tap 5s ease-out infinite}.x-c17f-sp{animation:x-c17f-sp .8s linear infinite}@keyframes x-c17f-sp{to{transform:rotate(360deg)}}.x-c17f-r{animation:x-c17f-r 5s linear infinite}@keyframes x-c17f-r{0%,46%{opacity:1}50%,90%{opacity:0}97%,100%{opacity:1}}.x-c17f-u{animation:x-c17f-u 5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c17f-u{0%,48%{transform:translateY(0)}56%,90%{transform:translateY(-30px)}97%,100%{transform:translateY(0)}}.x-c17f-i{animation:x-c17f-i 5s linear infinite}@keyframes x-c17f-i{0%,15%{opacity:1}19%,90%{opacity:.4}97%,100%{opacity:1}}.x-c17f-t{animation:x-c17f-t 5s linear infinite}@keyframes x-c17f-t{0%,15%{opacity:1}18%,90%{opacity:0}97%,100%{opacity:1}}.x-c17f-w{animation:x-c17f-w 5s linear infinite}@keyframes x-c17f-w{0%,15%{opacity:0}18%,90%{opacity:1}97%,100%{opacity:0}}@media (prefers-reduced-motion:reduce){[class*="x-c17f-"]{animation:none!important}}
@keyframes x-c17g-tap{0%,8%{opacity:0;transform:scale(.6)}13%,16%{opacity:1;transform:scale(1)}22%,100%{opacity:0;transform:scale(1.3)}}.x-c17g-tap{animation:x-c17g-tap 5s ease-out infinite}.x-c17g-r{animation:x-c17g-r 5s linear infinite}@keyframes x-c17g-r{0%,15%{opacity:1}19%,90%{opacity:0}97%,100%{opacity:1}}.x-c17g-u{animation:x-c17g-u 5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c17g-u{0%,17%{transform:translateY(0)}25%,90%{transform:translateY(-30px)}97%,100%{transform:translateY(0)}}@media (prefers-reduced-motion:reduce){[class*="x-c17g-"]{animation:none!important}}
.x-c18f-k{animation:x-c18f-k 5s linear infinite}@keyframes x-c18f-k{0%,54%{opacity:1}60%,96%{opacity:0}100%{opacity:1}}.x-c18f-c{animation:x-c18f-c 5s linear infinite}@keyframes x-c18f-c{0%,54%{opacity:0}60%,96%{opacity:1}100%{opacity:0}}.x-c18f-sp{animation:x-c18f-sp .8s linear infinite}@keyframes x-c18f-sp{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){[class*="x-c18f-"]{animation:none!important}}
.x-c18g-k{animation:x-c18g-k 5s linear infinite}@keyframes x-c18g-k{0%,54%{opacity:1}60%,96%{opacity:0}100%{opacity:1}}.x-c18g-c{animation:x-c18g-c 5s linear infinite}@keyframes x-c18g-c{0%,54%{opacity:0}60%,96%{opacity:1}100%{opacity:0}}.x-c18g-sh{animation:x-c18g-sh 1.4s linear infinite}@keyframes x-c18g-sh{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}@media (prefers-reduced-motion:reduce){[class*="x-c18g-"]{animation:none!important}}
@keyframes x-c19f-tap{0%,14%{opacity:0;transform:scale(.6)}19%,23%{opacity:1;transform:scale(1)}29%,100%{opacity:0;transform:scale(1.3)}}.x-c19f-tap{animation:x-c19f-tap 5s ease-out infinite}.x-c19f-b{animation:x-c19f-b 5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c19f-b{0%,24%{transform:translateY(102%)}38%,84%{transform:translateY(0)}96%,100%{transform:translateY(102%)}}@media (prefers-reduced-motion:reduce){[class*="x-c19f-"]{animation:none!important}}
@keyframes x-c19g-tap{0%,14%{opacity:0;transform:scale(.6)}19%,23%{opacity:1;transform:scale(1)}29%,100%{opacity:0;transform:scale(1.3)}}.x-c19g-tap{animation:x-c19g-tap 5s ease-out infinite}.x-c19g-b{animation:x-c19g-b 5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c19g-b{0%,24%{transform:translateX(100%)}38%,84%{transform:translateX(0)}96%,100%{transform:translateX(100%)}}.x-c19g-a{animation:x-c19g-a 5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c19g-a{0%,24%{transform:translateX(0)}38%,84%{transform:translateX(-100%)}96%,100%{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){[class*="x-c19g-"]{animation:none!important}}
@keyframes x-c20f-w{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}.x-c20f-w0{animation:x-c20f-w 1s ease-in-out 0.0s infinite}.x-c20f-w1{animation:x-c20f-w 1s ease-in-out 0.15s infinite}.x-c20f-w2{animation:x-c20f-w 1s ease-in-out 0.3s infinite}.x-c20f-sq{animation:x-c20f-sq 1.6s linear infinite}@keyframes x-c20f-sq{to{transform:rotate(360deg)}}.x-c20f-q{animation:x-c20f-q 1.2s ease-in-out infinite}@keyframes x-c20f-q{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}.x-c20f-tt{animation:x-c20f-tt 2s ease-in-out infinite}@keyframes x-c20f-tt{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@media (prefers-reduced-motion:reduce){[class*="x-c20f-"]{animation:none!important}}
.x-c20g-f{animation:x-c20g-f 5s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c20g-f{0%,22%{transform:translateX(calc(100% - 18px))}36%,78%{transform:translateX(0)}92%,100%{transform:translateX(calc(100% - 18px))}}.x-c20g-n{animation:x-c20g-n 5s linear infinite}@keyframes x-c20g-n{0%,22%{opacity:1}30%,82%{opacity:0}92%,100%{opacity:1}}@keyframes x-c20g-tap{0%,12%{opacity:0;transform:scale(.6)}17%,21%{opacity:1;transform:scale(1)}27%,100%{opacity:0;transform:scale(1.3)}}.x-c20g-tap{animation:x-c20g-tap 5s ease-out infinite}@media (prefers-reduced-motion:reduce){[class*="x-c20g-"]{animation:none!important}}
.x-c21f-sp{animation:x-c21f-sp .8s linear infinite}@keyframes x-c21f-sp{to{transform:rotate(360deg)}}.x-c21f-n{animation:x-c21f-n 6s linear infinite}@keyframes x-c21f-n{0%,30%{opacity:0}38%,94%{opacity:1}100%{opacity:0}}.x-c21f-ft{animation:x-c21f-ft 6s cubic-bezier(.3,0,.1,1) infinite}@keyframes x-c21f-ft{0%,26%{opacity:1;transform:translateY(0)}38%,94%{opacity:0;transform:translateY(60px)}100%{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){[class*="x-c21f-"]{animation:none!important}}
.x-c22f-ok{animation:x-c22f-ok 5s linear infinite}@keyframes x-c22f-ok{0%,62%{opacity:0}66%,94%{opacity:1}100%{opacity:0}}@keyframes x-c22f-tap{0%,9%,22%,31%,44%,53%,100%{opacity:0;transform:scale(.6)}13%,16%,35%,38%,57%,60%{opacity:1;transform:scale(1)}}.x-c22f-tap{animation:x-c22f-tap 5s ease-out infinite}@media (prefers-reduced-motion:reduce){[class*="x-c22f-"]{animation:none!important}}
.x-c22g-ok{animation:x-c22g-ok 5s linear infinite}@keyframes x-c22g-ok{0%,62%{opacity:0}66%,94%{opacity:1}100%{opacity:0}}.x-c22g-sp{animation:x-c22g-sp .8s linear infinite}@keyframes x-c22g-sp{to{transform:rotate(360deg)}}@keyframes x-c22g-tap{0%,9%{opacity:0;transform:scale(.6)}13%,16%{opacity:1;transform:scale(1)}22%,100%{opacity:0;transform:scale(1.3)}}.x-c22g-tap{animation:x-c22g-tap 5s ease-out infinite}.x-c22g-g{animation:x-c22g-g 5s linear infinite}@keyframes x-c22g-g{0%,14%{opacity:0}17%,62%{opacity:1}66%,100%{opacity:0}}@media (prefers-reduced-motion:reduce){[class*="x-c22g-"]{animation:none!important}}
.x-c23f-c{animation:x-c23f-c 6s cubic-bezier(.4,0,.2,1) infinite}@keyframes x-c23f-c{0%,3%{transform:translateX(-12px)}8%{transform:translateX(8px)}14%{transform:translateX(36px)}20%{transform:translateX(64px)}27%,82%{transform:translateX(92px)}94%,100%{transform:translateX(-12px)}}.x-c23f-t0{animation:x-c23f-t0 6s linear infinite}@keyframes x-c23f-t0{0%,5%{opacity:0}6%,10%{opacity:1}11%,100%{opacity:0}}.x-c23f-t1{animation:x-c23f-t1 6s linear infinite}@keyframes x-c23f-t1{0%,11%{opacity:0}12%,16%{opacity:1}17%,100%{opacity:0}}.x-c23f-t2{animation:x-c23f-t2 6s linear infinite}@keyframes x-c23f-t2{0%,17%{opacity:0}18%,22%{opacity:1}23%,100%{opacity:0}}.x-c23f-t3{animation:x-c23f-t3 6s linear infinite}@keyframes x-c23f-t3{0%,24%{opacity:0}25%,83%{opacity:1}84%,100%{opacity:0}}@media (prefers-reduced-motion:reduce){[class*="x-c23f-"]{animation:none!important}}
.x-c23g-c{animation:x-c23g-c 6s cubic-bezier(.4,0,.2,1) infinite}@keyframes x-c23g-c{0%,3%{transform:translateX(-12px)}8%{transform:translateX(8px)}14%{transform:translateX(36px)}20%{transform:translateX(64px)}27%,82%{transform:translateX(92px)}94%,100%{transform:translateX(-12px)}}.x-c23g-t3{animation:x-c23g-t3 6s cubic-bezier(.34,1.56,.64,1) infinite}@keyframes x-c23g-t3{0%,43%{opacity:0;transform:scale(.7)}48%,83%{opacity:1;transform:scale(1)}85%,100%{opacity:0;transform:scale(.7)}}@media (prefers-reduced-motion:reduce){[class*="x-c23g-"]{animation:none!important}}