/* Demo: balk bovenaan en de voorbeeldzinnen bij inspreken */
.demobalk{position:relative;z-index:16;background:#1F5F86;color:#FFFFFF;font-size:.84rem;padding:8px 16px;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between}
.demobalk b{font-weight:700}
.demobalk .demoknoppen{display:flex;gap:14px}
.demobalk a{color:#FFFFFF;font-weight:600;text-decoration:underline}
.top{top:0}
.demozinnen{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.demozinnen .btn{white-space:normal;text-align:left;justify-content:flex-start;min-height:44px;padding:10px 12px;font-weight:500;line-height:1.35}
/* Welkomstkaart */
.demowelkom{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.demokaart{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;width:min(520px,100%);max-height:100%;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:12px}
.demokaart h2{font-size:1.25rem}
.demokaart p{margin:0;color:var(--muted);font-size:.92rem}
.demokaart ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px}
.demokaart li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px}
.demokaart li+li{border-top:1px solid var(--line)}
.demokaart li div{display:flex;flex-direction:column;gap:2px;font-size:.88rem}
.demokaart li span{color:var(--muted)}
.demokaart .demonoot{font-size:.84rem}
.demokaart>.btn{align-self:flex-start}
/* Nieuwe indeling (v2): de demobalk loopt over de inhoud, naast het menu links */
html.v2 .demobalk{margin-left:var(--zijbalk);position:sticky;top:0;background:#1E3A8A}
@media (max-width:800px){html.v2 .demobalk{margin-left:0;position:relative}}