/* ========================================================================== 
   Sectie 5: wat Pilo AI concreet doet

   Compacte toolkiezer met één open werkstroom. Desktop gebruikt een vaste
   lijst naast het actieve werkstuk. Mobiel opent het werkstuk onder de rij.
   Geen kleine bovenkop, losse kaartencarrousel of dashboardscores.
   ========================================================================== */

.vp-concreet-inhoud {
  width: 100%;
}

/* Het oude Webflow-template blijft reversibel in de HTML, maar neemt geen
   ruimte in. .w-layout-grid zou het standaard hidden-gedrag anders winnen. */
#concreet > .container > .benefit-grid[hidden] {
  display: none !important;
}

/* Vaste hoekknoppen bedekten op mobiel de uitklap. vp/concreet.js zet deze
   klasse alleen zolang de sectie daadwerkelijk in beeld is. */
@media screen and (max-width: 767px) {
  html.vp-concreet-in-beeld .vp-omhoog-link[data-vp-omhoog],
  html.vp-concreet-in-beeld .vp-pilo-zwever[data-vp-pilo-zwever] {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

.vp-concreet-kop {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: var(--_spacing---spacing--32px);
}

.vp-concreet-kop h2 {
  max-width: 12ch;
  text-wrap: balance;
}

.vp-concreet-kop > p {
  max-width: 46ch;
  margin: 0;
  color: var(--vp-body);
  line-height: 1.55;
}

.vp-concreet-werkblad {
  margin-top: clamp(44px, 5vw, 64px);
  border: 1px solid var(--vp-lijn);
  border-radius: 24px;
  background: var(--vp-papier);
  overflow: hidden;
}

.vp-concreet-tools {
  display: grid;
  grid-template-columns: minmax(255px, .68fr) minmax(0, 1.32fr);
  grid-template-rows: repeat(8, minmax(72px, auto));
  min-width: 0;
}

.vp-tool {
  display: contents;
}

.vp-tool:nth-child(1) .vp-tool-knop { grid-row: 1; }
.vp-tool:nth-child(2) .vp-tool-knop { grid-row: 2; }
.vp-tool:nth-child(3) .vp-tool-knop { grid-row: 3; }
.vp-tool:nth-child(4) .vp-tool-knop { grid-row: 4; }
.vp-tool:nth-child(5) .vp-tool-knop { grid-row: 5; }
.vp-tool:nth-child(6) .vp-tool-knop { grid-row: 6; }
.vp-tool:nth-child(7) .vp-tool-knop { grid-row: 7; }
.vp-tool:nth-child(8) .vp-tool-knop { grid-row: 8; }

.vp-tool-knop {
  position: relative;
  grid-column: 1;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 72px;
  margin: 0;
  padding: 11px 20px;
  border: 0;
  border-bottom: 1px solid var(--vp-lijn);
  border-left: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--vp-navy);
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.vp-tool:last-child .vp-tool-knop {
  border-bottom: 0;
}

.vp-tool-knop:hover {
  background: var(--vp-kaart);
}

.vp-tool-knop.is-actief {
  border-left-color: var(--vp-accent-hover);
  background: var(--vp-kaart);
}

.vp-tool-knop:focus-visible {
  z-index: 3;
  outline: 3px solid var(--vp-accent-op-licht);
  outline-offset: -5px;
  box-shadow: none;
}

.vp-tool-nummer {
  color: var(--vp-accent-op-licht, #a5441a);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.vp-tool-naam {
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
}

.vp-tool-pijl {
  position: relative;
  width: 28px;
  height: 28px;
  border: 1px solid var(--vp-lijn);
  border-radius: 8px;
}

.vp-tool-pijl::before,
.vp-tool-pijl::after {
  position: absolute;
  top: 13px;
  left: 8px;
  width: 10px;
  height: 2px;
  background: currentColor;
  content: '';
  transition: transform .2s ease;
}

.vp-tool-pijl::after {
  transform: rotate(90deg);
}

.vp-tool-knop.is-actief .vp-tool-pijl::after {
  transform: rotate(0deg);
}

.vp-tool-paneel {
  grid-column: 2;
  grid-row: 1 / 9;
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr);
  row-gap: 24px;
  min-width: 0;
  min-height: 576px;
  padding: 34px 38px 30px;
  border-left: 1px solid var(--vp-lijn);
  background: var(--vp-kaart);
  animation: vpToolOpen .24s cubic-bezier(.16, 1, .3, 1) both;
}

.vp-tool-paneel[hidden] {
  display: none;
}

/* Alleen een volledig gestarte kiezer verbergt panelen. Zonder JavaScript, of
   als concreet.js halverwege faalt, blijven alle werkstromen leesbaar. */
html.w-mod-js [data-vp-tools][data-vp-tools-ready]
  .vp-tool-knop[aria-expanded="false"] + .vp-tool-paneel {
  display: none;
}

html:not(.w-mod-js) .vp-concreet-tools,
html:not(.w-mod-js) .vp-tool,
html.w-mod-js [data-vp-tools]:not([data-vp-tools-ready]),
html.w-mod-js [data-vp-tools]:not([data-vp-tools-ready]) .vp-tool {
  display: block;
}

html:not(.w-mod-js) .vp-tool-knop,
html.w-mod-js [data-vp-tools]:not([data-vp-tools-ready]) .vp-tool-knop {
  display: none;
}

html:not(.w-mod-js) .vp-tool-paneel,
html.w-mod-js [data-vp-tools]:not([data-vp-tools-ready]) .vp-tool-paneel {
  display: grid;
  min-height: 0;
  border-right: 0;
  border-bottom: 1px solid var(--vp-lijn);
  border-left: 0;
}

.vp-tool-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, .72fr);
  align-items: start;
  gap: 14px 28px;
}

.vp-tool-copy h3 {
  grid-column: 1 / -1;
  max-width: 20ch;
  font-size: clamp(24px, 2.25vw, 34px);
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
}

.vp-tool-acties {
  grid-column: 1 / -1 !important;
  justify-content: flex-start;
  width: 100%;
  margin-top: 6px;
}

.vp-tool-acties > .app-button {
  width: fit-content;
}

.vp-tool-copy > p {
  min-width: 0;
  margin: 0;
  color: var(--vp-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.vp-concreet-resultaat {
  min-width: 0;
  padding: 18px 19px 19px;
  border-left: 3px solid var(--vp-teal-donker);
  border-radius: 14px;
  background: var(--vp-papier);
  box-shadow: 0 18px 34px -30px
    color-mix(in srgb, var(--vp-ink) 45%, transparent);
}

.vp-concreet-resultaat span {
  display: block;
  margin-bottom: 7px;
  color: var(--vp-teal-tekst);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .035em;
}

.vp-concreet-resultaat strong {
  display: block;
  color: var(--vp-navy);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.vp-tool-beeld {
  position: relative;
  align-self: end;
  min-width: 0;
  min-height: 258px;
  margin-top: 0;
  border: 1px solid var(--vp-lijn);
  border-radius: 18px;
  background:
    radial-gradient(circle at 24% 17%, rgba(255, 255, 255, .96), transparent 27%),
    radial-gradient(circle at 80% 72%, color-mix(in srgb, var(--vp-teal) 8%, transparent), transparent 38%),
    linear-gradient(145deg, var(--vp-kaart), var(--vp-band));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 36px 62px -52px color-mix(in srgb, var(--vp-donker-top) 72%, transparent);
  overflow: hidden;
  isolation: isolate;
  perspective: 1050px;
}

.vp-g-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.vp-tool-beeld::before {
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .2), transparent 32% 73%, rgba(255, 255, 255, .12));
  content: '';
  pointer-events: none;
}

.vp-concreet-scene.vp-notariaat-card-beeld {
  display: block;
  width: 100%;
  min-height: 258px;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.vp-concreet-scene .vp-notariaat-scene {
  inset: 2% 4%;
}

.vp-concreet-scene .vp-notariaat-scene::after {
  box-shadow: none;
}

.vp-concreet-scene--mail .vp-ns-postbak {
  top: 57%;
  width: 64%;
  height: 51%;
  transform: translate3d(-50%, -50%, 30px) rotateX(39deg) rotateZ(-5deg);
}

.vp-concreet-sortering {
  position: absolute;
  z-index: 7;
  top: 17%;
  left: 10%;
  width: 30%;
  height: 50%;
  transform: translateZ(76px) rotateY(13deg) rotateZ(-7deg);
  transform-style: preserve-3d;
}

.vp-concreet-sortering i {
  position: absolute;
  width: 88%;
  height: 31%;
  border: 1px solid var(--vp-lijn);
  border-radius: 10px;
  background:
    linear-gradient(var(--vp-lijn), var(--vp-lijn)) 18px 13px / 48% 4px no-repeat,
    linear-gradient(var(--vp-lijn), var(--vp-lijn)) 18px 23px / 30% 4px no-repeat,
    var(--vp-kaart);
  box-shadow: -13px 21px 28px -20px var(--vp-ns-schaduw), inset 0 1px rgba(255, 255, 255, .9);
}

.vp-concreet-sortering i::after {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vp-navy);
  content: '';
}

.vp-concreet-sortering i:nth-child(1) { top: 0; transform: translateZ(34px); }
.vp-concreet-sortering i:nth-child(1)::after { background: var(--vp-accent-op-licht); box-shadow: 0 0 11px color-mix(in srgb, var(--vp-gloed) 36%, transparent); }
.vp-concreet-sortering i:nth-child(2) { top: 29%; left: 7%; transform: translateZ(20px); }
.vp-concreet-sortering i:nth-child(3) { top: 58%; left: 14%; transform: translateZ(8px); }
.vp-concreet-sortering i:nth-child(3)::after { background: var(--vp-teal); }

.vp-concreet-scene--order .vp-ns-bronstapel { left: 7%; top: 27%; width: 39%; height: 58%; }
.vp-concreet-scene--order .vp-ns-concept { left: auto; right: 8%; top: 20%; width: 43%; height: 62%; }
.vp-concreet-scene--order .vp-ns-akkoordzegel { right: 5%; bottom: 7%; width: 22%; border-width: 7px; }

.vp-concreet-route {
  position: absolute;
  z-index: 1;
  top: 51%;
  left: 43%;
  width: 17%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--vp-accent-op-licht), var(--vp-teal));
  box-shadow: 0 8px 18px -10px var(--vp-ns-schaduw);
  transform: translateZ(22px) rotate(-3deg);
}

.vp-concreet-route::after {
  position: absolute;
  top: -5px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-top: 4px solid var(--vp-teal);
  border-right: 4px solid var(--vp-teal);
  content: '';
  transform: rotate(45deg);
}

.vp-concreet-scene--factuur .vp-ns-verzendstuk { left: 8%; top: 22%; width: 42%; height: 63%; }
.vp-concreet-scene--factuur .vp-ns-veldenplaat { right: 7%; top: 25%; width: 42%; height: 59%; }

.vp-concreet-bedrag {
  position: absolute;
  right: 14%;
  bottom: 14%;
  width: 42%;
  height: 12%;
  border-radius: 5px;
  background: linear-gradient(145deg, var(--vp-accent-op-licht), var(--vp-accent-hover));
  box-shadow: -8px 12px 18px -13px var(--vp-ns-schaduw);
  transform: translateZ(18px);
}

.vp-concreet-scene--dossier .vp-ns-archief {
  left: 45%;
  top: 55%;
  width: 62%;
  height: 61%;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 13%;
  padding: 7% 9%;
  transform: translate3d(-50%, -50%, 30px) rotateX(31deg) rotateZ(-4deg);
}

.vp-concreet-scene--dossier .vp-ns-archief > div,
.vp-concreet-scene--dossier .vp-ns-archief > div:nth-child(2),
.vp-concreet-scene--dossier .vp-ns-archief > div:nth-child(3) {
  height: auto;
  margin: 0;
  padding: 5px 12px;
  transform: translateZ(26px);
}

.vp-concreet-scene--dossier .vp-ns-archief span { margin-bottom: 3px; }

.vp-concreet-ontbrekend,
.vp-concreet-vindplaats {
  position: absolute;
  z-index: 8;
  border: 2px dashed color-mix(in srgb, var(--vp-accent-op-licht) 72%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--vp-kaart) 92%, transparent);
  box-shadow: -18px 28px 38px -24px var(--vp-ns-schaduw), inset 0 1px rgba(255, 255, 255, .9);
  transform-style: preserve-3d;
}

.vp-concreet-ontbrekend {
  top: 19%;
  right: 8%;
  width: 27%;
  height: 47%;
  padding: 25px 14px;
  transform: translateZ(82px) rotateY(-14deg) rotateZ(5deg);
}

.vp-concreet-ontbrekend i {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--vp-accent-op-licht);
  box-shadow: 0 0 13px color-mix(in srgb, var(--vp-gloed) 42%, transparent);
}

.vp-concreet-ontbrekend span,
.vp-concreet-vindplaats span {
  display: block;
  height: 5px;
  margin-bottom: 16px;
  border-radius: 3px;
  background: var(--vp-lijn);
}

.vp-concreet-ontbrekend span:last-child { width: 61%; }

.vp-concreet-scene--controle .vp-ns-auditboek {
  left: 12%;
  top: 51%;
  width: 62%;
  height: 69%;
  transform: translateY(-50%) rotateX(39deg) rotateZ(-5deg);
}

.vp-concreet-scene--controle .vp-ns-akkoordzegel {
  right: 7%;
  bottom: 10%;
  width: 27%;
}

.vp-concreet-scene--controle .vp-ns-akkoordzegel span { top: 39%; }

.vp-concreet-scene--kennis .vp-ns-bronstapel { left: 7%; top: 24%; width: 49%; height: 64%; }
.vp-concreet-scene--kennis .vp-ns-loep { right: 9%; top: 17%; width: 36%; }

.vp-concreet-vindplaats {
  right: 5%;
  bottom: 8%;
  width: 31%;
  height: 29%;
  padding: 18px 13px 10px 32px;
  border-style: solid;
  border-color: var(--vp-lijn);
  transform: translateZ(88px) rotateY(-12deg) rotateZ(5deg);
}

.vp-concreet-vindplaats i {
  position: absolute;
  top: 18px;
  left: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vp-teal);
  box-shadow: 0 0 11px color-mix(in srgb, var(--vp-teal) 70%, transparent);
}

.vp-concreet-vindplaats span { margin-bottom: 10px; }
.vp-concreet-vindplaats span:last-child { width: 64%; background: var(--vp-accent-op-licht); }

.vp-concreet-scene--btw .vp-ns-veldenplaat {
  right: auto;
  left: 6%;
  top: 26%;
  width: 35%;
  height: 59%;
  transform: translateZ(48px) rotateX(9deg) rotateY(14deg) rotateZ(-5deg);
}

.vp-concreet-scene--btw .vp-ns-weegschaal { left: 66%; top: 49%; width: 57%; height: 65%; }

.vp-concreet-afwijking,
.vp-concreet-conflict {
  position: absolute;
  z-index: 8;
  height: 13px;
  border-radius: 7px;
  background: linear-gradient(145deg, var(--vp-accent-op-licht), var(--vp-accent-hover));
  box-shadow: 0 0 19px color-mix(in srgb, var(--vp-gloed) 22%, transparent), -10px 17px 24px -16px var(--vp-ns-schaduw);
  transform: translateZ(86px) rotate(5deg);
}

.vp-concreet-afwijking { right: 7%; bottom: 13%; width: 27%; }

.vp-concreet-scene--planning .vp-ns-kalender { left: 8%; top: 21%; width: 64%; height: 64%; }
.vp-concreet-scene--planning .vp-ns-klok { right: 6%; bottom: 9%; width: 31%; }
.vp-concreet-conflict { top: 42%; left: 43%; width: 26%; }

@media (prefers-reduced-motion: no-preference) {
  .vp-tool-paneel:not([hidden]) .vp-concreet-scene .vp-notariaat-scene > :not(.vp-ns-halo, .vp-ns-vloer) {
    animation: vpConcreetSceneIn 560ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .vp-tool-paneel:not([hidden]) .vp-concreet-scene .vp-notariaat-scene > :nth-child(n + 4) {
    animation-delay: 90ms;
  }
}

@keyframes vpConcreetSceneIn {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

/* Acht inhoudelijke miniaturen. Elke workflow heeft eigen silhouet en beweging. */
.vp-concreet-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.vp-cg-stage,
.vp-cg-stage * {
  box-sizing: border-box;
}

.vp-cg-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.vp-cg-stage > :not(.vp-cg-halo, .vp-cg-floor) {
  transform-style: preserve-3d;
}

.vp-cg-halo,
.vp-cg-floor {
  position: absolute;
  display: block;
  pointer-events: none;
}

.vp-cg-halo {
  top: 12%;
  left: 50%;
  width: 62%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--vp-teal) 15%, transparent), transparent 69%);
  filter: blur(2px);
  transform: translateX(-50%);
}

.vp-cg-floor {
  bottom: 5%;
  left: 50%;
  width: 67%;
  height: 11%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--vp-navy) 21%, transparent);
  filter: blur(9px);
  transform: translateX(-50%);
}

.vp-cg-stage i,
.vp-cg-stage b,
.vp-cg-stage strong {
  display: block;
  font-style: normal;
}

/* Mail: inkomend bericht valt in fysieke prioriteitssorteerder; concept komt op. */
.vp-cg-mail-sorter {
  position: absolute;
  z-index: 3;
  top: 35%;
  right: 12%;
  width: 57%;
  height: 48%;
  padding: 6% 5%;
  border: 1px solid color-mix(in srgb, var(--vp-navy) 78%, white);
  border-radius: 14px 14px 19px 19px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--vp-navy) 87%, white), var(--vp-navy));
  box-shadow: -25px 30px 35px -24px rgba(13, 37, 62, .52), inset 0 1px rgba(255, 255, 255, .2);
  transform: rotateX(55deg) rotateZ(-4deg) translateZ(20px);
}

.vp-cg-mail-sorter::before {
  position: absolute;
  top: -10px;
  left: 7%;
  width: 86%;
  height: 17px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--vp-navy) 76%, white);
  box-shadow: inset 0 -6px 8px rgba(5, 29, 53, .28);
  content: '';
  transform: translateZ(8px);
}

.vp-cg-mail-sorter span {
  position: relative;
  display: block;
  height: 22%;
  margin-bottom: 7%;
  border-radius: 5px;
  background: color-mix(in srgb, var(--vp-kaart) 96%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--vp-lijn) 72%, transparent);
}

.vp-cg-mail-sorter span::before {
  position: absolute;
  top: 50%;
  left: 6%;
  width: 33%;
  height: 4px;
  border-radius: 2px;
  background: var(--vp-lijn);
  content: '';
}

.vp-cg-mail-sorter span:first-child { border-left: 6px solid var(--vp-accent-op-licht); }
.vp-cg-mail-sorter span:nth-child(2) { border-left: 6px solid var(--vp-teal); }

.vp-cg-mail-in {
  position: absolute;
  z-index: 6;
  top: 25%;
  left: 8%;
  width: 31%;
  aspect-ratio: 1.62;
  border: 1px solid var(--vp-lijn);
  border-radius: 10px;
  background: var(--vp-kaart);
  box-shadow: -17px 24px 28px -19px rgba(13, 37, 62, .45), inset 0 1px white;
  transform: rotateY(17deg) rotateZ(8deg) translateZ(74px);
}

.vp-cg-mail-in::before,
.vp-cg-mail-in::after,
.vp-cg-mail-in i {
  position: absolute;
  inset: 0;
  content: '';
}

.vp-cg-mail-in::before { clip-path: polygon(0 0, 50% 58%, 100% 0); background: var(--vp-papier); }
.vp-cg-mail-in::after { clip-path: polygon(0 100%, 44% 51%, 50% 58%, 56% 51%, 100% 100%); background: color-mix(in srgb, var(--vp-band) 82%, white); }
.vp-cg-mail-in i { inset: 8px auto auto 10px; width: 9px; height: 9px; border-radius: 50%; background: var(--vp-accent-op-licht); box-shadow: 0 0 14px color-mix(in srgb, var(--vp-gloed) 45%, transparent); }

.vp-cg-mail-reply {
  position: absolute;
  z-index: 7;
  top: 9%;
  right: 17%;
  width: 27%;
  height: 43%;
  padding: 15% 12%;
  border: 1px solid var(--vp-lijn);
  border-radius: 10px;
  background: linear-gradient(155deg, white, var(--vp-kaart));
  box-shadow: -16px 24px 30px -19px rgba(13, 37, 62, .42);
  transform: rotateY(-14deg) rotateZ(4deg) translateZ(65px);
}

.vp-cg-mail-reply i { height: 5px; margin-bottom: 14%; border-radius: 2px; background: var(--vp-lijn); }
.vp-cg-mail-reply i:nth-child(2) { width: 76%; }
.vp-cg-mail-reply i:last-child { width: 49%; background: var(--vp-accent-op-licht); }

.vp-cg-signal {
  position: absolute;
  z-index: 9;
  top: 22%;
  right: 10%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vp-teal);
  box-shadow: 0 0 17px color-mix(in srgb, var(--vp-teal) 65%, transparent);
}

/* Orderinvoer: aanvraag door navy invoerpoort naar offerteboek. */
.vp-cg-order-source {
  position: absolute;
  z-index: 5;
  top: 27%;
  left: 7%;
  width: 28%;
  height: 48%;
  padding: 18% 14%;
  border: 1px solid var(--vp-lijn);
  border-radius: 9px;
  background: var(--vp-kaart);
  box-shadow: -18px 25px 30px -21px rgba(13, 37, 62, .46);
  transform: rotateY(18deg) rotateZ(-6deg) translateZ(52px);
}

.vp-cg-order-source::before { position: absolute; top: 12%; left: 14%; width: 18%; height: 9%; border-radius: 3px; background: var(--vp-accent-op-licht); content: ''; }
.vp-cg-order-source i { height: 5px; margin-bottom: 17%; border-radius: 2px; background: var(--vp-lijn); }
.vp-cg-order-source i:last-child { width: 64%; }

.vp-cg-order-machine {
  position: absolute;
  z-index: 6;
  top: 24%;
  left: 37%;
  width: 27%;
  height: 57%;
  border-radius: 17px 17px 12px 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--vp-navy) 79%, white), var(--vp-navy));
  box-shadow: -22px 29px 34px -22px rgba(13, 37, 62, .55), inset 0 1px rgba(255, 255, 255, .2);
  transform: rotateY(-7deg) translateZ(42px);
}

.vp-cg-order-machine::before { position: absolute; top: 15%; left: -7%; width: 114%; height: 21%; border-radius: 8px; background: #102f51; box-shadow: inset 0 8px 11px rgba(4, 18, 34, .4); content: ''; }
.vp-cg-order-machine span:first-child { position: absolute; top: 8%; right: 12%; width: 9px; height: 9px; border-radius: 50%; background: var(--vp-teal); box-shadow: 0 0 13px color-mix(in srgb, var(--vp-teal) 62%, transparent); }
.vp-cg-order-machine span:nth-child(2) { position: absolute; bottom: 12%; left: 13%; width: 74%; height: 24%; border-radius: 6px; background: color-mix(in srgb, var(--vp-kaart) 93%, transparent); transform: translateZ(11px); }
.vp-cg-order-machine b { position: absolute; right: -7%; bottom: 18%; width: 14%; height: 43%; border-radius: 4px; background: var(--vp-accent-op-licht); transform: translateZ(-7px); }

.vp-cg-order-book {
  position: absolute;
  z-index: 7;
  top: 24%;
  right: 6%;
  width: 28%;
  height: 53%;
  padding: 16% 13%;
  border: 1px solid var(--vp-lijn);
  border-left: 8px solid var(--vp-navy);
  border-radius: 7px 13px 13px 7px;
  background: linear-gradient(150deg, white, var(--vp-papier));
  box-shadow: -17px 25px 29px -19px rgba(13, 37, 62, .44), inset -7px -7px 0 var(--vp-band);
  transform: rotateY(-18deg) rotateZ(5deg) translateZ(66px);
}

.vp-cg-order-book i { height: 5px; margin-bottom: 16%; border-radius: 2px; background: var(--vp-lijn); }
.vp-cg-order-book i:nth-child(2) { width: 78%; }
.vp-cg-order-book i:nth-child(3) { width: 55%; }
.vp-cg-order-book strong { position: absolute; right: 12%; bottom: 11%; width: 44%; height: 13%; border-radius: 4px; background: var(--vp-accent-op-licht); }

.vp-cg-order-route { position: absolute; z-index: 2; top: 51%; left: 31%; width: 42%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--vp-accent-op-licht), var(--vp-teal)); box-shadow: 0 0 16px color-mix(in srgb, var(--vp-teal) 22%, transparent); transform: rotate(-2deg); }

/* Facturen: fysieke scanner met scanlijn; velden landen in boekingsplaat. */
.vp-cg-scanner {
  position: absolute;
  z-index: 4;
  top: 42%;
  left: 8%;
  width: 50%;
  height: 36%;
  border-radius: 14px 14px 20px 20px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--vp-navy) 83%, white), var(--vp-navy));
  box-shadow: -24px 31px 34px -22px rgba(13, 37, 62, .56), inset 0 1px rgba(255, 255, 255, .2);
  transform: rotateX(39deg) rotateZ(-5deg) translateZ(26px);
}

.vp-cg-scanner::after { position: absolute; right: 8%; bottom: 13%; width: 9px; height: 9px; border-radius: 50%; background: var(--vp-teal); box-shadow: 0 0 14px color-mix(in srgb, var(--vp-teal) 65%, transparent); content: ''; }

.vp-cg-invoice-sheet {
  position: absolute;
  z-index: 2;
  bottom: 31%;
  left: 9%;
  width: 73%;
  height: 118%;
  padding: 17% 14%;
  border: 1px solid var(--vp-lijn);
  border-radius: 8px;
  background: var(--vp-kaart);
  box-shadow: -14px 20px 26px -20px rgba(13, 37, 62, .44);
  transform: rotateX(-15deg) translateZ(31px);
}

.vp-cg-invoice-sheet i { height: 5px; margin-bottom: 13%; border-radius: 2px; background: var(--vp-lijn); }
.vp-cg-invoice-sheet i:nth-child(2) { width: 81%; }
.vp-cg-invoice-sheet i:nth-child(3) { width: 58%; }
.vp-cg-invoice-sheet b { position: absolute; right: 11%; bottom: 12%; width: 37%; height: 13%; border-radius: 4px; background: var(--vp-accent-op-licht); }

.vp-cg-scanbeam { position: absolute; z-index: 7; top: 17%; left: 8%; width: 76%; height: 5px; border-radius: 3px; background: var(--vp-accent-op-licht); box-shadow: 0 0 16px color-mix(in srgb, var(--vp-gloed) 48%, transparent); transform: translateZ(48px); }

.vp-cg-ledger {
  position: absolute;
  z-index: 6;
  top: 25%;
  right: 7%;
  width: 34%;
  height: 56%;
  padding: 15% 12%;
  border: 1px solid var(--vp-lijn);
  border-radius: 13px;
  background: linear-gradient(150deg, white, var(--vp-papier));
  box-shadow: -17px 26px 30px -20px rgba(13, 37, 62, .43);
  transform: rotateY(-17deg) rotateZ(4deg) translateZ(62px);
}

.vp-cg-ledger span { position: relative; height: 17%; margin-bottom: 9%; border-bottom: 2px solid var(--vp-lijn); }
.vp-cg-ledger span::before { position: absolute; bottom: 5px; left: 0; width: 8px; height: 8px; border-radius: 2px; background: var(--vp-navy); content: ''; }
.vp-cg-ledger i { position: absolute; right: 12%; width: 32%; height: 6px; border-radius: 3px; background: var(--vp-accent-op-licht); }
.vp-cg-ledger i:nth-of-type(1) { top: 22%; }
.vp-cg-ledger i:nth-of-type(2) { top: 48%; background: var(--vp-teal); }
.vp-cg-ledger i:nth-of-type(3) { top: 74%; }

.vp-cg-data-link { position: absolute; z-index: 5; top: 47%; left: 53%; width: 13%; height: 21%; }
.vp-cg-data-link i { width: 7px; height: 7px; margin: 0 auto 10px; border-radius: 50%; background: var(--vp-teal); box-shadow: 0 0 10px color-mix(in srgb, var(--vp-teal) 55%, transparent); }

/* Dossiers: archiefkast met open lade en zichtbaar leeg dossiervak. */
.vp-cg-cabinet {
  position: absolute;
  z-index: 4;
  top: 17%;
  left: 15%;
  width: 53%;
  height: 66%;
  padding: 7% 8%;
  border-radius: 16px 16px 12px 12px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--vp-navy) 80%, white), var(--vp-navy));
  box-shadow: -25px 31px 36px -23px rgba(13, 37, 62, .58), inset 0 1px rgba(255, 255, 255, .2);
  transform: rotateY(11deg) rotateZ(-3deg) translateZ(28px);
}

.vp-cg-cabinet > div { position: relative; height: 25%; margin-bottom: 7%; border-radius: 7px; background: var(--vp-kaart); box-shadow: inset 0 -4px 0 var(--vp-band); }
.vp-cg-cabinet > div i { position: absolute; top: 38%; left: 10%; width: 46%; height: 5px; border-radius: 2px; background: var(--vp-lijn); }
.vp-cg-cabinet > div span { position: absolute; top: 33%; right: 8%; width: 11px; height: 11px; border-radius: 50%; background: var(--vp-teal); }
.vp-cg-cabinet > div:nth-child(2) span { background: var(--vp-accent-op-licht); box-shadow: 0 0 12px color-mix(in srgb, var(--vp-gloed) 38%, transparent); }
.vp-cg-cabinet .vp-cg-drawer-open { transform: translate3d(13%, 8px, 44px); box-shadow: -15px 18px 23px -18px rgba(13, 37, 62, .6), inset 0 -10px 0 var(--vp-band); }

.vp-cg-file-loose {
  position: absolute;
  z-index: 8;
  top: 24%;
  right: 9%;
  width: 24%;
  height: 44%;
  padding: 18% 14%;
  border: 2px solid var(--vp-accent-op-licht);
  border-radius: 10px;
  background: linear-gradient(150deg, white, var(--vp-kaart));
  box-shadow: -17px 25px 30px -20px rgba(13, 37, 62, .45);
  transform: rotateY(-16deg) rotateZ(7deg) translateZ(72px);
}

.vp-cg-file-loose::before { position: absolute; top: -1px; left: 10%; width: 40%; height: 13%; border: 1px solid var(--vp-lijn); border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--vp-kaart); content: ''; transform: translateY(-70%); }
.vp-cg-file-loose i { height: 5px; margin-bottom: 18%; border-radius: 2px; background: var(--vp-lijn); }
.vp-cg-file-loose i:nth-child(2) { width: 64%; }
.vp-cg-file-loose b { position: absolute; right: 11%; bottom: 10%; width: 10px; height: 10px; border-radius: 50%; background: var(--vp-accent-op-licht); }
.vp-cg-file-gap { position: absolute; z-index: 7; top: 37%; left: 53%; width: 12%; height: 18%; border: 2px dashed var(--vp-accent-op-licht); border-radius: 7px; transform: rotateZ(-3deg) translateZ(66px); }

/* Controles: vaste controlebaan, vier punten, bronstroken en afwijking. */
.vp-cg-check-rail {
  position: absolute;
  z-index: 3;
  top: 21%;
  left: 24%;
  width: 63%;
  height: 61%;
  border: 12px solid var(--vp-navy);
  border-radius: 50%;
  box-shadow: -20px 28px 34px -24px rgba(13, 37, 62, .5), inset 0 0 0 2px rgba(255, 255, 255, .17);
  transform: rotateX(54deg) rotateZ(-8deg) translateZ(20px);
}

.vp-cg-check-rail span { position: absolute; width: 18px; height: 18px; border: 5px solid var(--vp-kaart); border-radius: 50%; background: var(--vp-teal); box-shadow: 0 0 0 3px var(--vp-navy), 0 0 15px color-mix(in srgb, var(--vp-teal) 45%, transparent); }
.vp-cg-check-rail span:first-child { top: -15px; left: 18%; }
.vp-cg-check-rail span:nth-child(2) { top: -10px; right: 16%; }
.vp-cg-check-rail span:nth-child(3) { right: 0; bottom: 2%; background: var(--vp-accent-op-licht); box-shadow: 0 0 0 3px var(--vp-navy), 0 0 16px color-mix(in srgb, var(--vp-gloed) 45%, transparent); }
.vp-cg-check-rail span:last-child { bottom: -15px; left: 20%; }

.vp-cg-check-sheet {
  position: absolute;
  z-index: 7;
  top: 22%;
  left: 34%;
  width: 29%;
  height: 55%;
  padding: 17% 14%;
  border: 1px solid var(--vp-lijn);
  border-radius: 12px;
  background: linear-gradient(155deg, white, var(--vp-papier));
  box-shadow: -18px 28px 31px -21px rgba(13, 37, 62, .43);
  transform: rotateY(-10deg) rotateZ(-4deg) translateZ(76px);
}

.vp-cg-check-sheet i { position: relative; height: 6px; margin-bottom: 19%; border-radius: 3px; background: var(--vp-lijn); }
.vp-cg-check-sheet i::before { position: absolute; top: -3px; left: -23%; width: 11px; height: 11px; border: 3px solid var(--vp-teal); border-radius: 50%; content: ''; }
.vp-cg-check-sheet i:nth-child(2)::before { border-color: var(--vp-accent-op-licht); }
.vp-cg-check-sheet i:nth-child(2) { width: 82%; }
.vp-cg-check-sheet i:nth-child(3) { width: 59%; }
.vp-cg-check-sheet b { position: absolute; top: 43%; right: -7%; width: 12px; height: 12px; border-radius: 50%; background: var(--vp-accent-op-licht); box-shadow: 0 0 15px color-mix(in srgb, var(--vp-gloed) 50%, transparent); }

.vp-cg-check-source { position: absolute; z-index: 6; top: 31%; left: 8%; width: 23%; height: 43%; transform: rotateY(16deg) translateZ(45px); }
.vp-cg-check-source i { height: 24%; margin-bottom: 9%; border: 1px solid color-mix(in srgb, var(--vp-navy) 28%, var(--vp-lijn)); border-radius: 7px; background: var(--vp-kaart); box-shadow: -8px 11px 16px -13px rgba(13, 37, 62, .45), inset 5px 0 var(--vp-band); }

/* Kennisvragen: bronbibliotheek, vraag, loep en exacte vindplaats. */
.vp-cg-library {
  position: absolute;
  z-index: 4;
  bottom: 17%;
  left: 7%;
  display: flex;
  align-items: flex-end;
  gap: 5%;
  width: 50%;
  height: 55%;
  padding: 6% 7% 8%;
  border-bottom: 15px solid var(--vp-navy);
  border-radius: 4px 4px 12px 12px;
  background: color-mix(in srgb, var(--vp-navy) 7%, transparent);
  box-shadow: -20px 26px 30px -24px rgba(13, 37, 62, .46);
  transform: rotateY(12deg) rotateZ(-4deg) translateZ(30px);
}

.vp-cg-library span { flex: 1; height: 73%; border: 1px solid color-mix(in srgb, var(--vp-navy) 26%, var(--vp-lijn)); border-radius: 4px 4px 2px 2px; background: var(--vp-kaart); box-shadow: inset -5px 0 var(--vp-band); }
.vp-cg-library span:nth-child(2) { height: 91%; background: color-mix(in srgb, var(--vp-navy) 89%, white); }
.vp-cg-library span:nth-child(3) { height: 81%; border-top: 9px solid var(--vp-accent-op-licht); }
.vp-cg-library span:nth-child(4) { height: 96%; }
.vp-cg-library span:nth-child(5) { height: 68%; background: color-mix(in srgb, var(--vp-teal) 25%, white); }

.vp-cg-question { position: absolute; z-index: 7; top: 13%; left: 11%; width: 31%; height: 25%; padding: 9% 12%; border: 1px solid var(--vp-lijn); border-radius: 12px 12px 12px 3px; background: white; box-shadow: -14px 19px 24px -18px rgba(13, 37, 62, .4); transform: rotateZ(-5deg) translateZ(73px); }
.vp-cg-question i { height: 5px; margin-bottom: 16%; border-radius: 2px; background: var(--vp-navy); }
.vp-cg-question i:last-child { width: 64%; background: var(--vp-accent-op-licht); }

.vp-cg-lens { position: absolute; z-index: 9; top: 19%; right: 12%; width: 27%; aspect-ratio: 1; border: 10px solid color-mix(in srgb, var(--vp-navy) 88%, white); border-radius: 50%; background: rgba(255, 255, 255, .29); box-shadow: -17px 24px 31px -20px rgba(13, 37, 62, .5), inset 0 0 20px rgba(255, 255, 255, .72); transform: rotateY(-13deg) translateZ(83px); }
.vp-cg-lens::after { position: absolute; right: -27%; bottom: -20%; width: 39%; height: 13px; border-radius: 4px; background: var(--vp-accent-op-licht); box-shadow: -6px 9px 14px -10px rgba(13, 37, 62, .5); content: ''; transform: rotate(48deg); transform-origin: left center; }
.vp-cg-lens span { position: absolute; top: 48%; left: 23%; width: 54%; height: 5px; border-radius: 3px; background: var(--vp-teal); box-shadow: 0 0 12px color-mix(in srgb, var(--vp-teal) 50%, transparent); }

.vp-cg-citation { position: absolute; z-index: 10; right: 8%; bottom: 11%; width: 27%; height: 23%; padding: 8% 10% 7% 18%; border-left: 6px solid var(--vp-accent-op-licht); border-radius: 5px 10px 10px 5px; background: var(--vp-kaart); box-shadow: -14px 20px 25px -17px rgba(13, 37, 62, .43); transform: rotateZ(5deg) translateZ(95px); }
.vp-cg-citation i { height: 5px; margin-bottom: 15%; border-radius: 2px; background: var(--vp-lijn); }
.vp-cg-citation i:nth-child(2) { width: 68%; }
.vp-cg-citation b { position: absolute; top: 39%; left: 8%; width: 8px; height: 8px; border-radius: 50%; background: var(--vp-teal); }

/* Btw: bronposten wegen tegen aangifte; ontbrekende post blijft buiten schaal. */
.vp-cg-tax-stack { position: absolute; z-index: 5; top: 30%; left: 6%; width: 30%; height: 51%; transform: rotateY(16deg) rotateZ(-5deg) translateZ(48px); }
.vp-cg-tax-stack span { position: absolute; width: 84%; height: 58%; border: 1px solid var(--vp-lijn); border-radius: 9px; background: linear-gradient(150deg, white, var(--vp-kaart)); box-shadow: -13px 18px 24px -18px rgba(13, 37, 62, .43); }
.vp-cg-tax-stack span::before { position: absolute; top: 26%; left: 15%; width: 53%; height: 5px; border-radius: 3px; background: var(--vp-lijn); box-shadow: 0 13px var(--vp-lijn), 0 26px var(--vp-accent-op-licht); content: ''; }
.vp-cg-tax-stack span:first-child { top: 28%; left: 13%; transform: translateZ(-18px); }
.vp-cg-tax-stack span:nth-child(2) { top: 14%; left: 7%; transform: translateZ(-8px); }

.vp-cg-tax-balance { position: absolute; z-index: 6; top: 22%; left: 39%; width: 52%; height: 58%; transform: rotateY(-8deg) translateZ(41px); }
.vp-cg-tax-balance > i { position: absolute; top: 9%; left: 50%; width: 12px; height: 66%; border-radius: 6px; background: var(--vp-navy); transform: translateX(-50%); }
.vp-cg-tax-balance > b { position: absolute; top: 22%; left: 9%; width: 82%; height: 10px; border-radius: 5px; background: var(--vp-navy); transform: rotate(4deg); transform-origin: center; }
.vp-cg-tax-balance > b::before { position: absolute; top: -8px; left: 50%; width: 25px; height: 25px; border: 7px solid var(--vp-navy); border-radius: 50%; background: var(--vp-kaart); content: ''; transform: translateX(-50%); }
.vp-cg-tax-balance > div { position: absolute; top: 35%; width: 36%; height: 33%; border: 5px solid var(--vp-navy); border-top: 0; border-radius: 0 0 50% 50%; background: color-mix(in srgb, var(--vp-kaart) 81%, transparent); box-shadow: 0 17px 22px -17px rgba(13, 37, 62, .45); }
.vp-cg-tax-balance > div:nth-of-type(1) { left: 0; transform: translateY(7px); }
.vp-cg-tax-balance > div:nth-of-type(2) { right: 0; }

.vp-cg-tax-missing { position: absolute; z-index: 9; top: 11%; right: 6%; width: 24%; height: 28%; padding: 9% 10%; border: 2px dashed var(--vp-accent-op-licht); border-radius: 10px; background: color-mix(in srgb, var(--vp-kaart) 91%, transparent); box-shadow: -13px 18px 23px -17px rgba(13, 37, 62, .4); transform: rotateZ(7deg) translateZ(78px); }
.vp-cg-tax-missing i { height: 5px; margin-bottom: 19%; border-radius: 2px; background: var(--vp-lijn); }
.vp-cg-tax-missing span { display: block; width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--vp-accent-op-licht); box-shadow: 0 0 13px color-mix(in srgb, var(--vp-gloed) 48%, transparent); }
.vp-cg-tax-total { position: absolute; z-index: 8; right: 12%; bottom: 11%; width: 37%; height: 13px; border-radius: 4px; background: linear-gradient(90deg, var(--vp-teal) 0 61%, var(--vp-accent-op-licht) 61%); box-shadow: -9px 14px 20px -15px rgba(13, 37, 62, .46); transform: rotateZ(2deg) translateZ(70px); }

/* Planning: 3D-weekblad met botsende afspraakblokken en zichtbare wijziging. */
.vp-cg-calendar { position: absolute; z-index: 4; top: 18%; left: 7%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7%; width: 63%; height: 63%; padding: 15% 8% 8%; border: 1px solid var(--vp-lijn); border-top: 17px solid var(--vp-navy); border-radius: 13px; background: linear-gradient(155deg, white, var(--vp-papier)); box-shadow: -22px 29px 34px -23px rgba(13, 37, 62, .47); transform: rotateX(38deg) rotateZ(-5deg) translateZ(31px); }
.vp-cg-calendar::before { position: absolute; top: -25px; left: 17%; width: 12px; height: 23px; border-radius: 6px; background: var(--vp-accent-op-licht); box-shadow: 168px 0 var(--vp-accent-op-licht); content: ''; }
.vp-cg-calendar i { position: absolute; top: 11%; width: 19%; height: 6px; border-radius: 3px; background: var(--vp-lijn); }
.vp-cg-calendar i:first-child { left: 10%; }
.vp-cg-calendar i:nth-child(2) { left: 36%; width: 44%; }
.vp-cg-calendar span { min-height: 0; border: 1px solid color-mix(in srgb, var(--vp-lijn) 82%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--vp-kaart) 72%, transparent); }
.vp-cg-calendar span:nth-of-type(2),
.vp-cg-calendar span:nth-of-type(5) { background: color-mix(in srgb, var(--vp-teal) 19%, white); }

.vp-cg-appointment { position: absolute; z-index: 7; height: 15px; border-radius: 4px; box-shadow: -8px 13px 18px -13px rgba(13, 37, 62, .5); transform: rotateZ(-5deg) translateZ(73px); }
.vp-cg-appointment--one { top: 42%; left: 22%; width: 29%; background: var(--vp-navy); }
.vp-cg-appointment--two { top: 48%; left: 38%; width: 24%; background: var(--vp-accent-op-licht); box-shadow: 0 0 17px color-mix(in srgb, var(--vp-gloed) 32%, transparent); }

.vp-cg-clock { position: absolute; z-index: 9; right: 7%; bottom: 10%; width: 31%; aspect-ratio: 1; border: 9px solid var(--vp-navy); border-radius: 50%; background: linear-gradient(145deg, white, var(--vp-kaart)); box-shadow: -17px 24px 30px -20px rgba(13, 37, 62, .48), inset 0 0 0 2px var(--vp-lijn); transform: rotateY(-13deg) translateZ(77px); }
.vp-cg-clock i,
.vp-cg-clock b { position: absolute; bottom: 50%; left: 50%; width: 5px; border-radius: 3px; background: var(--vp-accent-op-licht); transform-origin: 50% 100%; }
.vp-cg-clock i { height: 29%; transform: translateX(-50%) rotate(38deg); }
.vp-cg-clock b { height: 21%; background: var(--vp-navy); transform: translateX(-50%) rotate(123deg); }
.vp-cg-clock::after { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--vp-teal); content: ''; transform: translate(-50%, -50%); }
.vp-cg-plan-change { position: absolute; z-index: 10; top: 18%; right: 10%; width: 11px; height: 11px; border-radius: 50%; background: var(--vp-teal); box-shadow: 0 0 16px color-mix(in srgb, var(--vp-teal) 65%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .vp-tool-paneel:not([hidden]) .vp-cg-stage > :not(.vp-cg-halo, .vp-cg-floor) {
    animation: vpCgBuildIn 620ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .vp-tool-paneel:not([hidden]) .vp-cg-stage > :nth-child(n + 4) { animation-delay: 90ms; }
  .vp-tool-paneel:not([hidden]) .vp-cg-mail-in { animation-name: vpCgMailIn; }
  .vp-tool-paneel:not([hidden]) .vp-cg-mail-reply { animation-name: vpCgReplyIn; animation-delay: 150ms; }
  .vp-tool-paneel:not([hidden]) .vp-cg-scanbeam { animation: vpCgScan 1.35s 220ms cubic-bezier(.45, 0, .3, 1) both; }
  .vp-tool-paneel:not([hidden]) .vp-cg-drawer-open { animation: vpCgDrawer 650ms 130ms cubic-bezier(.16, 1, .3, 1) both; }
  .vp-tool-paneel:not([hidden]) .vp-cg-check-rail span:nth-child(3),
  .vp-tool-paneel:not([hidden]) .vp-cg-tax-missing,
  .vp-tool-paneel:not([hidden]) .vp-cg-appointment--two { animation: vpCgPulse 1.7s 420ms ease-in-out infinite; }
}

@keyframes vpCgBuildIn {
  from { opacity: 0; translate: 0 17px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes vpCgMailIn {
  from { opacity: 0; translate: -24px -12px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes vpCgReplyIn {
  from { opacity: 0; translate: 0 27px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes vpCgScan {
  0% { opacity: 0; translate: 0 -25px; }
  18%, 82% { opacity: 1; }
  100% { opacity: 0; translate: 0 58px; }
}

@keyframes vpCgDrawer {
  from { translate: -14% -8px; }
  to { translate: 0 0; }
}

@keyframes vpCgPulse {
  0%, 100% { opacity: .76; }
  50% { opacity: 1; }
}

/* Safari-veilige vlakke compositie. Geneste 3D-lagen plus blur konden als
   zwarte vlakken renderen. Schaduw, overlap en perspectivische rotatie blijven. */
.vp-tool-beeld {
  perspective: none;
}

.vp-cg-stage,
.vp-cg-stage * {
  transform-style: flat;
}

.vp-cg-halo {
  background: radial-gradient(circle, rgba(20, 151, 139, .14), rgba(20, 151, 139, 0) 69%);
  filter: none;
}

.vp-cg-floor {
  background: radial-gradient(ellipse, rgba(20, 43, 70, .23), rgba(20, 43, 70, 0) 70%);
  filter: none;
}

.vp-cg-mail-sorter { transform: rotate(-4deg); }
.vp-cg-mail-in { transform: rotate(8deg); }
.vp-cg-mail-reply { transform: rotate(4deg); }
.vp-cg-order-source { transform: rotate(-6deg); }
.vp-cg-order-machine { transform: rotate(-1deg); }
.vp-cg-order-book { transform: rotate(5deg); }
.vp-cg-scanner { transform: rotate(-5deg); }
.vp-cg-invoice-sheet { transform: rotate(1deg); }
.vp-cg-scanbeam { transform: none; }
.vp-cg-ledger { transform: rotate(4deg); }
.vp-cg-cabinet { transform: rotate(-3deg); }
.vp-cg-cabinet .vp-cg-drawer-open { transform: translate(13%, 8px); }
.vp-cg-file-loose { transform: rotate(7deg); }
.vp-cg-file-gap { transform: rotate(-3deg); }
.vp-cg-check-rail { transform: rotate(-8deg); }
.vp-cg-check-sheet { transform: rotate(-4deg); }
.vp-cg-check-source { transform: none; }
.vp-cg-library { transform: rotate(-4deg); }
.vp-cg-question { transform: rotate(-5deg); }
.vp-cg-lens { transform: none; }
.vp-cg-citation { transform: rotate(5deg); }
.vp-cg-tax-stack { transform: rotate(-5deg); }
.vp-cg-tax-stack span:first-child { transform: none; }
.vp-cg-tax-stack span:nth-child(2) { transform: none; }
.vp-cg-tax-balance { transform: none; }
.vp-cg-tax-missing { transform: rotate(7deg); }
.vp-cg-tax-total { transform: rotate(2deg); }
.vp-cg-calendar { transform: rotate(-5deg); }
.vp-cg-appointment { transform: rotate(-5deg); }
.vp-cg-clock { transform: none; }

/* Actuele homepage gebruikt inline SVG-scènes. Expliciete fills voorkomen
   zwarte browserdefaults wanneer een SVG-onderdeel geen eigen fill heeft. */
.vp-tool-beeld > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vp-tool-beeld > svg * {
  vector-effect: non-scaling-stroke;
}

.vp-g-grond {
  fill: url(#vpGFloor) rgba(18, 42, 70, .17);
}

.vp-g-halo {
  fill: url(#vpGHalo) rgba(31, 156, 143, .10);
}

.vp-g-platform {
  fill: url(#vpGNavy) #1e3a5f;
  stroke: #607792;
  stroke-width: 2.2;
}

.vp-g-papier,
.vp-g-kaart,
.vp-g-vlak {
  fill: url(#vpGPaper) #fffdf8;
  stroke: #d8d3c8;
  stroke-width: 2;
}

.vp-g-vlak {
  fill: url(#vpGCard) #f4f0e7;
}

.vp-g-achter {
  fill: url(#vpGNavyBack) #284b72;
  stroke: #59718a;
  stroke-width: 2;
}

.vp-g-vouw {
  fill: #d9eeea;
  stroke: #91c9c0;
  stroke-width: 1.5;
}

.vp-g-lijn,
.vp-g-as {
  fill: none;
  stroke: #918c81;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vp-g-as {
  stroke: #ddd7cb;
  stroke-width: 1.4;
}

.vp-g-spoor,
.vp-g-accentlijn {
  fill: none;
  stroke: #9a3514;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vp-g-frame {
  fill: none;
  stroke: #284d76;
  stroke-width: 8;
}

.vp-g-accentpunt,
.vp-g-accentvlak {
  fill: url(#vpGOrange) #9a3514;
}

.vp-g-tealvlak,
.vp-g-planning {
  fill: url(#vpGTeal) #159483;
}

.vp-g-check {
  fill: url(#vpGPaper) #fffdf8;
  stroke: #159483;
  stroke-width: 3;
}

.vp-g-checklijn {
  fill: none;
  stroke: #159483;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vp-g-ghost {
  fill: rgba(255, 253, 248, .78);
  stroke: #9a3514;
  stroke-width: 2;
  stroke-dasharray: 7 6;
}

.vp-g-navyvlak {
  fill: url(#vpGNavy) #1e3a5f;
}

.vp-g-papier,
.vp-g-kaart,
.vp-g-vlak {
  filter:
    drop-shadow(0 5px 0 rgba(177, 174, 166, .52))
    drop-shadow(-7px 12px 8px rgba(18, 42, 70, .17));
}

.vp-g-platform,
.vp-g-achter,
.vp-g-navyvlak {
  filter:
    drop-shadow(0 7px 0 rgba(10, 28, 47, .38))
    drop-shadow(-9px 16px 10px rgba(10, 28, 47, .21));
}

.vp-g-check,
.vp-g-frame,
.vp-g-accentvlak,
.vp-g-tealvlak,
.vp-g-planning {
  filter: drop-shadow(-4px 7px 5px rgba(18, 42, 70, .19));
}

.vp-tool-paneel:not([hidden]) .vp-tool-beeld > svg > g {
  filter:
    drop-shadow(-12px 22px 14px rgba(18, 42, 70, .18))
    drop-shadow(0 4px 2px rgba(18, 42, 70, .09));
}

@media (prefers-reduced-motion: no-preference) {
  .vp-tool-paneel:not([hidden]) .vp-tool-beeld > svg > g {
    animation: vpGraphicSvgIn 520ms cubic-bezier(.16, 1, .3, 1) both;
    transform-box: fill-box;
    transform-origin: center;
  }
}

@keyframes vpGraphicSvgIn {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}

/* Definitieve V6-scènes: gerenderde 3D-materialen met vaste beeldverhouding.

   De acht panelen staan alle acht in de HTML, want zonder JavaScript moeten ze
   alle acht leesbaar blijven (zie de w-mod-js-regels hierboven). concreet.js zet
   pas na het parsen hidden op de zeven inactieve panelen, en tegen die tijd
   stonden alle acht scènes al in de laadwachtrij: acht requests en 374 kB voor
   een sectie die op 6400 pixels begint.

   Daarom staat de bestandsnaam in een custom property. Een url() in een custom
   property haalt niets op zolang geen enkele regel hem uitleest. De regel die
   hem uitleest hangt aan data-vp-tools-ready, en concreet.js zet dat attribuut
   pas nadat hij de zeven inactieve panelen op hidden heeft gezet. Wat display
   none is, haalt zijn achtergrond niet op, dus blijft er een scène over in
   plaats van acht. Wisselt de bezoeker van werkstroom, dan laadt die scène op
   dat moment.

   Zonder JavaScript komt data-vp-tools-ready er nooit; de noscript-regel die de
   generator meelevert leest de property dan alsnog uit. */
.vp-tool-beeld {
  background-color: #f8f5ee;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

[data-vp-tools][data-vp-tools-ready] .vp-tool-beeld {
  background-image: var(--vp-scene);
}

.vp-tool[data-vp-module="mail"] .vp-tool-beeld {
  --vp-scene: url("../images/concreet-3d/mail.webp?v=20260904-1");
}

.vp-tool[data-vp-module="orderinvoer"] .vp-tool-beeld {
  --vp-scene: url("../images/concreet-3d/orderinvoer.webp?v=20260904-1");
}

.vp-tool[data-vp-module="facturen"] .vp-tool-beeld {
  --vp-scene: url("../images/concreet-3d/facturen.webp?v=20260904-1");
}

.vp-tool[data-vp-module="dossiers"] .vp-tool-beeld {
  --vp-scene: url("../images/concreet-3d/dossiers.webp?v=20260904-1");
}

.vp-tool[data-vp-module="controles"] .vp-tool-beeld {
  --vp-scene: url("../images/concreet-3d/controles.webp?v=20260904-1");
}

.vp-tool[data-vp-module="kennisvragen"] .vp-tool-beeld {
  --vp-scene: url("../images/concreet-3d/kennisvragen.webp?v=20260904-1");
}

.vp-tool[data-vp-module="btw-voorbereiding"] .vp-tool-beeld {
  --vp-scene: url("../images/concreet-3d/btw.webp?v=20260904-1");
}

.vp-tool[data-vp-module="planning"] .vp-tool-beeld {
  --vp-scene: url("../images/concreet-3d/planning.webp?v=20260904-1");
}

.vp-tool-beeld > svg {
  display: none;
}

.vp-concreet-eigen {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(300px, 1.45fr) minmax(236px, .9fr);
  align-items: start;
  gap: clamp(18px, 2.3vw, 28px);
  padding: clamp(28px, 4vw, 40px) clamp(28px, 4vw, 44px);
  border-top: 1px solid var(--vp-lijn);
  background: var(--vp-papier);
}

.vp-concreet-eigen h3 {
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.12;
}

.vp-concreet-eigen p {
  margin: 0;
  color: var(--vp-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
}

.vp-concreet-acties {
  display: grid;
  align-self: center;
  gap: 10px;
}

.vp-concreet-acties .app-button {
  box-sizing: border-box;
  width: 100%;
}

@keyframes vpToolOpen {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media screen and (max-width: 991px) {
  .vp-concreet-kop {
    gap: 24px;
  }

  .vp-concreet-kop > p {
    max-width: 680px;
  }

  .vp-concreet-werkblad {
    border-radius: 20px;
  }

  .vp-concreet-tools {
    grid-template-columns: minmax(226px, .72fr) minmax(0, 1.28fr);
  }

  .vp-tool-knop {
    grid-template-columns: 29px minmax(0, 1fr) 28px;
    gap: 9px;
    padding-inline: 15px;
  }

  .vp-tool-naam {
    font-size: 16px;
  }

  .vp-tool-paneel {
    row-gap: 20px;
    padding: 28px 24px 26px;
  }

  .vp-tool-copy {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .vp-tool-copy h3,
  .vp-concreet-resultaat {
    grid-column: auto;
  }

  .vp-concreet-resultaat {
    max-width: 330px;
  }

  .vp-concreet-eigen {
    grid-template-columns: minmax(150px, .65fr) minmax(0, 1.35fr);
    padding-inline: 32px;
  }

  .vp-concreet-acties {
    grid-column: 2;
  }
}

@media screen and (max-width: 767px) {
  .vp-concreet-werkblad {
    border-radius: 18px;
  }

  .vp-concreet-tools {
    display: block;
  }

  .vp-tool {
    display: block;
  }

  .vp-tool-knop {
    display: grid;
    min-height: 64px;
    padding: 10px 17px;
    border-bottom: 1px solid var(--vp-lijn);
  }

  .vp-tool:last-child .vp-tool-knop,
  .vp-tool-knop.is-actief {
    border-bottom-color: var(--vp-lijn);
  }

  .vp-tool-paneel {
    display: grid;
    row-gap: 0;
    min-height: 0;
    padding: 24px 20px 28px;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid var(--vp-lijn);
  }

  .vp-tool-paneel[hidden] {
    display: none;
  }

  .vp-tool-copy h3 {
    font-size: 26px;
  }

  .vp-concreet-resultaat {
    max-width: none;
    padding: 17px 18px 18px;
  }

  .vp-tool-beeld {
    order: -1;
    aspect-ratio: 16 / 9;
    min-height: 0;
    margin-top: 0;
    margin-bottom: 21px;
    border-radius: 14px;
    background-size: 120% auto;
  }

  .vp-tool[data-vp-module="kennisvragen"] .vp-tool-beeld,
  .vp-tool[data-vp-module="planning"] .vp-tool-beeld {
    background-size: 110% auto;
  }

  .vp-concreet-eigen {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 20px 28px;
  }

  .vp-concreet-acties {
    grid-column: auto;
    margin-top: 2px;
  }
}

@media screen and (max-width: 479px) {
  .vp-concreet-kop {
    gap: 20px;
  }

  .vp-concreet-kop > p,
  .vp-tool-copy > p,
  .vp-concreet-eigen p {
    overflow-wrap: anywhere;
  }

  .vp-tool-knop {
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 8px;
    padding-inline: 14px;
  }

  .vp-tool-naam {
    font-size: 15px;
  }

  .vp-tool-paneel {
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-tool-paneel {
    animation: none;
  }

  .vp-tool-pijl::before,
  .vp-tool-pijl::after {
    transition: none;
  }
}