/* basis: tokens, typografie, knoppen, logo; op elke pagina */
:root{
  --ground:#FCF5F3; --surface:#FFFFFF; --wash:#F6E9EC; --ink:#2B2442; --muted:#6E6580;
  --rose:#B94F72; --rose-soft:#F4D3DE; --sand:#D9A659; --mint:#7CCFC4; --line:#EADCE0;
  --shadow:0 18px 40px -18px rgba(43,36,66,.45);
  --display:"Gloock", Georgia, "Times New Roman", serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand:"Caveat", "Segoe Print", cursive;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#17152A; --surface:#211E37; --wash:#1D1A33; --ink:#F4ECF2; --muted:#B3A9C4;
    --rose:#F08FB0; --rose-soft:#4A2C45; --line:#37325A; --shadow:0 18px 40px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#17152A; --surface:#211E37; --wash:#1D1A33; --ink:#F4ECF2; --muted:#B3A9C4;
  --rose:#F08FB0; --rose-soft:#4A2C45; --line:#37325A; --shadow:0 18px 40px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;margin:0}
a{color:inherit}
canvas{display:block;width:100%;height:100%}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;text-wrap:balance;margin:0}
h2{font-size:clamp(2rem,4.5vw,3rem)}
h3{font-size:1.25rem}
p{margin:0}
.hand{font-family:var(--hand);font-size:1.5rem;color:var(--rose);line-height:1.1}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:999px;padding:.8rem 1.35rem;font:600 .95rem var(--body);cursor:pointer;text-decoration:none;transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.btn-primary{background:var(--ink);color:var(--ground)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-small{padding:.5rem .95rem;font-size:.85rem}

/* mockup ribbon */
.ribbon{background:var(--ink);color:var(--ground);font-size:.8rem;text-align:center;padding:.45rem 16px}
.logo{font-family:var(--display);font-size:1.45rem;text-decoration:none;white-space:nowrap}
.logo span{font-family:var(--hand);color:var(--rose);font-size:1.6rem;margin-left:.15rem}
.icon-btn{position:relative;display:inline-flex;align-items:center;gap:.45rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5rem .95rem;font:600 .9rem var(--body);color:var(--ink);cursor:pointer}
.badge{min-width:1.35rem;height:1.35rem;border-radius:999px;background:var(--rose);color:#fff;font-size:.75rem;display:inline-grid;place-items:center;padding-inline:.3rem}
/* taalwissel NL | EN */
.bar-rechts{display:flex;align-items:center;gap:.6rem}
.taalwissel{display:inline-flex;border:1px solid var(--line);border-radius:999px;background:var(--surface);padding:2px;font:600 .78rem var(--body);letter-spacing:.06em}
.taalwissel a,.taalwissel span{padding:.32rem .6rem;border-radius:999px;text-decoration:none;color:var(--muted);line-height:1}
.taalwissel a:hover{color:var(--ink)}
.taalwissel a:focus-visible{outline:3px solid var(--mint);outline-offset:1px}
.taalwissel [aria-current]{background:var(--ink);color:var(--ground)}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}