/* De demovideo: schermopname van het echte dashboard. Hoort bij /assets/js/demo.js. Staat in een eigen bestand
   sinds 21 september 2026, want de video staat op de homepage en op /demo. De homepage heeft de regels nog in zijn
   eigen stijlblok. */
/* DEMO: schermopname van het echte dashboard, één minuut. Speelt pas na een klik; het bestand laadt dan pas. */
section.block.demo { padding-top: 72px; }
.demo .block-head { margin-bottom: 28px; }
.demo-kader { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 10; border-radius: var(--r-l); overflow: hidden; background: var(--green); box-shadow: var(--shadow-float); border: 1px solid var(--line); }
.demo-kader video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--ground); }
.demo-start { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; background: transparent; display: flex; align-items: center; justify-content: center; }
.demo-start::before { content: ""; position: absolute; inset: 0; background: rgba(23, 32, 27, 0.10); transition: background 0.3s var(--ease-calm); }
.demo-start:hover::before, .demo-start:focus-visible::before { background: rgba(23, 32, 27, 0.18); }
.demo-start:focus-visible { outline: 3px solid var(--champagne); outline-offset: -3px; }
.demo-knop { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px 14px 16px; border-radius: var(--r-pill); background: var(--ground); color: var(--green); font: 600 1rem var(--font-ui); box-shadow: 0 10px 30px rgba(23, 32, 27, 0.25); transition: transform 0.3s var(--ease-calm); }
.demo-start:hover .demo-knop { transform: scale(1.04); }
.demo-knop .rond { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: var(--green-ink); }
.demo-knop .rond svg { margin-left: 3px; }
.demo-knop small { display: block; font-weight: 500; font-size: 0.8rem; color: var(--ink-3); }
.demo-kader.is-bezig .demo-start { display: none; }
.demo-kader.is-klaar .demo-start { display: flex; }
.demo-cap { margin-top: 14px; text-align: center; font-size: 0.8rem; color: var(--ink-3); }
@media (max-width: 640px) {
  section.block.demo { padding-top: 56px; }
  .demo-kader { border-radius: var(--r-m); }
  .demo-knop { padding: 10px 18px 10px 12px; font-size: 0.9rem; }
  .demo-knop .rond { width: 34px; height: 34px; }
}