/* diensten.css: sectie 4 van de mix, wat we bouwen (21 oktober 2026). Gemaakt door
   ../diensten-samenstelling/_bouw/naar-mix.mjs uit de samenstelling: pas daar de kaarten of de modules aan en draai het
   script opnieuw, niet dit bestand. De opmaak van de kaarten (.diensten, .dk-*, .dienst-*) blijft uit stijl.css; hier
   staan de regels van de vier kaarten, elk onder hun eigen wortelklasse (planning: kt-, recruitment: .kr-kaart, leads:
   .dk-leads, iOS: .dk-ios met ko-), de plek van leads in het raster en de kleine levende details van de drie kleine
   diensten. De lijnen van licht en de parels tekent de motor (motor.css en motor.js, met zon: null). */

/* ======================================================================
   Kaart planning (planning.css van de samenstelling)
   ====================================================================== */
/* module-planning/kaart.css: de grote kaart Planning en roosters in de taal van de AI-tegel (21 oktober 2026).
   De dagtegel van woensdag 21, groot (porselein met een blauwe band, drie regels met vinkjes), linksonder in de kaart
   (keuze van Huub, 21:35: zo staan de AI-tegel en de dagtegel niet allebei rechtsonder), met dunne lijnen van licht met
   rechte hoeken die van rechts en van de bovenrand rechts de tegel in lopen. Op de telefoon staat de tegel in het midden.
   De opmaak van de kaart zelf (.dk, .dk-planning, .dk-tekst, .dk-beeld) komt uit ../spoor-mix/stijl.css. Alle regels
   staan onder de eigen wortelklasse .ko-kaart-planning; geen body- of paginaregels.

   Recht: geen rotate, skew, perspective of 3D. Diepte alleen door schaduw en licht. Geen zon. Alles wat zweeft staat
   minstens 24 px van naam, zin en knop. Zonder JavaScript is dit het eindbeeld. */

.ko-kaart-planning .kp-film { position: absolute; inset: 0; pointer-events: none; font-family: var(--tekst); color: var(--inkt); container: ko-plan / size;
  --kp-haak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.4 2.4 4.5-5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ============ De maat ============
   Breed en half: de tegel links (gelijk met de tekst), 3 px onder de bovenrand van het beeldvak (dus ruim 24 px onder
   de knop) en helemaal binnen de kaart: zijn onderkant blijft 18 px boven de onderrand, zodat ook zijn schaduw
   te zien is (Huub, 22 oktober 09:15: "die valt erbuiten, dat ziet er raar uit"). Daarom is hij compact: een smalle
   band, drie dichte regels, een kleinere dag. --rij is het midden van de regel van Fenna, --rechts de rechterkant van
   de tegel en --ruimte wat er rechts van de tegel over is. */
.ko-kaart-planning .kp-maat { --W: min(266px, 41cqw); --tx: 34px; --ty: 3px; --pad: 0px; --H: min(200px, calc(100cqh - var(--ty) - 18px)); --R: 16px;
  --band: 34px; --voet: 36px; --rh: 26px; --nr: 68px;
  --rij: calc(var(--ty) + var(--band) + (var(--H) - var(--pad) - var(--band) - var(--voet) - 3 * var(--rh)) / 2 + 1.5 * var(--rh));
  --rechts: calc(var(--tx) + var(--W)); --ruimte: calc(100cqw - var(--tx) - var(--W));
  --y1: calc(var(--rij) - 46px); --x1: calc(var(--rechts) + var(--ruimte) * 0.55);
  --y2: calc(var(--ty) + var(--H) * 0.72); --x2: calc(var(--rechts) + var(--ruimte) * 0.3);
  --x3: calc(var(--rechts) + var(--ruimte) * 0.82); --y3: calc(var(--ty) + var(--band) / 2); }

/* ============ De lijnen van licht ============
   Dun, blauw op de lichte kaart, met een zachte gloed. Elke lijn begint buiten de kaart of het beeldvak en loopt 14 px
   onder de tegel door, zodat hij erin verdwijnt. */
.ko-kaart-planning .kp-lijn { position: absolute; z-index: 2; box-sizing: border-box; border: 0 solid rgba(37, 99, 235, 0.42);
  filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.55)) drop-shadow(0 0 7px rgba(96, 165, 250, 0.35)); }
/* 1. Van de rechterrand naar links, een trap omlaag, de tegel in op de hoogte van de regel van Fenna. */
.ko-kaart-planning .kp-l1a { left: calc(var(--x1) - 1px); top: calc(var(--y1) - 1px); width: calc(100% - var(--x1) + 3px); height: calc((var(--rij) - var(--y1)) / 2 + 1px);
  border-top-width: 2px; border-left-width: 2px; border-top-left-radius: var(--R); }
.ko-kaart-planning .kp-l1b { left: calc(var(--rechts) - 14px); top: calc((var(--y1) + var(--rij)) / 2); width: calc(var(--x1) + 15px - var(--rechts)); height: calc((var(--rij) - var(--y1)) / 2 + 1px);
  border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: var(--R); }
/* 2. Uit de tegel naar rechts, dan omlaag de onderrand uit. */
.ko-kaart-planning .kp-l2 { left: calc(var(--rechts) - 14px); top: calc(var(--y2) - 1px); width: calc(var(--x2) + 15px - var(--rechts)); height: calc(100% - var(--y2) + 3px);
  border-top-width: 2px; border-right-width: 2px; border-top-right-radius: var(--R); }
/* 3. Van de bovenrand van de kaart omlaag, dan naar links de rechterkant van de tegel in, op de hoogte van de band.
   Twee smalle stukken (de bocht en het rechte stuk), zodat geen van beide over de tekst ligt. */
.ko-kaart-planning .kp-l3a { left: calc(var(--x3) - var(--R) - 2px); top: -420px; width: calc(var(--R) + 3px); height: calc(var(--y3) + 421px);
  border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: var(--R); }
.ko-kaart-planning .kp-l3b { left: calc(var(--rechts) - 14px); top: calc(var(--y3) - 1px); width: calc(var(--x3) - var(--R) - var(--rechts) + 13px); height: 2px;
  border-top-width: 2px; }

/* ============ De dagtegel ============
   Wit porselein met een blauwe band, één licht van boven. In de film licht hij kort op als een puls aankomt (--kp-licht,
   0 tot 1), en de regel van Fenna licht op als haar ja binnenkomt (--kp-rij). */
.ko-kaart-planning .kp-obj { position: absolute; z-index: 4; }
.ko-kaart-planning .kp-dag { left: var(--tx); top: var(--ty); width: var(--W); height: var(--H); box-sizing: border-box; padding-bottom: var(--pad); border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; --kp-licht: 0; --kp-rij: 0; --kp-glas: 0;
  background:
    radial-gradient(70% 80% at 0% 100%, rgba(255, 214, 150, 0.26), rgba(255, 214, 150, 0) 62%),
    linear-gradient(180deg, #ffffff 0%, #fbf9f4 60%, #f5f1e8 100%);
  box-shadow:
    inset 0 1px 0 #fff, inset 0 -3px 8px -2px rgba(120, 90, 40, 0.1), 0 0 0 1px rgba(11, 18, 32, 0.05),
    0 0 0 calc(var(--kp-licht) * 6px) rgba(96, 165, 250, calc(var(--kp-licht) * 0.32)),
    0 0 calc(var(--kp-licht) * 48px) rgba(59, 130, 246, calc(var(--kp-licht) * 0.5)),
    0 2px 3px rgba(11, 18, 32, 0.08), 0 22px 40px -22px rgba(11, 18, 32, 0.36), 0 60px 96px -52px rgba(60, 40, 10, 0.4); }
.ko-kaart-planning .kp-dag::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; padding: 1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ko-kaart-planning .kp-flits { position: absolute; z-index: 0; inset: 0; opacity: var(--kp-licht); pointer-events: none;
  background: radial-gradient(60% 50% at 18% 50%, rgba(191, 219, 254, 0.55), rgba(191, 219, 254, 0) 80%); }
.ko-kaart-planning .kp-band { position: relative; z-index: 1; flex: none; height: var(--band); box-sizing: border-box; display: flex; align-items: center; padding: 0 20px; margin: 0; color: #fff;
  background: linear-gradient(180deg, #1d4ed8 0%, #1c47cc 50%, #1e40af 100%); box-shadow: inset 0 -1px 0 rgba(10, 28, 96, 0.3); }
/* Een zwakke glans, zodat wit op de band boven 4,5 blijft. */
.ko-kaart-planning .kp-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); }
.ko-kaart-planning .kp-band b { position: relative; font-family: var(--kop); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.ko-kaart-planning .kp-lijf { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 16px; }
.ko-kaart-planning .kp-nr { flex: none; margin: 0; font-family: var(--kop); font-size: var(--nr); font-weight: 500; line-height: 0.9; letter-spacing: -0.05em; color: var(--inkt); padding-bottom: 4px;
  text-shadow: 0 1px 0 #fff, 0 10px 18px rgba(11, 18, 32, 0.08); }
.ko-kaart-planning .kp-rijen { flex: 1; display: grid; margin: 0; padding: 0; list-style: none; }
.ko-kaart-planning .kp-rijen li { position: relative; height: var(--rh); display: flex; align-items: center; gap: 8px; padding: 0 7px; margin: 0 -7px; border-radius: 8px; font-size: 13.5px; line-height: 1.2; }
.ko-kaart-planning .kp-rijen li + li::before { content: ""; position: absolute; left: 7px; right: 7px; top: 0; border-top: 1px solid rgba(11, 18, 32, 0.06); }
/* De tijden in leisteen (#475569): ook als de gloed van de regel van Fenna erachter valt, blijft het contrast boven 4,5. */
.ko-kaart-planning .kp-tijd { flex: none; width: 35px; font-size: 12px; font-weight: 500; color: #475569; font-variant-numeric: tabular-nums; }
.ko-kaart-planning .kp-naam { flex: 1; min-width: 0; }
.ko-kaart-planning .kp-vakje { position: relative; flex: none; width: 16px; height: 16px; }
.ko-kaart-planning .kp-vink { flex: none; position: relative; display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: #2563eb; box-shadow: 0 2px 6px -2px rgba(29, 78, 216, 0.7); }
.ko-kaart-planning .kp-vakje > i { position: absolute; inset: 0; }
.ko-kaart-planning .kp-vink::after { content: ""; position: absolute; inset: 3px; background: #fff; -webkit-mask: var(--kp-haak) center / 100% 100% no-repeat; mask: var(--kp-haak) center / 100% 100% no-repeat; }
.ko-kaart-planning .kp-open { display: block; box-sizing: border-box; border-radius: 50%; border: 1.5px dashed rgba(52, 80, 111, 0.6); background: #fff; opacity: 0; }
/* De regel van Fenna: in het eindbeeld staat haar naam er, Sanne is weg. In de film licht de regel op bij haar ja. */
/* Bij haar ja wordt de regel blauw glas (zoals de band), met witte letters en een wit vinkje (--kp-glas, aan of uit:
   zo staat wit nooit op een half doorzichtige grond), en een gloed eromheen die aan- en uitdooft (--kp-rij). */
.ko-kaart-planning .kp-fenna { background: linear-gradient(180deg, rgba(29, 78, 216, var(--kp-glas)) 0%, rgba(28, 71, 204, var(--kp-glas)) 50%, rgba(30, 64, 175, var(--kp-glas)) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(var(--kp-glas) * 0.55)), 0 0 0 calc(var(--kp-rij) * 2px) rgba(147, 197, 253, calc(var(--kp-rij) * 0.45)), 0 0 calc(var(--kp-rij) * 8px) rgba(96, 165, 250, calc(var(--kp-rij) * 0.35)); }
.ko-kaart-planning .kp-fenna::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40%; border-radius: 9px 9px 0 0; pointer-events: none; opacity: var(--kp-glas);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); }
.ko-kaart-planning .kp-fenna.kp-glas .kp-tijd, .ko-kaart-planning .kp-fenna.kp-glas .kp-wie { color: #fff; }
.ko-kaart-planning .kp-fenna.kp-glas .kp-vink { background: #fff; box-shadow: 0 2px 6px -2px rgba(6, 18, 70, 0.5); }
.ko-kaart-planning .kp-fenna.kp-glas .kp-vink::after { background: #1d4ed8; }
.ko-kaart-planning .kp-wis { display: grid; }
.ko-kaart-planning .kp-wis > * { grid-area: 1 / 1; }
.ko-kaart-planning .kp-sanne { color: #56657a; text-decoration-color: rgba(11, 18, 32, 0.5); opacity: 0; }
.ko-kaart-planning .kp-wie { font-weight: 650; color: #1d4ed8; }
.ko-kaart-planning .kp-voet { position: relative; z-index: 1; flex: none; height: var(--voet); box-sizing: border-box; margin: 0 14px; padding: 0 1px; display: flex; align-items: center; border-top: 1px solid rgba(11, 18, 32, 0.07); }
.ko-kaart-planning .kp-rond { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap;
  color: #fff; background: #2563eb; box-shadow: 0 8px 16px -10px rgba(29, 78, 216, 0.9); }
.ko-kaart-planning .kp-rond::before { content: ""; flex: none; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--kp-haak) center / 100% 100% no-repeat; mask: var(--kp-haak) center / 100% 100% no-repeat; }

/* ============ Half en smal ============
   Half (het beeldvak 430 tot 600 px breed, zoals op 1024): de tegel links, iets breder in verhouding; lijn 3 valt weg
   (hij zou door de tekst lopen), de melding over Sanne komt dan over lijn 2 binnen.
   Smal en hoog (de telefoon en de tablet staand): de tegel in het midden, zonder de tijden en zonder de strook over de
   rand; lijn 1 komt van de linkerrand, lijn 2 gaat linksonder naar buiten en lijn 3 komt van de rechterrand met een
   trap omlaag de rechterkant van de tegel in. */
@container ko-plan (min-width: 430px) and (max-width: 599.98px) {
  .ko-kaart-planning .kp-maat { --W: min(270px, 58cqw); --tx: 24px; --nr: 64px; }
  .ko-kaart-planning .kp-l3a, .ko-kaart-planning .kp-l3b { display: none; }
}
@container ko-plan (max-width: 429.98px) and (min-height: 240px) {
  .ko-kaart-planning .kp-maat { --W: 68cqw; --pad: 0px; --H: 200px; --tx: calc((100cqw - var(--W)) / 2); --ty: calc((100cqh - var(--H)) / 2 - 4px);
    --band: 38px; --voet: 42px; --rh: 28px; --nr: 46px;
    --y1: calc(var(--rij) - 36px); --x1: calc(var(--tx) * 0.5);
    --y2: calc(var(--ty) + var(--H) * 0.82); --x2: calc(var(--tx) * 0.45);
    --x3: calc(var(--tx) + var(--W) + var(--tx) * 0.5); --y3a: calc(var(--ty) + var(--H) * 0.2); --y3b: calc(var(--ty) + var(--H) * 0.38); }
  .ko-kaart-planning .kp-dag { border-radius: 32px; }
  .ko-kaart-planning .kp-band { padding: 0 20px; }
  .ko-kaart-planning .kp-band b { font-size: 17px; }
  .ko-kaart-planning .kp-lijf { gap: 10px; padding: 0 14px 0 16px; }
  .ko-kaart-planning .kp-tijd { display: none; }
  .ko-kaart-planning .kp-rijen li { font-size: 13.5px; }
  .ko-kaart-planning .kp-l1a { left: -2px; top: calc(var(--y1) - 1px); width: calc(var(--x1) + 3px); height: calc((var(--rij) - var(--y1)) / 2 + 1px);
    border-width: 2px 2px 0 0; border-radius: 0 var(--R) 0 0; }
  .ko-kaart-planning .kp-l1b { left: calc(var(--x1) - 1px); top: calc((var(--y1) + var(--rij)) / 2); width: calc(var(--tx) + 15px - var(--x1)); height: calc((var(--rij) - var(--y1)) / 2 + 1px);
    border-width: 0 0 2px 2px; border-radius: 0 0 0 var(--R); }
  .ko-kaart-planning .kp-l2 { left: calc(var(--x2) - 1px); top: calc(var(--y2) - 1px); width: calc(var(--tx) + 15px - var(--x2)); height: calc(100% - var(--y2) + 3px);
    border-width: 2px 0 0 2px; border-radius: var(--R) 0 0 0; }
  .ko-kaart-planning .kp-l3a { display: block; left: calc(var(--x3) - 1px); top: calc(var(--y3a) - 1px); width: calc(100% - var(--x3) + 3px); height: calc((var(--y3b) - var(--y3a)) / 2 + 1px);
    border-width: 2px 0 0 2px; border-radius: var(--R) 0 0 0; }
  .ko-kaart-planning .kp-l3b { display: block; left: calc(var(--tx) + var(--W) - 14px); top: calc((var(--y3a) + var(--y3b)) / 2); width: calc(var(--x3) + 15px - var(--tx) - var(--W)); height: calc((var(--y3b) - var(--y3a)) / 2 + 1px);
    border-width: 0 2px 2px 0; border-radius: 0 0 var(--R) 0; }
}

/* ============ De motor in deze kaart ============ */
.ko-kaart-planning .kp-film .mt-chip-glans, .ko-kaart-planning .kp-film .mt-pakket-spoor { display: none !important; }
.ko-kaart-planning .kp-film .mt-ring-zacht { display: none; }

/* ======================================================================
   Kaart recruitment (recruitment.css van de samenstelling)
   ====================================================================== */
/* diensten-recruitment-ats/module/kaart.css: de grote kaart Recruitment als pijplijn (optie A, het idee van een ATS;
   gekozen door Huub op 21 oktober 2026, tweede herstelronde 22 oktober). Eén object: een bord van porselein met een
   blauwe band (Projectleider civiel) en drie glazen banen naast elkaar: nieuw (badge 40), gelezen en gesprek (badge 3,
   blauw glas). Drie rails van licht lopen binnen het bord van de wand van nieuw tot in gesprek. Per rail drie personen
   (kralen van porselein); in gelezen worden ze gescand, de voorste wordt groen (het groen van live) en gaat door naar
   gesprek, de andere twee dimmen. De opmaak van de kaart zelf (.dk, .dk-recruitment, .dk-tekst, .dk-beeld) komt uit
   ../spoor-mix/stijl.css. Alle regels staan onder de eigen wortelklasse .pp-kaart; geen body- of paginaregels, geen
   beelden.

   Recht: geen rotate, skew, perspective of 3D. Diepte alleen door schaduw en licht. Geen zon. Alles staat minstens 24 px
   van naam, zin en knop. Zonder JavaScript is dit het eindbeeld. */

.pp-kaart .pp-film { position: absolute; inset: 0; pointer-events: none; font-family: var(--tekst); color: var(--inkt); container: pp-film / size;
  --pp-haak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.4 2.4 4.5-5' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ============ De maat ============
   Alles volgt het beeldvak (een container query op .pp-film). Het bord staat op de linkermarge van de tekst en loopt tot
   dezelfde marge rechts; bovenaan 3 px onder de rand van het beeldvak (dus 27 px onder de knop), onderaan 10 px boven de
   onderrand. --lt en --lb zijn boven- en onderkant van de banen, --r1 tot --r3 de hoogtes van de rails, --x1 tot --x3 de
   linkerkant van de banen. --k is de maat van een persoon; --s1 tot --s3 zijn de drie plekken per rail in gelezen (1
   vooraan, waar de gekozene wacht), --g de plek in gesprek. */
.pp-kaart .pp-maat {
  --bl: clamp(24px, 2.4vw, 34px); --brr: var(--bl); --bt: 3px; --bb: calc(100cqh - 10px);
  --band: 28px; --pad: 9px; --gap: 7px; --kop: 26px; --ip: 10px; --sg: 7px;
  --bw: calc(100cqw - var(--bl) - var(--brr));
  --lt: calc(var(--bt) + var(--band) + var(--pad)); --lb: calc(var(--bb) - var(--pad));
  --p: calc((var(--lb) - var(--lt) - var(--kop) - 4px) / 3);
  --r1: calc(var(--lt) + var(--kop) + var(--p) / 2); --r2: calc(var(--r1) + var(--p)); --r3: calc(var(--r2) + var(--p));
  --iw: calc(var(--bw) - 2 * var(--pad) - 2 * var(--gap));
  --w1: max(78px, calc(var(--iw) * 0.23)); --w3: calc(var(--iw) * 0.38); --w2: calc(var(--iw) - var(--w1) - var(--w3));
  --x1: calc(var(--bl) + var(--pad)); --x2: calc(var(--x1) + var(--w1) + var(--gap)); --x3: calc(var(--x2) + var(--w2) + var(--gap));
  --k: min(30px, calc(var(--p) - 8px), calc((var(--w2) - var(--ip) - 2 * var(--sg) - 4px) / 3));
  --s1: calc(var(--x2) + var(--w2) - var(--ip) - var(--k)); --s2: calc(var(--s1) - var(--k) - var(--sg)); --s3: calc(var(--s2) - var(--k) - var(--sg));
  --g: calc(var(--x3) + var(--ip)); }

/* Smal en hoog (de tablet staand en de telefoon): het bord dichter op de randen, ruimere rails, de tijd bij DB in twee
   regels (do 22, / 10:30). */
@container pp-film (max-width: 429.98px) and (min-height: 240px) {
  .pp-kaart .pp-maat { --bl: 14px; --pad: 8px; --gap: 5px; --ip: 8px; --sg: 5px;
    --w1: 66px; --w3: calc(var(--iw) * 0.33);
    --k: min(28px, calc(var(--p) - 10px), calc((var(--w2) - var(--ip) - 2 * var(--sg) - 4px) / 3)); }
}
/* Smal en laag (900 en 820): iets kleinere personen en een bredere baan gesprek, zodat do 22, 10:30 er naast DB in past. */
@container pp-film (max-width: 429.98px) and (max-height: 239.98px) {
  .pp-kaart .pp-maat { --gap: 6px; --pad: 8px; --ip: 8px; --sg: 5px; --w3: calc(var(--iw) * 0.4);
    --k: min(26px, calc(var(--p) - 8px), calc((var(--w2) - var(--ip) - 2 * var(--sg) - 4px) / 3)); }
}

/* ============ Het bord ============
   Porselein (zoals de agendategel): wit naar warm papier, een zachte glans van boven, een diepe zachte schaduw. De band is
   blauw van #1d4ed8 naar #1e40af met een glans van hooguit 0,1, zodat witte letters boven 4,5 blijven. */
.pp-kaart .pp-bord { position: absolute; z-index: 1; left: var(--bl); top: var(--bt); width: var(--bw); height: calc(var(--bb) - var(--bt)); border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(90% 70% at 0% 100%, rgba(255, 214, 150, 0.16), rgba(255, 214, 150, 0) 62%),
    linear-gradient(180deg, #ffffff 0%, #fbf9f4 62%, #f3eee4 100%);
  box-shadow:
    inset 0 1px 0 #fff, inset 0 -3px 8px -2px rgba(120, 90, 40, 0.1), 0 0 0 1px rgba(11, 18, 32, 0.05),
    0 2px 3px rgba(11, 18, 32, 0.08), 0 22px 38px -20px rgba(11, 18, 32, 0.4), 0 54px 84px -46px rgba(30, 50, 120, 0.42); }
.pp-kaart .pp-bord::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 18%, rgba(255, 255, 255, 0) 45%, rgba(214, 200, 170, 0) 75%, rgba(214, 200, 170, 0.5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pp-kaart .pp-band { position: relative; z-index: 2; height: var(--band); margin: 0; display: flex; align-items: center; padding: 0 14px;
  font-family: var(--kop); font-size: 13px; font-weight: 600; line-height: 1; color: #fff; letter-spacing: 0.005em;
  background: linear-gradient(180deg, #1d4ed8 0%, #1c47cc 50%, #1e40af 100%); box-shadow: inset 0 -1px 0 rgba(10, 28, 96, 0.3); }
.pp-kaart .pp-band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); }
.pp-kaart .pp-band span { position: relative; }

/* ============ De drie banen ============
   Nieuw en gelezen: glas met een tint, verzonken in het porselein (een binnenschaduw boven, een witte lichtrand onder).
   Gesprek: blauw glas, zoals de AI-tegel. De kop draagt het woord en de badge. --pp-licht laat gesprek bij elke aankomst
   kort oplichten. */
.pp-kaart .pp-baan { position: absolute; z-index: 2; top: var(--lt); height: calc(var(--lb) - var(--lt)); border-radius: 14px; --pp-licht: 0;
  background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, #e6efff 0%, #dbe7fd 100%);
  box-shadow: inset 0 2px 4px rgba(29, 78, 216, 0.2), inset 0 0 0 1px rgba(29, 78, 216, 0.09), inset 0 -1px 0 rgba(255, 255, 255, 0.8), 0 1px 0 rgba(255, 255, 255, 0.95); }
.pp-kaart .pp-baan-nieuw { left: var(--x1); width: var(--w1); }
.pp-kaart .pp-baan-gelezen { left: var(--x2); width: var(--w2); overflow: hidden; }
.pp-kaart .pp-baan-gesprek { left: var(--x3); width: var(--w3);
  background: radial-gradient(120% 55% at 50% 0%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #1d4ed8 0%, #1c47cc 52%, #1e40af 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -12px 20px -12px rgba(6, 18, 70, 0.5), 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 calc(var(--pp-licht) * 5px) rgba(96, 165, 250, calc(var(--pp-licht) * 0.3)), 0 0 calc(var(--pp-licht) * 34px) rgba(96, 165, 250, calc(var(--pp-licht) * 0.75)),
    0 10px 18px -10px rgba(29, 78, 216, 0.55); }
/* Licht van binnen bij een aankomst (zoals de AI-tegel); de letters blijven op hun eigen blauwe grond leesbaar. */
.pp-kaart .pp-baan-gesprek::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: calc(var(--pp-licht) * 0.55);
  background: radial-gradient(70% 50% at 30% 40%, rgba(147, 197, 253, 0.55), rgba(147, 197, 253, 0) 75%); }
.pp-kaart .pp-kop { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: var(--kop); margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 6px 0 10px; box-sizing: border-box;
  font-family: var(--kop); font-size: 12.5px; font-weight: 600; line-height: 1; color: #1e40af; }
.pp-kaart .pp-baan-gesprek .pp-kop { color: #fff; }
.pp-kaart .pp-badge { flex: none; min-width: 26px; height: 20px; padding: 0 7px; box-sizing: border-box; border-radius: 10px; text-align: center;
  font-family: var(--kop); font-size: 12.5px; font-weight: 600; line-height: 20px; font-variant-numeric: tabular-nums; font-style: normal;
  background: #fff; color: #1d4ed8; box-shadow: 0 0 0 1px rgba(29, 78, 216, 0.12), 0 4px 8px -4px rgba(6, 18, 70, 0.45); }
.pp-kaart .pp-badge-vol { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5), 0 4px 10px -4px rgba(6, 18, 70, 0.6); }
@container pp-film (max-width: 429.98px) and (min-height: 240px) {
  .pp-kaart .pp-kop { padding: 0 4px 0 7px; font-size: 12px; }
  .pp-kaart .pp-badge { min-width: 24px; padding: 0 5px; font-size: 12px; }
}
/* De scan: per rail een korte band van licht die van links naar rechts over de drie personen gaat (binnen de baan,
   achter de kralen; de kralen zelf lichten op als hij langskomt). Alleen tijdens de film. */
.pp-kaart .pp-scan { position: absolute; z-index: 1; left: 0; top: calc(var(--y) - var(--lt) - var(--sh) / 2); width: 34px; height: var(--sh); --sh: calc(var(--k) + 16px); border-radius: 14px; opacity: 0;
  background: linear-gradient(90deg, rgba(147, 197, 253, 0) 0%, rgba(147, 197, 253, 0.55) 38%, rgba(96, 165, 250, 0.75) 50%, rgba(147, 197, 253, 0.55) 62%, rgba(147, 197, 253, 0) 100%); }

/* ============ De rails van licht ============
   Dun en blauw, met een zachte gloed (zoals bij de tegels). Elke rail begint binnen het bord, aan de wand van de baan
   nieuw, en loopt recht door gelezen tot onder de persoon in gesprek, zodat hij daar in hem verdwijnt. Niets buiten het
   bord. */
.pp-kaart .pp-lijn { position: absolute; z-index: 3; box-sizing: border-box; border: 0 solid rgba(37, 99, 235, 0.42);
  filter: drop-shadow(0 0 2px rgba(96, 165, 250, 0.55)) drop-shadow(0 0 6px rgba(96, 165, 250, 0.32)); }
.pp-kaart .pp-rail { left: calc(var(--x1) + 2px); top: calc(var(--y) - 1px); width: calc(var(--g) + var(--k) / 2 - var(--x1) - 2px); height: 2px; border-top-width: 2px; }
.pp-kaart [data-r="1"] { --y: var(--r1); }
.pp-kaart [data-r="2"] { --y: var(--r2); }
.pp-kaart [data-r="3"] { --y: var(--r3); }
/* De pulsen: een korte streep licht met een witte kop die voor elke stap uit loopt (de film zet plek en dekking). */
.pp-kaart .pp-puls { position: absolute; z-index: 4; left: 0; top: calc(var(--y) - 1.5px); width: 64px; height: 3px; border-radius: 2px; opacity: 0;
  background: linear-gradient(90deg, rgba(96, 165, 250, 0) 0%, rgba(147, 197, 253, 0.75) 62%, #ffffff 100%);
  filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.9)) drop-shadow(0 0 8px rgba(96, 165, 250, 0.55)); }

/* ============ De personen ============
   Kralen van wit porselein op hun rail. Wie gekozen wordt (JP, GM, DB) draagt initialen in inkt; de anderen hebben geen
   tekst. Hun plek hier is het eindbeeld: de gekozene in gesprek, de anderen op plek 2 en 3 in gelezen.
   --pp-scan: het licht als de scan langskomt. --pp-groen: de groene ring van wie gekozen is (het groen van live in de mix,
   met dezelfde halo). --pp-dim: de grijze laag over wie niet gekozen is. .pp-aan en --pp-licht: de aankomst in gesprek.
   Zonder JavaScript: groen 1, dim 1. Geen tekst op groen of grijs: de initialen blijven inkt op porselein. */
.pp-kaart .pp-kraal { position: absolute; z-index: 5; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 50%; --pp-licht: 0;
  left: var(--x); top: calc(var(--y) - var(--k) / 2); width: var(--k); height: var(--k);
  font-family: var(--kop); font-size: 12px; font-weight: 600; font-style: normal; line-height: 1; letter-spacing: -0.01em; color: var(--inkt);
  background: radial-gradient(120% 120% at 30% 18%, #ffffff 0%, #f7f9fe 48%, #e1e9f7 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgba(29, 78, 216, 0.14), 0 0 0 1px rgba(29, 78, 216, 0.12),
    0 0 calc(var(--pp-scan, 0) * 16px) rgba(96, 165, 250, calc(var(--pp-scan, 0) * 0.9)), 0 4px 8px -3px rgba(6, 18, 70, 0.38); }
.pp-kaart .pp-kraal[data-s="g"] { --x: var(--g); }
.pp-kaart .pp-kraal[data-s="2"] { --x: var(--s2); }
.pp-kaart .pp-kraal[data-s="3"] { --x: var(--s3); }
.pp-kaart .pp-wie { --pp-ring: calc(var(--k) * 0.075); --pp-halo: calc(var(--k) * 0.18);
  box-shadow: 0 0 0 calc(var(--pp-groen, 1) * var(--pp-ring)) rgba(16, 185, 129, var(--pp-groen, 1)), 0 0 0 calc(var(--pp-groen, 1) * var(--pp-halo)) rgba(16, 185, 129, calc(var(--pp-groen, 1) * 0.2)),
    inset 0 1px 0 #fff, inset 0 -2px 3px rgba(29, 78, 216, 0.14), 0 0 0 1px rgba(29, 78, 216, 0.12),
    0 0 calc(var(--pp-scan, 0) * 16px) rgba(96, 165, 250, calc(var(--pp-scan, 0) * 0.9)), 0 4px 8px -3px rgba(6, 18, 70, 0.38); }
/* Aan: in gesprek, op het blauwe glas: de groene ring blijft, met een ring van licht bij aankomst (--pp-licht). */
.pp-kaart .pp-wie.pp-aan {
  box-shadow: 0 0 0 calc(var(--pp-groen, 1) * var(--pp-ring)) rgba(16, 185, 129, var(--pp-groen, 1)), 0 0 0 calc(var(--pp-groen, 1) * var(--pp-halo)) rgba(16, 185, 129, calc(var(--pp-groen, 1) * 0.28)),
    inset 0 1px 0 #fff, inset 0 -2px 3px rgba(29, 78, 216, 0.16),
    0 0 0 calc(var(--pp-licht) * 9px) rgba(191, 219, 254, calc(var(--pp-licht) * 0.4)), 0 0 calc(var(--pp-licht) * 26px) rgba(191, 219, 254, calc(var(--pp-licht) * 0.95)),
    0 6px 12px -4px rgba(6, 18, 70, 0.6); }
/* Niet gekozen: een grijze laag over het porselein, en iets minder dekking. */
.pp-kaart .pp-ander { opacity: 0.92; }
.pp-kaart .pp-ander::after { content: ""; position: absolute; inset: 0; border-radius: 50%; opacity: var(--pp-dim, 1);
  background: radial-gradient(120% 120% at 30% 18%, #f4f6fa 0%, #dde3ec 50%, #b6c1d2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -2px 3px rgba(51, 65, 85, 0.14), 0 0 0 1px rgba(51, 65, 85, 0.12); }

/* Het vinkje: wie in gesprek staat, is uitgenodigd (groen, zoals de ring). */
.pp-kaart .pp-vink { position: absolute; right: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; display: block;
  background: linear-gradient(180deg, #34d399 0%, #10b981 45%, #059669 100%); box-shadow: 0 0 0 2px #fff, 0 3px 6px -2px rgba(5, 150, 105, 0.75); }
.pp-kaart .pp-vink::after { content: ""; position: absolute; inset: 3px; background: #fff; -webkit-mask: var(--pp-haak) center / 100% 100% no-repeat; mask: var(--pp-haak) center / 100% 100% no-repeat; }

/* De afspraak bij DB (de onderste rail): klein, in wit naast de kraal. */
.pp-kaart .pp-datum { position: absolute; z-index: 6; left: calc(var(--g) + var(--k) + 9px); top: calc(var(--r3) - 9px); height: 18px; white-space: nowrap;
  font-family: var(--kop); font-size: 12.5px; font-weight: 600; line-height: 18px; color: #fff; font-variant-numeric: tabular-nums; }
@container pp-film (max-width: 429.98px) and (min-height: 240px) {
  .pp-kaart .pp-datum { left: calc(var(--g) + var(--k) + 9px); top: calc(var(--r3) - 11px); width: 38px; height: auto; white-space: normal; font-size: 12px; line-height: 14px; }
}

/* ======================================================================
   Kaart leads (leads.css van de samenstelling)
   ====================================================================== */
/* De kaart Leads en scrapers (diensten-leads, 21 oktober 2026). Alle regels staan onder de wortelklasse .dk-leads; de
   algemene kaartregels (.dk, .dk-tekst, .dk-naam, .dk-zin, .dk-knop, .dk-beeld, .knop, .pijl) komen uit
   ../spoor-mix/stijl.css. Voorvoegsel binnen de kaart: lk-.

   Het beeld: de echte logo's van LinkedIn, Apify, Clay en Lusha als glanzende tegels op een lijn van licht, die de vloer
   is van zes stijgende staven; een dunne lijn van licht door de middens van de toppen met een gloeiend punt op de top van
   de laatste, die gloeit, en daarboven één glanzend euroteken. Geen bedragen, geen as, geen tekst in het beeld behalve het euroteken. De staven, de lijn en de
   gloed staan in één svg die meeschaalt en rechtsonder op de vloer blijft staan (preserveAspectRatio xMaxYMax). De opmaak
   volgt de breedte van de kaart (container queries op het beeldvak): breed (vanaf 560 px) de tegels in een rij op de
   vloer en de hoge staven naast de tekst; middel (420 tot 560) dezelfde rij kleiner en de staven binnen het beeldvak;
   smal (onder 420) de tegels in een kolom, de lijn loopt erdoor naar beneden en dan als vloer onder de staven.
   Alles recht: geen rotate, skew of perspective. Geen zon. Wat het beeld toont blijft 24 px van naam, zin en knop.
   Zonder JavaScript staat het eindbeeld. */

/* ============ De kaart (zelfde plek en grond als Websites en leads in de mix) ============ */
.dk-leads { grid-column: span 7; color: #ffffff;
  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%, #0b1220 100%);
  box-shadow: 0 40px 80px -46px rgba(11, 18, 32, 0.8); }
.dk-leads .dk-zin { color: rgba(255, 255, 255, 0.7); }
.dk-leads .dk-knop:focus-visible { outline-color: #ffffff; }
@media (max-width: 1199px) { .dk-leads { grid-column: span 6; } }
@media (max-width: 599px) { .dk-leads { flex: 0 0 86%; scroll-snap-align: center; } }

/* ============ Het beeldvak en de drie opmaken ============ */
.dk-leads .lk-beeld { position: relative; container-type: size; container-name: lk-beeld;
  --lk-vloer: 62px; --lk-t: 56px; --lk-gap: 20px; --lk-x0: 34px; --lk-gr-r: 22px; --lk-gr-w: 290px; --lk-gr-max: none; --lk-modus: rij; }
/* Middel en smal: de staven blijven binnen het beeldvak, dus onder de tekst en de knop. De hoogte volgt uit het beeldvak
   in procenten (cqh rekent in dit beeldvak niet mee, cqw wel). */
@container lk-beeld (max-width: 559px) {
  .dk-leads .lk-beeld > * { --lk-vloer: 46px; --lk-t: 44px; --lk-gap: 14px; --lk-x0: 24px; --lk-gr-r: 18px;
    --lk-gr-w: calc(100cqw - 24px - 4 * 44px - 3 * 14px - 26px - 18px); --lk-gr-max: calc(100% - 46px - 8px); --lk-modus: rij; }
}
@container lk-beeld (max-width: 419px) {
  .dk-leads .lk-beeld > * { --lk-vloer: 40px; --lk-t: 36px; --lk-gap: 10px; --lk-x0: 22px; --lk-gr-r: 14px;
    --lk-gr-w: calc(100cqw - 22px - 36px - 22px - 14px); --lk-gr-max: calc(100% - 40px - 14px); --lk-modus: kolom; }
}

/* ============ De vloer: de lijn van licht door de tegels ============ */
.dk-leads .lk-gloed { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--lk-vloer);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.3) 0%, rgba(59, 130, 246, 0.02) 100%); }
.dk-leads .lk-vloer { position: absolute; z-index: 1; left: -2px; right: -2px; bottom: calc(var(--lk-vloer) - 3px); height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0) 0, #2563eb 30px, #3b82f6 55%, #60a5fa 100%);
  box-shadow: 0 0 14px 1px rgba(59, 130, 246, 0.6), 0 0 38px 6px rgba(59, 130, 246, 0.22); }
.dk-leads .lk-vloer::after { content: ""; position: absolute; left: 0; right: 0; top: 0.8px; height: 1.3px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.85) 46px, rgba(255, 255, 255, 0.85) 100%); }
/* Smal: de lijn loopt door de kolom tegels naar beneden en dan als vloer naar rechts. */
@container lk-beeld (max-width: 419px) {
  .dk-leads .lk-vloer { left: calc(var(--lk-x0) + var(--lk-t) / 2 - 3px); right: -2px; bottom: calc(var(--lk-vloer) - 3px);
    height: calc(3 * (var(--lk-t) + var(--lk-gap)) + 6px); border-radius: 0 0 0 16px; background: none;
    border-left: 6px solid #3b82f6; border-bottom: 6px solid #3b82f6; box-shadow: none;
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.75)) drop-shadow(0 0 16px rgba(59, 130, 246, 0.3)); }
  .dk-leads .lk-vloer::after { display: none; }
}

/* ============ De tegels: de echte merktekens, glanzend ============ */
.dk-leads .lk-tegel { position: absolute; z-index: 8; margin: 0; width: var(--lk-t); height: var(--lk-t); border-radius: calc(var(--lk-t) * 0.27); overflow: hidden;
  left: calc(var(--lk-x0) + var(--i) * (var(--lk-t) + var(--lk-gap))); bottom: calc(var(--lk-vloer) - var(--lk-t) / 2);
  display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--lk-vlak, #ffffff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.4),
    -7px 0 16px -8px rgba(96, 165, 250, 0.85), 7px 0 16px -8px rgba(96, 165, 250, 0.85), 0 14px 26px -12px rgba(0, 0, 0, 0.85),
    0 0 0 calc(var(--lk-aan, 0) * 2px) #93c5fd, 0 0 0 calc(var(--lk-aan, 0) * 6px) rgba(96, 165, 250, calc(var(--lk-aan, 0) * 0.22)),
    0 0 calc(var(--lk-aan, 0) * 30px) rgba(96, 165, 250, calc(var(--lk-aan, 0) * 0.7)); }
@container lk-beeld (max-width: 419px) {
  .dk-leads .lk-tegel { left: var(--lk-x0); bottom: calc(var(--lk-vloer) - var(--lk-t) / 2 + (3 - var(--i)) * (var(--lk-t) + var(--lk-gap))); }
}
/* De glans van boven over elke tegel. */
.dk-leads .lk-tegel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.12) 44%, rgba(255, 255, 255, 0) 52%); }
.dk-leads .lk-tegel > * { position: relative; display: block; }
/* Alle beelden staan als img in de html; deze css verwijst naar geen enkel bestand, dus het pad hangt alleen af van de pagina. */
.dk-leads .lk-tegel-linkedin { --lk-vlak: #0a66c2; }
.dk-leads .lk-tegel-linkedin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dk-leads .lk-tegel-apify, .dk-leads .lk-tegel-clay, .dk-leads .lk-tegel-lusha { --lk-vlak: linear-gradient(180deg, #ffffff 0%, #f3f5f9 100%); }
.dk-leads .lk-tegel-apify img { width: 50%; height: auto; }
.dk-leads .lk-tegel-lusha img { width: 61%; height: auto; }
/* Clay: alleen de boog, groot en in het midden, zoals de andere tegels alleen hun merkteken tonen. */
.dk-leads .lk-tegel-clay img { width: 68%; height: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }

/* ============ De staven, de lijn over de toppen en de gloed ============ */
.dk-leads .lk-grafiek { position: absolute; z-index: 7; right: var(--lk-gr-r); bottom: var(--lk-vloer); width: var(--lk-gr-w); height: auto; aspect-ratio: 290 / 330; max-height: var(--lk-gr-max); overflow: visible; }
.dk-leads .lk-staaf-lijf { filter: drop-shadow(0 10px 18px rgba(29, 78, 216, 0.45)); }
.dk-leads .lk-staaf-kap { fill: #ffffff; fill-opacity: 0.75; }
/* Het toplicht: een zachte oplichting van een top, alleen op het moment dat de pen erlangs komt (kaart.js). */
.dk-leads .lk-top-licht { opacity: 0; }
.dk-leads .lk-held-gloed { fill: #60a5fa; fill-opacity: 0.75; }
/* De lijn en het punt: dikte in schermpixels (non-scaling-stroke), dus op elke maat even dun en scherp. Het punt is een
   pad van lengte nul met ronde kap; de gloed onder de lijn is blauw, zodat hij ook op de lichte top van de laatste staaf
   zichtbaar blijft. */
.dk-leads .lk-lijn path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.dk-leads .lk-top-gloed { stroke: #60a5fa; stroke-width: 6px; stroke-opacity: 0.55; }
.dk-leads .lk-top { stroke: #f2f7ff; stroke-width: 2.25px; }
.dk-leads .lk-punt-gloed { stroke: #93c5fd; stroke-width: 18px; stroke-opacity: 0.75; }
.dk-leads .lk-punt-ring { stroke: #2563eb; stroke-width: 9px; }
.dk-leads .lk-punt { stroke: #ffffff; stroke-width: 6px; }

/* ============ Het euroteken: klein en glanzend boven de hoogste staaf ============ */
/* Het staat in html (niet in de svg), zodat het op elke maat 15 px blijft. Het midden ligt op x 273 van het vlak van 290
   bij 330 en de onderkant 12 px boven de top van de hoogste staaf (y 52), boven het punt waar de lijn eindigt; kaart.js
   zet het daar precies neer. Zonder JavaScript: breed exact (schaal 1), middel en smal bij benadering (daar bepaalt de
   hoogte van het beeldvak de schaal). */
.dk-leads .lk-munt { position: absolute; z-index: 9; margin: 0; width: 26px; height: 26px; border-radius: 50%;
  right: calc(var(--lk-gr-r) + 4px); bottom: calc(var(--lk-vloer) + 290px);
  display: grid; place-items: center; font-family: var(--kop); font-size: 15px; font-weight: 600; line-height: 1; color: #1d4ed8;
  background: radial-gradient(75% 75% at 35% 28%, #ffffff 0%, #e8f1ff 45%, #bfdbfe 100%);
  box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 2px rgba(29, 78, 216, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.6), 0 0 14px rgba(96, 165, 250, 0.9), 0 0 32px rgba(59, 130, 246, 0.55); }
/* De gloed achter het euroteken: licht op als de pen of het bolletje aankomt, alleen via opacity (kaart.js zet hem op
   het midden van het euroteken). */
.dk-leads .lk-munt-gloed { position: absolute; z-index: 8; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%;
  pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(circle, rgba(219, 234, 254, 0.8) 0, rgba(147, 197, 253, 0.45) 38%, rgba(96, 165, 250, 0) 70%); }

/* ============ Het bolletje: na de film glijdt het steeds opnieuw over de lijn omhoog naar het euroteken ============ */
/* Kleiner en zachter dan de pen: een witte kern van 4,8 px met een zachte blauwe gloed. Het staat links boven in het
   beeldvak en beweegt alleen met transform en opacity (Web Animations in kaart.js). Zonder JavaScript onzichtbaar. */
.dk-leads .lk-parel { position: absolute; z-index: 8; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  pointer-events: none; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, #ffffff 0, #ffffff 2.4px, rgba(219, 234, 254, 0.95) 3.4px, rgba(147, 197, 253, 0.6) 5.8px, rgba(96, 165, 250, 0.26) 8.4px, rgba(96, 165, 250, 0) 11px); }
@container lk-beeld (max-width: 559px) {
  .dk-leads .lk-munt { right: calc(var(--lk-gr-r) - 3px); bottom: calc(var(--lk-vloer) + (100% - var(--lk-vloer) - 8px) * 0.8424 + 12px); }
}
/* Smal: de grafiek staat 6 px lager (meer lucht tussen het euroteken en de knop), het euroteken gaat mee. */
@container lk-beeld (max-width: 419px) {
  .dk-leads .lk-munt { bottom: calc(var(--lk-vloer) + (100% - var(--lk-vloer) - 14px) * 0.8424 + 12px); }
}

/* ======================================================================
   Kaart ios (ios.css van de samenstelling)
   ====================================================================== */
/* module/kaart.css: de grote kaart iOS-apps en widgets voor de samenstelling van de dienstensectie (21 oktober 2026).
   Alleen het beeldvak: de AI-tegel als app-icoon (blauw glas, de AI uit het woordmerk in levende tekens) en drie tot vier
   dunne lijnen van licht met rechte hoeken die vanaf de randen van het beeldvak naar de tegel lopen en erin verdwijnen,
   zoals de leidingen rond het AI-blok van Capisoft (de les, niet de vorm). De opmaak van de kaart zelf (.dk, .dk-ios,
   .dk-tekst, .dk-beeld) komt uit ../spoor-mix/stijl.css. Alle regels staan onder de eigen wortelklasse .ko-kaart-ios;
   geen body- of paginaregels.

   Recht: geen rotate, skew, perspective of 3D. Diepte alleen door schaduw en licht. Geen zon. Alles wat zweeft staat
   minstens 24 px van naam, zin en knop. Zonder JavaScript is dit het eindbeeld: de tegel met de stille lijnen. */

.ko-kaart-ios .ko-film { position: absolute; inset: 0; pointer-events: none; font-family: var(--tekst); color: var(--inkt); container: ko-ios / size; }

/* ============ De maat ============
   --S is de zijde van de tegel, --tx en --ty zijn zijn plek in het beeldvak, --R de straal van de hoeken van de lijnen.
   Breed en half (vanaf 430 px): de tegel rechts, zo hoog als het beeldvak toelaat (het beeldvak begint 24 px onder de
   knop, de tegel 3 px lager, zodat hij ruim 24 px van de knop blijft); smal en hoog (de telefoon en de tablet staand): de tegel in het midden, met lijnen van vier kanten. */
.ko-kaart-ios .ko-ios-maat { --S: min(212px, calc(100cqh - 11px)); --tx: calc(100cqw - 54px - var(--S)); --ty: 3px; --R: 16px;
  --y1: calc(var(--ty) + var(--S) * 0.2); --y2: calc(var(--ty) + var(--S) * 0.44); --xb: calc(var(--tx) * 0.46);
  --x0: calc(var(--tx) * 0.24); --y3: calc(var(--ty) + var(--S) * 0.74);
  --x3: calc(var(--tx) + var(--S) + (100cqw - var(--tx) - var(--S)) / 2); --y4: calc(var(--ty) + var(--S) * 0.5);
  --y5: calc(var(--ty) + var(--S) * 0.26); --y6: calc(var(--ty) + var(--S) * 0.52); --xc: calc(var(--tx) + var(--S) + (100cqw - var(--tx) - var(--S)) * 0.54); }
@container ko-ios (max-width: 429.98px) and (min-height: 240px) {
  .ko-kaart-ios .ko-ios-maat { --S: clamp(140px, 52cqw, 190px); --tx: calc((100cqw - var(--S)) / 2); --ty: calc((100cqh - var(--S)) / 2 - 6px); }
}
@container ko-ios (max-width: 429.98px) and (max-height: 239.98px) {
  .ko-kaart-ios .ko-ios-maat { --S: min(calc(100cqh - 11px), 46cqw); --tx: calc(100cqw - 40px - var(--S)); }
}

/* ============ De lijnen van licht ============
   Dun, licht op de blauwe kaart, met een zachte gloed. Elke lijn begint buiten de rand van het beeldvak en loopt 14 px
   onder de tegel door, zodat hij erin verdwijnt. Een lijn met twee hoeken bestaat uit twee stukken die elkaar halverwege
   het verticale stuk raken. In de film glijden er pulsen overheen (de motor tekent ze, op dezelfde route). */
.ko-kaart-ios .ko-lijn { position: absolute; z-index: 2; box-sizing: border-box; border: 0 solid rgba(219, 234, 254, 0.5);
  filter: drop-shadow(0 0 2px rgba(191, 219, 254, 0.6)) drop-shadow(0 0 8px rgba(96, 165, 250, 0.45)); }
/* 1. Van links, met een trap omlaag, de linkerkant van de tegel in. */
.ko-kaart-ios .ko-l1a { left: -2px; top: calc(var(--y1) - 1px); width: calc(var(--xb) + 3px); height: calc((var(--y2) - var(--y1)) / 2 + 1px);
  border-top-width: 2px; border-right-width: 2px; border-top-right-radius: var(--R); }
.ko-kaart-ios .ko-l1b { left: calc(var(--xb) - 1px); top: calc((var(--y1) + var(--y2)) / 2); width: calc(var(--tx) + 15px - var(--xb)); height: calc((var(--y2) - var(--y1)) / 2 + 1px);
  border-left-width: 2px; border-bottom-width: 2px; border-bottom-left-radius: var(--R); }
/* 2. Van de onderrand omhoog, dan naar rechts de tegel in. */
.ko-kaart-ios .ko-l2 { left: calc(var(--x0) - 1px); top: calc(var(--y3) - 1px); width: calc(var(--tx) + 15px - var(--x0)); height: calc(100% - var(--y3) + 3px);
  border-left-width: 2px; border-top-width: 2px; border-top-left-radius: var(--R); }
/* 3 (breed en half). Rechts van de onderrand omhoog, dan naar links de rechterkant van de tegel in. */
.ko-kaart-ios .ko-l3m { left: calc(var(--tx) + var(--S) - 14px); top: calc(var(--y4) - 1px); width: calc(var(--x3) + 15px - var(--tx) - var(--S)); height: calc(100% - var(--y4) + 3px);
  border-top-width: 2px; border-right-width: 2px; border-top-right-radius: var(--R); }
/* 3 (smal). Van de rechterrand, met een trap omlaag, de rechterkant van de tegel in. */
.ko-kaart-ios .ko-l3a { left: calc(var(--xc) - 1px); top: calc(var(--y5) - 1px); width: calc(100% - var(--xc) + 3px); height: calc((var(--y6) - var(--y5)) / 2 + 1px);
  border-top-width: 2px; border-left-width: 2px; border-top-left-radius: var(--R); }
.ko-kaart-ios .ko-l3b { left: calc(var(--tx) + var(--S) - 14px); top: calc((var(--y5) + var(--y6)) / 2); width: calc(var(--xc) + 15px - var(--tx) - var(--S)); height: calc((var(--y6) - var(--y5)) / 2 + 1px);
  border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: var(--R); }
/* 4 (smal). Recht van de onderrand omhoog de onderkant van de tegel in. */
.ko-kaart-ios .ko-l4 { left: calc(var(--tx) + var(--S) * 0.5 - 1px); top: calc(var(--ty) + var(--S) - 14px); width: 2px; height: calc(100% - var(--ty) - var(--S) + 16px); border-left-width: 2px; }
/* Welke lijnen per indeling: breed en half 1, 2 en 3; smal en hoog 1, 2, 3 en 4. */
.ko-kaart-ios .ko-l3a, .ko-kaart-ios .ko-l3b, .ko-kaart-ios .ko-l4 { display: none; }
@container ko-ios (max-width: 429.98px) and (min-height: 240px) {
  .ko-kaart-ios .ko-l3m { display: none; }
  .ko-kaart-ios .ko-l3a, .ko-kaart-ios .ko-l3b, .ko-kaart-ios .ko-l4 { display: block; }
}

/* ============ De AI-tegel ============
   Blauw glas, één licht van boven: een witte rand waar het daglicht op de bovenrand valt, een zachte hemel over de
   bovenhelft en een diepe schaduw. In de film licht hij kort op als een puls aankomt (--ko-licht, 0 tot 1). */
.ko-kaart-ios .ko-obj { position: absolute; z-index: 4; }
.ko-kaart-ios .ko-ai-app { left: var(--tx); top: var(--ty); width: var(--S); height: var(--S); --ko-licht: 0; }
.ko-kaart-ios .ko-ai-tegel { position: absolute; inset: 0; border-radius: 23%; overflow: hidden; color: #fff;
  background:
    radial-gradient(70% 52% at 50% 112%, rgba(191, 219, 254, 0.7), rgba(147, 197, 253, 0.2) 55%, rgba(147, 197, 253, 0) 75%),
    radial-gradient(120% 80% at 18% -10%, rgba(219, 234, 254, 0.6), rgba(219, 234, 254, 0) 52%),
    linear-gradient(180deg, #3d7df5 0%, #2257e0 38%, #1a43c0 72%, #15359c 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -14px 26px -12px rgba(6, 18, 70, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0 0 calc(var(--ko-licht) * 6px) rgba(191, 219, 254, calc(var(--ko-licht) * 0.28)),
    0 0 calc(var(--ko-licht) * 46px) rgba(147, 197, 253, calc(var(--ko-licht) * 0.75)),
    0 1px 2px rgba(6, 18, 70, 0.4),
    0 18px 30px -14px rgba(6, 18, 70, 0.7),
    0 52px 84px -40px rgba(6, 14, 50, 0.7); }
/* De hemel in de bovenhelft: een glans met een zachte onderrand, recht van voren. */
.ko-kaart-ios .ko-ai-tegel::before { content: ""; position: absolute; z-index: 2; left: 3%; right: 3%; top: 2.5%; height: 47%; border-radius: 22% 22% 48% 48% / 34% 34% 20% 20%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.16) 58%, rgba(255, 255, 255, 0.02) 100%); }
/* De rand van licht, wit boven en blauwig onder. */
.ko-kaart-ios .ko-ai-tegel::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; padding: 1.5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 20%, rgba(255, 255, 255, 0) 45%, rgba(191, 219, 254, 0) 75%, rgba(191, 219, 254, 0.75) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* Het licht van binnen bij een aankomst. */
.ko-kaart-ios .ko-ai-flits { position: absolute; z-index: 0; inset: 0; opacity: var(--ko-licht);
  background: radial-gradient(62% 62% at 50% 52%, rgba(219, 234, 254, 0.75) 0%, rgba(147, 197, 253, 0.35) 45%, rgba(147, 197, 253, 0) 80%); }
.ko-kaart-ios .ko-ai-letters { position: absolute; left: 50%; top: 50%; z-index: 1; width: 66%; transform: translate(-50%, -47%); display: block;
  filter: drop-shadow(0 1px 1px rgba(6, 18, 70, 0.55)); }
.ko-kaart-ios .ko-ai-letters svg { display: block; width: 100%; height: auto; overflow: visible; }
/* De blauwe flikker van het merk is op blauw glas lichtblauw. */
.ko-kaart-ios .ko-ai-letters text[fill] { fill: #bfdbfe; }
/* De flikkering bij een aankomst: alle tekens vol en wit, de spookletter feller, twee regels even uit het lood. */
.ko-kaart-ios .ko-flikker text { opacity: 1; fill: #ffffff; }
.ko-kaart-ios .ko-flikker svg > g[opacity] { opacity: 0.62; }
.ko-kaart-ios .ko-flikker g[data-rij]:nth-child(5n + 2) { transform: translateX(-46px); }
.ko-kaart-ios .ko-flikker g[data-rij]:nth-child(7n + 4) { transform: translateX(38px); }

/* ============ De motor in deze kaart ============
   Alleen de pulsen op de lijnen (../_motor/motor.js, zon: null); de schuine glansstreep en het schuine spoor van de
   pakketjes blijven weg, want alles staat recht. */
.ko-kaart-ios .ko-film .mt-chip-glans, .ko-kaart-ios .ko-film .mt-pakket-spoor { display: none !important; }
.ko-kaart-ios .ko-film .mt-ring-zacht { display: none; }

/* ======================================================================
   De samenstelling zelf (sectie.css zonder de pagina eromheen)
   ====================================================================== */
/* sectie.css: de samenstelling van de dienstensectie (21 oktober 2026).
   De opmaak van de kaarten komt ongewijzigd uit ../spoor-mix/stijl.css (.diensten, .dk-*, .dienst-*). Elke grote kaart
   brengt haar eigen regels mee onder haar eigen wortelklasse (planning.css met kt-, en de kopieën van de modules:
   recruitment.css, leads.css, ios.css). Hier staat alleen wat de samenstelling zelf nodig heeft: de pagina
   rond de sectie, de plek van leads in het raster van de mix, de wachtkaarten
   voor een module die er nog niet is, en de kleine levende details bij de drie kleine diensten (letterlijk uit
   ../diensten-kaarten). Voorvoegsel ds-, behalve de overgenomen kt-regels. */

/* ============ Het raster ============
   Het raster van de mix met vier kaarten: recruitment (5 van 12) en planning (7), leads en scrapers op de plek van
   websites in de mix (7) en iOS (5); van 600 tot 1199 px twee kolommen, onder 600 px de veegrij, zoals in de mix. De
   brede kaart Websites is op 21 oktober om 18:14 vervallen. */
.dk-raster > [data-dienst="leads"] { grid-column: span 7; }
@media (max-width: 1199px) {
  .dk-raster > [data-dienst="leads"] { grid-column: span 6; }
}

/* ============ De grond van iOS: leesbaar ============
   Besluit van de regie (21 oktober, 19:22): de grond van de mix (stijl.css, .dk-ios) begint bovenin op #3b82f6 met een
   lichte gloed achter de naam; wit haalt daar 2,6 tot 3,1. Hier begint het verloop op #2563eb, de gloed staat achter de
   tegel rechtsonder en de zin is 0,94 wit: naam en zin halen dan 4,9 of meer. stijl.css blijft ongewijzigd. */
.diensten .dk-ios { background: radial-gradient(55% 45% at 78% 80%, rgba(191, 219, 254, 0.42), 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, #2563eb 0%, #1d4ed8 100%); }
.diensten .dk-ios .dk-zin { color: rgba(255, 255, 255, 0.94); }

/* ============ Wachtkaarten ============
   Zolang een module er nog niet is, staat op haar plek de kaart met naam, zin en knop en een leeg beeldvak, op de grond
   van die plek in de mix (leads op de donkere grond van websites). */
.ds-wacht-donker { 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); }
.ds-wacht-donker .dk-zin { color: rgba(255, 255, 255, 0.7); }
.ds-wacht-donker .dk-knop:focus-visible { outline-color: #fff; }

/* ================================================================
   De drie kleine diensten: hooguit een klein levend detail in het icoon (letterlijk uit ../diensten-kaarten/sectie.css)
   ================================================================ */
.kt-ico-training, .kt-ico-workshop, .kt-ico-scan { position: relative; }
.kt-boog { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.kt-boog rect { fill: none; stroke-width: 1.6; }
.kt-boog-grond { stroke: rgba(37, 99, 235, 0.14); }
/* Drie van de vier sessies gedaan: de boog staat op driekwart. */
.kt-boog-vol { stroke: var(--blauw); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 25; }
.kt-blok { transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.kt-scanregel { transform: translateY(0); }
@keyframes kt-boog-trek { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 25; } }
@keyframes kt-scan { 0% { transform: translateY(-4px); } 50% { transform: translateY(4px); } 100% { transform: translateY(0); } }
.dienst-klein:hover .kt-boog-vol, .kt-speel .kt-boog-vol { animation: kt-boog-trek 1.4s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
/* Samen kiezen wat eerst komt: het gekozen blok schuift naar voren, de andere maken plaats. */
.dienst-klein:hover .kt-blok-c, .kt-speel .kt-blok-c { transform: translate(-4px, -7.6px); }
.dienst-klein:hover .kt-blok-a, .kt-speel .kt-blok-a { transform: translate(8px, 0); }
.dienst-klein:hover .kt-blok-b, .kt-speel .kt-blok-b { transform: translate(-4px, 7.6px); }
.dienst-klein:hover .kt-scanregel, .kt-speel .kt-scanregel { animation: kt-scan 1.5s ease-in-out both; }