.demo-start{width:100%;max-width:var(--breedte-raster);margin:var(--ruimte-8) auto 0;aspect-ratio:16/9;isolation:isolate;border-radius:var(--radius-motief-s) 0 var(--radius-motief-s) 0;background:var(--navy);box-shadow:var(--hoogte-3);position:relative;overflow:hidden}.demo-start[hidden]{display:none}.demo-start__beeld{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.demo-start:after{content:"";z-index:1;pointer-events:none;background:radial-gradient(48% 46% at 50% 52%,#001a4073 0%,#001a4026 70%,#001a4000 100%);position:absolute;inset:0}.demo-start__knop{z-index:2;border-radius:var(--radius-pil);background:var(--blauw);min-height:56px;color:var(--wit);font:inherit;font-size:var(--tekst-m);white-space:nowrap;cursor:pointer;box-shadow:0 0 0 3px var(--navy), 5px 6px 0 3px var(--navy);transition:transform var(--overgang), box-shadow var(--overgang);border:0;align-items:center;gap:12px;padding:12px 26px 12px 14px;font-weight:700;display:inline-flex;position:absolute;top:50%;left:50%;translate:-50% -50%}.demo-start__knop:hover{box-shadow:0 0 0 3px var(--navy), 7px 8px 0 3px var(--navy);transform:translate(-2px,-2px)}.demo-start__knop:active{box-shadow:0 0 0 3px var(--navy), 1px 1px 0 3px var(--navy);transform:translate(3px,4px)}.demo-start__knop:focus-visible{outline:3px solid var(--wit);outline-offset:4px}.demo-start__knop{--sk-maat:42px}.demo-start__knop .startknop__rond{margin:-5px 0 -5px -6px}.demo-start--film{border-radius:var(--film-radius-venster,20px);box-shadow:var(--film-venster,var(--hoogte-3));font-family:var(--film-letter,inherit);margin-top:8px}@media (width<=600px){.demo-start{aspect-ratio:4/5;border-radius:var(--radius-motief-s) 0 var(--radius-motief-s) 0}.demo-start--film{border-radius:16px}.demo-start__knop{min-height:52px;padding:10px 22px 10px 18px}}@media (prefers-reduced-motion:reduce){.demo-start__knop{transition:none}.demo-start__knop:hover,.demo-start__knop:active{transform:none}}.demo{gap:var(--ruimte-6);max-width:var(--breedte-raster);margin:var(--ruimte-8) auto 0;text-align:left;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start;display:grid}.demo[hidden]{display:none}.demo__kolom{top:calc(var(--kop-hoogte,72px) + var(--ruimte-5));min-width:0;position:sticky}.demo__ruimte{border-radius:var(--radius-motief-s) 0 var(--radius-motief-s) 0;min-width:0;box-shadow:var(--hoogte-3);isolation:isolate;position:relative;overflow:hidden}.demo__still{aspect-ratio:16/11;object-fit:cover;width:100%;height:auto;display:block}.demo__ruimte .demo-laag.demo-laag{z-index:2;opacity:0;pointer-events:none;touch-action:pan-y pinch-zoom;cursor:grab;width:auto;height:auto;transition:opacity .6s;position:absolute;inset:0}.demo__ruimte .demo-laag.is-geladen{opacity:1;pointer-events:auto}.demo-laag.is-slepend{cursor:grabbing}.demo-laag,.demo-laag .pnlm-render-container,.demo-laag .pnlm-dragfix{touch-action:pan-y pinch-zoom!important}.demo__ruimte .demo-laag.demo-laag{background:var(--navy)}.demo-laag .pnlm-load-box,.demo-laag .pnlm-about-msg{display:none!important}.demo-stip-basis{cursor:pointer;width:30px;height:30px}.demo-stip{position:absolute}.demo-stip__punt{background:color-mix(in srgb, var(--navy) 55%, transparent);border:2px solid var(--wit);box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-op-donker) 45%, transparent), 0 2px 10px #001a4066;transition:transform var(--overgang), background var(--overgang);border-radius:50%;position:absolute;inset:0}.demo-stip__punt:after{content:"";background:var(--accent-op-donker);border-radius:50%;position:absolute;inset:7px}.demo-stip[data-stand=vrij] .demo-stip__punt:after{background:var(--accent-op-donker)}.demo-stip[data-stand=bezet] .demo-stip__punt:after{background:var(--bezet)}.demo-stip[data-stand=bezet] .demo-stip__punt{box-shadow:0 2px 10px #001a4066}.demo-stip:hover .demo-stip__punt,.demo-stip.is-gekozen .demo-stip__punt{background:var(--navy);transform:scale(1.18)}.demo-stip__naam{white-space:nowrap;padding:var(--ruimte-1) var(--ruimte-3);border-radius:var(--radius-pil);background:color-mix(in srgb, var(--navy) 88%, transparent);color:var(--wit);font-size:var(--tekst-xs);opacity:0;transition:opacity var(--overgang);pointer-events:none;font-weight:600;position:absolute;bottom:calc(100% + 8px);left:50%;translate:-50%}.demo-stip:hover .demo-stip__naam,.demo-stip.is-gekozen .demo-stip__naam{opacity:1}@media (prefers-reduced-motion:no-preference){.demo-stip.is-gekozen .demo-stip__punt{animation:1.8s ease-out infinite demo-puls}@keyframes demo-puls{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-op-donker) 70%, transparent), 0 2px 10px #001a4066}to{box-shadow:0 0 0 16px #0000,0 2px 10px #001a4066}}}.demo__paneel{--kleur-titel:var(--navy);--tekst:#001a40b0;--tekst-zacht:#001a40a3;--accent:#005ad8;--rand:#001a401c;color:var(--tekst);background:var(--wit);border-radius:var(--radius-motief-s) 0 var(--radius-motief-s) 0;padding:var(--ruimte-6);gap:var(--ruimte-3);box-shadow:var(--hoogte-3);min-width:0;display:grid}.demo__paneel p{max-width:none;margin:0}.demo__zaak{font-size:var(--tekst-s);color:var(--kleur-titel);gap:var(--ruimte-2);align-items:center;font-weight:600;display:flex}.demo__pil{font-size:var(--tekst-xs);letter-spacing:.08em;text-transform:uppercase;padding:2px var(--ruimte-2);border-radius:var(--radius-pil);background:var(--vlak);color:var(--accent);border:1px solid var(--rand)}.demo__kop{font-size:var(--titel-5);font-weight:600;line-height:var(--lh-kort);color:var(--kleur-titel);margin:0}.demo__lood,.demo__uitleg{font-size:var(--tekst-s);line-height:var(--lh-kaart)}.demo__uitleg{color:var(--tekst-zacht);border-top:1px solid var(--rand);padding-top:var(--ruimte-3)}.demo__verkennen,.demo__fout{font-size:var(--tekst-s);padding:var(--ruimte-3);border-radius:var(--radius);background:var(--let-op-vlak);color:var(--let-op-tekst)}.demo__melding:empty{display:none}.demo__melding{font-size:var(--tekst-s);color:var(--kleur-titel);padding:var(--ruimte-3);border-radius:var(--radius);background:var(--vlak);font-weight:600}.demo__statisch{gap:var(--ruimte-2);font-size:var(--tekst-s);margin:0;padding:0;list-style:none;display:grid}.demo__statisch li{align-items:baseline;gap:var(--ruimte-3);display:flex}.demo__statisch li:before{content:"";background:var(--accent);border-radius:2px 0;flex:none;width:8px;height:8px;transform:translateY(-2px)}.demo__zonderjs{font-size:var(--tekst-s);color:var(--tekst-zacht)}.demo.is-actief .demo__zonderjs,.demo__turnstile:empty{display:none}.demo-kop,.demo-veld__label{font-size:var(--tekst-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--tekst-zacht);margin:0;font-weight:600}.demo-kies,.demo-velden,.demo-veld{gap:var(--ruimte-3);display:grid}.demo-velden{padding-top:var(--ruimte-2)}.demo-velden:focus{outline:none}.demo-bronnen{gap:var(--ruimte-2);margin:0;padding:0;list-style:none;display:grid}.demo-bronnen--raster{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}.demo-bron{justify-content:space-between;align-items:baseline;gap:var(--ruimte-3);width:100%;padding:var(--ruimte-3) var(--ruimte-4);border:1px solid var(--rand);border-radius:var(--radius);background:var(--wit);color:var(--kleur-titel);font:inherit;font-size:var(--tekst-s);text-align:left;cursor:pointer;transition:border-color var(--overgang), background var(--overgang);font-weight:500;display:flex}.demo-bron:hover:not(:disabled){border-color:var(--accent)}.demo-bron[aria-pressed=true]{border-color:var(--accent);background:var(--vlak);box-shadow:inset 0 0 0 1px var(--accent)}.demo-bron:disabled{opacity:.55;cursor:not-allowed}.demo-bron__waar{font-size:var(--tekst-xs);color:var(--tekst-zacht);white-space:nowrap;font-weight:400}.demo-keuzes{gap:var(--ruimte-2);flex-wrap:wrap;display:flex}.demo-keuze{min-height:40px;padding:var(--ruimte-2) var(--ruimte-3);border:1px solid var(--rand);border-radius:var(--radius-pil);background:var(--wit);color:var(--kleur-titel);font:inherit;font-size:var(--tekst-s);cursor:pointer;font-variant-numeric:tabular-nums;justify-items:center;gap:1px;font-weight:500;display:inline-grid}.demo-keuze:hover:not(:disabled){border-color:var(--accent)}.demo-keuze[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:var(--wit)}.demo-keuze:disabled{color:#001a4059;cursor:not-allowed;background:var(--vlak);text-decoration:line-through}.demo-keuze__extra{font-size:var(--tekst-xs);opacity:.8;font-weight:400;text-decoration:none}.demo-knop{min-height:44px;padding:var(--ruimte-3) var(--ruimte-5);border-radius:var(--radius-pil);background:var(--blauw);color:var(--wit);font:inherit;cursor:pointer;transition:background var(--overgang);border:0;justify-self:start;font-weight:600;text-decoration:none}.demo-knop:hover:not(:disabled){background:var(--blauw-donker)}.demo-knop:disabled{cursor:not-allowed;background:#b8c2d1}.demo-knop--klein{min-height:36px;padding:var(--ruimte-2) var(--ruimte-4);font-size:var(--tekst-s)}.demo-knop--tweede{background:var(--wit);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.demo-knop--tweede:hover:not(:disabled){background:var(--vlak)}.demo-knop--download{align-items:center;display:inline-flex}.demo-link{font:inherit;font-size:var(--tekst-s);color:var(--accent);text-underline-offset:.2em;cursor:pointer;background:0 0;border:0;padding:0;font-weight:500;text-decoration:underline}.demo-link:disabled{color:var(--tekst-zacht);cursor:not-allowed}.demo-leeg,.demo-voorraad{font-size:var(--tekst-s);color:var(--tekst-zacht)}.demo :is(button,a,input):focus-visible{outline:3px solid var(--accent);outline-offset:2px}.demo-jouw{gap:var(--ruimte-2);display:grid}.demo-jouw:empty{display:none}.demo-jouw__kaart{gap:var(--ruimte-1);padding:var(--ruimte-4);border-radius:var(--radius);background:var(--vlak);border:1px solid var(--rand);display:grid}.demo-jouw__kaart:focus{outline:3px solid var(--accent);outline-offset:2px}.demo-jouw__titel{color:var(--kleur-titel);font-weight:600;font-size:var(--tekst-s)}.demo-jouw__wanneer,.demo-jouw__code{font-size:var(--tekst-s)}.demo-jouw__code strong{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--kleur-titel)}.demo-jouw__acties{gap:var(--ruimte-4);flex-wrap:wrap;align-items:center;display:flex;margin-top:var(--ruimte-2)!important}.demo-menu{margin:0;padding:0;list-style:none;display:grid}.demo-menu__regel{justify-content:space-between;align-items:center;gap:var(--ruimte-3);padding:var(--ruimte-2) 0;border-bottom:1px solid var(--rand);font-size:var(--tekst-s);display:flex}.demo-stapper{align-items:center;gap:var(--ruimte-2);display:inline-flex}.demo-stapper__knop{border:1px solid var(--rand);background:var(--wit);width:32px;height:32px;color:var(--kleur-titel);font:inherit;cursor:pointer;border-radius:50%;font-weight:600}.demo-stapper__knop:disabled{opacity:.4;cursor:not-allowed}.demo-stapper__aantal{text-align:center;font-variant-numeric:tabular-nums;min-width:1.5ch;color:var(--kleur-titel);font-weight:600}.demo-scherm{gap:var(--ruimte-3);margin-top:var(--ruimte-3);padding:var(--ruimte-4);border-radius:var(--radius);background:var(--navy);color:var(--tekst-op-donker);display:grid}.demo-scherm__kop{font-size:var(--tekst-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-op-donker);font-weight:600}.demo-scherm__lijst{gap:var(--ruimte-2);max-height:20rem;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.demo-bon{padding:var(--ruimte-3);border-radius:var(--radius-klein);font-size:var(--tekst-s);background:#ffffff12;gap:2px;display:grid}.demo-bon.is-klaar{opacity:.55}.demo-bon__kop{color:var(--wit);justify-content:space-between;gap:var(--ruimte-3);font-weight:600;display:flex}.demo-bon__tijd{color:var(--tekst-zacht-op-donker);font-weight:400;font-size:var(--tekst-xs)}.demo-bon .demo-link{color:var(--accent-op-donker);justify-self:start}.demo-bon__klaar{color:var(--accent-op-donker)}.demo-scherm .demo-leeg{color:var(--tekst-zacht-op-donker)}.demo-zoek{width:100%;min-height:44px;padding:var(--ruimte-2) var(--ruimte-4);border:1px solid var(--rand-sterk);border-radius:var(--radius-pil);font:inherit;color:var(--kleur-titel);background:var(--wit)}.demo-beelden{gap:var(--ruimte-3);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.demo-beeld{gap:var(--ruimte-1);display:grid}.demo-beeld img{border-radius:var(--radius-klein);width:100%;height:auto;display:block}@media (width<=900px){.demo{gap:var(--ruimte-4);grid-template-columns:1fr}.demo__kolom{position:static}.demo__still{aspect-ratio:4/3}.demo__paneel{padding:var(--ruimte-5)}}