/* ═══════════════════════════════════════════════════════════════════════════
   BolWinners — lichte huisstijl
   Richting: docs/ux/09_HUISSTIJL_LICHT.md
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Inter'; src: url('fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono'; src: url('fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  /* Merk — afgeleid van het logo */
  --navy: #0f2a52;
  --navy-diep: #0a1f3d;
  --blauw: #1e5bd6;
  --blauw-licht: #2f6ef0;
  --blauw-zacht: #eaf1fe;
  --blauw-rand: #c6dbfb;

  /* Status — vaste betekenis */
  --groen: #0f9d6b;  --groen-zacht: #e8f7f1;  --groen-rand: #b6e5d2;
  --amber: #c77700;  --amber-zacht: #fdf3e3;  --amber-rand: #f3dcae;
  --amber-tekst: #96590a;   /* leesbare varianten voor tékst; de heldere kleuren blijven voor vlakken en randen */
  --groen-tekst: #0a7d54;   /* 5,2:1 op wit  (--groen #0f9d6b haalde 3,5:1) */
  --rood-tekst:  #c02c2c;   /* 5,8:1 op wit, 5,1:1 op rood-zacht */
  --rood:  #d13b3b;  --rood-zacht:  #fdeded;  --rood-rand:  #f6c9c9;

  /* Oppervlak */
  --wit: #ffffff;
  --grijs-25: #fafbfc;
  --grijs-50: #f6f7f9;
  --grijs-100: #eef0f3;
  --rand: #e3e6eb;
  --rand-sterk: #cfd4dc;

  /* Tekst */
  --tekst: #111827;
  --tekst-zacht: #4b5563;
  --tekst-gedempt: #626974;   /* was #6b7280 — dat haalde 4,2:1 op een grijze kaart; nu 4,9:1 */
  --tekst-uit: #666e7c;   /* was #9ca3af (2,5:1 op wit) — nu 5,1:1 op wit en 4,8:1 op grijs */

  /* Diepte */
  --schaduw-1: 0 1px 2px rgba(16,24,40,.05);
  --schaduw-2: 0 4px 12px rgba(16,24,40,.08);
  --schaduw-3: 0 12px 32px rgba(16,24,40,.12);
  --schaduw-4: 0 24px 56px rgba(16,24,40,.18);

  --r-s: 8px; --r: 12px; --r-l: 16px; --r-xl: 20px;
  --breed: 1200px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ── Basis ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--wit); color: var(--tekst);
  font: 400 15.5px/1.65 var(--sans); -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--blauw); text-decoration: none; transition: color .14s; }
a:hover { color: var(--blauw-licht); }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 620; letter-spacing: -.022em; line-height: 1.18; color: var(--tekst); }
p { margin: 0 0 16px; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--blauw); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--blauw-zacht); }

.omhulsel { width: 100%; max-width: var(--breed); margin: 0 auto; padding: 0 32px; }
.omhulsel-breed { max-width: 1340px; margin: 0 auto; padding: 0 32px; }
.smal { max-width: 760px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--blauw); color: #fff; padding: 10px 16px; border-radius: var(--r-s); }
.skip:focus { left: 8px; }

/* ── Typografie ────────────────────────────────────────────────────────── */
.display { font-size: clamp(34px, 5vw, 60px); line-height: 1.06; letter-spacing: -.03em; font-weight: 640; }
.titel-l { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.14; letter-spacing: -.026em; }
.titel-m { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -.022em; }
.lood { font-size: clamp(16px, 1.6vw, 18px); color: var(--tekst-zacht); line-height: 1.6; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.label { font-size: 12.5px; font-weight: 500; color: var(--tekst-gedempt); }
.oogje { display: block; font-size: 14px; font-weight: 550; color: var(--blauw); margin-bottom: 14px; }

/* ── Header ────────────────────────────────────────────────────────────── */
.kop {
  position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(1.6); border-bottom: 1px solid var(--rand);
}
.kop-in { display: flex; align-items: center; gap: 36px; height: 68px; }
.merk { display: inline-flex; align-items: center; }
.merk { line-height: 0; }

.hoofdnav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.hoofdnav > a, .nav-knop {
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: var(--r-s); color: var(--tekst-zacht);
  font: 500 14px var(--sans); background: none; border: 0; cursor: pointer;
  transition: color .14s, background .14s;
}
.hoofdnav > a:hover, .nav-knop:hover { color: var(--tekst); background: var(--grijs-50); }
.hoofdnav [aria-current="page"] { color: var(--blauw); }
.nav-groep { position: relative; }
.uitklap {
  position: absolute; top: calc(100% + 12px); left: -8px; width: 360px; padding: 8px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-3);
}
.uitklap a { display: block; padding: 10px 12px; border-radius: var(--r-s); color: var(--tekst); }
.uitklap a:hover { background: var(--grijs-50); }
.uitklap span { display: block; font-size: 14px; font-weight: 550; }
.uitklap em { display: block; font-style: normal; font-size: 12.5px; color: var(--tekst-gedempt); margin-top: 2px; }
.uitklap-alles { margin-top: 6px; padding-top: 12px !important; border-top: 1px solid var(--rand); color: var(--blauw) !important; font-size: 13.5px; }

.kop-acties { display: flex; align-items: center; gap: 10px; }
.menu-knop { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-knop span { display: block; width: 20px; height: 1.5px; background: var(--tekst); margin: 4px 0; }
.mobielmenu { display: none; border-top: 1px solid var(--rand); padding: 12px 24px 28px; background: var(--wit); }
.mobielmenu a { display: block; padding: 14px 0; color: var(--tekst); border-bottom: 1px solid var(--rand); font-size: 15.5px; }
/* knoppen in het mobiele menu houden hun eigen opmaak — anders erft de primaire
   knop de donkere menukleur en wordt witte tekst op blauw onleesbaar grijs */
.mobielmenu .knop { border-bottom: 0; }
.mobielmenu .knop-primair { color: #fff; }
.mobielmenu .knop-secundair { color: var(--blauw); }
.mobielmenu-acties { display: grid; gap: 10px; margin-top: 24px; }

/* ── Knoppen ───────────────────────────────────────────────────────────── */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: var(--r-s);
  font: 550 14px/1 var(--sans); border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.knop-primair { background: var(--blauw); color: #fff; box-shadow: var(--schaduw-1); }
.knop-primair:hover { background: var(--blauw-licht); color: #fff; box-shadow: var(--schaduw-2); }
.knop-secundair { background: var(--wit); border-color: var(--rand-sterk); color: var(--tekst); box-shadow: var(--schaduw-1); }
.knop-secundair:hover { border-color: var(--tekst-uit); background: var(--grijs-25); color: var(--tekst); }
.knop-tekst { color: var(--tekst-zacht); padding: 0 10px; }
.knop-tekst:hover { color: var(--tekst); }
.knop-groot { height: 50px; padding: 0 24px; font-size: 15px; }
.pijl { transition: transform .18s; }
.knop:hover .pijl, a:hover > .pijl { transform: translateX(3px); }

/* ── Secties ───────────────────────────────────────────────────────────── */
.sectie { padding: 104px 0; }
.sectie-s { padding: 72px 0; }
.grijs { background: var(--grijs-50); }
.sectie-kop { max-width: 680px; margin-bottom: 52px; }
.sectie-kop p { color: var(--tekst-zacht); margin: 16px 0 0; font-size: 17px; }
.sectie-kop-midden { margin-left: auto; margin-right: auto; text-align: center; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.split-7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.raster { display: grid; gap: 22px; }
.raster-2 { grid-template-columns: repeat(2, 1fr); }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
.raster-4 { grid-template-columns: repeat(4, 1fr); }

/* ── Kaarten ───────────────────────────────────────────────────────────── */
.kaart {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l);
  padding: 28px; box-shadow: var(--schaduw-1); transition: box-shadow .18s, transform .18s, border-color .18s;
}
a.kaart:hover { box-shadow: var(--schaduw-2); transform: translateY(-2px); border-color: var(--rand-sterk); color: inherit; }
.kaart h3 { font-size: 18px; margin-bottom: 10px; }
.kaart p { color: var(--tekst-zacht); font-size: 14.5px; margin: 0; }
.kaart-link { margin-top: 18px; font-size: 14px; color: var(--blauw); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }

.icoon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 18px;
  background: var(--blauw-zacht); color: var(--blauw); display: grid; place-items: center;
}
.icoon svg { width: 20px; height: 20px; }

/* ── Badges ────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 550; border: 1px solid var(--rand); color: var(--tekst-gedempt); background: var(--wit);
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-nu { color: var(--groen-tekst); border-color: var(--groen-rand); background: var(--groen-zacht); }
.badge-binnenkort { color: var(--amber-tekst); border-color: var(--amber-rand); background: var(--amber-zacht); }
.badge-gepland { color: var(--tekst-gedempt); }
.beschikbaarheid { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }

/* ── Status ────────────────────────────────────────────────────────────── */
.stip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; white-space: nowrap; }
.stip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.stip-groen { color: var(--groen-tekst); } .stip-oranje { color: var(--amber-tekst); } .stip-rood { color: var(--rood-tekst); }

/* ═══════════════════════════════════════════════════════════════════════
   HET DASHBOARD
   ═══════════════════════════════════════════════════════════════════════ */


/* Zijbalk in merk-navy: ankering zonder donkere werkruimte */


/* Werkblad */


/* ── De inzichtkaart: het hart van het dashboard ───────────────────────── */

/* ── KPI ───────────────────────────────────────────────────────────────── */
.kpi-label { font-size: 13px; color: var(--tekst-gedempt); }
.kpi-waarde { font-family: var(--mono); font-size: 26px; font-weight: 550; letter-spacing: -.035em; margin-top: 9px; line-height: 1; }
.kpi-waarde.amber { color: var(--amber-tekst); }
.kpi-delta { font-size: 12.5px; margin-top: 9px; color: var(--tekst-gedempt); }
.kpi-delta.op { color: var(--groen-tekst); } .kpi-delta.af { color: var(--rood-tekst); }
.kpi-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; opacity: .5; pointer-events: none; }

/* ── Paneel + tabel ────────────────────────────────────────────────────── */
.paneel { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 20px; }
.paneel-strak { padding: 6px 18px; }

.dtabel { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtabel th { text-align: left; font-size: 12px; font-weight: 600; color: var(--tekst-gedempt); padding: 14px 12px; border-bottom: 1px solid var(--rand); }
.dtabel td { padding: 15px 12px; border-bottom: 1px solid var(--rand); color: var(--tekst-zacht); }
.dtabel tbody tr { transition: background .14s; }
.dtabel tbody tr:hover { background: var(--grijs-25); }
.dtabel tr:last-child td { border-bottom: 0; }
.dtabel .r { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dtabel .naam { color: var(--tekst); font-weight: 550; }
.dtabel .ean { display: block; font-family: var(--mono); font-size: 11px; color: var(--tekst-uit); margin-top: 3px; }
.dtabel td.rood { color: var(--rood-tekst); font-weight: 550; }
.dtabel td.uit { color: var(--tekst-uit); }

.dekking { display: inline-flex; align-items: center; gap: 10px; justify-content: flex-end; }
.dekking-baan { width: 48px; height: 5px; border-radius: 3px; background: var(--grijs-100); overflow: hidden; }
.dekking-baan i { display: block; height: 100%; border-radius: 3px; }

/* ── Projectie ─────────────────────────────────────────────────────────── */
.proj { width: 100%; height: auto; }
.proj-legenda { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap; }
.proj-legenda span { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--tekst-gedempt); }
.proj-legenda i { width: 15px; height: 2px; border-radius: 1px; }
.proj-legenda i.vast { background: var(--blauw); }
.proj-legenda i.voorspeld { background: repeating-linear-gradient(90deg, var(--blauw) 0 4px, transparent 4px 7px); }
.proj-legenda i.band { background: var(--blauw-rand); height: 8px; border-radius: 2px; }
.proj-legenda i.oos { background: var(--rood); width: 7px; height: 7px; border-radius: 50%; }

/* ── Signalen ──────────────────────────────────────────────────────────── */
.merkje { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 550; }
.merkje::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.merkje-gemeten { color: var(--tekst-gedempt); }
.merkje-voorspeld { color: var(--blauw); }
.merkje-correctie { color: var(--amber-tekst); }

/* ── LVB ⇄ VVB ─────────────────────────────────────────────────────────── */
.vgl2 { display: grid; gap: 14px; }
.vgl2-rij { display: grid; grid-template-columns: 108px 1fr 96px; align-items: center; gap: 16px; }
.vgl2-naam { font-size: 13.5px; color: var(--tekst-zacht); }
.vgl2-baan { height: 36px; border-radius: var(--r-s); background: var(--grijs-100); overflow: hidden; border: 1px solid var(--rand); }
.vgl2-vul { height: 100%; border-radius: 7px 0 0 7px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.vgl2-vul.wint { background: linear-gradient(90deg, #34b98a, #0f9d6b); }
.vgl2-vul.verliest { background: linear-gradient(90deg, #b9c0cb, #9aa3b2); }
.vgl2-bedrag { font-family: var(--mono); font-size: 17px; font-weight: 600; text-align: right; letter-spacing: -.03em; }
.vgl2-rij.wint .vgl2-bedrag { color: var(--groen-tekst); }
.vgl2-uitslag { margin-top: 6px; padding: 16px 18px; border-radius: var(--r); font-size: 14.5px; background: var(--blauw-zacht); border: 1px solid var(--blauw-rand); color: var(--tekst-zacht); }
.vgl2-uitslag b { color: var(--navy); }

/* ── Uitleg-paneel ─────────────────────────────────────────────────────── */
.uitleg { border: 1px solid var(--rand); border-radius: var(--r); background: var(--wit); overflow: hidden; }
.uitleg summary { padding: 14px 18px; cursor: pointer; font-size: 14px; font-weight: 550; color: var(--blauw); list-style: none; display: flex; align-items: center; gap: 9px; }
.uitleg summary::-webkit-details-marker { display: none; }
.uitleg summary::before { content: '+'; font-size: 15px; }
.uitleg[open] summary::before { content: '−'; }
.uitleg-lijf { padding: 0 18px 16px; font-size: 14px; }
.uitleg-regel { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.uitleg-regel:last-child { border-bottom: 0; }
.uitleg-regel > span:first-child { color: var(--tekst-zacht); }
.uitleg-regel > span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--tekst); }
.uitleg-regel .toel { display: block; font-size: 12.5px; color: var(--tekst-uit); font-family: var(--sans); }
.uitleg-regel.totaal { border-top: 1px solid var(--rand-sterk); margin-top: 6px; padding-top: 14px; font-weight: 600; }
.uitleg-regel.totaal > span:first-child { color: var(--tekst); }

/* ── Tekstpagina's ─────────────────────────────────────────────────────── */
.tekstkop { padding: 72px 0 40px; }
.tekstkop h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 18px; }
.tekstkop p { color: var(--tekst-zacht); font-size: 18px; max-width: 660px; margin: 0; }
.tekst { max-width: 720px; padding: 8px 0 100px; }
.tekst h2 { font-size: 25px; margin: 48px 0 16px; }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { font-size: 18px; margin: 32px 0 12px; }
.tekst p, .tekst li { color: var(--tekst-zacht); font-size: 16px; }
.tekst .lijst { margin: 0 0 18px; }
.tekst .lijst li { position: relative; padding-left: 24px; margin-bottom: 9px; }
.tekst .lijst li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--blauw-rand); }
.tekst a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blauw-rand); }
.tekst a:hover { text-decoration-color: var(--blauw); }

.voorbeeld { background: var(--grijs-50); border: 1px solid var(--rand); border-left: 3px solid var(--blauw); border-radius: 0 var(--r) var(--r) 0; padding: 22px 24px; margin: 26px 0; }
.voorbeeld-label { font-size: 12.5px; font-weight: 600; color: var(--blauw); margin-bottom: 10px; }
.voorbeeld p:last-child { margin-bottom: 0; }
.let-op { background: var(--amber-zacht); border: 1px solid var(--amber-rand); border-radius: var(--r); padding: 17px 19px; margin: 24px 0; font-size: 14.5px; color: var(--tekst-zacht); }
.let-op strong { color: var(--amber-tekst); }

.tabel-omhulsel { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--r-l); background: var(--wit); box-shadow: var(--schaduw-1); }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
table.data th { background: var(--grijs-50); text-align: left; font-size: 12.5px; font-weight: 600; color: var(--tekst-gedempt); padding: 14px 20px; }
table.data td { padding: 16px 20px; border-top: 1px solid var(--rand); color: var(--tekst-zacht); }
table.data tbody tr:hover { background: var(--grijs-25); }
table.data td:first-child { color: var(--tekst); font-weight: 500; }
table.data .num { text-align: right; }

/* ── Wel/niet ──────────────────────────────────────────────────────────── */
.welniet { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.welniet ul li { padding: 13px 0 13px 30px; position: relative; color: var(--tekst-zacht); font-size: 15px; border-bottom: 1px solid var(--rand); }
.welniet ul li:last-child { border-bottom: 0; }
.welniet .wel li::before { content: ''; position: absolute; left: 3px; top: 21px; width: 10px; height: 5px; border-left: 2px solid var(--groen); border-bottom: 2px solid var(--groen); transform: rotate(-45deg); }
.welniet .niet li::before { content: ''; position: absolute; left: 4px; top: 23px; width: 10px; height: 2px; background: var(--tekst-uit); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--rand); }
.faq details { border-bottom: 1px solid var(--rand); }
.faq summary { padding: 22px 0; cursor: pointer; font-size: 16px; font-weight: 550; list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary:hover { color: var(--blauw); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--tekst-uit); border-bottom: 2px solid var(--tekst-uit); transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px,-3px); }
.faq-antwoord { padding: 0 0 24px; color: var(--tekst-zacht); font-size: 15px; max-width: 760px; }
.faq-antwoord p:last-child { margin-bottom: 0; }

/* ── Prijzen ───────────────────────────────────────────────────────────── */
.prijskaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); padding: 32px; display: flex; flex-direction: column; box-shadow: var(--schaduw-1); }
.prijskaart.uitgelicht { border-color: var(--blauw); box-shadow: var(--schaduw-3); position: relative; }
.prijskaart.uitgelicht::after { content: 'Aanbevolen'; position: absolute; top: -11px; left: 32px; background: var(--blauw); color: #fff; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.prijskaart h3 { font-size: 19px; margin-bottom: 7px; }
.prijskaart .voor-wie { color: var(--tekst-gedempt); font-size: 14px; margin-bottom: 24px; }
.prijs { font-family: var(--mono); font-size: 32px; font-weight: 600; letter-spacing: -.035em; color: var(--navy); }
.prijs small { font-family: var(--sans); font-size: 13.5px; font-weight: 400; color: var(--tekst-gedempt); letter-spacing: 0; }
.prijskaart ul { margin: 26px 0; flex: 1; }
.prijskaart ul li { padding: 9px 0 9px 28px; position: relative; font-size: 14.5px; color: var(--tekst-zacht); }
.prijskaart ul li::before { content: ''; position: absolute; left: 3px; top: 17px; width: 10px; height: 5px; border-left: 2px solid var(--groen); border-bottom: 2px solid var(--groen); transform: rotate(-45deg); }

/* ── Calculator ────────────────────────────────────────────────────────── */
.calc-veld { margin-bottom: 16px; }
.calc-veld label { display: block; font-size: 13.5px; color: var(--tekst-zacht); margin-bottom: 7px; font-weight: 500; }
.calc-veld input, .calc-veld select {
  width: 100%; height: 42px; padding: 0 14px; background: var(--wit);
  border: 1px solid var(--rand-sterk); border-radius: var(--r-s); color: var(--tekst);
  font: 400 15px var(--mono); font-variant-numeric: tabular-nums; transition: border-color .14s, box-shadow .14s;
}
.calc-veld select { font-family: var(--sans); }
.calc-veld input:focus, .calc-veld select:focus { border-color: var(--blauw); outline: none; box-shadow: 0 0 0 3px var(--blauw-zacht); }
.calc-groep { border-top: 1px solid var(--rand); padding-top: 22px; margin-top: 22px; }
.calc-groep h4 { font-size: 13.5px; font-weight: 600; color: var(--tekst); margin-bottom: 16px; }
.calc-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.schakel { display: inline-flex; padding: 4px; background: var(--grijs-100); border-radius: var(--r-s); }
.schakel button { padding: 8px 16px; border: 0; background: none; color: var(--tekst-zacht); font: 550 13.5px var(--sans); border-radius: 6px; cursor: pointer; transition: background .16s, color .16s; }
.schakel button[aria-pressed="true"] { background: var(--wit); color: var(--blauw); box-shadow: var(--schaduw-1); }
.uitkomst { position: sticky; top: 88px; }
.uitkomst-groot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* ── Auth ──────────────────────────────────────────────────────────────── */
.auth { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 60px 24px; background: var(--grijs-50); }
.auth-kaart { width: 100%; max-width: 420px; }
.auth-kaart h1 { font-size: 27px; margin-bottom: 10px; }
.auth-kaart .sub { color: var(--tekst-zacht); font-size: 15px; margin-bottom: 28px; }
.auth-kaart .knop { width: 100%; }
.auth-onder { margin-top: 24px; text-align: center; font-size: 14px; color: var(--tekst-gedempt); }

/* ── Slot in navy ──────────────────────────────────────────────────────── */
.slot { background: var(--navy); color: #fff; text-align: center; padding: 96px 0; }
.slot h2 { color: #fff; }
.slot p { color: rgba(255,255,255,.72); max-width: 560px; margin: 16px auto 32px; font-size: 17px; }
.slot .hero-acties { justify-content: center; }
.slot .knop-primair { background: var(--wit); color: var(--navy); }
.slot .knop-primair:hover { background: var(--grijs-50); color: var(--navy); }
.slot .knop-secundair { background: transparent; border-color: rgba(255,255,255,.3); color: #fff; }
.slot .knop-secundair:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); color: #fff; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.voet { background: var(--navy-diep); color: rgba(255,255,255,.66); padding: 72px 0 36px; }
.voet-raster { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 52px; }
.voet-merk p { color: rgba(255,255,255,.5); font-size: 14px; margin-top: 18px; max-width: 270px; }
.voet-merk .merk img, .voet-merk .merk svg { filter: brightness(0) invert(1); opacity: .95; }
.voet h3 { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 18px; }
.voet li { margin-bottom: 11px; }
.voet li a { color: rgba(255,255,255,.62); font-size: 14px; }
.voet li a:hover { color: #fff; }
.voet-onder { border-top: 1px solid rgba(255,255,255,.1); padding-top: 28px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.voet-onder p { color: rgba(255,255,255,.42); font-size: 12.5px; margin: 0; line-height: 1.8; }
.voet-onder a { color: rgba(255,255,255,.62); }

/* ── Responsief ────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hoofdnav, .kop-acties { display: none; }
  .menu-knop { display: block; margin-left: auto; }
  .kop-in { gap: 0; }
  .split, .split-7-5 { grid-template-columns: 1fr; gap: 44px; }
  .raster-4 { grid-template-columns: repeat(2, 1fr); }
  .calc { grid-template-columns: 1fr; }
  .uitkomst { position: static; }
  .voet-raster { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 720px) {
  .sectie { padding: 64px 0; }
  .omhulsel, .omhulsel-breed { padding: 0 20px; }
  .raster-2, .raster-3, .raster-4, .welniet, .signalen, .uitkomst-groot, .calc-twee { grid-template-columns: 1fr; }
  .voet-raster { grid-template-columns: 1fr 1fr; }
  .hero-acties .knop { width: 100%; }
  .dtabel th:nth-child(5), .dtabel td:nth-child(5) { display: none; }
  .vgl2-rij { grid-template-columns: 84px 1fr 84px; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

}

/* Genummerd label op uitlegkaarten */
.knum { display: block; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--blauw); margin-bottom: 10px; }

/* Categorie boven een kaartkop (kennisbank, functies) */
.kaart-vraag { font-size: 13px; font-weight: 550; color: var(--blauw); margin-bottom: 8px; }
/* Kop binnen een dashboardpaneel */
.dash-paneel-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
/* Groot cijfer in een tekstblok */
.cijfer { font-family: var(--mono); font-size: clamp(28px,3vw,40px); font-weight: 600; letter-spacing: -.04em; line-height: 1; color: var(--navy); }
.voet-jaar { }

@media (max-width: 720px) {
  /* Kop van de inzichtkaart: soort en tijdstip onder elkaar in plaats van geknepen */
  .tekstkop { padding: 44px 0 28px; }
  .tekstkop p { font-size: 16.5px; }
  .beschikbaarheid { gap: 10px; margin-bottom: 18px; }
}

/* ── Logo ──────────────────────────────────────────────────────────────── */
.logo { height: 40px; width: auto; display: block; }
.voet .logo { height: 36px; }
.voet .lg-b { fill: #ffffff; }
.voet .lg-w { fill: #7fa8f5; }
.voet .logo-woord tspan { fill: #ffffff !important; }

/* Kop krijgt meer lucht — het merk mag ruimte hebben */
.kop-in { height: 84px; }

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 88px 0 104px; overflow: hidden; }
.hero-achtergrond { position: absolute; inset: 0; pointer-events: none; }
.hero-achtergrond svg {
  width: 100%; height: 100%;
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.hero-in { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.hero-oog {
  display: inline-block; padding: 6px 14px; border-radius: 999px; margin-bottom: 26px;
  background: var(--blauw-zacht); border: 1px solid var(--blauw-rand);
  font-size: 13px; font-weight: 550; color: var(--blauw);
}
.hero-tekst .display { font-size: clamp(34px, 3.9vw, 54px); }
.hero-lood { max-width: 520px; margin: 26px 0 34px; }
.hero-acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-punten { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 32px; }
.hero-punten li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--tekst-gedempt); }
.hero-punten li::before {
  content: ''; width: 15px; height: 8px; flex: none;
  border-left: 2px solid var(--groen); border-bottom: 2px solid var(--groen);
  transform: rotate(-45deg) translate(2px,-2px);
}

/* ── Hero-preview: mini-dashboard ──────────────────────────────────────── */
.preview { position: relative; }
.preview-app {
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l);
  box-shadow: 0 32px 64px -20px rgba(16,24,40,.2), 0 8px 20px -8px rgba(16,24,40,.08);
  overflow: hidden;
}
.preview-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--wit); border-bottom: 1px solid var(--rand); }
.preview-merk { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 620; color: var(--tekst); }
.preview-merk svg { width: 26px; height: 15px; }
.preview-tijd { margin-left: auto; font-size: 11.5px; color: var(--tekst-gedempt); display: flex; align-items: center; gap: 7px; }
.preview-tijd::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--groen); }
.preview-lijf { padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--grijs-50); }

.pkaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 13px 15px; box-shadow: var(--schaduw-1); }
.pkaart-groen { border-top: 3px solid var(--groen); }
.pkaart-amber { border-top: 3px solid var(--amber); }
.pkaart-kop { display: flex; align-items: center; margin-bottom: 7px; }
.pkaart-soort { font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.pkaart-soort.groen { color: var(--groen-tekst); } .pkaart-soort.amber { color: var(--amber-tekst); }
.pkaart-tijd { margin-left: auto; font-size: 10.5px; color: var(--tekst-uit); }
.pkaart-titel { font-size: 16px; font-weight: 630; letter-spacing: -.02em; color: var(--tekst); margin: 0 0 8px; }
.pkaart-titel .num { color: var(--blauw); }
.pkaart-titel .zacht { font-weight: 450; color: var(--tekst-zacht); font-size: 13.5px; }
.pkaart-feiten { display: flex; gap: 6px 20px; flex-wrap: wrap; font-size: 11.5px; color: var(--tekst-gedempt); }
.pkaart-feiten b { color: var(--tekst); font-weight: 600; margin-left: 4px; }
.pkaart-feiten b.rood { color: var(--rood-tekst); }

.pgrafiek { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 12px 15px; box-shadow: var(--schaduw-1); }
.pgrafiek-kop { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--tekst-gedempt); margin-bottom: 7px; }
.pgrafiek-kop .num { color: var(--tekst); font-weight: 600; }
.pgrafiek svg { width: 100%; height: 66px; display: block; }

.pkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pkpis > div { background: var(--wit); border: 1px solid var(--rand); border-radius: 10px; padding: 10px 12px; box-shadow: var(--schaduw-1); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pkpis span { font-size: 10.5px; color: var(--tekst-gedempt); white-space: nowrap; }
.pkpis b { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.pkpis b.amber { color: var(--amber-tekst); }
.pkpis i { font-style: normal; font-size: 10px; font-weight: 550; }
.pkpis i.op { color: var(--groen-tekst); } .pkpis i.af { color: var(--rood-tekst); }
.rood { color: var(--rood-tekst); }

/* ── Domeinen ──────────────────────────────────────────────────────────── */
.domeinen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rand); border: 1px solid var(--rand); border-radius: var(--r-l); overflow: hidden; }
.domein { background: var(--wit); padding: 26px 24px; transition: background .16s; }
.domein:hover { background: var(--grijs-25); }
.domein b { display: block; font-size: 16px; font-weight: 620; margin-bottom: 8px; letter-spacing: -.02em; }
.domein span { display: block; font-size: 14px; color: var(--tekst-zacht); line-height: 1.55; }

.uitspraak { text-align: center; margin-top: 56px; }
.uitspraak p { font-size: clamp(19px, 2.2vw, 26px); line-height: 1.45; color: var(--tekst-zacht); margin: 0; letter-spacing: -.02em; }
.uitspraak b { color: var(--navy); font-weight: 620; }

/* ── Stappen ───────────────────────────────────────────────────────────── */
.stappen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; list-style: none; padding: 0; margin: 0; }
.stap { position: relative; padding-top: 30px; }
.stap::before { content: ''; position: absolute; top: 17px; left: 0; right: -28px; height: 1px; background: var(--rand); }
.stap:last-child::before { right: 0; }
.stap-num {
  position: absolute; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blauw); color: #fff;
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  box-shadow: 0 0 0 5px var(--wit);
}
.grijs .stap-num { box-shadow: 0 0 0 5px var(--grijs-50); }
.stap h3 { font-size: 17px; margin: 18px 0 10px; }
.stap p { font-size: 14px; color: var(--tekst-zacht); margin: 0; }
.stap-tijd { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 550; color: var(--tekst-gedempt); background: var(--grijs-100); padding: 3px 10px; border-radius: 999px; }

/* ── Functiegroepen ────────────────────────────────────────────────────── */
.fgroepen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.fgroep { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); padding: 24px; box-shadow: var(--schaduw-1); }
.fgroep-kop { font-size: 13px; font-weight: 620; color: var(--blauw); margin-bottom: 16px; letter-spacing: -.01em; }
.flijst li { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--rand); }
.flijst li:last-child { border-bottom: 0; }
.flijst b { font-size: 14px; font-weight: 500; color: var(--tekst-zacht); }
.flijst i { margin-left: auto; flex: none; font-style: normal; font-size: 11px; font-weight: 600; }
.st-nu { color: var(--groen-tekst); } .st-bouw { color: var(--amber-tekst); } .st-later { color: var(--tekst-uit); }
.flegenda { margin-top: 26px; text-align: center; font-size: 13px; color: var(--tekst-gedempt); }
.flegenda span { font-weight: 600; }

@media (max-width: 1180px) {
  .preview-zwevend { display: none; }
}
@media (max-width: 1080px) {
  .hero-in { grid-template-columns: 1fr; gap: 48px; }
  .hero-tekst { max-width: 700px; }
  .domeinen, .fgroepen { grid-template-columns: repeat(2, 1fr); }
  .stappen { grid-template-columns: repeat(2, 1fr); gap: 32px 28px; }
  .stap:nth-child(2)::before { right: 0; }
}
@media (max-width: 720px) {
  .hero { padding: 48px 0 64px; }
  .domeinen, .fgroepen, .stappen { grid-template-columns: 1fr; }
  .stap::before { right: 0; }
  .preview-kpis { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .pk-waarde { font-size: 15px; }
  .hero-punten { gap: 8px 18px; }
  .uitspraak { margin-top: 36px; }
}

@media (max-width: 720px) {
  /* Bovenkopje als gewone tekst — een pil die afbreekt oogt rommelig */
  .hero-oog { background: none; border: 0; padding: 0; margin-bottom: 18px; font-size: 13px; }
  .hero-achtergrond svg {
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 35%, transparent 70%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.45) 35%, transparent 70%);
  }
}

/* ── Herstelde onderdelen ──────────────────────────────────────────────── */
.hero-visual { position: relative; min-width: 0; }
.onderschrift { text-align: center; font-size: 13px; color: var(--tekst-gedempt); margin: 26px 0 0; }
.vraaggrafiek { width: 100%; height: auto; }
.vraag-uitleg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--rand); }
.vraag-punt { padding-left: 16px; border-left: 3px solid var(--rand); }
.vraag-punt.blauw { border-color: var(--blauw); }
.vraag-punt.rood { border-color: var(--rood-tekst); }
.vraag-punt.groen { border-color: var(--groen-tekst); }
.vraag-punt b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.vraag-punt span { display: block; font-size: 14px; color: var(--tekst-zacht); line-height: 1.6; }
.groen { color: var(--groen-tekst); }

@media (max-width: 900px) { .vraag-uitleg { grid-template-columns: 1fr; gap: 24px; } }
/* ═══════════════════════════════════════════════════════════════════════
   HET DASHBOARD · v3 — licht, wit, beslissingen eerst
   ═══════════════════════════════════════════════════════════════════════ */
.app {
  border-radius: var(--r-xl); overflow: hidden; background: var(--wit);
  border: 1px solid var(--rand); box-shadow: var(--schaduw-4);
  text-align: left;
}
.app-lijf { display: grid; grid-template-columns: 232px 1fr; min-height: 560px; }

/* ── Zijbalk: wit en rustig ────────────────────────────────────────────── */
.app-zij {
  background: var(--wit); border-right: 1px solid var(--rand);
  padding: 20px 12px 16px; display: flex; flex-direction: column; gap: 20px;
}
.app-merk { display: flex; align-items: center; gap: 9px; padding: 0 8px; }
.app-merk-teken { width: 34px; height: 19px; }
.app-merk-naam { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; color: var(--navy); }
.app-merk-naam b { color: var(--blauw); font-weight: 700; }

.app-nav { display: flex; flex-direction: column; gap: 1px; }
.app-nav-item {
  display: flex; align-items: center; gap: 10px; padding: 7.5px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 480; color: var(--tekst-zacht); transition: background .14s, color .14s;
}
.app-nav-item:hover { background: var(--grijs-50); color: var(--tekst); }
.app-nav-item.actief { background: var(--blauw); color: #fff; font-weight: 550; box-shadow: var(--schaduw-1); }
.app-nav-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.app-teller { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rood); color: #fff; font: 600 10.5px/18px var(--mono); text-align: center; }
.app-bin { margin-left: auto; font-style: normal; font-size: 10px; font-weight: 550; color: var(--tekst-uit); }
.app-zij-voet { margin-top: auto; padding: 0 10px; }
.app-sync { font-size: 11.5px; color: var(--tekst-gedempt); display: flex; align-items: center; gap: 7px; }
.app-sync::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--groen); }

/* ── Werkblad ──────────────────────────────────────────────────────────── */
.app-werk { background: var(--grijs-50); padding: 24px 26px 28px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.app-bar { display: flex; align-items: flex-start; gap: 16px; }
.app-bar h4 { font-size: 19px; letter-spacing: -.024em; }
.app-bar p { font-size: 13px; color: var(--tekst-gedempt); margin: 3px 0 0; }
.app-bar-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.app-pil {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 9px;
  border: 1px solid var(--rand); background: var(--wit); font-size: 12.5px; color: var(--tekst-zacht);
  box-shadow: var(--schaduw-1);
}
.app-pil svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.app-bel { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--rand); background: var(--wit); box-shadow: var(--schaduw-1); }
.app-bel svg { width: 15px; height: 15px; fill: none; stroke: var(--tekst-zacht); stroke-width: 1.4; }
.app-bel b { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--blauw); color: #fff; font: 600 10px/16px var(--mono); text-align: center; padding: 0 4px; }

.knop-s { height: 34px; padding: 0 14px; font-size: 12.5px; }

/* ── Grote panelen ─────────────────────────────────────────────────────── */
.app-panelen { display: grid; grid-template-columns: 1.25fr 1fr; gap: 16px; align-items: start; }
.paneel-kop { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.paneel-kop h5 { font-size: 14.5px; font-weight: 620; letter-spacing: -.015em; }
.paneel-sub { margin-left: auto; font-size: 12px; color: var(--tekst-gedempt); }

.dtabel-strak { font-size: 13px; }
.dtabel-strak td { padding: 10px 8px; }
.dtabel-strak td.num { white-space: nowrap; }
.dtabel-strak th { padding: 0 8px 9px; font-size: 11px; }
.dtabel .rang { width: 26px; color: var(--tekst-uit); }
.dtabel .op { color: var(--groen-tekst); } .dtabel .af { color: var(--rood-tekst); }

.meldingen { display: flex; flex-direction: column; }
.meldingen li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rand); align-items: flex-start; }
.meldingen li:last-child { border-bottom: 0; }
.melding-stip { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: none; }
.melding-stip.rood { background: var(--rood); box-shadow: 0 0 0 3px var(--rood-zacht); }
.melding-stip.blauw { background: var(--blauw); box-shadow: 0 0 0 3px var(--blauw-zacht); }
.melding-stip.groen { background: var(--groen); box-shadow: 0 0 0 3px var(--groen-zacht); }
.melding-stip.grijs { background: var(--tekst-uit); }
.meldingen b { display: block; font-size: 13px; font-weight: 550; color: var(--tekst); }
.meldingen span { display: block; font-size: 11.5px; color: var(--tekst-gedempt); margin-top: 2px; }

.merkje { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 550; }
.merkje::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.merkje-gemeten { color: var(--tekst-gedempt); }
.merkje-voorspeld { color: var(--blauw); }

@media (max-width: 1080px) {
  .app-lijf { grid-template-columns: 1fr; min-height: 0; }
  .app-zij { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--rand); padding: 12px 16px; }
  .app-nav, .app-zij-voet { display: none; }
  .app-panelen, .app-panelen-gelijk { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .app-werk { padding: 16px 14px 20px; gap: 14px; }
  .app-bar-rechts .app-pil { display: none; }
  .ac-taak { padding: 14px; }
  .ac-kop { row-gap: 6px; }
  .dtabel-strak th:nth-child(4), .dtabel-strak td:nth-child(4) { display: none; }
}

/* KPI-kaart in de winstcalculator */
.kpi { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--schaduw-1); }
.kpi-label { font-size: 12.5px; color: var(--tekst-gedempt); }
.kpi-waarde { font-family: var(--mono); font-size: 24px; font-weight: 600; letter-spacing: -.035em; margin-top: 8px; line-height: 1; }
.kpi-delta { font-size: 12px; color: var(--tekst-gedempt); margin-top: 7px; }

/* ── Zwevende kaarten op de hero-preview: diepte ───────────────────────── */
.preview-zwevend {
  position: absolute; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r);
  padding: 14px 16px; box-shadow: 0 20px 44px -12px rgba(16,24,40,.22); width: 216px; z-index: 2;
}
.zw-cash { top: -30px; right: -44px; width: 236px; }
.zw-marge { bottom: -40px; left: -60px; width: 204px; }
.zw-label { display: block; font-size: 11.5px; color: var(--tekst-gedempt); }
.zw-waarde { display: block; font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: -.03em; margin-top: 5px; }
.zw-sub { display: block; font-size: 10.5px; color: var(--tekst-uit); margin-top: 6px; line-height: 1.45; }
.cash-balk { display: flex; gap: 3px; margin-top: 9px; }
.cash-balk i { height: 6px; border-radius: 3px; background: var(--blauw); }
.cash-balk i.uit { background: var(--grijs-100); }
.marge-rij { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--tekst-zacht); padding: 6px 0; border-bottom: 1px solid var(--rand); }
.marge-rij:last-child { border-bottom: 0; }
.marge-rij b { font-weight: 600; color: var(--tekst); }
.marge-rij b.rood { color: var(--rood-tekst); }

@media (max-width: 1180px) { .preview-zwevend { display: none; } }

/* ── Vier ruime cijferkaarten (vervangt de 8-KPI-rij) ──────────────────── */
.app-groep-titel { font-size: 13.5px; font-weight: 620; color: var(--tekst); margin: 4px 0 -6px; }
.app-groep-titel span { font-weight: 400; color: var(--tekst-gedempt); }
.gkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.gkpi {
  position: relative; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l);
  padding: 20px 22px 24px; box-shadow: var(--schaduw-1); display: flex; flex-direction: column; gap: 7px;
  overflow: hidden; min-width: 0; transition: box-shadow .18s;
}
.gkpi:hover { box-shadow: var(--schaduw-2); }
.gkpi-l { font-size: 12.5px; color: var(--tekst-gedempt); }
.gkpi-w { font-family: var(--mono); font-size: 25px; font-weight: 600; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.gkpi-w.amber { color: var(--amber-tekst); }
.gkpi-d { font-size: 12px; color: var(--tekst-gedempt); }
.gkpi-d.op { color: var(--groen-tekst); } .gkpi-d.af { color: var(--rood-tekst); }
.gkpi-spark {
  position: absolute; left: 0; right: 0; bottom: 0; height: 22px; opacity: .35; pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 60%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.gkpi:hover .gkpi-spark { opacity: .65; }
.app-panelen-gelijk { grid-template-columns: 1fr 1fr; }

@media (max-width: 1080px) { .gkpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .gkpis { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════
   IMPACT-SECTIES — ecosysteem, engine, vs, flow, mini-calculator
   ═══════════════════════════════════════════════════════════════════════ */

.mega { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -.034em; font-weight: 660; }
.mega .vs { color: var(--tekst-uit); font-weight: 480; font-size: .55em; vertical-align: middle; padding: 0 .25em; }

/* ── Ecosysteem-keten ──────────────────────────────────────────────────── */
.eco { margin: 0 auto; }
.eco-keten { flex-wrap: nowrap; }
.eco-keten { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 10px 0; }
.eco-node {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l);
  padding: 16px 10px 13px; width: 104px; box-shadow: var(--schaduw-1);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.eco-node:hover { box-shadow: var(--schaduw-2); transform: translateY(-3px); }
.eco-node b { font-size: 12px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.eco-node-accent { border-color: var(--blauw-rand); background: linear-gradient(180deg, #f4f8ff, #fff); }
.eco-node-accent .eco-ico { background: var(--blauw); }
.eco-node-accent .eco-ico svg { stroke: #fff; }
.eco-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--blauw-zacht); display: grid; place-items: center; }
.eco-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--blauw); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.eco-pijl { align-self: center; width: 24px; height: 2px; position: relative; flex: none;
  background: repeating-linear-gradient(90deg, var(--blauw-rand) 0 5px, transparent 5px 9px); }
.eco-pijl::after { content: ''; position: absolute; right: -1px; top: -3.5px; border-left: 6px solid var(--blauw-rand); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
@media (prefers-reduced-motion: no-preference) {
  .eco-pijl { animation: eco-stroom 1.2s linear infinite; background-size: 9px 2px; }
  @keyframes eco-stroom { to { background-position: 9px 0; } }
}

/* ── Intelligence-trechter ─────────────────────────────────────────────── */
.engine { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.engine-bronnen { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  background: var(--wit); border: 1px solid var(--rand); box-shadow: var(--schaduw-1);
  font-size: 12.5px; font-weight: 500; color: var(--tekst-zacht); white-space: nowrap;
}
.chip::before { content: ''; width: 12px; height: 7px; flex: none; margin-top: -3px;
  border-left: 2px solid var(--groen); border-bottom: 2px solid var(--groen); transform: rotate(-45deg); }
.engine-trechter { width: min(600px, 90%); height: 90px; }
.engine-trechter svg { width: 100%; height: 100%; }
.engine-kern {
  display: flex; align-items: center; gap: 18px; max-width: 560px;
  background: linear-gradient(140deg, #16386b, var(--navy-diep)); color: #fff;
  border-radius: var(--r-l); padding: 22px 26px; box-shadow: 0 20px 44px -14px rgba(15,42,82,.5);
}
.engine-monogram { width: 62px; height: 35px; flex: none; }
.engine-kern b { display: block; font-size: 17px; font-weight: 650; letter-spacing: -.02em; margin-bottom: 4px; }
.engine-kern span { display: block; font-size: 13px; color: rgba(255,255,255,.72); line-height: 1.55; }
.engine-uit { height: 44px; margin: 4px 0; }
.engine-uit svg { height: 100%; width: auto; }
.engine-resultaat { width: min(430px, 100%); }

/* ── Spreadsheet vs BolWinners ─────────────────────────────────────────── */
.vsblok { max-width: 860px; margin: 0 auto; }
.vs-schakel { display: flex; justify-content: center; gap: 0; margin-bottom: 26px; }
.vs-schakel button {
  padding: 11px 26px; border: 1px solid var(--rand-sterk); background: var(--wit);
  font: 550 14.5px var(--sans); color: var(--tekst-zacht); cursor: pointer; transition: all .16s;
}
.vs-schakel button:first-child { border-radius: 10px 0 0 10px; }
.vs-schakel button:last-child { border-radius: 0 10px 10px 0; border-left: 0; }
.vs-schakel button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.vs-grafiek { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); padding: 26px 28px 18px; box-shadow: var(--schaduw-1); }
.vs-grafiek svg { width: 100%; height: auto; }
.vs-lijn { transition: opacity .4s; }
.vs-noot { transition: opacity .4s; }
[data-modus="sheet"] .vs-lijn-bw { opacity: .15; }
[data-modus="sheet"] .vs-noot { opacity: 0; }
[data-modus="bw"] .vs-lijn-sheet { opacity: .15; }
[data-modus="bw"] .vs-noot { opacity: 1; }
.vs-uitkomst { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.vs-kaart { border-radius: var(--r-l); padding: 20px 22px; border: 1px solid var(--rand); background: var(--wit); box-shadow: var(--schaduw-1); transition: opacity .4s, border-color .4s, box-shadow .4s; }
.vs-kaart-kop { display: block; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-gedempt); margin-bottom: 8px; }
.vs-kaart > b.num { display: block; font-size: 23px; font-weight: 650; letter-spacing: -.03em; margin-bottom: 8px; }
.vs-kaart-sub { font-size: 13.5px; color: var(--tekst-zacht); line-height: 1.55; }
.vs-kaart-sub .rood { color: var(--rood-tekst); } .vs-kaart-sub .groen { color: var(--groen-tekst); }
[data-modus="sheet"] .vs-kaart-bw { opacity: .35; }
[data-modus="bw"] .vs-kaart-sheet { opacity: .35; }
[data-modus="sheet"] .vs-kaart-sheet { border-color: var(--rand-sterk); box-shadow: var(--schaduw-2); }
[data-modus="bw"] .vs-kaart-bw { border-color: var(--groen-rand); box-shadow: var(--schaduw-2); }

/* ── Onboarding-flow ───────────────────────────────────────────────────── */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; position: relative; }
.flow-stap {
  position: relative; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l);
  padding: 26px 24px 22px; box-shadow: var(--schaduw-1); transition: box-shadow .18s, transform .18s;
}
.flow-stap:hover { box-shadow: var(--schaduw-2); transform: translateY(-3px); }
.flow-stap:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; right: -16px; width: 12px; height: 12px; z-index: 1;
  border-top: 2.5px solid var(--blauw-rand); border-right: 2.5px solid var(--blauw-rand);
  transform: translateY(-50%) rotate(45deg);
}
.flow-num {
  position: absolute; top: -14px; left: 22px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--blauw); color: #fff; font-size: 13px; font-weight: 650;
  display: grid; place-items: center; box-shadow: 0 0 0 4px var(--grijs-50);
}
.flow-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--blauw-zacht); display: grid; place-items: center; margin-bottom: 16px; }
.flow-ico svg { width: 23px; height: 23px; fill: none; stroke: var(--blauw); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.flow-stap h3 { font-size: 16.5px; margin-bottom: 9px; letter-spacing: -.02em; }
.flow-stap p { font-size: 13.5px; color: var(--tekst-zacht); margin: 0 0 14px; }
.flow-tijd { display: inline-block; font-size: 11.5px; font-weight: 550; color: var(--blauw); background: var(--blauw-zacht); padding: 4px 11px; border-radius: 999px; }

/* ── Mini-winstcalculator ──────────────────────────────────────────────── */
.minicalc {
  max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-xl);
  box-shadow: var(--schaduw-3); overflow: hidden;
}
.minicalc-in { padding: 32px 34px; border-right: 1px solid var(--rand); }
.mc-veld { margin-bottom: 26px; }
.mc-veld label { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 550; color: var(--tekst); margin-bottom: 12px; }
.mc-veld output { font-size: 15px; font-weight: 600; color: var(--blauw); }
.mc-veld input[type="range"] { width: 100%; appearance: none; -webkit-appearance: none; height: 6px; border-radius: 3px; background: var(--grijs-100); outline: none; }
.mc-veld input[type="range"]::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--wit); border: 2.5px solid var(--blauw); box-shadow: var(--schaduw-2); cursor: pointer;
}
.mc-veld input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--wit);
  border: 2.5px solid var(--blauw); box-shadow: var(--schaduw-2); cursor: pointer;
}
.mc-aannames { font-size: 12px; color: var(--tekst-gedempt); margin: 4px 0 0; line-height: 1.6; }
.minicalc-uit { padding: 32px 34px; background: var(--grijs-25); display: flex; flex-direction: column; }
.mc-groot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 22px; }
.mc-groot > div { display: flex; flex-direction: column; gap: 5px; }
.mc-l { font-size: 11.5px; color: var(--tekst-gedempt); }
.mc-groot b { font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: -.035em; white-space: nowrap; transition: color .2s; }
.mc-balk { display: flex; height: 30px; border-radius: 9px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rand); }
.mc-balk i { transition: width .25s ease; min-width: 0; }
#mc-b-inkoop { background: #0f2a52; } #mc-b-bol { background: #4d7ee0; }
#mc-b-ful { background: #9db8e8; } #mc-b-ads { background: #e8b45a; }
#mc-b-winst { background: #27b586; }
.mc-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.mc-legenda span { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tekst-gedempt); }
.mc-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.l-inkoop { background: #0f2a52; } .l-bol { background: #4d7ee0; } .l-ful { background: #9db8e8; }
.l-ads { background: #e8b45a; } .l-winst { background: #27b586; }
.mc-zin { margin: auto 0 0; padding-top: 18px; font-size: 14px; color: var(--tekst-zacht); }
.mc-zin b { color: var(--tekst); }

@media (max-width: 1080px) {
  .flow { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .flow-stap:nth-child(2)::after { display: none; }
  .minicalc { grid-template-columns: 1fr; }
  .minicalc-in { border-right: 0; border-bottom: 1px solid var(--rand); }
}
@media (max-width: 720px) {
  .eco-keten { flex-direction: column; align-items: center; gap: 0; }
  .eco-node { flex-direction: row; width: min(300px, 100%); min-width: 0; padding: 14px 18px; gap: 14px; }
  .eco-pijl { width: 2px; height: 26px; background: repeating-linear-gradient(180deg, var(--blauw-rand) 0 5px, transparent 5px 9px); animation: none; }
  .eco-pijl::after { right: -3.5px; top: auto; bottom: -1px; border-top: 6px solid var(--blauw-rand); border-left: 4.5px solid transparent; border-right: 4.5px solid transparent; border-bottom: 0; }
  .flow { grid-template-columns: 1fr; gap: 30px; }
  .flow-stap::after { display: none !important; }
  .vs-uitkomst { grid-template-columns: 1fr; }
  .minicalc-in, .minicalc-uit { padding: 24px 20px; }
  .mc-groot { grid-template-columns: 1fr 1fr; }
  .engine-kern { flex-direction: column; text-align: center; padding: 20px; }
}

/* ═══ ACTION CENTER — automatisch gegenereerde acties op het dashboard ═══ */
.ac { display: flex; flex-direction: column; gap: 14px; }
.ac-kop { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ac-kop h5 { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.ac-som { font-size: 13px; color: var(--tekst-zacht); }
.ac-som b { font-size: 14px; }
.ac-tellers { display: inline-flex; gap: 14px; }
.ac-tel { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tekst-zacht); }
.ac-stip { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ac-stip.rood { background: var(--rood); box-shadow: 0 0 0 3px var(--rood-zacht); }
.ac-stip.amber { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-zacht); }
.ac-stip.blauw { background: var(--blauw); box-shadow: 0 0 0 3px var(--blauw-zacht); }
.ac-bron { margin-left: auto; font-size: 11.5px; color: var(--tekst-uit); }

.ac-kanban { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 14px; align-items: start; }
.ac-kolom { display: flex; flex-direction: column; gap: 10px; background: var(--grijs-50); border: 1px solid var(--rand); border-radius: var(--r-l); padding: 12px; }
.ac-kolomkop { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-gedempt); padding: 2px 4px; }
.ac-kolomkop b { font-size: 11px; background: var(--wit); border: 1px solid var(--rand); border-radius: 9px; min-width: 20px; height: 18px; line-height: 17px; text-align: center; color: var(--tekst-zacht); }

.ac-taak { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--schaduw-1); }
.ac-kritiek { border-color: var(--rood-rand); box-shadow: var(--schaduw-2); border-top: 3px solid var(--rood); }
.ac-taakkop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ac-prio { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 2px 8px; }
.ac-prio.rood { color: var(--rood-tekst); background: var(--rood-zacht); }
.ac-prio.amber { color: var(--amber-tekst); background: var(--amber-zacht); }
.ac-prio.blauw { color: var(--blauw); background: var(--blauw-zacht); }
.ac-cat { font-size: 11.5px; color: var(--tekst-gedempt); }
.ac-datum { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--rood-tekst); white-space: nowrap; }
.ac-titel { font-size: 14px; font-weight: 600; letter-spacing: -.012em; line-height: 1.35; color: var(--tekst); margin: 0; }
.ac-kritiek .ac-titel { font-size: 16.5px; }
.ac-reden { font-size: 12.5px; color: var(--tekst-zacht); line-height: 1.5; margin: 6px 0 0; }
.ac-waarom { list-style: none; margin: 10px 0; padding: 10px 0; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.ac-waarom li { position: relative; padding-left: 16px; font-size: 12.5px; color: var(--tekst-zacht); }
.ac-waarom li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--rood-zacht); border: 2px solid var(--rood); box-sizing: border-box; }
.ac-impact { font-size: 12.5px; color: var(--tekst-zacht); margin: 0 0 12px; }
.ac-impact b { font-size: 14px; }
.ac-acties { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-af { opacity: .72; }
.ac-af .ac-titel { font-size: 13px; color: var(--tekst-zacht); }
.ac-af .ac-reden { font-size: 11.5px; color: var(--tekst-gedempt); }
.ac-vink { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--groen-zacht); flex: none; }
.ac-vink svg { width: 11px; height: 11px; fill: none; stroke: var(--groen); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 1080px) {
  .ac-kanban { grid-template-columns: 1fr 1fr; }
  .ac-kanban .ac-kolom:first-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .ac-kanban { grid-template-columns: 1fr; }
  .ac-waarom { grid-template-columns: 1fr; }
  .ac-bron { display: none; }
}

/* ── Dashboard: hoogste prioriteit prominent + compacte takenteller ───── */
.prio-rij { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: stretch; }
.priokaart { background: var(--wit); border: 1px solid var(--rood-rand); border-top: 3px solid var(--rood); border-radius: var(--r-l); padding: 18px 20px; box-shadow: var(--schaduw-2); }
.priokaart-titel { font-size: 19px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; color: var(--tekst); margin: 0 0 6px; }
.priokaart-reden { font-size: 13.5px; color: var(--tekst-zacht); line-height: 1.55; margin: 0 0 6px; }
.priokaart-impact { font-size: 13.5px; color: var(--tekst-zacht); margin: 0 0 14px; }
.priokaart-impact b { font-size: 15px; }
.prio-zij { display: flex; flex-direction: column; gap: 8px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); padding: 18px 20px; box-shadow: var(--schaduw-1); }
.prio-zij-kop { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-gedempt); }
.taakwidget-som { font-size: 13.5px; font-weight: 600; color: var(--tekst); }
.taakwidget-som b { font-size: 17px; }
.ac-tellers-kolom { flex-direction: column; align-items: flex-start; gap: 7px; }
.taakwidget-link { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--blauw); white-space: nowrap; }
@media (max-width: 940px) {
  .prio-rij { grid-template-columns: 1fr; }
  .ac-tellers-kolom { flex-direction: row; gap: 14px; }
  .taakwidget-link { margin-top: 4px; }
}

/* ═══ RESULTATEN-MARQUEE — wat BolWinners oplevert ═══════════════════════ */
.sr-alleen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.marquee-sectie {
  padding: clamp(90px, 12vw, 150px) 0;
  background: radial-gradient(60% 130% at 50% 0%, var(--blauw-zacht) 0%, rgba(234, 241, 254, 0) 62%), var(--wit);
  overflow: hidden;
  text-align: center;
}
.marquee-oogje { display: inline-block; margin-bottom: clamp(36px, 5vw, 58px); }

.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: mq-schuif 130s linear infinite;
}
.marquee-groep { display: flex; align-items: center; flex: none; }
.mq-w {
  flex: none;
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 750;
  letter-spacing: -.035em;
  line-height: 1.15;
  color: var(--navy);
  white-space: nowrap;
  padding: 8px 0;
  transition: color .25s ease, transform .25s ease;
}
.mq-w:hover { color: var(--blauw); transform: scale(1.03); }
.mq-p {
  flex: none;
  width: clamp(8px, 1vw, 11px);
  height: clamp(8px, 1vw, 11px);
  border-radius: 3px;
  background: var(--blauw);
  opacity: .5;
  transform: rotate(45deg);
  margin: 0 clamp(24px, 3.2vw, 48px);
}
@keyframes mq-schuif {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ═══ PRODUCTDEMO — laptop-stage, gescripte states, voortgangsrail ═══════
   Motion-systematiek (ux/09 §8a): reveal .6s · kaart .5s · stage .8s ·
   één actie tegelijk · easing overal gelijk. */
:root { --ease: cubic-bezier(.4, 0, .2, 1); --d-reveal: .6s; --d-kaart: .5s; --d-stage: .8s; }

/* Hero: gecentreerd, het product komt er direct onder */
.hero-in { display: block; }
.hero-tekst { max-width: 880px; margin: 0 auto; text-align: center; }
.hero-acties, .hero-punten { justify-content: center; }
.hero { padding-bottom: clamp(30px, 4vw, 60px); }

/* Verschijn-animaties: alleen met JS, nooit blokkerend */
@media (prefers-reduced-motion: no-preference) {
  html.js .anim { opacity: 0; transform: translateY(16px); transition: opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease); }
  html.js .anim.in-beeld { opacity: 1; transform: none; }
}

/* Story-skelet */
.story { position: relative; background: linear-gradient(180deg, var(--wit), var(--grijs-50) 30%, var(--grijs-50) 70%, var(--wit)); }
.story-plak { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; perspective: 1600px; }
.story-stage { position: relative; width: min(1010px, calc(100vw - 48px)); }
@media (prefers-reduced-motion: no-preference) {
  html.js .story-stage { transform: translateY(calc((1 - var(--p, 1)) * 44px)) scale(calc(.92 + var(--p, 1) * .08)); }
  html.js .laptop { transform: rotateX(calc((1 - var(--p, 1)) * 5deg)); transform-origin: 50% 100%; }
}

/* Laptop-frame: dunne donkere rand + aluminium basis, geen merkinbreuk */
.laptop-scherm { background: linear-gradient(180deg, #202a3d, #0d1526); border-radius: 16px 16px 0 0; padding: 12px 12px 14px; box-shadow: 0 34px 90px -24px rgba(15, 42, 82, .38); }
.laptop-scherm .venster-balk { border-radius: 9px 9px 0 0; }
.laptop-scherm .venster-lijf { border-radius: 0 0 9px 9px; background: var(--grijs-50); position: relative; overflow: hidden; }
.laptop-basis { position: relative; height: 15px; width: 116%; margin-left: -8%; background: linear-gradient(180deg, #eceef2, #c7ccd5 70%, #9aa1ad); border-radius: 3px 3px 14px 14px; box-shadow: 0 18px 44px -14px rgba(15, 42, 82, .35); }
.laptop-uitsparing { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 84px; height: 6px; border-radius: 0 0 7px 7px; background: #b6bcc7; }
.venster-balk { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--grijs-50); border-bottom: 1px solid var(--rand); }
.venster-balk i { width: 9px; height: 9px; border-radius: 50%; background: var(--rand-sterk); }
.venster-balk i:first-child { background: #e8a19b; } .venster-balk i:nth-child(2) { background: #ead9a2; } .venster-balk i:nth-child(3) { background: #a9d8bd; }
.venster-url { margin-left: 10px; font-family: var(--mono); font-size: 11px; color: var(--tekst-gedempt); background: var(--wit); border: 1px solid var(--rand); border-radius: 7px; padding: 2px 11px; }
.venster-tijd { margin-left: auto; font-size: 10.5px; color: var(--tekst-uit); }

/* Demo-dashboard */
.demo { display: grid; grid-template-columns: 1.45fr 1fr; gap: 11px; padding: 14px; transition: transform var(--d-stage) var(--ease); transform-origin: 50% 50%; }
.demo-vlak { background: var(--wit); border: 1px solid var(--rand); border-radius: 12px; padding: 13px 15px; box-shadow: var(--schaduw-1); transition: opacity var(--d-kaart) var(--ease), box-shadow var(--d-kaart) var(--ease), border-color var(--d-kaart) var(--ease); min-width: 0; }
.demo-vlak-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.demo-vlak-kop h6 { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-gedempt); margin: 0; }
.demo-chip { display: inline-flex; font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 2px 8px; }
.demo-chip.rood { color: var(--rood-tekst); background: var(--rood-zacht); }
.demo-chip.blauw { color: var(--blauw); background: var(--blauw-zacht); }
.demo-zacht { font-size: 11px; color: var(--tekst-gedempt); }
.demo-groot { font-size: 16px; font-weight: 650; letter-spacing: -.02em; color: var(--tekst); margin: 0 0 7px; }
.demo-cash { font-family: var(--mono); font-size: 18px; }
.demo-advies { border-top: 3px solid var(--rood); grid-row: span 1; }
.demo-impact { font-size: 11.5px; color: var(--tekst-zacht); margin: 0 0 9px; }
.demo-knoppen .knop-s { height: 29px; padding: 0 12px; font-size: 11.5px; pointer-events: none; transition: transform .25s var(--ease), filter .25s var(--ease); }
.demo-forecast svg { width: 100%; height: auto; display: block; }
.demo-legenda { font-size: 10px; color: var(--tekst-uit); margin-top: 6px; }
.demo-regels { display: flex; flex-direction: column; }
.demo-regel { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--tekst-zacht); padding: 4px 0; border-bottom: 1px solid var(--grijs-100); transition: opacity var(--d-kaart) var(--ease); }
.demo-regel:last-child { border-bottom: 0; }
.demo-regel b { color: var(--tekst); font-weight: 600; white-space: nowrap; }
.demo-regel-order { background: var(--blauw-zacht); border-radius: 7px; padding: 4px 8px; border-bottom: 0; }

/* KPI-strook: laadt gefaseerd in bij stap 1 */
.demo-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; transition: opacity var(--d-kaart) var(--ease); }
.demo-kpi { background: var(--wit); border: 1px solid var(--rand); border-radius: 10px; padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--schaduw-1); }
.demo-kpi span { font-size: 10px; color: var(--tekst-gedempt); }
.demo-kpi b { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: -.03em; }
.demo-kpi i { font-style: normal; font-size: 10px; }
.demo-kpi i.op { color: var(--groen-tekst); } .demo-kpi i.af { color: var(--rood-tekst); }
@media (prefers-reduced-motion: no-preference) {
  html.js .story-stage[data-stap="0"] .demo-kpi { opacity: 0; transform: translateY(7px); }
  html.js .demo-kpi { transition: opacity var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease); }
  html.js .demo-kpi:nth-child(2) { transition-delay: .08s; }
  html.js .demo-kpi:nth-child(3) { transition-delay: .16s; }
  html.js .demo-kpi:nth-child(4) { transition-delay: .24s; }
}

/* Waarom-regels: zes feiten, opgelicht bij stap 3 */
.demo-waarom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; font-size: 10.5px; color: var(--tekst-zacht); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); padding: 7px 0; margin: 0 0 8px; transition: opacity var(--d-kaart) var(--ease), background var(--d-kaart) var(--ease); }
.demo-waarom span { white-space: nowrap; }
.story-stage[data-stap="1"] .demo-waarom, .story-stage[data-stap="2"] .demo-waarom { opacity: .25; }
.story-stage[data-stap="3"] .demo-waarom { background: var(--blauw-zacht); border-radius: 8px; padding: 7px 9px; border-color: transparent; }

/* Order ontstaat pas door de klik (stap 5) */
.story-stage:not([data-stap="5"]):not([data-stap="6"]):not([data-stap="7"]):not([data-stap="8"]):not([data-stap="9"]) .demo-regel-order,
.story-stage:not([data-stap="5"]):not([data-stap="6"]):not([data-stap="7"]):not([data-stap="8"]):not([data-stap="9"]) .demo-regel-aankomst { opacity: .18; }
.story-stage[data-stap="5"] .demo-koopknop { transform: scale(.95); filter: brightness(.9); }

/* Dim + ring per stap */
.story-stage[data-stap="2"] .demo-vlak:not(.demo-advies),
.story-stage[data-stap="3"] .demo-vlak:not(.demo-advies),
.story-stage[data-stap="4"] .demo-vlak:not(.demo-forecast),
.story-stage[data-stap="5"] .demo-vlak:not(.demo-order):not(.demo-advies),
.story-stage[data-stap="6"] .demo-vlak:not(.demo-acties),
.story-stage[data-stap="7"] .demo-vlak:not(.demo-acties),
.story-stage[data-stap="8"] .demo-vlak:not(.demo-cashflow) { opacity: .3; }
.story-stage[data-stap="2"] .demo-kpis, .story-stage[data-stap="3"] .demo-kpis,
.story-stage[data-stap="4"] .demo-kpis, .story-stage[data-stap="5"] .demo-kpis,
.story-stage[data-stap="6"] .demo-kpis, .story-stage[data-stap="7"] .demo-kpis,
.story-stage[data-stap="8"] .demo-kpis { opacity: .3; }
.story-stage[data-stap="2"] .demo-advies, .story-stage[data-stap="3"] .demo-advies,
.story-stage[data-stap="4"] .demo-forecast,
.story-stage[data-stap="5"] .demo-order,
.story-stage[data-stap="6"] .demo-acties, .story-stage[data-stap="7"] .demo-acties,
.story-stage[data-stap="8"] .demo-cashflow { box-shadow: 0 0 0 3px var(--blauw-zacht), var(--schaduw-3); border-color: var(--blauw); }

/* Forecast-lijn tekent zichzelf bij stap 4 */
@media (prefers-reduced-motion: no-preference) {
  html.js .story-stage[data-stap="4"] .demo-lijn-voorspeld { animation: lijn-teken 1.3s var(--ease) forwards; }
  @keyframes lijn-teken { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}

/* Inzoomen per stap: origin op de hoek van het doelvlak */
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  .story-stage[data-stap="2"] .demo, .story-stage[data-stap="3"] .demo { transform: scale(1.16); transform-origin: 0% 12%; }
  .story-stage[data-stap="4"] .demo { transform: scale(1.16); transform-origin: 100% 12%; }
  .story-stage[data-stap="5"] .demo { transform: scale(1.16); transform-origin: 0% 62%; }
  .story-stage[data-stap="8"] .demo { transform: scale(1.16); transform-origin: 100% 62%; }
  .story-stage[data-stap="6"] .demo, .story-stage[data-stap="7"] .demo { transform: scale(1.12); transform-origin: 50% 100%; }
}

/* Mini-kanban in de demo */
.demo-acties { grid-column: 1 / -1; }
.demo-tellers { display: inline-flex; gap: 11px; font-size: 10.5px; color: var(--tekst-zacht); }
.demo-tellers span { display: inline-flex; align-items: center; gap: 5px; }
.demo-kanban { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: start; }
.demo-kolom { background: var(--grijs-50); border: 1px solid var(--rand); border-radius: 9px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 92px; }
.demo-kolomkop { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-gedempt); padding: 0 2px; }
.demo-wissel { position: relative; display: inline-block; min-width: 12px; text-align: center; font-size: 10px; color: var(--tekst-zacht); }
.demo-wissel span { transition: opacity .3s var(--ease); }
.demo-wissel span:not(:first-child) { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; }
.demo-taak { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--tekst); background: var(--wit); border: 1px solid var(--rand); border-radius: 7px; padding: 5px 8px; max-height: 44px; overflow: hidden; transition: opacity var(--d-kaart) var(--ease), transform var(--d-kaart) var(--ease), max-height var(--d-kaart) var(--ease), padding var(--d-kaart) var(--ease), margin var(--d-kaart) var(--ease); }
.demo-taak span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-taak em { font-style: normal; margin-left: auto; font-size: 9.5px; color: var(--tekst-gedempt); font-weight: 600; white-space: nowrap; }
.demo-taak .ac-vink { width: 15px; height: 15px; }
.demo-taak .ac-vink svg { width: 9px; height: 9px; }
.demo-af { opacity: .78; }
.demo-af span { color: var(--tekst-zacht); }

/* Taakverplaatsingen: bestel (stap 6), zending (stap 7) */
.demo-taak-bestel-nieuw, .demo-taak-zending-af { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: -6px; border-width: 0; transform: translateX(-26%); }
.story-stage[data-stap="6"] .demo-taak-bestel, .story-stage[data-stap="7"] .demo-taak-bestel,
.story-stage[data-stap="8"] .demo-taak-bestel, .story-stage[data-stap="9"] .demo-taak-bestel { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: -6px; border-width: 0; transform: translateX(30%); }
.story-stage[data-stap="6"] .demo-taak-bestel-nieuw, .story-stage[data-stap="7"] .demo-taak-bestel-nieuw,
.story-stage[data-stap="8"] .demo-taak-bestel-nieuw, .story-stage[data-stap="9"] .demo-taak-bestel-nieuw { max-height: 44px; opacity: 1; padding-top: 5px; padding-bottom: 5px; margin-top: 0; border-width: 1px; transform: none; transition-delay: .22s; }
.story-stage[data-stap="7"] .demo-taak-zending, .story-stage[data-stap="8"] .demo-taak-zending,
.story-stage[data-stap="9"] .demo-taak-zending { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin-top: -6px; border-width: 0; transform: translateX(30%); }
.story-stage[data-stap="7"] .demo-taak-zending-af, .story-stage[data-stap="8"] .demo-taak-zending-af,
.story-stage[data-stap="9"] .demo-taak-zending-af { max-height: 44px; opacity: 1; padding-top: 5px; padding-bottom: 5px; margin-top: 0; border-width: 1px; transform: none; transition-delay: .22s; }

/* Kolomtellers wisselen mee (kolom 1: 3→2→1 · kolom 2: 1→2 · kolom 3: 2→3) */
.story-stage[data-stap="6"] .demo-kolom:nth-child(1) .demo-wissel span:nth-child(1) { opacity: 0; }
.story-stage[data-stap="6"] .demo-kolom:nth-child(1) .demo-wissel span:nth-child(2) { opacity: 1; }
.story-stage[data-stap="7"] .demo-kolom:nth-child(1) .demo-wissel span:nth-child(1),
.story-stage[data-stap="8"] .demo-kolom:nth-child(1) .demo-wissel span:nth-child(1),
.story-stage[data-stap="9"] .demo-kolom:nth-child(1) .demo-wissel span:nth-child(1) { opacity: 0; }
.story-stage[data-stap="7"] .demo-kolom:nth-child(1) .demo-wissel span:nth-child(3),
.story-stage[data-stap="8"] .demo-kolom:nth-child(1) .demo-wissel span:nth-child(3),
.story-stage[data-stap="9"] .demo-kolom:nth-child(1) .demo-wissel span:nth-child(3) { opacity: 1; }
.story-stage[data-stap="6"] .demo-kolom:nth-child(2) .demo-wissel span:nth-child(1),
.story-stage[data-stap="7"] .demo-kolom:nth-child(2) .demo-wissel span:nth-child(1),
.story-stage[data-stap="8"] .demo-kolom:nth-child(2) .demo-wissel span:nth-child(1),
.story-stage[data-stap="9"] .demo-kolom:nth-child(2) .demo-wissel span:nth-child(1) { opacity: 0; }
.story-stage[data-stap="6"] .demo-kolom:nth-child(2) .demo-wissel span:nth-child(2),
.story-stage[data-stap="7"] .demo-kolom:nth-child(2) .demo-wissel span:nth-child(2),
.story-stage[data-stap="8"] .demo-kolom:nth-child(2) .demo-wissel span:nth-child(2),
.story-stage[data-stap="9"] .demo-kolom:nth-child(2) .demo-wissel span:nth-child(2) { opacity: 1; }
.story-stage[data-stap="7"] .demo-kolom:nth-child(3) .demo-wissel span:nth-child(1),
.story-stage[data-stap="8"] .demo-kolom:nth-child(3) .demo-wissel span:nth-child(1),
.story-stage[data-stap="9"] .demo-kolom:nth-child(3) .demo-wissel span:nth-child(1) { opacity: 0; }
.story-stage[data-stap="7"] .demo-kolom:nth-child(3) .demo-wissel span:nth-child(2),
.story-stage[data-stap="8"] .demo-kolom:nth-child(3) .demo-wissel span:nth-child(2),
.story-stage[data-stap="9"] .demo-kolom:nth-child(3) .demo-wissel span:nth-child(2) { opacity: 1; }

/* Gescripte cursor: alleen desktop, alleen met beweging */
.demo-cursor { position: absolute; left: 90%; top: 96%; width: 17px; height: 17px; opacity: 0; z-index: 4; pointer-events: none; transition: left .9s var(--ease), top .9s var(--ease), opacity .4s var(--ease); }
.demo-cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(15, 42, 82, .35)); }
.demo-cursor::after { content: ""; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--blauw); opacity: 0; }
@media (min-width: 721px) and (prefers-reduced-motion: no-preference) {
  html.js .story-stage[data-stap="5"] .demo-cursor { opacity: 1; left: 17.5%; top: 49%; }
  html.js .story-stage[data-stap="5"] .demo-cursor::after { animation: cursor-klik 1s var(--ease) .95s 2; }
  html.js .story-stage[data-stap="6"] .demo-cursor { opacity: 1; left: 47%; top: 84%; }
  html.js .story-stage[data-stap="7"] .demo-cursor { opacity: 1; left: 79%; top: 84%; }
  @keyframes cursor-klik { 0% { opacity: .7; transform: scale(.4); } 70% { opacity: 0; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.15); } }
}

/* Zwevende kaarten op de stage */
.story-stage .preview-zwevend { position: absolute; }
.story-stage .zw-cash { top: -26px; right: -40px; }
.story-stage .zw-marge { bottom: -20px; left: -52px; }
.story-stage[data-stap]:not([data-stap="0"]):not([data-stap="1"]):not([data-stap="9"]) .preview-zwevend { opacity: 0; transform: translateY(8px); pointer-events: none; }
.preview-zwevend { transition: opacity var(--d-kaart) var(--ease), transform var(--d-kaart) var(--ease); }

/* Voortgangsrail (desktop) */
.rail { position: absolute; left: clamp(10px, 2.6vw, 38px); top: 50%; transform: translateY(-50%); height: 60vh; display: flex; flex-direction: column; justify-content: space-between; align-items: center; z-index: 3; }
.rail-lijn { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: var(--rand); border-radius: 1px; overflow: hidden; }
.rail-vul { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--sp, 0) * 100%); background: var(--blauw); }
.rail-punt { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: var(--wit); border: 2px solid var(--rand-sterk); color: var(--tekst-gedempt); font-size: 10px; font-weight: 650; display: flex; align-items: center; justify-content: center; transition: background var(--d-kaart) var(--ease), border-color var(--d-kaart) var(--ease), color var(--d-kaart) var(--ease); }
.rail-punt.af { border-color: var(--blauw); color: var(--blauw); }
.rail-punt.actief { background: var(--blauw); border-color: var(--blauw); color: #fff; }
@media (max-width: 1180px) { .rail { display: none; } }

/* Voortgangsbalk (mobiel) */
.rail-mobiel { display: none; }
@media (max-width: 720px) {
  .rail-mobiel { display: block; position: sticky; top: 0; z-index: 5; height: 3px; background: var(--grijs-100); }
  .rail-mobiel i { display: block; height: 100%; width: calc(var(--sp, 0) * 100%); background: var(--blauw); }
}

/* Teksttegels: actieve stap licht op */
.story-stappen { position: relative; z-index: 2; margin-top: -100vh; padding: 4vh 0 8vh; pointer-events: none; }
.story-stap {
  max-width: 390px; margin: 42vh 0 42vh clamp(16px, 7vw, 110px); padding: 26px 28px;
  pointer-events: auto; background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-1);
  transition: background var(--d-reveal) var(--ease), border-color var(--d-reveal) var(--ease), box-shadow var(--d-reveal) var(--ease), transform var(--d-reveal) var(--ease);
}
.story-stap.actief { background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(243, 247, 254, .95)); border-color: #b9cff5; box-shadow: var(--schaduw-3), 0 0 0 4px rgba(30, 91, 214, .05); transform: translateY(-3px); }
.story-kicker { display: block; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--blauw); margin-bottom: 8px; }
.story-stap h3 { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 8px; }
.story-stap p { font-size: 15px; color: var(--tekst-zacht); line-height: 1.62; margin: 0; }
.story-stap .knop { margin-top: 14px; }

/* Onboarding-tijdlijn */
.ob { list-style: none; position: relative; margin: 0 auto; padding: 10px 0; max-width: 880px; }
.ob-lijn { position: absolute; left: 19px; top: 0; bottom: 0; width: 2px; background: var(--rand); border-radius: 1px; }
.ob-lijn-vul { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--blauw); border-radius: 1px; transition: height .2s linear; }
.ob-stap { position: relative; display: grid; grid-template-columns: 1fr 300px; gap: 18px 28px; align-items: center; padding: 26px 0 26px 62px; }
.ob-bol { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--wit); border: 2px solid var(--rand-sterk); color: var(--tekst-gedempt); font-weight: 650; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: border-color .4s var(--ease), color .4s var(--ease), background .4s var(--ease); }
.ob-stap.ob-actief .ob-bol { border-color: var(--blauw); color: var(--wit); background: var(--blauw); }
.ob-tekst h3 { font-size: 19px; font-weight: 650; letter-spacing: -.018em; margin: 0 0 6px; }
.ob-tekst p { font-size: 14px; color: var(--tekst-zacht); line-height: 1.6; margin: 0 0 8px; }
.ob-tijd { display: inline-flex; font-size: 11.5px; font-weight: 600; color: var(--blauw); background: var(--blauw-zacht); border-radius: 7px; padding: 3px 10px; }
.ob-kaartje { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--schaduw-2); }
.ob-kaartje-advies { border-top: 3px solid var(--rood); }
.ob-kaartje-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.ob-vulbalken { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.ob-vulbalken i { display: block; height: 7px; border-radius: 4px; background: var(--grijs-100); position: relative; overflow: hidden; }
.ob-vulbalken i::after { content: ""; position: absolute; inset: 0; width: var(--b, 60%); background: linear-gradient(90deg, var(--blauw), #6b93e8); border-radius: 4px; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ob-stap .ob-vulbalken i::after { width: 0; transition: width 1s var(--ease) .2s; }
  html.js .ob-stap.in-beeld .ob-vulbalken i::after, html.js .ob-stap.ob-actief .ob-vulbalken i::after { width: var(--b, 60%); }
}
.ob-slot { text-align: center; max-width: 640px; margin: 26px auto 0; }
.ob-slot p { font-size: 17px; font-weight: 550; color: var(--tekst); margin: 0 0 18px; }
.ob-slot .hero-acties { justify-content: center; }

/* Glans op het merkwoord (Spreadsheet vs BolWinners) */
.glans { background: linear-gradient(105deg, #0f2a52 0%, #0f2a52 38%, #1e5bd6 46%, #9dbdf5 50%, #1e5bd6 54%, #0f2a52 62%, #0f2a52 100%); background-size: 240% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .glans { animation: glans-loop 7s linear infinite; }
  @keyframes glans-loop { 0%, 55% { background-position: 100% 0; } 80%, 100% { background-position: -40% 0; } }
}

/* Reduced motion: alles statisch maar volledig leesbaar */
@media (prefers-reduced-motion: reduce) {
  .demo, .demo-vlak, .demo-taak, .demo-regel, .demo-waarom, .demo-kpis, .demo-kpi, .preview-zwevend, .story-stap, .rail-punt, .demo-wissel span { transition: none !important; animation: none !important; }
  .demo-cursor { display: none; }
  .story-stage .demo { transform: none !important; }
}

/* Responsief */
@media (max-width: 940px) {
  .ob-stap { grid-template-columns: 1fr; }
  .ob-visual { max-width: 340px; }
}
@media (max-width: 720px) {
  .story-plak { height: auto; position: relative; padding: 16px 0; perspective: none; }
  .story-stappen { margin-top: 0; padding: 0 0 30px; }
  .story-stap { margin: 18px auto; max-width: calc(100vw - 40px); }
  .story-stage { width: calc(100vw - 28px); }
  .demo { grid-template-columns: 1fr; }
  .demo-kpis { grid-template-columns: 1fr 1fr; }
  .demo-kanban { grid-template-columns: 1fr; }
  .demo-waarom { grid-template-columns: 1fr 1fr; }
  .story-stage .preview-zwevend { display: none; }
  .venster-tijd { display: none; }
  .laptop-basis { display: none; }
  .laptop-scherm { border-radius: 12px; padding: 8px; }
}
@media (max-width: 1180px) {
  .story-stage .zw-cash { right: -6px; top: -20px; }
  .story-stage .zw-marge { left: -6px; bottom: -16px; }
}

/* Takenpagina: zachte datums + actieknoppen op compacte taken */
.ac-datum-zacht { color: var(--tekst-gedempt); font-weight: 500; }
.ac-taak .ac-acties { margin-top: 10px; }

/* Compacte taaklijstjes in onboarding-visuals */
.demo-taken { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.demo-taken li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--tekst); background: var(--grijs-50); border: 1px solid var(--rand); border-radius: 8px; padding: 6px 10px; }
.demo-taken em { font-style: normal; margin-left: auto; font-size: 10.5px; color: var(--rood-tekst); font-weight: 600; white-space: nowrap; }

/* ═══ VERFIJNINGSRONDE — AC-duidelijkheid, datastroom, herkenning, calc ══ */

/* Action Center in de demo: titel, kolomstatussen, duidelijke afronding */
.demo-ac-titel { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--tekst); }
.demo-ac-titel span { font-weight: 500; color: var(--tekst-gedempt); }
.kolom-stip { width: 7px; height: 7px; border-radius: 50%; flex: none; margin-right: 6px; display: inline-block; }
.stip-doen { background: var(--blauw); }
.stip-bezig { background: var(--amber); }
.stip-af { background: var(--groen); }
.demo-kolomkop { display: flex; align-items: center; }
.demo-kolomkop .demo-wissel { margin-left: auto; }
.demo-kolom-af { background: var(--groen-zacht); border-color: var(--groen-rand); }
.demo-af-tijd { font-style: normal; margin-left: auto; font-size: 9px; color: var(--groen-tekst); font-weight: 600; white-space: nowrap; }
.demo-af span { color: var(--tekst-zacht); }
.demo-af { border-color: var(--groen-rand); }
@media (prefers-reduced-motion: no-preference) {
  html.js .story-stage[data-stap="7"] .demo-taak-zending-af .ac-vink { animation: vink-pop .5s var(--ease) .5s backwards; }
  @keyframes vink-pop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* Engine: datapunten stromen door de trechter */
.stroom-punt { fill: var(--blauw); opacity: .85; filter: drop-shadow(0 0 3px rgba(30, 91, 214, .55)); }
@media (prefers-reduced-motion: reduce) { .stroom-punt { display: none; } }
.engine-feiten { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 20px; font-size: 12px; color: var(--tekst-zacht); border-top: 1px solid var(--rand); padding: 10px 0; margin: 2px 0 8px; }
.engine-feiten span { display: flex; justify-content: space-between; gap: 10px; }
.engine-feiten b { color: var(--tekst); font-weight: 600; white-space: nowrap; }
.engine-feiten b.rood { color: var(--rood-tekst); }

/* Herkenning: te veel vs te weinig ingekocht */
.pijn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.pijn-kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); padding: 24px 26px; box-shadow: var(--schaduw-1); }
.pijn-label { display: inline-flex; font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--amber-tekst); background: var(--amber-zacht); border-radius: 7px; padding: 3px 10px; margin-bottom: 12px; }
.pijn-kaart:nth-child(2) .pijn-label { color: var(--rood-tekst); background: var(--rood-zacht); }
.pijn-label-groen { color: var(--groen-tekst); background: var(--groen-zacht); }
.pijn-kaart h3 { font-size: 19px; font-weight: 650; letter-spacing: -.018em; line-height: 1.35; margin: 0 0 14px; }
.pijn-tekst { font-size: 14px; color: var(--tekst-zacht); line-height: 1.65; margin: 12px 0 0; }
.pijn-tekst b { color: var(--tekst); }
.pijn-balken { display: flex; flex-direction: column; gap: 8px; }
.pijn-balk { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 10px; font-size: 11.5px; color: var(--tekst-gedempt); }
.pijn-balk em { font-style: normal; font-weight: 600; font-size: 11px; }
.pb { display: block; height: 9px; border-radius: 5px; background: var(--grijs-100); overflow: hidden; position: relative; }
.pb b { position: absolute; inset: 0; width: var(--b, 50%); border-radius: 5px; background: var(--amber); }
.pb-vol { background: var(--amber-zacht); }
.pb-vol b, .pb b.pb-amber { background: var(--amber); }
.pb b.pb-rood { background: var(--rood); }
.pb b.pb-groen { background: var(--groen); }
.pijn-midden { max-width: 720px; margin: 0 auto; text-align: center; }
.pijn-midden-kaart { background: var(--wit); border: 1px solid var(--groen-rand); border-top: 3px solid var(--groen); border-radius: var(--r-l); padding: 24px 28px; box-shadow: var(--schaduw-2); text-align: left; }
.pijn-midden .onderschrift { margin-top: 14px; }

/* Winstcalculator: invoer, resultaten, waterval, inkoopimpact */
.calc-in { padding: 26px 28px; border-right: 1px solid var(--rand); }
.calc-groep { margin-bottom: 20px; }
.calc-groep h4 { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-gedempt); margin: 0 0 10px; }
.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.veld label { display: block; font-size: 11.5px; color: var(--tekst-zacht); margin-bottom: 4px; line-height: 1.3; }
.veld-in { display: flex; align-items: center; gap: 6px; background: var(--grijs-50); border: 1px solid var(--rand); border-radius: 8px; padding: 0 10px; height: 36px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.veld-in:focus-within { border-color: var(--blauw); box-shadow: 0 0 0 3px var(--blauw-zacht); background: var(--wit); }
.veld-in i { font-style: normal; font-size: 12px; color: var(--tekst-gedempt); flex: none; }
.veld-in input { width: 100%; min-width: 0; border: 0; background: transparent; font: 600 13px var(--mono); color: var(--tekst); outline: none; padding: 0; }
.calc-uit { padding: 26px 28px; background: var(--grijs-50); display: flex; flex-direction: column; gap: 18px; }
.calc-hoofd-kpi { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.calc-hoofd-kpi span { font-size: 12px; color: var(--tekst-gedempt); }
.calc-hoofd-kpi b { font-family: var(--mono); font-size: 30px; font-weight: 600; letter-spacing: -.035em; transition: color .2s; }
.calc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.calc-kpis > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--rand); padding-bottom: 7px; }
.calc-kpis span { font-size: 11.5px; color: var(--tekst-gedempt); }
.calc-kpis b { font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.waterval { display: flex; flex-direction: column; gap: 6px; }
.wf-rij { display: grid; grid-template-columns: 138px 1fr 76px; align-items: center; gap: 10px; font-size: 11.5px; color: var(--tekst-zacht); }
.wf-rij em { font-style: normal; font-family: var(--mono); font-weight: 600; font-size: 11.5px; text-align: right; color: var(--tekst); white-space: nowrap; }
.wf-rij i { display: block; height: 8px; border-radius: 4px; background: var(--grijs-100); overflow: hidden; position: relative; }
.wf-rij i b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: #9db8e8; transition: width .3s var(--ease); }
.wf-start i b { background: var(--blauw); }
.wf-winst { padding-top: 4px; border-top: 1px solid var(--rand); }
.wf-winst span, .wf-winst em { font-weight: 650; color: var(--tekst); }
.calc-impact { grid-column: 1 / -1; border-top: 1px solid var(--rand); padding: 24px 28px; }
.impact-kop { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.impact-kop h4 { font-size: 15px; font-weight: 650; margin: 0; }
.impact-kop p { font-size: 13px; color: var(--tekst-gedempt); margin: 0; }
.impact-in { display: grid; grid-template-columns: 220px 220px; gap: 14px; margin-bottom: 14px; }
.impact-uit { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; margin-bottom: 14px; }
.impact-uit > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--grijs-100); padding-bottom: 7px; }
.impact-uit span { font-size: 11.5px; color: var(--tekst-gedempt); }
.impact-uit b { font-family: var(--mono); font-size: 13px; font-weight: 600; white-space: nowrap; }
.impact-advies { font-size: 13.5px; font-weight: 600; border-radius: 9px; padding: 10px 14px; margin: 0; }
.impact-advies.groen { color: var(--groen-tekst); background: var(--groen-zacht); }
.impact-advies.amber { color: var(--amber-tekst); background: var(--amber-zacht); }
.impact-advies.rood { color: var(--rood-tekst); background: var(--rood-zacht); }
.calc-impact .onderschrift { margin-top: 10px; text-align: left; }

@media (max-width: 940px) {
  .pijn { grid-template-columns: 1fr; }
  .calc { grid-template-columns: 1fr; }
  .calc-in { border-right: 0; border-bottom: 1px solid var(--rand); }
  .impact-in { grid-template-columns: 1fr 1fr; }
  .impact-uit { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .velden { grid-template-columns: 1fr; }
  .calc-kpis { grid-template-columns: 1fr; }
  .impact-in, .impact-uit { grid-template-columns: 1fr; }
  .wf-rij { grid-template-columns: 108px 1fr 70px; }
}
.pijn-visual { margin: 4px 0 2px; }

/* ═══ CALCULATOR-APP — /tools/winstcalculator/ + homepage-preview (B-021) ═
   Spacing-systeem: 8px label→veld · 12px tussen invoerrijen · 28px tussen
   groepen · 20-24px kaart-padding · 16px tussen resultaatkaarten. */
.tekstkop-s { padding-bottom: 10px; }
.capp-omhulsel { padding: 26px 0 80px; }
.capp { display: grid; grid-template-columns: minmax(320px, 34%) 1fr; gap: 20px; align-items: start; }

/* Invoerkolom: sticky applicatiepaneel */
.capp-in { position: sticky; top: 82px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-1); padding: 20px 22px; }
.capp-balk { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.capp-naam { width: 100%; height: 38px; border: 1px solid var(--rand); border-radius: 8px; background: var(--grijs-50); padding: 0 12px; font: 550 13.5px var(--sans); color: var(--tekst); outline: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.capp-naam:focus { border-color: var(--blauw); box-shadow: 0 0 0 3px var(--blauw-zacht); background: var(--wit); }
.capp-lijst { margin-top: 10px; border: 1px solid var(--rand); border-radius: 8px; padding: 8px; background: var(--grijs-50); display: flex; flex-direction: column; gap: 4px; }
.capp-lijst-rij { display: flex; align-items: center; gap: 8px; }
.capp-laad { flex: 1; text-align: left; border: 0; background: none; font: 550 13px var(--sans); color: var(--blauw); cursor: pointer; padding: 5px 6px; border-radius: 6px; }
.capp-laad:hover { background: var(--blauw-zacht); }
.capp-lijst-rij span { font-size: 11px; color: var(--tekst-uit); white-space: nowrap; }
.capp-weg { border: 0; background: none; color: var(--tekst-uit); font-size: 15px; cursor: pointer; padding: 2px 7px; border-radius: 6px; }
.capp-weg:hover { color: var(--rood-tekst); background: var(--rood-zacht); }
.capp-melding { margin: 10px 0 0; font-size: 12px; color: var(--groen-tekst); background: var(--groen-zacht); border-radius: 7px; padding: 7px 11px; }
.capp-in .calc-groep { border-top: 1px solid var(--rand); padding-top: 18px; margin: 18px 0 0; }
.capp-in .calc-groep:first-of-type { border-top: 0; padding-top: 6px; }
.groep-sub { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--tekst-uit); }
.groep-noot { font-size: 11.5px; color: var(--tekst-uit); line-height: 1.55; margin: 10px 0 0; }
.veld-select select { width: 100%; border: 0; background: transparent; font: 600 13px var(--mono); color: var(--tekst); outline: none; height: 100%; }
.schakel-klein { margin: 14px 0 12px; }
.schakel-klein button { height: 32px; font-size: 12px; padding: 0 12px; }
.capp-in .velden { gap: 12px 12px; }
.capp-in [data-alleen] { margin-bottom: 12px; }

/* Resultaatkolom */
.capp-uit { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.capp-kaart { padding: 22px 24px; }
.wo-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.wo-kop h3 { font-size: 16px; font-weight: 650; letter-spacing: -.015em; margin: 0; }
.wo-context { font-size: 12px; color: var(--tekst-gedempt); }
.wo-context b { color: var(--tekst); font-weight: 600; }
.wo-groot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.wo-kpi { display: flex; flex-direction: column; gap: 3px; border-left: 2px solid var(--grijs-100); padding-left: 12px; }
.wo-kpi-hoofd { border-left-color: var(--blauw); }
.wo-kpi span { font-size: 11.5px; color: var(--tekst-gedempt); }
.wo-kpi b { font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: -.035em; white-space: nowrap; }
.wo-kpi-hoofd b { font-size: 25px; }
.wo-kpi i { font-style: normal; font-size: 11px; color: var(--tekst-uit); }
.wo-klein { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 14px; border-top: 1px solid var(--rand); padding-top: 14px; }
.wo-klein > div { display: flex; flex-direction: column; gap: 2px; }
.wo-klein span { font-size: 11px; color: var(--tekst-gedempt); }
.wo-klein b { font-family: var(--mono); font-size: 14px; font-weight: 600; }

/* Inklapbare analyses */
.capp-detail { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-1); }
.capp-detail summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 15px 22px; font-size: 14px; font-weight: 650; color: var(--tekst); }
.capp-detail summary::-webkit-details-marker { display: none; }
.capp-detail summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--tekst-gedempt); border-bottom: 2px solid var(--tekst-gedempt); transform: rotate(45deg); transition: transform .25s var(--ease); flex: none; }
.capp-detail[open] summary::after { transform: rotate(-135deg); }
.detail-tag { font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--blauw); background: var(--blauw-zacht); border-radius: 6px; padding: 2px 8px; }
.detail-lijf { padding: 4px 22px 20px; }
.detail-rij { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--grijs-100); font-size: 13px; color: var(--tekst-zacht); }
.detail-rij:last-child { border-bottom: 0; }
.detail-rij em { display: block; font-style: normal; font-size: 11px; color: var(--tekst-uit); margin-top: 2px; }
.detail-rij b { font-family: var(--mono); font-size: 14.5px; font-weight: 600; color: var(--tekst); white-space: nowrap; }
.detail-veld { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: end; margin-top: 12px; }
.capp-detail .impact-in { grid-template-columns: 240px; margin: 8px 0 14px; }
.capp-detail .impact-uit { margin-bottom: 14px; }

/* Scenariovergelijking */
.scen { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 8px 0 12px; }
.scen-kolom { display: flex; flex-direction: column; gap: 4px; background: var(--grijs-50); border: 1px solid var(--rand); border-radius: 10px; padding: 13px 15px; }
.scen-nu { border-color: var(--blauw); background: var(--blauw-zacht); }
.scen-kolom span { font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-gedempt); }
.scen-kolom b { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--tekst-zacht); }
.scen-kolom i { font-style: normal; font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: -.03em; }
.scen-kolom em { font-style: normal; font-size: 11px; color: var(--tekst-gedempt); }

/* Homepage-preview */
.cpre { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-2); overflow: hidden; max-width: 980px; margin: 0 auto; }
.cpre-in { padding: 24px 26px; border-right: 1px solid var(--rand); }
.cpre-uit { padding: 24px 26px; background: var(--grijs-50); display: flex; flex-direction: column; gap: 14px; }
.cpre-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); padding: 12px 0; }
.cpre-kpis > div { display: flex; flex-direction: column; gap: 2px; }
.cpre-kpis span { font-size: 11px; color: var(--tekst-gedempt); }
.cpre-kpis b { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.cpre-uit .knop { align-self: flex-start; }
.cpre-noot { font-size: 12px; color: var(--tekst-gedempt); margin: 0; }

/* Responsief */
@media (max-width: 1080px) {
  .capp { grid-template-columns: minmax(300px, 38%) 1fr; }
  .wo-groot, .wo-klein { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 940px) {
  .capp { grid-template-columns: 1fr; }
  .capp-in { position: relative; top: 0; max-height: none; overflow: visible; }
  .cpre { grid-template-columns: 1fr; }
  .cpre-in { border-right: 0; border-bottom: 1px solid var(--rand); }
}
@media (max-width: 720px) {
  .wo-groot, .wo-klein { grid-template-columns: 1fr 1fr; }
  .scen { grid-template-columns: 1fr; }
  .detail-veld { grid-template-columns: 1fr; }
  .capp-kaart { padding: 18px; }
  .capp-detail summary { padding: 14px 18px; }
  .detail-lijf { padding: 2px 18px 16px; }
}
.capp-lijst[hidden], .capp-melding[hidden] { display: none; }

/* Mobiele sticky resultaatbalk op de calculatorpagina */
.capp-mbalk { display: none; }
@media (max-width: 940px) {
  .capp-mbalk { position: sticky; top: 0; z-index: 6; display: flex; align-items: baseline; gap: 10px; background: var(--wit); border: 1px solid var(--rand); border-radius: 0 0 12px 12px; box-shadow: var(--schaduw-2); padding: 10px 16px; margin: -8px 0 4px; }
  .capp-mbalk > span:first-child { font-size: 12px; color: var(--tekst-gedempt); }
  .capp-mbalk b { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
  .capp-mbalk-sub { margin-left: auto; font-size: 12px; color: var(--tekst-gedempt); }
}

/* ═══ ONBOARDING-PROTOTYPE (/app/) — B-025 ═══════════════════════════════ */
.proto-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--navy); color: #cdd9ec; font-size: 12px; padding: 9px 18px; }
.proto-badge { background: var(--blauw); color: #fff; font-size: 10.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; padding: 2px 8px; flex: none; }
.proto-banner b { color: #fff; }
.proto-reset { margin-left: auto; border: 1px solid rgba(255,255,255,.3); background: none; color: #fff; font-size: 11.5px; border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.proto-reset:hover { background: rgba(255,255,255,.12); }
.proto-stappen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 18px; background: var(--grijs-50); border-bottom: 1px solid var(--rand); }
.proto-stap { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tekst-gedempt); }
.proto-stap i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--wit); border: 1.5px solid var(--rand-sterk); font-size: 10px; display: inline-flex; align-items: center; justify-content: center; }
.proto-stap.af { color: var(--blauw); } .proto-stap.af i { border-color: var(--blauw); color: var(--blauw); }
.proto-stap.actief { color: var(--tekst); font-weight: 600; } .proto-stap.actief i { background: var(--blauw); border-color: var(--blauw); color: #fff; }
.proto-stap-lijn { width: 14px; height: 1.5px; background: var(--rand); flex: none; }

.proto-omhulsel { max-width: 560px; margin: 0 auto; padding: 40px 20px 90px; }
.proto-omhulsel-breed { max-width: 1060px; margin: 0 auto; padding: 34px 20px 90px; }
.proto-kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-2); padding: 28px 30px; }
.proto-kaart-breed { max-width: none; }
.proto-titel { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 6px; }
.proto-sub { font-size: 14px; color: var(--tekst-zacht); line-height: 1.6; margin: 0 0 20px; }
.proto-kaart .veld { margin-bottom: 13px; }
.proto-breed { width: 100%; justify-content: center; margin-top: 6px; }
.proto-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; }
.proto-linkknop { border: 0; background: none; color: var(--blauw); font-size: 12.5px; cursor: pointer; padding: 0; text-decoration: underline; }
.proto-scheiding { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: var(--tekst-uit); font-size: 12px; }
.proto-scheiding::before, .proto-scheiding::after { content: ""; flex: 1; height: 1px; background: var(--rand); }
.proto-fout { font-size: 13px; color: var(--rood-tekst); background: var(--rood-zacht); border-radius: 8px; padding: 9px 13px; margin: 0 0 12px; }
.proto-sim { font-size: 13px; color: var(--tekst-zacht); background: var(--blauw-zacht); border: 1px dashed var(--blauw); border-radius: 9px; padding: 11px 14px; margin: 0 0 16px; }
.proto-sim b { font-size: 16px; color: var(--navy); letter-spacing: .12em; }
.proto-akkoord { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--tekst-zacht); margin: 0 0 10px; cursor: pointer; }
.proto-akkoord input { margin-top: 2px; accent-color: var(--blauw); }
.veld-optioneel { font-style: normal; font-size: 10.5px; color: var(--tekst-uit); }

.proto-vraag { border-top: 1px solid var(--rand); padding: 16px 0 6px; }
.proto-vraag:first-child { border-top: 0; padding-top: 0; }
.proto-vraag h3 { font-size: 14px; font-weight: 600; margin: 0 0 10px; }
.proto-opties { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.proto-optie { border: 1px solid var(--rand-sterk); background: var(--wit); border-radius: 999px; padding: 7px 15px; font-size: 13px; color: var(--tekst-zacht); cursor: pointer; transition: all .2s var(--ease); }
.proto-optie:hover { border-color: var(--blauw); color: var(--blauw); }
.proto-optie.aan { background: var(--blauw); border-color: var(--blauw); color: #fff; font-weight: 600; }

.proto-tweekolom { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.proto-tweekolom-gelijk { grid-template-columns: 1.2fr 1fr; }
.proto-score { position: sticky; top: 20px; background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-1); padding: 18px 20px; }
.proto-score h3 { display: flex; justify-content: space-between; font-size: 13.5px; margin: 0 0 12px; }
.proto-score h3 b { font-size: 17px; }
.proto-score-rij { display: grid; grid-template-columns: 1fr 70px 76px; align-items: center; gap: 10px; font-size: 12px; color: var(--tekst-zacht); padding: 5px 0; }
.proto-score-rij em { font-style: normal; text-align: right; font-size: 11px; color: var(--tekst-gedempt); white-space: nowrap; }
.ps-baan { display: block; height: 7px; border-radius: 4px; background: var(--grijs-100); overflow: hidden; position: relative; }
.ps-baan b { position: absolute; inset: 0; border-radius: 4px; }
.ps-groen { background: var(--groen); } .ps-amber { background: var(--amber); } .ps-rood { background: var(--rood); }

.proto-koppel { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-1); padding: 18px 20px; margin-bottom: 12px; }
.proto-koppel-kop { display: flex; align-items: center; gap: 10px; }
.proto-koppel-kop h3 { font-size: 15px; margin: 0; }
.proto-tag { font-size: 10px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--blauw); background: var(--blauw-zacht); border-radius: 6px; padding: 2px 8px; }
.proto-tag-grijs { color: var(--tekst-zacht); background: var(--grijs-100); }
.proto-koppel-sub { font-size: 12.5px; color: var(--tekst-gedempt); margin: 6px 0 10px; }
.proto-status { font-size: 13px; margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--grijs-50); color: var(--tekst-zacht); }
.proto-status.groen { color: var(--groen-tekst); background: var(--groen-zacht); }
.proto-status.rood { color: var(--rood-tekst); background: var(--rood-zacht); }
.proto-kaartvoet { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }

.proto-blok { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-1); padding: 18px 20px; margin-bottom: 14px; }
.proto-blok h3 { font-size: 14.5px; margin: 0 0 12px; }
.proto-blok-sub { font-weight: 500; font-size: 12px; color: var(--tekst-gedempt); }
.proto-kostrij { display: grid; grid-template-columns: 1fr auto 150px auto; gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--grijs-100); }
.proto-kostrij:last-child { border-bottom: 0; }
.proto-kostnaam { font-size: 13px; color: var(--tekst); }
.proto-kostveld { height: 32px; }
.proto-niveaus { background: var(--blauw-zacht); border-radius: var(--r); padding: 16px 20px; margin: 16px 0; }
.proto-niveaus h3 { font-size: 14px; margin: 0 0 8px; }

.proto-appbalk { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.proto-appbalk-rechts { display: flex; gap: 8px; align-items: center; }
.proto-waarschuwing { font-size: 12.5px; color: var(--tekst-zacht); background: var(--amber-zacht); border: 1px solid var(--amber-rand); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.proto-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 18px; }
.proto-kpi { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 13px 16px; display: flex; flex-direction: column; gap: 3px; }
.proto-kpi span { font-size: 11.5px; color: var(--tekst-gedempt); }
.proto-kpi b { font-family: var(--mono); font-size: 19px; font-weight: 600; letter-spacing: -.03em; }
.proto-kpi i { font-style: normal; font-size: 11px; color: var(--tekst-uit); }
.proto-confidence { background: var(--grijs-50); border: 1px solid var(--rand); border-radius: 9px; padding: 12px 14px; margin: 12px 0; }
.proto-confidence-kop { display: flex; justify-content: space-between; font-size: 13px; font-weight: 650; margin-bottom: 8px; }
.proto-confidence-kop b { font-size: 16px; color: var(--blauw); }
.proto-confidence ul { list-style: none; margin: 0 0 8px; padding: 0; }
.proto-confidence li { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--tekst-zacht); padding: 3px 0; border-bottom: 1px solid var(--grijs-100); }
.proto-confidence li em { font-style: normal; color: var(--tekst-gedempt); }

.proto-kanban { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: start; }
.proto-kolom { background: var(--grijs-50); border: 1px solid var(--rand); border-radius: var(--r-l); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.proto-kolom-af { background: var(--groen-zacht); border-color: var(--groen-rand); }
.proto-kolomkop { font-size: 11.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tekst-gedempt); display: flex; justify-content: space-between; padding: 0 2px; }
.proto-taak { background: var(--wit); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 14px; box-shadow: var(--schaduw-1); }
.proto-taak-kop { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.proto-bron { font-size: 10.5px; color: var(--tekst-gedempt); background: var(--grijs-100); border-radius: 6px; padding: 2px 8px; }
.proto-taak b { display: block; font-size: 13.5px; margin-bottom: 4px; }
.proto-taak p { font-size: 12px; color: var(--tekst-zacht); line-height: 1.5; margin: 0 0 10px; }
.proto-taak-voet { display: flex; gap: 8px; flex-wrap: wrap; }
.proto-logrij { border-bottom: 1px solid var(--grijs-100); padding: 8px 0; }
.proto-logrij p { margin: 3px 0 0; font-size: 13px; }

.proto-feedback { position: fixed; right: 18px; bottom: 18px; z-index: 60; border: 1px solid var(--rand-sterk); background: var(--wit); color: var(--tekst-zacht); font-size: 12.5px; border-radius: 999px; padding: 9px 16px; cursor: pointer; box-shadow: var(--schaduw-2); }
.proto-feedback:hover { border-color: var(--blauw); color: var(--blauw); }
.proto-feedback-vorm { position: fixed; right: 18px; bottom: 64px; z-index: 60; width: min(340px, calc(100vw - 36px)); background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r-l); box-shadow: var(--schaduw-3); padding: 16px 18px; }
.proto-feedback-vorm label { display: block; font-size: 12.5px; color: var(--tekst-zacht); margin-bottom: 8px; }
.proto-feedback-vorm textarea { width: 100%; border: 1px solid var(--rand); border-radius: 8px; padding: 8px 10px; font: 13px var(--sans); margin-bottom: 10px; }
.proto-feedback-acties { display: flex; justify-content: flex-end; gap: 8px; }

@media (max-width: 940px) {
  .proto-tweekolom, .proto-tweekolom-gelijk { grid-template-columns: 1fr; }
  .proto-score { position: relative; top: 0; }
  .proto-kpis { grid-template-columns: 1fr 1fr; }
  .proto-kanban { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .proto-kostrij { grid-template-columns: 1fr 120px; }
  .proto-kostrij .demo-zacht.num { display: none; }
  .proto-kpis { grid-template-columns: 1fr; }
}

/* ═══ DASHBOARD-APP v2 — premium zijbalk + pagina's (B-026) ══════════════ */
.proto-app { display: grid; grid-template-columns: 248px 1fr; max-width: 1400px; margin: 0 auto; min-height: 70vh; }
.pz { background: var(--wit); border-right: 1px solid var(--rand); display: flex; flex-direction: column; padding: 14px 12px; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; }
.pz-org { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid var(--rand); background: var(--grijs-50); border-radius: 10px; padding: 9px 11px; cursor: pointer; margin-bottom: 12px; transition: border-color .2s var(--ease); }
.pz-org:hover { border-color: var(--rand-sterk); }
.pz-org-teken { width: 26px; height: 26px; border-radius: 7px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pz-org-naam { font-size: 13px; font-weight: 600; color: var(--tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-org-pijl { width: 13px; height: 13px; margin-left: auto; color: var(--tekst-gedempt); flex: none; }
.pz-nav { flex: 1; }
.pz-groepkop { display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; font-size: 10.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-uit); padding: 12px 10px 5px; position: relative; }
.pz-groepkop::after { content: ""; position: absolute; right: 10px; top: 16px; width: 6px; height: 6px; border-right: 1.5px solid var(--tekst-uit); border-bottom: 1.5px solid var(--tekst-uit); transform: rotate(45deg); transition: transform .2s var(--ease); }
.pz-groepkop.dicht::after { transform: rotate(-45deg); }
.pz-groep { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.pz-groep.dicht { display: none; }
.pz-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 550; color: var(--tekst-zacht); text-decoration: none; padding: 8px 10px; border-radius: 8px; transition: background .15s var(--ease), color .15s var(--ease); }
.pz-item svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; opacity: .75; }
.pz-item:hover { background: var(--grijs-50); color: var(--tekst); text-decoration: none; }
.pz-item.aan { background: var(--blauw-zacht); color: var(--blauw); font-weight: 650; }
.pz-item.aan svg { opacity: 1; }
.pz-uit { color: var(--tekst-uit); cursor: default; }
.pz-uit i { font-style: normal; margin-left: auto; font-size: 9.5px; background: var(--grijs-100); border-radius: 5px; padding: 1px 6px; }
.pz-uit:hover { background: none; color: var(--tekst-uit); }
.pz-badge { margin-left: auto; min-width: 17px; height: 17px; border-radius: 9px; color: #fff; font-size: 10px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; font-style: normal; }
.pz-badge.rood { background: var(--rood); }
.pz-badge.amber { background: var(--amber); color: #1a1200; }  /* donkere tekst: 5,4:1 i.p.v. 3,5:1 met wit */
.pz-voet { border-top: 1px solid var(--rand); padding-top: 10px; display: flex; align-items: center; gap: 8px; }
.pz-profiel { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pz-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--blauw-zacht); color: var(--blauw); font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pz-profiel-naam { font-size: 12.5px; font-weight: 550; color: var(--tekst-zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-uitloggen { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--tekst-gedempt); padding: 5px; border-radius: 7px; }
.pz-uitloggen:hover { background: var(--grijs-50); color: var(--tekst); }
.pz-uitloggen svg { width: 16px; height: 16px; display: block; }

.proto-main { padding: 24px 28px 90px; min-width: 0; background: var(--grijs-50); }
.pm-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pm-kop h1 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 3px; }
.pm-kop p { font-size: 13px; color: var(--tekst-gedempt); margin: 0; }
.pm-sync { font-size: 11.5px; color: var(--tekst-uit); background: var(--wit); border: 1px solid var(--rand); border-radius: 999px; padding: 5px 12px; }
.pm-sectiekop { font-size: 13px; font-weight: 650; letter-spacing: .02em; color: var(--tekst); margin: 20px 0 10px; }
.pm-sectiekop span { color: var(--tekst-gedempt); font-weight: 500; }
.pm-actie { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--wit); border: 1px solid var(--rand); border-left: 3px solid var(--rand-sterk); border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; box-shadow: var(--schaduw-1); }
.pm-actie-kritiek { border-left-color: var(--rood-tekst); }
.pm-actie-hoog { border-left-color: var(--amber-tekst); }
.pm-actie-normaal { border-left-color: var(--blauw); }
.pm-actie b { font-size: 13.5px; display: block; margin-bottom: 2px; }
.pm-actie p { font-size: 12.5px; color: var(--tekst-zacht); margin: 0; line-height: 1.5; }
.pm-actie .knop { flex: none; }
.pm-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }

.pm-staafjes { display: flex; align-items: flex-end; gap: 3px; height: 110px; }
.pm-staafjes i { flex: 1; background: #9db8e8; border-radius: 3px 3px 0 0; min-height: 4px; }
.pm-staafjes i.oos { background: var(--rood); opacity: .75; }
.pm-seizoen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pm-seizoen-m { background: var(--grijs-50); border: 1px solid var(--rand); border-radius: 8px; padding: 7px 9px; display: flex; flex-direction: column; gap: 2px; }
.pm-seizoen-m span { font-size: 10.5px; color: var(--tekst-gedempt); text-transform: uppercase; letter-spacing: .04em; }
.pm-seizoen-m b { font-size: 13px; }
.pm-seizoen-m.piek { background: var(--blauw-zacht); border-color: var(--blauw); }
.pm-seizoen-m.piek b { color: var(--blauw); }
.pm-seizoen-m.dal b { color: var(--tekst-gedempt); }

.pm-heatmap { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.pm-heatmap i { aspect-ratio: 1; border-radius: 3px; min-width: 0; }
.hm-verkoop { background: #9db8e8; }
.hm-lage-voorraad { background: var(--amber); opacity: .75; }
.hm-uitverkocht { background: var(--rood); }
.hm-nul-met-voorraad { background: var(--wit); border: 1.5px solid var(--rand-sterk); }
.hm-promo { background: var(--navy); }
.pm-heatmap-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11px; color: var(--tekst-gedempt); }
.pm-heatmap-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.pm-heatmap-legenda i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

.pm-flow { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.pm-flow-stap { flex: 1; min-width: 96px; background: var(--grijs-50); border: 1px solid var(--rand); border-radius: 9px; padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; text-align: center; }
.pm-flow-stap b { font-size: 16px; }
.pm-flow-stap span { font-size: 11px; color: var(--tekst-zacht); }
.pm-flow-stap i { font-style: normal; font-size: 9.5px; color: var(--tekst-uit); }
.pm-flow-pijl { align-self: center; width: 14px; height: 1.5px; background: var(--rand-sterk); flex: none; position: relative; }
.pm-flow-pijl::after { content: ""; position: absolute; right: 0; top: -2.5px; border-left: 5px solid var(--rand-sterk); border-top: 3px solid transparent; border-bottom: 3px solid transparent; }

.pm-milestones { display: flex; gap: 0; flex-wrap: wrap; margin-top: 8px; }
.pm-mijlpaal { flex: 1; min-width: 120px; position: relative; padding: 0 12px 0 22px; }
.pm-mijlpaal::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: -8px; width: 2px; background: var(--rand); }
.pm-mijlpaal:last-child::before { display: none; }
.pm-mijlpaal i { position: absolute; left: 2px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--wit); border: 2.5px solid var(--rand-sterk); }
.pm-mijlpaal.af i { background: var(--groen); border-color: var(--groen-tekst); }
.pm-mijlpaal.laat i { border-color: var(--amber-tekst); background: var(--amber-zacht); }
.pm-mijlpaal b { display: block; font-size: 12px; }
.pm-mijlpaal span { font-size: 11px; color: var(--tekst-gedempt); }
.pm-mijlpaal.laat span { color: var(--amber-tekst); }
.pm-bron-grid { display: grid; grid-template-columns: 90px 1fr 90px 1fr; gap: 4px 12px; font-size: 12px; margin-top: 8px; }
.pm-bron-grid span { color: var(--tekst-gedempt); }
.pm-bron-grid b { font-weight: 550; color: var(--tekst-zacht); }

@media (max-width: 1080px) {
  .pm-milestones { flex-direction: column; gap: 10px; }
  .pm-mijlpaal::before { bottom: -12px; }
  .pm-seizoen { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 940px) {
  .proto-app { grid-template-columns: 1fr; }
  .pz { position: relative; max-height: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; border-right: 0; border-bottom: 1px solid var(--rand); padding: 10px 14px; }
  .pz-org { width: auto; margin-bottom: 0; }
  .pz-nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 100%; order: 3; }
  .pz-groepkop { display: none; }
  .pz-groep, .pz-groep.dicht { display: contents; }
  .pz-item { padding: 6px 10px; font-size: 12.5px; }
  .pz-uit { display: none; }
  .pz-voet { border-top: 0; padding-top: 0; margin-left: auto; }
  .pz-profiel-naam { display: none; }
  .pm-tweekolom { grid-template-columns: 1fr; }
  .pm-heatmap { grid-template-columns: repeat(15, 1fr); }
  .proto-main { padding: 18px 16px 90px; }
  .pm-actie { flex-direction: column; align-items: flex-start; }
}

/* ═══ DARK MODE — alleen op prototype-pagina's, premium marine (B-027) ═══
   Het thema-attribuut staat op <html> (gezet vóór de eerste render, dus
   zonder flits); de :has-guard beperkt het effect tot app-pagina's zodat
   de marketingsite altijd licht blijft. Geen puur zwart: diep marine. */
html[data-thema="donker"][data-proto-pagina] {
  --navy: #dce7f8;
  --navy-diep: #0a1f3d;
  --blauw: #5b8ef0;
  --blauw-licht: #7aa3f5;
  --blauw-zacht: #16294d;
  --blauw-rand: #2a4270;

  --groen: #34c390;  --groen-zacht: #0e2b22;  --groen-rand: #1d4a3a;
  --amber: #e59a2f;  --amber-zacht: #2e2310;  --amber-rand: #4d3a1a;
  --rood:  #e66a6a;  --rood-zacht:  #331717;  --rood-rand:  #542525;
  /* in donkere modus zijn de heldere varianten juist de leesbare tekstkleur */
  --groen-tekst: #34c390;  --amber-tekst: #e59a2f;  --rood-tekst: #e66a6a;

  --wit: #111d33;
  --grijs-25: #0d1729;
  --grijs-50: #0b1424;
  --grijs-100: #1a2740;
  --rand: #223350;
  --rand-sterk: #31456b;

  --tekst: #e6ecf6;
  --tekst-zacht: #b3c0d6;
  --tekst-gedempt: #8494ae;
  --tekst-uit: #7a8db0;   /* was #5c6c88 — dat haalde maar 3,2:1 op een kaart; nu 5,0:1 */

  --schaduw-1: 0 1px 2px rgba(0,0,0,.35);
  --schaduw-2: 0 4px 14px rgba(0,0,0,.45);
  --schaduw-3: 0 10px 30px rgba(0,0,0,.55);
}
html[data-thema="donker"][data-proto-pagina] body { background: var(--grijs-25); color: var(--tekst); }
html[data-thema="donker"][data-proto-pagina] .proto-banner { background: #060d1a; }
html[data-thema="donker"][data-proto-pagina] .pz-org-teken { background: var(--blauw); }
/* Op de heldere accentkleuren is witte tekst te licht (2,3–3,2:1). Donkere tekst
   op dezelfde kleur haalt 5,8–7,9:1 en houdt de badge even opvallend. */
html[data-thema="donker"][data-proto-pagina] .pz-org-teken,
html[data-thema="donker"][data-proto-pagina] .pz-badge,
html[data-thema="donker"][data-proto-pagina] .pz-avatar,
html[data-thema="donker"][data-proto-pagina] .knop-primair { color: #0b1424; }
/* zelfde reden bij de primaire knop: het blauw is in donkere modus lichter gemaakt
   zodat blauwe tékst leesbaar is — dan is witte tekst eróp juist te licht (3,2:1). */
html[data-thema="donker"][data-proto-pagina] .pz-avatar { background: var(--blauw); }
html[data-thema="donker"][data-proto-pagina] .hm-verkoop { background: #3f5f9e; }
html[data-thema="donker"][data-proto-pagina] .hm-nul-met-voorraad { background: transparent; border-color: var(--rand-sterk); }
html[data-thema="donker"][data-proto-pagina] .hm-promo { background: #dce7f8; }
html[data-thema="donker"][data-proto-pagina] .pm-staafjes i { background: #3f5f9e; }
html[data-thema="donker"][data-proto-pagina] .pm-staafjes i.fc { background: repeating-linear-gradient(45deg, #2a4270 0 4px, #16294d 4px 8px); }
/* Tijdens de themawissel staan alle overgangen één frame uit — zie de uitleg
   hieronder en de schakelaar in app.js. */
.thema-wisselt, .thema-wisselt *, .thema-wisselt *::before, .thema-wisselt *::after {
  transition: none !important;
}

/* GEEN overgang op de themawissel — bewust.
   De kleuren komen uit custom properties (var(--wit) enz.). Chromium werkt een
   eigenschap met een var()-waarde niet bij zolang er een transition op staat:
   het attribuut wisselt, de variabele wisselt, maar de berekende achtergrond
   blijft op de oude waarde staan. Gevolg: de themaschakelaar deed zichtbaar
   niets tot je de pagina herlaadde. Getest in Chrome, en aangetoond door de
   transitie uit te zetten — dan klopt de kleur meteen.
   Een directe wissel is bovendien prettiger: je ziet het resultaat meteen. */

/* Thema-schakelaar in de zijbalkvoet */
.pz-thema { display: flex; gap: 2px; background: var(--grijs-100); border-radius: 8px; padding: 2px; }
.pz-thema button { border: 0; background: none; cursor: pointer; padding: 4px 7px; border-radius: 6px; color: var(--tekst-gedempt); line-height: 0; }
.pz-thema button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pz-thema button.aan { background: var(--wit); color: var(--blauw); box-shadow: var(--schaduw-1); }

/* Productdetail-tabs + export-menu + polish (B-027) */
.pdt-tabbalk { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--rand); margin: 18px 0 14px; }
.pdt-tab { border: 0; background: none; cursor: pointer; font: 550 13px var(--sans); color: var(--tekst-gedempt); padding: 9px 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .2s var(--ease), border-color .2s var(--ease); }
.pdt-tab:hover { color: var(--tekst); }
.pdt-tab.aan { color: var(--blauw); border-bottom-color: var(--blauw); font-weight: 650; }
.pdt-tab-uit { color: var(--tekst-uit); cursor: default; font-size: 12px; }
.pdt-tab-uit:hover { color: var(--tekst-uit); }
.pdt-piekrij td { background: var(--blauw-zacht); }
.pdt-loggrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 20px; }
.pdt-logrij { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--grijs-100); }
.pdt-logrij span { color: var(--tekst-gedempt); }
.pdt-logrij b { font-weight: 600; color: var(--tekst); text-align: right; }
.pdt-logrij.mist b { color: var(--amber-tekst); }
.pdt-logrij i { font-style: normal; font-size: 10.5px; color: var(--amber-tekst); }
.pm-export { position: relative; }
.pm-export-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; background: var(--wit); border: 1px solid var(--rand); border-radius: 10px; box-shadow: var(--schaduw-3); padding: 6px; min-width: 210px; display: flex; flex-direction: column; }
.pm-export-menu button { border: 0; background: none; text-align: left; font: 550 13px var(--sans); color: var(--tekst); padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.pm-export-menu button:hover:not(:disabled) { background: var(--blauw-zacht); color: var(--blauw); }
.pm-export-menu button:disabled { color: var(--tekst-uit); cursor: default; }
.pm-export-menu button span { font-weight: 500; font-size: 11px; color: var(--tekst-uit); }
.pm-staafjes-groot { height: 150px; }
.pm-staafjes .fc { background: repeating-linear-gradient(45deg, #c6dbfb 0 4px, #eaf1fe 4px 8px); }
.pm-nu { width: 2px; align-self: stretch; background: var(--navy); opacity: .5; flex: none; margin: 0 2px; }
.pm-aslabels { display: flex; justify-content: space-between; font-size: 10px; color: var(--tekst-uit); margin: 6px 0 10px; }
.proto-kpi, .proto-blok, .pm-actie { transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.proto-kpi:hover, .pm-actie:hover { box-shadow: var(--schaduw-2); transform: translateY(-1px); }
@media (max-width: 940px) { .pdt-loggrid { grid-template-columns: 1fr; } }

/* ── Auditronde 2026-07-29: vereenvoudiging & duidelijkheid ── */
.pz-binnenkort { margin: 14px 10px 0; font-size: 10.5px; line-height: 1.5; color: var(--tekst-uit); }
.pm-conclusie { margin: 10px 0 0; padding: 9px 12px; background: var(--blauw-zacht); border-radius: 8px; font-size: 12.5px; line-height: 1.55; color: var(--tekst); }
.pdt-status { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 12px 0 4px; padding: 12px 16px; background: var(--wit); border: 1px solid var(--rand); border-left: 3px solid var(--amber); border-radius: 10px; box-shadow: var(--schaduw-1); }
.pdt-status p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--tekst-gedempt); }
.pdt-status p b { color: var(--tekst); }
.pm-alles-af { grid-column: 1 / -1; padding: 12px 16px; background: var(--groen-zacht, #e8f6ef); border-radius: 10px; font-size: 13px; color: var(--tekst); margin-bottom: 4px; }
.pm-kolom-leeg { margin: 4px 2px; font-size: 12px; color: var(--tekst-uit); }
/* kleurenblindvriendelijk: uitverkochte maanden krijgen naast rood ook een arcering */
.pm-staafjes i.oos { background: repeating-linear-gradient(-45deg, var(--rood) 0 3px, #f5b8b8 3px 6px); opacity: .9; }
html[data-thema="donker"][data-proto-pagina] .pm-conclusie { background: rgba(72, 118, 214, .16); }
html[data-thema="donker"][data-proto-pagina] .pdt-status { background: var(--wit); }
html[data-thema="donker"][data-proto-pagina] .pm-alles-af { background: rgba(46, 160, 103, .16); }
html[data-thema="donker"][data-proto-pagina] .pm-staafjes i.oos { background: repeating-linear-gradient(-45deg, #b34d4d 0 3px, #5e2a2a 3px 6px); }
@media (max-width: 720px) { .pdt-status { flex-direction: column; align-items: stretch; } .pdt-status .knop { justify-content: center; } }
.pm-export-menu[hidden] { display: none; }

/* ── Winst-pagina (B-029) ── */
.pw-filterbalk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 14px 0 16px; }
.pw-filter { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 550; color: var(--tekst-gedempt); }
.pw-filter select { font: 500 13px var(--sans); color: var(--tekst); background: var(--wit); border: 1px solid var(--rand); border-radius: 9px; padding: 8px 12px; cursor: pointer; }
.pw-vergelijk { font-size: 12.5px; color: var(--tekst-uit); }
.pw-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.pw-kaart { background: var(--wit); border: 1px solid var(--rand); border-radius: var(--r); box-shadow: var(--schaduw-1); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.pw-kaart-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tekst); }
.pw-waarde { font-family: var(--mono); font-size: 24px; font-weight: 650; letter-spacing: -.03em; color: var(--blauw); }
.pw-tov { font-style: normal; font-size: 11.5px; color: var(--tekst-uit); }
.pw-badge { display: inline-flex; align-items: center; gap: 3px; font: 650 11.5px var(--sans); border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.pw-goed { background: var(--groen-zacht); color: #0b7a52; }
.pw-slecht { background: #fdeaea; color: #b3383f; }
.pw-gelijk { background: var(--grijs-100); color: var(--tekst-gedempt); }
.proto-kpi .pw-badge { margin-left: auto; }
.proto-kpi > span { display: flex; align-items: center; gap: 8px; }
.pw-kostrechts { display: flex; align-items: center; gap: 12px; }
.pw-staaf { display: block; width: 110px; height: 6px; border-radius: 4px; background: var(--grijs-100); overflow: hidden; }
.pw-staaf i { display: block; height: 100%; border-radius: 4px; background: var(--blauw); }
.pw-totaalrij { border-top: 1px solid var(--rand); }
@media (max-width: 940px) { .pw-kaarten { grid-template-columns: 1fr 1fr; } .pw-staaf { width: 64px; } }
@media (max-width: 560px) { .pw-kaarten { grid-template-columns: 1fr; } }
html[data-thema="donker"][data-proto-pagina] .pw-goed { background: rgba(46, 160, 103, .18); color: #5fd3a0; }
html[data-thema="donker"][data-proto-pagina] .pw-slecht { background: rgba(217, 83, 91, .18); color: #f0989d; }
html[data-thema="donker"][data-proto-pagina] .pw-waarde { color: #8fb3f4; }
.pw-negatief { color: var(--rood-tekst) !important; }

/* ── Formulieren (B-033): statusmeldingen, honeypot, kleine toelichting ── */
.form-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 12px 0 0; padding: 10px 14px; border-radius: 9px; font-size: 13.5px; line-height: 1.55; }
.form-status[hidden] { display: none; }
.form-goed { background: var(--groen-zacht, #e8f7f1); color: #0a6b48; border: 1px solid var(--groen-rand, #b6e5d2); }
.form-fout { background: #fdeceb; color: #9b2c22; border: 1px solid #f6c9c4; }
.form-bezig { background: var(--grijs-50); color: var(--tekst-gedempt); border: 1px solid var(--rand); }
.form-klein { font-size: 12px; color: var(--tekst-uit); margin: 14px 0 0; line-height: 1.6; }
.form-klein a { color: var(--tekst-gedempt); text-decoration: underline; }
form[data-formulier] textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--rand); border-radius: 9px; background: var(--wit); color: var(--tekst); resize: vertical; }
form[data-formulier] textarea:focus-visible { outline: 2px solid var(--blauw); outline-offset: 1px; border-color: var(--blauw); }
form[data-formulier] button[disabled] { opacity: .65; cursor: progress; }

/* ── Leveranciers & Instellingen (B-036) ── */
.proto-tag-groen { color: var(--groen-tekst); background: var(--groen-zacht); }
.pl-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.pl-feiten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 6px; }
.pl-feit { background: var(--grijs-50); border: 1px solid var(--rand); border-radius: 10px; padding: 11px 13px; display: flex; flex-direction: column; gap: 2px; }
.pl-feit span { font-size: 11px; color: var(--tekst-gedempt); }
.pl-feit b { font-size: 15px; letter-spacing: -.01em; }
.pl-feit i { font-style: normal; font-size: 10.5px; color: var(--tekst-uit); line-height: 1.35; }
.pl-actie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.pl-bevestigd { font-size: 13px; color: var(--groen-tekst); font-weight: 550; }
.pl-ok { color: var(--groen-tekst); }
.pl-leeg { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pi-actie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.pi-gebruiker { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.pi-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--blauw-zacht); color: var(--blauw); font-size: 14px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pi-gebruiker > div { flex: 1; }
.pi-thema { display: inline-flex; gap: 4px; background: var(--grijs-100); border-radius: 10px; padding: 4px; }
.pi-thema-knop { border: 0; background: none; cursor: pointer; font: 550 13px var(--sans); color: var(--tekst-zacht); padding: 8px 18px; border-radius: 7px; transition: background .15s var(--ease), color .15s var(--ease); }
.pi-thema-knop:hover { color: var(--tekst); }
.pi-thema-knop.aan { background: var(--wit); color: var(--tekst); box-shadow: var(--schaduw-1); }
.pi-gevaar { border-color: var(--rood-rand); }
.knop-gevaar { background: var(--rood-zacht); color: var(--rood-tekst); border: 1px solid var(--rood-rand); }
.knop-gevaar:hover { background: var(--rood); color: #fff; border-color: var(--rood); }
@media (max-width: 720px) { .pl-feiten { grid-template-columns: 1fr 1fr; } }

/* ── Mobiele leesbaarheid van detailrijen (eindcontrole 2026-07-29) ──
   .detail-rij zet label en waarde naast elkaar, en de waarde stond op
   white-space: nowrap. Bij lange waarden ("PO-016 · 2.400 stuks · onderweg
   (ZND-025)") liep die op een telefoon buiten het scherm: tot 109 px
   horizontale overloop op /app/leveranciers/. Op smalle schermen zetten we
   label en waarde daarom onder elkaar en laten we de waarde afbreken. */
@media (max-width: 560px) {
  .detail-rij { flex-direction: column; align-items: flex-start; gap: 3px; }
  .detail-rij b { white-space: normal; overflow-wrap: anywhere; }
  .detail-rij .pw-kostrechts { width: 100%; }
}

/* ── [hidden] moet altijd winnen (eindcontrole 2026-07-29) ──
   Een element met display:flex/grid/inline-flex negeert het hidden-attribuut,
   omdat de klasse-regel specifieker is. Dat kostte ons al drie keer een bug:
   het exportmenu stond open bij laden, een lijst bleef staan, en in de zijbalk
   hing een lege rode stip zonder betekenis omdat de badge "verborgen" was maar
   toch getoond werd. Deze regel voorkomt de hele categorie. */
[hidden] { display: none !important; }

/* ── Voorbeeldlabel bij dashboardweergaven op de marketingsite (B-038) ──
   Een bezoeker moet niet kunnen denken dat dit echte verkoopcijfers zijn. */
.app-voorbeeldlabel { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--tekst-gedempt); margin: 0 0 10px; line-height: 1.5; }
.app-voorbeeldlabel span { font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--amber-tekst); background: var(--amber-zacht);
  border: 1px solid var(--amber-rand); border-radius: 6px; padding: 2px 8px; }