/* Alleen voor de online demo: een klein label dat laat zien dat dit een ontwerpconcept
   met voorbeeldinhoud is, met een link terug naar het overzicht. Het verschijnt pas na het
   eerste scherm (zie demo.js). Weg uit het echte thema. */
.demo {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .9rem .55rem .7rem;
  border-radius: 99px;
  background: rgba(30, 30, 30, .88);
  color: #f5f3f0;
  font: 600 12px/1.2 "Montserrat", system-ui, sans-serif;
  letter-spacing: .02em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(245, 243, 240, .14) inset;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  translate: 0 .6rem;
  transition: background .2s, opacity .3s, translate .3s, visibility 0s .3s;
}
.demo.is-zichtbaar { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.demo:hover { background: #1e1e1e; }
.demo:focus-visible { outline: 2px solid #b8873a; outline-offset: 2px; }
.demo svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; rotate: 180deg; }
.demo span { font-weight: 500; opacity: .7; }
.menu-open .demo { display: none; }