/* Spoor mix (20 oktober 2026): de samenstelling. De opbouw, het licht en de papieren secties van spoor daglicht, met
   de schermen in code, de zon van tekens en het levende woordmerk van spoor technisch. Sinds 27 oktober 2026 ligt de hele
   pagina op het levende veld van de site (veld.js en het blok "Het veld" hieronder): een wit dat een tint dieper is dan
   op de site, met het raster van inkten puntjes en de blauwe vormen die er traag achter bewegen. De lichte secties zijn
   doorzichtig, en sinds 20:48 zijn er geen donkere blokken meer (besluit 14 van de brief): ook het aanbod, het venster
   van het akkoord, de podia van de agent en de motorkap liggen licht op het veld. Twee foto's: de heuvels bij de koppelingen en de drie landschappen in
   de aanbodkaarten. Al het andere licht komt uit code (het veld, raamlicht, korrel, de zon van tekens).
   Koppen in General Sans (Fontshare, keuze van Huub op 21 oktober 2026), gewicht 500 en strak gespatieerd, nergens cursief; alle tekst in Hanken Grotesk; het woordmerk DAILIGHT ongewijzigd, met
   de A en de I uit tekens. Papier (#fbfcfe) en wit voor kaarten en vensters, die op het veld zweven; inkt alleen als
   accent (de tekst, de knoppen, de kaart van leads); de blauwtrap voor knoppen, kaders en het appje; goud alleen van de
   zon en het licht; groen alleen voor live. */

:root {
  --inkt: #0b1220;
  --inkt-zacht: #1b2436;
  --inkt-2: #111a2e;
  --inkt-3: #16213a;
  --leisteen: #475569;
  --mist: #64748b;
  --papier: #fbfcfe;
  --papier-warm: #f7f4ee;
  --papier-licht: #fcfbf8;
  --wit: #ffffff;
  --nevel: #e6ebf0;
  --nevel-diep: #a9b8c8;
  --goud: #f59e0b;
  --goud-zacht: #fbbf24;
  --zonlicht: #ffe7b8;
  --blauw: #2563eb;
  --blauw-helder: #3b82f6;
  --hemel: #60a5fa;
  --hemel-licht: #bfdbfe;
  --blauw-diep: #1d4ed8;
  --tint: #e8f1ff;
  --groen: #10b981;
  --groen-licht: #34d399;
  --lijn: rgba(11, 18, 32, 0.1);
  --lijn-fijn: rgba(11, 18, 32, 0.07);
  --lijn-nacht: rgba(255, 255, 255, 0.1);
  --lijn-nacht-fijn: rgba(255, 255, 255, 0.07);
  --glas: rgba(255, 254, 250, 0.66);
  --glas-rand: rgba(255, 255, 255, 0.62);
  --glas-schaduw: 0 40px 90px -40px rgba(30, 22, 10, 0.45), 0 2px 10px -4px rgba(30, 22, 10, 0.12);
  --kaart-schaduw: 0 36px 80px -48px rgba(30, 22, 10, 0.42), 0 2px 8px -4px rgba(30, 22, 10, 0.1);
  --kaart-schaduw-nacht: 0 50px 110px -50px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --kaart-rond: clamp(16px, 1.6vw, 22px);
  --kop: "General Sans", "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --tekst: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --rond: clamp(18px, 1.8vw, 28px);
  --rand: clamp(20px, 4vw, 64px);
  --breed: 1240px;
  --balk-h: 84px;
}
@media (max-width: 819px) { :root { --balk-h: 72px; --rand: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.js { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--inkt); font-family: var(--tekst); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
b, strong { font-weight: 500; }
/* Nergens cursief (Huub, 20 oktober: "die schuingedrukte woorden schreeuwen Claude Code"). */
em, i, cite, var, dfn, address { font-style: normal; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(37, 99, 235, 0.2); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.overslaan:focus { position: fixed !important; left: 16px; top: 16px; width: auto; height: auto; clip: auto; z-index: 200; background: var(--blauw); color: #fff; padding: 10px 16px; border-radius: 999px; }

/* Labels zoals op de site (globals.css): Hanken 500, kleine tracking, cijfers op gelijke breedte. */
.label, .label-sm, .label-xs { font-family: var(--tekst); font-weight: 500; line-height: 1.25; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.label { font-size: 14.5px; color: var(--blauw); display: inline-flex; align-items: center; gap: 10px; }
.label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12); }
.label-sm { font-size: 13.5px; }
.label-xs { font-size: 12.5px; }
.bron { display: inline-flex; align-items: baseline; gap: 7px; color: var(--mist); font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; }
.bron::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; transform: translateY(-1px); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--groen); letter-spacing: 0.01em; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }

/* Koppen: General Sans, gewicht 500, strak gespatieerd (keuze van Huub, 21 oktober 2026). Zinsvorm, geen kapitalen. */
.kop { font-family: var(--kop); font-weight: 500; font-size: clamp(32px, 3.95vw, 57px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; }
.kop-klein { font-family: var(--kop); font-weight: 500; font-size: clamp(28px, 2.4vw, 38px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.intro { font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.55; color: var(--leisteen); max-width: 34em; text-wrap: pretty; }
.sectie-in { max-width: var(--breed); margin: 0 auto; padding: 0 var(--rand); }
.sectie-kop { display: grid; gap: 18px; max-width: 760px; }
.sectie-kop.midden { margin: 0 auto; text-align: center; justify-items: center; }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 15px 26px; border-radius: 999px; background: var(--blauw); color: #fff;
  font-weight: 500; font-size: 15.5px; line-height: 1; white-space: nowrap; box-shadow: 0 14px 30px -14px rgba(37, 99, 235, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: background 0.25s ease, transform 0.25s ease;
}
.knop:hover { background: var(--blauw-diep); }
.knop:active { transform: translateY(1px); }
.knop-rand { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(37, 99, 235, 0.45); color: var(--blauw); font-weight: 500; font-size: 14.5px; line-height: 1; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.knop-rand:hover { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.pijl { display: inline-block; width: 0; height: 10px; overflow: hidden; transition: width 0.25s ease, margin 0.25s ease; position: relative; }
.pijl::before { content: ""; position: absolute; left: 1px; top: 1.5px; width: 6px; height: 6px; border-top: 1.7px solid currentColor; border-right: 1.7px solid currentColor; transform: rotate(45deg); }
.knop:hover .pijl, .knop:focus-visible .pijl, .knop-rand:hover .pijl { width: 10px; margin-left: 10px; }
.prijsregel { font-size: 14px; color: var(--leisteen); }

/* Glas: het product ligt scherp op de foto. */
.glas {
  background: var(--glas); -webkit-backdrop-filter: blur(22px) saturate(1.35); backdrop-filter: blur(22px) saturate(1.35);
  border: 1px solid var(--glas-rand); box-shadow: var(--glas-schaduw), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.glas-donker {
  background: rgba(12, 18, 32, 0.5); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); color: #fff;
}

.korrel {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Onthullen bij scrollen: kort (de schermafbeeldingen wachten 300 ms), en zonder JavaScript gewoon zichtbaar. */
.js [data-onthul] { opacity: 0; transform: translateY(18px); transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js [data-onthul].zichtbaar { opacity: 1; transform: none; }

main { position: relative; }
/* ============ Het veld: de achtergrond van de site onder de hele pagina (27 oktober 2026) ============
   Vast achter alles (z-index -1, zoals LivingFieldBackground op de site). Onderop het stille veld: het doek van veld.js
   zelf op klok 4 s in het thema ochtend, het eindbeeld zonder JavaScript of WebGL. Daarop de css-vormen van de site (de
   terugval van Hero.tsx: zes wazige cirkels die traag drijven), alleen als WebGL er niet is. Dan het levende doek, dat
   zacht over het stille veld komt zodra het zijn eerste beeld getekend heeft (html.veld-gl). Bovenop het raster van de
   hero van de site (inkt op 11 procent, 1 px op 30 px) over de hele pagina, en rechtsboven dezelfde puntjes in blauw,
   gemaskerd tot een wolk; die hoort bij de opening en dooft uit als je verder leest (veld.js). Het raster ligt vast,
   net als het veld: de pagina schuift eroverheen. */
.op-veld { background: #eef3fa; }
.veld { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: -1; overflow: hidden; pointer-events: none; background: #eef3fa; }
.veld-stil, .veld-stil img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.veld-stil img { object-fit: cover; }
.veld-doek { position: absolute; inset: 0; }
.veld-doek canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 0.35s ease; }
.veld-gl .veld-doek canvas { opacity: 1; }
.veld-raster { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(11, 18, 32, 0.11) 1px, transparent 1.4px); background-size: 30px 30px; }
.veld-wolk { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(37, 99, 235, 0.3) 1.6px, transparent 2.1px); background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(46% 36% at 74% 30%, #000 0%, transparent 74%); mask-image: radial-gradient(46% 36% at 74% 30%, #000 0%, transparent 74%); }
/* De terugval zonder WebGL: de blauwe mist van de hero van de site (Hero.tsx), in de kleuren van het diepere wit. */
.veld-vormen { position: absolute; inset: 0; display: none; opacity: 0.62; }
.veld-geen-gl .veld-vormen { display: block; }
.veld-vormen i { position: absolute; width: 42vw; height: 42vw; max-width: 520px; max-height: 520px; border-radius: 50%; filter: blur(70px); will-change: transform; }
.veld-vormen i:nth-child(1) { left: -6%; top: -5%; background: radial-gradient(circle, rgba(147, 183, 247, 0.62), rgba(147, 183, 247, 0) 68%); animation: veld-flow-1 16s ease-in-out infinite; }
.veld-vormen i:nth-child(2) { right: -6%; top: 1%; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(168, 208, 252, 0.58), rgba(168, 208, 252, 0) 68%); animation: veld-flow-2 20s ease-in-out infinite; }
.veld-vormen i:nth-child(3) { left: -4%; bottom: -6%; width: 44vw; height: 44vw; max-width: 540px; max-height: 540px; background: radial-gradient(circle, rgba(158, 180, 246, 0.34), rgba(158, 180, 246, 0) 68%); animation: veld-flow-3 14s ease-in-out infinite; }
.veld-vormen i:nth-child(4) { right: -4%; bottom: -3%; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(176, 198, 250, 0.32), rgba(176, 198, 250, 0) 68%); animation: veld-flow-4 22s ease-in-out infinite; }
.veld-vormen i:nth-child(5) { left: 28%; top: 28%; width: 38vw; height: 38vw; max-width: 460px; max-height: 460px; filter: blur(74px); background: radial-gradient(circle, rgba(160, 194, 250, 0.42), rgba(160, 194, 250, 0) 66%); animation: veld-drift-a 22s ease-in-out infinite; }
.veld-vormen i:nth-child(6) { right: 26%; bottom: 22%; width: 34vw; height: 34vw; max-width: 420px; max-height: 420px; background: radial-gradient(circle, rgba(186, 216, 253, 0.44), rgba(186, 216, 253, 0) 66%); animation: veld-drift-c 26s ease-in-out infinite; }
@keyframes veld-flow-1 { 0%, 100% { transform: translate3d(-22%, -16%, 0) scale(1.05); } 50% { transform: translate3d(24%, 18%, 0) scale(1.45) rotate(12deg); } }
@keyframes veld-flow-2 { 0%, 100% { transform: translate3d(24%, 16%, 0) scale(1.28); } 50% { transform: translate3d(-24%, -20%, 0) scale(0.88) rotate(-14deg); } }
@keyframes veld-flow-3 { 0%, 100% { transform: translate3d(16%, -20%, 0) scale(1); } 50% { transform: translate3d(-20%, 22%, 0) scale(1.4) rotate(9deg); } }
@keyframes veld-flow-4 { 0%, 100% { transform: translate3d(-12%, 20%, 0) scale(1.1); } 50% { transform: translate3d(20%, -14%, 0) scale(1.38) rotate(-9deg); } }
@keyframes veld-drift-a { 0%, 100% { transform: translate3d(-52%, -14%, 0) scale(1.1); } 50% { transform: translate3d(54%, 24%, 0) scale(1.34) rotate(8deg); } }
@keyframes veld-drift-c { 0%, 100% { transform: translate3d(-20%, 46%, 0) scale(1); } 50% { transform: translate3d(44%, -42%, 0) scale(1.36) rotate(7deg); } }
/* ============ 0. De balk: de pill van de site, op glas over het veld ============ */
.balk { position: fixed; top: 16px; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.pill {
  pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgba(255, 253, 248, 0.58); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 14px 40px -18px rgba(30, 22, 10, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: var(--inkt); transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}
.pill-merk { position: relative; display: inline-flex; align-items: center; padding: 6px 0; width: 74px; height: 31px; color: var(--inkt); transition: color 0.5s ease; }
.pill-merk .merk-levend, .pill-merk .merk-stil { position: absolute; left: 0; top: 6px; }
.merk-levend { display: none; }
.js .merk-levend.merk-klaar { display: block; }
.js .merk-levend.merk-klaar ~ .merk-stil { display: none !important; }
.merk-stil-wit { display: none; }
.pill-klok { margin: 0 14px 0 16px; padding-left: 16px; border-left: 1px solid var(--lijn); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; color: var(--mist); white-space: nowrap; transition: color 0.5s ease, border-color 0.5s ease; }
.pill-klok time { color: var(--inkt); transition: color 0.5s ease; }
.pill-links { display: flex; align-items: center; }
.pill-link { display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--leisteen); transition: color 0.2s ease, background 0.2s ease; }
.pill-link:hover { color: var(--blauw); }
.pill-link[aria-current="true"] { color: var(--blauw); }
.knop-pill { padding: 12px 20px; font-size: 14px; margin-left: 8px; box-shadow: none; }
.pill-menu { display: none; width: 40px; height: 40px; border-radius: 999px; place-items: center; color: inherit; }
.pill-menu .m-dicht { display: none; }
.pill-menu[aria-expanded="true"] .m-open { display: none; }
.pill-menu[aria-expanded="true"] .m-dicht { display: inline; }
/* Op een donker beeld: donker glas, wit woordmerk. */
.balk-donker .pill { background: rgba(12, 18, 32, 0.42); border-color: rgba(255, 255, 255, 0.14); color: #fff; box-shadow: 0 14px 40px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.balk-donker .pill-merk { color: #fff; }
.balk-donker .merk-stil-inkt { display: none; }
.balk-donker .merk-stil-wit { display: block; }
.balk-donker .pill-klok { color: rgba(255, 255, 255, 0.58); border-color: rgba(255, 255, 255, 0.16); }
.balk-donker .pill-klok time { color: #fff; }
.balk-donker .pill-link { color: rgba(255, 255, 255, 0.8); }
.balk-donker .pill-link:hover, .balk-donker .pill-link[aria-current="true"] { color: #bfdbfe; }
.op-voet .balk { opacity: 0; transform: translateY(-12px); }
.op-voet .pill { pointer-events: none; }

.menu { position: fixed; top: 82px; left: 12px; right: 12px; z-index: 59; display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 24px; background: rgba(255, 253, 248, 0.96); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid var(--lijn); box-shadow: 0 24px 60px -28px rgba(30, 22, 10, 0.45); color: var(--inkt); }
.menu[hidden] { display: none; }
.menu > a:not(.knop) { padding: 13px 14px; border-radius: 14px; font-size: 16px; font-weight: 500; }
.menu > a:not(.knop):hover { background: var(--tint); color: var(--blauw); }
.menu > .knop { margin-top: 8px; padding: 16px 20px; }

@media (max-width: 1180px) { .pill-link { padding: 8px 10px; } }
@media (max-width: 1023px) { .pill-links { display: none; } .pill-menu { display: grid; } }
@media (max-width: 819px) {
  .balk { top: 12px; padding: 0 12px; }
  .pill { width: 100%; justify-content: space-between; padding: 6px 6px 6px 16px; }
  .pill-klok { margin: 0 auto 0 12px; padding-left: 12px; font-size: 12.5px; }
  .menu { top: 72px; }
}
@media (max-width: 639px) { .knop-pill { display: none; } }
@media (max-width: 389px) { .klok-plek { display: none; } }
/* ============ 1. De opening: in opening.css (het levende veld met de inhoud van ontwerp 9, 27 oktober 2026) ============ */
/* Gedeeld met het akkoord (8) en de agent (5), uit het oude deel 1: de maat van de knop Akkoord, de twee teksten van
   een knop (concept en verstuurd) en de letters die zich uit tekens schrijven (pagina.js, schrijf). */
.knop-akkoord { padding: 11px 20px; font-size: 14.5px; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.als-concept { display: none; }
.js .als-concept { display: inline; }
.js .als-weg { display: none; }
.l { position: relative; }
.l.weg { color: transparent !important; }
.l.teken { color: transparent !important; }
.l.teken::after { content: attr(data-t); position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: #bfdbfe; }
@media (max-width: 819px) { .knop-akkoord { padding: 10px 16px; font-size: 14px; } }
/* ============ Gedeeld: het papieren blad, de kop-rij en de beelden die afspelen bij scrollen ============ */
.blad { position: relative; z-index: 2; background: var(--papier); }
.kop-rij { display: grid; grid-template-columns: 1.15fr 1fr; align-items: end; gap: 28px 64px; margin-bottom: clamp(40px, 4.4vw, 60px); }
.kop-rij .intro { padding-bottom: 8px; }

.status { font-size: 11.5px; }

/* Afspelen bij scrollen: data-stap (gezet door pagina.js) loopt van 0 tot het aantal stappen. Zonder JavaScript: de eindstand. */
.js [data-scrol] [data-vanaf] { transition: opacity 0.35s ease, transform 0.35s ease; }
.js [data-scrol]:not([data-stap]) [data-vanaf], .js [data-scrol][data-stap="0"] [data-vanaf="1"], .js [data-scrol][data-stap="0"] [data-vanaf="2"], .js [data-scrol][data-stap="0"] [data-vanaf="3"],
.js [data-scrol][data-stap="1"] [data-vanaf="2"], .js [data-scrol][data-stap="1"] [data-vanaf="3"], .js [data-scrol][data-stap="2"] [data-vanaf="3"] { opacity: 0; transform: translateY(5px); }
.js [data-scrol]:not([data-stap]) [data-vanaf="0"] { opacity: 1; transform: none; }
.js [data-scrol][data-stap="3"] [data-vanaf="3"], .js [data-scrol][data-stap="4"] [data-vanaf] { opacity: 1; transform: none; }

@media (max-width: 1023px) { .kop-rij { grid-template-columns: 1fr; gap: 20px; } }

/* ============ 2. Het aanbod: drie kaarten, precies uit spoor technisch, als donker blok op de lichte pagina ============ */
/* Het inkt schuift met een ronde rand over de foto van de opening; het papier van de trechter schuift er weer
   met een ronde rand overheen. Zo loopt de overgang via het nachtblauw, zonder band ertussen. */
.aanbod {
  position: relative; z-index: 2; background: var(--inkt); color: #fff; border-radius: 34px 34px 0 0; margin-top: -34px;
  padding: clamp(72px, 6.2vw, 88px) 0 calc(clamp(60px, 5.6vw, 80px) + 34px); box-shadow: 0 -28px 60px -30px rgba(0, 0, 0, 0.55);
}
/* Dezelfde maat als in technisch (de kaarten 388 px breed op 1440), zodat de mini-werkplekken niet afkappen. */
.aanbod .sectie-in { --aanbod-rand: min(var(--rand), 40px); max-width: calc(1200px + 2 * var(--aanbod-rand)); padding: 0 var(--aanbod-rand); }
.aanbod .label { color: var(--hemel); }
.aanbod .label::before { box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16); }
.aanbod .intro { color: rgba(255, 255, 255, 0.7); justify-self: end; max-width: 29em; }
.aanbod .bron { color: rgba(255, 255, 255, 0.52); }
.aanbod-rij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.aanbod-kaart { position: relative; background: var(--inkt-2); border: 1px solid var(--lijn-nacht); border-radius: var(--kaart-rond); padding: 10px; display: flex; flex-direction: column; box-shadow: var(--kaart-schaduw-nacht); min-width: 0; }
.kaart-beeld { position: relative; aspect-ratio: 16 / 9.4; border-radius: 13px; overflow: hidden; isolation: isolate; }
.veld-vlak { position: absolute; inset: 0; --h: 62%; }
.veld-vlak::after { content: ""; position: absolute; left: 0; right: 0; top: var(--h); bottom: 0; z-index: 0; }
.vlak-banen { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.vlak-banen line { vector-effect: non-scaling-stroke; }
.zon-vlak { position: absolute; left: 0; right: 0; top: 0; height: var(--h); z-index: 1; pointer-events: none; }
.zon-vlak canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Drie momenten van één dag, zodat de rij leest als één dag: links de dageraad (donker, de zon laag links, alleen de
   gouden rand), in het midden de dag (een kleine hoge zon in een lichte lucht, geen vloerlijnen), rechts het blauwe
   uur (de zon onder de horizon rechts, alleen de gloed en een paar tekens als sterren). */
.vlak-dageraad { background: radial-gradient(38% 30% at 16% 62%, rgba(253, 214, 150, 0.46), rgba(253, 214, 150, 0.08) 52%, rgba(253, 214, 150, 0) 74%), linear-gradient(180deg, #050b1d 0%, #0d1a40 50%, #1e3678 62%); }
.vlak-dageraad::after { background: linear-gradient(180deg, #121f47 0%, #0a1330 100%); box-shadow: 0 -1px 0 rgba(253, 214, 150, 0.5); }
.vlak-dageraad .banen line, .vlak-dageraad .banen rect { stroke: rgba(147, 197, 253, 0.26); }
.vlak-dag { background: radial-gradient(20% 30% at 50% 19%, rgba(251, 191, 36, 0.18), rgba(251, 191, 36, 0) 70%), linear-gradient(180deg, #c7dbfb 0%, #e3edff 42%, #f7faff 62%); }
.vlak-dag::after { background: linear-gradient(180deg, #e8eef9 0%, #dbe5f5 100%); box-shadow: 0 -1px 0 rgba(37, 99, 235, 0.28); }
.vlak-dag .vlak-banen { display: none; }
.vlak-blauw { background: radial-gradient(36% 24% at 80% 62%, rgba(191, 219, 254, 0.5), rgba(147, 197, 253, 0.1) 56%, rgba(147, 197, 253, 0) 78%), linear-gradient(180deg, #081536 0%, #142d70 48%, #2c5cc4 62%); }
.vlak-blauw::after { background: linear-gradient(180deg, #17357f 0%, #0c1c4a 100%); box-shadow: 0 -1px 0 rgba(191, 219, 254, 0.55); }
.vlak-blauw .vlak-banen { display: none; }
.banen rect { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; }

/* De mini-werkplekken: lichte vensters in de huisstijl, half over het veld. */
.mini { position: absolute; z-index: 2; background: rgba(255, 255, 255, 0.97); color: var(--inkt); border-radius: 11px; box-shadow: 0 26px 50px -26px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.18); font-size: 11.5px; line-height: 1.3; }
.mini-kop { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; font-size: 11.5px; padding-bottom: 7px; border-bottom: 1px solid var(--lijn-fijn); margin-bottom: 3px; white-space: nowrap; }
.mini-chip { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 999px; background: #f1f5f9; color: var(--mist); white-space: nowrap; }
.mini-chip-blauw { background: var(--tint); color: var(--blauw); }
.mini-lijst li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--lijn-fijn); white-space: nowrap; }
.mini-lijst li:last-child { border-bottom: 0; }
.mini-lijst li > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mini-lijst time { color: var(--mist); font-variant-numeric: tabular-nums; flex: none; }
.mini-live, .mini-ok, .mini-wacht { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.mini-live { color: var(--groen); }
.mini-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--groen); }
.mini-ok { color: var(--blauw); }
.mini-wacht { color: var(--blauw); padding: 1px 6px; border-radius: 5px; box-shadow: inset 0 0 0 1.2px var(--hemel); }
.mi { flex: none; width: 17px; height: 17px; border-radius: 5px; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; }
.mi-wa { background: #25d366; } .mi-wa::before { content: "W"; }
.mi-mail { background: var(--blauw-helder); } .mi-mail::before { content: "@"; }
.mi-euro { background: var(--inkt); } .mi-euro::before { content: "€"; }
.mi-rooster { background: var(--hemel); } .mi-rooster::before { content: "R"; }
.mini-voet { margin-top: 5px; font-size: 10px; color: var(--mist); }
/* De vensters staan waar de zon niet staat: de agents rechts (dageraad links), de app onderaan (de zon hoog). */
.mini-agents { right: 5%; top: 8%; width: 61%; padding: 8px 10px 7px; }
.mini-nieuw .als-live { display: none; }
.mini-nieuw.live .als-bouw { display: none; }
.mini-nieuw.live .als-live { display: inline; }
.mini-nieuw:not(.live) .mini-live { color: var(--blauw); }
.mini-nieuw:not(.live) .mini-live::before { background: var(--hemel); }
.mini-app { left: 5%; bottom: 7%; width: 61%; padding: 7px 9px 5px; }
.mini-url { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 7px; background: #f1f5f9; font-size: 11px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; }
.slot { flex: none; width: 8px; height: 7px; border-radius: 1.5px; background: var(--mist); position: relative; margin-top: 3px; }
.slot::before { content: ""; position: absolute; left: 1.5px; top: -4px; width: 5px; height: 5px; border: 1.3px solid var(--mist); border-bottom: 0; border-radius: 3px 3px 0 0; box-sizing: border-box; }
.url-tekst { min-width: 0; overflow: hidden; }
.mini-url .mini-chip { margin-left: auto; }
.widget { position: absolute; z-index: 3; right: 5%; bottom: 7%; width: 30%; aspect-ratio: 1.22; border-radius: 16px; background: var(--inkt); color: #fff; padding: 9px 10px; display: flex; flex-direction: column; box-shadow: 0 24px 40px -18px rgba(11, 18, 32, 0.7); }
.widget-kop { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: rgba(255, 255, 255, 0.7); }
.widget-merk { width: 15px; height: 15px; border-radius: 4px; background: var(--blauw); display: grid; place-items: center; font-size: 9.5px; font-weight: 700; color: #fff; }
.widget-tekst { margin-top: auto; font-weight: 600; font-size: clamp(14px, 1.2vw, 17px); line-height: 1.1; letter-spacing: -0.01em; }
.widget-tik { margin-top: 4px; font-size: 9.5px; color: var(--hemel-licht); }
.widget .als-vraag { display: none; }
.widget.vraag .als-vraag { display: inline; }
.widget.vraag .als-klaar { display: none; }
.mini-bord { left: 5%; top: 8%; width: 61%; height: 82%; padding: 7px 9px; display: flex; flex-direction: column; }
.bord { position: relative; flex: 1; margin: 4px 2px 12px 16px; border-left: 1.3px solid rgba(11, 18, 32, 0.25); border-bottom: 1.3px solid rgba(11, 18, 32, 0.25); }
.as { position: absolute; font-size: 9px; font-weight: 500; color: var(--mist); white-space: nowrap; }
.as-y { transform: rotate(-90deg); transform-origin: 0 0; left: -13px; bottom: -2px; }
.as-x { right: 0; bottom: -14px; }
.briefje { position: absolute; left: var(--x); top: var(--y); padding: 3px 6px; border-radius: 4px; background: var(--tint); color: var(--blauw-diep); font-size: 9.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 2px 4px -2px rgba(11, 18, 32, 0.3); transition: left 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), top 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s ease; }
/* Het gekozen briefje: een blauwe ring, met het label erboven. */
.briefje[data-start] { box-shadow: 0 0 0 2px #fff, 0 0 0 3.6px var(--blauw), 0 6px 14px -6px rgba(37, 99, 235, 0.7); }
.briefje[data-start]::after { content: "startblok"; position: absolute; right: -4px; bottom: calc(100% + 6px); padding: 1px 6px; border-radius: 5px; background: var(--blauw); color: #fff; font-size: 8.5px; font-weight: 600; transition: opacity 0.35s ease, transform 0.35s ease; }

.kaart-lijf { padding: 18px 12px 8px; display: flex; flex-direction: column; flex: 1; }
.kaart-soort { color: var(--hemel); }
/* De kop van de kaart in de kopletter van de pagina (in technisch Bricolage 700), zonder cursief. */
.kaart-kop { margin-top: 8px; font-family: var(--kop); font-weight: 500; font-size: clamp(23px, 1.63vw, 23.5px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.kaart-tekst { margin-top: 10px; font-size: 15px; line-height: 1.48; color: rgba(255, 255, 255, 0.68); }
.kaart-houd { margin-top: 12px; font-size: 14px; line-height: 1.42; color: rgba(255, 255, 255, 0.86); padding-top: 11px; border-top: 1px solid var(--lijn-nacht-fijn); }
.kaart-houd b { color: #fff; }
.kaart-prijs { margin-top: auto; padding-top: 12px; font-size: 14px; font-weight: 500; color: #fff; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.kaart-prijs .bron { font-size: 12.5px; font-weight: 500; }
.aanbod-kaart .knop-rand { margin-top: 12px; align-self: flex-start; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.aanbod-kaart .knop-rand:hover { background: #fff; border-color: #fff; color: var(--inkt); }

/* De mini-werkplekken spelen één keer: met JavaScript beginnen ze in hun beginstand. */
.js .aanbod-kaart.wacht .mini-nieuw { opacity: 0; transform: translateY(-4px); }
.js .aanbod-kaart .mini-nieuw { transition: opacity 0.5s ease, transform 0.5s ease; }
.js .aanbod-kaart.wacht .url-tekst { color: transparent; }
.js .aanbod-kaart.wacht .mini-url .mini-chip { opacity: 0; transform: scale(0.8); }
.js .aanbod-kaart .mini-url .mini-chip { transition: opacity 0.35s ease, transform 0.35s ease; }
.js .aanbod-kaart.wacht .briefje { left: var(--sx); top: var(--sy); transform: rotate(-4deg); }
.js .aanbod-kaart:not(.rond) .briefje[data-start] { box-shadow: 0 2px 4px -2px rgba(11, 18, 32, 0.3); }
.js .aanbod-kaart:not(.rond) .briefje[data-start]::after { opacity: 0; transform: translateY(4px); }
.js .aanbod-kaart.typt .url-tekst { color: inherit; }

@media (max-width: 1100px) and (min-width: 820px) {
  .mini { font-size: 10.5px; }
  .mini-kop { font-size: 10.5px; padding-bottom: 5px; }
  .mini-lijst li { padding: 3px 0; gap: 6px; }
  .mini-agents { top: 6%; width: 68%; }
  .mini-app { bottom: 6%; width: 60%; }
  .mini-chip { font-size: 9px; padding: 1px 6px; }
  .mini-voet { margin-top: 3px; }
  .mini-app .mini-lijst li:first-child { display: none; }
  .widget-tik { display: none; }
  .mini-staart { display: none; }
}
/* Smaller dan 1100 px past de chip niet naast het adres: het adres wint (de kaart zegt het al: code op jouw naam).
   Het bord wordt breder en de briefjes kleiner, zodat ze niet over elkaar vallen. */
@media (max-width: 1100px) {
  .mini-url .mini-chip { display: none; }
  .mini-bord { width: 74%; }
  .briefje { font-size: 8.5px; padding: 2px 5px; }
}
@media (max-width: 1023px) { .aanbod .intro { justify-self: start; } }
/* Het aanbod op de telefoon: een rij om door te vegen, de kaart in het midden speelt. */
@media (max-width: 819px) {
  .aanbod { border-radius: 26px 26px 0 0; margin-top: -26px; padding: 64px 0 calc(56px + 26px); }
  .aanbod-rij { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .aanbod-rij::-webkit-scrollbar { display: none; }
  .aanbod-kaart { flex: 0 0 86%; scroll-snap-align: center; }
  .kaart-kop { font-size: clamp(21px, 5.6vw, 23px); }
  .kaart-tekst { font-size: 14.5px; }
  .mini { font-size: 11px; }
}
@media (min-width: 600px) and (max-width: 819px) { .aanbod-kaart { flex-basis: 56%; } }
@media (max-width: 599px) {
  /* Aanbodkaart 2 op de telefoon: de offerte en de widget vertellen samen het verhaal, zonder overlap. */
  .mini-app .mini-lijst li:first-child { display: none; }
  .widget { padding: 7px 8px; right: 4%; width: 29%; }
  /* Het venster van de agents staat rechts van de dageraad: compacter, zodat de kop en de onderste regel binnen het beeld vallen. */
  .mini-kop { font-size: 10.5px; padding-bottom: 5px; }
  .mini-lijst li { padding: 3px 0; gap: 6px; }
  .mini-agents { top: 6%; right: 4%; width: 66%; padding: 7px 9px 6px; }
  .mini-chip { font-size: 9px; padding: 1px 6px; }
  .mini-voet { margin-top: 3px; }
  .widget-tekst { font-size: 13px; }
  .widget-tik { display: none; }
}
/* Aanbodkaart 1 onder 480 px: korte regels in de mini-werkplek, zodat niets wordt afgekapt. */
@media (max-width: 479px) { .mini-staart { display: none; } }
/* ============ 3. De trechter ============ */
/* Het papier schuift met een ronde rand over het inkt van het aanbod. */
.trechter { z-index: 3; border-radius: 34px 34px 0 0; margin-top: -34px; padding: clamp(66px, 5.4vw, 78px) 0 clamp(56px, 4.6vw, 66px); box-shadow: 0 -26px 50px -30px rgba(0, 0, 0, 0.5); }
/* 28 oktober 2026: de trechterkop in de breedte van elke sectiekop (760 px) */
.schema { position: relative; max-width: 1120px; margin: clamp(34px, 3.2vw, 46px) auto 0; display: grid; gap: clamp(40px, 4.2vw, 58px); }
.schema-lijnen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.schema-lijnen path { fill: none; stroke: url(#licht-lijn); stroke-width: 1.6; stroke-linecap: round; }
.schema-lijnen path.gloed { stroke-width: 7; opacity: 0.16; filter: none; }
.schema-lijnen circle { fill: #fff7e6; stroke: #f59e0b; stroke-width: 1.5; }
.laag { position: relative; z-index: 1; display: flex; justify-content: center; }
.knoop { position: relative; }
.knoop-bedrijf { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; background: var(--inkt); color: #fff; font-weight: 500; font-size: 15.5px; box-shadow: 0 16px 34px -18px rgba(11, 18, 32, 0.7); }
.laag-afdelingen { gap: 12px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; background: var(--wit); border: 1px solid rgba(11, 18, 32, 0.08); box-shadow: 0 10px 24px -16px rgba(30, 22, 10, 0.4); font-size: 15px; font-weight: 500; color: var(--inkt); white-space: nowrap; }
/* Geen foto in de chip: één teken uit de reeks van de zon, van ijl naar dicht over de rij. */
.chip-teken { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--blauw); font-weight: 600; font-size: 15px; line-height: 1; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14); }
.laag-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.drie-kaart { background: var(--wit); border-radius: 20px; border: 1px solid rgba(11, 18, 32, 0.07); box-shadow: var(--kaart-schaduw); padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.drie-kop { font-family: var(--kop); font-weight: 500; font-size: 26px; line-height: 1.08; letter-spacing: -0.02em; }
.drie-tekst { font-size: 15px; color: var(--leisteen); }
.drie-beeld { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; }
.drie-mensen span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ece5d6; color: #5b4a2c; font-size: 11px; font-weight: 600; margin-right: -12px; box-shadow: 0 0 0 2px var(--wit); }
.drie-mensen span:nth-child(2) { background: #dfe7f1; color: #34506f; }
.drie-mensen span:nth-child(3) { background: #e4ece2; color: #3e5b3a; }
.drie-mensen .ja { width: auto; height: 26px; margin-left: 22px; padding: 0 12px; border-radius: 999px; background: var(--tint); color: var(--blauw); box-shadow: inset 0 0 0 1.5px var(--hemel); }
.drie-stappen span { padding: 4px 9px; border-radius: 8px; background: var(--papier); color: var(--leisteen); border: 1px solid var(--lijn-fijn); }
.drie-stappen i { width: 10px; height: 1.5px; background: var(--nevel-diep); }
.drie-software span { padding: 4px 10px; border-radius: 999px; background: var(--papier); border: 1px solid var(--lijn-fijn); color: var(--inkt); }

.motorkap { width: 100%; border-radius: 26px; background: var(--inkt); color: #fff; padding: 22px 26px 24px; box-shadow: 0 40px 80px -46px rgba(11, 18, 32, 0.8); overflow: hidden; isolation: isolate; }
.motorkap::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.9s ease; background: radial-gradient(60% 120% at 50% -20%, rgba(245, 158, 11, 0.32), rgba(59, 130, 246, 0.16) 45%, rgba(11, 18, 32, 0) 75%); }
.motorkap.aan::before, .geen-js .motorkap::before { opacity: 1; }
.motorkap-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 30px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.motorkap-kop .label-sm { color: var(--hemel); }
.motorkap-titel { font-family: var(--kop); font-weight: 400; font-size: clamp(19.5px, 1.75vw, 24.5px); line-height: 1.1; letter-spacing: -0.015em; }
.motorkap-rij { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 18px; }
.motorkap-rij li { display: grid; gap: 4px; padding: 14px 14px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); transition: background 0.5s ease, box-shadow 0.5s ease; }
.motorkap-rij b { font-weight: 500; font-size: 15.5px; color: #fff; }
.motorkap-rij span { font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.64); }
.motorkap.aan .motorkap-rij li { background: rgba(96, 165, 250, 0.1); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.5); }
.motorkap.aan .motorkap-rij li:nth-child(2) { transition-delay: 0.08s; } .motorkap.aan .motorkap-rij li:nth-child(3) { transition-delay: 0.16s; }
.motorkap.aan .motorkap-rij li:nth-child(4) { transition-delay: 0.24s; } .motorkap.aan .motorkap-rij li:nth-child(5) { transition-delay: 0.32s; }

/* Zonder JavaScript: tussen de lagen een stille lijn, zodat de trechter ook zo leest. */
.geen-js .laag + .laag::before { content: ""; position: absolute; left: 50%; top: calc(clamp(40px, 4.2vw, 58px) * -1); height: clamp(40px, 4.2vw, 58px); width: 1.5px; background: linear-gradient(#f2b44c, #3b82f6); }

/* De knopen komen op als het licht ze bereikt (stap gezet door pagina.js). */
.js .schema .knoop { transition: opacity 0.4s ease, transform 0.4s ease; }
.js .schema:not(.licht-1) .laag-afdelingen .knoop, .js .schema:not(.licht-2) .laag-drie .knoop { opacity: 0.38; transform: translateY(6px); }

@media (max-width: 1023px) {
  .motorkap-rij { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 819px) {
  .trechter { border-radius: 26px 26px 0 0; margin-top: -26px; padding-top: 64px; }
  .schema { gap: 34px; margin-top: 36px; }
  .laag-afdelingen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chip { font-size: 14px; padding: 5px 12px 5px 5px; gap: 8px; }
  .chip-teken { width: 28px; height: 28px; font-size: 14px; }
  .laag-drie { grid-template-columns: 1fr; gap: 10px; }
  .drie-kaart { padding: 16px 16px 16px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: baseline; }
  .drie-kop { font-size: 22px; grid-row: span 2; min-width: 5.2em; }
  .drie-tekst { font-size: 14px; }
  .drie-beeld { margin-top: 8px; grid-column: 2; font-size: 11.5px; }
  .drie-stappen i { width: 6px; }
  .motorkap { padding: 18px 16px 18px; border-radius: 22px; }
  .motorkap-rij { grid-template-columns: 1fr; gap: 6px; margin-top: 12px; }
  .motorkap-rij li { grid-template-columns: 8.4em 1fr; align-items: baseline; padding: 10px 12px; }
  .motorkap-rij b { font-size: 14.5px; }
  .motorkap-rij span { font-size: 13px; }
}
/* ============ 4. Wat we bouwen: de vorm van Capisoft ============ */
/* Vier grote kaarten in een raster van twee kolommen (5 en 7 van 12, daarna 7 en 5), elk met een eigen grond. Bovenin
   de naam, één zin en de knop; onderin een groot visueel in code dat uit de kaart loopt (de kaart knipt het af).
   Daaronder de drie kleine diensten als rij. */
.diensten { padding: clamp(72px, 6.2vw, 88px) 0 clamp(56px, 5vw, 72px); }
.diensten-kop { margin-bottom: clamp(30px, 3vw, 44px); } /* 28 oktober 2026: dezelfde breedte als elke sectiekop (760 px), zodat de kop op twee regels staat zoals de rest */
.dk-raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(12px, 1.15vw, 16px); }
.dk { position: relative; grid-column: span 6; min-height: clamp(404px, 29.6vw, 428px); border-radius: var(--rond); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; transition: transform 0.35s ease; }
.dk-recruitment, .dk-ios { grid-column: span 5; }
.dk-planning, .dk-websites { grid-column: span 7; }
.dk:hover { transform: translateY(-2px); }
.dk-tekst { position: relative; z-index: 3; padding: clamp(26px, 2.4vw, 34px) clamp(24px, 2.4vw, 34px) 0; display: flex; flex-direction: column; align-items: flex-start; max-width: 34em; }
.dk-naam { font-family: var(--kop); font-weight: 500; font-size: clamp(28px, 2.32vw, 34.5px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.dk-zin { margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--leisteen); text-wrap: pretty; max-width: 27em; }
.dk-knop { margin-top: 20px; padding: 12px 20px; font-size: 14.5px; }
.knop-wit { background: #fff; color: var(--blauw); box-shadow: 0 14px 30px -16px rgba(8, 20, 60, 0.55); }
.knop-wit:hover { background: var(--tint); }
/* De knop draagt de naam; het hele blok is klikbaar. */
.dk-knop::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: var(--rond); }
.dk:hover .pijl, .dk-knop:focus-visible .pijl { width: 10px; margin-left: 10px; }
.dk-beeld { position: relative; flex: 1; min-height: 200px; margin-top: 24px; }

/* De vier gronden. */
.dk-recruitment { background: radial-gradient(90% 70% at 72% 112%, rgba(96, 165, 250, 0.42), rgba(96, 165, 250, 0) 70%), linear-gradient(180deg, #ffffff 0%, #ffffff 46%, #f2f7ff 100%); box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(11, 18, 32, 0.06); }
.dk-planning { background: radial-gradient(70% 80% at 0% 100%, rgba(255, 214, 150, 0.62), rgba(255, 214, 150, 0) 62%), radial-gradient(60% 75% at 100% 0%, rgba(191, 219, 254, 0.95), rgba(191, 219, 254, 0) 66%), linear-gradient(160deg, #f6f9ff 0%, #fdf7ee 100%); box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
.dk-websites { background: radial-gradient(70% 60% at 60% 120%, rgba(59, 130, 246, 0.3), rgba(59, 130, 246, 0) 70%), linear-gradient(180deg, #0f1830 0%, var(--inkt) 100%); color: #fff; box-shadow: 0 40px 80px -46px rgba(11, 18, 32, 0.8); }
.dk-websites .dk-zin { color: rgba(255, 255, 255, 0.7); }
.dk-ios { background: radial-gradient(80% 50% at 50% 0%, rgba(191, 219, 254, 0.5), rgba(191, 219, 254, 0) 70%), radial-gradient(70% 60% at 50% 110%, rgba(255, 231, 184, 0.35), rgba(255, 231, 184, 0) 70%), linear-gradient(180deg, #3b82f6 0%, #2563eb 58%, #1d4ed8 100%); color: #fff; box-shadow: 0 40px 80px -46px rgba(29, 78, 216, 0.75); }
.dk-ios .dk-zin { color: rgba(255, 255, 255, 0.86); }
.dk-knop:focus-visible { outline-offset: 4px; }
.dk-ios .dk-knop:focus-visible, .dk-websites .dk-knop:focus-visible { outline-color: #fff; }

/* Kaart 1: de werkplek van het wervingsbureau, met de lijst kandidaten. Loopt rechts en onder uit de kaart. */
.wv { position: absolute; left: clamp(24px, 2.4vw, 34px); top: 0; width: calc(100% - clamp(24px, 2.4vw, 34px) + 28px); min-width: 400px; height: 360px; display: grid; grid-template-columns: 148px 1fr; border-radius: 14px 14px 0 0; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -30px rgba(29, 78, 216, 0.55), 0 0 0 1px rgba(11, 18, 32, 0.08); font-size: 12.5px; line-height: 1.3; color: var(--inkt); }
.wv-zij { background: var(--inkt-2); color: rgba(255, 255, 255, 0.72); padding: 14px 10px; display: flex; flex-direction: column; gap: 3px; }
.wv-merk { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; color: #fff; margin-bottom: 12px; white-space: nowrap; }
.wv-merk i { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--blauw); color: #fff; font-size: 9px; font-weight: 700; }
.wv-nav { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 12px; white-space: nowrap; }
.wv-nav i { flex: none; width: 12px; height: 12px; border-radius: 3.5px; box-shadow: inset 0 0 0 1.4px currentColor; opacity: 0.8; }
.wv-aan { background: rgba(96, 165, 250, 0.16); color: #fff; }
.wv-hoofd { padding: 14px 44px 14px 16px; min-width: 0; }
.wv-titel { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.wv-zoek { font-weight: 400; font-size: 11.5px; color: var(--mist); padding: 5px 12px 5px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--lijn); white-space: nowrap; }
.wv-tabs { display: flex; gap: 16px; margin-top: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lijn-fijn); font-size: 11.5px; color: var(--mist); }
.wv-tab-aan { color: var(--blauw); font-weight: 600; box-shadow: 0 9px 0 -7px var(--blauw); }
.wv-lijst { margin-top: 4px; }
.wv-rij { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--lijn-fijn); white-space: nowrap; }
.wv-foto { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e4ecf8; color: #34506f; font-size: 10px; font-weight: 600; }
.wv-foto-2 { background: #efe7da; color: #6b5432; }
.wv-agenda { flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--tint); position: relative; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.4); }
.wv-agenda::before { content: ""; position: absolute; left: 8px; top: 9px; width: 12px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1.4px var(--blauw); }
.wv-agenda::after { content: ""; position: absolute; left: 8px; top: 12px; width: 12px; height: 1.4px; background: var(--blauw); }
.wv-naam { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.wv-naam small { font-weight: 400; font-size: 11px; color: var(--mist); }
.wv-chip, .wv-wacht, .wv-bezig { flex: none; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; color: var(--blauw); background: var(--tint); white-space: nowrap; }
.wv-wacht { box-shadow: inset 0 0 0 1.2px var(--hemel); background: #fff; }
.wv-bezig { color: var(--mist); background: #f1f5f9; font-weight: 500; }
.wv-staat { flex: none; display: inline-grid; justify-items: end; }
.wv-staat > * { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.js .dk-recruitment:not([data-stap="2"]):not([data-stap="3"]) .wv-klaar, .js .dk-recruitment[data-stap="2"] .wv-bezig, .js .dk-recruitment[data-stap="3"] .wv-bezig, .geen-js .wv-bezig { opacity: 0; }

/* Kaart 2: een object van licht. Een tegel van licht met het rooster van de dag; drie meldingen lopen er langs een
   draad naartoe, het open gat in het rooster vult zich en het rooster is rond. De rails lopen uit de kaart. */
.pl { position: absolute; left: clamp(24px, 2.4vw, 34px); right: clamp(24px, 2.4vw, 34px); top: -6px; bottom: 34px; display: grid; grid-template-columns: auto minmax(30px, 1fr) clamp(170px, 15vw, 206px); grid-template-rows: repeat(3, auto); row-gap: 12px; align-content: center; align-items: center; }
.pl-chip { grid-column: 1; display: inline-flex; align-items: center; gap: 9px; justify-self: start; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px -18px rgba(30, 22, 10, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.9); font-size: 13px; font-weight: 500; white-space: nowrap; }
.pl-chip time { flex: none; padding: 3px 7px; border-radius: 999px; background: rgba(245, 158, 11, 0.13); color: #92560a; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-chip:nth-of-type(2) time { background: var(--tint); color: var(--blauw); }
.pl-chip-rond time { background: var(--blauw); color: #fff; }
.pl-lijn { grid-column: 2; position: relative; height: 2px; margin: 0 -2px 0 8px; border-radius: 2px; background: linear-gradient(90deg, rgba(37, 99, 235, 0.15), rgba(37, 99, 235, 0.42)); }
.pl-lijn i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--goud); box-shadow: 0 0 10px 2px rgba(245, 158, 11, 0.6); opacity: 0; }
.pl-tegel { grid-column: 3; grid-row: 1 / span 3; position: relative; z-index: 2; aspect-ratio: 1; border-radius: 26%; padding: 15% 14% 12%; display: flex; flex-direction: column; color: #fff;
  background: radial-gradient(90% 70% at 22% 10%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 55%), linear-gradient(150deg, #ffd79a 0%, #f8b85e 26%, #8db8fb 66%, #3b82f6 100%);
  box-shadow: 0 34px 70px -24px rgba(37, 99, 235, 0.55), 0 0 80px -10px rgba(251, 191, 36, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -10px 24px -10px rgba(29, 78, 216, 0.45); }
.pl-tegel-kop { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 600; color: rgba(11, 18, 32, 0.86); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); white-space: nowrap; }
.pl-rooster { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6%; }
.pl-rooster i { aspect-ratio: 1.3; border-radius: 22%; background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); transition: background 0.5s ease, box-shadow 0.5s ease; }
.pl-rooster .pl-gat { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1.5px #fff, 0 0 14px 2px rgba(255, 236, 200, 0.95); }
.pl-tegel-voet { margin-top: 10%; display: grid; font-size: 11.5px; font-weight: 600; text-shadow: 0 1px 6px rgba(29, 78, 216, 0.35); }
.pl-tegel-voet > span { grid-area: 1 / 1; transition: opacity 0.4s ease; }
.pl-dicht { opacity: 0; }
/* Eindstand (ook zonder JavaScript): het gat is gevuld, het rooster is rond. */
.geen-js .pl-gat, .js .dk-planning[data-stap="3"] .pl-gat { background: #fff; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
.geen-js .pl-open, .js .dk-planning[data-stap="3"] .pl-open { opacity: 0; }
.geen-js .pl-dicht, .js .dk-planning[data-stap="3"] .pl-dicht { opacity: 1; }
/* Elke melding stuurt één lichtpuntje langs de draad de tegel in. */
.js .dk-planning [data-vanaf] .pl-lijn i, .js .pl-lijn i { transition: none; }
.js .dk-planning[data-stap="1"] .pl-lijn[data-vanaf="0"] i, .js .dk-planning[data-stap="2"] .pl-lijn[data-vanaf="1"] i, .js .dk-planning[data-stap="3"] .pl-lijn[data-vanaf="2"] i { animation: pl-puls 0.9s ease-in forwards; }
@keyframes pl-puls { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }

/* Kaart 3: de site van de klant, met de aanvraag die zich vult. Loopt onder uit de kaart. */
.site { position: absolute; left: clamp(24px, 2.4vw, 34px); right: clamp(24px, 2.4vw, 34px); top: 0; height: 380px; border-radius: 14px 14px 0 0; overflow: hidden; background: #f8fafc; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 -20px 70px -30px rgba(96, 165, 250, 0.45); color: var(--inkt); font-size: 12px; line-height: 1.3; }
.site-balk { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #e9eef5; border-bottom: 1px solid var(--lijn-fijn); }
.site-balk > i { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.site-adres { margin: 0 auto; padding: 3px 14px; border-radius: 7px; background: #fff; color: var(--leisteen); font-size: 11px; }
.site-pagina { position: relative; padding: 14px 20px; height: 100%; background: radial-gradient(70% 90% at 100% 0%, rgba(191, 219, 254, 0.7), rgba(191, 219, 254, 0) 60%), linear-gradient(180deg, #ffffff, #f4f8fd); }
.site-nav { display: flex; align-items: center; gap: 16px; font-size: 11px; color: var(--leisteen); white-space: nowrap; }
.site-nav b { font-weight: 700; font-size: 13px; color: #166534; margin-right: auto; letter-spacing: -0.01em; }
.site-kop { margin-top: 20px; max-width: min(12.5em, 50%); font-size: clamp(18px, 1.7vw, 23px); font-weight: 650; line-height: 1.12; letter-spacing: -0.015em; }
.site-form { margin-top: 16px; width: min(56%, 260px); padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 16px 34px -20px rgba(11, 18, 32, 0.4), inset 0 0 0 1px var(--lijn-fijn); }
.site-form-kop { font-weight: 600; font-size: 12px; margin-bottom: 6px; }
.site-veld { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; margin-top: 5px; border-radius: 7px; box-shadow: inset 0 0 0 1px var(--lijn); font-size: 11px; white-space: nowrap; }
.site-veld span { color: var(--mist); }
.site-veld b { font-weight: 500; }
.site-verstuur { margin-top: 8px; padding: 7px 0; border-radius: 999px; background: #166534; color: #fff; text-align: center; font-weight: 600; font-size: 11px; }
/* Het paneel van Dailight: de aanvraag wordt aangevuld en het antwoord staat klaar. */
.site-paneel { position: absolute; right: 16px; top: 54px; width: min(42%, 236px); padding: 12px 13px; border-radius: 14px; background: rgba(11, 18, 32, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; box-shadow: 0 30px 60px -26px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.sp-kop { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 12px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--lijn-nacht); white-space: nowrap; }
.sp-kop time { margin-left: auto; font-weight: 500; font-size: 11px; color: rgba(255, 255, 255, 0.6); font-variant-numeric: tabular-nums; }
.sp-teken { flex: none; width: 16px; height: 16px; border-radius: 5px; background: radial-gradient(circle at 50% 70%, #fbbf24 0 26%, rgba(251, 191, 36, 0) 30%), var(--blauw); }
.sp-rij { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; color: rgba(255, 255, 255, 0.86); white-space: nowrap; }
.sp-vink { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--blauw-helder); position: relative; }
.sp-vink::after { content: ""; position: absolute; left: 5px; top: 3px; width: 3.5px; height: 6.5px; border-right: 1.6px solid #fff; border-bottom: 1.6px solid #fff; transform: rotate(45deg); }
.sp-wacht { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--blauw); box-shadow: 0 0 0 2px rgba(11, 18, 32, 0.9), 0 0 0 3.5px var(--hemel); }

/* Kaart 4: de telefoon in code, die onder uit de kaart loopt. Het toegangsscherm met een widget en een melding die
   om je ja vraagt. */
.tel { position: absolute; left: 50%; top: 0; width: 236px; height: 470px; margin-left: -118px; padding: 7px; border-radius: 44px; background: #0d0f14; box-shadow: 0 40px 80px -30px rgba(8, 20, 60, 0.8), inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), 0 0 0 1px rgba(8, 20, 60, 0.3); }
.tel-scherm { position: relative; height: 100%; padding: 9px 14px; border-radius: 37px; overflow: hidden; color: #fff; font-size: 11.5px; line-height: 1.3;
  background: radial-gradient(90% 50% at 50% 100%, rgba(255, 214, 160, 0.9), rgba(255, 214, 160, 0) 70%), linear-gradient(180deg, #102257 0%, #1f3f96 40%, #4f7fd8 70%, #9fbff3 100%); }
.tel-status { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px 0; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tel-eiland { width: 64px; height: 19px; border-radius: 999px; background: #05060a; }
.tel-batterij { position: relative; width: 21px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75); }
.tel-batterij::after { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 13px; border-radius: 1.5px; background: #fff; }
.tel-dag { margin-top: 12px; text-align: center; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.86); }
.tel-tijd { margin-top: 2px; text-align: center; font-size: 54px; font-weight: 300; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tel-widget { margin-top: 10px; padding: 10px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.tw-kop, .tm-kop { display: flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 600; }
.tw-kop { color: rgba(255, 255, 255, 0.9); }
.tw-app { flex: none; width: 15px; height: 15px; border-radius: 4px; background: linear-gradient(160deg, #93c5fd, #2563eb); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
.tw-rij { display: flex; align-items: center; gap: 7px; margin-top: 7px; font-size: 12px; font-weight: 500; }
.tw-rij span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-rij time { font-size: 10.5px; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; }
.tw-vink { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; position: relative; }
.tw-vink::after { content: ""; position: absolute; left: 4.6px; top: 2.6px; width: 3.4px; height: 6.4px; border-right: 1.6px solid var(--blauw); border-bottom: 1.6px solid var(--blauw); transform: rotate(45deg); }
.tel-melding { margin-top: 12px; padding: 10px 12px 11px; border-radius: 18px; background: rgba(252, 252, 255, 0.95); color: var(--inkt); box-shadow: 0 14px 30px -12px rgba(8, 20, 60, 0.6); }
.tm-kop b { flex: 1; font-weight: 600; }
.tm-kop small { font-size: 10px; font-weight: 500; color: var(--mist); }
.tm-tekst { margin-top: 4px; font-size: 12px; line-height: 1.32; }
.tm-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 9px; }
.tm-knop { display: grid; place-items: center; padding: 6px 0; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(11, 18, 32, 0.07); color: var(--leisteen); }
.tm-ja { background: var(--blauw); color: #fff; transition: box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease; }
.tm-ja > span { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.geen-js .tm-vraag, .js .dk-ios[data-stap="3"] .tm-vraag, .js .dk-ios:not([data-stap="3"]) .tm-klaar { opacity: 0; }
.geen-js .tm-ja, .js .dk-ios[data-stap="3"] .tm-ja { background: var(--tint); color: var(--blauw); }
.js .dk-ios[data-stap="2"] .tm-ja { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--hemel); }
/* De melding komt van boven op, zoals op een toegangsscherm. */
.js .dk-ios .tel-melding { transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }
.js .dk-ios:not([data-stap]) .tel-melding, .js .dk-ios[data-stap="0"] .tel-melding { opacity: 0; transform: translateY(-14px) scale(0.96); }

/* De drie kleine diensten: een rij eronder, wit op papier, met het icoon in de blauwtrap. */
.dk-klein { margin-top: clamp(12px, 1.15vw, 16px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.15vw, 16px); }
.dienst-klein { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; padding: 20px 22px 18px; border-radius: var(--rond); background: #fff; box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(11, 18, 32, 0.06); transition: transform 0.35s ease; }
.dienst-klein:hover { transform: translateY(-2px); }
.dienst-klein > :not(.dienst-ico) { grid-column: 2; }
.dienst-ico { grid-row: 1 / span 3; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--tint); color: var(--blauw); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.25); }
.dienst-naam { font-family: var(--kop); font-weight: 500; font-size: clamp(21px, 1.63vw, 24px); line-height: 1.08; letter-spacing: -0.02em; padding-top: 2px; }
.dienst-zin { margin-top: 6px; font-size: 14.5px; line-height: 1.48; color: var(--leisteen); text-wrap: pretty; }
.dienst-link { padding-top: 10px; justify-self: start; display: inline-flex; align-items: center; font-size: 14.5px; font-weight: 500; color: var(--blauw); }
.dienst-link::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: var(--rond); }
.dienst-klein:hover .pijl, .dienst-link:focus-visible .pijl { width: 10px; margin-left: 10px; }
.dienst-link:focus-visible { outline: none; }
.dienst-klein:has(.dienst-link:focus-visible), .dk:has(.dk-knop:focus-visible) { box-shadow: var(--kaart-schaduw), 0 0 0 2px var(--blauw); }
.diensten-bron { margin-top: 16px; color: var(--mist); }

@media (max-width: 1199px) {
  .dk-recruitment, .dk-ios, .dk-planning, .dk-websites { grid-column: span 6; }
  .pl { grid-template-columns: auto minmax(20px, 1fr) 150px; }
  .pl-chip { font-size: 12px; }
}
@media (max-width: 1023px) {
  .dk-klein { grid-template-columns: 1fr; }
  .diensten-kop .intro { justify-self: start; }
}
/* Smal (iPad staand en telefoon): compactere visuelen in de kaarten, de kleine diensten als compacte lijst. Tot 600 px
   blijven de grote kaarten in twee kolommen staan; pas op de telefoon liggen ze in een veegrij. */
@media (max-width: 819px) {
  .diensten { padding: 64px 0 56px; }
  .diensten-kop { margin-bottom: 26px; }
  .dk, .dk-recruitment, .dk-ios, .dk-planning, .dk-websites { min-height: 468px; }
  .dk:hover, .dienst-klein:hover { transform: none; }
  .dk-tekst { padding: 24px 22px 0; }
  .dk-naam { font-size: 26px; }
  .dk-zin { font-size: 15px; }
  .dk-knop { margin-top: 16px; }
  .dk-beeld { margin-top: 22px; }
  /* De zijbalk wordt een smalle rail met alleen de iconen, zodat de lijst de ruimte krijgt. */
  .wv { left: 22px; min-width: 0; width: calc(100% - 22px + 12px); grid-template-columns: 44px 1fr; }
  .wv-zij { padding: 12px 8px; align-items: center; }
  .wv-merk { font-size: 0; gap: 0; margin-bottom: 10px; }
  .wv-merk i { width: 24px; height: 24px; font-size: 9px; }
  .wv-nav { font-size: 0; gap: 0; padding: 7px; }
  .wv-hoofd { padding: 12px 22px 12px 12px; }
  /* De status staat onder de naam, zodat naam en status allebei heel blijven. */
  .wv-rij { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; padding: 8px 0; align-items: start; }
  .wv-rij > :not(i) { grid-column: 2; justify-self: start; }
  .wv-rij > i { grid-row: 1 / span 2; align-self: start; }
  .wv-naam small { display: none; }
  .wv-chip, .wv-wacht, .wv-bezig { font-size: 10px; padding: 2px 7px; }
  .wv-staat { justify-items: start; }
  .wv-naam { font-size: 12px; }
  .wv-zoek { display: none; }
  .wv-tabs { gap: 12px; }
  .wv-rij { gap: 8px; }
  .pl { left: 22px; right: 22px; top: 2px; bottom: 26px; grid-template-columns: auto minmax(0, 1fr) 96px; row-gap: 8px; }
  .pl-chip { padding: 6px 10px 6px 6px; font-size: 10.5px; gap: 6px; }
  .pl-lijn { margin-left: 4px; }
  .pl-chip time { font-size: 10px; padding: 2px 6px; }
  .pl-tegel { border-radius: 24%; padding: 14% 13% 11%; }
  .pl-tegel-kop, .pl-tegel-voet { font-size: 9px; }
  .pl-tegel-kop span:first-child { overflow: hidden; text-overflow: ellipsis; }
  .site { left: 22px; right: 22px; }
  .site-pagina { padding: 12px 14px; }
  .site-kop { display: none; }
  .site-nav span { display: none; }
  .site-form { width: 44%; margin-top: 14px; padding: 9px; }
  .site-veld { flex-direction: column; gap: 1px; padding: 5px 7px; }
  .site-paneel { width: 54%; right: 8px; top: 58px; padding: 10px 10px; }
  .sp-kop { font-size: 11px; gap: 6px; }
  .sp-kop time { display: none; }
  .sp-rij { font-size: 11px; gap: 6px; white-space: normal; line-height: 1.2; padding: 5px 0; }
  .tel { width: 214px; height: 430px; margin-left: -107px; border-radius: 40px; }
  .tel-scherm { border-radius: 33px; }
  .tel-tijd { font-size: 48px; }
  .dk-klein { gap: 0; margin-top: 6px; border-radius: var(--rond); background: #fff; box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(11, 18, 32, 0.06); }
  .dienst-klein { padding: 16px 18px 14px; column-gap: 14px; border-radius: 0; background: none; box-shadow: none; }
  .dienst-klein + .dienst-klein { border-top: 1px solid var(--lijn-fijn); }
  .dienst-ico { width: 38px; height: 38px; border-radius: 12px; }
  .dienst-naam { font-size: 21px; }
  .dienst-zin { font-size: 14px; }
  .dienst-link { padding-top: 6px; }
  .dienst-link::after { border-radius: 0; }
}
/* Telefoon: de grote kaarten in een veegrij met de volgende in zicht; elke kaart speelt als hij in de rij in beeld komt. */
@media (max-width: 599px) {
  .dk-raster { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--rand)); padding: 4px var(--rand) 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .dk-raster::-webkit-scrollbar { display: none; }
  .dk, .dk-recruitment, .dk-ios, .dk-planning, .dk-websites { flex: 0 0 86%; scroll-snap-align: center; }
}
@media (max-width: 379px) {
  .pl-chip { font-size: 10px; padding-right: 8px; }
  .pl { grid-template-columns: auto minmax(0, 1fr) 84px; }
}
/* ============ 4. Kijk wat de agent doet ============ */
.agent { padding: clamp(30px, 3vw, 50px) 0 clamp(40px, 4vw, 64px); }
.agent .kop-rij { margin-bottom: clamp(28px, 3vw, 40px); }
.agent-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.agent-tab { position: relative; display: inline-flex; align-items: baseline; gap: 8px; padding: 12px 18px 13px; border-radius: 14px; background: var(--wit); border: 1px solid rgba(11, 18, 32, 0.08); font-size: 15px; font-weight: 500; color: var(--leisteen); overflow: hidden; transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.agent-tab small { font-size: 12.5px; color: var(--mist); font-weight: 500; }
.agent-tab:hover { color: var(--inkt); }
.agent-tab[aria-selected="true"] { color: var(--inkt); border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 10px 24px -16px rgba(37, 99, 235, 0.55); }
.agent-tab[aria-selected="true"] small { color: var(--blauw); }
.tab-loop { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: var(--blauw); transform: scaleX(var(--loop, 0)); transform-origin: 0 50%; opacity: 0; }
.agent-tab[aria-selected="true"] .tab-loop { opacity: 1; }
.agent-nog { position: relative; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; color: var(--leisteen); font-size: 14px; font-weight: 500; transition: color 0.2s ease, background 0.2s ease; }
.agent-nog:hover { color: var(--blauw); background: var(--tint); }
.agent-tab.speelt .tab-loop { opacity: 1; }
.geen-js .agent-tabs { display: none; }

.agent-podium { display: grid; grid-template-columns: 1.02fr 1fr 1fr; gap: clamp(14px, 1.6vw, 24px); align-items: start; }
.agent-podium:not([data-sc="0"]) [data-sc="0"], .agent-podium:not([data-sc="1"]) [data-sc="1"], .agent-podium:not([data-sc="2"]) [data-sc="2"] { display: none; }
.kol-kop { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; font-weight: 500; color: var(--leisteen); letter-spacing: 0.01em; }
.kol-kop b { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--blauw); color: #fff; font-size: 12px; font-weight: 700; }

/* 1. De telefoon in code, op een podium van licht (geen foto). Het podium is een lichte plaat met ochtendlicht uit
   code; de telefoon staat erop en loopt onder uit het podium, zoals de visuelen van de diensten. */
.tel-podium { position: relative; aspect-ratio: 4 / 4.6; border-radius: var(--rond); overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 55% at 78% 8%, rgba(255, 226, 170, 0.75), rgba(255, 226, 170, 0) 70%), radial-gradient(80% 60% at 10% 100%, rgba(147, 197, 253, 0.6), rgba(147, 197, 253, 0) 70%), linear-gradient(165deg, #f3f7ff 0%, #e8f0fd 55%, #dfe9fb 100%);
  box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
/* Het raamlicht valt schuin over de plaat. */
.tel-podium::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0) 0 70px, rgba(255, 255, 255, 0.42) 70px 150px, rgba(255, 255, 255, 0) 150px 230px); filter: blur(18px); opacity: 0.7; }
.tel-code { position: absolute; left: 50%; top: 26px; width: 252px; height: 530px; margin-left: -126px; padding: 7px; border-radius: 46px; background: #0d0f14; box-shadow: 0 40px 70px -30px rgba(15, 30, 70, 0.55), 0 0 0 1px rgba(15, 30, 70, 0.12), inset 0 0 0 1.5px rgba(255, 255, 255, 0.14); }
.scherm { position: relative; width: 100%; height: 100%; border-radius: 39px; overflow: hidden; background: #f2ede4; color: #111; font-family: var(--tekst); backface-visibility: hidden; }
.scherm-status { position: relative; z-index: 3; height: 38px; padding: 12px 22px 0 26px; display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; background: rgba(255, 255, 255, 0.82); }
.sc-iconen { display: inline-flex; gap: 4px; align-items: center; }
.sc-iconen i { width: 15px; height: 9px; border-radius: 2px; background: #111; opacity: 0.85; }
.sc-iconen i:first-child { width: 12px; clip-path: polygon(0 100%, 100% 0, 100% 100%); border-radius: 0; }
.sc-iconen i:nth-child(2) { width: 13px; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.scherm-notch { position: absolute; z-index: 4; top: 7px; left: 50%; width: 86px; height: 24px; transform: translateX(-50%); border-radius: 13px; background: #080808; }
.sc-app { position: absolute; inset: 38px 0 0 0; display: flex; flex-direction: column; }
.agent-podium:not([data-sc="0"]) .sc-app[data-sc="0"], .agent-podium:not([data-sc="1"]) .sc-app[data-sc="1"], .agent-podium:not([data-sc="2"]) .sc-app[data-sc="2"] { display: none; }
.sc-kop { display: flex; align-items: center; gap: 9px; padding: 4px 12px 9px; background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid rgba(0, 0, 0, 0.07); }
.sc-terug { width: 10px; height: 10px; border-left: 2.2px solid #2563eb; border-bottom: 2.2px solid #2563eb; transform: rotate(45deg); margin-left: 4px; }
.sc-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #1e293b; color: #fff; font-weight: 600; font-size: 15px; }
.sc-av-2 { background: #2563eb; }
.sc-wie { display: grid; line-height: 1.2; }
.sc-wie b { font-weight: 600; font-size: 15px; white-space: nowrap; }
.sc-wie small { font-size: 12px; color: #667085; }
.sc-chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; background: #ece4d6; overflow: hidden; }
.sc-dag { align-self: center; font-size: 11.5px; font-weight: 500; color: #5f6470; background: rgba(255, 255, 255, 0.7); padding: 3px 10px; border-radius: 8px; }
.sc-bel { max-width: 86%; padding: 8px 11px 5px; border-radius: 15px; font-size: 15.5px; line-height: 1.34; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12); }
.sc-bel p { margin: 0; }
.sc-bel span { display: block; text-align: right; font-size: 11.5px; color: #5f6b7f; margin-top: 2px; }
.sc-uit { align-self: flex-end; background: #e8f1ff; border-top-right-radius: 4px; }
.sc-in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.sc-typt { align-self: flex-start; display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 15px; background: #fff; }
.sc-typt i { width: 7px; height: 7px; border-radius: 50%; background: #9aa3ae; }
.agent-podium.tijd .sc-typt i { animation: typt 1s ease-in-out infinite; }
.sc-typt i:nth-child(2) { animation-delay: 0.15s; } .sc-typt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typt { 0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } 30% { transform: translateY(-3px); opacity: 1; } }
.sc-invoer { padding: 8px 10px 18px; background: #f6f3ee; }
.sc-invoer span { display: block; padding: 9px 14px; border-radius: 999px; background: #fff; color: #9aa0a8; font-size: 14px; border: 1px solid rgba(0, 0, 0, 0.06); }
.sc-mail .sc-chat { background: #f4f2ee; gap: 10px; }
.sc-mailtje { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); font-size: 14.5px; line-height: 1.35; }
.sc-mailtje p { margin: 0; }
.m-van { font-size: 12px; color: #667085; }
.m-onder { font-weight: 600; margin-top: 3px !important; }
.m-tekst { color: #3f4552; margin-top: 3px !important; }
.m-bijlage { margin-top: 8px !important; display: inline-flex; padding: 5px 10px; border-radius: 8px; background: rgba(11, 18, 32, 0.06); color: var(--inkt); font-size: 12.5px; font-weight: 500; }
.sc-mailtje.sc-in { box-shadow: inset 3px 0 0 #2563eb, 0 1px 2px rgba(0, 0, 0, 0.1); }
.js .sc-chat [data-f] { transition: opacity 0.35s ease, transform 0.35s ease; }
.js .sc-chat [data-f]:not(.toon) { opacity: 0; transform: translateY(10px); }
.js .sc-chat .sc-typt:not(.toon) { display: none; }
.geen-js .sc-typt { display: none; }

/* 2. De stappen: één tegelijk in het blauwe kader, daarna een vinkje. */
.stappen { position: relative; display: grid; gap: 10px; }
.stappen li { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; row-gap: 2px; padding: 15px 16px 15px 14px; border-radius: 16px; background: var(--wit); border: 1px solid rgba(11, 18, 32, 0.07); transition: opacity 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, transform 0.35s ease; }
.stappen b { font-weight: 500; font-size: 16px; color: var(--inkt); }
.stappen span { grid-column: 2; font-size: 14.5px; line-height: 1.42; color: var(--leisteen); }
.st-teken { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; position: relative; background: var(--blauw); }
.st-teken::after { content: ""; position: absolute; left: 9.5px; top: 6px; width: 5px; height: 9px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.js .stappen li:not(.aan):not(.klaar) { opacity: 0.42; }
.js .stappen li:not(.klaar) .st-teken { background: transparent; box-shadow: inset 0 0 0 1.5px var(--nevel-diep); }
.js .stappen li:not(.klaar) .st-teken::after { display: none; }
.js .stappen li.aan { background: var(--wit); box-shadow: 0 0 0 2px var(--hemel), 0 16px 34px -20px rgba(37, 99, 235, 0.6); transform: translateX(4px); }
.js .stappen li.aan .st-teken { box-shadow: inset 0 0 0 2px var(--blauw); }
.js .stappen li.aan .st-teken::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--blauw); }
.agent-podium.tijd .stappen li.aan .st-teken::before { inset: 5px; background: none; border: 2px solid var(--blauw); border-right-color: transparent; animation: draai 0.8s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }

/* 3. Het resultaat. */
.uitkomst { position: relative; background: var(--wit); border-radius: 20px; border: 1px solid rgba(11, 18, 32, 0.07); box-shadow: var(--kaart-schaduw); padding: 16px 18px 18px; }
.uk-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--lijn-fijn); font-size: 13.5px; font-weight: 500; }
.uk-staat { display: inline-grid; justify-items: end; }
.uk-staat > * { grid-area: 1 / 1; }
.uk-wacht { color: var(--blauw); }
.uk-nog { color: var(--mist); }
.knop-akkoord .uk-wacht { color: #fff; }
.uk-bel { display: grid; padding: 11px 14px 12px; border-radius: 16px 4px 16px 16px; background: var(--blauw); color: #fff; font-size: 15.5px; line-height: 1.45; box-shadow: 0 14px 30px -18px rgba(37, 99, 235, 0.95); }
.uk-bel > * { grid-area: 1 / 1; }
/* Tot het antwoord er is, is de bubbel een concept in wording: licht, met drie stille bolletjes. */
.ukb-concept { display: flex; align-items: center; gap: 10px; align-self: center; font-size: 14px; font-weight: 500; opacity: 0; }
.js .uk-bel, .js .uk-bel > * { transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, opacity 0.35s ease; }
.js .uitkomst:not(.toon) .uk-bel { background: var(--tint); color: var(--blauw); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.2); }
.js .uitkomst:not(.toon) .ukb-concept { opacity: 1; }
.js .uitkomst:not(.toon) .ukb-tekst { opacity: 0; }
/* Een tekst die omslaat als het resultaat er is, zonder dat de regel verspringt. */
.uk-wissel { display: inline-grid; }
.uk-wissel > * { grid-area: 1 / 1; transition: opacity 0.3s ease; }
.uk-akkoord { margin-top: 14px; display: flex; justify-content: flex-end; }
.uk-akkoord .knop-akkoord { pointer-events: none; display: inline-grid; position: relative; }
.uitkomst.tikt .knop-akkoord::after { content: ""; position: absolute; inset: -4px; border-radius: 999px; border: 2px solid var(--hemel); animation: tik 0.7s ease-out both; }
@keyframes tik { from { opacity: 1; transform: scale(0.92); } to { opacity: 0; transform: scale(1.18); } }
.uk-akkoord .knop-akkoord > * { grid-area: 1 / 1; }
.uk-log { margin-top: 14px; display: grid; gap: 6px; font-size: 14px; color: var(--leisteen); }
.uk-log li { display: flex; align-items: center; gap: 9px; }
.uk-log li::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cpath d='M4.5 7.6l2 2 4-4.3' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.uk-van { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--lijn-fijn); font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.uk-van .bron { margin-left: 4px; }
.uk-rooster { display: grid; gap: 8px; }
.uk-rooster li { display: flex; justify-content: space-between; align-items: center; padding: 11px 13px; border-radius: 12px; background: var(--papier); font-size: 14.5px; }
.uk-rooster li b { font-weight: 500; }
.uk-rooster li > span { color: var(--mist); font-size: 13.5px; }
.uk-gat { display: grid !important; grid-template-columns: 1fr auto; }
.uk-gat > span { grid-area: 1 / 2; }
.uk-gat .uk-klaar { color: var(--blauw) !important; font-weight: 600; }
.uk-kandidaat { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; background: var(--papier); }
.uk-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #e7e0d2; color: #5b4a2c; font-size: 13px; font-weight: 600; flex: none; }
.uk-kandidaat b { display: block; font-weight: 500; font-size: 15.5px; }
.uk-kandidaat small { font-size: 13px; color: var(--leisteen); }
.uk-plan { margin-top: 10px; padding: 11px 13px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--hemel); background: rgba(96, 165, 250, 0.1); color: var(--blauw-diep); font-size: 14.5px; font-weight: 500; }
/* Standen: elk onderdeel komt in zijn eigen fase (data-f); het werk staat er vanaf de vraag, het akkoord licht op,
   daarna verstuurd. */
.js .uitkomst > *:not(.uk-kop) { transition: opacity 0.4s ease, transform 0.4s ease; }
.js .uitkomst > [data-f]:not(.toon) { opacity: 0; transform: translateY(8px); }
.js .uitkomst:not(.klaar) .uk-log, .js .uitkomst:not(.klaar) .uk-van { opacity: 0; transform: translateY(6px); }
/* De wachtplek: waar straks het logboek staat, staat tot dan de toestand van het werk (stil, geen animatie). */
.uk-bezig { display: none; }
.js .uk-bezig { display: flex; position: relative; height: 0; top: 40px; margin: 0; justify-content: center; align-items: center; gap: 10px; color: var(--mist); font-size: 13.5px; font-weight: 500; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.js .uitkomst:not(.klaar) .uk-bezig.toon { opacity: 1; }
.ukb-bol { display: inline-flex; gap: 4px; }
.ukb-bol i { width: 6px; height: 6px; border-radius: 50%; background: var(--hemel); }
.ukb-bol i:nth-child(2) { opacity: 0.7; } .ukb-bol i:nth-child(3) { opacity: 0.45; }
.js .uitkomst .uk-klaar { opacity: 0; transition: opacity 0.3s ease; }
.js .uitkomst.klaar .uk-klaar { opacity: 1; }
.js .uitkomst.klaar .uk-wacht { opacity: 0; }
.js .uitkomst .uk-wacht, .js .uitkomst .uk-nog { transition: opacity 0.3s ease; }
.js .uitkomst.toon .uk-nog { opacity: 0; }
.js .uitkomst:not(.toon) .uk-nog ~ .uk-wacht, .js .uitkomst:not(.toon) .uk-dan { opacity: 0; }
.geen-js .uk-wacht, .geen-js .uk-nog { opacity: 0; }
.uitkomst.vraagt .knop-akkoord { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hemel), 0 12px 30px -10px rgba(37, 99, 235, 0.9); }
.uitkomst.klaar .knop-akkoord, .geen-js .knop-akkoord { background: var(--tint); color: var(--blauw); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3); }
.agent-bron { margin-top: 20px; color: var(--mist); max-width: 60em; }

@media (max-width: 1100px) {
  .agent-podium { grid-template-columns: 1fr 1fr; }
  .kol-vraag { grid-row: span 2; }
}
@media (max-width: 819px) {
  .agent-tabs { gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--rand) * -1) 16px; padding: 2px var(--rand) 4px; scrollbar-width: none; }
  .agent-tabs::-webkit-scrollbar { display: none; }
  .agent-tab { flex: none; padding: 10px 14px 11px; font-size: 14px; }
  .agent-tab small { display: none; }
  .agent-nog { flex: none; padding: 10px 12px; }
  .stappen { gap: 6px; }
  .stappen li { padding: 11px 12px; grid-template-columns: 24px 1fr; column-gap: 10px; }
  .st-teken { width: 22px; height: 22px; }
  .st-teken::after { left: 7.5px; top: 4.5px; }
  .stappen b { font-size: 15px; }
  .stappen span { font-size: 13.5px; }
  .js .stappen li.aan { transform: none; }
}
@media (max-width: 599px) {
  .agent-podium { grid-template-columns: 1fr; gap: 22px; }
  .kol-vraag { grid-row: auto; }
  .tel-podium { aspect-ratio: auto; height: 470px; }
  .tel-code { width: 236px; height: 500px; margin-left: -118px; top: 24px; border-radius: 42px; }
  .scherm { border-radius: 35px; }
  .sc-bel { font-size: 15px; }
  .agent-nog span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .agent-nog { padding: 10px; }
}

/* Groen is alleen voor live: verstuurd en compleet in de blauwtrap. */
.uitkomst .status { color: var(--blauw); }
.uitkomst .status::before { background: var(--blauw); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16); }
/* Het resultaat schrijft zich uit: een rand van tekens voorop, daarachter de letters. */
.uitkomst .l.teken::after { content: attr(data-t); position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: var(--hemel); }
.uitkomst .l { position: relative; }
.uitkomst .l.weg, .uitkomst .l.teken { color: transparent !important; }
.uk-bel .l.teken::after { color: #bfdbfe; }
/* ============ 6. Gemeten per klant: glas op warm papier met zacht raamlicht ============ */
.gemeten { position: relative; isolation: isolate; padding: clamp(74px, 6.4vw, 92px) 0 calc(clamp(40px, 3.8vw, 54px) + 34px); background: linear-gradient(180deg, var(--papier) 0, var(--papier-warm) 220px, var(--papier-warm) calc(100% - 200px), var(--papier) 100%); overflow: hidden; }
/* Het licht uit code: een zachte zon rechtsboven en het licht van een raam dat schuin over het papier valt, achter
   de kaarten, zodat het glas iets heeft om te breken. Het staat stil. */
.gemeten-licht { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%); }
.gl-zon { position: absolute; right: -14%; top: -40%; width: 72%; height: 120%; background: radial-gradient(closest-side, rgba(255, 210, 140, 0.5), rgba(255, 210, 140, 0.16) 52%, rgba(255, 210, 140, 0) 100%); }
.gl-raam { position: absolute; left: 4%; right: -16%; top: 36%; bottom: -6%; transform: skewX(-24deg); filter: blur(16px); opacity: 0.9;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0 12%, rgba(255, 233, 196, 0.85) 12% 29%, rgba(255, 255, 255, 0) 29% 32%, rgba(255, 233, 196, 0.85) 32% 49%, rgba(255, 255, 255, 0) 49% 52%, rgba(255, 233, 196, 0.7) 52% 69%, rgba(255, 255, 255, 0) 69% 100%); }
.gemeten .korrel { opacity: 0.06; }
.gemeten-kop-in .intro { color: var(--inkt); opacity: 0.78; }
.gemeten .kop-rij { margin-bottom: clamp(32px, 3.4vw, 48px); }

.bewijzen { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.3vw, 18px); }
.bewijs { display: flex; flex-direction: column; border-radius: 22px; padding: 18px 18px 16px; --glas: rgba(255, 254, 251, 0.78); }
.bw-levend { height: 66px; display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--lijn-fijn); }
.bw-zin { font-family: var(--kop); font-weight: 400; font-size: clamp(19.5px, 1.5vw, 21.5px); line-height: 1.1; letter-spacing: -0.015em; color: var(--inkt); text-wrap: balance; }
.bw-context { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--leisteen); }
.bw-klant { margin-top: auto; padding-top: 16px; display: grid; gap: 1px; line-height: 1.3; }
.bw-klant b { font-weight: 600; font-size: 14px; color: var(--inkt); }
.bw-klant span { font-size: 13px; color: var(--mist); }
.bewijs .bron { margin-top: 8px; }

/* Het klokje: de wijzer loopt van de eerste naar de laatste tijd, de boog kleurt de minuten ertussen. */
.bw-klok { flex: none; width: 44px; height: 44px; }
.bw-klok svg { width: 100%; height: 100%; overflow: visible; }
.bk-rand { fill: rgba(255, 255, 255, 0.85); stroke: rgba(11, 18, 32, 0.16); stroke-width: 1.2; }
.bk-boog { fill: rgba(96, 165, 250, 0.32); stroke: none; }
.bk-uur, .bk-min { stroke: var(--inkt); stroke-linecap: round; }
.bk-uur { stroke-width: 2.2; }
.bk-min { stroke: var(--blauw); stroke-width: 1.6; }
.bk-as { fill: var(--blauw); }
.bw-tijd { flex: 1; min-width: 0; display: grid; gap: 5px; }
.bw-nu { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.005em; color: var(--inkt); line-height: 1; }
.bw-baan { position: relative; height: 4px; border-radius: 4px; background: rgba(11, 18, 32, 0.09); margin: 3px 3px 0; }
.bw-vul { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v, 1) * 100%); border-radius: 4px; background: linear-gradient(90deg, var(--hemel), var(--blauw)); }
.bw-punt { position: absolute; top: 50%; left: calc(var(--x) * 100%); width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px rgba(11, 18, 32, 0.18); }
.bw-punt.aan { box-shadow: inset 0 0 0 2px var(--blauw); }
.bw-uiteinden { display: flex; justify-content: space-between; font-size: 12px; color: var(--mist); }

/* De teller en de vinkjes van CAN10. */
.bw-teller { display: grid; gap: 2px; line-height: 1.1; }
.bw-teller b { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--inkt); }
.bw-teller span { font-size: 12.5px; color: var(--mist); }
.bw-vinken { margin-left: auto; display: grid; gap: 3px; font-size: 12.5px; color: var(--leisteen); }
.bw-vinken li { display: flex; align-items: center; gap: 6px; transition: opacity 0.3s ease; }
.bw-vinken li::before { content: ""; width: 13px; height: 13px; border-radius: 50%; background: var(--blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M3.8 6.6l1.8 1.8 3.6-3.9' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.js .bw-vinken li:not(.aan) { opacity: 0.35; }
.js .bw-vinken li:not(.aan)::before { background: rgba(11, 18, 32, 0.12); }

/* Het mini-scherm van Grip. */
.bw-tegels { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.bw-tegels li { padding: 7px 8px 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.82); box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.06); display: grid; line-height: 1.15; min-width: 0; }
.bw-tegels b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--inkt); white-space: nowrap; }
.bw-tegels span { font-size: 11.5px; color: var(--mist); white-space: nowrap; }
.bewijs[data-bewijs="scherm"] .bw-levend { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
.bw-actueel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--groen); font-weight: 500; }
.bw-actueel::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
.bewijs[data-bewijs="scherm"] .bw-levend { height: 66px; }
.bewijs[data-bewijs="scherm"] .bw-actueel { order: -1; }

.gemeten-voet { margin-top: 16px; color: var(--leisteen); max-width: 62em; }

@media (max-width: 1180px) {
  .bewijzen { grid-template-columns: repeat(2, 1fr); }
  .gl-raam { top: 30%; }
}
@media (max-width: 819px) {
  .gemeten { padding-top: 64px; }
  .gl-zon { right: -40%; top: -10%; width: 120%; height: 60%; }
  .gl-raam { left: -20%; right: -40%; top: 40%; }
  .bewijzen { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--rand) * -1); padding: 4px var(--rand) 14px; scrollbar-width: none; scroll-padding: 0 var(--rand); }
  .bewijzen::-webkit-scrollbar { display: none; }
  .bewijs { flex: 0 0 84%; scroll-snap-align: start; min-height: 330px; }
}
@media (min-width: 600px) and (max-width: 819px) { .bewijs { flex-basis: 56%; } }
/* ============ 7. Werkt met wat je al hebt: precies de live sectie van WorksBuddy ============ */
/* Nagemeten op hun opname van 1920 breed en die van 1440: wit met een zachte perzikgloed links en rechts op een
   achtste van de breedte, ter hoogte van de alinea; een kleine kop in de kopletter en een grijze alinea van 16 px; de tegels
   wit en rond met een zachte schaduw eronder, allemaal even groot (het logo iets meer dan de helft); onder het midden
   twee regels van 27 px in medium; onderaan de heuvels over de volle breedte, met een bovenrand die oplost in het wit.
   Sinds 25 oktober staan de tegels op twee ringen rond hetzelfde middelpunt (binnen 15, buiten 21), dichter op elkaar
   dan bij WorksBuddy, zodat er meer tegelijk in beeld zijn: op 1440 zit er tussen buren en tussen de ringen overal
   ongeveer 42 px lucht. De buitenring draait met de klok mee, de binnenring de andere kant op, en onderaan gaan de
   tegels achter de heuvels langs. Stapelvolgorde: de ringen (1) onder de heuvels (2) onder de zon en de regels (3);
   het veld zelf maakt geen eigen laag, zodat die drie elkaar in de sectie kunnen afwisselen. */
.koppel { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--papier) 0, #fff 180px);
  --boven: clamp(76px, 6.6vw, 92px); --hv: clamp(190px, 27svh, 360px);
  --tg: clamp(56px, 4vw, 64px); --logo: calc(var(--tg) * 0.56); --zon: 273px; --zon-r: 60px;
  /* De ringen. R1 is de binnenring: zo klein dat de tegels dicht om het midden staan, zo groot dat hun rand 10 px
     buiten de punten van de stralen blijft (die reiken tot 101 px van het midden van de zon) en ruim buiten de twee
     regels. Het middelpunt ligt daarom R1 min een halve tegel min 111 px onder de zon (op 1440 101 px, op 1920 147 px,
     dan 0,36 R zoals bij WorksBuddy). R is de buitenring: een tegel en de lucht verder. De horizon ligt 0,73 R onder
     de zon, zoals bij WorksBuddy. */
  --R1: clamp(240px, 16.7vw, 290px); --lucht: clamp(40px, 3vw, 48px);
  --R: calc(var(--R1) + var(--tg) + var(--lucht));
  --k: 1; --off: calc(var(--R1) - var(--tg) / 2 - 111px); --hor: calc(var(--R) * 0.73);
  --yc: calc(var(--tg) / 2 + var(--R) * var(--k) - var(--off));
  --omloop: 84s; --omloop-binnen: 64s;
  padding: var(--boven) 0 0; }
.koppel-licht { position: absolute; inset: 0; z-index: -2; pointer-events: none; --gloed-y: calc(var(--boven) + 190px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 170px); mask-image: linear-gradient(180deg, transparent 0, #000 170px);
  background:
    radial-gradient(min(380px, 27vw) 400px at 12.5% var(--gloed-y), rgba(255, 220, 178, 0.62), rgba(255, 220, 178, 0.48) 30%, rgba(255, 220, 178, 0.27) 55%, rgba(255, 220, 178, 0.08) 78%, rgba(255, 220, 178, 0) 100%),
    radial-gradient(min(380px, 27vw) 400px at 87.5% var(--gloed-y), rgba(255, 220, 178, 0.62), rgba(255, 220, 178, 0.48) 30%, rgba(255, 220, 178, 0.27) 55%, rgba(255, 220, 178, 0.08) 78%, rgba(255, 220, 178, 0) 100%); }
/* De heuvels liggen boven de tegels: wat onder de horizon draait, gaat erachter langs. De band begint 0,36 van zijn
   hoogte boven de horizon (daar lost hij op in het wit) en loopt tot de onderrand van de sectie, onder de ronde rand
   van het akkoord door. */
.koppel-heuvels { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: var(--hv); overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.35) 14%, rgba(0, 0, 0, 0.85) 26%, #000 36%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.35) 14%, rgba(0, 0, 0, 0.85) 26%, #000 36%); }
/* Zachter dan de foto zelf, zoals bij WorksBuddy: minder verzadigd, met een lichte nevel die naar onderen toeneemt. */
.koppel-heuvels img { position: absolute; left: 50%; top: 0; width: max(100%, calc(var(--hv) * 5)); max-width: none; height: auto; transform: translate(-50%, -47%); filter: saturate(0.6) contrast(0.96) brightness(1.03); }
.koppel-heuvels::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 35%, rgba(244, 247, 238, 0.38) 100%); }

.koppel-kop { max-width: 760px; } /* 28 oktober 2026: dezelfde breedte als elke sectiekop */
/* 28 oktober 2026: de kop van de koppelingen in de maat van .kop (Huub: "alle koppen hebben een andere grootte, daar
   moeten we één stijl in trekken"); hieronder alleen nog de regel. */
.koppel .intro { font-size: clamp(16px, calc(9px + 0.5vw), 18.5px); line-height: 1.66; color: #64625f; max-width: 36em; }

/* Het veld: de bovenste tegel van de buitenring raakt de bovenkant, en het veld loopt door tot de onderrand van de
   sectie (de horizon plus het dichte deel van de heuvels). */
.koppel-veld { position: relative; width: min(1060px, 100%); height: calc(var(--yc) + var(--hor) + var(--hv) * 0.64); margin: 36px auto 0; }
.koppel-midden { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.koppel-zon { position: absolute; left: 50%; top: var(--yc); width: var(--zon); height: var(--zon); margin: calc(var(--zon) / -2) 0 0 calc(var(--zon) / -2); }
.koppel-zon canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Zonder JavaScript: dezelfde schijf van licht, van wit naar goud met de halo, op dezelfde plek. */
.geen-js .koppel-zon::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(2 * var(--zon-r)); height: calc(2 * var(--zon-r)); margin: calc(-1 * var(--zon-r)) 0 0 calc(-1 * var(--zon-r)); border-radius: 50%; background: radial-gradient(circle at 36% 32%, #ffffff 0%, #fff1cf 52%, #f6c46a 100%); box-shadow: 0 0 0 2px #f59e0b, 0 0 50px 22px rgba(253, 196, 90, 0.4); }
.koppel-regel { position: absolute; left: 50%; top: calc(var(--yc) + var(--zon-r) + 34px); transform: translateX(-50%); width: max-content; margin: 0; text-align: center; font-size: 27px; font-weight: 500; line-height: 34px; letter-spacing: -0.012em; color: var(--inkt); }

/* De ringen: elke tegel loopt op zijn eigen baan om het middelpunt (de hoek --a in de html, de straal van zijn ring)
   en draait op die baan even hard terug, zodat het logo rechtop blijft. Alleen transform, dus geen herberekening van
   de opmaak. De buitenring draait met de klok mee; de binnenring speelt dezelfde baan achteruit, dus tegen de klok in.
   De lijst zelf draait niet: met --k worden de cirkels ellipsen (alleen op de telefoon, iets hoger dan breed) en de
   tegels schalen dan even hard terug. */
.koppel-tegels { position: absolute; z-index: 1; left: 50%; top: calc(var(--yc) + var(--off)); width: 0; height: 0; margin: 0; padding: 0; list-style: none; transform: scale(1, var(--k)); }
.kt { --r: var(--R); position: absolute; left: 0; top: 0; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scale(1, calc(1 / var(--k))); }
.kt-binnen { --r: var(--R1); }
.kt:hover { z-index: 2; }
.koppel-veld.draait .kt { animation: tegel-baan var(--omloop) linear infinite; }
.koppel-veld.draait .kt-binnen { animation-duration: var(--omloop-binnen); animation-direction: reverse; }
.koppel-veld.stil .kt { animation-play-state: paused; }
@keyframes tegel-baan {
  from { transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))) scale(1, calc(1 / var(--k))); }
  to { transform: rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc(-1 * var(--a) - 360deg)) scale(1, calc(1 / var(--k))); } }
.kt-knop { position: absolute; left: calc(var(--tg) / -2); top: calc(var(--tg) / -2); width: var(--tg); height: var(--tg); border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--inkt);
  box-shadow: 0 8px 18px -5px rgba(15, 23, 42, 0.17), 0 2px 5px rgba(15, 23, 42, 0.05), 0 0 0 1px rgba(15, 23, 42, 0.035); transition: opacity 0.5s ease, scale 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--i) * 32ms); }
.kt-knop img { display: block; width: var(--logo); height: var(--logo); object-fit: contain; }
/* Pakketten met alleen een woordmerk (Mollie, Zoom en Zapier) krijgen de breedte van de tegel in plaats van het vierkant. */
.kt-breed .kt-knop img { width: calc(var(--tg) * 0.74); height: auto; }
.kt-knop svg { width: calc(var(--logo) - 3px); height: calc(var(--logo) - 3px); }
.kt .tg-woord { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; color: var(--inkt); }
/* De naam staat eronder als je erop staat. */
.kt-naam { position: absolute; left: 50%; top: calc(var(--tg) / 2 + 8px); transform: translateX(-50%); white-space: nowrap; font-size: 12.5px; font-weight: 500; color: var(--leisteen); opacity: 0; transition: opacity 0.25s ease; pointer-events: none; }
.kt:hover .kt-naam { opacity: 1; }
/* Bij binnenkomst landen de tegels één keer op hun plek; daarna beginnen de ringen te draaien. */
.js .koppel-veld:not(.aan) .kt-knop { opacity: 0; scale: 0.55; }
/* Het eerlijkheidslabel staat klein onderaan op de heuvels, boven de rand van het akkoord. */
.koppel-noot { position: absolute; left: 0; right: 0; bottom: 50px; z-index: 4; margin: 0; padding: 0 var(--rand); text-align: center; color: rgba(16, 34, 16, 0.78); text-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }

/* Telefoon: twee kleinere ringen met tegels van 42 px. Omdat het scherm smal is, zijn de ringen hier iets hoger dan
   breed (1,1 keer) en ligt het middelpunt 55 px onder de zon: zo blijft de binnenring 10 px binnen de rand van het
   scherm, ruim om de twee regels heen en boven de zon vrij van de stralen. De buitenring valt aan de zijkanten buiten
   het scherm (de sectie snijdt hem af). De horizon ligt 200 px onder de zon, onder de regels. */
@media (max-width: 599px) {
  .koppel { --boven: 64px; --hv: 210px; --tg: 42px; --zon: 236px; --zon-r: 52px;
    --R1: clamp(158px, calc(50vw - 31px), 164px); --lucht: 16px; --k: 1.1; --off: 55px; --hor: 200px; }
  .koppel .intro { font-size: 15.5px; line-height: 1.6; }
  .koppel-regel { top: calc(var(--yc) + var(--zon-r) + 26px); font-size: 21px; line-height: 27px; }
  .kt .tg-woord { font-size: 10.5px; }
  .kt-naam { font-size: 11.5px; }
  .koppel-noot { bottom: 46px; font-size: 11.5px; }
}

/* ============ 8. Het akkoord: licht papier, de werkplek als donker venster van inkt ============ */
/* De vorm van spoor technisch (Huub, 21 oktober 18:43: "volgens mij is dit een goeie"), in de letters, de knop en het
   papier van de mix. Een blad zoals de prijs: het vel schuift met zijn ronde rand over de heuvels van de koppelingen.
   Links staat de belofte stil, rechts speelt de werkplek van Polderpad één keer af (pagina.js). Onderaan 34 px extra,
   omdat het vel van de prijs daar overheen schuift. */
.akkoord { z-index: 4; margin-top: -34px; border-radius: 34px 34px 0 0; padding: clamp(84px, 8vw, 116px) 0 calc(clamp(72px, 6vw, 88px) + 34px); }
/* De werkplek krijgt op 1440 dezelfde breedte als in technisch (ongeveer 700 px), zodat het appje in drie regels past;
   de tekst links houdt de linkerrand van de andere secties van de mix. */
.akkoord-in { display: grid; grid-template-columns: minmax(300px, 0.7fr) minmax(0, 1.3fr); column-gap: clamp(32px, 3.4vw, 48px); row-gap: 40px; align-items: center; }
.akkoord-tekst .intro { margin-top: 18px; max-width: 27em; }
/* De uitkomst: een blauw vinkje en één vette zin in de kopletter. */
.akkoord-uitkomst { margin-top: 26px; display: flex; gap: 12px; align-items: flex-start; font-family: var(--kop); font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; max-width: 19em; text-wrap: balance; }
.akkoord-uitkomst i { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M8.6 13.5l3 3 5.8-6.3' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat; }
.akkoord-knop { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }

/* De werkplek: een donker venster van inkt (maten en kleuren van technisch). Links het gesprek, rechts wat de agent
   leest, onderaan de bron en Speel opnieuw. Alles recht: geen kanteling of perspectief, ook niet bij binnenkomst.
   Alleen de schaduw is korter dan in technisch: het vel van de prijs schuift 34 px over de onderkant van deze sectie
   en zou een lange schaduw met een zichtbare naad afsnijden. Deze is uitgelopen voordat dat vel begint. */
.werkplek { border-radius: 22px; overflow: hidden; color: #fff; background: linear-gradient(180deg, var(--inkt-2), var(--inkt));
  box-shadow: 0 30px 60px -28px rgba(11, 18, 32, 0.5), 0 10px 24px -14px rgba(11, 18, 32, 0.28), 0 2px 10px -4px rgba(11, 18, 32, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.werkplek :focus-visible { outline-color: var(--hemel); }
.wp-kop { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 22px; border-bottom: 1px solid var(--lijn-nacht); font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.58); font-variant-numeric: tabular-nums; }
.wp-titel { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: rgba(255, 255, 255, 0.9); }
.wp-titel::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--groen); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.wp-kanaal { white-space: nowrap; }
.wp-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.wp-gesprek { padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wp-naam { padding-left: 2px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.66); }
.wp-bel { align-self: flex-start; max-width: 96%; padding: 14px 16px 8px 20px; border-radius: 4px 18px 18px 18px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09); }
.wp-bel p { font-size: clamp(16px, 1.3vw, 19px); line-height: 2; }
.wp-tijdje { display: block; margin-top: 4px; text-align: right; font-size: 12px; color: rgba(255, 255, 255, 0.58); font-variant-numeric: tabular-nums; }
.wp-uit { display: flex; flex-direction: column; gap: 12px; }
.wp-antwoord { align-self: flex-end; max-width: 90%; padding: 10px 16px 8px; border-radius: 18px 4px 18px 18px; background: var(--blauw); box-shadow: 0 18px 40px -22px rgba(37, 99, 235, 0.9); }
/* Op het blauw van het antwoord staan label en tijd bijna wit, zodat ze minstens 4,5 contrast halen. */
.wp-label { margin-bottom: 3px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.92); }
.wp-antwoord-tekst { font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.45; }
.wp-antwoord .wp-tijdje { color: rgba(255, 255, 255, 0.92); }
.wp-akkoord { display: flex; flex-direction: row-reverse; align-items: center; gap: 14px; min-height: 44px; margin-top: 2px; }
.werkplek .knop-akkoord { flex: none; padding: 11px 20px; font-size: 15px; transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease; }
.wp-hint { flex: 1; min-width: 0; text-align: right; font-size: 13.5px; line-height: 1.35; font-weight: 500; color: rgba(255, 255, 255, 0.68); text-wrap: balance; }
.werkplek[data-ak="3"] .knop-akkoord { box-shadow: 0 0 0 3px var(--inkt), 0 0 0 5px var(--hemel), 0 12px 30px -10px rgba(37, 99, 235, 0.9); }
.werkplek[data-ak="4"] .knop-akkoord, .geen-js .werkplek .knop-akkoord { background: #fff; color: var(--blauw); box-shadow: none; cursor: default; }
/* De kaders: genummerd, één tegelijk, het nummer blijft staan. Het nummer staat schuin boven-links buiten het kader en
   bij de afzender erboven, zodat het nooit op een letter staat. Gelezen blijft het kader als rand staan. */
.gz { position: relative; border-radius: 7px; padding: 1px 4px; margin: 0 -4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; box-shadow: inset 0 0 0 1.5px var(--hemel); transition: background 0.3s ease, box-shadow 0.3s ease; }
.gz-n { position: absolute; left: -14px; top: -14px; width: 18px; height: 18px; border-radius: 5px; background: var(--blauw); color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--inkt-2); transition: opacity 0.3s ease, transform 0.3s ease; }
.wp-naam .gz-n { left: -6px; top: -21px; }
.wp-bel .gz[data-n="3"] .gz-n, .wp-bel .gz[data-n="4"] .gz-n { top: -11px; }
.js .werkplek .gz { box-shadow: inset 0 0 0 1.5px rgba(96, 165, 250, 0); }
.js .werkplek .gz-n { opacity: 0; transform: scale(0.6); }
.js .werkplek .gz.gelezen, .js .werkplek[data-ak="4"] .gz { box-shadow: inset 0 0 0 1.5px var(--hemel); }
.js .werkplek .gz.aan { background: rgba(96, 165, 250, 0.22); box-shadow: inset 0 0 0 2px var(--hemel); }
.js .werkplek .gz.aan .gz-n, .js .werkplek .gz.gelezen .gz-n, .js .werkplek[data-ak="4"] .gz-n { opacity: 1; transform: none; }
/* Wat de agent leest: elke regel komt met zijn kader, de vijfde is de planning. */
.lees-lijst { display: flex; flex-direction: column; gap: 14px; padding: 24px 22px; border-left: 1px solid var(--lijn-nacht); background: rgba(255, 255, 255, 0.025); }
.lees-lijst li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; align-items: start; align-content: start; transition: opacity 0.35s ease, transform 0.35s ease; }
.lees-lijst b { grid-row: span 2; width: 22px; height: 22px; border-radius: 6px; background: var(--blauw); color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.lees-lijst .b-plan { position: relative; background: transparent; box-shadow: inset 0 0 0 1.5px var(--hemel); }
.lees-lijst .b-plan::after { content: ""; position: absolute; left: 6px; top: 6px; width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(var(--hemel), var(--hemel)) 0 0 / 100% 3px no-repeat; }
.lk { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.58); }
.lw { grid-column: 2; font-size: 15px; line-height: 1.38; color: #fff; }
.lees-plan .lw { color: var(--hemel-licht); }
.js .werkplek .lees-lijst li { opacity: 0; transform: translateY(6px); }
.js .werkplek .lees-lijst li.aan, .js .werkplek[data-ak="4"] .lees-lijst li { opacity: 1; transform: none; }
/* Standen (data-ak, gezet door pagina.js): 0 de kaders lezen, 1 de planning bekeken, 2 het antwoord schrijft zich uit,
   3 de knop wacht op jou, 4 akkoord gegeven. In de html (zonder JavaScript, en headless) staat 4. */
.js .werkplek .wp-antwoord { transition: opacity 0.4s ease, transform 0.4s ease; }
.js .werkplek .wp-akkoord { transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s; }
.js .werkplek:is([data-ak="0"], [data-ak="1"]) .wp-antwoord { opacity: 0; transform: translateY(8px); }
.js .werkplek:is([data-ak="0"], [data-ak="1"], [data-ak="2"]) .wp-akkoord { opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s; }
/* Concept en verstuurd liggen op elkaar en alleen de zichtbaarheid wisselt: ze nemen dezelfde ruimte in, zodat het
   venster niet verspringt als de planner ja zegt. */
.js .werkplek .wp-label { display: grid; justify-items: start; }
.js .werkplek .wp-tijdje { display: grid; justify-items: end; }
.js .werkplek .knop-akkoord { display: inline-grid; place-items: center; }
.js .werkplek .wp-hint { display: grid; justify-items: end; }
.js .werkplek :is(.wp-label, .wp-tijdje, .knop-akkoord, .wp-hint) > :is(.als-concept, .als-weg) { grid-area: 1 / 1; display: inline; }
.js .werkplek .als-weg { visibility: hidden; }
.js .werkplek[data-ak="4"] .als-concept { visibility: hidden; }
.js .werkplek[data-ak="4"] .als-weg { visibility: visible; }
.wp-voet { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; padding: 10px 22px 12px; border-top: 1px solid var(--lijn-nacht-fijn); }
.wp-bron { color: rgba(255, 255, 255, 0.58); }
.wp-opnieuw { flex: none; padding: 2px; white-space: nowrap; font-size: 13.5px; font-weight: 500; line-height: 1.3; color: var(--hemel); }
.wp-opnieuw:hover { color: #fff; }

@media (max-width: 1023px) {
  .akkoord-in { grid-template-columns: 1fr; row-gap: 40px; }
  .akkoord-tekst { max-width: 36em; }
}
@media (max-width: 639px) {
  /* Op de telefoon eerst de belofte, dan het venster. Daarin de vraag, dan wat de agent leest, dan het antwoord: de
     leeslijst staat als strook van twee kolommen direct onder de vraag. Het venster houdt vanaf het begin ruimte voor
     het antwoord, zodat de pagina eronder niet verspringt als het antwoord komt. */
  .akkoord { padding-top: 76px; }
  .akkoord-uitkomst { font-size: 18.5px; }
  .werkplek { border-radius: 18px; }
  .wp-kop { padding: 11px 16px; font-size: 12.5px; }
  .wp-kanaal-lang { display: none; }
  .wp-in { grid-template-columns: 1fr; }
  .wp-gesprek { display: contents; }
  .wp-naam { padding: 26px 16px 0; }
  .wp-bel { justify-self: start; max-width: calc((100% - 32px) * 0.96); margin: 12px 16px 16px; }
  .wp-bel p { font-size: 16px; }
  .lees-lijst { order: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding: 16px; border-left: 0; border-top: 1px solid var(--lijn-nacht); border-bottom: 1px solid var(--lijn-nacht); }
  .lees-lijst .lees-plan { grid-column: 1 / -1; }
  .lw { font-size: 14px; }
  .wp-uit { order: 2; padding: 16px; }
  .wp-antwoord-tekst { font-size: 15.5px; }
  .wp-voet { padding: 10px 16px 12px; }
}
/* ============ 9. Wat kost het: de vorm van inspo-tribe en Tribe, als tweede gepind gebaar ============ */
/* Breed staat de hele sectie stil (een spoor van een schermhoogte plus --prijs-d), smaller alleen de stapel. Vooraf ligt
   fase 01 open, een kaart van ongeveer 400 px; elke volgende fase komt van onder binnen, uit een zachte uitloop onder de
   open kaart, en schuift over het lijf van de vorige, waarvan de strook blijft staan. Elke fase krijgt ruim 250 px
   scroll. --pk-h en --knip zet pagina.js: de kaarthoogte (de langste inhoud, hooguit 400 px, passend in het scherm) en
   waar de stapel onderaan zacht uitloopt. */
.prijs { position: relative; z-index: 5; margin-top: -34px; border-radius: 34px 34px 0 0; background: var(--papier);
  --strook: 52px; --pk-h: 400px; --uitloop: 40px; --prijs-d: 1120px; --schaduw-x: min(48px, var(--rand));
  --stapel-h: calc(4 * var(--strook) + var(--pk-h) + var(--uitloop)); }
.prijs-spoor { position: relative; height: calc(100vh + var(--prijs-d)); height: calc(100svh + var(--prijs-d)); }
.prijs-vast { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-top: calc(var(--balk-h) * 0.55); }
.prijs-in { width: 100%; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "kop stapel" "som stapel"; column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.prijs-kop { grid-area: kop; }
.prijs-som { grid-area: som; }
.prijs-rechts { grid-area: stapel; align-self: center; }
.prijs-kop .intro { margin-top: 18px; max-width: 27em; }
.som { margin-top: 24px; font-size: 16.5px; line-height: 1.5; max-width: 26em; padding: 16px 18px; border-radius: 16px; background: var(--wit); box-shadow: inset 0 0 0 1px var(--lijn-fijn); transition: box-shadow 0.4s ease; }
/* Het somvak staat altijd op volle sterkte; de bedragen lichten op als de stapel compleet is. */
.som b { font-weight: 600; color: var(--blauw); padding: 0 3px; margin: 0 -3px; border-radius: 5px; transition: color 0.4s ease, background 0.4s ease; }
.js .som:not(.aan) b { color: var(--inkt); }
.som.aan b { background: rgba(96, 165, 250, 0.16); }
.som.aan { box-shadow: inset 0 0 0 1.5px var(--hemel), 0 18px 40px -26px rgba(37, 99, 235, 0.6); }
.prijs-bron { margin-top: 12px; }
.prijs-knop { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* De stapel: elke fase heeft zijn vaste plek, een strook onder de vorige. De stapel is rondom iets ruimer dan de kaarten
   (boven 40 px, opzij --schaduw-x), zodat de schaduwen binnen het masker vallen; onderaan loopt hij zacht uit. */
.stapel { position: relative; box-sizing: border-box; height: calc(40px + var(--stapel-h)); margin: 0 calc(-1 * var(--schaduw-x)); padding: 40px var(--schaduw-x) 0; list-style: none; }
.js .stapel { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(40px + var(--knip, 100%) - var(--uitloop)), transparent calc(40px + var(--knip, 100%))); mask-image: linear-gradient(180deg, #000 0, #000 calc(40px + var(--knip, 100%) - var(--uitloop)), transparent calc(40px + var(--knip, 100%))); }
.pk { position: absolute; left: var(--schaduw-x); right: var(--schaduw-x); top: calc(40px + var(--i) * var(--strook)); z-index: calc(var(--i) + 1); height: var(--pk-h); display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--wit); will-change: transform;
  box-shadow: 0 -14px 30px -22px rgba(15, 30, 70, 0.45), 0 30px 60px -40px rgba(15, 30, 70, 0.5), inset 0 0 0 1px rgba(11, 18, 32, 0.05); }
.strook { flex: none; height: var(--strook); display: flex; align-items: center; gap: 14px; padding: 0 22px; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.strook-nr { opacity: 0.66; }
.strook-naam { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strook-naam .status { margin-left: 10px; vertical-align: 1px; }
.strook-prijs { white-space: nowrap; }
/* De strook loopt de blauwtrap af, van licht naar inkt. */
.pk[data-fase="0"] .strook { background: var(--tint); color: var(--inkt); }
.pk[data-fase="1"] .strook { background: var(--hemel); color: var(--inkt); }
.pk[data-fase="2"] .strook { background: var(--blauw-helder); color: #fff; }
.pk[data-fase="3"] .strook { background: var(--blauw); color: #fff; }
.pk[data-fase="4"] .strook { background: var(--inkt); color: #fff; }
.pk[data-fase="4"] .status { color: var(--groen-licht); }
.pk[data-fase="4"] .status::before { background: var(--groen-licht); }
/* Het vinkje op de naad: als de volgende fase over het lijf schuift, zeg jij ja. Blauw (groen is alleen voor live). */
.strook-ja { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--blauw-diep); font-size: 12.5px; font-weight: 600; line-height: 1.2; box-shadow: 0 4px 10px -6px rgba(15, 30, 70, 0.5); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.strook-ja::before { content: ""; width: 15px; height: 15px; border-radius: 50%; background: var(--blauw) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15'%3E%3Cpath d='M4.6 7.7l2 2 3.9-4.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.js .strook-ja:not(.aan) { opacity: 0; transform: scale(0.6); }
.pk-lijf { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 28px 30px 24px; }
.pk-titel { font-family: var(--kop); font-weight: 500; font-size: clamp(26.5px, 2.2vw, 31px); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; max-width: 16em; }
.pk-tekst { margin-top: 14px; font-size: 16.5px; line-height: 1.5; color: var(--leisteen); max-width: 28em; }
.pk-krijg { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--lijn-fijn); color: var(--blauw); font-size: 14.5px; font-weight: 500; }

/* Zonder JavaScript: geen spoor en geen stapel, de vijf fases gewoon onder elkaar. */
.geen-js .prijs-spoor { height: auto; }
.geen-js .prijs-vast { position: static; height: auto; display: block; padding: 96px 0 72px; }
.geen-js .stapel { height: auto; display: grid; gap: 12px; padding-top: 0; }
.geen-js .pk { position: relative; top: auto; left: auto; right: auto; height: auto; }
.geen-js .pk-krijg { margin-top: 18px; }

@media (max-width: 1023px) {
  /* Smaller: de vraag erboven, dan alleen de stapel gepind (midden in beeld), en de som na de stapel. */
  .prijs-spoor { height: auto; }
  .prijs-vast { position: static; height: auto; display: block; padding: 80px 0 52px; }
  .prijs-in { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "kop" "stapel" "som"; row-gap: 28px; }
  .prijs-kop { max-width: 36em; }
  .prijs-som { max-width: 36em; }
  .prijs-som .som { margin-top: 0; }
  .prijs { --schaduw-x: min(16px, var(--rand)); }
  .prijs-rechts { max-width: 640px; width: 100%; height: calc(40px + var(--stapel-h) + var(--prijs-d)); }
  .js .stapel { position: sticky; top: max(calc(var(--balk-h) - 28px), calc(50svh + var(--balk-h) / 2 - (40px + var(--stapel-h)) / 2)); }
  .geen-js .prijs-rechts { height: auto; }
}
@media (max-width: 599px) {
  .prijs { --strook: 46px; }
  .strook { gap: 10px; padding: 0 16px; font-size: 14px; }
  .strook-lang { display: none; }
  .strook-ja { padding: 2px 8px 2px 3px; font-size: 12px; }
  .pk-lijf { padding: 20px 20px 16px; }
  .pk-titel { font-size: clamp(22px, 6.15vw, 25px); }
  .pk-tekst { font-size: 15px; margin-top: 10px; }
  .pk-krijg { padding-top: 10px; font-size: 13.5px; }
}

/* ============ 10. De vergelijking: warm papier, de kolom van Dailight als glaskaart in het ochtendlicht ============ */
/* Rijen zijn voordelen in lekentaal; drie tekens (ja, soms, meestal niet), alle drie getekend, geen streepjes als
   tekst. De rijen lichten één keer op van boven naar beneden; daarna gaat het licht in de glaskaart aan (pagina.js
   zet .wacht, .aan per rij en .klaar). Zonder JavaScript staat alles aan. */
.vergelijking { position: relative; z-index: 6; isolation: isolate; overflow: hidden; padding: clamp(28px, 3vw, 44px) 0 clamp(62px, 5vw, 74px); background: linear-gradient(180deg, var(--papier) 0, var(--papier-warm) 220px); }
/* Een baan zacht ochtendlicht die schuin op de kolom van Dailight valt, met de zon erboven buiten beeld. */
.vgl-licht { position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 220px); mask-image: linear-gradient(180deg, transparent 0, #000 220px); }
.vgl-licht::after { content: ""; position: absolute; right: -10%; top: -46%; width: 60%; height: 90%; background: radial-gradient(closest-side, rgba(255, 210, 140, 0.45), rgba(255, 210, 140, 0) 100%); }
/* De baan licht valt van rechtsboven op de glaskaart van Dailight, en wordt voller als de rijen klaar zijn. */
.vgl-baan { position: absolute; z-index: -2; right: -60px; width: calc(100% / 7 + 136px); top: calc(-1 * var(--vgl-boven, 320px)); bottom: 26%; transform: skewX(-14deg); transform-origin: 50% 100%; filter: blur(24px); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 196, 110, 0) 0%, rgba(255, 196, 110, 0.5) 36%, rgba(255, 206, 130, 0.36) 72%, rgba(255, 206, 130, 0) 100%); opacity: 0.7; transition: opacity 1.2s ease; }
.vgl.klaar .vgl-baan, .geen-js .vgl-baan { opacity: 1; }

.vgl-in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); column-gap: clamp(32px, 4.6vw, 72px); align-items: start; }
.vgl-links .kop { margin-top: 18px; } /* 28 oktober 2026: in de maat van .kop, één kopmaat over de pagina */
.vgl-links .intro { margin-top: 20px; }

.vgl { position: relative; isolation: isolate; }
.vgl-rij { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) repeat(4, minmax(0, 1fr)); align-items: center; min-height: 42px; border-bottom: 1px solid var(--lijn-fijn); overflow: hidden; }
.vgl-rij:last-child { border-bottom: 0; }
.vgl-koprij { min-height: 54px; align-items: end; padding-bottom: 11px; border-bottom: 1px solid var(--lijn); overflow: visible; }
.vgl-kol { padding: 0 4px; text-align: center; font-size: 13.5px; font-weight: 500; line-height: 1.25; color: var(--leisteen); text-wrap: balance; }
.vgl-wij { display: grid; justify-items: center; }
.vgl-wij img, .vgl-merk svg { margin: 0 auto 2px; }
.vgl-merk { display: none; color: var(--inkt); }
.js .vgl-merk { display: block; }
.js .vgl-merk-stil { display: none; }
.vgl-ico { display: block; width: 20px; height: 20px; margin: 0 auto 6px; fill: none; stroke: var(--mist); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.vgl-wat { padding: 9px 14px 9px 0; font-size: 15.5px; line-height: 1.3; color: var(--inkt); text-wrap: pretty; }
.vgl-cel { display: grid; justify-items: center; align-content: center; gap: 4px; padding: 7px 0; }
.vgl-kort { display: none; }

/* De tekens (22 oktober, op verzoek van Huub duidelijker): ja is een blauw rondje met een vinkje, soms is een licht rondje met een blauw vinkje (ja, met een voorwaarde), meestal niet is een grijs rondje met een kruisje. */
.m { position: relative; display: inline-block; flex: none; width: 20px; height: 20px; border-radius: 50%; }
.m-ja .m { background: var(--blauw); box-shadow: 0 5px 12px -5px rgba(37, 99, 235, 0.7); }
.m-ja .m::after { content: ""; position: absolute; left: 7px; top: 4.2px; width: 4.6px; height: 8.6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.m-soms .m { background: var(--tint); box-shadow: inset 0 0 0 1.5px var(--hemel); }
.m-soms .m::after { content: ""; position: absolute; left: 7px; top: 4.2px; width: 4.6px; height: 8.6px; border-right: 2px solid var(--blauw); border-bottom: 2px solid var(--blauw); transform: rotate(45deg); }
.m-nee .m { background: #e9edf3; box-shadow: inset 0 0 0 1.5px rgba(71, 85, 105, 0.22); }
.m-nee .m::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 4l6 6M10 4l-6 6' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 11px 11px no-repeat; }
.vgl-ons .m { width: 22px; height: 22px; }
.vgl-ons .m::after { left: 7.6px; top: 4.6px; width: 5px; height: 9.4px; }

/* De kolom van Dailight: een lichte glaskaart over de hele hoogte, met zonlicht aan de bovenrand. */
.vgl-kaart { position: absolute; z-index: -1; top: -12px; bottom: -8px; right: -8px; width: calc(100% / 7 + 16px); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 252, 246, 0.86));
  box-shadow: 0 30px 60px -36px rgba(37, 99, 235, 0.5), 0 2px 10px -4px rgba(30, 22, 10, 0.12), inset 0 0 0 1px rgba(96, 165, 250, 0.42), inset 0 1px 0 #fff;
  transition: background 0.7s ease, box-shadow 0.7s ease; }
.vgl-kaart::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(130% 34% at 50% 0%, rgba(255, 220, 156, 0.62), rgba(255, 220, 156, 0) 72%); transition: opacity 0.9s ease 0.1s; }

/* Het oplichten: één veeg van warm licht over de rij, de tekens springen aan. */
.vgl-rij:not(.vgl-koprij)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255, 226, 170, 0) 0%, rgba(255, 226, 170, 0.62) 55%, rgba(255, 226, 170, 0) 100%); }
.vgl-rij.aan::after { animation: vgl-veeg 0.95s cubic-bezier(0.3, 0.6, 0.3, 1) 1; }
@keyframes vgl-veeg { 0% { opacity: 1; transform: translateX(-100%); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
.vgl .m, .vgl .vgl-wat { transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.3), color 0.35s ease; }
.js .vgl.wacht .vgl-rij:not(.vgl-koprij):not(.aan) .m { opacity: 0.16; transform: scale(0.7); }
.js .vgl.wacht .vgl-rij:not(.vgl-koprij):not(.aan) .vgl-wat { color: var(--mist); }
.js .vgl.wacht .vgl-rij.aan .vgl-cel:nth-child(3) .m { transition-delay: 0.06s; }
.js .vgl.wacht .vgl-rij.aan .vgl-cel:nth-child(4) .m { transition-delay: 0.12s; }
.js .vgl.wacht .vgl-rij.aan .vgl-cel:nth-child(5) .m { transition-delay: 0.18s; }
.js .vgl.wacht:not(.klaar) .vgl-kaart { background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.06); }
.js .vgl.wacht:not(.klaar) .vgl-kaart::before { opacity: 0; }

.vgl-voet { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.vgl-legenda { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--leisteen); }
.vgl-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.vgl-legenda .m { width: 16px; height: 16px; }
.vgl-legenda .m-ja .m::after, .vgl-legenda li.m-ja .m::after { left: 5.6px; top: 3.2px; width: 3.8px; height: 7px; border-width: 1.7px; }
.vgl-legenda li.m-soms .m::after { left: 5.6px; top: 3.2px; width: 3.8px; height: 7px; border-width: 1.7px; }
.vgl-legenda li.m-nee .m::after { background-size: 9px 9px; }
.vgl-noot { font-size: 12.5px; color: var(--mist); }

@media (max-width: 1100px) {
  .vgl-in { grid-template-columns: 1fr; row-gap: 34px; }
  .vgl-links { max-width: 720px; }
}
/* Telefoon: elke rij een stapel. Bovenaan wat je bereikt, daaronder vier tekens met hun naam; Dailight in glas. */
@media (max-width: 639px) {
  .vgl-koprij { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .vgl-kaart, .vgl-baan { display: none; }
  .vgl-rij { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 4px; row-gap: 8px; padding: 12px 0 13px; }
  .vgl-wat { grid-column: 1 / -1; padding: 0; font-size: 15.5px; font-weight: 500; }
  .vgl-cel { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 2px; border-radius: 999px; }
  .vgl-cel .m { width: 18px; height: 18px; }
  .vgl-cel.m-ja .m::after { left: 6.2px; top: 3.6px; width: 4.2px; height: 7.8px; border-width: 1.8px; }
  .vgl-cel.m-soms .m::after { left: 6.2px; top: 3.6px; width: 4.2px; height: 7.8px; border-width: 1.8px; }
  .vgl-cel.m-nee .m::after { background-size: 10px 10px; }
  .vgl-kort { display: block; font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--mist); white-space: nowrap; }
  .vgl-ons { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 252, 246, 0.88)); box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.45), 0 10px 22px -16px rgba(37, 99, 235, 0.6); transition: background 0.6s ease, box-shadow 0.6s ease; }
  .vgl-ons .vgl-kort { color: var(--blauw); }
  .js .vgl.wacht:not(.klaar) .vgl-ons { background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.06); }
  .vgl-voet { margin-top: 18px; flex-direction: column; align-items: flex-start; }
  .vgl-legenda { flex-direction: column; gap: 8px; }
}
/* ============ 11. Klaar om je handwerk over te dragen: stof in zonlicht, in kennismaken.css ============ */
/* ============ 12. Wat klanten zeggen: het blauwe uur uit code ============ */
/* Het nachtblauw schuift met een ronde rand over het warme papier: de overgang loopt via de nacht, zonder band. */
.citaat { position: relative; z-index: 8; isolation: isolate; overflow: hidden; margin-top: -34px; border-radius: 34px 34px 0 0; color: #fff; padding: clamp(96px, 8.4vw, 120px) 0 clamp(64px, 5.6vw, 80px);
  background: linear-gradient(180deg, #0a1229 0%, #0f1d47 38%, #1a367f 64%, #2448a0 72%, #1a2c66 80%, #111d40 90%, #0f1832 100%); box-shadow: 0 -24px 50px -30px rgba(10, 18, 41, 0.5); }
.citaat-lucht { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 200px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 200px), transparent 100%); }
/* De laatste gloed boven de horizon, rechts onderin, en een zachte lichtere band waar de lucht de horizon raakt. */
/* De horizon ligt op ruim tweederde: daar is de lucht het lichtst, met de laatste warme gloed; eronder is het land al nacht. */
.cl-gloed { position: absolute; left: 0; right: 0; top: 46%; height: 34%; background: radial-gradient(40% 60% at 74% 82%, rgba(255, 178, 130, 0.42), rgba(255, 178, 130, 0.12) 50%, rgba(255, 178, 130, 0) 76%), radial-gradient(80% 50% at 50% 84%, rgba(130, 168, 245, 0.36), rgba(130, 168, 245, 0) 72%); }
/* De eerste sterren: een paar kleine lichtpunten bovenin, vast verspreid. */
.cl-sterren { position: absolute; left: 0; right: 0; top: 0; height: 58%; opacity: 0.85;
  background-image: radial-gradient(1.2px 1.2px at 12% 22%, #fff 99%, transparent), radial-gradient(1px 1px at 27% 64%, rgba(255, 255, 255, 0.8) 99%, transparent), radial-gradient(1.4px 1.4px at 41% 14%, #fff 99%, transparent),
    radial-gradient(1px 1px at 58% 38%, rgba(255, 255, 255, 0.7) 99%, transparent), radial-gradient(1.6px 1.6px at 69% 18%, #fde68a 99%, transparent), radial-gradient(1px 1px at 81% 52%, rgba(255, 255, 255, 0.75) 99%, transparent),
    radial-gradient(1.2px 1.2px at 90% 26%, #fff 99%, transparent), radial-gradient(1px 1px at 6% 70%, rgba(255, 255, 255, 0.6) 99%, transparent), radial-gradient(1px 1px at 50% 80%, rgba(255, 255, 255, 0.5) 99%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%); mask-image: linear-gradient(180deg, #000 30%, transparent 100%); }
.citaat .korrel { opacity: 0.1; }
.citaat-in { position: relative; z-index: 1; }
.citaat .label { color: var(--hemel); }
.citaat .label::before { box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16); }
.citaat-blok { margin: 22px 0 0; max-width: 27em; font-family: var(--kop); font-weight: 500; font-size: clamp(27px, 2.9vw, 42px); line-height: 1.08; text-wrap: balance; letter-spacing: -0.025em; }
.citaat-regel + .citaat-regel { margin-top: 0.22em; }
.citaat-regel:nth-child(2) { padding-left: 1.2em; }
.citaat-regel:nth-child(3) { padding-left: 2.4em; }
.citaat-bron { margin-top: 30px; display: inline-flex; align-items: center; gap: 12px; padding: 9px 16px 9px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.cb-teken { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); color: #bfdbfe; font-family: var(--kop); font-size: 30px; line-height: 1; padding-top: 9.5px; }
.citaat-bron b { display: block; font-size: 14px; font-weight: 600; }
.citaat-bron small { font-size: 12.5px; color: rgba(255, 255, 255, 0.62); }
.citaat-belofte { margin-top: clamp(40px, 5vw, 70px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); max-width: 34em; font-family: var(--kop); letter-spacing: -0.015em; font-weight: 400; font-size: clamp(23px, 2.1vw, 31.5px); line-height: 1.12; color: #fff; }
.citaat-belofte span { color: rgba(255, 255, 255, 0.66); }
.citaat-belofte em { color: #ffdc9a; }
.js [data-citaat] { opacity: var(--cq, 1); transform: translateY(calc((1 - var(--cq, 1)) * 14px)); }
@media (max-width: 819px) {
  .citaat { border-radius: 26px 26px 0 0; margin-top: -26px; padding-top: 80px; }
}
@media (max-width: 639px) {
  .citaat-regel:nth-child(2), .citaat-regel:nth-child(3) { padding-left: 0; }
  .citaat-blok { font-size: clamp(24px, 6.5vw, 27px); }
}

/* ============ 14. Een AI-studio uit Almere: inkt in het blauwe uur, uit code ============ */
.studio { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, #0f1832 0%, #101c3c 40%, #0d1631 100%); color: #fff; padding: clamp(88px, 7.6vw, 108px) 0 clamp(64px, 6vw, 84px); }
.studio-lucht { position: absolute; inset: 0; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 170px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 160px, #000 calc(100% - 170px), transparent 100%); }
/* Het eerste licht trekt rechtsboven door de lucht: een brede blauwe gloed met een warme kern, en een lichtere band
   waar straks de horizon komt. Het glas van de kaarten heeft zo iets om te breken. */
.sl-licht { position: absolute; right: -12%; top: -38%; width: 78%; height: 120%; background: radial-gradient(closest-side, rgba(96, 140, 230, 0.55), rgba(70, 110, 210, 0.22) 46%, rgba(60, 100, 200, 0) 100%); }
.sl-licht::after { content: ""; position: absolute; left: 42%; top: 40%; width: 26%; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 206, 160, 0.4), rgba(255, 206, 160, 0) 100%); filter: blur(10px); }
.sl-band { position: absolute; left: -10%; right: -10%; top: 58%; height: 26%; background: radial-gradient(60% 50% at 70% 50%, rgba(120, 160, 240, 0.16), rgba(120, 160, 240, 0) 70%); }
.studio .korrel { opacity: 0.1; }
.studio .label { color: var(--hemel); }
.studio .label::before { box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.16); }
.studio-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.86fr); column-gap: clamp(32px, 6vw, 96px); align-items: end; }
.studio .kop { color: #fff; font-size: clamp(30px, 3.55vw, 52px); }
.studio .intro { color: rgba(255, 255, 255, 0.84); margin-top: 18px; max-width: 28em; }
.studio-staan { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; max-width: 34em; }
.studio-staan li { display: grid; gap: 3px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.studio-staan b { font-size: 15px; font-weight: 600; }
.studio-staan span { font-size: 14px; color: rgba(255, 255, 255, 0.68); line-height: 1.4; }
.studio-rechts { display: grid; gap: 14px; }
.studio-werk { --glas: rgba(255, 253, 248, 0.86); border-radius: 20px; padding: 18px 20px 20px; color: var(--inkt); }
.sw-kop { font-size: 16px; line-height: 1.4; }
.sw-kop b { font-weight: 600; }
.sw-kop .bron { margin-left: 6px; }
.sw-lijst { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.sw-lijst li { padding: 6px 12px; border-radius: 999px; background: var(--wit); box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.08); font-size: 13.5px; font-weight: 500; }
.makers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.maker { --glas: rgba(255, 253, 248, 0.86); border-radius: 18px; padding: 14px; color: var(--inkt); display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 10px; align-items: center; }
.mk-foto { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #dbe8ff, #93b7fb); color: var(--blauw-diep); font-weight: 700; font-size: 17px; }
.mk-leeg { background: repeating-linear-gradient(135deg, #eef2f7 0 6px, #e2e8f0 6px 12px); }
.mk-wie b { display: block; font-size: 15px; font-weight: 600; }
.mk-wie small { font-size: 12.5px; color: var(--mist); }
.mk-tijd { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--leisteen); font-variant-numeric: tabular-nums; padding-top: 10px; border-top: 1px solid var(--lijn-fijn); }
.mk-tijd::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--groen); }
.mk-klok { color: var(--inkt); font-weight: 600; }
@media (max-width: 1023px) {
  .studio-in { grid-template-columns: 1fr; row-gap: 40px; }
}
@media (max-width: 599px) {
  .studio-staan { grid-template-columns: 1fr; gap: 12px; }
  .makers { grid-template-columns: 1fr 1fr; gap: 10px; }
  .maker { padding: 12px; grid-template-columns: 1fr; }
}

/* ============ 10b. De zin in het licht: het eerste licht door een raam, op een donkere muur ============ */
/* Een band van ruim een halve schermhoogte rust (een schermhoogte min 340 px, minstens 520 px), zodat de zin in het
   midden van het beeld zijn eigen moment heeft zonder dat de pagina lang wordt. De zin staat als donkere letters op de muur (vermenigvuldigd met wat eronder
   ligt): in het donker zie je hem nauwelijks, in het licht staat hij scherp. Het raam is gemeten aan de zin zelf, dus
   op elk scherm valt het hoofdvak precies om de zin. pagina.js zet --zx (waar het licht staat) en --zo (hoe sterk). */
.zin { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 560px; min-height: max(520px, calc(100svh - 340px)); padding: 80px var(--rand); background: #0f1832; }
.zin-muur { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, #0f1832 0%, rgba(15, 24, 50, 0) 22%, rgba(15, 24, 50, 0) 78%, #0f1832 100%), radial-gradient(80% 70% at 50% 54%, #1c2746 0%, #141e3a 54%, #0f1832 100%); }
.zin-hart { position: relative; }
/* Het raam: een hoofdvak om de zin, twee smalle zijramen en een bovenlicht, scheef op de muur zoals laag licht valt. */
.zin-licht { position: absolute; inset: -46px -54px; z-index: -1; pointer-events: none; opacity: var(--zo, 1); transform: translateX(var(--zx, 0px)) skewX(-12deg); filter: blur(8px); }
.zl-ruit { position: absolute; border-radius: 4px; background: linear-gradient(162deg, #fff1d8 0%, #ffe0b4 46%, #f8c890 100%); }
.zl-hoofd { inset: 0; }
.zl-links, .zl-rechts { top: 0; bottom: 0; width: 18%; }
.zl-links { right: calc(100% + 18px); }
.zl-rechts { left: calc(100% + 18px); }
.zl-boven, .zl-boven-l, .zl-boven-r { bottom: calc(100% + 18px); height: 32%; }
.zl-boven { left: 0; right: 0; }
.zl-boven-l { right: calc(100% + 18px); width: 18%; }
.zl-boven-r { left: calc(100% + 18px); width: 18%; }
.zl-links, .zl-rechts, .zl-boven-l, .zl-boven-r { background: linear-gradient(162deg, #ffe9c8 0%, #f7cf9c 60%, #eeb57e 100%); opacity: 0.9; }
.zl-gloed { position: absolute; inset: -55% -38%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 136, 0.28), rgba(255, 196, 136, 0.08) 55%, rgba(255, 196, 136, 0)); }
.zin > .korrel { z-index: 1; opacity: 0.14; }
.licht-zin { position: relative; max-width: 15.5em; text-align: center; font-family: var(--kop); font-weight: 500; font-size: clamp(36px, 4.65vw, 107px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; color: #241a13; mix-blend-mode: multiply; }
@media (min-width: 640px) and (max-width: 1023px) {
  .licht-zin { font-size: 5.7vw; }
}
@media (max-width: 639px) {
  .zin { padding: 64px var(--rand); }
  .zin-licht { inset: -30px -24px; transform: translateX(var(--zx, 0px)) skewX(-9deg); filter: blur(6px); }
  .zl-links, .zl-rechts, .zl-boven-l, .zl-boven-r { width: 22%; }
  .zl-links { right: calc(100% + 12px); }
  .zl-rechts { left: calc(100% + 12px); }
  .zl-boven, .zl-boven-l, .zl-boven-r { bottom: calc(100% + 12px); height: 24%; }
  .zl-boven-l { right: calc(100% + 12px); }
  .zl-boven-r { left: calc(100% + 12px); }
  .licht-zin { font-size: clamp(33px, 9.4vw, 40px); line-height: 1.08; }
}
/* ============ 15. De voet, uit spoor technisch: het woordmerk met de zon van tekens, boven de kaart van de site ============ */
/* Sinds 25 oktober 2026 (15:30) op het papier van de pagina, in het thema van de rest (Huub: "raar dat alles in het wit is en dit
   dan ineens in het donker"); daarvoor de nacht. Het woordmerk staat bovenaan, met de horizon op de voetlijn van de letters;
   daaronder ligt de grond van de nacht met de belofte en de kaart van de site. */
.voet { position: relative; z-index: 6; overflow: hidden; color: var(--inkt); background: var(--papier-warm); }
.voet { padding-bottom: clamp(36px, 3.6vw, 52px); } /* sinds 25 oktober 2026 is de voet alleen het woordmerk: een band onder de horizon voor de gloed van de zon */
/* Het woordmerk met de zon erachter: voet.js zet de band van de zon achter de A en de I, met de horizon op de voetlijn,
   en geeft via --voet-zon-boven aan hoeveel ruimte de corona boven de letters nodig heeft. */
.voet-merk { position: relative; margin-top: calc(clamp(14px, 1.6vw, 24px) + var(--voet-zon-boven, 0px)); padding: 0 var(--rand); }
.voet-merk svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.voet-zon-vak { position: absolute; z-index: 0; pointer-events: none; }
.voet-zon { position: absolute; inset: 0; --zon-demping: 0 0.06; }
.voet-gloed { position: absolute; bottom: 0; opacity: 0; background: radial-gradient(50% 100% at 50% 100%, rgba(253, 214, 150, 0.6), rgba(253, 230, 190, 0.28) 34%, rgba(147, 197, 253, 0.12) 52%, rgba(255, 255, 255, 0) 76%); }
.voet-merk-stil { display: none; }
.geen-js .voet-merk { margin-top: clamp(56px, 6vw, 88px); }
.geen-js .voet-merk-stil { display: block; width: 100%; height: auto; opacity: 0.9; margin-bottom: -4%; }

/* Onder de horizon: de belofte en de kaart van de site, met de onderregel. */
.voet-in { position: relative; padding-top: clamp(40px, 3.6vw, 52px); }
.voet-boven { display: grid; grid-template-columns: minmax(0, 1.45fr) repeat(4, minmax(0, 1fr)); gap: 32px; align-items: start; }
.voet-zin { font-family: var(--kop); font-weight: 500; font-size: clamp(34px, 3.2vw, 46.5px); line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; max-width: 9.5em; }
.voet-knop { margin-top: 22px; }
.voet-klein { margin-top: 12px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.62); max-width: 24em; text-wrap: pretty; }
.voet-kolom { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; min-width: 0; padding-top: 4px; font-size: 15px; line-height: 1.3; color: rgba(255, 255, 255, 0.78); }
.voet-kolom a { transition: color 0.2s ease; }
.voet-kolom a:hover { color: var(--hemel); }
.voet-label { font-size: 13.5px; font-weight: 500; color: var(--hemel); margin-bottom: 4px; }
.voet-onder { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: clamp(36px, 3.4vw, 48px); padding: 18px 0 24px; border-top: 1px solid var(--lijn-nacht-fijn); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.5); }

@media (max-width: 1199px) {
  .voet-boven { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 44px; }
  .voet-belofte { grid-column: 1 / -1; }
}
@media (max-width: 819px) {
  .voet-merk { margin-top: calc(28px + var(--voet-zon-boven, 0px)); padding: 0; }
  .voet-boven { gap: 36px 20px; }
  .voet-kolom { font-size: 14.5px; }
}
@media (max-width: 599px) {
  .voet-boven { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .voet-kolom { font-size: 15px; }
}
@media (max-width: 599px) {
  .voet-zin { font-size: 35px; }
  .voet-in { padding-top: 40px; }
  .voet-onder { flex-direction: column; gap: 4px; margin-top: 40px; padding-bottom: 26px; }
}

/* ============ Op het veld: de lichte secties zijn doorzichtig (27 oktober 2026) ============
   Huub: "die witte achtergrond met die puntjes over de hele website". Het papier van de lichte secties gaat weg, zodat het
   veld en het raster erdoor komen; kaarten, vensters, vellen en tegels blijven wit en zweven erop. Het warme licht van
   de vergelijking, het kennismaken en de voet komt nu uit het thema goud van het veld. De vellen die met een ronde rand
   over de vorige sectie schoven (trechter, akkoord, prijs), liggen nu gewoon op het veld; de overlap van het akkoord en
   de prijs (34 px) blijft, zodat de maten van de pagina niet verschuiven. Het aanbod staat sinds 20:48 ook licht op het
   veld (aanbod.css, deel "Op het veld"); daarom schuift de trechter er niet meer overheen. */
.op-veld .blad, .op-veld .koppel, .op-veld .vergelijking, .op-veld .st-sectie, .op-veld .voet { background: transparent; }
.op-veld .trechter { margin-top: 0; border-radius: 0; box-shadow: none; }
.op-veld .akkoord, .op-veld .prijs { border-radius: 0; box-shadow: none; }
/* De heuvels van de koppelingen lossen ook onderaan op in het veld, in plaats van af te breken op de rand van de sectie.
   Daarom doven de tegels uit onder de horizon, waar de heuvels nog dicht zijn (de horizon ligt op 36 procent van de band,
   de tegels zijn weg op 56 procent, de heuvels lossen op vanaf 64 procent): wat achter de heuvels langs draait, komt er
   onderaan niet meer onder vandaan. */
/* Het masker ligt op een ruim vak rond de ringen (de lijst van tegels, die anders geen maat heeft), zodat de tegels aan
   de zijkanten gewoon tot de rand van het scherm blijven lopen. Het middelpunt blijft waar het was; de horizon ligt in
   dat vak (--s) plus de horizon min het middelpunt, gedeeld door --k (de lijst schaalt op de telefoon in de hoogte). */
.op-veld .koppel-tegels { --s: calc(var(--R) * 1.4 + var(--tg)); width: calc(2 * var(--s)); height: calc(2 * var(--s)); margin: calc(-1 * var(--s)) 0 0 calc(-1 * var(--s)); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(var(--s) + (var(--hor) - var(--off)) / var(--k)), transparent calc(var(--s) + (var(--hor) - var(--off) + var(--hv) * 0.2) / var(--k)));
  mask-image: linear-gradient(180deg, #000 calc(var(--s) + (var(--hor) - var(--off)) / var(--k)), transparent calc(var(--s) + (var(--hor) - var(--off) + var(--hv) * 0.2) / var(--k))); }
.op-veld .kt { left: 50%; top: 50%; pointer-events: auto; }
.op-veld .koppel-heuvels { -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.35) 14%, rgba(0, 0, 0, 0.85) 26%, #000 36%, #000 64%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, 0.35) 14%, rgba(0, 0, 0, 0.85) 26%, #000 36%, #000 64%, transparent 100%); }
/* De tekst op het veld. Op papier (#fbfcfe) haalden het blauw van de labels, het leisteen van de intro's en de mist van
   de bronregels 4,6 tot 7,3; op het diepere wit met de blauwe vormen en het raster eronder zakten ze tot 2,6 tot 4,3
   (de slechtste pixel onder de tekst, gemeten met _bouw/controle-veld.cjs). Daarom zijn ze in de lichte secties een
   tint donkerder: leisteen #374151 (was #475569), mist #3a4456 (was #64748b; zo dicht bij leisteen omdat de kleine
   bronregels anders op de diepste blauwe vorm onder 4,5 zakten) en de labels in een diep blauw, #1d3ca6 (was #2563eb).
   Ook in de kaarten erbinnen, waar het op wit alleen iets steviger leest. */
.op-veld :is(.aanbod, .trechter, .diensten, .agent, .koppel, .akkoord, .prijs, .vergelijking, .st-sectie, .voet) { --leisteen: #374151; --mist: #3a4456; }
.op-veld :is(.aanbod, .trechter, .diensten, .agent, .koppel, .akkoord, .prijs, .vergelijking, .st-sectie) .label { color: #1d3ca6; }
/* Het eerlijkheidslabel van de koppelingen staat op de foto van de heuvels: daar een licht pilletje van glas onder, zodat
   het op elk groen leesbaar blijft. */
.op-veld .koppel-noot { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--rand)); padding: 5px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #1d2a12; text-shadow: none; }
.op-veld .koppel .intro { color: var(--leisteen); }
/* "Almere" in de balk: het lichte glas laat het veld door, dus ook hier een tint donkerder. */
.op-veld .pill-klok { color: #566275; }
.op-veld.balk-donker .pill-klok { color: rgba(255, 255, 255, 0.58); }

/* ============ Geen donkere blokken meer (27 oktober 2026, 20:48) ============
   Besluit 14 van BRIEF-veld-mix.md: één stijl over de hele pagina, op het veld met het raster als de ene grond; witte
   kaarten en vensters die erop zweven, inkt alleen als accent (de tekst, de knoppen, de kaart van leads, het pilletje
   "Jouw bedrijf"). Hier de motorkap (3), het venster van het akkoord (8) en de strook van fase 05 (9); het aanbod in
   aanbod.css, de podia van de agent in agent.css. Elke kaart krijgt de schaduw en de dunne rand van de dienstenkaarten. */

/* 3. De motorkap: een witte kaart. Als het licht onderaan is (de klasse aan), komt er een zachte gloed van blauw en goud
   van boven in, en worden de vijf vakken blauw omrand, zoals eerst op het inkt. */
.op-veld .motorkap { background: #fff; color: var(--inkt); box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(11, 18, 32, 0.06); }
.op-veld .motorkap::before { background: radial-gradient(60% 120% at 50% -20%, rgba(245, 158, 11, 0.16), rgba(59, 130, 246, 0.1) 45%, rgba(255, 255, 255, 0) 75%); }
.op-veld .motorkap-kop { border-bottom-color: var(--lijn); }
.op-veld .motorkap-kop .label-sm { color: #1d3ca6; }
.op-veld .motorkap-rij li { background: #f6f8fc; box-shadow: inset 0 0 0 1px rgba(11, 18, 32, 0.06); }
.op-veld .motorkap-rij b { color: var(--inkt); }
.op-veld .motorkap-rij span { color: var(--leisteen); }
.op-veld .motorkap.aan .motorkap-rij li { background: #f1f6ff; box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.4); }

/* 8. Het venster van het akkoord: wit, met een lichte kopbalk zoals de browsers in de aanbodkaarten. Het gesprek op
   lichtgrijs, het antwoord blijft blauw, de kaders en nummers in de blauwtrap. */
.op-veld .werkplek { color: var(--inkt); background: #fff; box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(11, 18, 32, 0.06); }
.op-veld .werkplek :focus-visible { outline-color: var(--blauw); }
.op-veld .wp-kop { color: var(--mist); border-bottom-color: var(--lijn); background: linear-gradient(180deg, #f6f7f9, #f1f3f6); }
.op-veld .wp-titel { color: var(--inkt); }
.op-veld .wp-naam { color: var(--leisteen); }
.op-veld .wp-bel { background: #f1f3f6; border-color: rgba(11, 18, 32, 0.06); }
.op-veld .wp-bel .wp-tijdje { color: var(--mist); }
.op-veld .wp-hint { color: var(--leisteen); }
.op-veld .werkplek[data-ak="3"] .knop-akkoord { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hemel), 0 12px 30px -10px rgba(37, 99, 235, 0.9); }
.op-veld .werkplek[data-ak="4"] .knop-akkoord, .op-veld.geen-js .werkplek .knop-akkoord, .geen-js .op-veld .werkplek .knop-akkoord { background: var(--tint); color: var(--blauw-diep); box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3); }
.op-veld .gz { box-shadow: inset 0 0 0 1.5px var(--blauw-helder); }
.op-veld .gz-n { box-shadow: 0 0 0 2px #fff; }
.js .op-veld .werkplek .gz { box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, 0); }
.js .op-veld .werkplek .gz.gelezen, .js .op-veld .werkplek[data-ak="4"] .gz { box-shadow: inset 0 0 0 1.5px var(--blauw-helder); }
.js .op-veld .werkplek .gz.aan { background: rgba(96, 165, 250, 0.18); box-shadow: inset 0 0 0 2px var(--blauw-helder); }
.op-veld .lees-lijst { border-left-color: var(--lijn); background: #f8f9fb; }
.op-veld .lees-lijst .b-plan { box-shadow: inset 0 0 0 1.5px var(--blauw-helder); }
.op-veld .lees-lijst .b-plan::after { background: linear-gradient(var(--blauw-helder), var(--blauw-helder)) 0 0 / 100% 3px no-repeat; }
.op-veld .lk { color: var(--mist); }
.op-veld .lw { color: var(--inkt); }
.op-veld .lees-plan .lw { color: var(--blauw-diep); }
.op-veld .wp-voet { border-top-color: var(--lijn-fijn); }
.op-veld .wp-bron { color: var(--mist); }
.op-veld .wp-opnieuw { color: var(--blauw-diep); }
.op-veld .wp-opnieuw:hover { color: var(--blauw); }
@media (max-width: 639px) { .op-veld .lees-lijst { border-top-color: var(--lijn); border-bottom-color: var(--lijn); } }

/* 9. De stroken van de prijsstapel lopen van licht naar diep blauw; de laatste (05, beheer) was inkt en is nu het diepe
   blauw, zodat de trap in de blauwtrap blijft en er geen zwart vlak in de stapel staat. */

/* ============ Kleur en leven (27 oktober 2026, 20:57) ============
   Besluit 17 van BRIEF-veld-mix.md: geen donkere blokken, wel kleur. Eén palet over de hele pagina (inkt, de blauwtrap,
   wit en één warm accent, het ochtendlicht), in de gronden van de dienstenkaarten; het aanbod in aanbod.css, het podium
   van de agent in agent.css. */

/* 3. De motorkap: wit dat onderaan in hemelblauw overloopt, zoals de recruitmentkaart. */
.op-veld .motorkap { background: radial-gradient(70% 90% at 50% 120%, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0) 70%), linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #f2f7ff 100%); }

/* 8. Het akkoord: de kolom met wat de agent leest op een zacht hemelblauw, zodat het venster twee kanten heeft (het
   gesprek op wit, het begrip in blauw). */
.op-veld .lees-lijst { background: radial-gradient(90% 60% at 100% 0%, rgba(191, 219, 254, 0.7), rgba(191, 219, 254, 0) 70%), linear-gradient(180deg, #f5f9ff 0%, #e9f1ff 100%); border-left-color: rgba(37, 99, 235, 0.12); }

/* 9. De prijs: de som op ochtendlicht naar hemelblauw, en elke fasekaart met onderaan een zweem van de kleur van haar
   strook, zodat de stapel van licht naar blauw loopt. */
.op-veld .som { background: radial-gradient(80% 120% at 0% 100%, rgba(255, 214, 150, 0.45), rgba(255, 214, 150, 0) 62%), linear-gradient(150deg, #f6f9ff 0%, #eef4ff 60%, #fdf7ee 100%); box-shadow: var(--kaart-schaduw), inset 0 0 0 1px rgba(255, 255, 255, 0.8); }
.op-veld .som.aan { box-shadow: inset 0 0 0 1.5px var(--hemel), 0 18px 40px -26px rgba(37, 99, 235, 0.6); }
.op-veld .pk[data-fase="0"] .pk-lijf { background: linear-gradient(180deg, #ffffff 50%, #f4f8ff 100%); }
.op-veld .pk[data-fase="1"] .pk-lijf { background: linear-gradient(180deg, #ffffff 45%, #eef4ff 100%); }
.op-veld .pk[data-fase="2"] .pk-lijf { background: radial-gradient(80% 60% at 100% 110%, rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0) 70%), linear-gradient(180deg, #ffffff 45%, #ecf3ff 100%); }
.op-veld .pk[data-fase="3"] .pk-lijf { background: radial-gradient(80% 60% at 100% 110%, rgba(59, 130, 246, 0.26), rgba(59, 130, 246, 0) 70%), linear-gradient(180deg, #ffffff 45%, #e8f0ff 100%); }
.op-veld .pk[data-fase="4"] .pk-lijf { background: radial-gradient(80% 60% at 0% 110%, rgba(255, 214, 150, 0.4), rgba(255, 214, 150, 0) 66%), radial-gradient(70% 60% at 100% 110%, rgba(59, 130, 246, 0.24), rgba(59, 130, 246, 0) 70%), linear-gradient(180deg, #ffffff 45%, #f1f5ff 100%); }
.op-veld .som b { color: var(--blauw-diep); }
.op-veld .pk-krijg { color: var(--blauw-diep); }
/* De blauwtrap van de stroken één tree dieper: wit op het heldere blauw van fase 03 haalde 3,68. Nu 01 tint, 02 hemel,
   03 blauw, 04 diep blauw, 05 het nachtblauw van de huisstijl (#233f86, geen inkt). "Live" op die strook in het groen
   dat de huisstijl op donker voorschrijft (#34d399). */
.op-veld .pk[data-fase="2"] .strook { background: var(--blauw); }
.op-veld .pk[data-fase="3"] .strook { background: var(--blauw-diep); }
.op-veld .pk[data-fase="4"] .strook { background: #233f86; }
.op-veld .pk[data-fase="4"] .status { color: var(--groen-licht); }