/* De balk onderaan elke demo. Hij hoort er te staan: een bezoeker moet in
   één oogopslag zien dat dit een voorbeeld is en wie het gebouwd heeft.
   Daarom donker en smal, altijd in beeld, maar nooit over de knoppen heen. */
.demobalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #0A0D16; color: #99A3BC;
  border-top: 1px solid #1E2637;
  font-family: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: .82rem; line-height: 1.4;
  padding: 10px max(14px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .28);
}
.demobalk-stip {
  width: 8px; height: 8px; border-radius: 50%; background: #5B8CFF; flex: none;
  box-shadow: 0 0 0 3px rgba(91, 140, 255, .18);
}
.demobalk b { color: #E8ECF7; font-weight: 600; }
.demobalk-tekst { flex: 1 1 260px; min-width: 0; }
.demobalk a { color: #5B8CFF; text-decoration: none; font-weight: 600; }
.demobalk a:hover { text-decoration: underline; }
.demobalk-knop {
  flex: none; cursor: pointer; font: inherit; font-weight: 600;
  background: transparent; color: #99A3BC;
  border: 1px solid #303B55; border-radius: 999px; padding: 6px 14px;
  transition: color .15s ease, border-color .15s ease;
}
.demobalk-knop:hover { color: #E8ECF7; border-color: #5B8CFF; }
.demobalk-knop:disabled { opacity: .5; cursor: progress; }

/* zodat de balk nooit de laatste regel van de pagina afdekt */
body { padding-bottom: 76px; }
@media (max-width: 560px) { body { padding-bottom: 104px; } }