/* BytesNel — publieke site.
 *
 * Vervangt marketing.css. Alles met het voorvoegsel bn- zodat het niet botst
 * met het dashboard (style.css) of het klantportaal (lova.css).
 *
 * Kleuren: diep teal als merkkleur, helder teal als accent, lavendel werkvlak.
 * Letters: Inter voor tekst, JetBrains Mono voor kleine labels — hetzelfde
 * uitgangspunt als het dashboard, zodat site en systeem bij elkaar horen.
 */

/* ============================================================ tokens */
:root {
  --teal: #0d5c58;
  --teal-donker: #0a403d;
  --teal-licht: #e4f4f1;
  --accent: #14b8a6;
  --op-accent: #052e2b;
  --accent-licht: #e3faf5;

  --vlak: #eff0fb;
  --kaart: #ffffff;
  --zacht: #f5f6fd;
  --laag: #f1f2fd;
  --vak: #e5e7f7;

  --ink: #0f172a;
  --ink-2: #334155;
  --grijs: #64748b;
  --rand: #dcdff3;

  --goed: #059669;
  --waarschuwing: #b45309;

  --kop: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  --breed: 84rem;
  --rond: 12px;
  --rond-l: 16px;
  --schaduw: 0 1px 2px rgba(15, 23, 42, .05);
  --schaduw-m: 0 4px 16px rgba(15, 23, 42, .07);
  --schaduw-l: 0 12px 40px rgba(15, 23, 42, .10);
  --soepel: cubic-bezier(.32, .72, 0, 1);
}

/* ============================================================ basis */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5.25rem; }

body.bn {
  margin: 0;
  background: var(--vlak);
  color: var(--ink);
  font-family: var(--kop);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--teal); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

.bn-schuil {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.bn-veilig-onder { padding-bottom: env(safe-area-inset-bottom, 0px); }
.bn-veilig-boven { padding-top: env(safe-area-inset-top, 0px); }

/* ============================================================ layout */
.bn-breed { max-width: var(--breed); margin: 0 auto; padding-inline: 20px; }
@media (min-width: 640px) { .bn-breed { padding-inline: 32px; } }
@media (min-width: 1024px) { .bn-breed { padding-inline: 48px; } }

/* Alleen boven en onder. Stond hier `padding: 48px 0`, en omdat deze regel ná
   .bn-breed komt, zette die de zijkanten op 0 op elk element met beide klassen —
   dertien pagina's, waar de tekst daardoor tegen de rand van het scherm stond. */
.bn-sectie { padding-block: 48px; }
@media (min-width: 1024px) { .bn-sectie { padding-block: 64px; } }

.bn-sectie--vlak { background: var(--laag); border-block: 1px solid var(--rand); }

.bn-stapel { display: flex; flex-direction: column; }
.bn-stapel-s { gap: 8px; } .bn-stapel-m { gap: 16px; }
.bn-stapel-l { gap: 24px; } .bn-stapel-xl { gap: 40px; }

.bn-rooster { display: grid; gap: 12px; }
@media (min-width: 640px) { .bn-rooster--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .bn-rooster--3 { grid-template-columns: repeat(3, 1fr); }
  .bn-rooster--4 { grid-template-columns: repeat(4, 1fr); }
  .bn-rooster--5 { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .bn-rooster--3, .bn-rooster--4, .bn-rooster--5 { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================ typografie */
.bn-h1, .bn-h2, .bn-h3 { margin: 0; text-wrap: balance; letter-spacing: -.02em; }

.bn-h1 { font-size: clamp(2rem, 1.45rem + 2.6vw, 3.4rem); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; }
.bn-h2 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2.35rem); line-height: 1.16; font-weight: 700; }
.bn-h3 { font-size: 1.06rem; line-height: 1.35; font-weight: 700; letter-spacing: -.01em; }

.bn-lead { margin: 0; font-size: clamp(.97rem, .92rem + .3vw, 1.15rem); color: var(--ink-2); max-width: 54ch; }
.bn-tekst { margin: 0; color: var(--ink-2); }
.bn-klein { margin: 0; font-size: .84rem; color: var(--grijs); }

/* Kleine hoofdletterlabels. Monospace zet ze apart van de lopende tekst. */
.bn-label {
  font-family: var(--mono);
  font-size: .69rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--teal);
}
.bn-label--grijs { color: var(--grijs); }
.bn-cijfer { font-variant-numeric: tabular-nums; }

/* ============================================================ knoppen */
.bn-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px; border: 0; border-radius: var(--rond);
  font: inherit; font-size: .93rem; font-weight: 700; text-decoration: none;
  cursor: pointer; transition: background-color .18s ease, transform .12s ease;
}
.bn-knop:active { transform: scale(.98); }
.bn-knop--primair { background: var(--teal); color: #fff; box-shadow: 0 2px 8px rgba(13, 92, 88, .22); }
.bn-knop--primair:hover { background: var(--teal-donker); }
.bn-knop--accent { background: var(--accent); color: var(--op-accent); box-shadow: 0 2px 8px rgba(20, 184, 166, .26); }
.bn-knop--accent:hover { background: #0fa596; }
.bn-knop--stil { background: var(--vak); color: var(--ink); }
.bn-knop--stil:hover { background: var(--rand); }
.bn-knop--rand { background: var(--kaart); color: var(--ink); border: 1px solid var(--rand); }
.bn-knop--vol { width: 100%; }
.bn-knop--klein { height: 38px; padding: 0 16px; font-size: .85rem; }
.bn-knop--rond { border-radius: 999px; }

.bn-tekstlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .9rem; font-weight: 700; color: var(--teal); text-decoration: none;
}
.bn-tekstlink:hover { text-decoration: underline; }

/* ============================================================ kaarten */
.bn-kaart {
  background: var(--kaart); border-radius: var(--rond-l); padding: 22px;
  box-shadow: var(--schaduw); display: flex; flex-direction: column; gap: 10px;
}
.bn-kaart--klik { text-decoration: none; color: inherit; transition: box-shadow .18s ease, transform .18s ease; }
.bn-kaart--klik:hover { box-shadow: var(--schaduw-m); transform: translateY(-2px); }
.bn-kaart--uit { box-shadow: var(--schaduw-l); }
.bn-kaart--accent { box-shadow: var(--schaduw-m); outline: 2px solid rgba(20, 184, 166, .28); }

.bn-icoonvak {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center;
  background: var(--teal-licht); color: var(--teal); flex: 0 0 auto;
}
.bn-icoonvak--accent { background: var(--accent-licht); color: #0f766e; }
.bn-icoonvak svg { width: 22px; height: 22px; }

.bn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 6px; background: var(--zacht);
  font-size: .74rem; font-weight: 600; color: var(--ink-2);
}
.bn-chip--goed { background: #ecfdf5; color: #047857; }
.bn-chip--accent { background: var(--accent-licht); color: #0f766e; }
.bn-chiprij { display: flex; flex-wrap: wrap; gap: 6px; }

.bn-lijst { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.bn-lijst li { display: flex; gap: 10px; align-items: flex-start; }
.bn-lijst svg { flex: 0 0 auto; margin-top: 3px; width: 18px; height: 18px; color: var(--goed); }

/* ============================================================ kop en navigatie */
.bn-kop {
  position: fixed; inset: 0 0 auto; z-index: 50;
  background: rgba(239, 240, 251, .88); backdrop-filter: blur(14px);
  box-shadow: 0 1px 8px rgba(15, 23, 42, .05);
}
.bn-kop-binnen {
  max-width: var(--breed); margin: 0 auto; height: 64px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* Zelfde stappen als .bn-breed, zodat het logo recht boven de tekst blijft staan. */
@media (min-width: 640px) { .bn-kop-binnen { padding: 0 32px; } }
@media (min-width: 1024px) { .bn-kop-binnen { padding: 0 48px; } }

.bn-merk { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.bn-merk-teken {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--teal); color: #fff; box-shadow: 0 2px 4px rgba(13, 92, 88, .22);
}
.bn-merk-teken svg { width: 20px; height: 20px; }
.bn-merk-naam { display: flex; flex-direction: column; line-height: 1; }
.bn-merk-naam b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.bn-merk-naam span { margin-top: 3px; font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .09em; color: var(--grijs); }

.bn-hoofdnav { display: none; align-items: center; gap: 2px; }
@media (min-width: 1024px) { .bn-hoofdnav { display: flex; } }
.bn-hoofdnav a {
  padding: 8px 12px; border-radius: 8px; text-decoration: none;
  font-size: .89rem; font-weight: 600; color: var(--ink-2); transition: background-color .16s ease;
}
.bn-hoofdnav a:hover { background: var(--vak); }
.bn-hoofdnav a.actief { color: var(--teal); font-weight: 700; }

.bn-menuknop {
  width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--vak);
  color: var(--ink); display: grid; place-items: center; cursor: pointer;
  transition: transform .12s ease;
}
.bn-menuknop:active { transform: scale(.95); }

/* ============================================================ menupaneel */
.bn-waas {
  position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, .4);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.bn-waas.open { opacity: 1; pointer-events: auto; }

.bn-paneel {
  position: fixed; top: 0; right: 0; z-index: 70; height: 100%;
  width: min(86%, 380px); background: var(--kaart);
  box-shadow: -8px 0 40px rgba(15, 23, 42, .18);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s var(--soepel);
}
.bn-paneel.open { transform: translateX(0); }

.bn-paneel-kop {
  height: 64px; padding: 0 20px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--rand);
}
.bn-paneel-kop b { font-size: .95rem; }

.bn-paneel-lijst { flex: 1 1 auto; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 20px; }
.bn-paneel-groep { display: flex; flex-direction: column; gap: 2px; }
.bn-paneel-groep > .bn-label { padding: 0 8px 4px; }

.bn-menu-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border-radius: 9px; text-decoration: none; color: var(--ink);
  font-size: .93rem; font-weight: 600; transition: background-color .16s ease;
}
.bn-menu-item:hover { background: var(--zacht); }
.bn-menu-item svg { width: 20px; height: 20px; color: var(--teal); flex: 0 0 auto; }
.bn-menu-item--stil svg { color: var(--grijs); }

.bn-paneel-voet {
  flex: 0 0 auto; border-top: 1px solid var(--rand); background: var(--zacht);
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

/* --- uitklapbare groep in het menu ---
   De hoogte wordt in pixels gezet door JavaScript, zodat de overgang naar de
   echte inhoudshoogte loopt in plaats van naar een geraden maximum. */
.bn-groep-kop {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 8px;
  border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font: inherit; font-size: .93rem; font-weight: 600; color: var(--ink); text-align: left;
  transition: background-color .2s ease, color .2s ease;
}
.bn-groep-kop:hover { background: var(--zacht); }
.bn-groep-kop > svg:first-child { width: 20px; height: 20px; color: var(--teal); flex: 0 0 auto; }
.bn-groep-kop .bn-groep-naam { flex: 1 1 auto; }
.bn-groep-pijl { width: 18px; height: 18px; color: var(--grijs); transition: transform .3s var(--soepel); }

.bn-groep.open > .bn-groep-kop { background: var(--teal-licht); color: var(--teal); }
.bn-groep.open .bn-groep-pijl { transform: rotate(180deg); }

.bn-groep-vak { height: 0; overflow: hidden; transition: height .32s var(--soepel); }
.bn-groep-inhoud { display: flex; flex-direction: column; padding: 2px 8px 6px 40px; }
.bn-groep-inhoud a {
  padding: 8px 0; font-size: .87rem; color: var(--ink-2); text-decoration: none;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .24s ease, transform .3s var(--soepel), color .16s ease;
}
.bn-groep-inhoud a:hover { color: var(--teal); }
.bn-groep.open .bn-groep-inhoud a {
  opacity: 1; transform: none;
  transition-delay: calc(var(--i, 0) * 38ms + 60ms);
}

/* ============================================================ onderbalk (mobiel) */
.bn-onderbalk {
  position: fixed; inset: auto 0 0; z-index: 50;
  background: rgba(239, 240, 251, .93); backdrop-filter: blur(14px);
  box-shadow: 0 -1px 12px rgba(15, 23, 42, .06);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 1024px) { .bn-onderbalk { display: none; } }
.bn-onderbalk-binnen { display: flex; justify-content: space-around; align-items: center; height: 68px; padding: 0 4px; }
.bn-onderbalk a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 56px; min-height: 44px; text-decoration: none;
  color: var(--grijs); font-size: .69rem; font-weight: 600; transition: color .16s ease;
}
.bn-onderbalk svg { width: 21px; height: 21px; }
.bn-onderbalk a.actief { color: var(--teal); font-weight: 700; }

/* ============================================================ hoofdvlak */
.bn-hoofd { padding-top: 64px; }
/* Ruimte voor de vaste onderbalk op telefoon en tablet. Die stond als
   padding-bottom op .bn-hoofd, maar de footer staat ná </main>: de ruimte werd
   een leeg vlak bóven de footer, en de onderste regel van de footer (©) viel
   alsnog onder de balk. Op de body geldt hij voor alles wat onderaan staat. */
@media (max-width: 1023px) {
  body.bn { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================ hero */
.bn-hero { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .bn-hero { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

.bn-hero-pil {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 5px 13px; border-radius: 999px; background: var(--teal-licht);
}
.bn-hero-pil .stip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(20, 184, 166, .5); animation: bn-puls 2.4s ease-out infinite;
}
@keyframes bn-puls {
  0% { box-shadow: 0 0 0 0 rgba(20, 184, 166, .45); }
  70% { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0); }
  100% { box-shadow: 0 0 0 0 rgba(20, 184, 166, 0); }
}

.bn-usp {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 11px 14px; border-radius: var(--rond); background: var(--zacht);
}
.bn-usp span { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.bn-usp svg { width: 16px; height: 16px; color: var(--teal); }
.bn-usp .punt { color: var(--rand); }

/* ============================================================ dashboardvenster */
.bn-venster { border: 1px solid var(--rand); border-radius: var(--rond-l); background: var(--kaart); box-shadow: var(--schaduw-l); overflow: hidden; }
.bn-venster-balk {
  height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between;
  background: var(--zacht); border-bottom: 1px solid var(--rand);
}
.bn-venster-balk .naam { display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 700; }
.bn-venster-balk .naam svg { width: 18px; height: 18px; color: var(--teal); }
.bn-venster-balk .naam em { font-style: normal; font-weight: 500; color: var(--grijs); }
.bn-venster-merk {
  font-family: var(--mono); font-size: .62rem; font-weight: 700; letter-spacing: .07em;
  padding: 3px 8px; border-radius: 999px; background: var(--vak); color: var(--grijs);
}
.bn-venster-binnen { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.bn-meter { display: flex; align-items: flex-end; justify-content: space-between; }
.bn-meter b { font-size: 2.1rem; line-height: 1; font-weight: 800; }
.bn-periode {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--vak); color: var(--grijs); font-size: .7rem; font-weight: 700;
}
.bn-periode svg { width: 14px; height: 14px; }

.bn-grafiek { position: relative; height: 128px; overflow: hidden; }
.bn-grafiek svg { display: block; width: 100%; height: 100%; }
.bn-grafiek-punt {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3px rgba(20, 184, 166, .22);
}

.bn-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bn-mini div { padding: 10px; border-radius: 10px; background: var(--zacht); display: flex; flex-direction: column; align-items: center; }
.bn-mini b { font-size: 1.05rem; font-weight: 700; color: var(--teal); }
.bn-mini b.goed { color: var(--goed); }
.bn-mini b.let { color: var(--waarschuwing); }
.bn-mini span { font-size: .69rem; font-weight: 600; color: var(--grijs); }

.bn-melding {
  display: flex; align-items: center; gap: 9px; padding: 10px;
  border-radius: 10px; background: var(--teal-licht); font-size: .78rem; color: var(--ink-2);
}
.bn-melding svg { width: 18px; height: 18px; color: var(--teal); flex: 0 0 auto; }

/* ============================================================ sectiekop */
.bn-sectiekop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.bn-sectiekop > div { display: flex; flex-direction: column; gap: 6px; max-width: 48ch; }

/* ============================================================ prijzen */
.bn-prijskaart {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: var(--rond-l);
  box-shadow: var(--schaduw-l); padding: 32px 28px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
}
.bn-prijs-groot { display: flex; align-items: baseline; gap: 4px; }
.bn-prijs-groot b { font-size: clamp(3rem, 2.2rem + 3vw, 4.4rem); line-height: 1; font-weight: 800; color: var(--teal); letter-spacing: -.04em; }
.bn-prijs-groot span { font-size: 1.05rem; font-weight: 700; color: var(--grijs); }

.bn-pakket { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.bn-pakket-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bn-pakket-kop .naam { display: flex; flex-direction: column; }
.bn-pakket-kop .naam b { font-size: 1.05rem; font-weight: 700; }
.bn-pakket-kop .naam span { font-size: .8rem; color: var(--grijs); line-height: 1.4; }
.bn-pakket-prijs { display: flex; align-items: baseline; }
.bn-pakket-prijs b { font-size: 1.6rem; font-weight: 800; }
.bn-pakket-prijs span { font-size: .8rem; color: var(--grijs); }
.bn-pakket-toel { font-size: .74rem; color: var(--grijs); }
.bn-pakket .bn-knop { margin-top: auto; }
.bn-vlag {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; background: var(--accent-licht);
  color: #0f766e; font-size: .7rem; font-weight: 700;
}
.bn-vlag svg { width: 14px; height: 14px; }

/* schakelaar maand/jaar */
.bn-schakel { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--vak); }
.bn-schakel button {
  height: 38px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent;
  font: inherit; font-size: .87rem; font-weight: 700; color: var(--grijs); cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.bn-schakel button[aria-pressed="true"] { background: var(--kaart); color: var(--ink); box-shadow: var(--schaduw); }

/* vergelijkingstabel */
/* position: relative is nodig. In de tabel staan verborgen labels voor
   schermlezers (.bn-schuil, position: absolute). Zonder positie op dit vak
   hangen die aan een element buiten de scrollcontainer, ontsnappen ze aan de
   overflow en werd de hele pagina op een telefoon horizontaal scrollbaar
   (622px breed op een scherm van 386px). */
.bn-tabelvak { position: relative; overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--rond-l); background: var(--kaart); }
.bn-tabel { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .87rem; }
.bn-tabel th, .bn-tabel td { padding: 13px 16px; text-align: left; }
.bn-tabel thead th { background: var(--zacht); font-weight: 700; }
.bn-tabel thead th:not(:first-child) { text-align: center; }
.bn-tabel thead th span { display: block; font-size: .76rem; font-weight: 600; color: var(--grijs); font-variant-numeric: tabular-nums; }
.bn-tabel tbody tr { border-top: 1px solid var(--rand); }
.bn-tabel tbody td { text-align: center; }
.bn-tabel .groep th { background: var(--laag); border-top: 1px solid var(--rand); }
.bn-tabel .nee { color: var(--grijs); }
.bn-tabel .ja { color: var(--goed); }
.bn-tabel .ja svg { width: 19px; height: 19px; }
.bn-tabel .beperkt { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
/* Tabellen met lopende tekst in de cellen (landingspagina’s): links uitgelijnd. */
.bn-tabel--tekst thead th:not(:first-child), .bn-tabel--tekst tbody td { text-align: left; }
.bn-tabel--tekst tbody td { color: var(--ink-2); }
/* Eerste kolom blijft staan; de rand maakt zichtbaar dat de rest eronderdoor schuift. */
.bn-tabel th[scope="row"], .bn-tabel thead th:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--kaart); font-weight: 500;
  box-shadow: 1px 0 0 var(--rand); min-width: 190px;
}
.bn-tabel thead th:first-child { background: var(--zacht); font-weight: 700; }

/* Pakketten vergelijken op een telefoon: twee pakketten naast elkaar in plaats
   van vijf kolommen waar je doorheen moet schuiven. site.js zet de klasse
   --twee alleen onder 768px; zonder JavaScript blijft de scrolltabel staan. */
.bn-vergelijk { display: none; }
@media (max-width: 767px) {
  .bn-vergelijk:not([hidden]) {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  }
  .bn-vergelijk-keuze { min-width: 0; }
  .bn-vergelijk select {
    width: 100%; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 10px;
    background: var(--kaart); font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink);
  }
  .bn-vergelijk-tegen {
    font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--grijs);
  }
  .bn-tabelvak--twee { overflow: visible; }
  .bn-tabelvak--twee .bn-tabel { min-width: 0; table-layout: fixed; }
  .bn-tabelvak--twee .bn-uit { display: none; }
  .bn-tabelvak--twee .bn-tabel th, .bn-tabelvak--twee .bn-tabel td { padding: 12px 6px; }
  .bn-tabelvak--twee .bn-tabel th:first-child { padding-left: 12px; }
  .bn-tabelvak--twee .bn-tabel th[scope="row"] { position: static; min-width: 0; width: 52%; box-shadow: none; }
  /* De pakketnamen blijven onder de vaste kop staan terwijl je door de rijen scrolt. */
  .bn-tabelvak--twee .bn-tabel thead th {
    position: sticky; top: 64px; z-index: 3; min-width: 0; box-shadow: 0 1px 0 var(--rand);
  }
  .bn-tabelvak--twee .bn-tabel thead th:first-child { width: 52%; border-top-left-radius: var(--rond-l); }
  .bn-tabelvak--twee .bn-tabel thead th:last-child { border-top-right-radius: var(--rond-l); }
}

/* ============================================================ vragen */
.bn-vraag {
  background: var(--kaart); border-radius: var(--rond); box-shadow: var(--schaduw);
  padding: 14px 18px;
}
.bn-vraag + .bn-vraag { margin-top: 8px; }
.bn-vraag summary { cursor: pointer; font-weight: 700; font-size: .93rem; list-style: none; }
.bn-vraag summary::-webkit-details-marker { display: none; }
.bn-vraag summary::after { content: '+'; float: right; color: var(--grijs); font-weight: 400; }
.bn-vraag[open] summary::after { content: '\2212'; }
.bn-vraag p { margin: 8px 0 0; color: var(--ink-2); font-size: .89rem; }

/* ============================================================ stappen */
.bn-stap { display: flex; flex-direction: column; gap: 8px; }
.bn-stap-nr {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--vak); font-size: .8rem; font-weight: 700;
}
.bn-stap-nr--aan { background: var(--teal); color: #fff; }
.bn-stap-nr--uit { background: var(--accent); color: var(--op-accent); }

/* ============================================================ blog */
.bn-artikel { max-width: 44rem; margin: 0 auto; }
.bn-artikel h2 { font-size: 1.35rem; margin: 28px 0 8px; letter-spacing: -.015em; }
.bn-artikel p { margin: 0 0 16px; font-size: 1rem; line-height: 1.75; color: var(--ink-2); }
.bn-artikel blockquote {
  margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--teal);
  background: var(--laag); border-radius: 0 var(--rond) var(--rond) 0;
}
.bn-artikel blockquote p { margin: 0; }

/* Juridische pagina's (privacyverklaring): lange tekst met lijsten en tussenkoppen. */
.bn-juridisch-kop { margin-bottom: 24px; }
.bn-juridisch .bn-klein { margin: 0; font-size: .84rem; color: var(--grijs); }
.bn-juridisch h3 { font-size: 1.05rem; margin: 22px 0 6px; letter-spacing: -.01em; }
.bn-juridisch ul { margin: 0 0 16px; padding-left: 1.25rem; color: var(--ink-2); line-height: 1.75; }
.bn-juridisch li { margin: 0 0 6px; }
.bn-juridisch a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.bn-juridisch code { font-family: 'JetBrains Mono', monospace; font-size: .85em; background: var(--laag); padding: 1px 5px; border-radius: 5px; }

.bn-tag { display: inline-flex; padding: 3px 9px; border-radius: 6px; font-size: .72rem; font-weight: 700; }
.bn-tag--websites { background: var(--teal-licht); color: var(--teal); }
.bn-tag--marketing { background: var(--accent-licht); color: #0f766e; }
.bn-tag--systemen { background: #fef3c7; color: #92400e; }

/* ============================================================ formulieren */
.bn-veld { display: flex; flex-direction: column; gap: 6px; }
.bn-veld label { font-size: .82rem; font-weight: 700; }
.bn-veld input, .bn-veld select, .bn-veld textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--zacht); font: inherit; font-size: .92rem; color: var(--ink);
}
.bn-veld textarea { min-height: 110px; resize: vertical; }
.bn-veld input:focus, .bn-veld select:focus, .bn-veld textarea:focus { background: var(--kaart); }
.bn-veld .fout { font-size: .78rem; color: #b91c1c; font-weight: 600; }
.bn-veld--fout input, .bn-veld--fout select, .bn-veld--fout textarea { border-color: #f0a3a3; }

/* ============================================================ slotoproep */
.bn-slot {
  background: var(--teal); color: #fff; border-radius: var(--rond-l);
  padding: 28px; display: flex; flex-direction: column; gap: 22px;
}
@media (min-width: 1024px) { .bn-slot { flex-direction: row; align-items: center; gap: 48px; padding: 52px; } }
.bn-slot .bn-h2 { color: #fff; }
.bn-slot p { color: rgba(255, 255, 255, .82); margin: 0; max-width: 44ch; }
.bn-slot .bn-label { color: rgba(255, 255, 255, .7); }
.bn-slot-acties { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1024px) { .bn-slot-acties { width: 320px; flex: 0 0 auto; } }
.bn-slot .bn-knop--licht { background: #fff; color: var(--teal); }
.bn-slot-onder { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .82); }
.bn-slot-onder svg { width: 16px; height: 16px; }

/* ============================================================ voet */
.bn-voet { border-top: 1px solid var(--rand); margin-top: 8px; }
.bn-voet-binnen { padding: 40px 0 32px; display: grid; gap: 28px; }
@media (min-width: 768px) { .bn-voet-binnen { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.bn-voet h4 { margin: 0 0 10px; font-size: .82rem; font-weight: 700; }
.bn-voet ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.bn-voet a { font-size: .85rem; color: var(--ink-2); text-decoration: none; }
.bn-voet a:hover { color: var(--teal); }
/* De juridische links: een eigen regel boven de copyrightregel, met dezelfde
   rand erboven zodat het één blok blijft. */
.bn-voet-juridisch {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  padding-top: 18px; border-top: 1px solid var(--rand);
  font-size: .8rem;
}
.bn-voet-juridisch a { color: var(--grijs); text-decoration: none; }
.bn-voet-juridisch a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.bn-voet-juridisch + .bn-voet-onder { border-top: 0; padding-top: 10px; }

.bn-voet-onder {
  border-top: 1px solid var(--rand); padding: 18px 0 28px;
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: .8rem; color: var(--grijs);
}

/* ============================================================ minder beweging */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================ intakewizard
 * De klassennamen hieronder komen uit views/public/intake.ejs en public/js/
 * intake.js. Die blijven zoals ze zijn — het formulier werkt, alleen het
 * uiterlijk hoort bij de nieuwe site. Alles staat onder .bn-intake zodat het
 * niet botst met gelijknamige klassen in het dashboard.
 */
.bn-intake .wizard {
  background: var(--kaart); border-radius: var(--rond-l); box-shadow: var(--schaduw-m);
  padding: 26px; display: flex; flex-direction: column; gap: 0;
}
/* min-width: 0 hoort erbij. Een flexitem krimpt standaard niet onder zijn
   min-content-breedte, en de kleur- en sfeerroosters in stap 3 hebben een
   brede min-content: zonder deze regel werd de stap 552px breed op een
   telefoon van 390px en kon de hele pagina zijwaarts schuiven. */
.bn-intake fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* Deze regel moet er staan. `display: flex` hierboven is specifieker dan de
   browserregel [hidden] { display: none }, dus zonder deze uitzondering staan
   alle vier de stappen tegelijk op het scherm en is de wizard geen wizard. */
.bn-intake fieldset[hidden] { display: none; }
.bn-intake h2 { margin: 0; font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
.bn-intake h3.form-subsectie {
  margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--rand);
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-family: var(--mono); color: var(--grijs);
}

.bn-intake .veld { display: flex; flex-direction: column; gap: 6px; }
.bn-intake label { font-size: .84rem; font-weight: 700; }
.bn-intake .verplicht { color: #b91c1c; }
.bn-intake input[type="text"], .bn-intake input[type="email"], .bn-intake input[type="tel"],
.bn-intake select, .bn-intake textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--zacht); font: inherit; font-size: .92rem; color: var(--ink);
}
.bn-intake textarea { min-height: 96px; resize: vertical; }
.bn-intake input:focus, .bn-intake select:focus, .bn-intake textarea:focus { background: var(--kaart); }
.bn-intake .veld-fout { font-size: .78rem; font-weight: 600; color: #b91c1c; }

.bn-intake .form-grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .bn-intake .form-grid { grid-template-columns: 1fr 1fr; } }

/* Pakketkeuze: het hele blok is klikbaar, de radioknop zelf blijft bedienbaar. */
.bn-intake .keuze-rij { display: grid; gap: 8px; }
@media (min-width: 640px) { .bn-intake .keuze-rij { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.bn-intake .keuze-kaart { position: relative; cursor: pointer; }
.bn-intake .keuze-kaart input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bn-intake .keuze-kaart span {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  border: 1px solid var(--rand); border-radius: 10px; background: var(--zacht);
  transition: border-color .16s ease, background-color .16s ease;
}
.bn-intake .keuze-kaart strong { font-size: .92rem; }
.bn-intake .keuze-kaart small { font-size: .78rem; color: var(--grijs); font-variant-numeric: tabular-nums; }
.bn-intake .keuze-kaart input:checked + span { border-color: var(--teal); background: var(--teal-licht); }
.bn-intake .keuze-kaart input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }

.bn-intake .checkbox-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-intake .checkbox-item {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px;
  border: 1px solid var(--rand); border-radius: 999px; background: var(--zacht);
  font-size: .86rem; font-weight: 500; cursor: pointer;
}
.bn-intake .checkbox-item input { accent-color: var(--teal); }
.bn-intake .checkbox-item.bevestig { border-radius: 10px; width: 100%; }

/* Voortgang: vier bolletjes met een lijn ertussen. */
.bn-intake .wizard-voortgang {
  display: flex; gap: 4px; margin: 0 0 18px; padding: 0; list-style: none;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grijs);
}
.bn-intake .wizard-voortgang li {
  flex: 1; padding-top: 22px; position: relative; text-align: center;
}
.bn-intake .wizard-voortgang li::before {
  content: attr(data-dot); position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: var(--vak); color: var(--grijs);
  display: grid; place-items: center; font-size: .66rem;
}
.bn-intake .wizard-voortgang li::after {
  content: ''; position: absolute; top: 9px; left: calc(50% + 14px); right: calc(-50% + 14px);
  height: 2px; background: var(--vak);
}
.bn-intake .wizard-voortgang li:last-child::after { display: none; }
.bn-intake .wizard-voortgang li.actief { color: var(--teal); }
.bn-intake .wizard-voortgang li.actief::before { background: var(--teal); color: #fff; }

.bn-intake .wizard-knoppen {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--rand);
}
.bn-intake .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border: 0; border-radius: var(--rond);
  font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background-color .18s ease;
}
.bn-intake .btn-primair { background: var(--teal); color: #fff; }
.bn-intake .btn-primair:hover:not(:disabled) { background: var(--teal-donker); }
.bn-intake .btn-primair:disabled { background: var(--vak); color: var(--grijs); cursor: not-allowed; }
.bn-intake .btn-secundair { background: var(--vak); color: var(--ink); }

.bn-intake .def-lijst { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0; }
.bn-intake .def-lijst dt { font-size: .8rem; font-weight: 700; color: var(--grijs); }
.bn-intake .def-lijst dd { margin: 0; font-size: .9rem; }

.bn-intake .melding {
  padding: 12px 14px; border-radius: 10px; font-size: .87rem; font-weight: 600; margin-bottom: 16px;
}
.bn-intake .melding-fout { background: #fef2f2; color: #b91c1c; }

/* ============================================================ live ontwerper
 * Het meegroeiende voorbeeld naast het intakeformulier (ov- van "overzicht"):
 * views/partials/intake-voorbeeld.ejs plus de kleur- en sfeerkeuze in stap 3
 * van views/public/intake.ejs. public/js/intake.js zet vijf variabelen op het
 * venster — --v-accent, --v-rond, --v-kop, --v-regel, --v-weging — en alles
 * hieronder leest daaruit. Verandert de klant een keuze, dan verandert het
 * voorbeeld; meer logica zit er niet in.
 */
/* Geen align-items: start. De voorbeeldkolom moet net zo hoog zijn als het
   formulier, anders heeft het plakkende venster erbinnen geen ruimte om mee te
   reizen en scrolt het na de eerste stap gewoon uit beeld. */
/* Op een telefoon komen de vragen vóór het voorbeeld. Andersom begon het eerste
   invulveld pas voorbij 830 pixels: je landde op "Bouw je website" en zag een
   scherm vol voorbeeld zonder één vraag. Het voorbeeld staat er nog steeds, een
   klein stukje lager, en verandert gewoon mee tijdens het invullen. */
.ov-kolommen { display: grid; gap: 24px; }
.ov-titel { order: 1; }
.ov-formulier { order: 2; min-width: 0; }
.ov-paneel { order: 3; min-width: 0; }
.ov-sticky { min-width: 0; }

/* De adresbalk van het voorbeeldvenster mag de kolom niet oprekken. Een lange
   domeinnaam plus het merkje "Voorbeeld" heeft een min-content van bijna 380px;
   op een telefoon van 390px werd het paneel daardoor breder dan het scherm en
   kon de pagina zijwaarts schuiven. */
.ov-paneel .bn-venster-balk .naam { min-width: 0; }
.ov-paneel .bn-venster-balk .naam em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Telefoon en tablet: het voorbeeld plakt onder de vaste kop, zodat het in
   beeld blijft terwijl je door de stappen scrolt. Compact gehouden — het blok
   en de voettekst vallen weg, kleur en vorm zie je in de hero al. */
@media (max-width: 1023px) {
  .ov-paneel {
    position: sticky; top: 64px; z-index: 20;
    background: var(--vlak); padding-block: 10px 12px;
  }
  .ov-paneel .ov-blok, .ov-paneel .ov-voet { display: none; }
  .ov-uitleg-meer { display: none; }
}

@media (min-width: 1024px) {
  .ov-kolommen { grid-template-columns: minmax(0, 1fr) 380px; gap: 24px 40px; }
  .ov-titel, .ov-paneel, .ov-formulier { order: 0; }
  .ov-titel { grid-column: 1 / -1; }
  .ov-sticky { position: sticky; top: 88px; }
}
@media (min-width: 1200px) { .ov-kolommen { grid-template-columns: minmax(0, 1fr) 420px; } }

.ov-uitleg { margin: 0; text-align: center; }
.bn-intake .veld-uitleg { margin: -2px 0 2px; font-weight: 400; color: var(--grijs); }

/* --- het voorbeeldvenster zelf ---------------------------------------- */
/* De standaardwaarden staan hier en niet in het JavaScript: zonder JS ziet de
   klant dan nog steeds een net voorbeeld in plaats van een kale doos. */
.bn-venster[data-voorbeeld] {
  --v-accent: var(--teal); --v-rond: 12px; --v-kop: var(--kop);
  --v-regel: 1.6; --v-weging: 650;
}
.ov-site { background: var(--kaart); line-height: var(--v-regel); }

.ov-kop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--rand);
}
.ov-merk {
  font-family: var(--v-kop); font-weight: var(--v-weging); font-size: .84rem;
  color: var(--v-accent); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%;
}
.ov-nav { display: flex; gap: 10px; font-size: .64rem; color: var(--grijs); font-weight: 600; }
.ov-nav span { white-space: nowrap; }

.ov-hero {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  padding: 22px 16px 24px;
  background: color-mix(in srgb, var(--v-accent) 9%, #fff);
}
.ov-hero-kop {
  margin: 0; font-family: var(--v-kop); font-weight: var(--v-weging);
  font-size: 1.08rem; line-height: 1.25; letter-spacing: -.015em;
}
.ov-hero-kop [data-vb="stad"] { color: var(--v-accent); }
.ov-hero-sub { margin: 0; max-width: 36ch; font-size: .72rem; color: var(--grijs); }
.ov-knop {
  display: inline-flex; align-items: center; margin-top: 3px;
  padding: 8px 15px; border-radius: var(--v-rond);
  background: var(--v-accent); color: #fff; font-size: .7rem; font-weight: 700;
}

.ov-blok { display: flex; flex-direction: column; gap: 9px; padding: 15px 16px; }
.ov-bloktitel {
  margin: 0; font-family: var(--v-kop); font-weight: var(--v-weging); font-size: .8rem;
}
.ov-rij { display: flex; align-items: center; gap: 10px; }
.ov-regel { font-size: .71rem; color: var(--ink-2); white-space: nowrap; }
.ov-streep { flex: 1; height: 4px; border-radius: 999px; background: var(--vak); }
.ov-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.ov-kaartje {
  aspect-ratio: 1; border-radius: var(--v-rond);
  background: color-mix(in srgb, var(--v-accent) 14%, #fff);
}

.ov-voet {
  padding: 10px 16px; border-top: 1px solid var(--rand); background: var(--zacht);
  font-family: var(--v-kop); font-size: .65rem; color: var(--grijs);
}

/* --- accentkleur kiezen ----------------------------------------------- */
/* Elk staal krijgt zijn kleur via --staal, inline gezet in de EJS. */
.bn-intake .ov-kleuren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 620px; }
@media (min-width: 480px) { .bn-intake .ov-kleuren { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bn-intake .ov-staal {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 6px; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--zacht); cursor: pointer;
}
.bn-intake .ov-staal input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ov-vlak { width: 100%; height: 30px; border-radius: 8px; background: var(--staal); }
.bn-intake .ov-staalnaam { font-size: .72rem; font-weight: 600; color: var(--ink-2); }
.bn-intake .ov-staal input:checked ~ .ov-vlak { outline: 2px solid var(--staal); outline-offset: 2px; }
.bn-intake .ov-staal input:checked ~ .ov-staalnaam { color: var(--ink); font-weight: 700; }
.bn-intake .ov-staal:has(input:checked) { border-color: var(--staal); background: var(--kaart); }
.bn-intake .ov-staal input:focus-visible ~ .ov-vlak { outline: 2px solid var(--ink); outline-offset: 3px; }

/* --- sfeer kiezen ------------------------------------------------------ */
/* Het miniatuurtje laat de vorm zien waar het om gaat: hoekjes en regelafstand.
   De ronding komt per sfeer uit --mini-rond, dezelfde waarde die het voorbeeld
   rechts gebruikt. */
.bn-intake .ov-sferen { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; max-width: 620px; }
.bn-intake .ov-sfeer {
  position: relative; display: flex; flex-direction: column; gap: 7px;
  padding: 12px; border: 1px solid var(--rand); border-radius: 10px;
  background: var(--zacht); cursor: pointer; --mini-rond: 2px;
}
.bn-intake .ov-sfeer input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.bn-intake .ov-sfeer[data-sfeer="warm"] { --mini-rond: 9px; }
.bn-intake .ov-sfeer[data-sfeer="stoer"] { --mini-rond: 0; }
.bn-intake .ov-sfeer[data-sfeer="licht"] { --mini-rond: 999px; }
.ov-sfeer-mini {
  display: flex; flex-direction: column; gap: 5px; padding: 9px;
  border: 1px solid var(--rand); border-radius: 8px; background: var(--kaart);
}
.ov-sfeer-mini b { height: 8px; width: 62%; border-radius: var(--mini-rond); background: var(--teal); }
.ov-sfeer-mini i { height: 4px; width: 100%; border-radius: var(--mini-rond); background: var(--vak); }
.ov-sfeer-mini i.kort { width: 68%; }
.bn-intake .ov-sfeer[data-sfeer="stoer"] .ov-sfeer-mini b { height: 10px; }
.bn-intake .ov-sfeer[data-sfeer="licht"] .ov-sfeer-mini { gap: 8px; }
.bn-intake .ov-sfeer-naam { font-size: .86rem; font-weight: 700; }
.bn-intake .ov-sfeer[data-sfeer="warm"] .ov-sfeer-naam { font-family: Georgia, 'Times New Roman', serif; }
/* De omschrijving staat in een <label>, en die is in dit formulier vet.
   Zonder deze regel erft de uitleg dat gewicht en schreeuwt de hele kaart. */
.bn-intake .ov-sfeer .bn-klein { margin: 0; font-weight: 400; }
.bn-intake .ov-sfeer input:checked ~ .ov-sfeer-mini { outline: 2px solid var(--teal); outline-offset: 2px; }
.bn-intake .ov-sfeer:has(input:checked) { border-color: var(--teal); background: var(--kaart); }
.bn-intake .ov-sfeer input:focus-visible ~ .ov-sfeer-mini { outline: 2px solid var(--ink); outline-offset: 3px; }