/* Callvin — één stijlbestand voor de hele site. Ontwerptokens bovenaan.
   Fris en duidelijk: wit, dikke zwarte koppen, één babyblauwe accentkleur, lichtblauwe banden
   tussen de secties. Geen gloed of verlopen. Systeemlettertype in dikte 800: nul laadtijd. */
:root {
  --bg: #ffffff;
  --bg-2: #f5f7f5;
  --band: #eff7fe;
  --vlak: #ffffff;
  --vlak-2: #f1f3f1;
  --rand: #e4e7e4;
  --rand-2: #d0d5d1;
  --tekst: #0f1411;
  --zacht: #4d544f;
  --zachter: #6f7671;
  --accent: #2475c9;
  --accent-fel: #3d95e0;
  --accent-licht: #e3f0fc;
  --accent-rand: #b9d8f4;
  --goed: #0b7a55;
  --fout: #b4312a;
  --geel: #9a6a12;
  --radius: 18px;
  --radius-s: 12px;
  --schaduw: 0 1px 2px rgba(15, 20, 17, .04), 0 14px 36px -18px rgba(15, 20, 17, .18);
  --breed: 1180px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kop: "SF Pro Display", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--tekst); font: 17px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.verborgen { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.weg { display: none !important; }
.kader { width: min(var(--breed), 100% - 32px); margin-inline: auto; }
.verloop-tekst, .nadruk { color: var(--accent); }
h1 .nadruk, h2 .nadruk { color: var(--accent-fel); }

/* ---------- kop ---------- */
.kop { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rand); }
.kop .kader { display: flex; align-items: center; gap: 32px; height: 72px; }
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px/1 var(--kop); letter-spacing: -.03em; }
.merk img, .merk svg { width: 30px; height: 30px; }
.menu { display: flex; gap: 30px; margin-left: auto; }
.menu a { text-decoration: none; color: var(--tekst); font-size: 15.5px; font-weight: 500; transition: color .2s; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--accent); }
.kop .knop { padding: 11px 20px; font-size: 15px; }
.menu-knop { display: none; margin-left: auto; background: none; border: 1px solid var(--rand-2); border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 600; }
@media (max-width: 860px) {
  .kop .kader { height: 64px; }
  .menu { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rand); padding: 8px 16px 16px; }
  .menu.open { display: flex; }
  .menu a { padding: 14px 4px; border-bottom: 1px solid var(--rand); font-size: 17px; }
  .menu-knop { display: block; }
  .kop .knop { display: none; }
}

/* ---------- knoppen en velden ---------- */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 26px; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; transition: background .15s, box-shadow .15s, opacity .2s, transform .1s; white-space: nowrap; }
.knop:active { transform: translateY(1px); }
.knop[disabled] { opacity: .55; cursor: wait; }
.knop-hoofd { background: var(--tekst); color: #fff; }
.knop-hoofd:hover { background: var(--accent); }
.knop-tweede { background: var(--vlak); color: var(--tekst); box-shadow: inset 0 0 0 1.5px var(--tekst); }
.knop-tweede:hover { background: var(--vlak-2); }
.knop-licht { background: #fff; color: var(--tekst); }
.knop-licht:hover { background: var(--accent-licht); }
.knop-rood { background: var(--vlak); color: var(--fout); box-shadow: inset 0 0 0 1px #e8b9b5; }
.knop-rood:hover { background: #fbefee; }
.veld { width: 100%; background: var(--vlak); border: 1px solid var(--rand-2); border-radius: var(--radius-s); padding: 12px 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.veld:focus { border-color: var(--tekst); box-shadow: 0 0 0 3px rgba(15, 20, 17, .08); }
label { display: block; font-size: 14px; color: var(--zacht); margin-bottom: 6px; }
.vink { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--zacht); margin: 0; }
.vink input { margin-top: 4px; accent-color: var(--tekst); width: 16px; height: 16px; flex: none; }
.vink a { color: var(--tekst); }
.vink label.vink, p.vink > label { display: inline; margin: 0; font-size: inherit; color: inherit; }
.melding { font-size: 14px; min-height: 1.4em; margin: 10px 0 0; }
.melding.fout { color: var(--fout); }
.melding.goed { color: var(--goed); }

/* ---------- held ---------- */
.held { position: relative; padding: 88px 0 96px; }
.held:has(.podium:not(.weg)) { padding-top: 36px; text-align: center; }
.held-intro { text-align: center; transition: opacity .3s ease, transform .3s ease; }
.held-intro h1 { margin-inline: auto; max-width: 15ch; }
.held-intro .onder-titel, .held-intro .scan-vorm { margin-inline: auto; }
.held-intro .held-vinken { justify-content: center; }
.held-intro.verdwijnt { opacity: 0; transform: translateY(-10px); }
.held:has(.podium:not(.weg)) > .kader { width: min(1320px, 100% - 32px); }
.label { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 12px; border-radius: 999px; background: var(--accent-licht); font-size: 13.5px; font-weight: 600; color: var(--accent); }
.label .stip { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-fel); }
h1 { font: 800 clamp(40px, 6vw, 76px)/1 var(--kop); letter-spacing: -.045em; margin: 22px 0 22px; max-width: 13ch; }
.onder-titel { font-size: clamp(18px, 2vw, 21px); color: var(--zacht); max-width: 540px; margin: 0 0 32px; line-height: 1.5; }
.scan-vorm { display: flex; gap: 8px; max-width: 600px; padding: 7px; background: var(--vlak); border-radius: 999px; box-shadow: var(--schaduw), inset 0 0 0 2px var(--tekst); }
.scan-vorm:focus-within { box-shadow: var(--schaduw), inset 0 0 0 2px var(--tekst), 0 0 0 5px var(--accent-licht); }
.scan-vorm .icoon { width: 20px; height: 20px; margin: 0 2px 0 14px; color: var(--zachter); flex: none; align-self: center; }
.scan-vorm input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 17px; padding: 10px 6px; }
.scan-vorm input::placeholder { color: var(--zachter); }
@media (max-width: 560px) {
  .scan-vorm { flex-direction: column; padding: 10px; border-radius: 22px; }
  .scan-vorm .icoon { display: none; }
  .scan-vorm input { text-align: center; }
}
.held-vinken { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 24px 0 0; padding: 0; font-size: 15px; font-weight: 600; }
.held-vinken li { display: inline-flex; align-items: center; gap: 7px; }
.held-vinken svg { width: 20px; height: 20px; color: var(--accent-fel); }

@media (max-width: 960px) { .held { padding: 56px 0 64px; } }

/* ---------- het scanscherm ----------
   Midden een browservenster met het screenshot van hun site en een scanlijn erover, links
   en rechts wat er gevonden is, onderaan de stand met de resterende tijd. */
.podium { position: relative; scroll-margin-top: 84px; margin: 0 auto; max-width: 1320px; text-align: left; animation: omhoog .5s cubic-bezier(.2, .8, .2, 1); }
@keyframes omhoog { from { opacity: 0; transform: translateY(16px); } }
.paneel { position: relative; background: var(--vlak); border-radius: var(--radius); box-shadow: var(--schaduw), inset 0 0 0 1px var(--rand); overflow: hidden; }
.toneel { display: grid; gap: 34px; justify-items: center; padding: 34px 24px 32px; border-radius: 32px; background: var(--band); box-shadow: inset 0 0 0 1px #dcebf9; transition: opacity .4s ease, transform .4s ease; }
.toneel.verdwijnt { opacity: 0; transform: scale(.985); }
.scan-adres { display: inline-flex; gap: 10px; align-items: center; padding: 12px 20px; width: min(460px, 100%); border-radius: 999px; background: var(--vlak); box-shadow: var(--schaduw), inset 0 0 0 1px var(--rand); font-size: 15px; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-adres svg { width: 17px; height: 17px; flex: none; color: var(--zachter); }
/* De labels zweven half over de rand van het venster, elk op een vaste plek, zodat er niets
   verspringt als er een bij komt. */
.toneel-midden { position: relative; width: min(820px, 100%); }
.labels { list-style: none; margin: 0; padding: 0; position: absolute; top: 40px; bottom: 0; width: 230px; z-index: 2; }
.labels.links { left: -168px; }
.labels.rechts { right: -168px; }
.scan-label { position: absolute; left: 0; right: 0; display: grid; gap: 2px; padding: 12px 16px 12px 33px; border-radius: 12px; background: var(--vlak); box-shadow: 0 10px 30px -12px rgba(20, 20, 20, .22), inset 0 0 0 1px var(--rand); font-size: 14px; line-height: 1.35; min-width: 0; animation: label-in .7s cubic-bezier(.16, 1, .3, 1) both; }
.scan-label.p0 { top: 12%; } .scan-label.p1 { top: 42%; } .scan-label.p2 { top: 72%; }
.scan-label::before { content: ""; position: absolute; left: 14px; top: 17px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-licht); }
.scan-label strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan-label span { color: var(--zachter); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.labels.links .scan-label { --van: -18px; }
.labels.rechts .scan-label { --van: 18px; }
@keyframes label-in { from { opacity: 0; transform: translateX(var(--van, 0)); } }

.venster { width: 100%; border-radius: 16px; overflow: hidden; background: var(--vlak); box-shadow: 0 34px 80px -30px rgba(20, 40, 70, .45), 0 0 0 1px rgba(36, 117, 201, .12); }
.venster-balk { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--rand); background: var(--bg-2); }
.venster-balk i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.venster-balk i:nth-child(2) { background: #febc2e; }
.venster-balk i:nth-child(3) { background: #28c840; }
.site { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--vlak); }
.site-beeld { position: absolute; inset: 0; opacity: 0; transform: scale(1.025); transition: opacity .9s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1); }
.site.met-beeld .site-beeld { opacity: 1; transform: none; }
.site-beeld img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.site-laden { position: absolute; inset: 0; padding: 3.5% 6%; transition: opacity .6s; }
.site.met-beeld .site-laden { opacity: 0; }
.nep-kop { display: flex; gap: 3%; align-items: center; margin-bottom: 10%; }
.nep-kop span, .nep-held span, .nep-beeld { display: block; border-radius: 6px; background: linear-gradient(90deg, #f1f1ed, #e6e6e1, #f1f1ed); background-size: 200% 100%; animation: glans 1.6s linear infinite; }
.nep-kop span { width: 7%; height: 8px; }
.nep-kop span:first-child { width: 13%; height: 16px; margin-right: 4%; }
.nep-kop b { margin-left: auto; width: 13%; height: 26px; border-radius: 7px; background: #e4e4df; }
.nep-held { display: grid; grid-template-columns: 1.1fr 1fr; gap: 7%; align-items: center; }
.nep-held span { height: 24px; margin-bottom: 12px; }
.nep-held .l1 { width: 92%; } .nep-held .l2 { width: 68%; } .nep-held .l3 { height: 10px; width: 82%; margin-top: 18px; }
.nep-held .knopje { height: 34px; width: 38%; margin-top: 26px; border-radius: 8px; }
.nep-beeld { aspect-ratio: 4 / 3; border-radius: 14px; }
@keyframes glans { to { background-position: -200% 0; } }
.straal { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, rgba(61, 149, 224, 0) calc(100% - 140px), rgba(61, 149, 224, .26) calc(100% - 4px), var(--accent-fel) calc(100% - 4px)); animation: zweep 3.6s cubic-bezier(.65, 0, .35, 1) infinite alternate; will-change: transform; }
@keyframes zweep { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.podium.klaar .straal { animation: none; opacity: 0; transition: opacity .5s; }

.scan-status { width: min(460px, 100%); padding: 14px 20px 16px; border-radius: 16px; background: var(--vlak); box-shadow: var(--schaduw), inset 0 0 0 1px var(--rand); }
.scan-status > div:first-child { display: flex; flex-direction: column; }
.scan-status strong { font-size: 15.5px; font-weight: 600; }
.scan-status span { font-size: 14px; color: var(--zachter); min-height: 1.4em; font-variant-numeric: tabular-nums; }
.balk { height: 4px; border-radius: 999px; background: var(--vlak-2); overflow: hidden; margin-top: 10px; }
.balk i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .9s cubic-bezier(.16, 1, .3, 1); }

@media (max-width: 1200px) {
  .toneel-midden { display: grid; gap: 10px; }
  .labels { position: static; width: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .labels.links { order: 2; } .labels.rechts { order: 3; }
  .venster { order: 1; margin-bottom: 8px; }
  .scan-label { position: relative; top: auto !important; }
}
@media (max-width: 560px) { .labels { grid-template-columns: 1fr; } }

/* de klare telefoniste */
.klaar-kaart { max-width: 1000px; margin: 0 auto; scroll-margin-top: 84px; padding: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; animation: omhoog .7s cubic-bezier(.16, 1, .3, 1); box-shadow: var(--schaduw), inset 0 0 0 1.5px var(--tekst); }
@media (max-width: 900px) { .klaar-kaart { grid-template-columns: 1fr; } }
.klaar-kaart h2 { font-size: 26px; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 10px; }
.klaar-kaart .boventitel { color: var(--accent); }
.citaat { margin: 16px 0; padding: 14px 16px 14px 18px; border-radius: var(--radius-s); background: var(--bg-2); border-left: 3px solid var(--accent); font-size: 16px; }
.kennis { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.kennis li { font-size: 13px; padding: 5px 11px; border-radius: 999px; background: var(--vlak); box-shadow: inset 0 0 0 1px var(--rand-2); color: var(--zacht); }
.bel-vorm { display: grid; gap: 12px; align-content: center; }
.bel-vorm .knop { padding: 16px 24px; font-size: 17px; width: 100%; }
.groot-veld { font-size: 20px; padding: 14px 16px; letter-spacing: .02em; }
.kleine-tekst { font-size: 13.5px; color: var(--zachter); margin: 0; }
.kleine-tekst a { color: var(--zacht); }
.tekst-knop { background: none; border: 0; padding: 0; margin-top: 18px; color: var(--zacht); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 14px; }
.tekst-knop:hover { color: var(--tekst); }
.klaar-uitleg { color: var(--zacht); margin: 0; }
.lokaal { display: grid; gap: 8px; padding-top: 12px; border-top: 1px dashed var(--rand-2); }
.bel-vorm .rij { display: flex; gap: 8px; }
.bel-vorm .rij .veld { flex: 1; }
.bel-vorm .rij .knop { padding: 12px 20px; font-size: 16px; }
@media (max-width: 480px) { .bel-vorm .rij { flex-direction: column; } }
.of { display: flex; align-items: center; gap: 12px; color: var(--zachter); font-size: 13px; margin: 4px 0; }
.of::before, .of::after { content: ""; flex: 1; height: 1px; background: var(--rand); }

/* het gesprek */
.gesprek { max-width: 1000px; margin: 0 auto; padding: 26px; display: grid; grid-template-columns: 240px 1fr; gap: 26px; animation: omhoog .4s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 820px) { .gesprek { grid-template-columns: 1fr; } }
.bol-houder { position: relative; margin: 4px auto 18px; }
.gesprek .bol-houder { width: 140px; height: 140px; }
.bol { position: absolute; inset: 14px; border-radius: 50%; background: var(--accent-licht); box-shadow: inset 0 0 0 2px var(--accent-rand); transition: transform .08s; }
.bol::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: var(--accent); }
.gesprek-stand { text-align: center; color: var(--zacht); font-size: 15px; margin: 0 0 14px; }
.gesprek > div:first-child { display: flex; flex-direction: column; align-items: center; }
.verloop-lijst { height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 6px 4px 0; scrollbar-width: thin; }
.beurt { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 15px; animation: erin .3s both; }
.beurt.telefonist { align-self: flex-start; background: var(--bg-2); border-bottom-left-radius: 4px; }
.beurt.beller { align-self: flex-end; background: var(--tekst); color: #fff; border-bottom-right-radius: 4px; }
.beurt.voorlopig { opacity: .55; }
.beurt.gebeurtenis { align-self: center; max-width: 100%; background: var(--accent-licht); color: var(--accent); font-size: 14px; border-radius: 10px; }
.leeg-gesprek { margin: auto; color: var(--zachter); text-align: center; font-size: 14px; }

/* ---------- secties ---------- */
section { position: relative; }
.sectie { padding: 104px 0; }
.band { background: var(--band); }
.sectie-kop { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.boventitel { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 800; margin: 0 0 14px; }
h2 { font: 800 clamp(32px, 4.4vw, 54px)/1.04 var(--kop); letter-spacing: -.04em; margin: 0 0 16px; }
h3 { font: 800 19px/1.25 var(--kop); letter-spacing: -.02em; margin: 0 0 8px; }
.sectie-kop p { color: var(--zacht); font-size: 19px; margin: 0; }
@media (max-width: 760px) { .sectie { padding: 72px 0; } .sectie-kop { margin-bottom: 40px; } }

/* drie grote getallen onder de kop */
.feiten { border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); }
.feiten .kader { display: grid; grid-template-columns: repeat(3, 1fr); }
.feit { padding: 40px 32px; }
.feit:first-child { padding-left: 0; }
.feit + .feit { border-left: 1px solid var(--rand); }
.feit strong { display: block; font: 800 clamp(44px, 5vw, 64px)/1 var(--kop); letter-spacing: -.05em; margin-bottom: 10px; }
.feit p { margin: 0; color: var(--zacht); max-width: 260px; }
@media (max-width: 760px) {
  .feiten .kader { grid-template-columns: 1fr; }
  .feit, .feit:first-child { padding: 20px 0; display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; }
  .feit strong { font-size: 40px; margin: 0; }
  .feit + .feit { border-left: 0; border-top: 1px solid var(--rand); }
}

/* kaarten met rond icoon */
.kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kaart { padding: 32px 30px; border-radius: var(--radius); background: var(--vlak); box-shadow: var(--schaduw); transition: transform .2s ease, box-shadow .2s ease; }
.kaart:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15, 20, 17, .04), 0 22px 44px -20px rgba(15, 20, 17, .24); }
.kaart .rond { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-licht); color: var(--accent); margin-bottom: 22px; }
.kaart .rond svg { width: 26px; height: 26px; }
.kaart h3 { font-size: 20px; }
.kaart p { margin: 0; color: var(--zacht); font-size: 16px; }
@media (max-width: 960px) { .kaarten { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .kaarten { grid-template-columns: 1fr; } }

/* stappen met grote nummers */
.drie-stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: stap; }
.stap { padding: 32px 30px 34px; border-radius: var(--radius); background: var(--vlak); box-shadow: inset 0 0 0 1.5px var(--rand); counter-increment: stap; }
.stap::before { content: "0" counter(stap); display: block; font: 800 56px/1 var(--kop); letter-spacing: -.05em; color: var(--accent-fel); margin-bottom: 20px; }
.stap h3 { font-size: 22px; }
.stap p { color: var(--zacht); margin: 0; }
@media (max-width: 860px) { .drie-stappen { grid-template-columns: 1fr; } }

/* ---------- prijzen ---------- */
.schakelaar { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--vlak-2); margin: 0 auto 40px; }
.schakelaar button { border: 0; background: none; padding: 10px 20px; border-radius: 999px; cursor: pointer; color: var(--zacht); font-weight: 600; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
.schakelaar button[aria-pressed="true"] { background: var(--vlak); color: var(--tekst); box-shadow: 0 1px 3px rgba(20, 20, 20, .12); }
.korting { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: var(--accent-licht); color: var(--accent); }
.midden { text-align: center; }
.pakketten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 980px) { .pakketten { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } }
.pakket { position: relative; display: flex; flex-direction: column; padding: 34px 30px; border-radius: var(--radius); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--rand); }
.pakket.uitgelicht { box-shadow: inset 0 0 0 2px var(--tekst), var(--schaduw); }
.pakket .lint { position: absolute; top: -13px; left: 28px; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; }
.pakket h3 { font-size: 24px; margin-bottom: 6px; }
.pakket .voor { color: var(--zacht); font-size: 15px; margin: 0 0 22px; min-height: 3em; }
.prijs { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.prijs .bedrag { font: 800 54px/1 var(--kop); letter-spacing: -.05em; }
.prijs .per { color: var(--zacht); }
.prijs-onder { color: var(--zachter); font-size: 13.5px; min-height: 2.6em; margin: 6px 0 22px; }
.pakket ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.pakket li { display: flex; gap: 10px; font-size: 15px; color: var(--tekst); }
.pakket li svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent); }
.pakket .knop { margin-top: auto; width: 100%; }
.prijs-noot { text-align: center; color: var(--zachter); font-size: 14px; margin-top: 26px; }
.vergelijk { margin: 34px auto 0; max-width: 860px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rand); overflow-x: auto; }
.vergelijk table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.vergelijk th, .vergelijk td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--rand); }
.vergelijk th { color: var(--zacht); font-weight: 600; font-size: 13px; }
.vergelijk tr:last-child td { border-bottom: 0; }
.vergelijk td:not(:first-child), .vergelijk th:not(:first-child) { text-align: right; }

/* ---------- vragen ---------- */
.vragen { max-width: 800px; margin: 0 auto; border-top: 1px solid var(--rand); }
.vragen details { border-bottom: 1px solid var(--rand); }
.vragen summary { cursor: pointer; list-style: none; padding: 24px 4px; font: 700 19px/1.35 var(--kop); letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 16px; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: "+"; color: var(--accent); font-size: 22px; line-height: 1; transition: transform .2s; }
.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen details p { margin: 0; padding: 0 4px 20px; color: var(--zacht); }

/* ---------- slotband ---------- */
.slot { padding: 110px 0; text-align: center; background: var(--tekst); color: #fff; }
.slot h2 { color: #fff; font-size: clamp(44px, 7vw, 92px); text-transform: uppercase; letter-spacing: -.035em; }
.slot p { color: #c4cac6; font-size: 20px; max-width: 560px; margin: 0 auto 34px; }
.slot .knop { padding: 17px 30px; font-size: 17px; }

/* ---------- voet ---------- */
.voet { padding: 64px 0 56px; color: var(--zacht); font-size: 15px; }
.voet .kader { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.voet h3 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tekst); margin: 4px 0 14px; }
.voet nav, .voet .kader > div:last-child { display: flex; flex-direction: column; gap: 9px; }
.voet .voet-merk p { margin: 14px 0 0; }
.voet a { color: var(--zacht); text-decoration: none; }
.voet a:hover { color: var(--accent); }
.voet .merk { color: var(--tekst); }
@media (max-width: 760px) { .voet .kader { grid-template-columns: 1fr 1fr; } .voet .voet-merk { grid-column: 1 / -1; } }
/* andere pagina's hebben een eenvoudige voet: merk links, links rechts */
.voet .kader:not(:has(.voet-merk)) { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.voet .kader:not(:has(.voet-merk)) nav { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }

/* ---------- venster (aanvragen) ---------- */
dialog { border: 0; padding: 0; background: transparent; color: var(--tekst); max-width: 560px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(20, 20, 20, .45); }
.dialoog { padding: 30px; border-radius: 18px; background: var(--vlak); box-shadow: 0 30px 80px -20px rgba(20, 20, 20, .35); }
.dialoog h2 { font-size: 26px; }
.dialoog .sluit { float: right; background: none; border: 0; color: var(--zacht); font-size: 26px; cursor: pointer; line-height: 1; }
.raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.raster-2 .heel { grid-column: 1 / -1; }
@media (max-width: 520px) { .raster-2 { grid-template-columns: 1fr; } }
.samenvatting { padding: 14px 16px; border-radius: var(--radius-s); background: var(--bg-2); margin: 6px 0 18px; font-size: 15px; display: flex; justify-content: space-between; gap: 12px; }

/* ---------- partners ---------- */
.niveaus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .niveaus { grid-template-columns: 1fr; } }
.niveau { padding: 28px; border-radius: var(--radius); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--rand); }
.niveau .procent { font-size: 52px; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 10px 0; }
.niveau p { color: var(--zacht); margin: 0; }
.niveau.goud .procent { color: var(--geel); }
.niveau.platina .procent { color: var(--accent); }
.rekenaar { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 32px; border-radius: 18px; background: var(--vlak); box-shadow: inset 0 0 0 1px var(--rand); align-items: center; }
@media (max-width: 860px) { .rekenaar { grid-template-columns: 1fr; } }
.schuif { margin-bottom: 22px; }
.schuif .boven { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 8px; }
.schuif output { font-weight: 700; }
input[type="range"] { width: 100%; accent-color: var(--tekst); }
.uitkomst { text-align: center; padding: 30px; border-radius: 14px; background: var(--bg-2); }
.uitkomst .groot { font-size: 54px; font-weight: 700; letter-spacing: -.04em; line-height: 1; margin: 6px 0; }
.uitkomst p { margin: 0; color: var(--zacht); }
.aanmelden { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
@media (max-width: 900px) { .aanmelden { grid-template-columns: 1fr; } }
.aanmelden .vorm { padding: 30px; border-radius: 18px; background: var(--vlak); box-shadow: var(--schaduw), inset 0 0 0 1px var(--rand); }
.lijst-vink { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.lijst-vink li { display: flex; gap: 12px; color: var(--tekst); }
.lijst-vink svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.welkom { padding: 26px; border-radius: 14px; background: var(--accent-licht); box-shadow: inset 0 0 0 1px var(--accent-rand); }
.kopieer { display: flex; gap: 8px; margin: 8px 0 16px; }
.kopieer input { flex: 1; font: 14px var(--mono); }

/* ---------- dashboard en beheer ---------- */
.dash { padding: 48px 0 96px; }
.dash h1 { font-size: clamp(30px, 4vw, 42px); margin: 0 0 6px; max-width: none; text-align: left; }
.dash .sub { color: var(--zacht); margin: 0 0 30px; }
.tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 900px) { .tegels { grid-template-columns: 1fr 1fr; } }
.tegel { padding: 20px; border-radius: 14px; background: var(--vlak); box-shadow: inset 0 0 0 1px var(--rand); }
.tegel span { display: block; color: var(--zacht); font-size: 13.5px; }
.tegel strong { display: block; font-size: 30px; letter-spacing: -.03em; margin-top: 6px; }
.blok { padding: 24px; border-radius: 14px; background: var(--vlak); box-shadow: inset 0 0 0 1px var(--rand); margin-bottom: 18px; }
.blok h2 { font-size: 21px; letter-spacing: -.02em; margin: 0 0 14px; }
.voortgang { height: 8px; border-radius: 999px; background: var(--vlak-2); overflow: hidden; margin: 12px 0 8px; }
.voortgang i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabel th, .tabel td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--rand); vertical-align: top; }
.tabel th { color: var(--zacht); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.tabel td.getal, .tabel th.getal { text-align: right; font-variant-numeric: tabular-nums; }
.tabel-houder { overflow-x: auto; }
.merkje { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12.5px; background: var(--vlak-2); color: var(--zacht); }
.merkje.actief, .merkje.uitbetaald { background: var(--accent-licht); color: var(--goed); }
.merkje.aangevraagd, .merkje.open { background: #fbf1dc; color: var(--geel); }
.merkje.goedgekeurd { background: #e6eefb; color: #2a5bb5; }
.merkje.afgewezen, .merkje.vervallen, .merkje.opgezegd, .merkje.gepauzeerd { color: var(--zachter); }
.klein-knop { padding: 6px 12px; font-size: 13px; border-radius: 8px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 6px; }
.tekst-pagina { max-width: 760px; padding: 56px 0 96px; }
.tekst-pagina h1 { font-size: clamp(32px, 4.4vw, 46px); text-align: left; margin: 0 0 12px; max-width: none; }
.tekst-pagina h2 { font-size: 24px; margin-top: 36px; }
.tekst-pagina p, .tekst-pagina li { color: var(--zacht); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

.midden-knoppen { justify-content: center; }
.held .midden-knoppen { justify-content: flex-start; gap: 10px; }
.onder-titel.links { margin: 0; text-align: left; }

/* ---------- klantportaal ---------- */
.portaal-body { background: var(--bg-2); }
.inlog { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.inlog-kaart { width: min(440px, 100%); padding: 36px 32px; border-radius: 22px; background: var(--vlak); box-shadow: var(--schaduw), inset 0 0 0 1px var(--rand); display: grid; gap: 4px; }
.inlog-kaart h1 { font-size: 36px; margin: 22px 0 4px; max-width: none; }
.inlog-kaart .sub { color: var(--zacht); margin: 0 0 18px; }
.inlog-kaart label { margin-top: 10px; }
.inlog-kaart .knop { margin-top: 18px; width: 100%; }
.inlog-kaart .kleine-tekst { margin-top: 14px; }
label span { color: var(--zachter); }

.portaal { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.zijbalk { position: sticky; top: 0; height: 100vh; padding: 24px 16px; background: var(--vlak); border-right: 1px solid var(--rand); display: flex; flex-direction: column; gap: 6px; }
.zijbalk .merk { padding: 0 10px; }
.zij-bedrijf { margin: 6px 10px 18px; font-size: 14px; color: var(--zachter); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zij-menu { display: grid; gap: 2px; }
.zij-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--zacht); font-weight: 600; font-size: 15px; }
.zij-menu a svg { width: 20px; height: 20px; flex: none; }
.zij-menu a:hover { background: var(--vlak-2); color: var(--tekst); }
.zij-menu a[aria-current] { background: var(--accent-licht); color: var(--accent); }
.werkvlak { padding: 44px clamp(16px, 4vw, 56px) 120px; max-width: 1000px; width: 100%; }
.werkvlak h1 { font-size: clamp(30px, 4vw, 42px); margin: 0 0 8px; max-width: none; }
.werkvlak .sub { color: var(--zacht); margin: 0 0 24px; font-size: 18px; }
.werkvlak .boventitel { margin-bottom: 8px; }
.werkvlak > .tab > h1 + .blok, .werkvlak > .tab > h1 + .portaal-raster { margin-top: 24px; }
.werkvlak .blok { border-radius: var(--radius); padding: 26px; }
.werkvlak .blok h2 { font-size: 20px; }
.werkvlak .blok label:not(.keuze):not(.schakel) { margin-top: 14px; }
.werkvlak .blok h2 + label, .werkvlak .blok h2 + .rij-2 > div > label:first-child { margin-top: 0; }
.werkvlak textarea.veld { resize: vertical; line-height: 1.5; }
.portaal-raster { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
.portaal-raster > .blok { margin-bottom: 18px; }
.rij-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.blok-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.blok-kop h2 { margin: 0 !important; }
.onderaan { display: flex; align-items: flex-end; padding-top: 14px; }
.leeg-staat { color: var(--zachter); margin: 0; }
.leeg-staat a { color: var(--accent); }

.stap-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stap-lijst li a { display: flex; align-items: center; gap: 12px; padding: 9px 4px; text-decoration: none; color: var(--tekst); font-weight: 500; }
.stap-lijst li a::before { content: ""; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--rand-2); flex: none; }
.stap-lijst li.klaar a { color: var(--zachter); text-decoration: line-through; text-decoration-color: var(--rand-2); }
.stap-lijst li.klaar a::before { background: var(--accent-fel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; box-shadow: none; }
.stap-lijst li:not(.klaar) a:hover { color: var(--accent); }
.feitjes { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.feitjes dt { color: var(--zachter); }
.feitjes dd { margin: 0; font-weight: 600; }

.keuze-rij { border: 0; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.keuze-rij legend { font-size: 14px; color: var(--zacht); margin-bottom: 8px; padding: 0; }
.keuze { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rand-2); cursor: pointer; color: var(--tekst); font-size: 15px; font-weight: 500; margin: 0; }
.keuze:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-licht); }
.keuze input { accent-color: var(--accent); margin: 0; }

.schakels { display: grid; gap: 10px; }
.schakel { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rand); cursor: pointer; margin: 0; color: var(--zacht); font-size: 14.5px; }
.schakel strong { display: block; color: var(--tekst); font-size: 16px; }
.schakel input { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--rand-2); position: relative; flex: none; cursor: pointer; transition: background .2s; margin: 0; }
.schakel input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s; }
.schakel input:checked { background: var(--accent-fel); }
.schakel input:checked::after { transform: translateX(18px); }
.schakel:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--accent-rand); background: #fafdff; }
.schakel.klein { padding: 0; box-shadow: none; background: none; align-items: center; gap: 8px; color: var(--tekst); font-weight: 600; }

.tijden { display: grid; gap: 8px; }
.tijd-rij { display: grid; grid-template-columns: 150px 120px auto 120px 1fr; align-items: center; gap: 10px; }
.tijd-rij .keuze { padding: 7px 12px; }
.tijd-rij .veld { padding: 8px 10px; }
.tijd-rij .veld:disabled { opacity: .35; }
.tijd-rij .tot { color: var(--zachter); font-size: 14px; }
.tijd-rij .gesloten { color: var(--zachter); font-size: 14px; }
@media (max-width: 620px) { .tijd-rij { grid-template-columns: 1fr 1fr; } .tijd-rij .keuze { grid-column: 1 / -1; justify-self: start; } .tijd-rij .tot, .tijd-rij .gesloten { display: none; } }

.lijst-kop { display: grid; gap: 10px; font-size: 13px; color: var(--zachter); font-weight: 600; padding: 0 2px 6px; }
.lijst-rij { display: grid; gap: 10px; align-items: start; margin-bottom: 10px; }
.rij-diensten { grid-template-columns: 2fr 1fr 1fr 40px; }
.rij-faq { grid-template-columns: 1fr 40px; padding-bottom: 12px; border-bottom: 1px solid var(--rand); }
.rij-faq > div { display: grid; gap: 8px; }
.weg-knop { width: 40px; height: 44px; border: 0; border-radius: 10px; background: none; color: var(--zachter); font-size: 22px; cursor: pointer; }
.weg-knop:hover { background: #fbefee; color: var(--fout); }
@media (max-width: 620px) { .rij-diensten { grid-template-columns: 1fr 1fr 40px; } .rij-diensten > :first-child { grid-column: 1 / -1; } .lijst-kop { display: none; } }

.upload { display: grid; justify-items: center; gap: 6px; padding: 40px 24px; border-radius: var(--radius); border: 2px dashed var(--accent-rand); background: var(--vlak); text-align: center; cursor: pointer; transition: background .2s, border-color .2s; margin: 0 0 4px; color: var(--zacht); }
.upload:hover, .upload.erboven { background: var(--accent-licht); border-color: var(--accent-fel); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload svg { width: 34px; height: 34px; color: var(--accent); margin-bottom: 6px; }
.upload strong { color: var(--tekst); font-size: 17px; }
.upload span { font-size: 14px; }
.upload:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.doc-lijst { display: grid; }
.doc-rij { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rand); }
.doc-rij:last-child { border-bottom: 0; }
.doc-rij strong { display: block; word-break: break-word; }
.doc-rij span { font-size: 13.5px; color: var(--zachter); }
@media (max-width: 620px) { .doc-rij { grid-template-columns: 1fr auto; } .doc-rij > div { grid-column: 1 / -1; } }

.koppeling-kop { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.koppeling-kop h2 { margin: 0 0 2px !important; }
.koppeling-kop p { margin: 0; color: var(--zacht); font-size: 15px; }
.koppeling-kop .merkje { margin-left: auto; flex: none; }
.rond-klein { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-licht); color: var(--accent); flex: none; }
.rond-klein svg { width: 22px; height: 22px; }
.hulp { margin: 10px 0 4px; font-size: 14.5px; color: var(--zacht); }
.hulp summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.hulp p { margin: 8px 0; }
.binnenkort-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.binnenkort { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--vlak-2); color: var(--zacht); font-size: 14px; font-weight: 500; }
.binnenkort em { font-style: normal; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--vlak); color: var(--zachter); }
.vrij-lijst { margin: 8px 0 0; padding-left: 20px; columns: 2; color: var(--tekst); }
@media (max-width: 620px) { .vrij-lijst { columns: 1; } }
div.melding p { margin: 0; }

.opdracht-blok summary { cursor: pointer; list-style: none; }
.opdracht-blok summary::-webkit-details-marker { display: none; }
.opdracht-blok summary h2 { display: inline; }
.opdracht-blok summary::after { content: "  +"; color: var(--accent); font-weight: 800; }
.opdracht-blok[open] summary::after { content: "  −"; }
.opdracht { white-space: pre-wrap; font: 13.5px/1.55 var(--mono); background: var(--bg-2); padding: 18px; border-radius: 12px; max-height: 480px; overflow: auto; margin: 12px 0 0; }
.werkvlak .gesprek { margin: 0 0 14px; max-width: none; }

.opslaan-balk { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 22px; border-radius: 999px; background: var(--tekst); color: #fff; box-shadow: 0 18px 50px -12px rgba(15, 20, 17, .45); width: max-content; max-width: calc(100% - 32px); }
.opslaan-balk[hidden] { display: none; }
.opslaan-balk span { font-size: 15px; }
.opslaan-balk .knop { padding: 10px 20px; font-size: 15px; }
.opslaan-balk .knop-tweede { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .4); }
.opslaan-balk .knop-hoofd { background: #fff; color: var(--tekst); }
.opslaan-balk .knop-hoofd:hover { background: var(--accent-licht); }

@media (max-width: 900px) {
  .portaal { grid-template-columns: 1fr; }
  .zijbalk { position: sticky; top: 0; z-index: 40; height: auto; flex-direction: row; align-items: center; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--rand); overflow-x: auto; gap: 4px; }
  .zijbalk .merk { padding: 0 8px 0 4px; font-size: 0; gap: 0; }
  .zij-bedrijf { display: none; }
  .zij-menu { display: flex; gap: 2px; }
  .zij-menu a { padding: 8px 12px; white-space: nowrap; font-size: 14px; }
  .zij-menu a svg { display: none; }
  .werkvlak { padding-top: 28px; }
  .portaal-raster { grid-template-columns: 1fr; gap: 0; }
  .opslaan-balk { border-radius: 18px; flex-wrap: wrap; justify-content: flex-end; padding: 12px; }
  .opslaan-balk span { flex-basis: 100%; padding-left: 6px; }
}
.schakel.klein:has(input:checked) { box-shadow: none; background: none; }
.werkvlak .kopieer { margin: 0; }
.werkvlak .kopieer input { font: inherit; }
@media (max-width: 620px) { .werkvlak .kopieer { flex-direction: column; } .werkvlak .kopieer .knop { width: 100%; } }
@media (max-width: 900px) { .zijbalk .merk { flex: none; } .zijbalk .merk img { width: 28px; height: 28px; } }

/* tweede scanveld en het stilstaande voorbeeld van de scan, in het zwarte blok.
   Het voorbeeld springt eruit door een witte lijst, een blauwe kaart die er schuin achter
   uitsteekt en een diepe schaduw; geen gloed of verloop. */
.slot .slot-vorm { margin: 0 auto; max-width: 600px; text-align: left; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 20px 50px -20px rgba(0, 0, 0, .6); }
.slot .slot-vorm input { color: var(--tekst); }
.scan-voorbeeld { margin: 72px auto 56px; max-width: 1040px; }
.voorbeeld-kader { position: relative; isolation: isolate; padding: 14px; border-radius: 28px; background: #fff; box-shadow: 0 60px 120px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(-1.2deg); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.voorbeeld-kader::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 28px; background: var(--accent-fel); transform: translate(22px, 22px) rotate(2.4deg); }
.voorbeeld-kader::after { content: none; }
.scan-voorbeeld:hover .voorbeeld-kader { transform: rotate(0deg) scale(1.01); }
.voorbeeld-kader img { display: block; width: 100%; height: auto; border-radius: 18px; }
.voorbeeld-label { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(1.2deg); z-index: 1; padding: 7px 16px; border-radius: 999px; background: var(--tekst); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 0 3px #fff; white-space: nowrap; }
.scan-voorbeeld figcaption { margin-top: 40px; color: #9aa3ab; font-size: 15px; }
@media (max-width: 560px) {
  .scan-voorbeeld { margin: 52px auto 40px; }
  .voorbeeld-kader { padding: 8px; border-radius: 18px; }
  .voorbeeld-kader::before { border-radius: 18px; transform: translate(10px, 12px) rotate(2deg); }
  .voorbeeld-kader::after { inset: 8px; border-radius: 12px; }
  .voorbeeld-kader img { border-radius: 12px; }
  .scan-voorbeeld figcaption { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .voorbeeld-kader, .scan-voorbeeld:hover .voorbeeld-kader { transform: none; } }

/* de belkaart na de scan: alleen het nummer en de knop */
.klaar-kaart { display: block; max-width: 680px; padding: 40px 36px 30px; text-align: center; }
.klaar-kaart h2 { font-size: clamp(26px, 3.4vw, 36px); margin: 0 0 24px; }
.klaar-kaart .bel-rij { margin: 0 auto; }
.klaar-kaart .bel-rij input { font-size: 19px; letter-spacing: .02em; }
.klaar-kaart .bel-rij .knop { padding: 14px 28px; }
.klaar-kaart .melding { text-align: center; }
.klaar-kaart .kleine-tekst { margin-top: 6px; }
.klaar-kaart .kleine-tekst .tekst-knop { margin: 0; font-size: inherit; }
.klaar-kaart .lokaal { margin-top: 18px; border-top: 1px dashed var(--rand-2); padding-top: 16px; justify-items: center; }
@media (max-width: 560px) { .klaar-kaart { padding: 30px 18px 24px; } .klaar-kaart .bel-rij input { text-align: center; } }
@media (max-width: 560px) { .toneel { padding: 22px 12px 20px; border-radius: 22px; gap: 22px; } }

/* de scanlijn beweegt ook in het voorbeeld: dezelfde straal als in de echte scan, precies over
   het venster van de website in het beeld (gemeten: links 18,9%, boven 18,2%, 62,1% × 62,6%) */
.voorbeeld-beeld { position: relative; border-radius: 18px; overflow: hidden; }
.voorbeeld-straal { position: absolute; left: 18.94%; top: 18.2%; width: 62.12%; height: 62.6%; overflow: hidden; pointer-events: none; border-radius: 0 0 1% 1% / 0 0 1.6% 1.6%; }
.voorbeeld-straal::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(61, 149, 224, 0) calc(100% - 120px), rgba(61, 149, 224, .26) calc(100% - 4px), var(--accent-fel) calc(100% - 4px)); animation: zweep 3.6s cubic-bezier(.65, 0, .35, 1) infinite alternate; will-change: transform; }
.scan-voorbeeld:hover .voorbeeld-straal::before { animation-duration: 2.4s; }
@media (max-width: 560px) { .voorbeeld-beeld { border-radius: 12px; } .voorbeeld-straal::before { background: linear-gradient(180deg, rgba(61, 149, 224, 0) calc(100% - 50px), rgba(61, 149, 224, .26) calc(100% - 2px), var(--accent-fel) calc(100% - 2px)); } }
@media (prefers-reduced-motion: reduce) { .voorbeeld-straal::before { animation: none; transform: translateY(-40%); } }

/* het voorbeeld is alleen het browservenster, groot, zonder de pop-ups eromheen */
.scan-voorbeeld { max-width: 1180px; }
.voorbeeld-kader { padding: 0; background: none; border-radius: 20px; }
.voorbeeld-kader::before { border-radius: 20px; }
.voorbeeld-beeld { border-radius: 20px; }
.voorbeeld-kader img { border-radius: 0; }
.voorbeeld-straal { left: 0; width: 100%; top: 6.05%; height: 93.95%; border-radius: 0; }
@media (max-width: 560px) { .voorbeeld-kader, .voorbeeld-kader::before, .voorbeeld-beeld { border-radius: 12px; } .voorbeeld-kader { padding: 0; } }
.slot { overflow: hidden; }

/* geen randen meer om het voorbeeld: geen blauwe kaart erachter, geen schuine stand, geen label */
.voorbeeld-kader, .scan-voorbeeld:hover .voorbeeld-kader { transform: none; }
.voorbeeld-kader::before { content: none; }
.voorbeeld-kader { box-shadow: 0 50px 110px -40px rgba(0, 0, 0, .9); }
.scan-voorbeeld { max-width: 880px; }

/* korte, dikke ondertitel onder een groot getal */
.feit .feit-kort { color: var(--tekst); font: 700 20px/1.3 var(--kop); letter-spacing: -.01em; }
@media (max-width: 760px) { .feit strong { white-space: nowrap; } }
.feit strong .feit-klein { font-size: .42em; letter-spacing: -.01em; }
@media (max-width: 760px) { .feit, .feit:first-child { display: block; padding: 22px 0; } .feit strong { margin-bottom: 6px; } }
.feit strong .feit-tot { font-size: .28em; letter-spacing: 0; margin-right: .1em; }

/* "Wat ze doet": strakke lijst zonder icoontjes. Links de kop (blijft staan), rechts zes regels. */
.wat-raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.wat-kop { position: sticky; top: 112px; }
.wat-kop h2 { font-size: clamp(36px, 4.6vw, 60px); margin-bottom: 18px; }
.wat-kop > p:not(.boventitel) { color: var(--zacht); font-size: 19px; margin: 0 0 28px; max-width: 380px; }
.wat-lijst { list-style: none; margin: 0; padding: 0; counter-reset: wat; border-top: 2px solid var(--tekst); }
.wat-lijst li { counter-increment: wat; display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; padding: 26px 0 28px; border-bottom: 1px solid #cfe0f1; }
.wat-lijst li::before { content: counter(wat, decimal-leading-zero); grid-row: 1 / 3; font: 800 15px/1 var(--kop); color: var(--accent); padding-top: 9px; letter-spacing: .04em; }
.wat-lijst h3 { font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.03em; margin: 0 0 6px; }
.wat-lijst p { margin: 0; color: var(--zacht); font-size: 17px; max-width: 520px; }
@media (max-width: 900px) {
  .wat-raster { grid-template-columns: 1fr; gap: 36px; }
  .wat-kop { position: static; }
  .wat-kop .knop { display: none; }
  .wat-lijst li { grid-template-columns: 40px 1fr; padding: 20px 0 22px; }
}

/* ---------- oplossingen per branche ---------- */
.oplossingen-held { padding-bottom: 56px; }
.oplossingen-held h1 { max-width: 16ch; margin-top: 0; }
.oplossingen-held .onder-titel { max-width: 640px; margin-bottom: 30px; }
.cat-sprong { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-sprong a { padding: 9px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rand-2); text-decoration: none; font-weight: 600; font-size: 15px; transition: box-shadow .15s, background .15s; }
.cat-sprong a:hover { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-licht); color: var(--accent); }
.categorie { padding: 72px 0; scroll-margin-top: 72px; }
.categorie-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--tekst); padding-bottom: 14px; margin-bottom: 8px; }
.categorie-kop h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); }
.categorie-kop span { color: var(--zachter); font-weight: 600; font-size: 15px; white-space: nowrap; }
.branches { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; }
.branche { display: block; padding: 18px 0; border-bottom: 1px solid var(--rand); text-decoration: none; }
.band .branche { border-bottom-color: #cfe0f1; }
.branche strong { display: block; font: 800 19px/1.25 var(--kop); letter-spacing: -.02em; }
.branche span { display: block; color: var(--zachter); font-size: 14.5px; margin-top: 2px; }
a.branche:hover strong { color: var(--accent); }
@media (max-width: 900px) { .branches { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .branches { grid-template-columns: 1fr; } .categorie { padding: 52px 0; } }
.held-intro h1 { margin-top: 0; }