/* Aanvullingen op de basisopmaak: verschijn-animaties, pulsen en toestanden die met JavaScript worden geregeld. */

.dk-appear{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.dk-appear.is-in{opacity:1;transform:none}
/* Zonder JavaScript komt .is-in nooit; dan moet alles gewoon zichtbaar zijn. */
@media (scripting:none){.dk-appear{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dk-appear{opacity:1;transform:none;transition:none}.dkrhero-livepulse,.dkrmv-puls{animation:none;opacity:0}}
@keyframes dk-puls{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.4);opacity:0}}
.dkrhero-livepulse,.dkrmv-puls{position:absolute;inset:0;border-radius:50%;background:currentColor;animation:dk-puls 1.8s ease-out infinite}
.dkrhero-livedot,.dkrmv-stip,.dkapp-onlinestip{position:relative}
.dkrmv-puls{background:inherit}
@keyframes dk-typen{0%,100%{opacity:.25}50%{opacity:1}}
.dkrai-typen span:nth-child(1),.dkai-denkt span:nth-child(1){animation:dk-typen 1.05s ease-in-out infinite}
.dkrai-typen span:nth-child(2),.dkai-denkt span:nth-child(2){animation:dk-typen 1.05s ease-in-out .16s infinite}
.dkrai-typen span:nth-child(3),.dkai-denkt span:nth-child(3){animation:dk-typen 1.05s ease-in-out .32s infinite}
@keyframes dk-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.dkrai-vraagbel,.dkrai-antwoord,.dkrai-klaar,.dkai-antwoord,.dkai-klaar,.dkai-denkt{animation:dk-in .45s cubic-bezier(.16,1,.3,1) both}
.dkai-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:dk-typen .9s steps(2) infinite}
/* Accordeons: hier bestaat het altijd en verbergt de klasse het. */
.dkrfaq-item:not(.dkrfaq-item--open) .dkrfaq-paneel{display:none}
.dkrfaq-item--open .dkrfaq-paneel{animation:dk-in .36s cubic-bezier(.16,1,.3,1) both}
.dkkp-faqrij:not(.dkkp-faqrij--aan) .dkkp-faqtekst,.dkmp-faqrij:not(.dkmp-faqrij--aan) .dkmp-faqtekst,.dkur-faqrij:not(.dkur-faqrij--aan) .dkur-faqtekst,.dkap-faqrij:not(.dkap-faqrij--aan) .dkap-faqtekst,.dkai-faqrij:not(.dkai-faqrij--aan) .dkai-faqtekst{display:none}
.dkkp-faqrij--aan .dkkp-faqtekst,.dkmp-faqrij--aan .dkmp-faqtekst,.dkur-faqrij--aan .dkur-faqtekst,.dkap-faqrij--aan .dkap-faqtekst,.dkai-faqrij--aan .dkai-faqtekst{animation:dk-in .3s cubic-bezier(.16,1,.3,1) both}
/* Live feed in de hero: nieuwe regel schuift binnen */
.dkrhero-row{transition:opacity .55s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1),filter .55s}
.dkrhero-row.is-nieuw{opacity:0!important;transform:translateY(-14px);filter:blur(6px)}
/* Goedkeuren in de mockups */
.dkmp-klaar.is-in,.dkur-klaar.is-in{animation:dk-in .4s cubic-bezier(.16,1,.3,1) both}
/* Blogartikel: tekst uit de database krijgt dezelfde opmaak als de tekststijlen van de pagina */
.dk-artikel p,.dk-artikel li{font-family:"General Sans","General Sans Placeholder",sans-serif;font-size:18px;line-height:1.7;color:rgba(10,10,10,.8);margin:0 0 1.2em}
.dk-artikel h2{font-family:"General Sans","General Sans Placeholder",sans-serif;font-size:32px;font-weight:600;letter-spacing:-.03em;line-height:1.2;color:#1d1d1d;margin:1.6em 0 .6em}
.dk-artikel h3{font-family:"General Sans","General Sans Placeholder",sans-serif;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.25;color:#1d1d1d;margin:1.4em 0 .5em}
.dk-artikel strong{font-weight:600;color:#1d1d1d}
.dk-artikel a{color:#1d1d1d;text-decoration:underline;text-decoration-color:#ffb71b;text-decoration-thickness:2px;text-underline-offset:3px}
.dk-artikel ul,.dk-artikel ol{padding-left:1.4em;margin:0 0 1.2em}
.dk-artikel img{max-width:100%;height:auto;border-radius:16px}
.dk-artikel blockquote{border-left:1px solid rgba(255,183,27,.75);padding-left:22px;margin:1.4em 0;font-size:1.05em;line-height:1.6;color:rgba(10,10,10,.72)}

/* Mobiel menu: de navcontainer heeft transform:translate(-50%), waardoor een position:fixed kind
   daarbinnen niet meer op de viewport rekent en bottom:0 geen hoogte oplevert. Daarom een expliciete hoogte. */
@media (max-width:1000px){
  .dknv-mobiel{ bottom:auto; height:calc(100vh - var(--dknv-top,42px) - var(--dknv-balk,76px)); height:calc(100dvh - var(--dknv-top,42px) - var(--dknv-balk,76px)); }
}

/* ── Demo-CTA midden op de homepage (Components/Shared/MidCta.razor) ─────────────
   Na het waardeblok en vóór bewijs en prijs, op crème tussen de witte koppelingen en de witte reviews.
   Links de belofte en de knop, rechts concreet hoe de demo verloopt. */
.dkcta{ position:relative; width:100%; padding:var(--dk-sectie) 24px; background:#F7F5F2; font-family:"General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; }
.dkcta *{ box-sizing:border-box; }
.dkcta p{ margin:0; }
.dkcta ::selection{ background:#FFB71B; color:#171A1B; }
.dkcta :focus-visible{ outline:2px solid #FFB71B; outline-offset:3px; border-radius:8px; }
.dkcta-binnen{ max-width:1110px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); align-items:center; gap:clamp(36px,5vw,80px); }
.dkcta-kop{ margin:0; max-width:16ch; color:#171A1B; font-weight:600; font-size:clamp(30px,3.6vw,44px); line-height:1.08; letter-spacing:-0.035em; text-wrap:balance; }
.dkcta p.dkcta-lead{ margin:clamp(16px,1.8vw,22px) 0 0; max-width:46ch; font-size:clamp(15px,1.15vw,17px); line-height:1.6; letter-spacing:-0.01em; color:rgba(23,26,27,0.66); text-wrap:pretty; }
.dkcta p.dkcta-feiten{ margin:14px 0 0; font-size:14px; line-height:1.5; color:rgba(23,26,27,0.62); }

.dkcta-verloop{ position:relative; overflow:hidden; padding:clamp(26px,2.6vw,34px); border-radius:24px; background:#171A1B; color:#F7F5F2;
  box-shadow:0 34px 60px -34px rgba(23,26,27,0.7); }
.dkcta-verloop::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 100% 0%, rgba(255,183,27,0.16), transparent 62%); }
.dkcta p.dkcta-verloopkop{ position:relative; font-size:15px; font-weight:600; letter-spacing:-0.01em; color:#F7F5F2; padding-bottom:16px; border-bottom:1px solid rgba(247,245,242,0.1); }
.dkcta-stappen{ position:relative; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.dkcta-stappen li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; padding:16px 0; border-bottom:1px solid rgba(247,245,242,0.08); }
.dkcta-stappen li:last-child{ border-bottom:0; padding-bottom:0; }
.dkcta-stappen b{ display:block; margin-bottom:3px; font-size:15px; font-weight:600; letter-spacing:-0.01em; color:#F7F5F2; }
.dkcta-stappen li > span:last-child{ font-size:13.5px; line-height:1.5; color:rgba(247,245,242,0.66); }
.dkcta-stapnr{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:rgba(255,183,27,0.14); color:#FFB71B;
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; }
.dkcta-knop{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  margin-top:clamp(24px,2.6vw,32px); height:54px; padding:0 28px;
  border-radius:999px; background:#FFB71B; color:#171A1B;
  font-size:16px; font-weight:600; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap;
  box-shadow:0 14px 34px -14px rgba(255,183,27,0.95);
  transition:transform .22s cubic-bezier(.16,1,.3,1), background-color .22s ease, box-shadow .22s ease;
}
.dkcta-knop svg{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.dkcta-knop:hover{ background:#FFC53F; transform:translateY(-2px); box-shadow:0 20px 40px -14px rgba(255,183,27,1); }
.dkcta-knop:hover svg{ transform:translateX(3px); }
.dkcta-knop:active{ transform:translateY(0) scale(.99); }

@media (max-width:900px){
  .dkcta-binnen{ grid-template-columns:minmax(0,1fr); }
  .dkcta-kop{ max-width:none; }
}
@media (max-width:640px){
  .dkcta{ padding-inline:20px; }
  .dkcta-knop{ width:100%; }
  .dkcta p.dkcta-feiten{ text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .dkcta-knop, .dkcta-knop svg{ transition:none; }
  .dkcta-knop:hover{ transform:none; }
}

/* ── Afsluitende CTA onder elke pagina (Components/Layout/SiteCta.razor) ─────
   Eén actie. De knop is het lichtpunt: een gele gloed eronder tilt het blok los
   van de vlakke zwarte footer, zodat het niet als één donkere massa wegvalt. */
.dkfcta{
  position:relative; overflow:hidden; width:100%; background:#171A1B; color:#F7F5F2;
  padding:clamp(72px,8vw,124px) 24px clamp(68px,7.4vw,116px);
  font-family:"General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-0.01em; text-align:center;
}
.dkfcta *{ box-sizing:border-box; }
.dkfcta p{ margin:0; }
.dkfcta ::selection{ background:#FFB71B; color:#171A1B; }
.dkfcta :focus-visible{ outline:2px solid #FFB71B; outline-offset:3px; border-radius:8px; }
/* Geen gloed en geen scheiding: de CTA loopt door in de footer als één zwart vlak.
   De gele knop is het enige accent en draagt de aandacht. */
.dkfcta-binnen{ position:relative; z-index:1; max-width:1110px; margin:0 auto; display:flex; flex-direction:column; align-items:center; }
.dkfcta-kop{ margin:0; max-width:24ch; font-weight:600; font-size:clamp(30px,3.6vw,44px); line-height:1.08; letter-spacing:-0.035em; color:#F7F5F2; text-wrap:balance; }
.dkfcta p.dkfcta-lead{ margin:clamp(18px,2vw,26px) 0 0; max-width:48ch; font-size:clamp(15px,1.15vw,17.5px); line-height:1.6; color:rgba(247,245,242,0.72); text-wrap:balance; }
.dkfcta-knop{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  margin-top:clamp(28px,3vw,38px); height:54px; padding:0 28px;
  border-radius:999px; background:#FFB71B; color:#171A1B;
  font-size:16px; font-weight:600; letter-spacing:-0.01em; text-decoration:none; white-space:nowrap;
  box-shadow:0 12px 30px -14px rgba(255,183,27,0.8);
  transition:transform .22s cubic-bezier(.16,1,.3,1), background-color .22s ease, box-shadow .22s ease;
}
.dkfcta-knop svg{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.dkfcta-knop:hover{ background:#FFC53F; transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(255,183,27,0.9); }
.dkfcta-knop:hover svg{ transform:translateX(3px); }
.dkfcta-knop:active{ transform:translateY(0) scale(.99); }
.dkfcta p.dkfcta-noot{ margin:8px 0 0; font-size:14px; line-height:1.6; color:rgba(247,245,242,0.66); }
.dkfcta-noot a{ white-space:nowrap; color:rgba(247,245,242,0.92); font-weight:600; text-decoration:underline; text-decoration-color:#FFB71B; text-decoration-thickness:2px; text-underline-offset:4px; transition:color .18s ease; }
.dkfcta-noot a:hover{ color:#FFB71B; }
.dkfcta-zeker{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px; margin:clamp(20px,2.2vw,28px) 0 0; padding:0; list-style:none; }
.dkfcta-zeker li{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; line-height:1.4; color:rgba(247,245,242,0.86); letter-spacing:-0.01em; }
.dkfcta-zeker svg{ flex:none; width:20px; height:20px; padding:3px; border-radius:50%; background:rgba(255,183,27,0.16); color:#FFB71B; }
.dkfcta p.dkfcta-bewijs{ display:inline-flex; align-items:center; gap:8px; margin:clamp(18px,1.8vw,22px) 0 0; font-size:14px; line-height:1.4; color:rgba(247,245,242,0.66); }
.dkfcta-bewijs b{ font-weight:600; color:#F7F5F2; }
.dkfcta-sterren{ display:inline-flex; gap:2px; color:#FFB71B; }

@media (max-width:640px){
  .dkfcta{ padding-inline:20px; }
  .dkfcta-kop{ max-width:none; }
  .dkfcta-knop{ width:100%; }
  .dkfcta-zeker{ flex-direction:column; align-items:flex-start; width:fit-content; margin-inline:auto; }
}
@media (prefers-reduced-motion:reduce){
  .dkfcta-knop, .dkfcta-knop svg{ transition:none; }
  .dkfcta-knop:hover{ transform:none; }
}

/* Kruimelpad en herokaart op elke pagina op dezelfde hoogte: de prijzenpagina is een laag met een vaste
   168px, de andere hero's groeien mee tot 178px op brede schermen. */
.pg-cwkDu .pg-zzlqe9{ padding-top:clamp(168px,11vw,178px); }
/* De layout sorteert zijn kinderen met order (navigatie 1001 op de telefoon, pagina-inhoud 1002, footer 1004
   of 1005). Zonder eigen order stond de afsluitende CTA op telefoons bóven de hero. 1003 is de plek van de oorspronkelijke CTA. */
.dkfcta{ order:1003; }

/* ── Winkelwagen in de navigatiebalk (dknw) ─────────────────────────────────────────
   Duinker levert diensten; de shop is erbij voor bestaande klanten. De wagen laat zich daarom pas zien
   zodra er iets in zit, en staat in de shop altijd in beeld. Inhoud komt uit duinker.js. */
.dknw{ position:relative; display:flex; align-items:center; }
.dknw[hidden]{ display:none; }
.dknw-knop{ position:relative; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:#171A1B; background:#fff; border:1px solid rgba(23,26,27,0.16); text-decoration:none; transition:border-color .2s ease, background-color .2s ease, transform .12s cubic-bezier(.16,1,.3,1); }
.dknw-knop:hover{ border-color:rgba(23,26,27,0.62); background:#F7F5F2; }
.dknw-knop:active{ transform:scale(.94); }
.dknw-knop:focus-visible{ outline:2px solid #FFB71B; outline-offset:2px; }
.dknw-tel{ position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:#FFB71B; color:#171A1B; font-size:11.5px; font-weight:700; line-height:19px; text-align:center; box-shadow:0 0 0 2px #fff; font-variant-numeric:tabular-nums; }
.dknw-tel[hidden]{ display:none; }
/* Even aantikken zodra er iets bij komt */
@keyframes dknw-tik{ 0%{ transform:scale(1); } 30%{ transform:scale(1.14); } 60%{ transform:scale(.97); } 100%{ transform:scale(1); } }
.dknw-knop.is-nieuw{ animation:dknw-tik .6s cubic-bezier(.16,1,.3,1); border-color:#FFB71B; }

/* Het lijstje onder de knop: even kijken wat erin zit, zonder de pagina te verlaten */
.dknw-paneel{ position:absolute; top:calc(100% + 12px); right:0; z-index:40; width:320px; padding:18px; border-radius:20px; background:#fff; border:1px solid rgba(23,26,27,0.1); box-shadow:0 30px 60px -28px rgba(23,26,27,0.45); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .22s ease, transform .35s cubic-bezier(.16,1,.3,1), visibility .22s; }
/* Brug over het gaatje tussen knop en lijstje, anders valt het dicht zodra je de muis ernaartoe beweegt. */
.dknw-paneel::before{ content:""; position:absolute; left:0; right:0; bottom:100%; height:14px; }
.dknw:hover .dknw-paneel, .dknw:focus-within .dknw-paneel{ opacity:1; visibility:visible; transform:none; }
.dknw-paneelkop{ margin:0 0 12px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(23,26,27,0.62); }
.dknw-lijst{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.dknw-lijst li{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; gap:10px; font-size:14px; color:#171A1B; }
.dknw-aantal{ font-weight:700; color:rgba(23,26,27,0.62); font-variant-numeric:tabular-nums; }
.dknw-naam{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dknw-prijs{ font-weight:600; font-variant-numeric:tabular-nums; }
.dknw-meer{ margin:10px 0 0; font-size:13px; color:rgba(23,26,27,0.62); }
.dknw-totaal{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid rgba(23,26,27,0.1); font-size:13.5px; color:rgba(23,26,27,0.62); }
.dknw-totaal b{ font-size:19px; font-weight:600; letter-spacing:-0.02em; color:#171A1B; font-variant-numeric:tabular-nums; }
.dknw-actie{ display:flex; align-items:center; justify-content:center; gap:8px; height:46px; margin-top:14px; border-radius:999px; background:#FFB71B; color:#171A1B; font-size:15px; font-weight:600; text-decoration:none; transition:transform .12s cubic-bezier(.16,1,.3,1), filter .2s ease; }
.dknw-actie:hover{ filter:brightness(1.05); } .dknw-actie:active{ transform:scale(.97); }
.dknw-noot{ margin:10px 0 0; text-align:center; font-size:12.5px; color:rgba(23,26,27,0.62); }
.dknw-leeg{ margin:0; font-size:14px; line-height:1.5; color:rgba(23,26,27,0.62); }
/* Het hidden-attribuut zet display:none, maar dat komt uit de browserstandaard en verliest van de
   eigen display:flex hierboven. Zonder deze regel stond er in een lege wagen alsnog een regel
   "Totaal excl. btw € 0,00" met een knop eronder. Viel eerder niet op, omdat een lege wagen toen
   helemaal niet in beeld kwam. */
.dknw-lijst[hidden], .dknw-totaal[hidden], .dknw-actie[hidden]{ display:none; }
.dknw-leeg a{ color:#171A1B; font-weight:600; text-decoration:underline; text-decoration-color:#FFB71B; text-decoration-thickness:2px; text-underline-offset:3px; }

@media (max-width:1000px){
  /* Op de telefoon staat de knop naast het menu, altijd bij de hand; het lijstje zelf is daar te klein. */
  .dknw-knop{ width:40px; height:40px; border-radius:11px; }
  .dknw-paneel{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .dknw-knop, .dknw-paneel, .dknw-actie{ transition:none; }
  .dknw-knop.is-nieuw{ animation:none; }
}

/* Volgorde van de homepage op de telefoon. De oorspronkelijke opmaak gaf de blokken daar eigen order-waarden, waardoor de
   pagina in een andere volgorde stond dan op de desktop. Eerder stond hier een lijst met een vast nummer
   per blok, maar dan moet je die lijst bijwerken zodra er een blok bij komt of verschuift: toen de
   blogsectie opnieuw werd gebouwd viel hij buiten de lijst en sprong hij op de telefoon naar boven.
   Daarom staat alles nu op order:0 en bepaalt de volgorde in Home.razor wat je ziet, op elk scherm.
   De slot-CTA houdt zijn eigen hoge order en blijft dus onderaan. */
@media (max-width:809.98px){
  .pg-E7rqx .dkvolg-1, .pg-E7rqx .dkvolg-2, .pg-E7rqx .dkvolg-3, .pg-E7rqx .dkvolg-4, .pg-E7rqx .dkvolg-5, .pg-E7rqx .dkvolg-6, .pg-E7rqx .dkvolg-7, .pg-E7rqx .dkvolg-8, .pg-E7rqx .dkvolg-9, .pg-E7rqx .dkvolg-10, .pg-E7rqx .dkvolg-11, .pg-E7rqx .dkvolg-12, .pg-E7rqx .dkvolg-13{ order:0; }
}

/* De drie "Meer over ..." knoppen bij de modules op de homepage. Bij de import waren ze hun gele rand
   kwijtgeraakt (de rand komt via data-border, zie Home.razor), waardoor ze niet als knop lazen.
   Met de rand terug plus een pijl en een hover is het onmiskenbaar een knop. */

/* Kopje boven de drie modules op de homepage. Het icoonvlakje komt uit het oude ontwerp en past niet meer
   bij de rest van de site; daar staat boven elke sectie een gele stip met het woord. Zelfde maat en
   letterafstand als .dkbel-label op de andere pagina's. */
.dkmodlabel{ display:inline-flex; align-items:center; gap:9px; color:rgba(23,26,27,0.62); }
.dkmodlabel::before{ content:""; width:7px; height:7px; border-radius:50%; background:#FFB71B; flex:none; }

/* Op de telefoon stapelt bij de modules de mockup onder de tekst, maar hij tekent buiten zijn eigen vak
   en schoof daardoor over de knop "Meer over ..." heen: die was niet meer aan te tikken. Dat deed het
   oorspronkelijke ontwerp ook. Een marge boven de mockup haalt ze uit elkaar. */
@media (max-width:809.98px){
  /* De basisopmaak reserveert hier een vak van 200px, maar onze nagebouwde mockups zijn hoger. Het vak centreert
     zijn inhoud, dus de mockup stak er boven en onder uit en lag over de knop. Het vak mag meegroeien. */
  .pg-E7rqx .pg-1bb4bcq, .pg-E7rqx .pg-t4h7zh, .pg-E7rqx .pg-1767oun{ height:auto; }
  .dkrmv-wrap{ margin-top:16px; }
}

/* Juridische pagina's: lange woorden zoals "verwerkersovereenkomst" pasten op een smal scherm niet in de
   kop en duwden de pagina breder dan het scherm. De kop schaalt nu mee en woorden mogen afbreken. */
.prose h1, .prose h2, .prose h3{ overflow-wrap:break-word; }

/* ── Contact: korte vragen onder de twee blokken ──────────────────────────────────────
   De dingen die mensen willen weten vlak voordat ze bellen. De uitklapper is dezelfde als op de
   prijzenpagina (dkrfaq), dus het gedrag zit al in duinker.js. */
.dkct-vragen{ padding:clamp(8px,1.4vw,16px) 24px clamp(64px,7vw,96px); }
.dkct-vragenkop{ max-width:720px; margin:0 auto clamp(20px,2.4vw,28px); text-align:center; }
.dkct-vragentitel{ margin:0; font-size:clamp(26px,3.1vw,38px); font-weight:600; letter-spacing:-0.03em; line-height:1.12; color:#171A1B; text-wrap:balance; }
.dkct-vragenvoet{ max-width:720px; margin:clamp(20px,2.4vw,28px) auto 0; text-align:center; font-size:14.5px; color:rgba(23,26,27,0.62); }
.dkct-vragenvoet a{ color:#171A1B; font-weight:600; text-decoration:underline; text-decoration-color:#FFB71B; text-decoration-thickness:2px; text-underline-offset:3px; }
@media (max-width:640px){ .dkct-vragen{ padding-left:20px; padding-right:20px; } }

/* ── Prijzen: het maandbedrag als vakje rechts dat meeloopt ───────────────────────────
   Terwijl je het aantal medewerkers invult en modules aanvinkt, stond het bedrag als brede balk
   onderaan en scrolde het weg. Het is nu een smal vak aan de rechterkant dat onderin beeld blijft
   staan zolang je in de calculator bezig bent, en op zijn eigen plek zakt zodra je eronder komt.
   De sectie eromheen knipt met overflow:hidden alles af, waardoor meelopen niet kon; met
   clip blijft het afknippen werken maar ontstaat er geen scrollvlak.
   Gemeten tegen de vuistregel dat vaste schermranden samen onder een vijfde tot een derde van het
   scherm blijven: navigatie plus meelopend vakje is 178px van 844 op de telefoon (21%) en 194px
   van 900 op de desktop (22%). */
.pg-cwkDu .pg-qs84pn{ overflow:clip; }
.dkrc-totaal{
  position:sticky; bottom:24px; z-index:6;
  width:min(330px,100%); margin-left:auto;
  flex-direction:column; align-items:stretch; justify-content:flex-start; gap:16px;
  padding:22px 24px 24px;
  box-shadow:0 30px 60px -26px rgba(23,26,27,0.75);
}
.dkrc-totaal .dkrc-totaalknop{ width:100%; justify-content:center; }
.dkrc-anker{ height:0; }
/* Zolang het vakje zweeft blijft het klein, zodat het niets afdekt van de modules eronder.
   Op zijn eigen plek onderaan de calculator klapt het open naar het volledige vak. */
.dkrc-totaal.is-zwevend{ flex-direction:row; flex-wrap:nowrap; align-items:center; gap:16px; width:auto; max-width:min(450px,100%); padding:12px 14px 12px 20px; }
.dkrc-totaal.is-zwevend .dkrc-totaallabel{ display:none; }
.dkrc-totaal.is-zwevend .dkrc-totaalbedrag{ margin-top:0; font-size:25px; white-space:nowrap; }
.dkrc-totaal.is-zwevend .dkrc-totaallinks{ min-width:0; }
.dkrc-totaal.is-zwevend .dkrc-totaalknop{ width:auto; flex:none; height:46px; padding:0 20px; font-size:15px; }
/* Een meelopend vak kan een regel afdekken die net de toetsenbordfocus krijgt. Met deze marge
   scrolt de browser zo'n regel altijd boven het vakje uit, ook bij ankerlinks. */
:root:has(.dkrc-totaal){ scroll-padding-bottom:104px; }
/* Het bedrag verandert zonder dat de focus verspringt. Een korte aanzet laat zien dat er echt
   iets opnieuw berekend is; voorlezers horen het via de live-regio in de opmaak. */
@keyframes dkrc-bedrag{ from{ opacity:.4; transform:translateY(3px); } to{ opacity:1; transform:none; } }
.dkrc-totaalbedrag{ animation:dkrc-bedrag 220ms cubic-bezier(.22,.61,.36,1); }
@media (max-width:1000px){
  /* Smaller dan dit staat de calculator onder elkaar; dan is een balk over de volle breedte beter. */
  .dkrc-totaal{ width:auto; margin-left:0; flex-direction:row; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; bottom:12px; }
  .dkrc-totaallabel{ font-size:10.5px; letter-spacing:0.04em; white-space:nowrap; }
  .dkrc-totaalbedrag{ margin-top:4px; font-size:25px; }
  .dkrc-totaalbedrag .dkrc-per{ display:none; }
  .dkrc-totaal .dkrc-totaalknop{ width:auto; flex:none; height:46px; padding:0 18px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .dkrc-totaal{ transition:none; }
  .dkrc-totaalbedrag{ animation:none; }
}

/* ── Bovenbalk: shopaccount en winkelwagen naast de reviews (desktop) ─────────────────────────
   Inloggen in Workforce zelf staat als knop "Workforce-portal" in de navigatiebalk; hier gaat het om
   het account van de shop (bestellingen volgen). Op de telefoon staat de wagen naast het menu. */
.dknv-top{ position:relative; z-index:5; }
.dknv-reviewsvak{ align-items:center; gap:14px; }
.dknv-topscheiding{ width:1px; height:16px; background:rgba(247,245,242,0.18); }
.dknv-toplink{ display:inline-flex; align-items:center; gap:6px; color:#F7F5F2; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
.dknv-toplink:hover{ color:#FFB71B; }
.dknv-toplink:focus-visible{ outline:2px solid #FFB71B; outline-offset:3px; border-radius:4px; }
.dknw--top{ position:relative; }
.dknw--top .dknw-knop{ width:30px; height:30px; border-radius:9px; color:#F7F5F2; background:transparent; border-color:rgba(247,245,242,0.22); }
.dknw--top .dknw-knop svg{ width:16px; height:16px; }
.dknw--top .dknw-knop:hover{ background:rgba(247,245,242,0.08); border-color:rgba(247,245,242,0.52); }
.dknw--top .dknw-tel{ top:-6px; right:-7px; min-width:17px; height:17px; line-height:17px; font-size:10.5px; box-shadow:0 0 0 2px #171A1B; }
.dknw--top .dknw-paneel{ top:calc(100% + 10px); }
.dknw--balk{ display:none; }
.dknw--balk[hidden]{ display:none; }
@media (max-width:1000px){
  .dknw--balk{ display:block; }
  .dknw--balk[hidden]{ display:none; }
}
/* "Workforce-portal" is langer dan het oude "Log in": menulinks niet laten afbreken. */
.dknv-link{ white-space:nowrap; }

/* De notitie onder het AI-blok op de homepage komt uit een tekststijl met rgba(93,94,103,0.7):
   3,13 op wit, terwijl 4,5 de norm is voor tekst van 14px. Eén keer gebruikt, dus hier rechtgezet. */

/* ── Cookiemelding (dkck) ───────────────────────────────────────────────────────────
   De site zet zelf alleen een antiforgery-cookie en bewaart de winkelwagen in de browser:
   allemaal nodig om te werken, daar hoef je niets voor te vragen. De agenda van Google op
   de afspraakpagina's is de enige externe partij en zet wél cookies van Google. Die iframes
   staan daarom in de pagina met data-dksrc in plaats van src en laden pas na toestemming.
   De melding staat onderaan en blokkeert de pagina niet: hij vraagt iets, hij gijzelt niets. */
.dkck{ position:fixed; left:0; right:0; bottom:0; z-index:90; padding:20px 24px; pointer-events:none;
  background:#171A1B; box-shadow:0 -24px 48px -28px rgba(0,0,0,0.55);
  transform:translateY(100%); transition:transform .45s cubic-bezier(.16,1,.3,1); }
.dkck[hidden]{ display:none; }
.dkck-binnen{ pointer-events:auto; display:flex; align-items:center; gap:clamp(16px,2.4vw,32px);
  max-width:1110px; margin:0 auto; color:rgba(247,245,242,0.72); }
.dkck.is-in{ transform:none; }
.dkck-tekst{ min-width:0; }
.dkck-tekst p{ margin:0; font-size:14px; line-height:1.6; text-wrap:pretty; }
.dkck-kop{ margin-bottom:4px !important; font-size:15.5px !important; font-weight:600; color:#F7F5F2; letter-spacing:-0.01em; }
.dkck-tekst a{ color:#F7F5F2; font-weight:600; text-decoration:none; border-bottom:1px solid #FFB71B; }
.dkck-knoppen{ display:flex; gap:10px; flex:none; }
.dkck-knop{ display:inline-flex; align-items:center; justify-content:center; height:46px; padding:0 20px;
  border:0; border-radius:999px; font:inherit; font-size:15px; font-weight:600; cursor:pointer; white-space:nowrap;
  transition:transform .12s cubic-bezier(.16,1,.3,1), filter .2s ease; }
.dkck-knop:active{ transform:scale(.97); }
.dkck-knop:focus-visible{ outline:2px solid #FFB71B; outline-offset:3px; }
.dkck-knop--geel{ background:#FFB71B; color:#171A1B; }
.dkck-knop--geel:hover{ filter:brightness(1.06); }
.dkck-knop--licht{ background:rgba(247,245,242,0.12); color:#F7F5F2; }
.dkck-knop--licht:hover{ background:rgba(247,245,242,0.2); }
@media (max-width:860px){
  .dkck{ padding:18px 20px; }
  .dkck-binnen{ flex-direction:column; align-items:stretch; gap:16px; }
  .dkck-knoppen{ flex-direction:column-reverse; }
  .dkck-knop{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .dkck{ transition:none; } }

/* Plaats van een extern blok dat nog niet geladen is. */
.dkck-blok{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  min-height:320px; padding:32px 24px; border-radius:20px; text-align:center;
  background:#F7F5F2; border:1px solid rgba(23,26,27,0.1); }
.dkck-blok p{ margin:0; max-width:46ch; font-size:14.5px; line-height:1.6; color:rgba(23,26,27,0.62); text-wrap:pretty; }
.dkck-blokkop{ font-size:17px !important; font-weight:600; color:#171A1B !important; letter-spacing:-0.015em; }
.dkck-blok .dkck-knop--geel{ margin-top:4px; }
.dkck-blok a{ color:#171A1B; font-weight:600; text-decoration:none; border-bottom:1px solid #FFB71B; }

/* Schuifjes in de cookiemelding. Ze staan er pas als je op "Zelf instellen" klikt, zodat de
   eerste vraag kort blijft voor wie gewoon ja of nee wil zeggen. */
.dkck-keuzes{ display:grid; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(247,245,242,0.12); }
.dkck-keuzes[hidden]{ display:none; }
.dkck-keuze{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; cursor:pointer; }
.dkck-keuze.is-vast{ cursor:default; }
.dkck-keuze input{ position:absolute; opacity:0; width:0; height:0; }
.dkck-schuif{ position:relative; width:38px; height:22px; border-radius:999px; flex:none; margin-top:1px;
  background:rgba(247,245,242,0.2); transition:background-color .25s ease; }
.dkck-schuif::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%;
  background:#F7F5F2; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.dkck-keuze input:checked + .dkck-schuif{ background:#FFB71B; }
.dkck-keuze input:checked + .dkck-schuif::after{ transform:translateX(16px); background:#171A1B; }
.dkck-keuze input:disabled + .dkck-schuif{ background:rgba(255,183,27,0.45); }
.dkck-keuze input:focus-visible + .dkck-schuif{ outline:2px solid #FFB71B; outline-offset:3px; }
.dkck-keuzetekst{ font-size:13px; line-height:1.5; color:rgba(247,245,242,0.6); }
.dkck-keuzetekst b{ display:block; font-size:14px; font-weight:600; color:#F7F5F2; margin-bottom:2px; }
.dkck-knop--kaal{ background:transparent; color:rgba(247,245,242,0.72); padding:0 12px; }
.dkck-knop--kaal:hover{ color:#F7F5F2; text-decoration:underline; }
.dkck.is-open .dkck-binnen{ align-items:flex-start; }
.dkck.is-open .dkck-knoppen{ align-self:flex-end; }
@media (max-width:860px){ .dkck.is-open .dkck-knoppen{ align-self:stretch; } }

/* Opengeklapt kan de melding hoger worden dan het scherm; dan mag hij schuiven in plaats van
   bovenaan weg te lopen. */
.dkck-binnen{ max-height:calc(100dvh - 40px); overflow:auto; overscroll-behavior:contain; }
/* Zodra je zelf instelt is "Keuze bewaren" wat je wilt doen, dus die krijgt het accent en komt
   rechts te staan. Anders stuurt de gele knop je naar alles toestaan terwijl je net zat te kiezen. */
.dkck.is-open .dkck-knop--kaal{ order:3; background:#FFB71B; color:#171A1B; padding:0 20px; }
.dkck.is-open .dkck-knop--kaal:hover{ filter:brightness(1.06); text-decoration:none; }
.dkck.is-open .dkck-knop--geel{ order:2; background:rgba(247,245,242,0.12); color:#F7F5F2; }
.dkck.is-open .dkck-knop--geel:hover{ background:rgba(247,245,242,0.2); filter:none; }
.dkck.is-open .dkck-knop--licht{ order:1; background:transparent; color:rgba(247,245,242,0.72); padding:0 12px; }
.dkck.is-open .dkck-knop--licht:hover{ background:transparent; color:#F7F5F2; text-decoration:underline; }

/* De melding zweeft boven de pagina. Op een lange tekstpagina liep de tekst er zichtbaar onderdoor,
   half afgesneden langs de randen van het vlak. Twee dingen daartegen: de pagina vervaagt onder het
   vlak, zodat tekst oplost in plaats van afgekapt te worden, en zolang de melding staat houdt de
   pagina onderaan ruimte vrij zodat het einde van de tekst er niet achter verdwijnt. */
body:has(.dkck:not([hidden])){ padding-bottom:180px; }
@media (max-width:860px){ body:has(.dkck:not([hidden])){ padding-bottom:300px; } }

/* ══ Knoppen en tekstlinks: één taal voor de hele site ══════════════════════════════
   Twee knopmaten, meer niet. Groot (54px, 16px) voor de conversiemomenten: de hero
   en de twee CTA-banden. Standaard (46px, 15px) voor acties binnen een sectie, zoals
   de app- en prijskaarten. Die maten staan bij de knoppen zelf (.dkrhero-btn,
   .dkcta-knop, .dkfcta-knop, .dkbel-knop, .dkapp-knop, .dkrpp-knop).
   Navigatie naar een andere pagina is géén knop maar de tekstlink hieronder, zodat
   geel voorbehouden blijft aan "plan een demo" en "bereken jouw prijs". */

/* Tekstlink met pijl, dezelfde als op de oplossingspagina's */
.dkl{
  display:inline-flex; align-items:center; gap:8px; width:fit-content;
  font-family:inherit; font-size:16px; font-weight:600; letter-spacing:-0.01em;
  color:#171A1B; text-decoration:none;
  border-bottom:2px solid #FFB71B; padding-bottom:3px;
  transition:color .2s ease, border-color .2s ease;
}
.dkl svg{ transition:transform .3s cubic-bezier(.16,1,.3,1); }
.dkl:hover{ color:#8A5700; border-color:#8A5700; }
.dkl:hover svg{ transform:translateX(4px); }
.dkl:focus-visible{ outline:2px solid #FFB71B; outline-offset:4px; border-radius:2px; }

@media (prefers-reduced-motion:reduce){ .dkl, .dkl svg{ transition:none; } }

/* ══ Eén verticaal ritme op de homepagina ══════════════════════════════════════════
   Alle secties lopen op --dk-sectie, ook de app-, koppelingen- en demosectie op andere
   pagina's. Op 1110px inhoud gaf 101px boven en onder een pagina die gepropt aanvoelde;
   158px op 1440, 184px op een breed scherm en 88px op de telefoon geeft elke sectie
   ruimte om op zichzelf te staan.
   De AI-sectie bestaat uit twee blokken onder elkaar, daar zit de ruimte alleen boven het
   eerste en onder het tweede. */
:root{ --dk-sectie:clamp(88px,11vw,184px); }
.pg-E7rqx .dkvolg-3, .pg-E7rqx .dkvolg-4,
.pg-E7rqx .dkvolg-11, .pg-E7rqx .dkvolg-12{
  padding-top:var(--dk-sectie); padding-bottom:var(--dk-sectie);
}
.pg-E7rqx .dkvolg-8{ padding-top:var(--dk-sectie); padding-bottom:clamp(30px,3vw,46px); }
/* De modulesectie grenst aan een even witte sectie, dus er is geen kleurwissel die de overgang markeert.
   Met alleen de ruimte van de sectie erboven (zo'n 130px) plakte de modulekop tegen de link "Meer over
   Duinker", met de volle ruimte van beide secties werd het juist een leeg gat. Een kwart erbij geeft
   samen zo.n 230px op een breed scherm, ruim maar nog duidelijk één pagina. */
.pg-E7rqx .dkvolg-4{ padding-top:max(48px, calc(var(--dk-sectie) * .25)); }
.pg-E7rqx .dkvolg-9{ padding-top:0; padding-bottom:var(--dk-sectie); }
.dkvolg-5 .dkbel-sectie{ padding-top:var(--dk-sectie); padding-bottom:var(--dk-sectie); }

/* De drie moduleblokken stonden 104px uit elkaar, waardoor ze los van elkaar lazen.
   Op 72px vormen kop, blokken en mockups één reeks. Dezelfde maat als de kolomafstand. */
.pg-E7rqx .pg-ymuawe{ gap:clamp(56px,5.6vw,80px); }
.dkrmv-wrap{ will-change:transform; }
@media (prefers-reduced-motion:reduce){ .dkrmv-wrap{ will-change:auto; transform:none !important; } }

/* ══ Eén typografische schaal voor de sectiekoppen op de homepagina ════════════════
   De koppen stonden op zeven verschillende maten (34, 38, 40, 42, 44, 46 en 52px) en
   de oorspronkelijke koppen hadden bovendien nauwelijks negatieve letterafstand, waardoor ze
   los stonden van de rest van de site. Nu zijn er twee niveaus: een sectiekop en, een
   trap hoger, de twee CTA-banden die een uitspraak doen. Hoe groter de letter, hoe
   strakker de afstand, zoals overal in de huisstijl. */
.pg-E7rqx h2.pg-styles-preset-1989rkr,
.pg-E7rqx .dkvolg-5 h2.dkbel-h2,
.pg-E7rqx h2.dkapp-kop,
.pg-E7rqx h2.dkrpp-kop,
.pg-E7rqx h2.dkkop-titel{
  font-size:clamp(26px,3.1vw,38px); line-height:1.15; letter-spacing:-0.03em;
}
/* De twee CTA-banden staan buiten de pagina-root (ze komen uit de layout), dus die
   maat staat bij de knoppen zelf: .dkcta-kop en .dkfcta-kop, beide clamp(30,3.6vw,44). */

/* ══ Sectielabels op de homepagina ════════════════════════════════════════════════
   Elke sectie opent met hetzelfde kopje: een gele stip en een woord in #B87500. Dat
   was op de homepagina nog een mengelmoes van drie grijstinten. */
/* Op de cremeondergrond haalt #B87500 bij deze maat de contrastnorm net niet. */
.pg-E7rqx p.pg-styles-preset-cimupk{ color:#8A5700; }
.pg-E7rqx .dkvolg-5 .dkbel-label{ color:#B87500; }
.pg-E7rqx p.pg-styles-preset-cimupk::before{
  content:""; display:inline-block; vertical-align:0.08em; margin-right:9px;
  width:7px; height:7px; border-radius:50%; background:#FFB71B;
  box-shadow:0 0 0 4px rgba(255,183,27,0.18);
}
/* De modulelabels hebben al een eigen stip, daar hoort er geen tweede bij. */
.pg-E7rqx .dkrmv-wrap p.pg-styles-preset-cimupk::before{ content:none; }

/* Het label dat we zelf toevoegen aan de secties die er geen hadden. */

/* De kop "Vragen over de prijs" op /prijzen was nog oorspronkelijk: 34px en bijna geen
   negatieve letterafstand, terwijl de andere sectiekoppen op die pagina 38px zijn. */
h2.pg-styles-preset-7jey0m{
  font-size:clamp(26px,3.1vw,38px); line-height:1.15; letter-spacing:-0.03em;
}

/* De verstuurknop van het contactformulier stond nog op 48px; de hero- en
   formulierknoppen op de rest van de site zijn 54px. */
.pg-vhTei.pg-v-orgqko, .pg-vhTei.pg-v-orgqko > *{ min-height:54px; }
.pg-vhTei.pg-v-orgqko > div{ display:flex; align-items:center; justify-content:center; }
.pg-vhTei.pg-v-orgqko a, .pg-vhTei.pg-v-orgqko button{ height:54px; font-size:16px; }

/* De AI-sectie: nu de tekst korter is, is de linkerkolom lager dan het chatvenster
   ernaast. Door beide op het midden uit te lijnen lezen ze als één blok in plaats van
   als twee kolommen die onderaan uiteenlopen. */
.pg-E7rqx .dkvolg-8 .pg-clqrxu{ align-items:center; }
@media (max-width:900px){ .pg-E7rqx .dkvolg-8 .pg-clqrxu{ align-items:flex-start; } }

/* Modules op de homepagina: de lagen om de mockups knipten met overflow:hidden, waardoor de schaduw onder
   de toegangskaart en onder het AI-paneel recht werd afgesneden. Verticaal mag er nu iets uitsteken; horizontaal
   blijft het geknipt, anders scrollt de pagina op een telefoon zijwaarts. */
.pg-E7rqx .pg-ymuawe, .pg-E7rqx .pg-1caxdll, .pg-E7rqx .pg-yvqqbb{ overflow:clip visible; }
/* Het puntenblok onder het AI-paneel heeft dezelfde z-index en staat later in de pagina, dus het
   tekende zijn crème achtergrond over de schaduw heen. De AI-sectie ligt daarom een laag hoger. */
.pg-E7rqx .pg-yvqqbb{ position:relative; z-index:2; }
/* Contactformulier: de verstuurknop is 54px (huisstijl), maar zijn vak was nog 40px uit het oude ontwerp.
   De tekst stond daardoor bovenin de knop en de gloed eronder viel weg achter de rand van het formulier. */
.pg-UtAO7 .pg-a90ztx-container{ height:54px; }
.pg-UtAO7 form.pg-uff656{ overflow:visible; }

/* FAQ op de homepagina: naast "Alle veelgestelde vragen" staat de link naar de blog. Het blogblok met
   twee kaarten stond vlak voor de slot-CTA en is in oktober 2026 vervangen door deze ene tekstlink
   (onderzoek in CLAUDE.md); de blog blijft bereikbaar via navigatie, footer en sitemap. */
.pg-E7rqx .pg-1247je8-container{ display:flex; flex-wrap:wrap; gap:12px 28px; width:100%; height:auto; }
@media (max-width:809.98px){ .pg-E7rqx .pg-1247je8-container{ justify-content:center; } .pg-E7rqx .pg-1houzjg{ padding-bottom:28px; } }

/* Modules op de homepagina: de rijen waren 1040px breed en begonnen daardoor 35px verder naar binnen dan de kop en
   alle andere secties (1110px). Nu delen ze dezelfde linker- en rechterrand. */
.pg-E7rqx .dkvolg-4 .pg-3hhd7g, .pg-E7rqx .dkvolg-4 .pg-8zg8zi, .pg-E7rqx .dkvolg-4 .pg-xteeen{ max-width:1110px; }
/* Op de telefoon stonden label, kop, alinea en link gecentreerd. Alinea's van vier regels lezen gecentreerd
   moeizaam, en de werkdag, de app en de AI-sectie erboven en eronder staan links uitgelijnd. */
@media (max-width:809.98px){
  .pg-E7rqx .dkvolg-4 .pg-ymuawe > :not(:first-child) .pg-text{ --pg-text-alignment:left !important; }
  .pg-E7rqx .dkvolg-4 .pg-qkcn5s, .pg-E7rqx .dkvolg-4 .pg-10mcjjy,
  .pg-E7rqx .dkvolg-4 .pg-ju1imn, .pg-E7rqx .dkvolg-4 .pg-5qael9, .pg-E7rqx .dkvolg-4 .pg-1x0kqcb{ justify-content:flex-start; }
}

/* ══ Modules op de homepagina: elke mockup op een eigen podium ══════════════════════════
   De donkere kaarten (360px) stonden los op wit naast een tekstkolom van bijna twee keer zo breed, en
   lazen daardoor als kleine plaatjes. Nu staat elke kaart op een zacht vlak van de halve breedte, getint
   in de kleur van zijn module: geel voor uren, blauwgroen voor productie, neutraal voor toegang. Dezelfde
   kleurcode als in de hero en in "Waarom Duinker", ook op de stip voor het label. */
.pg-E7rqx .dkvolg-4 :is(.pg-3hhd7g, .pg-8zg8zi, .pg-xteeen){ flex-wrap:nowrap; align-items:center; gap:clamp(32px,5vw,72px); }
.pg-E7rqx .dkvolg-4 :is(.pg-3hhd7g, .pg-8zg8zi, .pg-xteeen) > :not(:has(.dkrmv-wrap)){ flex:1 1 0; min-width:0; width:auto; }
.pg-E7rqx .dkvolg-4 :is(.pg-3hhd7g, .pg-8zg8zi, .pg-xteeen) > :has(.dkrmv-wrap){
  --podium:255,183,27;
  position:relative; flex:0 0 min(540px, 50%); width:auto !important; max-width:none; height:auto; min-height:clamp(320px,30vw,400px);
  display:flex; align-items:center; justify-content:center; padding:clamp(28px,3.6vw,52px);
  border-radius:28px; isolation:isolate;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(var(--podium),var(--podium-a,0.22)), transparent 70%),
    radial-gradient(rgba(23,26,27,0.07) 1px, transparent 1.2px) 0 0 / 18px 18px,
    #F7F5F2;
}
.pg-E7rqx .dkvolg-4 .pg-8zg8zi > :has(.dkrmv-wrap){ --podium:71,191,206; }
.pg-E7rqx .dkvolg-4 .pg-xteeen > :has(.dkrmv-wrap){ --podium:23,26,27; --podium-a:0.08; }
.pg-E7rqx .dkvolg-4 :has(> .dkrmv-wrap){ width:100%; max-width:380px; height:auto; }
/* De stip voor het label: de ring om de stip werd links afgeknipt door de laag eromheen (overflow:clip), was
   overal geel, ook om de blauwgroene en donkere stip, en stond met marge plus gap 18px van het woord. */
.pg-E7rqx .dkvolg-4 .dkmodlabel{ --stip:255,183,27; }
.pg-E7rqx .dkvolg-4 .pg-8zg8zi .dkmodlabel{ --stip:71,191,206; }
.pg-E7rqx .dkvolg-4 .pg-xteeen .dkmodlabel{ --stip:23,26,27; }
/* De sectie knipt horizontaal op de kolomrand; 4px inspringen zet de buitenkant van de ring op die rand. */
.pg-E7rqx .dkvolg-4 p.dkmodlabel{ padding-left:4px; }
.pg-E7rqx .dkvolg-4 p.dkmodlabel::before{ margin-right:0; background:rgb(var(--stip)); box-shadow:0 0 0 4px rgba(var(--stip),0.18); }
.pg-E7rqx .dkvolg-4 :is(.pg-3hhd7g, .pg-8zg8zi, .pg-xteeen) :has(.dkmodlabel){ overflow:visible; }
/* Safari knipt een schaduw af op de randen van de laag die will-change en de parallax maken. Die laag
   was precies zo groot als de kaart, waardoor onder elke kaart een grijs blok met rechte zijkanten stond.
   Met wat binnenruimte (en dezelfde negatieve marge) past de hele schaduw in de laag. */
.pg-E7rqx .dkvolg-4 .dkrmv-wrap{ width:calc(100% + 112px) !important; padding:0 56px 72px; margin:0 -56px -72px; box-sizing:border-box; }

@media (max-width:809.98px){
  .pg-E7rqx .dkvolg-4 :is(.pg-3hhd7g, .pg-8zg8zi, .pg-xteeen){ flex-direction:column; align-items:stretch; gap:22px; }
  .pg-E7rqx .dkvolg-4 :has(> .dkmodlabel), .pg-E7rqx .dkvolg-4 :has(> * > .dkmodlabel){ justify-content:flex-start; }
  .pg-E7rqx .dkvolg-4 :is(.pg-3hhd7g, .pg-8zg8zi, .pg-xteeen) > :has(.dkrmv-wrap){ order:1; flex:none; width:100%; min-height:0; padding:28px 20px; border-radius:22px; }
}

/* ══ Eén opening voor elke sectie op de homepagina ══════════════════════════════════════
   "Waarom Duinker" en de modules openen met een label: een stip met een zachte ring en een woord in
   kapitalen. De app, koppelingen, demo, klanten, prijzen en FAQ hadden dat niet, waardoor de pagina
   halverwege van taal wisselde. Nu opent elke sectie hetzelfde: label, 14px, kop, 18px, intro. */
.dklabel{ display:block; margin:0 0 14px; font-family:"General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size:13px; font-weight:600; line-height:1.4; letter-spacing:0.1em; text-transform:uppercase; color:#8A5700; text-align:inherit; }
.dklabel::before{ content:""; display:inline-block; vertical-align:0.08em; margin:0 9px 0 4px; width:7px; height:7px;
  border-radius:50%; background:#FFB71B; box-shadow:0 0 0 4px rgba(255,183,27,0.18); }
.dklabel--donker{ color:#FFB71B; }
.dklabel--midden{ text-align:center; }
/* De FAQ-kop staat in een flexvak; het label moet daar boven de kop, niet ernaast. */
.pg-E7rqx .dkvolg-12 .pg-1ttinof{ flex-direction:column; align-items:stretch; }

/* Afstand kop tot intro: overal 18px. Hij liep van 10px (AI, FAQ) tot 26px. */
.pg-E7rqx .dkvolg-8 .pg-1th2mx{ margin-top:4px; }
.pg-E7rqx .dkvolg-8 .pg-1xnbg90{ margin-top:8px; }
.pg-E7rqx .dkvolg-12 .pg-jq7bb8{ margin-top:8px; }
.pg-E7rqx .dkvolg-4 .pg-e8z09g{ margin-top:2px; }
.dkrpp-lead{ margin-top:18px; }
/* De intro van de AI-sectie stond in volle zwarte tekst; elke andere intro is zacht grijs. */
.pg-E7rqx .dkvolg-8 .pg-1xnbg90 p{ --pg-text-color:rgba(23,26,27,0.66) !important; color:rgba(23,26,27,0.66); }
/* De koppen van de app en de koppelingen hadden nog eigen ruimte erboven, en de demo-CTA zette de marge van
   alle alinea's op nul; zo komt het label overal op dezelfde 14px boven de kop. */
.pg-E7rqx .dklabel + h2, .dkcta .dklabel + h2{ margin-top:0 !important; }
.dkcta .dkcta-tekst .dklabel{ margin:0 0 14px; }

/* ── Volgorde op de telefoon: hero eerst ─────────────────────────────────────────────
   De Framer-varianten voor smalle schermen gaven de hero van /blog en /contactgegevens een
   hogere order dan de inhoud, waardoor de kop pas na de artikelen en het formulier kwam. */
@media (max-width:1199.98px){
  .pg-xc6l10-container, .pg-nhhzpl-container{ order:-1 !important; }
}

/* /bestellen linkt naar /prijzen#calculator; zonder marge viel de rekenmachine onder de vaste kop. */
#calculator, #service{ scroll-margin-top:130px; }
/* Contactgegevens: regel onder de openingstijden dat support per plan verschilt */
.dkcg-support{ display:block; margin-top:10px; font-size:.92em; }
.dkcg-support a{ color:#171A1B; font-weight:600; text-decoration:none; border-bottom:1px solid #FFB71B; }
.dkcg-support a:hover{ color:#8a6300; }

/* Formuliervelden: pagina.css zet de focusrand uit en laat alleen een 1px kleurwissel over.
   Een duidelijke gele ring om het hele veld, zoals bij de rest van de site. */
.pg-form-input-wrapper:focus-within{ box-shadow:0 0 0 2px #FFB71B; border-radius:inherit; }

/* Prijzen: wat je op de vloer nodig hebt, direct onder de berekening, zodat de hardware geen verrassing
   na de demo is. Rustig vlak, geen tweede knop naast de demo. */
.dkrc-hardware{ margin-top:18px; padding:16px 18px; border-radius:16px; background:#F7F5F2; font-size:14px; line-height:1.6; color:rgba(23,26,27,0.72); }
.dkrc-hardware b{ color:#171A1B; font-weight:600; }
.dkrc-hardware p{ margin:0; }
.dkrc-hardwarelinks{ display:flex; flex-wrap:wrap; gap:6px 20px; margin-top:8px !important; }
.dkrc-hardware a{ color:#171A1B; font-weight:600; text-decoration:none; background-image:linear-gradient(#FFB71B,#FFB71B); background-size:100% 2px; background-repeat:no-repeat; background-position:0 100%; padding-bottom:1px; }
.dkrc-hardware a:hover{ color:#8A5700; }
.dkrc-hardware a:focus-visible{ outline:2px solid #FFB71B; outline-offset:3px; border-radius:2px; }

/* Vingerdoelen op de telefoon. Tekstlinks krijgen een groter raakvlak zonder dat de opmaak verschuift
   (een onzichtbaar vlak eromheen); knoppen en chips minstens 44px. */
@media (max-width:640px){
  [class$="-kruimel"] a, .dksh-kruimel a, .dkft-juridisch a, .dkl{ position:relative; }
  [class$="-kruimel"] a::before, .dksh-kruimel a::before, .dkft-juridisch a::before, .dkl::before{ content:""; position:absolute; inset:-12px -4px; }
  .dkrvg-tab, .dkfq-onderwerp{ min-height:44px; }
}

/* Cookiemelding op de telefoon compacter: hij besloeg bijna de helft van het scherm en dekte de
   demoknop in de hero af. Kortere regels, twee knoppen naast elkaar, "Zelf instellen" als tekstlink. */
@media (max-width:640px){
  .dkck{ padding:14px 16px; }
  .dkck-binnen{ gap:12px; }
  .dkck-kop{ font-size:14.5px !important; margin-bottom:2px !important; }
  .dkck-tekst p{ font-size:13px; line-height:1.5; }
  .dkck-tekst #dkck-tekst{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .dkck.is-open .dkck-tekst #dkck-tekst, .dkck:has(.dkck-keuzes:not([hidden])) #dkck-tekst{ -webkit-line-clamp:unset; display:block; }
  .dkck-knoppen{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .dkck-knop{ height:44px; padding:0 12px; font-size:14px; }
  .dkck-knop--kaal{ grid-column:1 / -1; grid-row:2; height:36px; background:none; }
  .dkck.is-open .dkck-knop--kaal{ height:44px; background:#FFB71B; }
}

/* Prijzen: de uitleg staat naast het maandbedrag in plaats van eronder, zodat er links geen gat valt.
   De uitleg drijft links; het vak blijft sticky in de calculator (een grid of wrapper zou dat breken)
   en vult met margin-left:auto de ruimte rechts ernaast. */
.dkrc-voetnoot{ float:left; width:calc(100% - 330px - 56px); max-width:none; margin:clamp(16px,1.8vw,22px) 0 0; padding:4px 0 0; color:rgba(23,26,27,0.72); }
.dkrc-noot-lijst{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.dkrc-noot-lijst li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:12px; align-items:start; font-size:14.5px; line-height:1.55; }
.dkrc-noot-lijst b{ color:#171A1B; font-weight:600; }
.dkrc-noot-vink{ width:22px; height:22px; border-radius:50%; background:#FFB71B; display:grid; place-items:center; margin-top:1px; }
.dkrc-noot-klein{ margin:16px 0 0 34px; font-size:12.5px; line-height:1.55; color:rgba(23,26,27,0.6); }
.dkrc-hardware{ clear:both; margin-top:28px; }
@media (max-width:1000px){
  /* Hier is het vak een balk over de volle breedte; de uitleg komt er dan gewoon onder. */
  .dkrc-voetnoot{ float:none; width:auto; margin-top:22px; }
}