/* Productbeleving onder de hero van de modulepagina's (urenregistratie, productieregistratie, toegangscontrole).
   Opzet naar de manier waarop Apple een product laat zien: één idee per sectie, grote kop met weinig woorden,
   en een visual die het laat zien in plaats van het uit te leggen. Motion is scroll-gestuurd en omkeerbaar.
   Prefix dkbel. Kleuren en letter blijven de Duinker-huisstijl. */

.dkbel, .dkbel *{ box-sizing:border-box; }
.dkbel{
  width:100%; color:#171A1B; background:#fff;
  font-family:"General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.01em;
}
.dkbel p, .dkbel h2, .dkbel h3, .dkbel ul, .dkbel ol{ margin:0; }
.dkbel ul, .dkbel ol{ padding:0; list-style:none; }
.dkbel ::selection{ background:#FFB71B; color:#171A1B; }
.dkbel :focus-visible{ outline:2px solid #FFB71B; outline-offset:4px; border-radius:8px; }
.dkbel-binnen{ max-width:1110px; margin:0 auto; }
.dkbel-sectie{ padding:clamp(80px,9vw,140px) 24px; }
.dkbel-sectie--creme{ background:#F7F5F2; }
.dkbel-sectie--donker{ background:#171A1B; color:#F7F5F2; }

/* ── Typografie: tracking en leading per grootte (groot strak, klein ruim) ─────────── */
.dkbel-display{ font-weight:600; font-size:clamp(38px,4.8vw,66px); line-height:0.98; letter-spacing:-0.045em; text-wrap:balance; color:#171A1B; }
.dkbel-display em{ display:block; font-style:normal; color:rgba(23,26,27,0.5); }
.dkbel-sectie--donker .dkbel-display{ color:#F7F5F2; }
.dkbel-sectie--donker .dkbel-display em{ color:rgba(247,245,242,0.52); }
.dkbel-h2{ font-weight:600; font-size:clamp(30px,3.8vw,52px); line-height:1.04; letter-spacing:-0.035em; text-wrap:balance; color:#171A1B; }
.dkbel-sectie--donker .dkbel-h2, .dkbel-verhaal .dkbel-h2{ color:#F7F5F2; }
.dkbel-h3{ font-weight:600; font-size:clamp(24px,2.7vw,36px); line-height:1.1; letter-spacing:-0.03em; text-wrap:balance; }
.dkbel-tekst{ font-size:clamp(16px,1.25vw,19px); line-height:1.55; letter-spacing:-0.005em; color:rgba(23,26,27,0.62); text-wrap:pretty; }
.dkbel-sectie--donker .dkbel-tekst{ color:rgba(247,245,242,0.66); }
.dkbel-tekst b{ font-weight:600; color:#171A1B; }
.dkbel-sectie--donker .dkbel-tekst b{ color:#F7F5F2; }
.dkbel-label{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:rgba(23,26,27,0.62); }
.dkbel-sectie--donker .dkbel-label, .dkbel-verhaal .dkbel-label{ color:#FFB71B; }
.dkbel-stip{ width:7px; height:7px; border-radius:50%; background:#FFB71B; flex:none; box-shadow:0 0 0 4px rgba(255,183,27,0.18); }

/* ── Knoppen: reactie op indrukken, niet pas bij loslaten ─────────────────────────── */
.dkbel-knop{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 28px;
  border-radius:999px; font-size:16px; font-weight:600; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap;
  background:#FFB71B; color:#171A1B; box-shadow:0 12px 30px -14px rgba(255,183,27,0.85);
  transition:transform .18s cubic-bezier(.16,1,.3,1), background-color .18s ease, box-shadow .18s ease;
}
.dkbel-knop svg{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.dkbel-knop:hover{ background:#FFC53F; transform:translateY(-1px); }
.dkbel-knop:hover svg{ transform:translateX(3px); }
.dkbel-knop:active{ transform:scale(.97); transition-duration:.08s; }
.dkbel-link{ display:inline-flex; align-items:center; gap:7px; font-size:16px; font-weight:600; color:#171A1B; text-decoration:none; border-bottom:2px solid #FFB71B; padding-bottom:2px; transition:color .18s ease, border-color .18s ease; }
.dkbel-link:hover{ border-bottom-color:#171A1B; }
.dkbel-link svg{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.dkbel-link:hover svg{ transform:translateX(3px); }

/* ── 1. Statement: één zin, groot, gecentreerd ─────────────────────────────────────── */
.dkbel-statement{ text-align:center; padding-top:clamp(56px,6.5vw,92px); padding-bottom:clamp(56px,6.5vw,92px); }
.dkbel-statement .dkbel-display{ max-width:28ch; margin:0 auto; }
.dkbel-statement .dkbel-tekst{ max-width:50ch; margin:clamp(22px,2.6vw,34px) auto 0; font-size:clamp(17px,1.4vw,21px); }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    .dkbel-statement .dkbel-display{ animation:dkbel-rijs linear both; animation-timeline:view(); animation-range:entry 10% entry 70%; }
    .dkbel-statement .dkbel-tekst{ animation:dkbel-rijs linear both; animation-timeline:view(); animation-range:entry 10% entry 80%; }
  }
}
@keyframes dkbel-rijs{ from{ opacity:0; transform:translateY(28px) scale(.985); } to{ opacity:1; transform:none; } }

/* ── 2. Verhaal: vaste visual links, hoofdstukken scrollen erlangs ─────────────────── */
.dkbel-verhaal{ --dkbel-zijkant:24px; --dkbel-lucht:clamp(12px,2.4vh,30px); --dkbel-ruimte:calc(100vh - var(--dk-navh,142px) - var(--dkbel-koph,150px) - var(--dkbel-lucht,20px) * 2 - 20px); --dkbel-band:min(var(--dkbel-ruimte), 640px); --dkbel-midden:max(0px, (var(--dkbel-ruimte) - var(--dkbel-band)) / 2); --dkbel-toneeltop:calc(var(--dk-navh,142px) + var(--dkbel-lucht,20px) + var(--dkbel-midden,0px) + var(--dkbel-koph,150px) + 20px); background:#171A1B; color:#F7F5F2; padding:calc(clamp(40px,5vw,72px) + var(--dkbel-midden,0px)) var(--dkbel-zijkant) clamp(40px,5vw,80px); }
/* De kop blijft bovenaan het donkere vlak staan terwijl de stappen eronder doorlopen; de hoogte
   ervan (--dkbel-koph, gemeten in duinker.js) schuift het toneel naar beneden.
   --dkbel-lucht zet de kop los van de navigatiebalk en geeft het toneel er onderaan evenveel
   terug, zodat kop en toneel samen als een blok midden in het beeld staan in plaats van
   tegen de bovenrand geplakt. De maat schaalt mee met de schermhoogte. */
.dkbel-verhaal-kop{ position:sticky; top:calc(var(--dk-navh,142px) + var(--dkbel-lucht,20px) + var(--dkbel-midden,0px)); z-index:3; margin:0 calc(-1 * var(--dkbel-zijkant)); padding:18px var(--dkbel-zijkant) 22px; background:#171A1B; text-align:center; }
.dkbel-verhaal-kop::after{ content:""; position:absolute; left:0; right:0; top:100%; height:clamp(44px,7vh,88px); background:linear-gradient(#171A1B, rgba(23,26,27,0)); pointer-events:none; }
/* Dekt de strook tussen navigatie en kop af, zodat de vorige stap daar niet doorheen gluurt. */
.dkbel-verhaal-kop::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:calc(var(--dkbel-lucht,20px) + var(--dkbel-midden,0px) + 6px); background:#171A1B; pointer-events:none; }
.dkbel-verhaal-kop .dkbel-h2{ max-width:20ch; margin:0 auto; }
.dkbel-verhaal-binnen{ max-width:1110px; margin:clamp(24px,3vw,48px) auto 0; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(36px,6vw,110px); align-items:start; }
.dkbel-toneel{ position:sticky; top:var(--dkbel-toneeltop); height:var(--dkbel-band); display:grid; place-items:center; }
.dkbel-podium{ position:relative; width:min(100%,460px); height:100%; max-height:460px; }
.dkbel-hoofdstukken{ display:flex; flex-direction:column; }
.dkbel-hoofdstuk{ min-height:72vh; display:flex; flex-direction:column; justify-content:flex-start; padding:24px 0; opacity:.14; transition:opacity .5s ease; }
/* De tekst parkeert op dezelfde hoogte als het toneel zolang zijn hoofdstuk aan de beurt is. Zonder
   dit schoof elke kop tijdens het lezen omhoog tot achter de vastgezette titel, waar hij half
   wegviel. Het omhulsel wordt in duinker.js om de inhoud heen gezet. */
.dkbel-hoofdstuk-in{ position:sticky; top:calc(var(--dkbel-toneeltop) + var(--dkbel-band) / 2); transform:translateY(-50%); }
.dkbel-hoofdstuk.is-actief{ opacity:1; }
.dkbel-hoofdstuk:first-child{ min-height:56vh; }
.dkbel-hoofdstuk:last-child{ min-height:72vh; } /* minstens zo hoog als het toneel, anders schuift de laatste kaart al weg terwijl je nog leest */
.dkbel-hoofdstuk .dkbel-label{ margin-bottom:14px; }
.dkbel-hoofdstuk .dkbel-h3{ color:#F7F5F2; max-width:16ch; }
.dkbel-hoofdstuk .dkbel-tekst{ margin-top:16px; max-width:40ch; color:rgba(247,245,242,0.66); }

/* Kaarten op het podium: één actief, de rest wacht buiten beeld. Kritisch gedempt: geen doorschieten. */
.dkbel-kaart{
  position:absolute; inset:0; margin:auto; width:min(100%,420px); height:max-content; max-height:100%;
  border-radius:24px; padding:22px;
  background:linear-gradient(180deg, rgba(247,245,242,0.09), rgba(247,245,242,0.035));
  border:1px solid rgba(247,245,242,0.11);
  box-shadow:0 50px 90px -40px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.2);
  opacity:0; transform:translateY(46px) scale(.94); pointer-events:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
  will-change:transform, opacity;
}
.dkbel-kaart.is-weg{ transform:translateY(-40px) scale(.94); }
.dkbel-kaart.is-actief{ opacity:1; transform:none; pointer-events:auto; }
.dkbel-kaartkop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid rgba(247,245,242,0.1); }
.dkbel-kaarttitel{ display:inline-flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#F7F5F2; letter-spacing:-0.015em; }
.dkbel-kaartsub{ font-size:12px; color:rgba(247,245,242,0.52); }
.dkbel-pols{ position:relative; width:8px; height:8px; border-radius:50%; background:#FFB71B; flex:none; }
.dkbel-pols::after{ content:""; position:absolute; inset:0; border-radius:50%; background:#FFB71B; animation:dkbel-puls 1.8s ease-out infinite; }
@keyframes dkbel-puls{ 0%{ transform:scale(1); opacity:.55; } 100%{ transform:scale(2.6); opacity:0; } }

/* Bouwstenen binnen kaarten */
.dkbel-groot{ margin-top:16px; display:flex; align-items:baseline; gap:10px; }
.dkbel-grootgetal{ font-size:clamp(38px,4vw,52px); font-weight:600; letter-spacing:-0.04em; line-height:1; color:#FFB71B; font-variant-numeric:tabular-nums; }
.dkbel-grootlabel{ font-size:13px; color:rgba(247,245,242,0.55); }
.dkbel-rijen{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.dkbel-rij{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; font-size:12.5px; color:rgba(247,245,242,0.55); }
.dkbel-rij b{ font-weight:600; color:#F7F5F2; font-variant-numeric:tabular-nums; }
.dkbel-rijnaam{ min-width:34px; }
.dkbel-balk{ position:relative; height:8px; border-radius:99px; background:rgba(247,245,242,0.09); overflow:hidden; }
.dkbel-balk i{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:#FFB71B; width:var(--w,0%); transform-origin:left center; transform:scaleX(0); transition:transform 1s cubic-bezier(.16,1,.3,1) var(--d,0s); }
.is-actief .dkbel-balk i{ transform:scaleX(1); }
.dkbel-balk--teal i{ background:#47BFCE; }
.dkbel-chip{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 12px; border-radius:999px; font-size:12.5px; font-weight:600; background:rgba(255,183,27,0.14); border:1px solid rgba(255,183,27,0.32); color:#FFB71B; }
.dkbel-chip--wit{ background:rgba(247,245,242,0.08); border-color:rgba(247,245,242,0.14); color:#F7F5F2; }
.dkbel-chipvink{ display:grid; place-items:center; width:16px; height:16px; border-radius:50%; background:#FFB71B; color:#171A1B; }
.dkbel-voet{ margin-top:16px; padding-top:14px; border-top:1px solid rgba(247,245,242,0.1); display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:12.5px; color:rgba(247,245,242,0.55); }
.dkbel-voet b{ color:#F7F5F2; font-weight:600; font-size:18px; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.dkbel-personen{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.dkbel-persoon{ display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:rgba(247,245,242,0.05); border:1px solid rgba(247,245,242,0.07); font-size:13px; }
.dkbel-persoon b{ display:block; font-weight:600; color:#F7F5F2; }
.dkbel-persoon small{ display:block; font-size:11.5px; color:rgba(247,245,242,0.52); }
.dkbel-persoon time{ font-size:12.5px; color:rgba(247,245,242,0.6); font-variant-numeric:tabular-nums; }
.dkbel-avatar{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; color:#171A1B; background:#FFB71B; }
.dkbel-avatar--teal{ background:#47BFCE; }
.dkbel-avatar--licht{ background:#F7F5F2; }
.dkbel-persoon.is-uit{ opacity:.45; }
.dkbel-logos{ margin-top:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.dkbel-logo{ display:grid; place-items:center; height:52px; border-radius:14px; background:#F7F5F2; padding:10px; }
.dkbel-logo{ --logo-maat:46px; }
.dkbel-logo img{ max-width:100%; max-height:32px; object-fit:contain; filter:grayscale(1); opacity:.85; }
.dkbel-slot{ position:relative; display:grid; place-items:center; width:64px; height:64px; margin:0 auto; border-radius:20px; background:rgba(247,245,242,0.07); border:1px solid rgba(247,245,242,0.12); color:#F7F5F2; }
.dkbel-slot svg{ width:30px; height:30px; }
.dkbel-slot .dkbel-beugel{ transition:transform .5s cubic-bezier(.16,1,.3,1) .35s; transform-origin:right bottom; }
.is-actief .dkbel-slot .dkbel-beugel{ transform:rotate(-22deg) translateY(-2px); }
.is-actief .dkbel-slot{ box-shadow:0 0 0 6px rgba(255,183,27,0.16); border-color:rgba(255,183,27,0.45); }
.dkbel .dkbel-slotregel{ margin-top:14px; text-align:center; font-size:13px; color:rgba(247,245,242,0.6); }
.dkbel-slotregel b{ display:block; font-size:16px; font-weight:600; color:#F7F5F2; margin-bottom:2px; }
.dkbel-matrix{ margin-top:14px; display:grid; grid-template-columns:auto repeat(3,minmax(0,1fr)); gap:6px; font-size:11.5px; color:rgba(247,245,242,0.55); align-items:center; }
.dkbel-matrix > span:first-child{ visibility:hidden; }
.dkbel-matrixkop{ text-align:center; font-weight:600; color:rgba(247,245,242,0.7); padding-bottom:4px; }
.dkbel-matrixrij{ color:#F7F5F2; font-weight:600; padding-right:6px; white-space:nowrap; }
.dkbel-cel{ display:grid; place-items:center; height:30px; border-radius:9px; background:rgba(247,245,242,0.05); border:1px solid rgba(247,245,242,0.07); }
.dkbel-cel.is-ja{ background:rgba(255,183,27,0.16); border-color:rgba(255,183,27,0.35); color:#FFB71B; }
.dkbel-cel.is-nee{ color:rgba(247,245,242,0.25); }
.dkbel-cel svg{ width:12px; height:12px; }
.dkbel-toast{ display:flex; align-items:center; gap:10px; margin-top:16px; padding:12px 14px; border-radius:14px; background:#F7F5F2; color:#171A1B; font-size:13.5px; font-weight:600; box-shadow:0 20px 40px -24px rgba(0,0,0,.9); transform:translateY(8px); opacity:0; transition:transform .5s cubic-bezier(.16,1,.3,1) .45s, opacity .4s ease .45s; }
.is-actief .dkbel-toast{ transform:none; opacity:1; }
.dkbel-toast .dkbel-chipvink{ width:20px; height:20px; }
.dkbel-toast small{ display:block; font-weight:400; font-size:12px; color:rgba(23,26,27,0.62); }

/* ── 2b. Manieren: drie manieren waarop het binnenkomt, beeld eerst, dan woorden ──── */
.dkbel-manieren{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,36px); }
.dkbel-manier{ display:flex; flex-direction:column; gap:10px; }
.dkbel-manier p{ margin:0; }
.dkbel-manier-beeld{ position:relative; height:clamp(176px,15vw,212px); border-radius:24px; background:#F7F5F2; display:grid; place-items:center; overflow:hidden; margin-bottom:10px; }
.dkbel-manier strong{ display:block; font-size:clamp(19px,1.5vw,22px); font-weight:600; letter-spacing:-0.02em; line-height:1.15; color:#171A1B; }
.dkbel-manier .dkbel-tekst{ font-size:16px; max-width:36ch; }
.dkbel-manier .dkbel-link{ align-self:flex-start; margin-top:4px; }
/* terminal: donker schermpje met de tijd */
.dkbel-mini-terminal{ width:min(200px,80%); background:#171A1B; color:#F7F5F2; border-radius:18px; padding:14px 16px 16px; box-shadow:0 24px 40px -22px rgba(23,26,27,0.55); transform:translateY(12px); transition:transform .9s cubic-bezier(.16,1,.3,1); }
.dkbel-manier.is-in .dkbel-mini-terminal{ transform:none; }
.dkbel-mini-terminal-kop{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:rgba(247,245,242,0.55); }
.dkbel-mini-terminal-tijd{ margin-top:10px; font-size:30px; font-weight:600; letter-spacing:-0.03em; line-height:1; color:#FFB71B; font-variant-numeric:tabular-nums; }
.dkbel-mini-terminal-wie{ margin-top:8px; font-size:12.5px; color:rgba(247,245,242,0.75); }
/* app: een telefoon met start, pauze en stop */
.dkbel-mini-app{ width:96px; height:158px; border-radius:22px; background:#171A1B; border:3px solid #2B2F31; padding:14px 9px 9px; display:flex; flex-direction:column; gap:7px; box-shadow:0 24px 40px -22px rgba(23,26,27,0.55); transform:translateY(14px) rotate(-3deg); transition:transform .9s cubic-bezier(.16,1,.3,1); }
.dkbel-manier.is-in .dkbel-mini-app{ transform:rotate(-3deg); }
.dkbel-mini-app-tijd{ display:block; text-align:center; font-size:13px; font-weight:600; color:#F7F5F2; letter-spacing:-0.01em; margin-bottom:4px; font-variant-numeric:tabular-nums; }
.dkbel-mini-app i{ display:grid; place-items:center; height:28px; border-radius:14px; background:rgba(247,245,242,0.1); color:rgba(247,245,242,0.55); font-style:normal; font-size:11px; font-weight:600; }
.dkbel-mini-app i.is-aan{ background:#FFB71B; color:#171A1B; }
/* sleutel: de fob en een deur die opengaat als je erlangs scrolt */
/* Kloksleutel en deur, in de stijl van de terminal en de app ernaast: een donker kaartje met de lezer
   (rvs rand, zwarte ring, rvs kern, groen bij toegang) en de kloksleutel ertegen. De sleutel is getekend
   naar foto's van de echte iButton-sleutel: ronde kop met ribbels, rechte zwarte band met gripnopjes en
   het gat voor de sleutelring. */
.dkbel-mini-toegang{ position:relative; width:min(200px,58%); margin-right:84px; transform:translateY(12px); transition:transform .9s cubic-bezier(.16,1,.3,1); }
.dkbel-manier.is-in .dkbel-mini-toegang{ transform:none; }
/* Kaart als de terminal ernaast; de lezer hangt op de rechterrand, de sleutel tikt er van buitenaf tegen. */
.dkbel-mini-toegang-kaart{ background:#171A1B; color:#F7F5F2; border-radius:18px; padding:14px 16px 16px; box-shadow:0 24px 40px -22px rgba(23,26,27,0.55); }
.dkbel-mini-lezer{ position:absolute; right:-25px; top:50%; display:grid; place-items:center; width:50px; height:50px; margin-top:-25px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #F4F5F6, #B3B8BD 45%, #7D8287 78%, #D3D6D9 100%);
  box-shadow:0 0 0 3px #5FD38D, 0 0 18px 3px rgba(95,211,141,0.35), 0 10px 18px -8px rgba(23,26,27,0.5); }
.dkbel-mini-lezer::before{ content:""; grid-area:1/1; width:34px; height:34px; border-radius:50%; background:#141516; }
.dkbel-mini-lezer i{ grid-area:1/1; width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #FBFBFC, #9EA3A8 60%, #C9CDD1); }
/* De sleutel ligt met de munt op de lezer: je ziet de achterkant met de ribbels, de kop precies op het midden van de lezer. */
.dkbel-mini-fob{ position:absolute; right:-20px; top:50%; width:40px; height:auto; transform:translateY(-20px) rotate(-38deg); transform-origin:50% 22%; filter:drop-shadow(0 0 1px rgba(247,245,242,0.55)) drop-shadow(0 14px 12px rgba(23,26,27,0.35)); }
/* lijn: een band met kisten en een teller */
.dkbel-mini-lijn{ width:min(210px,82%); text-align:center; }
.dkbel-mini-lijn-teller{ font-size:13px; color:rgba(23,26,27,0.55); margin-bottom:16px; }
.dkbel-mini-lijn-teller b{ font-size:26px; font-weight:600; letter-spacing:-0.03em; color:#171A1B; margin-right:4px; font-variant-numeric:tabular-nums; }
.dkbel-mini-lijn-band{ position:relative; height:44px; box-shadow:inset 0 -3px 0 #171A1B; display:flex; align-items:flex-end; justify-content:space-between; padding:0 6px; }
.dkbel-mini-lijn-band i{ width:34px; height:28px; border-radius:6px 6px 3px 3px; background:#171A1B; opacity:.18; transform:translateX(18px); transition:opacity .6s ease, transform .9s cubic-bezier(.16,1,.3,1); }
.dkbel-mini-lijn-band i:nth-child(2){ transition-delay:.12s; } .dkbel-mini-lijn-band i:nth-child(3){ transition-delay:.24s; } .dkbel-mini-lijn-band i:nth-child(4){ transition-delay:.36s; }
.dkbel-manier.is-in .dkbel-mini-lijn-band i{ opacity:1; transform:none; }
.dkbel-manier.is-in .dkbel-mini-lijn-band i:nth-child(3){ background:#FFB71B; }
/* invoer: een formuliertje */
.dkbel-mini-invoer{ width:min(210px,82%); display:flex; flex-direction:column; gap:8px; }
.dkbel-mini-invoer-veld{ background:#fff; border:1px solid rgba(23,26,27,0.1); border-radius:12px; padding:9px 12px; display:flex; flex-direction:column; gap:2px; }
.dkbel-mini-invoer-veld span{ font-size:11px; color:rgba(23,26,27,0.5); }
.dkbel-mini-invoer-veld b{ font-size:15px; font-weight:600; color:#171A1B; }
.dkbel-mini-invoer-knop{ align-self:flex-end; background:#171A1B; color:#F7F5F2; font-size:12px; font-weight:600; padding:7px 14px; border-radius:999px; }
/* deurkaart: welke deur, welk slot, welke regel */
.dkbel-mini-deurkaart{ width:min(200px,80%); background:#171A1B; color:#F7F5F2; border-radius:18px; padding:14px 16px; display:flex; flex-direction:column; gap:12px; box-shadow:0 24px 40px -22px rgba(23,26,27,0.55); }
.dkbel-mini-deurkop b{ display:block; font-size:14px; font-weight:600; }
.dkbel-mini-deurkop span{ font-size:11.5px; color:rgba(247,245,242,0.55); }
.dkbel-mini-deurslot{ width:40px; height:40px; border-radius:12px; background:rgba(247,245,242,0.08); display:grid; place-items:center; color:#FFB71B; }
.dkbel-mini-deurslot svg{ width:20px; height:20px; }
.dkbel-mini-deurslot .dkbel-beugel{ transform-origin:right bottom; transition:transform .5s cubic-bezier(.16,1,.3,1) .35s; }
.dkbel-manier.is-in .dkbel-mini-deurslot:not(.is-dicht) .dkbel-beugel{ transform:rotate(-22deg) translateY(-2px); }
.dkbel-mini-deurslot.is-dicht{ color:rgba(247,245,242,0.55); }
.dkbel-mini-deurchip{ align-self:flex-start; font-size:11.5px; font-weight:600; color:#171A1B; background:#FFB71B; padding:5px 10px; border-radius:999px; }

/* ── 3. Bento: één groot vlak dat de kern laat zien, kleine tegels met elk één ding ─ */
.dkbel-bentokop{ max-width:640px; margin:0 0 clamp(32px,4vw,52px); }
.dkbel-bentokop .dkbel-tekst{ margin-top:14px; }
.dkbel-bento{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:minmax(212px,auto); gap:16px; }
.dkbel-tegel{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:10px; padding:26px 26px 24px;
  border-radius:24px; background:#fff; border:1px solid rgba(23,26,27,0.08); color:#171A1B;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.dkbel-tegel:hover{ transform:translateY(-3px); border-color:rgba(23,26,27,0.16); box-shadow:0 30px 50px -36px rgba(23,26,27,0.5); }
.dkbel-tegel:active{ transform:scale(.985); transition-duration:.1s; }
.dkbel-tegel--groot{ grid-column:span 2; grid-row:span 2; }
.dkbel-tegel--breed{ grid-column:span 2; }
/* Sluit een brede tegel het raster af, dan wordt hij een volle band: tekst links, beeld rechts. Geen halve lege rij. */
.dkbel-tegel--breed:last-child{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:36px; align-items:start; }
.dkbel-tegel--breed:last-child .dkbel-tegelkop, .dkbel-tegel--breed:last-child .dkbel-tegeltekst{ grid-column:1; }
.dkbel-tegel--breed:last-child .dkbel-tegelvisual{ grid-column:2; grid-row:1 / span 2; padding-top:0; align-self:center; }
/* Maar naast de grote tegel is nog plek (kolom 3 en 4, rij 2): dan vult de brede tegel die plek op
   in plaats van een volle band eronder met een lege rij erboven. Koppelingen (groot, 2 klein, breed)
   en Over ons (groot, 1, breed; daar wordt de middelste ook breed). */
.dkbel-tegel--groot:first-child + .dkbel-tegel + .dkbel-tegel + .dkbel-tegel--breed:last-child,
.dkbel-tegel--groot:first-child + .dkbel-tegel + .dkbel-tegel--breed:last-child{ grid-column:span 2; display:flex; }
.dkbel-tegel--groot:first-child + .dkbel-tegel:nth-last-child(2){ grid-column:span 2; }
.dkbel-tegel--donker{ background:#171A1B; color:#F7F5F2; border-color:transparent; }
.dkbel-tegel--geel{ background:#FFB71B; color:#171A1B; border-color:transparent; }
.dkbel-tegelkop{ font-size:clamp(19px,1.6vw,23px); font-weight:600; letter-spacing:-0.025em; line-height:1.15; text-wrap:balance; }
.dkbel-tegel--groot .dkbel-tegelkop{ font-size:clamp(26px,2.6vw,36px); letter-spacing:-0.03em; max-width:14ch; }
.dkbel-tegeltekst{ font-size:15px; line-height:1.5; color:rgba(23,26,27,0.62); text-wrap:pretty; max-width:34ch; }
.dkbel-tegel--donker .dkbel-tegeltekst{ color:rgba(247,245,242,0.62); }
.dkbel-tegel--geel .dkbel-tegeltekst{ color:rgba(23,26,27,0.7); }
.dkbel-tegelvisual{ margin-top:auto; padding-top:18px; }

/* Micro-visuals in tegels */
.dkbel-mini-getal{ font-size:clamp(40px,4.4vw,64px); font-weight:600; letter-spacing:-0.045em; line-height:1; font-variant-numeric:tabular-nums; }
.dkbel-mini-getal small{ font-size:.42em; font-weight:600; letter-spacing:-0.02em; color:rgba(23,26,27,0.55); margin-left:6px; }
.dkbel-tegel--donker .dkbel-mini-getal{ color:#FFB71B; }
.dkbel-tegel--donker .dkbel-mini-getal small{ color:rgba(247,245,242,0.5); }
.dkbel-mini-live{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(23,26,27,0.05); font-size:14px; font-weight:600; }
.dkbel-mini-live .dkbel-pols{ background:#17803D; } .dkbel-mini-live .dkbel-pols::after{ background:#17803D; }
.dkbel-mini-staven{ display:flex; align-items:flex-end; gap:6px; height:76px; }
.dkbel-mini-staven i{ flex:1; border-radius:6px 6px 3px 3px; background:rgba(23,26,27,0.12); height:var(--h,40%); transform-origin:bottom; transform:scaleY(0); transition:transform .8s cubic-bezier(.16,1,.3,1) var(--d,0s); }
.dkbel-mini-staven i.is-geel{ background:#FFB71B; }
.dk-appear.is-in .dkbel-mini-staven i, .dkbel-tegel.is-in .dkbel-mini-staven i{ transform:scaleY(1); }
.dkbel-mini-saldo{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dkbel-mini-saldo div{ padding:14px 16px; border-radius:16px; background:rgba(247,245,242,0.07); border:1px solid rgba(247,245,242,0.1); }
.dkbel-mini-saldo b{ display:block; font-size:24px; font-weight:600; letter-spacing:-0.03em; color:#F7F5F2; font-variant-numeric:tabular-nums; }
.dkbel-mini-saldo b.is-geel{ color:#FFB71B; }
.dkbel-mini-saldo span{ font-size:12px; color:rgba(247,245,242,0.55); }
.dkbel-mini-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.dkbel-mini-chips span{ display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:999px; font-size:13px; font-weight:600; background:rgba(23,26,27,0.06); color:#171A1B; }
.dkbel-tegel--donker .dkbel-mini-chips span{ background:rgba(247,245,242,0.1); color:#F7F5F2; }
.dkbel-tegel--geel .dkbel-mini-chips span{ background:rgba(23,26,27,0.1); }
.dkbel-mini-schakels{ display:flex; flex-direction:column; gap:8px; }
.dkbel-mini-schakels div{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13.5px; font-weight:500; }
.dkbel-schakel{ position:relative; width:40px; height:24px; border-radius:999px; background:rgba(23,26,27,0.15); flex:none; transition:background-color .3s ease; }
.dkbel-schakel::after{ content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .35s cubic-bezier(.16,1,.3,1); }
.dkbel-schakel.is-aan{ background:#171A1B; } .dkbel-schakel.is-aan::after{ transform:translateX(16px); }
.dkbel-tegel--geel .dkbel-schakel.is-aan{ background:#171A1B; }
.dkbel-mini-tijd{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.dkbel-mini-tijd div{ padding:12px 10px; border-radius:14px; text-align:center; background:rgba(23,26,27,0.05); font-size:12.5px; color:rgba(23,26,27,0.55); }
.dkbel-mini-tijd b{ display:block; font-size:15px; font-weight:600; color:#171A1B; margin-bottom:2px; font-variant-numeric:tabular-nums; }
.dkbel-mini-tijd div.is-aan{ background:#171A1B; color:rgba(247,245,242,0.6); } .dkbel-mini-tijd div.is-aan b{ color:#FFB71B; }
.dkbel-mini-deuren{ display:flex; flex-direction:column; gap:8px; }
.dkbel-mini-deuren div{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(23,26,27,0.05); font-size:13.5px; font-weight:500; }
.dkbel-mini-deuren div span:last-child{ font-size:12px; font-weight:600; color:#17803D; }
.dkbel-mini-deuren div.is-dicht span:last-child{ color:rgba(23,26,27,0.62); }

/* ── 4. Rij met logo's of chips ────────────────────────────────────────────────────── */
.dkbel-rijkop{ text-align:center; max-width:640px; margin:0 auto clamp(30px,3.6vw,48px); }
.dkbel-rijkop .dkbel-tekst{ margin:14px auto 0; }
.dkbel-logorij{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 34px; }
.dkbel-logorij{ --logo-maat:52px; }
.dkbel-logorij img{ max-width:140px; object-fit:contain; filter:grayscale(1); opacity:.55; transition:filter .3s ease, opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1); }
.dkbel-logorij a:hover img{ filter:none; opacity:1; transform:translateY(-2px); }
.dkbel-logorij a{ display:grid; place-items:center; padding:8px 4px; }
.dkbel-chipsrij{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.dkbel-chipsrij span{ display:inline-flex; align-items:center; height:42px; padding:0 18px; border-radius:999px; font-size:15px; font-weight:500; background:#fff; border:1px solid rgba(23,26,27,0.1); color:#171A1B; }
.dkbel .dkbel-rijvoet{ margin-top:clamp(26px,3vw,40px); text-align:center; }

/* ── 5. Prijs: één regel, groot ────────────────────────────────────────────────────── */
.dkbel-prijs{ text-align:center; }
.dkbel-prijs .dkbel-label{ justify-content:center; margin-bottom:18px; }
.dkbel-prijsregel{ font-weight:600; font-size:clamp(34px,4.8vw,66px); line-height:1.02; letter-spacing:-0.04em; color:#171A1B; text-wrap:balance; max-width:18ch; margin:0 auto; font-variant-numeric:tabular-nums; }
.dkbel-prijsregel em{ font-style:normal; color:rgba(23,26,27,0.5); }
.dkbel-prijs .dkbel-tekst{ max-width:46ch; margin:18px auto 0; }
.dkbel-prijs .dkbel-knop{ margin-top:clamp(26px,3vw,36px); }
.dkbel-prijsactie{ display:block; }
/* De noot staat soms in een blok met kopstijl erboven: tekenafstand en regelhoogte altijd zelf zetten. */
.dkbel .dkbel-prijsnoot{ margin-top:16px; font-size:14px; line-height:1.55; letter-spacing:normal;
  font-weight:400; color:rgba(23,26,27,0.62); text-wrap:pretty; }
.dkbel-prijsnoot a{ color:#171A1B; font-weight:600; text-decoration:underline; text-decoration-color:#FFB71B; text-decoration-thickness:2px; text-underline-offset:4px; }

/* ── 6. Varianten voor AI-assistent, app en koppelingen ─────────────────────────────── */
/* Telefoon als kaart: geen kaartopmaak, het toestel vult de hoogte van het toneel en vervaagt alleen */
.dkbel-kaart--toestel{ inset:0 auto 0 50%; margin:0; width:auto; height:100%; max-height:100%; aspect-ratio:0.476; padding:0; background:none; border:0; box-shadow:none; transform:translateX(-50%) scale(.97); }
.dkbel-kaart--toestel.is-weg{ transform:translateX(-50%) scale(.97); }
.dkbel-kaart--toestel.is-actief{ transform:translateX(-50%); }
.dkbel-toestelvlak, .dkbel-toestelvlak .dktel-kolom{ width:100%; height:100%; }
.dkbel-verhaal--toestel .dkbel-podium{ max-height:none; }
.dkbel-toestelvlak .dktel-vlak{ width:100% !important; }
/* Eén vaste kaart die per stap groeit: het AI-gesprek */
.dkbel-kaart.dkbel-kaart--vast, .dkbel-kaart.dkbel-kaart--vast.is-weg{ opacity:1; transform:none; pointer-events:auto; }
.dkbel-vonk{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:7px; background:rgba(255,183,27,0.16); color:#FFB71B; }
.dkbel-chat{ display:flex; flex-direction:column; gap:12px; margin-top:16px; }
.dkbel-chat-vraag{ align-self:flex-end; max-width:90%; min-height:41px; padding:11px 14px; border-radius:18px 18px 4px 18px; background:#FFB71B; color:#171A1B; font-size:14px; font-weight:600; line-height:1.35; }
.dkbel-chat-caret{ display:inline-block; width:2px; height:1em; background:#171A1B; margin-left:2px; vertical-align:-2px; animation:dkbel-caret 1s steps(2,start) infinite; }
@keyframes dkbel-caret{ to{ visibility:hidden; } }
.dkbel-chat-uitklap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .8s cubic-bezier(.16,1,.3,1); }
.dkbel-chat-uitklap > div{ min-height:0; overflow:hidden; }
.dkbel-chat-antwoord{ padding:14px; border-radius:18px 18px 18px 4px; background:rgba(247,245,242,0.07); border:1px solid rgba(247,245,242,0.1); opacity:0; transform:translateY(12px); transition:opacity .26s ease-out, transform .45s cubic-bezier(.16,1,.3,1); }
.dkbel-chat-antwoord p{ margin:0 0 6px; font-size:13.5px; color:rgba(247,245,242,0.8); }
.dkbel-chat-rij{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid rgba(247,245,242,0.08); font-size:13px; color:rgba(247,245,242,0.55); }
.dkbel-chat-rij b{ color:#F7F5F2; font-weight:600; }
.dkbel-chat-bevestig{ margin-top:6px; padding-top:12px; border-top:1px solid rgba(247,245,242,0.12); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; color:rgba(247,245,242,0.92); }
.dkbel-chat-knoppen{ display:flex; gap:6px; }
.dkbel-chat-knoppen span{ padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:600; background:rgba(247,245,242,0.14); border:1px solid rgba(247,245,242,0.28); color:#F7F5F2; }
.dkbel-chat-knoppen span:first-child{ background:rgba(255,183,27,0.22); border-color:rgba(255,183,27,0.7); color:#FFB71B; }
.dkbel-chat-klaar{ display:none; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border-radius:12px; background:#F7F5F2; color:#171A1B; font-size:13px; font-weight:600; }
.dkbel-verhaal:not([data-stap="0"]) .dkbel-chat-uitklap{ grid-template-rows:1fr; }
.dkbel-verhaal:not([data-stap="0"]) .dkbel-chat-antwoord{ opacity:1; transform:none; }
.dkbel-verhaal:not([data-stap="0"]) .dkbel-chat-caret{ display:none; }
.dkbel-verhaal[data-stap="2"] .dkbel-chat-bevestig{ display:none; }
.dkbel-verhaal[data-stap="2"] .dkbel-chat-klaar{ display:flex; }
/* Opdrachten als tegels: de categorie klein, de zin groot en tussen aanhalingstekens */
.dkbel-tegel--prompt .dkbel-tegelkop{ order:-1; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(23,26,27,0.62); }
.dkbel-tegel--prompt .dkbel-tegeltekst{ font-size:clamp(19px,1.6vw,23px); font-weight:600; letter-spacing:-0.025em; line-height:1.2; color:#171A1B; max-width:none; text-wrap:balance; }
.dkbel-tegel--prompt .dkbel-tegeltekst::before{ content:"“"; color:#FFB71B; margin-right:2px; } .dkbel-tegel--prompt .dkbel-tegeltekst::after{ content:"”"; color:#FFB71B; margin-left:2px; }
.dkbel-tegel--prompt.dkbel-tegel--groot .dkbel-tegeltekst{ font-size:clamp(24px,2.4vw,32px); letter-spacing:-0.03em; max-width:16ch; }
.dkbel-tegel--prompt.dkbel-tegel--donker .dkbel-tegelkop{ color:#FFB71B; } .dkbel-tegel--prompt.dkbel-tegel--donker .dkbel-tegeltekst{ color:#F7F5F2; }
.dkbel-tegel--prompt.dkbel-tegel--geel .dkbel-tegelkop{ color:rgba(23,26,27,0.8); } .dkbel-tegel--prompt.dkbel-tegel--geel .dkbel-tegeltekst::before, .dkbel-tegel--prompt.dkbel-tegel--geel .dkbel-tegeltekst::after{ color:#171A1B; }
/* Lijstje in een donkere tegel */
.dkbel-mini-lijst{ display:flex; flex-direction:column; gap:8px; }
.dkbel-mini-lijst div{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(247,245,242,0.06); border:1px solid rgba(247,245,242,0.08); font-size:13px; color:#F7F5F2; }
.dkbel-mini-lijst div span{ display:inline-flex; align-items:center; gap:8px; }
.dkbel-mini-lijst div b{ font-size:12px; font-weight:600; color:#FFB71B; white-space:nowrap; }
/* Grip-beelden op de AI-pagina */
.dkbel-manieren--4{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2vw,24px); }
.dkbel-manieren--4 .dkbel-manier-beeld{ height:clamp(150px,12vw,180px); }
.dkbel-manieren--4 .dkbel-manier strong{ font-size:clamp(17px,1.3vw,20px); }
.dkbel-mini-bevestig{ width:min(230px,86%); background:#171A1B; color:#F7F5F2; border-radius:18px; padding:14px 16px; font-size:13.5px; box-shadow:0 24px 40px -22px rgba(23,26,27,0.55); }
.dkbel-mini-bevestig div{ display:flex; gap:6px; margin-top:12px; }
.dkbel-mini-bevestig i{ font-style:normal; padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:600; border:1px solid rgba(247,245,242,0.18); }
.dkbel-mini-bevestig i.is-ja{ background:#FFB71B; border-color:#FFB71B; color:#171A1B; transform:scale(.92); transition:transform .5s cubic-bezier(.16,1,.3,1) .6s; }
.dkbel-manier.is-in .dkbel-mini-bevestig i.is-ja{ transform:none; }
.dkbel-mini-rollen{ width:min(230px,86%); display:flex; flex-direction:column; gap:8px; }
.dkbel-mini-rollen div{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:1px 10px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid rgba(23,26,27,0.1); font-size:12px; color:rgba(23,26,27,0.5); }
.dkbel-mini-rollen b{ font-size:13.5px; font-weight:600; color:#171A1B; }
.dkbel-mini-rollen em{ grid-row:1 / span 2; font-style:normal; font-size:11.5px; font-weight:600; padding:4px 9px; border-radius:999px; background:rgba(23,26,27,0.06); color:rgba(23,26,27,0.5); }
.dkbel-mini-rollen div.is-aan em{ background:rgba(23,128,61,0.12); color:#17803D; }
.dkbel-mini-log{ width:min(240px,88%); display:flex; flex-direction:column; gap:6px; }
.dkbel-mini-log div{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:10px; background:#fff; border:1px solid rgba(23,26,27,0.08); font-size:12px; color:#171A1B; }
.dkbel-mini-log b{ font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:999px; background:rgba(255,183,27,0.22); color:#8F6300; white-space:nowrap; }
.dkbel-mini-log b.is-hand{ background:rgba(23,26,27,0.06); color:rgba(23,26,27,0.55); }
.dkbel-mini-server{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:1px 12px; width:min(220px,84%); background:#171A1B; color:#F7F5F2; border-radius:18px; padding:16px 18px; box-shadow:0 24px 40px -22px rgba(23,26,27,0.55); }
.dkbel-mini-server .dkbel-pols{ grid-row:1 / span 2; }
.dkbel-mini-server b{ font-size:14px; font-weight:600; }
.dkbel-mini-server span:last-child{ font-size:12px; color:rgba(247,245,242,0.55); }
/* Downloadknoppen */
.dkbel-stores{ display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.dkbel-store{ display:inline-flex; align-items:center; gap:14px; padding:12px 18px 12px 16px; border-radius:18px; background:#171A1B; color:#F7F5F2; text-decoration:none; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.dkbel-store:hover{ transform:translateY(-2px); } .dkbel-store:active{ transform:scale(.97); transition-duration:.1s; }
.dkbel-store span{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.dkbel-store small{ font-size:11px; color:rgba(247,245,242,0.6); } .dkbel-store b{ font-size:17px; font-weight:600; letter-spacing:-0.02em; }
.dkbel-store > svg:last-child{ width:16px; height:16px; margin-left:6px; color:#FFB71B; }
/* Koppelingen-hub: duinker in het midden, de pakketten eromheen, lijnen die zich tekenen en pulsen */
.dkbel-hub{ --rx:min(42%,400px); --ry:200px; position:relative; height:clamp(440px,42vw,540px); max-width:960px; margin:clamp(24px,3vw,40px) auto 0; }
.dkbel-hub-lijnen{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dkbel-hub-lijn{ fill:none; stroke:rgba(23,26,27,0.16); stroke-width:1.5; stroke-dasharray:var(--l,600px); stroke-dashoffset:var(--l,600px); transition:stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 60ms + .2s); }
.dkbel-hub.is-in .dkbel-hub-lijn{ stroke-dashoffset:0; }
.dkbel-hub-puls{ fill:none; stroke:#FFB71B; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:16 2000; stroke-dashoffset:16px; opacity:0; }
.dkbel-hub.is-in .dkbel-hub-puls{ opacity:1; animation:dkbel-hubpuls 3s linear infinite; animation-delay:calc(var(--i,0) * 270ms + 1.2s); }
@keyframes dkbel-hubpuls{ from{ stroke-dashoffset:16px; } to{ stroke-dashoffset:calc(-1 * var(--l,600px)); } }
.dkbel-hub-kern{ position:absolute; left:50%; top:50%; z-index:2; width:136px; height:136px; border-radius:50%; background:#171A1B; color:#F7F5F2; display:grid; place-content:center; text-align:center; box-shadow:0 30px 60px -30px rgba(23,26,27,0.7), 0 0 0 12px rgba(255,183,27,0.12); transform:translate(-50%,-50%) scale(.88); transition:transform .9s cubic-bezier(.16,1,.3,1); }
.dkbel-hub.is-in .dkbel-hub-kern{ transform:translate(-50%,-50%); }
.dkbel-hub-kern b{ font-size:24px; font-weight:600; letter-spacing:-0.03em; line-height:1; }
.dkbel-hub-kern b em{ font-style:normal; color:#FFB71B; }
.dkbel-hub-kern small{ display:block; margin-top:4px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(247,245,242,0.55); }
.dkbel-hub-logo{ position:absolute; z-index:1; left:calc(50% + cos(var(--a)) * var(--rx)); top:calc(50% + sin(var(--a)) * var(--ry)); width:132px; height:56px; display:grid; place-items:center; padding:10px 16px; border-radius:16px; background:#fff; border:1px solid rgba(23,26,27,0.08); box-shadow:0 14px 30px -20px rgba(23,26,27,0.35); opacity:0; transform:translate(-50%,-50%) scale(.8); transition:opacity .6s ease calc(var(--i,0) * 60ms + .35s), transform .8s cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 60ms + .35s); }
.dkbel-hub.is-in .dkbel-hub-logo{ opacity:1; transform:translate(-50%,-50%); }
.dkbel-hub-logo{ --logo-maat:48px; }
.dkbel-hub-logo img{ max-width:100%; object-fit:contain; }
/* Logo's met veel wit eromheen worden uitgesneden op het woordmerk */
.dkbel .dkbel-hubvoet{ margin:clamp(20px,3vw,36px) auto 0; text-align:center; max-width:60ch; font-size:14px; color:rgba(23,26,27,0.62); }
/* Koppelingen-verhaal: keuzelijst, vertaalregels en de stroom */
.dkbel-keuzes{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.dkbel-keuze{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; padding:9px 12px; border-radius:14px; background:rgba(247,245,242,0.05); border:1px solid rgba(247,245,242,0.07); font-size:13.5px; font-weight:600; color:rgba(247,245,242,0.55); }
.dkbel-keuze.is-aan{ background:rgba(255,183,27,0.12); border-color:rgba(255,183,27,0.4); color:#F7F5F2; }
.dkbel-keuze .dkbel-chipvink{ opacity:0; transform:scale(.5); transition:opacity .3s ease .45s, transform .5s cubic-bezier(.16,1,.3,1) .45s; }
.is-actief .dkbel-keuze.is-aan .dkbel-chipvink{ opacity:1; transform:none; }
.dkbel-voet b.dkbel-voet-klein{ font-size:13px; }
.dkbel-mapping{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.dkbel-mapping div{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; font-size:12.5px; }
.dkbel-mapping div b{ color:#F7F5F2; font-weight:600; }
.dkbel-mapping div svg{ width:14px; height:14px; color:rgba(247,245,242,0.52); }
.dkbel-mapping div span{ justify-self:end; padding:6px 10px; border-radius:10px; background:rgba(255,183,27,0.12); color:#FFB71B; font-weight:600; opacity:0; transform:translateX(-8px); transition:opacity .4s ease var(--d,0s), transform .6s cubic-bezier(.16,1,.3,1) var(--d,0s); }
.is-actief .dkbel-mapping div span{ opacity:1; transform:none; }
.dkbel-stroom{ margin-top:16px; display:grid; grid-template-columns:minmax(0,1fr) minmax(64px,.9fr) minmax(0,1fr); align-items:center; gap:10px; }
.dkbel-stroom-kaartje{ min-width:0; padding:10px 12px; border-radius:14px; background:rgba(247,245,242,0.07); border:1px solid rgba(247,245,242,0.1); font-size:11.5px; line-height:1.3; color:rgba(247,245,242,0.55); }
.dkbel-stroom-kaartje b{ display:block; color:#F7F5F2; font-weight:600; font-size:13px; margin-bottom:2px; }
.dkbel-stroom-buis{ position:relative; height:3px; border-radius:99px; background:rgba(247,245,242,0.12); }
.dkbel-stroom-buis i{ position:absolute; left:0; top:-4px; width:100%; height:11px; opacity:0; transform:translateX(calc(-100% + 11px)); }
.dkbel-stroom-buis i::before{ content:""; position:absolute; right:0; top:0; width:11px; height:11px; border-radius:50%; background:#FFB71B; box-shadow:0 0 0 3px rgba(255,183,27,0.2); }
.is-actief .dkbel-stroom-buis i{ animation:dkbel-pakket 2.4s cubic-bezier(.45,0,.2,1) infinite; animation-delay:var(--d,0s); }
@keyframes dkbel-pakket{ 0%{ transform:translateX(calc(-100% + 11px)); opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ transform:translateX(0); opacity:0; } }
.dkbel-mini-gelijk{ display:flex; align-items:center; gap:12px; font-size:28px; font-weight:600; letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
.dkbel-mini-gelijk span{ display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:rgba(255,183,27,0.2); color:#8F6300; }
.dkbel-mini-gelijk span svg{ width:16px; height:16px; }
.dkbel-mini-code{ width:min(250px,90%); background:#171A1B; border-radius:16px; padding:14px 16px; display:flex; flex-direction:column; gap:6px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; color:rgba(247,245,242,0.85); }
.dkbel-mini-code i{ font-style:normal; color:#FFB71B; margin-right:6px; }
.dkbel-mini-code .is-ok{ color:#7EE2A8; padding-left:14px; }

/* ── 7. Over ons: feitenband, tegels met een link, chips in kaarten en sectorgroepen ── */
.dkbel-feiten{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.4vw,32px); }
.dkbel-feit{ display:flex; flex-direction:column; gap:8px; padding-left:18px; border-left:2px solid #FFB71B; }
.dkbel-feitgetal{ font-size:clamp(34px,3.6vw,50px); font-weight:600; letter-spacing:-0.04em; line-height:1; color:#171A1B; font-variant-numeric:tabular-nums; }
.dkbel-feitlabel{ font-size:14.5px; line-height:1.4; color:rgba(23,26,27,0.62); text-wrap:pretty; }
/* Chips in een donkere kaart van het verhaal */
.dkbel-kaartchips{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
/* Een tegel die naar een andere pagina wijst */
.dkbel-tegel--link{ text-decoration:none; color:inherit; }
.dkbel-tegelicoon{ display:grid; place-items:center; width:44px; height:44px; margin-bottom:4px; border-radius:14px; background:rgba(255,183,27,0.2); color:#8F6300; }
.dkbel-tegelicoon svg{ width:21px; height:21px; }
/* Een woord of nummer in plaats van een cijferblok mag kleiner */
.dkbel-mini-getal--tekst{ font-size:clamp(24px,2.2vw,32px); letter-spacing:-0.03em; }
.dkbel-tegel--link .dkbel-tegelpijl{ margin-top:auto; padding-top:18px; color:#171A1B; display:inline-flex; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.dkbel-tegel--link:hover .dkbel-tegelpijl{ transform:translateX(4px); }
/* Prijs of waarde rechts in een keuzerij */
.dkbel-keuze b{ margin-left:auto; font-weight:600; color:#F7F5F2; font-variant-numeric:tabular-nums; }
.dkbel-keuze:not(.is-aan) b{ color:rgba(247,245,242,0.55); }
/* Sectoren in drie groepen */
.dkbel-groepen{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2.2vw,28px); }
.dkbel-groep{ padding:clamp(22px,2.2vw,30px); border-radius:24px; background:#F7F5F2; border:1px solid rgba(23,26,27,0.06); }
.dkbel .dkbel-groepkop{ margin:0 0 16px; font-size:clamp(17px,1.4vw,20px); font-weight:600; letter-spacing:-0.02em; color:#171A1B; }
.dkbel-groeptags{ display:flex; flex-wrap:wrap; gap:8px; }
.dkbel-groeptags span{ display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; background:#fff; border:1px solid rgba(23,26,27,0.08); font-size:13.5px; font-weight:500; color:#171A1B; }

/* ── 8. Homepage: vertrouwensbalk onder de hero en de reviews ──────────────────────── */
/* De balk is een flexitem van de layoutkolom met align-items:center, waardoor hij op zijn eigen
   inhoudsbreedte bleef hangen: 1001px op desktop, 473px op tablet en van rand tot rand op een telefoon.
   Daardoor stond hij smaller dan alles eromheen en liep hij op kleine schermen tegen de schermrand aan.
   Nu staat hij op dezelfde kolombreedte als de rest van de site, met ruimte opzij zodat de ronding ook
   op een telefoon vrij staat. De ronding is die van de reviewkaarten, één stap onder de herokaart (32px). */
.dkbel-trustbalk{ background:#F7F5F2; padding:clamp(22px,2.6vw,32px) clamp(20px,2.4vw,32px);
  width:min(1110px, calc(100% - 40px)); margin-inline:auto; border-radius:24px; }

/* ── Trustbalk: score links, sectoren als doorlopende band rechts ──────────────────────────
   Twaalf sectoren passen niet netjes op één regel; als band laten ze zien dat het er veel zijn
   zonder twee rommelige rijen. Constante beweging is linear; de band staat stil bij hover en
   focus, en bij "beweging verminderen" wordt het een gewone lijst over meerdere regels. */
.dkbel-trust{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(24px,3vw,40px); }
.dkbel-trust--zonder-score{ grid-template-columns:1fr; }
.dkbel-trustscore{ display:flex; align-items:center; gap:14px; padding-right:clamp(24px,3vw,40px);
  border-right:1px solid rgba(23,26,27,0.1); }
.dkbel-scorecijfer{ font-size:44px; font-weight:600; line-height:1; letter-spacing:-0.045em; color:#171A1B;
  font-variant-numeric:tabular-nums; }
.dkbel-scoremeta{ display:flex; flex-direction:column; gap:6px; }
.dkbel-trustscore .dkbel-sterren{ display:flex; gap:2px; color:#FFB71B; align-self:flex-start; }
.dkbel-scoretekst{ font-size:13px; line-height:1.2; letter-spacing:-0.005em; color:rgba(23,26,27,0.62); white-space:nowrap; }
.dkbel-trustsectoren{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.dkbel-trustvoor{ margin:0; font-size:13px; line-height:1.3; letter-spacing:-0.005em; color:rgba(23,26,27,0.62); }

.dkbel-band{ --dkbel-bandgat:8px; display:flex; gap:var(--dkbel-bandgat); overflow:hidden; min-width:0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.dkbel-bandrij{ display:flex; gap:var(--dkbel-bandgat); flex:none; margin:0; padding:0; list-style:none;
  animation:dkbel-band 48s linear infinite; }
.dkbel-band:hover .dkbel-bandrij, .dkbel-band:focus-within .dkbel-bandrij{ animation-play-state:paused; }
@keyframes dkbel-band{ to{ transform:translateX(calc(-100% - var(--dkbel-bandgat))); } }
.dkbel-sector{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px 0 11px; border-radius:999px;
  background:#fff; border:1px solid rgba(23,26,27,0.07); box-shadow:0 1px 2px rgba(23,26,27,0.04);
  font-size:13.5px; font-weight:500; letter-spacing:-0.01em; color:#171A1B; white-space:nowrap; }
.dkbel-sector svg{ flex:none; color:#B87500; }

@media (prefers-reduced-motion:reduce){
  .dkbel-band{ -webkit-mask-image:none; mask-image:none; }
  .dkbel-bandrij{ flex-wrap:wrap; flex:1 1 auto; animation:none; }
  .dkbel-bandkopie{ display:none; }
}
@media (max-width:760px){
  .dkbel-trust{ grid-template-columns:1fr; gap:18px; }
  .dkbel-trustscore{ padding-right:0; padding-bottom:18px; border-right:0; border-bottom:1px solid rgba(23,26,27,0.1); }
  .dkbel-scorecijfer{ font-size:38px; }
  .dkbel-band{ margin-inline:calc(-1 * clamp(20px,2.4vw,32px)); padding-inline:clamp(20px,2.4vw,32px); }
}
.dkbel-sterren{ display:inline-flex; gap:2px; color:#FFB71B; align-self:center; }

/* Reviews: drie citaten, met de beoordeling als anker erboven */
.dkbel .dkbel-reviewscore{ display:inline-flex; align-items:baseline; gap:10px; margin:18px 0 0; font-size:15px; color:rgba(23,26,27,0.62); }
.dkbel-reviewscore b{ font-size:22px; font-weight:600; letter-spacing:-0.025em; color:#171A1B; }
.dkbel-reviewscore .dkbel-aantal::before{ content:"·"; margin-right:8px; }
/* Reviews staan op wit met crème kaarten, in dezelfde taal als de trustbalk; zo begint het crème van de
   prijzen eronder als een eigen blok. De kaarten centreren, ook als er maar één of twee citaten zijn.
   Erboven staat de demo-CTA op crème, dus de sectie houdt zijn gewone bovenruimte. */
.dkbel-reviewrij{ --dkbel-reviewgat:clamp(16px,2vw,24px); display:flex; flex-wrap:wrap; justify-content:center; gap:var(--dkbel-reviewgat); }
.dkbel-reviewrij > .dkbel-review{ flex:0 1 calc((100% - 2 * var(--dkbel-reviewgat)) / 3); min-width:0; }
.dkbel-reviewsectie .dkbel-review{ background:#F7F5F2; border-color:transparent; box-shadow:none; }
.dkbel-review{ position:relative; margin:0; display:flex; flex-direction:column; padding:clamp(26px,2.4vw,34px); border-radius:24px; background:#fff; border:1px solid rgba(23,26,27,0.07); box-shadow:0 30px 60px -48px rgba(23,26,27,0.5); }
.dkbel-reviewkop{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.dkbel-aanhaal{ color:#FFB71B; flex:none; }
.dkbel-reviewsterren .leeg{ color:rgba(23,26,27,0.14); }
.dkbel-reviewtekst{ margin:0 0 auto; font-size:clamp(16px,1.35vw,18.5px); line-height:1.55; letter-spacing:-0.01em; color:#171A1B; text-wrap:pretty; }
.dkbel-reviewvoet{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(23,26,27,0.08); }
.dkbel-reviewavatar{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:#171A1B; color:#FFB71B; font-size:14px; font-weight:600; letter-spacing:0.02em; }
.dkbel-reviewwie{ min-width:0; }
.dkbel-reviewwie b{ display:block; font-size:15px; font-weight:600; color:#171A1B; }
.dkbel-reviewwie small{ display:block; font-size:13px; color:rgba(23,26,27,0.62); }
.dkbel-reviewsector{ grid-column:1 / -1; justify-self:start; margin-top:4px; padding:5px 11px; border-radius:999px; background:#fff; font-size:12px; font-weight:600; color:rgba(23,26,27,0.7); }

@media (max-width:1000px){
  .dkbel-reviewrij > .dkbel-review{ flex-basis:100%; }
}
/* De vertrouwensbalk gaat eerder onder elkaar dan de rest: de inhoud past tot ongeveer 1030px breed,
   daaronder brak de regel al terwijl de balk nog als rij stond. Vandaar een eigen grens van 1040px.
   Het streepje scheidt score en sectoren zolang die naast elkaar staan; onder elkaar hangt het als
   los verticaal lijntje in beeld. */

/* ── Verschijnen: bestaande dk-appear, met een variant die ook iets groeit ─────────── */
.dk-appear.dkbel-groei{ transform:translateY(24px) scale(.97); }
.dk-appear.dkbel-groei.is-in{ transform:none; }

/* ── Smaller ───────────────────────────────────────────────────────────────────────── */
@media (min-width:1001px) and (max-height:780px){
  .dkbel-verhaal-kop{ padding:12px 24px 14px; }
  .dkbel-verhaal-kop .dkbel-h2{ font-size:clamp(26px,3vw,38px); }
  .dkbel-verhaal-kop .dkbel-label{ margin-bottom:8px; }
  .dkbel-kaart{ padding:18px; }
}
@media (max-width:1000px){
  .dkbel-verhaal{ --dkbel-midden:0px; }
  .dkbel-hoofdstuk-in{ position:static; transform:none; }
  .dkbel-verhaal-kop{ position:static; margin:0 0 76px; padding:0; }
  .dkbel-verhaal-kop::before, .dkbel-verhaal-kop::after{ display:none; }
  .dkbel-verhaal-binnen{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:0; }
  .dkbel-toneel{ position:sticky; top:calc(var(--dk-navh,100px) + 8px); height:min(44vh,400px); z-index:2; background:#171A1B; }
  .dkbel-toneel::after{ content:""; position:absolute; left:calc(-1 * var(--dkbel-zijkant)); right:calc(-1 * var(--dkbel-zijkant)); top:100%; height:56px; background:linear-gradient(#171A1B, rgba(23,26,27,0)); pointer-events:none; }
  /* Dekt de strook tussen de navigatie en het toneel af, zodat de vorige tekst daar niet doorheen gluurt. */
  /* Donkere band boven de vastgezette toneelkaart; de kop erboven houdt 76px afstand zodat hij er niet onder valt. */
  .dkbel-toneel::before{ content:""; position:absolute; left:calc(-1 * var(--dkbel-zijkant)); right:calc(-1 * var(--dkbel-zijkant)); bottom:100%; height:64px; background:#171A1B; pointer-events:none; }
  .dkbel-hoofdstuk .dkbel-h3{ max-width:none; }
  .dkbel-podium{ width:min(100%,400px); aspect-ratio:auto; height:100%; }
  .dkbel-kaart{ width:min(100%,400px); padding:18px; }
  .dkbel-kaart--toestel{ width:auto; padding:0; }
  .dkbel-hoofdstuk, .dkbel-hoofdstuk:first-child, .dkbel-hoofdstuk:last-child{ min-height:50vh; justify-content:flex-start; padding:20px 0 24px; }
  .dkbel-bento{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:minmax(190px,auto); }
  .dkbel-manieren{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .dkbel-manieren--4{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 16px; }
  .dkbel-feiten{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
  .dkbel-groepen{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .dkbel-verhaal--toestel .dkbel-toneel{ height:min(54vh,470px); }
  .dkbel-manier .dkbel-tekst{ max-width:none; }
  .dkbel-tegel--groot{ grid-column:span 2; grid-row:span 1; }
}
@media (max-width:640px){
  .dkbel-manieren--4{ grid-template-columns:minmax(0,1fr); }
  .dkbel-feiten{ grid-template-columns:minmax(0,1fr); gap:20px; }
  .dkbel-store{ width:100%; justify-content:center; }
  .dkbel-sectie{ padding-inline:20px; }
  .dkbel-verhaal{ --dkbel-zijkant:20px; }
  .dkbel-toneel{ height:min(40vh,340px); }
  .dkbel-kaart{ padding:16px; border-radius:20px; }
  .dkbel-grootgetal{ font-size:34px; }
  .dkbel-bento{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .dkbel-tegel, .dkbel-tegel--groot, .dkbel-tegel--breed{ grid-column:span 1; grid-row:span 1; }
  .dkbel-tegel{ padding:22px; }
  .dkbel-tegel--breed:last-child{ display:flex; }
  .dkbel-logorij{ gap:12px 22px; --logo-maat:42px; }
  .dkbel-knop{ width:100%; }
}
@media (max-width:760px){
  .dkbel-hub{ height:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding-top:160px; }
  .dkbel-hub-lijnen{ display:none; }
  .dkbel-hub-kern{ top:0; transform:translate(-50%,0) scale(.88); } .dkbel-hub.is-in .dkbel-hub-kern{ transform:translate(-50%,0); }
  .dkbel-hub-logo{ position:static; width:auto; height:52px; transform:scale(.9); } .dkbel-hub.is-in .dkbel-hub-logo{ transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .dkbel-hub-lijn{ stroke-dashoffset:0; transition:none; } .dkbel-hub-puls{ animation:none !important; opacity:0; }
  .dkbel-stroom-buis i{ animation:none !important; }
  .dkbel-chat-caret{ animation:none; } .dkbel-chat-uitklap{ transition:none; } .dkbel-chat-antwoord{ transition:none; }
  .dkbel-hub-kern, .dkbel-hub-logo, .dkbel-mapping div span, .dkbel-keuze .dkbel-chipvink{ transition:none; }
  .dkbel-kaart{ transform:none !important; transition:opacity .3s ease; }
  .dkbel-hoofdstuk{ opacity:1; }
  .dkbel-pols::after{ animation:none; }
  .dkbel-balk i, .dkbel-mini-staven i, .dkbel-toast, .dkbel-slot .dkbel-beugel{ transition:none; }
  .dkbel-mini-staven i{ transform:scaleY(1); }
  .dkbel-tegel:hover, .dkbel-knop:hover{ transform:none; }
  .dkbel-mini-terminal, .dkbel-mini-app, .dkbel-mini-lijn-band i, .dkbel-mini-deurslot .dkbel-beugel{ transition:none; }
  .dkbel-mini-terminal, .dkbel-mini-lijn-band i{ transform:none; opacity:1; }
}
/* Toegangscontrole: de prijs van de module Huisvesting staat in het paneel van dkbel-hv en als tweede regel in het prijsblok. */
/* .dkbel h2{margin:0} won van margin:0 auto, waardoor de prijsregel links hing in het gecentreerde blok. */
.dkbel .dkbel-prijsregel{ margin-inline:auto; }
.dkbel .dkbel-prijsregel--extra{ font-size:clamp(22px,2.6vw,34px); margin-top:12px; max-width:none; }

/* ── Huisvesting op de toegangscontrolepagina (dkbel-hv) ────────────────────────────
   Stond eerst als tweede bento, direct onder "Veiligheid die je kunt aantonen": hetzelfde
   raster, dezelfde soort tegels, alleen een andere achtergrond. Twee van die blokken onder
   elkaar lezen als een herhaling in plaats van als een eigen onderwerp.
   Daarom hier een andere vorm. Het is een aanvullende module, en dat mag je zien: een donker
   vlak dat de crème bento erboven afsluit, met links de belofte, de cijfers en de prijs als
   één paneel, en rechts de onderdelen als rijen met haarlijnen ertussen. Rijen lezen als een
   opsomming van wat je krijgt; losse tegels lezen als losse onderwerpen. De teksten zijn
   ongewijzigd gebleven; alleen de prijsregel is in twee stukken gesplitst, omdat "Module
   Huisvesting" nu het label boven de kop is. */
/* Kop, paneel en rijen vormen samen één blok van twee kolommen: links waar het over gaat en wat
   het kost, rechts wat je krijgt. De kop stond eerst over de volle breedte erboven, waardoor het
   als twee losse dingen onder elkaar las. */
.dkbel-hv-vlak{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:clamp(28px,3.4vw,56px); align-items:start; }
.dkbel-hv-links{ display:flex; flex-direction:column; gap:clamp(26px,2.8vw,38px); }
.dkbel-hv-kop .dkbel-h2{ margin-top:16px; font-size:clamp(30px,3.2vw,44px); }
.dkbel-hv-kop .dkbel-tekst{ margin-top:16px; font-size:clamp(15.5px,1.1vw,17.5px); }

/* Links: waar het om gaat, de cijfers van vandaag en wat het kost. */
.dkbel-hv-anker{ display:flex; flex-direction:column; padding:clamp(24px,2.4vw,34px); border-radius:28px;
  background:rgba(247,245,242,0.05); border:1px solid rgba(247,245,242,0.1); }
.dkbel-hv-kopje{ font-size:clamp(21px,1.8vw,26px); font-weight:600; line-height:1.15; letter-spacing:-0.025em; color:#F7F5F2; text-wrap:balance; }
.dkbel-hv-anker .dkbel-hv-uitleg{ margin-top:14px; font-size:15.5px; line-height:1.6; color:rgba(247,245,242,0.62); text-wrap:pretty; }
.dkbel-hv-anker .dkbel-mini-saldo{ margin-top:clamp(22px,2.4vw,30px); }
.dkbel .dkbel-hv-prijs{ margin-top:clamp(22px,2.4vw,30px); padding-top:20px; border-top:1px solid rgba(247,245,242,0.12);
  font-size:15px; line-height:1.5; color:rgba(247,245,242,0.6); }
.dkbel-hv-prijs b{ display:block; margin-bottom:2px; font-size:26px; font-weight:600; letter-spacing:-0.03em; color:#FFB71B; font-variant-numeric:tabular-nums; }

/* Rechts: de onderdelen als rijen in plaats van als tegels. */
.dkbel-hv-rijen{ list-style:none; margin:0; padding:0; }
.dkbel-hv-rij{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,268px); gap:clamp(18px,1.8vw,28px);
  align-items:center; padding:clamp(20px,2vw,26px) 0; border-top:1px solid rgba(247,245,242,0.12); }
.dkbel-hv-rij:first-child{ border-top:0; padding-top:0; }
.dkbel-hv-rij:last-child{ padding-bottom:0; }
.dkbel-hv-rij h3{ font-size:clamp(17px,1.35vw,20px); font-weight:600; line-height:1.2; letter-spacing:-0.02em; color:#F7F5F2; text-wrap:balance; }
.dkbel-hv-rij p{ margin-top:8px; font-size:14.5px; line-height:1.6; color:rgba(247,245,242,0.58); text-wrap:pretty; }


/* De kleine beelden komen uit de bento en staan daar op een lichte tegel; hier op donker. */
.dkbel-hv .dkbel-mini-chips span{ background:rgba(247,245,242,0.1); color:#F7F5F2; }
/* Eén rij draagt het accent, zodat het oog een rustpunt heeft zonder dat er een hele gele tegel staat.
   Deze regel moet ná de donkere chips hierboven staan: even zwaar, dus de laatste wint. */
.dkbel-hv .dkbel-hv-rij--accent .dkbel-mini-chips span{ background:#FFB71B; color:#171A1B; }
.dkbel-hv .dkbel-mini-schakels div{ color:#F7F5F2; }
.dkbel-hv .dkbel-schakel{ background:rgba(247,245,242,0.2); }
.dkbel-hv .dkbel-schakel.is-aan{ background:#FFB71B; }
.dkbel-hv .dkbel-schakel.is-aan::after{ background:#171A1B; box-shadow:none; }
.dkbel-hv .dkbel-mini-deuren div{ background:rgba(247,245,242,0.07); color:#F7F5F2; }
.dkbel-hv .dkbel-mini-deuren div span:last-child{ color:#5FD38D; }
.dkbel-hv .dkbel-mini-deuren div.is-dicht{ color:rgba(247,245,242,0.5); }
.dkbel-hv .dkbel-mini-deuren div.is-dicht span:last-child{ color:rgba(247,245,242,0.52); }

@media (max-width:900px){
  .dkbel-hv-vlak{ grid-template-columns:minmax(0,1fr); gap:clamp(26px,3vw,38px); }
  .dkbel-hv-rij{ grid-template-columns:minmax(0,1fr); gap:16px; align-items:start; }
  .dkbel-hv-rij p{ max-width:none; }
}

/* ── Urencontrole op de AI-pagina (dkuc) ─────────────────────────────────────────────
   Zelfde vorm als Huisvesting op de toegangscontrolepagina: een donker vlak met links de
   belofte en een beeld, rechts de onderdelen als rijen. Het beeld speelt één keer af zodra het
   paneel in beeld komt en vertelt het verhaal van het scherm in Workforce. Een dag met een
   vergeten uitklok, Workforce zet een voorstel klaar, jij drukt op Akkoord, de teller zakt.
   Wie minder beweging wil, ziet meteen de eindstand. */
.dkuc{ --dkuc-uit:cubic-bezier(.23,1,.32,1); --dkuc-fout:#FF8E6E; }
.dkuc-scherm{ margin-top:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:12px; }

.dkuc-tellers{ display:flex; flex-wrap:wrap; gap:8px; }
.dkuc-teller{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:rgba(247,245,242,0.62); background:rgba(247,245,242,0.07); }
.dkuc-teller b{ position:relative; display:inline-grid; min-width:1ch; color:#F7F5F2; font-variant-numeric:tabular-nums; }
.dkuc-teller b i{ grid-area:1/1; font-style:normal; }
.dkuc-teller--fout{ background:rgba(255,142,110,0.14); color:var(--dkuc-fout); }
.dkuc-teller--fout b{ color:var(--dkuc-fout); }
.dkuc-teller--nakijken{ background:rgba(255,183,27,0.12); color:#FFB71B; }
.dkuc-teller--nakijken b{ color:#FFB71B; }

.dkuc-dag{ padding:14px 14px 10px; border-radius:16px; background:rgba(247,245,242,0.05); border:1px solid rgba(247,245,242,0.08); }
.dkuc-dagkop{ display:flex; justify-content:space-between; margin-bottom:12px; font-size:13px; font-weight:600; color:#F7F5F2; }
.dkuc-dagkop span:last-child{ font-weight:500; color:rgba(247,245,242,0.5); }
.dkuc-balk{ position:relative; height:26px; border-radius:8px; background:rgba(247,245,242,0.06); }
.dkuc-blok, .dkuc-voorstel{ position:absolute; top:0; bottom:0; left:var(--l); width:var(--b); border-radius:7px; transform-origin:left center; }
.dkuc-blok{ background:#FFB71B; }
.dkuc-blok--pauze{ background:rgba(247,245,242,0.22); border-radius:2px; }
/* Werk zonder eindtijd: de balk loopt dood. */
.dkuc-blok--open{ background:linear-gradient(90deg,#FFB71B 0%,rgba(255,183,27,0) 100%); border-radius:7px 0 0 7px; }
.dkuc-voorstel{ border:1.5px dashed rgba(255,183,27,0.85); background:rgba(255,183,27,0.08); }
/* De dag loopt van 07:00 tot 18:00, dus elk uur is 1/11 van de balk. */
.dkuc-uren{ position:relative; height:14px; margin-top:7px; font-size:11px; color:rgba(247,245,242,0.4); font-variant-numeric:tabular-nums; }
.dkuc-uren span{ position:absolute; left:var(--l); transform:translateX(-50%); }
.dkuc-uren span:first-child{ transform:none; }

.dkuc-melding{ position:relative; padding:14px; border-radius:16px; background:rgba(247,245,242,0.07); border:1px solid rgba(247,245,242,0.1); }
.dkbel .dkuc-meldingkop{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:#F7F5F2; }
.dkuc-meldingkop b{ padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:0.02em; color:#171A1B; background:var(--dkuc-fout); }
.dkbel .dkuc-reden{ margin-top:6px; font-size:13px; line-height:1.5; color:rgba(247,245,242,0.6); }
.dkuc-knoppen{ position:relative; display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.dkuc-knoppen i{ font-style:normal; display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:8px;
  font-size:12px; font-weight:600; color:rgba(247,245,242,0.75); background:rgba(247,245,242,0.08); }
.dkuc-knoppen .dkuc-akkoord{ color:#171A1B; background:#FFB71B; }
/* Na Akkoord schuift de bevestiging over de knoppen heen, ook als die op de telefoon twee regels beslaan. */
.dkbel .dkuc-klaar{ position:absolute; inset:0; display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:#5FD38D; background:#262A2B; opacity:0; pointer-events:none; }

/* Rijen rechts */
.dkbel-hv .dkuc-pauze div.is-afwijkend span:last-child{ color:var(--dkuc-fout); }
.dkuc-atw{ display:flex; flex-direction:column; gap:10px; }

/* Het verhaal. Zonder JavaScript of met minder beweging staat hier de eindstand: voorstel doorgevoerd,
   bevestiging zichtbaar, teller één lager. duinker.js (initUrencontrole) zet .dkuc-live op het scherm en
   speelt dan steeds een andere melding af zolang het in beeld is: .is-speelt start de reeks, .is-weg
   laat de dag en de melding uitfaden voordat de volgende begint. */
.dkuc-voorstel{ --vast:#FFB71B; }
.dkuc-scherm:not(.dkuc-live) .dkuc-voorstel{ background:var(--vast); border-color:var(--vast); border-style:solid; }
.dkuc-scherm:not(.dkuc-live) .dkuc-klaar{ opacity:1; }
.dkuc-teller b i:first-child{ opacity:0; }
.dkuc-live .dkuc-teller b i:first-child{ opacity:1; }
.dkuc-live .dkuc-teller b i:last-child{ opacity:0; }
.dkuc-melding[data-soort="nakijken"] .dkuc-meldingkop b{ background:#FFB71B; }

.dkuc-live .dkuc-dag, .dkuc-live .dkuc-melding{ transition:opacity .4s ease; }
.dkuc-live.is-weg .dkuc-dag, .dkuc-live.is-weg .dkuc-melding{ opacity:0 !important; }
.dkuc-live:not(.is-speelt) .dkuc-blok, .dkuc-live:not(.is-speelt) .dkuc-voorstel{ transform:scaleX(0); }
.dkuc-live:not(.is-speelt) .dkuc-melding{ opacity:0; transform:translateY(10px); }

.dkuc-live.is-speelt .dkuc-blok{ animation:dkuc-groei .7s var(--dkuc-uit) both; }
.dkuc-live.is-speelt .dkuc-blok:nth-child(1){ animation-delay:.2s; }
.dkuc-live.is-speelt .dkuc-blok:nth-child(2){ animation-delay:.5s; }
.dkuc-live.is-speelt .dkuc-blok:nth-child(3){ animation-delay:.65s; }
.dkuc-live.is-speelt .dkuc-voorstel{ animation:dkuc-groei .9s var(--dkuc-uit) 1.45s both, dkuc-vast .4s ease 3.3s forwards; }
.dkuc-live.is-speelt .dkuc-melding{ animation:dkuc-op .6s var(--dkuc-uit) 1.05s both; }
.dkuc-live.is-speelt .dkuc-akkoord{ animation:dkuc-druk .32s ease 3.05s both; }
.dkuc-live.is-speelt .dkuc-klaar{ animation:dkuc-op .45s var(--dkuc-uit) 3.35s both; }
.dkuc-live.is-speelt .is-telt b i:first-child{ animation:dkuc-weg .35s var(--dkuc-uit) 3.5s both; }
.dkuc-live.is-speelt .is-telt b i:last-child{ animation:dkuc-erin .45s var(--dkuc-uit) 3.6s both; }
.dkuc-live.is-speelt .is-telt{ animation:dkuc-tik .5s ease 3.55s both; }

@keyframes dkuc-groei{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes dkuc-op{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes dkuc-druk{ 0%{ transform:none; } 45%{ transform:scale(.94); box-shadow:0 0 0 4px rgba(255,183,27,0.25); } 100%{ transform:none; box-shadow:0 0 0 0 rgba(255,183,27,0); } }
@keyframes dkuc-vast{ to{ background:var(--vastvlak,var(--vast)); border-color:var(--vast); border-style:solid; } }
@keyframes dkuc-weg{ to{ opacity:0; transform:translateY(-8px); } }
@keyframes dkuc-erin{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes dkuc-tik{ 0%,100%{ transform:none; } 40%{ transform:scale(1.06); } }

/* ── Planning op de urenregistratiepagina (dkpl) ─────────────────────────────────────
   Zelfde vorm als Huisvesting en Urencontrole. Het bord laat de dag van een planner zien:
   teams vullen zich, er wordt op Publiceren gedrukt, de status springt van concept naar
   gepubliceerd en de planning gaat naar het scherm en de app. duinker.js (initPlanning) zet
   .dkpl-live en speelt steeds een volgende dag af zolang het bord in beeld is. Zonder
   JavaScript of met minder beweging staat de eindstand er. */
.dkpl{ --dkpl-uit:cubic-bezier(.23,1,.32,1); }
.dkpl-bord{ margin-top:clamp(22px,2.4vw,30px); padding:14px; border-radius:18px; background:rgba(247,245,242,0.05); border:1px solid rgba(247,245,242,0.08); }
.dkpl-kop{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 12px; }
.dkpl-dag{ font-size:14px; font-weight:600; color:#F7F5F2; }
.dkpl-status{ display:inline-grid; }
.dkpl-status i{ grid-area:1/1; justify-self:end; display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 10px; border-radius:999px;
  font-style:normal; font-size:12px; font-weight:600; white-space:nowrap; }
.dkpl-concept{ color:rgba(247,245,242,0.62); background:rgba(247,245,242,0.08); opacity:0; }
.dkpl-live-tekst{ color:#5FD38D; background:rgba(95,211,141,0.13); }

.dkpl-teams{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.dkpl-team{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px;
  padding:10px 12px 10px 16px; border-radius:12px; background:rgba(247,245,242,0.06); overflow:hidden; }
.dkpl-team::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--kleur); }
.dkpl-teamnaam{ display:flex; flex-direction:column; min-width:0; font-size:12px; color:rgba(247,245,242,0.55); }
.dkpl-teamnaam b{ font-size:13.5px; font-weight:600; color:#F7F5F2; }
.dkpl-tijd{ font-size:13px; font-weight:600; color:rgba(247,245,242,0.8); font-variant-numeric:tabular-nums; }
.dkpl-mensen{ display:flex; align-items:center; }
.dkpl-av, .dkpl-meer{ display:grid; place-items:center; width:28px; height:28px; margin-left:-6px; border-radius:50%;
  font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:0.02em; border:2px solid #222627; }
.dkpl-av:first-child{ margin-left:0; }
.dkpl-av--geel{ background:#FFB71B; color:#171A1B; }
.dkpl-av--blauw{ background:#47BFCE; color:#171A1B; }
.dkpl-av--licht{ background:#E9E6E1; color:#171A1B; }
.dkpl-meer{ width:auto; min-width:28px; padding:0 6px; border-radius:999px; background:#2E3234; color:rgba(247,245,242,0.75); }

.dkpl-voet{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; min-height:30px; }
.dkpl-knop{ display:inline-flex; align-items:center; height:30px; padding:0 13px; border-radius:9px; font-size:12.5px; font-weight:600; color:#171A1B; background:#FFB71B; }
.dkpl-uit{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:9px; font-size:12px; color:rgba(247,245,242,0.72); background:rgba(247,245,242,0.07); }
.dkpl-uit b{ font-weight:600; color:#F7F5F2; font-variant-numeric:tabular-nums; }
.dkpl-uit::before{ content:""; width:6px; height:6px; border-radius:50%; background:#5FD38D; }
/* Eindstand: knop is weg, de twee uitkomsten staan er. */
.dkpl-bord:not(.dkpl-live) .dkpl-knop{ display:none; }
.dkbel-hv .dkpl-kopie div:first-child span:last-child{ color:rgba(247,245,242,0.52); }

@media (prefers-reduced-motion:no-preference){
  .dkpl-live .dkpl-concept{ opacity:1; }
  .dkpl-live .dkpl-live-tekst{ opacity:0; }
  .dkpl-live .dkpl-knop{ position:absolute; left:0; top:0; }
  .dkpl-live .dkpl-teams, .dkpl-live .dkpl-voet{ transition:opacity .4s ease; }
  .dkpl-live.is-weg .dkpl-teams, .dkpl-live.is-weg .dkpl-voet{ opacity:0; }
  .dkpl-live:not(.is-speelt) .dkpl-team{ opacity:0; transform:translateY(8px); }
  .dkpl-live:not(.is-speelt) .dkpl-av, .dkpl-live:not(.is-speelt) .dkpl-meer{ opacity:0; transform:scale(.6); }
  .dkpl-live:not(.is-speelt) .dkpl-uit{ opacity:0; }

  .dkpl-live.is-speelt .dkpl-team{ animation:dkpl-op .55s var(--dkpl-uit) both; }
  .dkpl-live.is-speelt .dkpl-team:nth-child(1){ animation-delay:.15s; }
  .dkpl-live.is-speelt .dkpl-team:nth-child(2){ animation-delay:.35s; }
  .dkpl-live.is-speelt .dkpl-team:nth-child(3){ animation-delay:.55s; }
  .dkpl-live.is-speelt .dkpl-av, .dkpl-live.is-speelt .dkpl-meer{ animation:dkpl-plop .4s var(--dkpl-uit) both; }
  .dkpl-live.is-speelt .dkpl-team:nth-child(1) .dkpl-mensen > *{ animation-delay:calc(.7s + var(--n) * .08s); }
  .dkpl-live.is-speelt .dkpl-team:nth-child(2) .dkpl-mensen > *{ animation-delay:calc(1s + var(--n) * .08s); }
  .dkpl-live.is-speelt .dkpl-team:nth-child(3) .dkpl-mensen > *{ animation-delay:calc(1.3s + var(--n) * .08s); }
  .dkpl-live.is-speelt .dkpl-knop{ animation:dkuc-druk .32s ease 2.3s both, dkpl-weg .3s ease 2.7s forwards; }
  .dkpl-live.is-speelt .dkpl-concept{ animation:dkpl-weg .25s ease 2.65s forwards; }
  .dkpl-live.is-speelt .dkpl-live-tekst{ animation:dkpl-plop .45s var(--dkpl-uit) 2.75s both; }
  .dkpl-live.is-speelt .dkpl-uit--scherm{ animation:dkpl-op .5s var(--dkpl-uit) 3.05s both; }
  .dkpl-live.is-speelt .dkpl-uit--app{ animation:dkpl-op .5s var(--dkpl-uit) 3.3s both; }
}
.dkpl-mensen > *:nth-child(1){ --n:0; } .dkpl-mensen > *:nth-child(2){ --n:1; } .dkpl-mensen > *:nth-child(3){ --n:2; } .dkpl-mensen > *:nth-child(4){ --n:3; }
@keyframes dkpl-op{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes dkpl-plop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes dkpl-weg{ to{ opacity:0; transform:scale(.96); } }
@media (max-width:520px){
  .dkpl-team{ grid-template-columns:minmax(0,1fr) auto; }
  .dkpl-tijd{ grid-column:2; grid-row:1; }
  .dkpl-mensen{ grid-column:1 / -1; }
}