/* Opmaak van de browserdemo. Apart bestand omdat zowel de EJS-partial als de
   statische homepage hem gebruikt, en twee kopieen gaan altijd uit elkaar lopen. */
.demo-blok{border:1px solid rgba(15,23,42,.1);border-radius:14px;padding:22px;text-align:center;
  background:#fff;max-width:420px;margin:24px auto}
.demo-kop{font-size:13.5px;color:#57607A;margin-bottom:16px;display:flex;align-items:center;
  justify-content:center;gap:8px;flex-wrap:wrap}
.demo-stip{width:8px;height:8px;border-radius:100px;background:#0A9B76;flex-shrink:0}
.demo-knop{width:92px;height:92px;border-radius:100px;border:1px solid rgba(0,85,255,.25);
  background:rgba(0,85,255,.06);color:#0055FF;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;margin:0 auto;font-family:inherit;
  font-size:11px;font-weight:700;transition:.18s}
.demo-knop:hover{background:rgba(0,85,255,.11)}
.demo-knop.bezig{background:#0055FF;color:#fff;border-color:#0055FF;
  animation:demo-puls 1.6s ease-in-out infinite}
@keyframes demo-puls{0%,100%{box-shadow:0 0 0 0 rgba(0,85,255,.35)}50%{box-shadow:0 0 0 12px rgba(0,85,255,0)}}
.demo-stand{font-size:13px;color:#57607A;margin-top:14px;min-height:20px}
.demo-stand.demo-live{color:#0A9B76;font-weight:600}
.demo-stand.demo-uit{color:#DC2626}
/* Met .demo-blok ervoor, anders wint .hero p van de homepage (0,1,1 tegen
   0,1,0) en blijft deze regel grijs. */
.demo-blok .demo-klein{font-size:11.5px;color:#8A92A6;margin-top:14px;line-height:1.6}
.demo-blok .demo-klein a{color:#0055FF;font-weight:600}
/* GEEN donkere-modus-regel hier. Dit bestand was het ENIGE op de hele site met
   een prefers-color-scheme-blok, een restant van voor de overstap naar het lichte
   thema. Gevolg: op een telefoon in donkere modus werd alleen dit ene blok zwart,
   midden in een verder lichte pagina, met tekstkleuren die niet meedraaiden. Komt
   er ooit een echt donker thema, dan hoort dat sitebreed en niet in dit bestand. */