/* Morris-huisstijl, gedeeld door alle pagina's van de ontwerp-demo.
   De bovenbalk en de voet zijn altijd nacht: de kleuren komen uit de
   nachttokens in module.css. Alles hier is paginageraamte. */
.demo-nav,.demo-footer{
  --f-display:'Syne',sans-serif;--f-body:'DM Sans',sans-serif;
  font-family:var(--f-body);font-feature-settings:'tnum';color:var(--tekst)
}
.demo-wrap{max-width:1220px;margin-inline:auto;padding-inline:var(--m-ruimte-32);box-sizing:border-box}
.demo-nav *,.demo-footer *{box-sizing:border-box}
.demo-nav{position:sticky;top:0;z-index:var(--m-laag-nav);background:var(--vlak);border-bottom:1px solid var(--lijn)}
.demo-nav .demo-wrap{display:flex;align-items:center;gap:var(--m-ruimte-32);min-height:82px}
.demo-brand{display:inline-flex;flex:none;gap:var(--m-ruimte-4);font:800 22px/1 var(--f-display);letter-spacing:var(--m-spatie-kop);color:var(--tekst);text-decoration:none;min-height:44px;align-items:center}
.demo-brand .demo-dot{width:8px;height:8px;border-radius:var(--m-radius-rond);background:var(--amber);align-self:flex-start;margin-top:var(--m-ruimte-12)}
.demo-nav-links{display:flex;align-items:center;gap:var(--m-ruimte-24);margin-left:auto}
.demo-nav-links a{font-size:var(--m-tekst-l);color:var(--tekst2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.demo-nav-links a:hover,.demo-nav-links a[aria-current=page]{color:var(--tekst)}
.demo-nav-links a[aria-current=page]{text-decoration:underline;text-underline-offset:7px;text-decoration-color:var(--amber)}
/* Modules klapt open onder de muis of met Tab. De lijst komt uit
   scripts/site-gegevens.mjs; site-bouwen.mjs zet hem in elke pagina. In het
   telefoonmenu blijft Modules een gewone link naar de tegels. */
.navmenu{display:contents}
.navmenu-lijst{display:none}
@media(min-width:801px){
  /* geraamte: het uitklapmenu van de bovenbalk, alleen als de links in de balk staan */
  .navmenu{display:block;position:relative}
  .navmenu > a::after{content:"";width:6px;height:6px;margin:calc(-1 * var(--m-ruimte-4)) 0 0 var(--m-ruimte-8);border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
  .navmenu:hover > a,.navmenu:focus-within > a{color:var(--tekst)}
  .navmenu-lijst{display:grid;grid-template-columns:repeat(2,auto);gap:var(--m-ruimte-2) var(--m-ruimte-4);
    position:absolute;top:calc(100% + 27px);left:50%;transform:translateX(-50%);padding:var(--m-ruimte-8);
    background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--m-radius-m);
    visibility:hidden;opacity:0;transition:opacity var(--m-duur-snel),visibility var(--m-duur-snel)}
  /* brug over de ruimte tussen balk en lijst: de muis laat onderweg niet los */
  .navmenu-lijst::before{content:"";position:absolute;left:0;right:0;top:-28px;height:28px}
  .navmenu:hover .navmenu-lijst,.navmenu:focus-within .navmenu-lijst{visibility:visible;opacity:1}
  /* Escape (site-paginas.js) sluit de lijst zonder de muis te verplaatsen */
  .navmenu.dicht .navmenu-lijst{visibility:hidden;opacity:0}
  /* alleen met muis of toetsenbord te openen, dus compacter dan de 44px van een aanraakvlak */
  .navmenu-lijst a{min-height:38px;padding:0 var(--m-ruimte-12);border-radius:var(--m-radius-s);color:var(--tekst);white-space:nowrap}
  .navmenu-lijst a:hover{background:color-mix(in srgb,var(--tekst) 8%,transparent)}
  .navmenu-lijst svg{flex:none;width:17px;height:17px;margin-right:var(--m-ruimte-10);color:var(--amber)}
}
.demo-service-links{display:flex;gap:var(--m-ruimte-16);margin-left:var(--m-ruimte-12);padding-left:var(--m-ruimte-24);border-left:1px solid var(--lijn)}
.demo-service-links a{color:var(--stil);font-size:var(--m-tekst-s)}
.demo-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--m-ruimte-10);min-height:46px;padding:var(--m-ruimte-12) var(--m-ruimte-20);box-sizing:border-box;border:1px solid var(--lijn);border-radius:var(--m-radius-s);font:600 14px/1.4 var(--f-body,'DM Sans',sans-serif);text-decoration:none;cursor:pointer;background:transparent;color:var(--tekst);text-align:center}
.demo-button-primary{background:var(--amber);color:var(--vlak);border-color:var(--amber)}
.demo-button-primary:hover{background:var(--amber-hover);border-color:var(--amber-hover)}
.demo-menu-toggle{display:none;min-width:44px}
.demo-nav-links .demo-mobile-only{display:none}
.demo-nav :focus-visible,.demo-footer :focus-visible{outline:3px solid var(--tekst);outline-offset:4px}
.demo-footer{background:var(--vlak);padding:var(--m-ruimte-48) 0 var(--m-ruimte-24);border-top:1px solid var(--lijn)}
.demo-footer-top{display:grid;grid-template-columns:1.6fr 2fr 1fr 1fr 1fr;gap:var(--m-ruimte-32);padding-bottom:var(--m-ruimte-32)}
.demo-footer .voet-modules ul{grid-template-columns:1fr 1fr;column-gap:var(--m-ruimte-20)}
.demo-footer [aria-current="page"]{color:var(--tekst);font-weight:600}
.demo-footer p{font-size:var(--m-tekst-l);color:var(--stil);max-width:31ch;line-height:var(--m-regel-lang);margin-top:var(--m-ruimte-12)}
.demo-footer h3{font:600 14px var(--f-body);color:var(--tekst);margin:0 0 var(--m-ruimte-16)}
.demo-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--m-ruimte-10)}
.demo-footer a{font-size:var(--m-tekst-m);color:var(--tekst2);text-decoration:none}
.demo-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.demo-footer .demo-brand{font-size:var(--m-tekst-3xl);color:var(--tekst)}
.demo-footer-bottom{border-top:1px solid var(--lijn);padding-top:var(--m-ruimte-20);display:flex;gap:var(--m-ruimte-12) var(--m-ruimte-24);flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:var(--m-tekst-s);color:var(--stil)}
.demo-footer-bottom div{display:flex;flex-wrap:wrap;gap:var(--m-ruimte-16)}
.demo-footer-bottom a{font-size:var(--m-tekst-s);color:var(--stil);text-decoration:underline;text-underline-offset:3px}
.demo-skip{position:fixed;z-index:var(--m-laag-tip);left:16px;top:8px;transform:translateY(-150%);padding:var(--m-ruimte-12) var(--m-ruimte-16);background:var(--kaart);color:var(--tekst);border:2px solid currentColor;border-radius:var(--m-radius-s);font-family:var(--f-body)}
.demo-skip:focus{transform:none}
@media(max-width:1100px){/* geraamte: de bovenbalk wordt compacter */.demo-service-links{display:none}.demo-nav .demo-wrap{gap:var(--m-ruimte-20)}.demo-nav-links{gap:var(--m-ruimte-20)}}
@media(max-width:800px){
  /* geraamte: de bovenbalk klapt in, de voet gaat naar twee kolommen */
  .demo-wrap{padding-inline:var(--m-ruimte-24)}
  .demo-nav .demo-wrap{min-height:70px;gap:var(--m-ruimte-12);position:relative}
  .demo-menu-toggle{display:inline-flex;margin-left:auto;padding:var(--m-ruimte-10) var(--m-ruimte-12)}
  .demo-nav-cta{font-size:var(--m-tekst-m);padding:var(--m-ruimte-10) var(--m-ruimte-12)}
  .demo-brand{font-size:var(--m-tekst-2xl)}
  .demo-brand .demo-dot{width:7px;height:7px;margin-top:var(--m-ruimte-12)}
  .demo-nav-links{position:absolute;top:calc(100% - 1px);left:0;right:0;margin:0;padding:var(--m-ruimte-12) var(--m-ruimte-24) var(--m-ruimte-20);background:var(--vlak);border-bottom:1px solid var(--lijn);display:grid;grid-template-columns:1fr 1fr;gap:var(--m-ruimte-4) var(--m-ruimte-16)}
  .demo-menu-toggle[aria-expanded=false] + .demo-nav-links{display:none}
  .demo-nav-links .demo-mobile-only{display:inline-flex}
  .demo-footer-top{grid-template-columns:1fr 1fr;gap:var(--m-ruimte-24)}
  .demo-footer-top > .voet-modules{grid-column:1/-1}
}
@media(max-width:430px){
  /* geraamte: bovenbalk en voet op een smalle telefoon */
  .demo-nav .demo-wrap{padding-inline:var(--m-ruimte-16);gap:var(--m-ruimte-8)}
  .demo-nav-cta{max-width:103px;line-height:var(--m-regel-kop)}
  .demo-footer-top{grid-template-columns:1fr 1fr}
  .demo-footer-top > :first-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}