/* VIDEOKLAAR-RUST-20261103 — zakelijke opmaak bovenop stijl.css: wit, papier en inkt, limoen alleen voor de hoofdknop en het logo. Laadt als laatste. */
:root{--inkt:#0F1218;--inkt-2:#191D26;--op-inkt:#F4F5F7;--op-inkt-2:#B7BCC7;--violet:#2A2F3A;--op-violet-2:#4B5261;--koraal:#F6F6F3;--papier:#F6F6F3;--op-papier-2:#4B5261;--lijn:#E3E5EA;--rond:0px}
html{scrollbar-color:#3A3F4B var(--inkt)}
::-webkit-scrollbar-thumb{background:#3A3F4B}
h1,h2,h3{letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.4rem,4.5vw,4.1rem);line-height:1.05}
h2,.slot h2{font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1.1;max-width:24ch}
.kop-breed{max-width:24ch}
h3{font-size:1.25rem;line-height:1.25}

.knop{border-radius:12px;box-shadow:none}
.knop:hover{transform:none;box-shadow:none;background:#DFFF66}
.knop-inkt:hover{background:#232833}
.knop-groot{min-height:60px;padding:0 30px;font-size:1.0625rem}

.nav{border-radius:14px;background:rgba(15,18,24,.94);box-shadow:0 0 0 1px rgba(255,255,255,.09)}
.nav-links a,.nav-in{border-radius:10px}
.nav-links a:hover,.nav-in:hover{background:#232833}
.opdracht{border-radius:14px;box-shadow:inset 0 0 0 1px #343A47}
.opdracht:focus-within{box-shadow:inset 0 0 0 1px #8A91A0}
.keuzes button{background:none;box-shadow:inset 0 0 0 1px #343A47;border-radius:10px}
.keuzes button:hover{background:#232833;transform:none}
.keuzes button[aria-pressed=true]{background:var(--op-inkt);color:var(--inkt)}
.telefoon,.p-video{border-radius:24px;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -36px #000}
.toneel figcaption{background:none;color:var(--op-inkt-2);padding:0}

.vlak{margin-top:0;border-radius:0;padding-block:clamp(64px,7vw,104px)}
.vlak-violet,#prijzen{background:var(--papier);color:var(--inkt)}
.vlak-licht,.vlak-inkt:has(.vragen-raster){background:#fff;color:var(--inkt)}
.p-links.vlak-licht{background:var(--papier)}.eerlijk{color:var(--op-papier-2)}

.galerij{gap:12px;padding-bottom:0}
.galerij li:is(:nth-child(2),:nth-child(4),:nth-child(7),:nth-child(9)),.galerij li:nth-child(even){translate:none}
.galerij button{border-radius:14px;background:#E8EAEE}
.galerij button:hover{transform:none;box-shadow:none}
.galerij span,.branche-raster span,.p-video span{left:0;right:0;bottom:0;border-radius:0;padding:40px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#E8EAEE}

.scherm{border-radius:14px;box-shadow:0 0 0 1px var(--lijn)}
.stap-lijst li{min-height:40vh;opacity:.5}
.stap-lijst li:first-child{min-height:34vh}
.stap-lijst h3{font-size:clamp(1.35rem,2vw,1.75rem);font-weight:700}

.vergelijk{border-radius:14px}
.vergelijk::after{background:#fff}
.greep{background:#fff}
.tag{border-radius:8px}
.tag-r{background:#fff}
.bel,.bel-2{background:#232833;border-radius:12px}
.merk-tekst{font-size:clamp(1.0625rem,1.4vw,1.25rem);font-weight:400;max-width:70ch;color:var(--op-papier-2)}
.merk-tekst b{font-weight:600;color:var(--inkt)}

.prijs-blok{border-radius:16px;box-shadow:0 0 0 1px var(--lijn)}
.prijs-gratis{background:#fff}
.prijs-maken{box-shadow:none}
.tarief td{border-top-color:var(--lijn)}
.pakketten li{border-radius:10px}
.dienst li{border-top-color:#2B303B}
.tel{border-radius:12px;box-shadow:inset 0 0 0 1px #5A6170;color:var(--op-inkt)}
.tel:hover{background:var(--op-inkt);color:var(--inkt)}

.vlak-inkt:has(.vragen-raster) .vragen details{border-color:var(--lijn)}
.vlak-inkt:has(.vragen-raster) .vragen details p{color:var(--op-papier-2)}
.vlak-inkt:has(.vragen-raster) .vragen summary::after{background:linear-gradient(var(--inkt),var(--inkt)) center/100% 2px no-repeat,linear-gradient(var(--inkt),var(--inkt)) center/2px 100% no-repeat}
.vragen summary{font-weight:600;font-size:1.0625rem}

.slot{margin-top:0;border-radius:0;background:var(--inkt);color:var(--op-inkt);padding-block:clamp(72px,8vw,112px);gap:26px}
.slot h2{max-width:none}
.slot .knop-inkt{background:var(--lime);color:var(--inkt)}
.slot .knop-inkt:hover{background:#DFFF66}
.slot-noot{font-weight:400;color:var(--op-inkt-2)}
.voet{background:#0A0C11;box-shadow:inset 0 1px 0 #1E222B}
.voet strong{font-weight:700}
.voet a:hover{color:var(--op-inkt)}

.p-stappen li::before{border-radius:10px;background:var(--inkt);color:var(--op-inkt);font-weight:700;font-size:1.0625rem}
.p-stappen p{color:var(--op-papier-2)}
.p-blok h2{font-size:clamp(1.5rem,2.3vw,2.1rem)}
.p-links a{border-radius:10px;box-shadow:0 0 0 1px var(--lijn)}
.p-links a:hover{transform:none;box-shadow:0 0 0 1px #9AA0AD}
.branche-raster a{border-radius:14px}
.branche-raster a:hover{transform:none}
.branche-raster span{font-weight:600;color:#fff}/* prijzen en juridisch */

.prijs-noot{margin-top:22px;max-width:70ch;color:var(--op-papier-2);font-size:.9375rem}
.lees{max-width:760px;margin-inline:auto}
.lees h2{font-size:clamp(1.3rem,1.9vw,1.6rem);margin:42px 0 12px;max-width:none}
.lees h2:first-child{margin-top:0}
.lees h3{font-size:1.0625rem;margin:22px 0 8px}
.lees p,.lees li{color:#2F3440;line-height:1.65}
.lees p{margin:0 0 12px}
.lees ul,.lees ol{list-style:disc;padding-left:22px;margin:0 0 14px}
.lees ol{list-style:decimal}
.lees li{margin-bottom:7px}
.lees a{color:inherit;text-decoration:underline}
.lees table{width:100%;border-collapse:collapse;font-size:.9375rem;margin:0 0 16px}
.lees th,.lees td{padding:10px 12px 10px 0;border-top:1px solid var(--lijn);text-align:left;vertical-align:top}
.avb-meta{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:.9375rem;margin-bottom:22px;color:var(--op-papier-2)}
.avb-intro{font-size:1.0625rem}
.avb-info{padding:14px 16px;border-radius:12px;background:var(--papier);margin-bottom:22px;font-size:.9375rem}
.avb-toc{padding:16px 18px;border-radius:12px;background:var(--papier);margin-bottom:26px}
.p-held-kort{padding-bottom:56px}

@media (max-width:960px){
  .stap-lijst li,.stap-lijst li:first-child{min-height:44vh}
  .galerij{gap:10px}
}/* VIDEOKLAAR-PRIJZEN-20261103: volledige prijstabel en WebP-omhulsel */

picture{display:contents}
.tarief-meer{margin-top:-6px;font-size:.9375rem}
.tarief-meer a{text-decoration:underline}
.prijs-alles{max-width:860px}
.prijs-alles .prijs-noot{margin-top:14px}
.tarief-vol{margin-top:22px}
.tarief-vol thead th{padding-bottom:8px}
.tarief-vol thead th:nth-child(2){text-align:right;padding-left:14px}
.tarief-vol tbody th,.tarief-vol tbody th:last-child{padding:26px 0 8px;font-size:1.0625rem;font-weight:700;color:var(--inkt);text-align:left;white-space:normal}
.scherm[data-stap="1"] img{--z:1.45}/* TRECHTER-20261103: na de proefvideo */

.pv-verder{max-width:560px}
.pv-verder-kop{margin:0 0 10px;font-size:1.125rem;font-weight:700;line-height:1.3;color:var(--op-inkt)}
.pv-krijgt{display:grid;gap:5px;list-style:none;margin:0 0 14px;padding:0;font-size:.9375rem;line-height:1.4;color:var(--op-inkt)}
.pv-krijgt li{position:relative;padding-left:24px}
.pv-krijgt li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;background:var(--lime);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10.5 4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10.5 4 4 8-9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.pv-prijs{margin:0 0 16px;padding:12px 14px;border-radius:12px;box-shadow:inset 0 0 0 1px #343A47;font-size:.9375rem;line-height:1.45;color:var(--op-inkt-2)}
.pv-prijs b{color:var(--op-inkt)}
.pv-noot{margin:10px 0 0;font-size:.875rem;line-height:1.4;color:var(--op-inkt-2)}
@media (max-width:960px){.toneel+.pv-verder{margin-top:0;grid-column:1/-1;max-width:none}}
@media (max-width:380px){.nav{gap:6px;padding-inline:8px}.nav-acties{gap:2px}.nav-in{padding-inline:6px}.nav .knop-klein{padding-inline:10px}.merk{gap:6px}.merk span{font-size:1rem}}
.tarief-vol td{border-top-color:var(--lijn)}
.tarief-vol td:nth-child(2){text-align:right;white-space:nowrap;font-weight:700;padding-left:14px}
.tarief-vol td:last-child{font-weight:400;color:var(--op-papier-2)}
.slot h1{font-size:clamp(1.9rem,3.1vw,2.9rem);line-height:1.1}
.lees .avb .avb-meta,.lees .avb .avb-info{background:var(--papier);border-left:0;border-radius:12px}
.lees .avb .avb-toc{border-color:var(--lijn)}/* koppen links, gelijk met de inhoud; de bonte eindkaarten niet op de site */

h2,.kop-breed,.prijs-noot{max-width:1312px}/* VK-LOGO-BEWEGING-20261103: het Zaakstudio-logo komt rustig op en tikt af en toe aan; herkend aan het limoen vlak, dus elke kopie van het logo doet mee */

@keyframes vkl-vlak{0%{transform:scale(.72)}65%{transform:scale(1.06)}100%{transform:none}}
@keyframes vkl-play{0%{transform:translateX(-2px) scale(.8);opacity:.2}70%{transform:translateX(.6px) scale(1.04);opacity:1}100%{transform:none;opacity:1}}
@keyframes vkl-vink{from{stroke-dashoffset:14}to{stroke-dashoffset:0}}
@keyframes vkl-tik{0%,90%,100%{transform:none}93%{transform:translateX(1px) scale(1.1)}97%{transform:translateX(-.4px) scale(.98)}}
@keyframes vkl-hover{0%,100%{transform:none}40%{transform:translateX(1.2px) scale(1.12)}75%{transform:translateX(-.4px) scale(.98)}}
svg>rect[rx="9"][fill="#D1FF3A"]{transform-box:fill-box;transform-origin:center;animation:vkl-vlak .5s cubic-bezier(.2,.8,.3,1) both}
svg>rect[rx="9"][fill="#D1FF3A"]~path{transform-box:fill-box;transform-origin:center;animation:vkl-play .5s .1s ease-out both,vkl-tik 14s 3s ease-in-out infinite}
svg>rect[rx="9"][fill="#D1FF3A"]~path[stroke]{stroke-dasharray:14;animation:vkl-vink .45s .4s ease-out both,vkl-tik 14s 3s ease-in-out infinite}
svg:hover>rect[rx="9"][fill="#D1FF3A"]~path{animation:vkl-hover .55s ease-out}
@media (prefers-reduced-motion:reduce){svg>rect[rx="9"][fill="#D1FF3A"],svg>rect[rx="9"][fill="#D1FF3A"]~path{animation:none;stroke-dasharray:none}}