/* B012 Kleuren via variabelen, B013 Rustig palet, B014 Ronde hoeken,
   B019 Knoppen buiten de schermrand, B020 Minder op mobiel, B023 Beperk beweging
   kit/gedeeld/set.css, versie 1.1, 29-10-2026 (accentInk: tekstkleur op accentknop)
   Instellingen hieronder. Verder niets aanpassen in een project.
   B015 Browserbalk kleurt mee: zet in de <head>
   <meta name="theme-color" content="(dezelfde kleur als --light)"> */

:root{
  /* Kleuren: kleur.js overschrijft alleen deze vijf */
  --dark:#231F20;        /* tekst en koppen, zwart uit het logo */
  --light:#F7F4EF;       /* achtergrond */
  --accent:#946C1E;      /* accent, goud uit het logo (#AF8126) iets donkerder voor leesbare knoppen */
  --accentText:#7A5816;  /* accent als tekstkleur, leesbaar op --light */
  --soft:#FFFFFF;        /* vlakken en kaarten */

  /* Vorm en maat */
  --rond:16px;           /* hoeken van kaarten en vlakken, minimaal 8px */
  --rond-knop:999px;     /* pilvormige knoppen */
  --breed:1200px;        /* maximale breedte van de inhoud */
  --rand:24px;           /* zijmarge op een telefoon */

  /* Letters */
  --font-tekst:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-kop:"Fraunces",Georgia,serif;
  --regel:1.65;

  /* Afgeleid, niet aanpassen */
  --lijn:color-mix(in srgb,var(--dark) 14%,transparent);
  --zacht-tekst:color-mix(in srgb,var(--dark) 70%,var(--light));
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--light);color:var(--dark);font-family:var(--font-tekst);line-height:var(--regel)}
h1,h2,h3,h4{font-family:var(--font-kop);line-height:1.2}
img,video{display:block;max-width:100%;height:auto;border-radius:var(--rond)}
a{color:var(--accentText)}
.bs-wrap{max-width:var(--breed);margin:0 auto;padding:0 var(--rand)}
.bs-kaart{background:var(--soft);border-radius:var(--rond);padding:24px}

/* Pilknoppen (B008) */
.bs-pil{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;
  border-radius:var(--rond-knop);border:1.5px solid currentColor;background:none;color:inherit;
  font:inherit;font-size:15px;text-decoration:none;cursor:pointer}
.bs-pil.vol{background:var(--dark);border-color:var(--dark);color:var(--light)}
.bs-pil.accent{background:var(--accent);border-color:var(--accent);color:var(--accentInk,#fff)}

/* Opening volgt de schermhoogte (B018) */
.bs-opening{min-height:100vh;min-height:100svh}

/* Knoppen blijven binnen de veilige rand van de iPhone (B019) */
.bs-vast-onder{bottom:max(16px,env(safe-area-inset-bottom))}

/* Minder op mobiel (B020): verberg wat op een telefoon niet nodig is */
@media (max-width:600px){.bs-alleen-groot{display:none!important}}
@media (min-width:601px){.bs-alleen-klein{display:none!important}}

/* Beperk beweging respecteren (B023) */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}