/* Selectly · sjabloon voor de marketingdiensten (recept 19 §4) en /marketing.html.
   Zwart en goud, enkel tokens uit ui/merk.css. Bouwt op ui/home.css (typografie, knoppen, .licht, .faq).
   Gedrag in ui/dienst.js. Minder beweging (.rustig): alles staat meteen in zijn eindtoestand. */
:root{--dn-ease:cubic-bezier(.2,.8,.2,1);--dn-uit:cubic-bezier(.16,1,.3,1)}
.dienst main{padding-bottom:var(--banner-h,0px)}

/* ---------- intro (y 36 → 0, 1,1 s expo.out, stagger .07) ---------- */
.beweegt.dn-js .in{opacity:0;transform:translateY(36px)}
.beweegt.dn-js .in.toon{opacity:1;transform:none;transition:opacity 1.1s var(--dn-uit),transform 1.1s var(--dn-uit);transition-delay:calc(var(--i,0) * 70ms)}
.beweegt.dn-js .dn-speel{opacity:0;transform:translateY(80px)}
.beweegt.dn-js .dn-speel.toon{opacity:1;transform:none;transition:opacity 1.4s var(--dn-uit) .25s,transform 1.4s var(--dn-uit) .25s}
.beweegt.dn-js .rij-in{opacity:0;transform:translateY(40px)}
.beweegt.dn-js .rij-in.toon{opacity:1;transform:none;transition:opacity .9s var(--dn-uit),transform .9s var(--dn-uit);transition-delay:calc(var(--i,0) * 60ms)}

/* ---------- hero ---------- */
.dn-hero{position:relative;padding:calc(var(--kop-h) + clamp(28px,5vw,64px)) 0 clamp(64px,8vw,110px);
  background:radial-gradient(60% 70% at 85% 30%,rgba(var(--goud-rgb),.08),transparent 70%)}
.dn-hero-rij{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.dn-hero-tekst{display:grid;gap:20px;justify-items:start}
.dn-hero h1{font-size:calc(clamp(42px,5.2vw,82px) * var(--kop-schaal));max-width:12ch}
.dn-hero .lead{max-width:44ch}
.dn-kruimel{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--tekst-3)}
.dn-kruimel a{color:var(--tekst-2);transition:color .25s}
.dn-kruimel a:hover{color:var(--goud-licht)}
.dn-kruimel [aria-current]{color:var(--tekst-2)}

/* ---------- het speeltje (kaart) ---------- */
.dn-speel{position:relative;min-width:0;border-radius:28px;padding:18px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar),0 40px 90px -50px rgba(0,0,0,.9)}
.dn-speel-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 4px 14px}
.dn-speel-kop .mono{color:var(--goud)}
.dn-voorbeeld{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:10px;letter-spacing:.14em;color:var(--tekst-2);box-shadow:inset 0 0 0 1px var(--haar);background:var(--zwart-1)}
.dn-velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.dn-veld{display:grid;gap:6px;min-width:0}
.dn-veld > span{font-size:12.5px;color:var(--tekst-2)}
.dn-veld input,.dn-veld .wf-kies{height:44px;min-width:0;width:100%;padding:0 14px;border:0;border-radius:12px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);font-size:16px;color:var(--tekst);outline:0;transition:box-shadow .3s}
.dn-veld input::placeholder{color:var(--tekst-3)}
.dn-veld input:focus{box-shadow:inset 0 0 0 1.5px var(--goud)}
.dn-scherm{position:relative;overflow:hidden;border-radius:18px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);padding:14px;min-height:320px;font-size:14px;color:var(--tekst)}
.dn-speel-noot{margin-top:10px;font-size:12.5px;color:var(--tekst-3)}
.dn-ai{position:absolute;right:6px;top:6px;z-index:2;display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px;border-radius:999px;font:500 9.5px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--zwart-1);background:var(--goud-licht)}

/* ---------- eindscène: de klant belt, de assistent neemt op, de melding komt binnen ---------- */
.dn-slot{display:grid;gap:10px;align-content:center;justify-items:stretch}
.dn-scherm > .dn-slot{position:absolute;inset:0;z-index:5;padding:18px;background:color-mix(in srgb,var(--zwart-1) 94%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .45s var(--dn-ease),visibility 0s .45s}
.dn-scherm > .dn-slot:not([data-fase="0"]){opacity:1;visibility:visible;transition:opacity .45s var(--dn-ease),visibility 0s}
.dn-slot-oproep,.dn-slot-op,.dn-melding{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);min-width:0;
  transition:opacity .5s var(--dn-ease),transform .6s var(--dn-ease)}
.dn-slot b{font-weight:600;font-size:15px}
.dn-slot-oproep .mono{margin-left:auto;color:var(--taak-op);font-size:10px}
.dn-slot-ring{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--taak-op) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--taak-op) 45%,transparent)}
.dn-slot-ring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--taak-op)}
.dn-slot-ring i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--taak-op);opacity:0}
.dn-slot[data-fase="1"] .dn-slot-ring i{animation:dn-ring 1.6s var(--dn-uit) infinite}
.dn-slot[data-fase="1"] .dn-slot-ring i + i{animation-delay:.55s}
@keyframes dn-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.dn-slot[data-fase="1"] .dn-slot-oproep{animation:dn-tril 1.2s ease-in-out infinite}
@keyframes dn-tril{0%,60%,100%{transform:none}66%{transform:translateX(2px)}72%{transform:translateX(-2px)}78%{transform:translateX(1px)}}
.dn-golf{flex:none;display:flex;align-items:center;gap:2px;height:28px;width:56px}
.dn-golf i{flex:1;height:30%;border-radius:2px;background:var(--goud);opacity:.85}
.dn-slot[data-fase="2"] .dn-golf i{animation:dn-golf .9s ease-in-out infinite alternate}
.dn-golf i:nth-child(3n){animation-delay:-.3s}.dn-golf i:nth-child(3n+1){animation-delay:-.6s}.dn-golf i:nth-child(4n){animation-delay:-.45s}
.dn-golf i:nth-child(5n+2){height:55%}.dn-golf i:nth-child(7n){height:75%}
@keyframes dn-golf{0%{transform:scaleY(.35)}100%{transform:scaleY(1.6)}}
.dn-slot-op b{color:var(--tekst)}
.dn-melding{background:color-mix(in srgb,var(--zwart-3) 80%,transparent);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35),0 20px 40px -24px rgba(0,0,0,.8)}
.dn-melding > div{min-width:0}
.dn-melding b{display:block}
.dn-melding span:not(.dn-melding-ico){display:block;font:500 11px/1.4 var(--font-mono);letter-spacing:.04em;color:var(--tekst-2)}
.dn-melding-ico{flex:none;width:34px;height:34px;border-radius:10px;background:var(--beeldmerk) center/64% no-repeat,var(--zwart-1);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.4)}
.dn-slot[data-fase="1"] .dn-slot-op,.dn-slot[data-fase="1"] .dn-melding,.dn-slot[data-fase="2"] .dn-melding{opacity:0;transform:translateY(14px)}
.dn-slot[data-fase="2"] .dn-slot-oproep,.dn-slot[data-fase="3"] .dn-slot-oproep{opacity:.55}

/* ---------- Google Ads · het zoekmoment ---------- */
.zk-balk{display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;border-radius:999px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);font-size:14.5px;min-width:0}
.zk-balk svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--tekst-2);stroke-width:2}
.zk-q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.zk-cursor{flex:none;width:1.5px;height:18px;margin-left:-8px;background:var(--goud);animation:dn-knip 1s steps(1) infinite}
@keyframes dn-knip{50%{opacity:0}}
.zk-res{display:grid;gap:10px;margin-top:12px}
.zk-ad{position:relative;display:grid;gap:5px;padding:12px 14px;border-radius:14px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35);transition:opacity .6s var(--dn-ease),transform .6s var(--dn-ease),box-shadow .4s}
.zk-bron{display:flex;align-items:center;gap:9px;min-width:0}
.zk-bron > i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--goud-metaal)}
.zk-bron span{display:grid;min-width:0}
.zk-bron b{font-size:13px;font-weight:600}
.zk-bron small{font-size:11.5px;color:var(--tekst-2)}
.zk-bron em{margin-left:auto;font:500 10px/1 var(--font-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-2)}
.zk-ad h4{font:500 17px/1.25 var(--font-tekst);color:var(--goud-licht);overflow-wrap:anywhere}
.zk-ad p{font-size:13px;color:var(--tekst-2)}
.zk-bel{justify-self:start;display:inline-flex;align-items:center;gap:7px;height:32px;margin-top:4px;padding:0 14px;border-radius:999px;background:var(--goud-verloop);color:var(--merk-op);font-weight:600;font-size:13px;transition:transform .2s}
.zk-bel svg{width:14px;height:14px;fill:currentColor}
.zk-org{display:grid;gap:6px;padding:10px 14px;transition:opacity .5s .1s}
.zk-org i{height:8px;border-radius:5px;background:var(--zwart-3)}
.zk-org i:first-child{width:38%;height:9px;background:color-mix(in srgb,var(--tekst-3) 45%,transparent)}
.zk-org i:last-child{width:72%}
.zk:not(.zk-res-aan) .zk-ad{opacity:0;transform:translateY(24px)}
.zk:not(.zk-res-aan) .zk-org{opacity:0}
.zk.zk-puls .zk-ad{box-shadow:inset 0 0 0 1px var(--goud),0 0 0 6px rgba(var(--goud-rgb),.12)}
.zk.zk-klik .zk-bel{transform:scale(.94)}
.dn-wijzer{position:absolute;z-index:4;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:rgba(var(--goud-rgb),.35);box-shadow:0 0 0 1.5px var(--goud-licht);opacity:0;pointer-events:none;
  transform:translate(var(--wx,80%),var(--wy,90%));transition:transform .9s var(--dn-ease),opacity .3s}
.dn-wijzer.aan{opacity:1}

/* ---------- Social-media-advertenties · duimtest ---------- */
.dm{padding:0;display:grid;grid-template-rows:1fr auto}
.dm-feed{position:relative;height:300px;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 10%,#000 88%,transparent);mask:linear-gradient(transparent,#000 10%,#000 88%,transparent)}
.dm-rol{display:grid;gap:10px;padding:14px;will-change:transform}
.dm-post{border-radius:14px;padding:10px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);transition:box-shadow .4s,opacity .4s}
.dm-kop{display:flex;align-items:center;gap:8px;min-width:0}
.dm-kop > i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--zwart-3)}
.dm-ad .dm-kop > i{background:var(--goud-metaal)}
.dm-kop span{display:grid;min-width:0}
.dm-kop b{font-size:12.5px;font-weight:600;min-height:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-kop small{font:500 9.5px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-3);min-height:8px}
.dm-org .dm-kop b{width:90px;height:8px;border-radius:4px;background:var(--zwart-3)}
.dm-org .dm-kop small{width:50px;height:6px;margin-top:4px;border-radius:3px;background:var(--zwart-3)}
.dm-grijs{height:70px;margin-top:9px;border-radius:9px;background:var(--zwart-3)}
.dm-haak{margin:8px 2px;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.dm-beeld{position:relative;height:92px;border-radius:9px;overflow:hidden}
.dm-beeld-a{background:radial-gradient(40% 60% at 75% 30%,rgba(var(--goud-rgb),.55),transparent 70%),linear-gradient(160deg,var(--zwart-3),var(--zwart-1))}
.dm-beeld-b{background:linear-gradient(transparent 58%,var(--zwart-3) 58%),linear-gradient(150deg,var(--goud-diep),var(--zwart-2) 70%)}
.dm-beeld-c{background:radial-gradient(30% 50% at 30% 60%,rgba(var(--goud-rgb),.5),transparent 70%),linear-gradient(200deg,var(--zwart-3),var(--zwart-1))}
.dm-v{position:absolute;left:8px;bottom:6px;color:var(--tekst-2);font-size:10px}
.dm-cta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:6px 4px 0;border-top:1px solid var(--haar);font-size:12px;color:var(--tekst-2)}
.dm-cta i{width:6px;height:6px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}
.dm-ad.gekozen{box-shadow:inset 0 0 0 1.5px var(--goud),0 0 0 6px rgba(var(--goud-rgb),.12)}
.dm.gestopt .dm-post:not(.gekozen){opacity:.35}
.dm-tik{height:44px;margin:0;border:0;border-top:1px solid var(--haar);background:transparent;color:var(--tekst-2);font-size:13.5px;cursor:pointer;transition:color .25s}
.dm-tik:hover{color:var(--goud-licht)}
.dm-houdt{position:absolute;left:14px;right:14px;top:12px;z-index:3;padding:8px 12px;border-radius:999px;background:var(--goud-verloop);color:var(--merk-op);font-size:13px;font-weight:600;text-align:center;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .5s var(--dn-ease)}
.dm.gestopt .dm-houdt{opacity:1;transform:none}
.dm-form{position:absolute;left:12px;right:12px;bottom:56px;z-index:4;display:grid;gap:8px;padding:14px;border-radius:16px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35),0 30px 60px -20px rgba(0,0,0,.9);
  opacity:0;transform:translateY(30px);transition:opacity .45s,transform .6s var(--dn-ease);pointer-events:none}
.dm.formulier .dm-form{opacity:1;transform:none}
.dm-form .mono{color:var(--goud);font-size:10px}
.dm-f{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:var(--zwart-1);font-size:13px}
.dm-f span{color:var(--tekst-2)}
.dm-verstuur{justify-self:stretch;display:grid;place-items:center;height:38px;border-radius:999px;background:var(--goud-verloop);color:var(--merk-op);font-weight:600;font-size:13.5px;transition:transform .2s}
.dm.verstuurd .dm-verstuur{transform:scale(.95)}

/* ---------- Social-media-beheer · de week die zich vult ---------- */
.wk-dagen{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:12px}
.wk-dagen span{display:grid;place-items:center;height:34px;border-radius:10px;background:var(--zwart-2);font:500 11px var(--font-mono);letter-spacing:.06em;color:var(--tekst-3);transition:background .4s,color .4s,box-shadow .4s}
.wk-dagen span.vol{color:var(--goud-licht);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5);background:rgba(var(--goud-rgb),.1)}
.wk-posts{list-style:none;display:grid;gap:8px}
.wk-post{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px;border-radius:14px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);transition:opacity .5s var(--dn-ease),transform .6s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.beweegt .wk:not(.wk-gevuld) .wk-post{opacity:0;transform:translateY(-40px)}
.wk-beeld{width:52px;height:52px;border-radius:10px}
.wk-b1{background:linear-gradient(transparent 55%,var(--zwart-3) 55%),linear-gradient(140deg,var(--goud-diep),var(--zwart-1))}
.wk-b2{background:radial-gradient(35% 45% at 60% 40%,rgba(var(--goud-rgb),.6),transparent 70%),var(--zwart-3)}
.wk-b3{background:repeating-linear-gradient(90deg,var(--zwart-3) 0 8px,var(--zwart-1) 8px 11px)}
.wk-t{min-width:0}
.wk-t .mono{font-size:10px;color:var(--tekst-3)}
.wk-t .mono b{font-weight:500;color:var(--tekst-2)}
.wk-t p{font-size:13.5px;line-height:1.3;overflow-wrap:anywhere}
.wk-ok{height:34px;padding:0 12px;border:0;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5);color:var(--goud-licht);font:600 12.5px/1 var(--font-tekst);cursor:pointer;white-space:nowrap;transition:background .3s,color .3s}
.wk-ok:hover{background:rgba(var(--goud-rgb),.1)}
.wk-ok[aria-pressed="true"]{background:var(--goud-verloop);color:var(--merk-op);box-shadow:none}
.wk-post.ok{box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.4)}
.wk-reactie{display:flex;align-items:center;gap:8px;margin:10px 0 0 62px;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--zwart-3);font-size:13px;width:max-content;max-width:calc(100% - 62px);
  opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--dn-ease)}
.wk-reactie i{width:18px;height:18px;border-radius:50%;background:var(--tekst-3);flex:none}
.wk.reactie .wk-reactie{opacity:1;transform:none}

/* ---------- Lokale SEO · het kaartje ---------- */
.ks{display:grid;gap:12px}
.ks-kaart{position:relative;height:170px;border-radius:14px;overflow:hidden;background:var(--zwart-2)}
.ks-kaart svg{position:absolute;inset:0;width:100%;height:100%}
.ks-water{fill:none;stroke:color-mix(in srgb,var(--taak-plan) 22%,transparent);stroke-width:14}
.ks-weg{fill:none;stroke:var(--zwart-3);stroke-width:6}
.ks-straat{fill:none;stroke:var(--zwart-3);stroke-width:2.5}
.ks-zoek{fill:rgba(var(--goud-rgb),.07);stroke:rgba(var(--goud-rgb),.35);stroke-dasharray:3 4}
.ks-ik{fill:var(--tekst)}
.ks-pin{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:-14px 0 0 -7px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--tekst-3);transition:left 1s var(--dn-ease),top 1s var(--dn-ease)}
.ks-u{background:var(--goud);box-shadow:0 0 0 4px rgba(var(--goud-rgb),.18);z-index:2}
.ks-u b{position:absolute;left:18px;top:-6px;transform:rotate(45deg);transform-origin:left top;white-space:nowrap;padding:3px 7px;border-radius:6px;background:var(--zwart-1);font-size:11px;font-weight:600;color:var(--goud-licht)}
.ks-plaats{position:absolute;left:10px;bottom:8px;font-size:10px;color:var(--tekst-2)}
.ks-profiel{padding:12px;border-radius:14px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.ks-pkop{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ks-pkop > i{flex:none;width:28px;height:28px;border-radius:8px;background:var(--goud-metaal)}
.ks-pkop span{display:grid;min-width:0}
.ks-pkop b{font-size:14px}
.ks-pkop small{font-size:11.5px;color:var(--tekst-2)}
.ks-bel{margin-left:auto;display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--tekst-3);box-shadow:inset 0 0 0 1px var(--haar);transition:all .4s}
.ks.vol .ks-bel{background:var(--goud-verloop);color:var(--merk-op);box-shadow:none}
.ks.ks-klik .ks-bel{transform:scale(.94)}
.ks-lijst{list-style:none;display:grid;gap:2px}
.ks-lijst button{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:4px 6px;border:0;border-radius:8px;background:transparent;color:var(--tekst-2);font-size:13px;text-align:left;cursor:pointer;transition:background .25s,color .25s}
.ks-lijst button:hover{background:var(--zwart-3)}
.ks-lijst button i{flex:none;width:18px;height:18px;border-radius:5px;box-shadow:inset 0 0 0 1.5px var(--tekst-3);position:relative;transition:background .3s,box-shadow .3s}
.ks-lijst button[aria-pressed="true"]{color:var(--tekst)}
.ks-lijst button[aria-pressed="true"] i{background:var(--goud);box-shadow:none}
.ks-lijst button[aria-pressed="true"] i::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:solid var(--merk-op);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ks-noot{margin-top:6px;font-size:12px;color:var(--tekst-3)}

/* ---------- AI-advertenties · het weefgetouw ---------- */
.wf-kies{cursor:pointer;text-align:left;color:var(--goud-licht)!important}
.wf-kies:hover{box-shadow:inset 0 0 0 1px var(--goud)!important}
.wf-kopjes,.wf-raster{display:grid;grid-template-columns:44px repeat(4,minmax(0,1fr));gap:6px;align-items:end}
.wf-kopjes{margin-bottom:6px}
.wf-kopjes .mono{font-size:9.5px;color:var(--tekst-3);text-align:center}
.wf-haak{align-self:center;font-size:9px;letter-spacing:.08em;color:var(--tekst-2)}
.wf-tegel{position:relative;align-self:center;width:100%;aspect-ratio:var(--r);max-height:120px;border:0;padding:0;border-radius:8px;overflow:hidden;background:var(--zwart-2);cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--haar);transition:opacity .5s var(--dn-ease),transform .5s var(--dn-ease),box-shadow .3s}
.wf-tegel:nth-of-type(4n+4){justify-self:center}
.beweegt .wf:not(.geweven) .wf-tegel{opacity:0;transform:scale(.86)}
.beweegt .wf.wevend .wf-tegel{transition-delay:calc(var(--i) * 90ms)}
.wf-tegel:hover,.wf-tegel.speelt{box-shadow:inset 0 0 0 1.5px var(--goud)}
.wf-foto{position:absolute;inset:0;background-size:cover;background-position:center}
.wf[data-foto="1"] .wf-foto,.tn-wf{background:linear-gradient(transparent 62%,var(--zwart-3) 62%),linear-gradient(28deg,transparent 48%,var(--goud-diep) 48% 60%,transparent 60%),radial-gradient(35% 30% at 72% 22%,rgba(var(--goud-rgb),.7),transparent 70%),linear-gradient(170deg,var(--zwart-3),var(--zwart-1))}
.wf[data-foto="2"] .wf-foto{background:radial-gradient(18% 22% at 50% 52%,var(--zwart-1) 60%,transparent 62%),radial-gradient(30% 34% at 50% 52%,var(--tekst-3) 60%,transparent 62%),linear-gradient(transparent 80%,var(--zwart-3) 80%),linear-gradient(160deg,var(--goud-diep),var(--zwart-1) 75%)}
.wf[data-foto="3"] .wf-foto{background:repeating-linear-gradient(90deg,transparent 0 22%,var(--zwart-3) 22% 24%),linear-gradient(transparent 70%,var(--zwart-2) 70%),radial-gradient(40% 40% at 30% 30%,rgba(var(--goud-rgb),.5),transparent 70%),var(--zwart-1)}
.dn-ai.dn-echt{color:var(--goud-licht);background:rgba(10,9,8,.72);box-shadow:inset 0 0 0 1px var(--goud-licht)}
.dn-ai.dn-bewerkt{background:var(--goud-licht)}
.wf-tegel .dn-ai{right:3px;top:3px;height:14px;padding:0 4px;font-size:7px;letter-spacing:.06em}
.wf-tekst{position:absolute;left:4px;right:4px;bottom:4px;font:600 9px/1.2 var(--font-tekst);color:var(--tekst);text-align:left;text-shadow:0 1px 6px var(--zwart-1);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow-wrap:anywhere}
/* 28/10: in de lage 16:9-tegel liep de derde regel onder het AI-label; daar één regel */
.wf-tegel[style*="16/9"] .wf-tekst{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;display:block}
.wf-tegel.speelt .wf-foto{animation:wf-kb 2.4s var(--dn-ease) both}
.wf-tegel.speelt .wf-tekst{animation:wf-in .6s var(--dn-ease) both}
@keyframes wf-kb{from{transform:scale(1)}to{transform:scale(1.18) translate(-3%,2%)}}
@keyframes wf-in{from{opacity:0;transform:translateY(8px)}}
.wf-noot{margin-top:10px;font-size:11.5px;color:var(--tekst-3)}

/* ---------- Achter de schermen: sticky toneel + stappen met voortgangsbalk ---------- */
.dn-schermen{position:relative;padding:clamp(80px,10vw,140px) 0 clamp(40px,6vw,80px)}
.dn-sectiekop{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,64px)}
.dn-sectiekop h2{max-width:16ch}
.dn-verhaal{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr);gap:clamp(32px,5vw,80px)}
.dn-toneel{position:sticky;top:calc(50svh - min(24vw,290px) + var(--kop-h) / 2);align-self:start;height:min(48vw,580px)}
.dn-toneel-in{position:relative;height:100%;border-radius:28px;overflow:hidden;background:radial-gradient(70% 60% at 70% 20%,rgba(var(--goud-rgb),.1),transparent 70%),var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.dn-toneel-in > .dn-voorbeeld{position:absolute;right:16px;top:16px}
.dn-sc{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(20px,4vw,48px);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s var(--dn-ease),transform .7s var(--dn-ease);pointer-events:none}
.dn-toneel[data-step="1"] [data-s="1"],.dn-toneel[data-step="2"] [data-s="2"],.dn-toneel[data-step="3"] [data-s="3"],.dn-toneel[data-step="4"] [data-s="4"],.dn-toneel[data-step="5"] [data-s="5"]{opacity:1;transform:none}
.dn-stappen{list-style:none}
.dn-stap{min-height:80svh;display:flex;flex-direction:column;justify-content:center;gap:12px;opacity:.22;transition:opacity .6s var(--dn-ease)}
.dn-stap.aan{opacity:1}
.dn-stap .mono{color:var(--tekst-2)}
.dn-stap h3{font-size:calc(clamp(1.8rem,3vw,2.6rem) * var(--kop-schaal))}
.dn-stap p{max-width:42ch;color:var(--tekst-2)}
.dn-balk{display:block;height:3px;max-width:320px;margin-top:10px;border-radius:2px;background:var(--haar);overflow:hidden}
.dn-balk i{display:block;height:100%;background:var(--goud-verloop);transform-origin:left;transform:scaleX(var(--p,0))}

/* tonelen: kleine kaarten */
.tn-kaart{width:min(100%,400px);display:grid;gap:12px;padding:18px;border-radius:20px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar),0 30px 70px -40px rgba(0,0,0,.9);font-size:14px}
.tn-noot{font-size:12.5px;color:var(--tekst-2)}
.tn-noot.mono{font-size:10px;color:var(--tekst-3)}
.tn-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.tn-chips li{padding:7px 12px;border-radius:999px;font-size:13px;color:var(--tekst-3);box-shadow:inset 0 0 0 1px var(--haar)}
.tn-chips li.wel{color:var(--goud-licht);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.45)}
.tn-sorteer{grid-template-columns:1fr 1fr}
.tn-sorteer .mono{color:var(--goud);margin-bottom:8px}
.tn-sorteer .niet .mono{color:var(--tekst-3)}
.tn-sorteer ul{list-style:none;display:grid;gap:6px}
.tn-sorteer li{padding:7px 10px;border-radius:10px;background:var(--zwart-2);font-size:13px;overflow-wrap:anywhere}
.tn-sorteer .niet li{color:var(--tekst-3);text-decoration:line-through;text-decoration-color:var(--taak-volg)}
.dn-toneel[data-step="2"] .tn-sorteer .niet li{animation:tn-schuif .6s var(--dn-ease) both}
.tn-sorteer .niet li:nth-child(2){animation-delay:.12s!important}.tn-sorteer .niet li:nth-child(3){animation-delay:.24s!important}
@keyframes tn-schuif{from{opacity:0;transform:translateX(-24px)}}
.tn-weeg svg{width:100%;height:auto;overflow:visible}
.tn-weeg path{fill:none;stroke:var(--goud);stroke-width:2;stroke-linejoin:round}
.tn-weeg .tn-voet{stroke:var(--tekst-3)}
.tn-weeg circle{fill:var(--goud)}
.tn-weeg text{fill:var(--tekst-2);font:500 11px var(--font-mono);text-anchor:middle}
.tn-arm{transform-origin:100px 40px;transform:rotate(-8deg);transition:transform 1.2s var(--dn-uit) .2s}
.dn-toneel[data-step="3"] .tn-arm{transform:rotate(6deg)}
.tn-pagina h4{font:400 24px/1.1 var(--font-kop)}
.tn-pagina > i{display:block;height:8px;border-radius:4px;background:var(--zwart-3)}
.tn-pagina > i.kort{width:60%}
.tn-pbalk{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 8px 8px 12px;border-radius:12px;background:var(--zwart-2);font:500 11px var(--font-mono);color:var(--tekst-2);min-width:0}
.tn-pbalk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-pbalk b,.tn-knop{flex:none;display:inline-grid;place-items:center;height:30px;padding:0 14px;border-radius:999px;background:var(--goud-verloop);color:var(--merk-op);font:600 12.5px/1 var(--font-tekst)}
.tn-stippen{position:relative;grid-template-columns:repeat(8,1fr);gap:14px;padding:26px}
.tn-stippen > i{width:7px;height:7px;border-radius:50%;background:var(--zwart-3);justify-self:center;transition:background .5s}
.tn-stippen .tn-cirkel{position:absolute;left:30%;top:22%;width:44%;height:52%;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.45);pointer-events:none}
.tn-stippen > i:nth-child(n+10):nth-child(-n+14),.tn-stippen > i:nth-child(n+18):nth-child(-n+22),.tn-stippen > i:nth-child(n+26):nth-child(-n+30),.tn-stippen > i:nth-child(n+35):nth-child(-n+37){background:var(--goud)}
.tn-filter > i:nth-child(11),.tn-filter > i:nth-child(13),.tn-filter > i:nth-child(19),.tn-filter > i:nth-child(22),.tn-filter > i:nth-child(27),.tn-filter > i:nth-child(36){background:var(--zwart-3)!important}
.tn-stippen .tn-noot{grid-column:1/-1;margin-top:6px}
.tn-abc{grid-template-columns:repeat(3,1fr)}
.tn-abc span{display:grid;gap:6px;justify-items:center;padding:16px 8px;border-radius:14px;background:var(--zwart-2);font-size:13px;color:var(--tekst-2);box-shadow:inset 0 0 0 1px var(--haar)}
.tn-abc b{font:400 30px/1 var(--font-kop);color:var(--goud-licht)}
.tn-abc span.uit{opacity:.35}
.tn-form .mono{color:var(--goud);font-size:10px}
.tn-form > div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:10px;background:var(--zwart-2);font-size:13px}
.tn-form > div span{color:var(--tekst-2)}
.tn-form .tn-knop{justify-self:stretch;height:38px}
.tn-foto .wk-beeld,.tn-foto .tn-wf{width:100%;height:150px;border-radius:14px;position:relative}
.tn-post p{font-size:14px}
.tn-post .wk-beeld{width:100%;height:110px}
.tn-goed{justify-items:start}
.tn-vink{color:var(--goud-licht)}
.tn-velden > div,.tn-nap > div{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;background:var(--zwart-2);font-size:13px;min-width:0}
.tn-velden span{color:var(--tekst-2)}
.tn-nap .mono{font-size:10px;color:var(--tekst-3)}
.tn-nap b{font-weight:500;color:var(--goud-licht);overflow-wrap:anywhere}
.tn-review p:first-child{font:400 22px/1.15 var(--font-kop)}
.tn-sterren{display:flex;gap:6px}
.tn-sterren i{width:22px;height:22px;background:var(--goud);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.9}
.tn-form-aten{grid-template-columns:repeat(3,1fr);align-items:end}
.tn-form-aten i{display:block;width:100%;aspect-ratio:var(--r);border-radius:10px;background:var(--zwart-3);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.4)}
.dn-slot-toneel{width:min(100%,380px)}

/* ---------- Wat u krijgt / wat we niet doen (licht) ---------- */
.dn-krijgt{padding:clamp(72px,9vw,130px) 0}
.dn-krijgt-rij{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.dn-krijgt h2{margin:16px 0 28px;max-width:14ch}
.dn-lijst{list-style:none;display:grid;gap:0}
.dn-lijst li{position:relative;padding:16px 0 16px 30px;border-top:1px solid var(--lijn);font-size:17px;line-height:1.45}
.dn-lijst li::before{content:"";position:absolute;left:4px;top:24px;width:8px;height:8px;transform:rotate(45deg);background:var(--goud-op-licht)}
.dn-lijst a{color:var(--goud-op-licht);text-decoration:underline;text-underline-offset:3px}
.dn-overzicht{margin-top:22px;padding:16px;border-radius:18px;background:var(--krijt-2);display:grid;gap:10px;max-width:440px}
.dn-ov-kop{display:flex;justify-content:space-between;align-items:center}
.dn-ov-kop b{font-weight:600}
.dn-overzicht .dn-voorbeeld{background:var(--krijt);color:var(--inkt-2);box-shadow:inset 0 0 0 1px var(--lijn)}
.dn-ov-rij{display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:12px;align-items:center;font-size:13.5px;color:var(--zacht)}
.dn-ov-rij i{display:block;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--goud-diep),var(--goud)) no-repeat 0 0/var(--w) 100%,var(--krijt)}
.dn-niet{padding:clamp(22px,3vw,34px);border-radius:24px;background:var(--krijt-2)}
.dn-niet h3{margin-bottom:16px}
.dn-niet ul{list-style:none;display:grid;gap:12px}
.dn-niet li{position:relative;padding-left:28px;color:var(--zacht);font-size:16px}
.dn-niet li::before{content:"";position:absolute;left:2px;top:.72em;width:14px;height:1.5px;background:var(--inkt)}

/* ---------- prijs ---------- */
.dn-prijs{padding:clamp(80px,10vw,140px) 0 clamp(40px,6vw,70px)}
.dn-prijs-rij{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;margin-top:20px;align-items:stretch}
.dn-prijskaart{display:grid;gap:14px;justify-items:start;padding:clamp(24px,3.4vw,40px);border-radius:28px;background:radial-gradient(80% 70% at 100% 0%,rgba(var(--goud-rgb),.12),transparent 60%),var(--zwart-2);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.3)}
.dn-prijskaart h2{font-size:calc(clamp(30px,3.4vw,46px) * var(--kop-schaal))}
.dn-bedrag{font:400 calc(clamp(44px,5vw,72px) * var(--kop-schaal))/1 var(--font-kop);letter-spacing:-.02em}
.dn-bedrag small{font:500 12px var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tekst-2);vertical-align:middle}
.dn-eenheid{font:400 18px var(--font-tekst);color:var(--tekst-2);letter-spacing:0}
.dn-in-label{color:var(--goud)}
.dn-prijskaart ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.dn-prijskaart li{padding:8px 13px;border-radius:999px;font-size:14px;color:var(--tekst);box-shadow:inset 0 0 0 1px var(--haar);background:var(--zwart-1)}
.dn-regels{font-size:14px;color:var(--tekst-2);max-width:52ch}
.dn-samen{position:relative;display:grid;align-content:end;gap:12px;padding:clamp(22px,3vw,34px);border-radius:28px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);transition:box-shadow .4s,transform .4s var(--dn-ease)}
.dn-samen:hover{box-shadow:inset 0 0 0 1px var(--goud);transform:translateY(-3px)}
.dn-samen .mono{color:var(--taak-op)}
.dn-samen p{font:400 calc(clamp(22px,2.2vw,30px) * var(--kop-schaal))/1.2 var(--font-kop);max-width:20ch}
.dn-samen p span{white-space:nowrap}
.dn-pijl{position:absolute;right:24px;top:22px;color:var(--goud);font-size:20px;transition:transform .3s var(--dn-ease)}
.dn-samen:hover .dn-pijl{transform:translateX(4px)}

/* ---------- combineer met ---------- */
.dn-combi{padding:clamp(60px,8vw,110px) 0 clamp(80px,10vw,130px)}
.dn-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dn-kaart{position:relative;display:grid;gap:8px;align-content:start;padding:24px 24px 22px;border-radius:22px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);transition:transform .4s var(--dn-ease),box-shadow .4s}
.dn-kaart:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--goud)}
.dn-kaart b{font:400 calc(26px * var(--kop-schaal))/1.1 var(--font-kop)}
.dn-kaart span{color:var(--tekst-2);font-size:15px;padding-right:24px}
.dn-kaart em{margin-top:6px;font:500 12px/1.4 var(--font-mono);font-style:normal;color:var(--goud)}
.dn-kaart > i{position:absolute;right:22px;top:22px;font-style:normal;color:var(--goud)}
.dn-faq{border-top:1px solid var(--haar)}

/* ---------- slotband + voorstel ---------- */
.dn-slotband{position:relative;padding:0 0 clamp(80px,10vw,130px);background:radial-gradient(60% 60% at 20% 40%,rgba(var(--goud-rgb),.08),transparent 70%),var(--zwart-1)}
.dn-slotband > .haarlijn{margin-bottom:clamp(72px,9vw,120px)}
.dn-slot-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,90px);align-items:start}
.dn-slot-tekst{display:grid;gap:22px;justify-items:start}
.dn-slot-tekst h2{max-width:14ch}
.dn-klein{font-size:13.5px;color:var(--tekst-3)}
.dn-klein a{color:var(--tekst-2);text-decoration:underline;text-underline-offset:3px}
.dn-form{display:grid;gap:16px;padding:clamp(22px,3vw,34px);border-radius:28px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.dn-form h3{font-size:calc(26px * var(--kop-schaal))}
.dn-form-velden{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dn-form-velden .breed{grid-column:1/-1}
.dn-form label{display:block;margin-bottom:6px;font-size:13px;color:var(--tekst-2)}
.dn-form label span{color:var(--tekst-3)}
.dn-form input,.dn-form textarea{width:100%;min-height:46px;padding:11px 14px;border:0;border-radius:12px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);font-size:16px;color:var(--tekst);outline:0;resize:vertical;transition:box-shadow .3s}
.dn-form input:focus,.dn-form textarea:focus{box-shadow:inset 0 0 0 1.5px var(--goud)}
/* gsm (wereldtop r1, M2): de melding komt ook als pushbericht bovenaan de speeltjeskaart, altijd in beeld */
.dn-push{display:none}
@media (max-width:760px){
  .dn-speel > .dn-push{display:flex;position:absolute;z-index:6;top:8px;left:8px;right:8px;pointer-events:none;cursor:default;
    background:color-mix(in srgb,var(--zwart-3) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.45),0 18px 36px -14px rgba(0,0,0,.9);
    opacity:0;transform:translateY(-14px) scale(.97);transition:opacity .35s var(--dn-ease),transform .5s var(--dn-uit)}
  .dn-speel[data-slot="3"] > .dn-push{opacity:1;transform:none;pointer-events:auto}
}
.rustig .dn-speel > .dn-push{transition:none}
/* kleine gsm met cookiebanner open: hero iets compacter, zodat het pushbericht boven de banner blijft */
@media (max-width:760px) and (max-height:760px){
  body.sl-consent-open .dn-hero{padding-top:calc(var(--kop-h) + 16px)}
  body.sl-consent-open .dn-hero-tekst{gap:14px}
}

.dn-form .knop{justify-self:start}
.weg-veld{position:absolute;left:-9999px}

/* ---------- gsm en tablet ---------- */
@media (max-width:959px){
  .dn-hero-rij{grid-template-columns:minmax(0,1fr)}
  .dn-hero h1{max-width:none}
  .dn-verhaal{grid-template-columns:minmax(0,1fr);gap:0}
  .dn-toneel{top:calc(var(--kop-h) + 8px);height:min(44svh,360px);z-index:2}
  .dn-toneel-in{box-shadow:inset 0 0 0 1px var(--haar),0 24px 40px -10px var(--zwart-1)}
  .dn-stap{min-height:60svh;justify-content:flex-end;padding-bottom:6svh}
  .dn-stap:first-child{margin-top:4svh}
  .dn-krijgt-rij,.dn-prijs-rij,.dn-slot-rij{grid-template-columns:minmax(0,1fr)}
  .dn-kaarten{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .dn-speel{padding:12px;border-radius:22px}
  .dn-scherm{padding:10px}
  .dm{padding:0}
  .dn-form-velden{grid-template-columns:minmax(0,1fr)}
  .dn-sc{padding:14px}
  .tn-kaart{padding:14px}
  .wf-kopjes,.wf-raster{grid-template-columns:34px repeat(4,minmax(0,1fr));gap:4px}
  .wf-haak{font-size:8px;letter-spacing:.02em}
  .dn-slot b{font-size:14px}
}

/* ---------- minder beweging: alles in eindtoestand ---------- */
.rustig .dn-sc,.rustig .dn-stap,.rustig .zk-ad,.rustig .wk-post,.rustig .wf-tegel,.rustig .dn-slot *,.rustig .ks-pin{transition:none!important;animation:none!important}
.rustig .dn-stap{opacity:1}
.rustig .dn-balk i{transform:none}
.rustig .zk-cursor{animation:none}

/* =====================================================================
   /marketing.html · keuzehulp, acht diensten, samen met de assistent
   ===================================================================== */
.mk-hero h1{max-width:13ch}
.mk-kiezer{position:relative;min-width:0;display:grid;gap:14px;padding:clamp(18px,2.4vw,28px);border-radius:28px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar),0 40px 90px -50px rgba(0,0,0,.9)}
.beweegt.dn-js .mk-kiezer{opacity:0;transform:translateY(80px)}
.beweegt.dn-js .mk-kiezer.toon{opacity:1;transform:none;transition:opacity 1.4s var(--dn-uit) .25s,transform 1.4s var(--dn-uit) .25s}
.mk-kiezer h2{font-size:calc(clamp(26px,2.4vw,34px) * var(--kop-schaal))}
.mk-onder{margin-top:-6px;color:var(--tekst-2);font-size:15px}
.mk-vraag{border:0;padding:0;margin:0;min-width:0}
.mk-vraag legend{display:flex;gap:10px;align-items:baseline;margin-bottom:8px;font-size:15px;color:var(--tekst)}
.mk-vraag legend .mono{color:var(--goud)}
.mk-pillen{display:flex;flex-wrap:wrap;gap:6px}
.mk-pillen label{position:relative;cursor:pointer}
.mk-pillen input{position:absolute;opacity:0;width:1px;height:1px}
.mk-pillen span{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:999px;font-size:13.5px;color:var(--tekst-2);box-shadow:inset 0 0 0 1px var(--haar);transition:background .25s,color .25s,box-shadow .25s}
.mk-pillen label:hover span{color:var(--tekst);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.45)}
.mk-pillen input:checked + span{background:var(--goud-verloop);color:var(--merk-op);box-shadow:none;font-weight:600}
.mk-pillen input:focus-visible + span{outline:1.5px solid var(--goud);outline-offset:3px}
.mk-uitslag{margin-top:4px;padding-top:14px;border-top:1px solid var(--haar)}
.mk-uitkop{font:500 11px/1.3 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--goud);margin-bottom:10px}
.mk-mix{list-style:none;display:grid;gap:8px;min-height:60px}
.mk-mix li{display:grid;gap:4px}
.mk-mix li > .mono{font-size:10px;color:var(--tekst-3)}
.mk-mix a{display:grid;gap:3px;padding:12px 14px;border-radius:14px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);transition:box-shadow .3s}
.mk-mix li:first-child a{box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5)}
.mk-mix a:hover{box-shadow:inset 0 0 0 1px var(--goud)}
.mk-mix b{font-weight:600;font-size:15px}
.mk-mix a span{font-size:13.5px;color:var(--tekst-2)}
.mk-mix em{font:500 11.5px/1.3 var(--font-mono);font-style:normal;color:var(--goud)}
.mk-leeg{padding:14px;border-radius:14px;color:var(--tekst-3);font-size:14px;border:1px dashed var(--haar);background:var(--zwart-1)}
.mk-mix.nieuw li{animation:mk-in .55s cubic-bezier(.215,.61,.355,1) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes mk-in{from{opacity:0;transform:translateY(14px)}}
.mk-klein{margin-top:10px;font-size:12.5px;color:var(--tekst-3)}
.mk-diensten{padding:clamp(80px,10vw,140px) 0}
.mk-diensten .dn-sectiekop .lead{margin-top:4px}
.mk-groepen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mk-groep{display:grid;gap:10px;align-content:start}
.mk-groep > .mono{color:var(--tekst-3);letter-spacing:.16em;margin-bottom:4px}
.mk-dienst{position:relative;display:grid;gap:6px;padding:20px 22px;border-radius:20px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);scroll-margin-top:110px;transition:transform .4s var(--dn-ease),box-shadow .4s}
a.mk-dienst:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--goud)}
.mk-dienst:target{box-shadow:inset 0 0 0 1.5px var(--goud)}
.mk-dienst b{font:400 calc(24px * var(--kop-schaal))/1.1 var(--font-kop);padding-right:28px}
.mk-dienst > span{font-size:14.5px;color:var(--tekst-2)}
.mk-dienst em{font:500 12px/1.4 var(--font-mono);font-style:normal;color:var(--tekst-2)}
.mk-dienst > i{position:absolute;right:20px;top:20px;font-style:normal;color:var(--goud)}
.mk-dienst small{position:absolute;right:20px;top:22px;font-size:9.5px;color:var(--tekst-3)}
.mk-meting{margin-top:24px;padding:16px 20px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--haar);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;color:var(--tekst-2);font-size:15px;scroll-margin-top:110px}
.mk-meting b{color:var(--tekst);font-weight:600}
.mk-meting em{font:500 12px var(--font-mono);font-style:normal;color:var(--goud)}
.mk-samen{padding:clamp(80px,10vw,140px) 0}
.mk-samen-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.mk-samen-in > div{display:grid;gap:22px;justify-items:start}
.mk-samen .mk-klein{color:var(--zacht)}
@media (max-width:959px){.mk-groepen,.mk-samen-in{grid-template-columns:minmax(0,1fr)}}
.rustig .mk-mix li{animation:none}

/* ---------- fase 2 · prijs op aanvraag (SEO) ---------- */
.dn-bedrag.dn-aanvraag span{font-family:var(--font-kop);font-style:italic;color:var(--tekst)}

/* ---------- SEO · wat Google ziet ---------- */
.gz{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px;align-content:start}
.gz-site{display:grid;gap:8px;align-content:start;padding:12px;border-radius:14px;background:var(--zwart-2)}
.gz-site .mono{font-size:9.5px;letter-spacing:.12em;color:var(--tekst-3)}
.gz-r{display:grid;gap:5px}
.gz-r i{display:block;height:12px;border-radius:4px;background:var(--zwart-3);transition:background .6s var(--dn-ease),box-shadow .6s}
.gz-fund{grid-template-columns:1fr}.gz-fund i:nth-child(2){height:28px}
.gz-inh{grid-template-columns:1fr 1fr}.gz-inh i{height:22px}
.gz-verm{grid-template-columns:repeat(3,1fr)}.gz-verm i{height:10px;border-radius:999px}
.gz.h-fund .gz-fund i,.gz.h-inh .gz-inh i,.gz.h-verm .gz-verm i{background:rgba(var(--goud-rgb),.55);box-shadow:0 0 14px -4px rgba(var(--goud-rgb),var(--gloed-goud))}
.gz-lijst{display:grid;gap:8px;align-content:start;min-width:0}
.gz-zoek{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:999px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);font-size:12.5px;min-width:0}
.gz-zoek svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--tekst-3);stroke-width:2}
.gz-zoek span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gz-rijen{position:relative;height:calc(6 * 38px)}
.gz-rij{position:absolute;left:0;right:0;top:calc(var(--plek,0) * 38px);height:32px;display:grid;gap:5px;align-content:center;padding:0 10px;border-radius:10px;background:var(--zwart-2);transition:top .8s var(--dn-uit)}
.gz-rij i{display:block;height:6px;border-radius:3px;background:var(--zwart-3)}
.gz-rij i:last-child{width:70%}
.gz-u{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(var(--goud-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5);z-index:1}
.gz-u > span{display:grid;min-width:0}
.gz-u b{font-size:11.5px;color:var(--goud-licht);font-weight:600}
.gz-u small{font-size:10.5px;color:var(--tekst-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gz-u em{flex:none;font-style:normal;font:600 10.5px/1 var(--font-tekst);padding:5px 9px;border-radius:999px;background:var(--goud-verloop);color:var(--merk-op)}
.gz.gz-klik .gz-u em{transform:scale(.92)}
.gz-hendels{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:8px}
.gz-hendel{display:flex;gap:9px;align-items:flex-start;padding:10px;border:0;border-radius:14px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);color:var(--tekst-2);font-size:11.5px;line-height:1.35;text-align:left;cursor:pointer;transition:box-shadow .3s}
.gz-hendel b{display:block;font-size:13px;color:var(--tekst);margin-bottom:2px}
.gz-hendel i{position:relative;flex:none;width:28px;height:16px;margin-top:1px;border-radius:999px;background:var(--zwart-3);transition:background .3s}
.gz-hendel i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--tekst-3);transition:transform .3s var(--dn-uit),background .3s}
.gz-hendel[aria-pressed=true]{box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.55)}
.gz-hendel[aria-pressed=true] i{background:rgba(var(--goud-rgb),.35)}
.gz-hendel[aria-pressed=true] i::after{transform:translateX(12px);background:var(--goud-licht)}

/* ---------- E-mailmarketing · de nachtploeg ---------- */
.nt-keuze{display:flex;gap:6px;flex-wrap:wrap}
.nt-keuze button{flex:1 1 auto;height:44px;padding:0 14px;border:0;border-radius:12px;background:var(--zwart-1);box-shadow:inset 0 0 0 1px var(--haar);color:var(--tekst-2);font-size:14px;cursor:pointer;transition:box-shadow .3s,color .3s}
.nt-keuze button[aria-pressed=true]{color:var(--goud-licht);box-shadow:inset 0 0 0 1.5px var(--goud)}
.nt-kop{display:flex;align-items:center;gap:10px;font-size:10.5px;color:var(--tekst-3);--p:0}
.nt-kop i{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--goud) calc(var(--p) * 100%),var(--zwart-3) calc(var(--p) * 100%));transition:background .6s}
.nt-van{margin:10px 0 6px;font-size:10.5px;color:var(--tekst-3)}
.nt-van b{color:var(--tekst-2);font-weight:500}
.nt-lijst{list-style:none;display:grid;gap:6px}
.nt-lijst[hidden]{display:none}
.nt-lijst li{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:start;padding:8px 10px;border-radius:12px;background:var(--zwart-2);opacity:.18;transform:translateY(6px);transition:opacity .5s var(--dn-ease),transform .5s var(--dn-ease)}
.nt-lijst li.aan{opacity:1;transform:none}
.nt-lijst .mono{font-size:11px;color:var(--tekst-3);padding-top:1px}
.nt-lijst p{font-size:12.5px;line-height:1.4;color:var(--tekst-2);overflow-wrap:anywhere}
.nt-lijst em{font-style:normal;font:500 9.5px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tekst-3);margin-left:4px}
.nt-mail{box-shadow:inset 3px 0 0 var(--goud)}
.nt-mail p{color:var(--tekst)}
.nt-antw{box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5)}
.nt-antw p{color:var(--goud-licht)}
.nt-stop p{font-weight:600;color:var(--tekst)}

/* ---------- Meting · waar komt elke klant vandaan ---------- */
.bz{--bz-0:var(--goud);--bz-1:var(--goud-licht);--bz-2:var(--goud-diep);--bz-3:rgb(var(--goudt-300));--bz-4:rgb(var(--goudt-700))}
.bz-graf{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) minmax(0,.75fr);gap:6px;align-items:stretch}
.bz-bronnen{list-style:none;display:grid;grid-template-rows:repeat(5,1fr);gap:6px}
.bz-bron{width:100%;height:34px;padding:0 8px;border:0;border-radius:10px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);color:var(--tekst-2);font-size:11.5px;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:box-shadow .3s,color .3s}
.bz[data-meting=met] .bz-bron{box-shadow:inset 3px 0 0 var(--t),inset 0 0 0 1px var(--haar);color:var(--tekst)}
.bz-bron.gekozen{box-shadow:inset 0 0 0 1.5px var(--t)!important}
.bz-lijnen{width:100%;height:100%;overflow:visible}
.bz-l{fill:none;stroke:var(--tekst-3);stroke-width:1.4;opacity:.5;vector-effect:non-scaling-stroke;transition:d .9s var(--dn-uit),stroke .6s,opacity .4s}
.bz[data-meting=met] .bz-l{stroke:var(--t);opacity:.85}
.bz.met-spoor .bz-l:not(.gekozen){opacity:.15}
.bz-l.gekozen{stroke-width:2.4}
.bz-aanvragen{display:grid;grid-template-rows:auto repeat(5,1fr);gap:6px;margin-top:-18px}
.bz-aanvragen .mono,.bz-afspraken .mono{font-size:9.5px;letter-spacing:.12em;color:var(--tekst-3);height:12px}
.bz-tag{display:flex;flex-direction:column;justify-content:center;min-width:0;height:34px;padding:0 8px;border-radius:10px;background:var(--zwart-2);font:500 10.5px/1.15 var(--font-mono);color:var(--tekst-3)}
.bz-tag small{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase}
.bz-tag b{font-weight:500;color:var(--tekst-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bz[data-meting=met] .bz-tag b{color:color-mix(in srgb,var(--t) 62%,var(--tekst))}   /* 28/10: goud-diep en goudt-700 haalden als 10px-tekst geen 4,5:1; de ring blijft de pure bronkleur */
.bz-tag.gekozen{box-shadow:inset 0 0 0 1.5px var(--t)}
.bz-afspraken{display:grid;grid-template-rows:auto 1fr;gap:6px;margin-top:-18px}
.bz-afspraken b{display:grid;place-items:center;padding:8px;border-radius:12px;background:rgba(var(--goud-rgb),.08);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.35);font-size:12px;font-weight:600;text-align:center;overflow-wrap:anywhere}
.bz-spoor{list-style:none;display:grid;gap:5px;margin-top:12px;font:500 11px/1.35 var(--font-mono);color:var(--tekst-2)}
.bz-spoor li{display:grid;grid-template-columns:70px 1fr;gap:8px;padding:6px 10px;border-radius:9px;background:var(--zwart-2);opacity:.15;transition:opacity .5s;overflow-wrap:anywhere}
.bz-spoor li.aan{opacity:1}
.bz-spoor .mono{color:var(--goud);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding-top:1px}

/* ---------- tonelen fase 2 ---------- */
.tn-laad .mono,.tn-link .mono,.tn-velden > .mono{font-size:10px;color:var(--tekst-3)}
.tn-laadbalk{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font:500 11px var(--font-mono);color:var(--tekst-3)}
.tn-laadbalk i{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--goud) 50%,var(--zwart-3) 50%) 100% 0/200% 100%;transition:background-position 1.4s var(--dn-uit) .2s}
.dn-toneel[data-step="1"] .tn-laadbalk i{background-position:0 0}
.tn-vinken{list-style:none;display:grid;gap:6px}
.tn-vinken li{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:10px;background:var(--zwart-2);font-size:13px}
.tn-vinken li::before{content:"";width:9px;height:5px;border:solid var(--goud);border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-2px)}
.tn-boom{gap:8px}
.tn-tak{display:block;padding:8px 12px;border-radius:10px;background:var(--zwart-2);font-size:13px;overflow-wrap:anywhere}
.tn-tak.t0{justify-self:start;color:var(--tekst-2)}
.tn-tak.t1{margin-left:18px;color:var(--goud-licht);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.4)}
.tn-tak.t2{margin-left:40px;position:relative}
.tn-tak.t2::before{content:"";position:absolute;left:-16px;top:50%;width:10px;height:1px;background:var(--haar)}
.tn-verwijs{grid-template-columns:1fr auto;align-items:center}
.tn-verwijs > div{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:10px;background:var(--zwart-2);font-size:13px;grid-column:1}
.tn-verwijs > div i{font-style:normal;color:var(--goud)}
.tn-doel{grid-column:2;grid-row:1/4;padding:14px 12px;border-radius:14px;background:rgba(var(--goud-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5);color:var(--goud-licht);font-size:13px;font-weight:600}
.tn-pijl{color:var(--goud);font-size:11px}
.tn-mail{gap:10px}
.tn-mail-logo{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--haar);font-size:12.5px}
.tn-mail-logo i{width:18px;height:18px;border-radius:5px;background:var(--goud-verloop)}
.tn-mail h4{font:400 20px/1.15 var(--font-kop)}
.tn-mail > i{display:block;height:7px;border-radius:4px;background:var(--zwart-3)}
.tn-mail > i.kort{width:60%}
.tn-mail .tn-knop{justify-self:start}
.tn-mail-foto{display:grid;place-items:end start;height:96px;padding:8px;border-radius:12px;background:linear-gradient(160deg,var(--zwart-3),var(--zwart-2))}
.tn-mail-foto .mono{font-size:9.5px;color:var(--tekst-3)}
.tn-split .niet li{text-decoration:none;color:var(--tekst-2)}
.tn-cookie p{font-size:13.5px}
.tn-cookie-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tn-cookie-knoppen span{display:grid;place-items:center;height:36px;border-radius:999px;font-size:13px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5)}
.tn-cookie-knoppen .ja{background:var(--goud-verloop);color:var(--merk-op);box-shadow:none}
.tn-cookie .tn-chips li{transition:color .5s .6s,box-shadow .5s .6s}
.dn-toneel:not([data-step="1"]) .tn-cookie .tn-chips li{color:var(--tekst-3);box-shadow:inset 0 0 0 1px var(--haar)}
.tn-url{font:500 12.5px/1.5 var(--font-mono);color:var(--tekst-2);overflow-wrap:anywhere}
.tn-url b{font-weight:500;color:var(--goud-licht);background:rgba(var(--goud-rgb),.12);border-radius:4px}
.tn-dossier > p b{font-weight:600}

@media (max-width:560px){
  .gz{grid-template-columns:minmax(0,1fr)}
  .gz-site{display:none}
  .gz-hendels{grid-template-columns:minmax(0,1fr)}
  .gz-hendel{padding:9px 10px}
  .bz-graf{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) minmax(0,.8fr);gap:4px}
  .bz-bron,.bz-tag{font-size:10px;padding:0 6px}
  .bz-spoor li{grid-template-columns:58px 1fr}
}
@media (prefers-reduced-motion:reduce){.gz-rij,.bz-l,.nt-lijst li{transition:none}}
a.mk-meting{transition:box-shadow .3s}a.mk-meting:hover{box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5)}a.mk-meting i{margin-left:auto;font-style:normal;color:var(--goud)}
/* gsm: tikdoel minstens 44 px zonder dat de opmaak verschuift */
@media (max-width:760px){.dn-kruimel a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}}

/* ---------- AI-zichtbaarheid (/ai-zichtbaarheid.html) ---------- */
/* speeltje: het AI-antwoord */
.az{display:grid;align-content:start;gap:12px}
.az-tabs{display:flex;flex-wrap:wrap;gap:6px}
.az-tab{height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;font:500 10.5px/1 var(--font-mono);letter-spacing:.06em;color:var(--tekst-3);box-shadow:inset 0 0 0 1px var(--haar);transition:color .3s,box-shadow .3s,background .3s}
.az-tab.aan{color:var(--goud-licht);background:rgba(var(--goud-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.5)}
.az-vraag{justify-self:end;max-width:88%;min-height:42px;padding:11px 14px;border-radius:16px 16px 4px 16px;background:var(--zwart-3);box-shadow:inset 0 0 0 1px var(--haar);font-size:14.5px;line-height:1.4;overflow-wrap:anywhere}
.az-vraag::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--goud);animation:dn-knip 1s steps(1) infinite}
.az-antw{display:grid;gap:8px;padding:12px 14px;border-radius:16px 16px 16px 4px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar);opacity:0;transform:translateY(8px);transition:opacity .5s var(--dn-ease),transform .5s var(--dn-ease)}
.az-antw.aan{opacity:1;transform:none}
.az-antw > p{font-size:13.5px;color:var(--tekst-2)}
.az-namen{list-style:none;display:grid;gap:6px;counter-reset:az}
.az-namen li{counter-increment:az;display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;align-items:baseline;opacity:0;transform:translateX(-6px);transition:opacity .45s var(--dn-ease),transform .45s var(--dn-ease)}
.az-namen li.aan{opacity:1;transform:none}
.az-namen li::before{content:counter(az);font:500 11px/1 var(--font-mono);color:var(--goud)}
.az-namen b{font-weight:600;font-size:14px}
.az-namen span{grid-column:2;font-size:12.5px;color:var(--tekst-3)}
.az-u{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(240,147,121,.45);background:rgba(240,147,121,.07);opacity:0;transform:translateY(6px);transition:opacity .5s var(--dn-ease),transform .5s var(--dn-ease)}
.az-u.aan{opacity:1;transform:none}
.az-u i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--taak-volg)}
.az-u b{font-weight:600;font-size:14px}
.az-u span{margin-left:auto;font:500 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--taak-volg)}
html.rustig .az-antw,html.rustig .az-namen li,html.rustig .az-u{transition:none}

/* waarom nu: drie feiten */
.az-feiten{padding:clamp(60px,8vw,110px) 0}
.az-feiten .dn-kaart{cursor:default}
.az-feiten .dn-kaart:hover{transform:none;box-shadow:inset 0 0 0 1px var(--haar)}
.az-feiten .dn-kaart span{padding-right:0}

/* de scan in drie stappen + voorbeeldrapport */
.az-scan{padding:clamp(60px,8vw,110px) 0}
.az-scan-rij{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.az-stappen{list-style:none;display:grid;gap:0}
.az-stappen li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:4px 16px;padding:22px 0;border-top:1px solid var(--haar)}
.az-stappen li:last-child{border-bottom:1px solid var(--haar)}
.az-stappen .mono{grid-row:span 2;color:var(--goud);padding-top:6px}
.az-stappen h3{font-size:calc(clamp(1.35rem,2.2vw,1.8rem) * var(--kop-schaal))}
.az-stappen p{color:var(--tekst-2);max-width:48ch}
.az-rapport{display:grid;gap:12px;padding:clamp(18px,2.6vw,26px);border-radius:24px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px rgba(var(--goud-rgb),.3)}
.az-rapport .dn-ov-kop b{font-weight:600}
.az-rapport-sub{font-size:13px;color:var(--tekst-2)}
.az-leg{display:flex;gap:16px;font-size:12.5px;color:var(--tekst-2)}
.az-leg span{display:inline-flex;align-items:center;gap:6px}
.az-leg span::before{content:"";width:14px;height:6px;border-radius:3px;background:var(--goud)}
.az-leg span.ander::before{background:var(--tekst-3)}
.az-rij{display:grid;grid-template-columns:minmax(0,1fr) 52%;gap:12px;align-items:center;font-size:13.5px}
.az-rij > span{display:grid;gap:4px}
.az-rij i{display:block;height:7px;border-radius:4px;background:linear-gradient(90deg,var(--goud-diep),var(--goud)) no-repeat 0 0/var(--w) 100%,var(--zwart-1)}
.az-rij i.ander{background:linear-gradient(90deg,var(--tekst-3),var(--tekst-2)) no-repeat 0 0/var(--w) 100%,var(--zwart-1)}
.az-rapport ol{margin:4px 0 0;padding-left:18px;display:grid;gap:6px;font-size:13.5px;color:var(--tekst-2)}
.az-rapport-noot{font-size:12px;color:var(--tekst-3)}

/* wat u krijgt: maand 1 en elke maand */
.az-krijgt .dn-lijst li{font-size:16px}
.az-elke{display:grid;gap:14px}
.az-elke .dn-niet li::before{width:8px;height:8px;top:.5em;transform:rotate(45deg);background:var(--goud-op-licht)}
.az-bewust{font-size:14.5px;color:var(--zacht)}

/* prijs + bundel */
.az-bundel{scroll-margin-top:calc(var(--kop-h,72px) + 24px);display:grid;gap:12px;align-content:start;padding:clamp(22px,3vw,34px);border-radius:28px;background:var(--zwart-2);box-shadow:inset 0 0 0 1px var(--haar)}
.az-bundel .mono{color:var(--goud)}
.az-bundel h3{font-size:calc(clamp(24px,2.4vw,32px) * var(--kop-schaal))}
.az-bundel .dn-bedrag{font-size:calc(clamp(36px,4vw,54px) * var(--kop-schaal))}
.az-bundel p{color:var(--tekst-2);font-size:15px}
.az-bundel s{color:var(--tekst-3)}
.az-bundel .knop{justify-self:start}
.az-bundel:target{box-shadow:inset 0 0 0 1.5px var(--goud)}
.az-scanform .dn-klein b{color:var(--tekst)}
@media (max-width:959px){.az-scan-rij{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.az-rij{grid-template-columns:minmax(0,1fr) 46%}.az-stappen li{grid-template-columns:38px minmax(0,1fr)}}