/* ============================================================
   Adviesstraat — stijl
   Beeldtaal gelijk aan rotterdamseschaal.info: lichte pagina, witte
   kaarten, indigo accent, Instrument Sans, rechte hoeken van 8 px,
   kaarten van 14 px, een flauw raster in de hero, donkere voet.
   ============================================================ */

@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/instrument-sans-latin.e35fad09c70b.woff2") format('woff2-variations'), url("../fonts/instrument-sans-latin.e35fad09c70b.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Instrument Sans'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("../fonts/instrument-sans-latin-ext.e2385a017626.woff2") format('woff2-variations'), url("../fonts/instrument-sans-latin-ext.e2385a017626.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1EFF,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --kleur-inkt:#0f172a; --kleur-inkt-zacht:#4b5563; --kleur-pagina:#f5f5f6; --kleur-kaart:#ffffff;
  --kleur-zacht:#eef1f6; --kleur-lijn:#e4e4e9; --kleur-lijn-zacht:#f0f0f3;
  --kleur-accent:#4945ed; --kleur-accent-donker:#3b37cc; --kleur-accent-zacht:#edecfd;
  --kleur-donker:#0f172a; --kleur-op-donker:#ffffff; --kleur-op-donker-zacht:#94a3b8;
  --kleur-succes:#388e3c; --kleur-succes-zacht:#e8f5e9; --kleur-waarschuwing:#f57c00; --kleur-waarschuwing-zacht:#fff3e0;
  --kleur-fout:#d32f2f; --kleur-fout-zacht:#fdecea; --kleur-focus:#4945ed;
  --font:'Instrument Sans', ui-sans-serif, system-ui, 'Segoe UI', Arial, sans-serif;
  --radius-knop:8px; --radius-kaart:14px; --radius-veld:8px;
  --maat-kop-1:3.5rem; --maat-kop-2:2.5rem; --maat-kop-3:1.25rem;
  --schaduw-kaart:0 1px 2px rgba(15,23,42,.04), 0 12px 32px -18px rgba(15,23,42,.20);
  --schaduw-knop:0 1px 2px rgba(15,23,42,.10);
  --kop-hoogte:66px; --sectie:96px; --breedte-content:1200px; --breedte-formulier:720px;
}
@media (max-width:800px){ :root{ --sectie:56px; --maat-kop-1:2.25rem; --maat-kop-2:1.75rem; --kop-hoogte:60px; } }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--kop-hoogte) + 16px); }
body{ font-family:var(--font); font-size:1rem; line-height:1.6; color:var(--kleur-inkt); background:var(--kleur-pagina); -webkit-font-smoothing:antialiased; }
img,svg{ max-width:100%; height:auto; }
h1,h2,h3,h4{ font-weight:600; line-height:1.15; margin:0 0 .5em; }
h1{ font-size:var(--maat-kop-1); letter-spacing:-.03em; line-height:1.04; }
h2{ font-size:var(--maat-kop-2); letter-spacing:-.025em; line-height:1.1; }
h3{ font-size:var(--maat-kop-3); letter-spacing:-.01em; }
p{ margin:0 0 1em; }
a{ color:var(--kleur-accent); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
a:hover{ color:var(--kleur-accent-donker); text-decoration-thickness:2px; }
strong,b{ font-weight:600; }
:focus-visible{ outline:2px solid var(--kleur-focus); outline-offset:2px; border-radius:4px; }
.vh{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
[hidden]{ display:none!important; }

.label{ font-size:.75rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--kleur-inkt-zacht); margin:0 0 8px; }
.badge{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 12px; border-radius:999px; background:var(--kleur-accent-zacht);
  color:var(--kleur-accent-donker); font-size:.8125rem; font-weight:500; margin:0 0 20px; }
.badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.bijschrift{ color:var(--kleur-inkt-zacht); font-size:.875rem; }
.klein{ font-size:.8125rem; }
.lijst-schoon{ list-style:none; padding:0; margin:0; }
.puntenlijst{ list-style:none; padding-left:0; }
.puntenlijst li{ position:relative; padding-left:22px; margin-bottom:.5em; }
.puntenlijst li::before{ content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px; border-radius:2px; background:var(--kleur-accent); }
.getal{ font-variant-numeric:tabular-nums; }

/* --- layout --- */
.omhulsel{ max-width:var(--breedte-content); margin-inline:auto; padding-inline:24px; }
.smal{ max-width:var(--breedte-formulier); }
.sectie{ padding-block:var(--sectie); }
.sectie-zacht{ background:var(--kleur-zacht); }
.sectie-donker{ background:var(--kleur-donker); color:var(--kleur-op-donker); }
.sectie-donker h2,.sectie-donker h3{ color:var(--kleur-op-donker); }
.sectie-donker p,.sectie-donker li{ color:var(--kleur-op-donker-zacht); }
.sectie-donker .label{ color:var(--kleur-op-donker-zacht); }
.sectiekop{ max-width:760px; margin-bottom:48px; }
.sectiekop p{ color:var(--kleur-inkt-zacht); font-size:1.125rem; }
.sectie-donker .sectiekop p{ color:var(--kleur-op-donker-zacht); }
.raster{ display:grid; gap:24px; }
.raster-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.raster-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.raster-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1000px){ .raster-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px){ .raster-3,.raster-2{ grid-template-columns:1fr; } }
@media (max-width:560px){ .raster-4{ grid-template-columns:1fr; } }
.overslaan{ position:absolute; left:8px; top:-60px; z-index:100; background:var(--kleur-accent); color:#fff; padding:10px 16px; border-radius:var(--radius-knop); text-decoration:none; font-weight:600; }
.overslaan:focus{ top:8px; }

.conceptregel{ background:var(--kleur-donker); color:var(--kleur-op-donker); font-size:.8125rem; padding:8px 0; text-align:center; }
.conceptregel p{ margin:0; }
.conceptregel a{ color:#fff; }

/* --- kop --- */
.kop{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--kleur-lijn); background:rgba(245,245,246,.86); backdrop-filter:saturate(160%) blur(8px); }
.kop .omhulsel{ display:flex; align-items:center; gap:24px; min-height:var(--kop-hoogte); }
.merk{ text-decoration:none; color:inherit; flex-shrink:0; display:inline-flex; align-items:center; gap:10px; }
.merk img{ width:30px; height:30px; }
.merk-woord{ display:block; font-weight:700; font-size:.8125rem; line-height:1.06; letter-spacing:.055em; color:var(--kleur-inkt); text-transform:uppercase; white-space:nowrap; }
.merk-r1{ display:block; }
.merk-r2{ display:flex; align-items:center; }
.merk-tld{ color:var(--kleur-inkt-zacht); }
.merk-pin{ display:inline-block; width:3px; height:11px; margin-left:5px; background:var(--kleur-accent); transform:skewX(-20deg); }
.merk:hover .merk-woord{ text-decoration:underline; text-underline-offset:3px; }
.voet .merk-woord{ color:#fff; }
.voet .merk-tld{ color:var(--kleur-op-donker-zacht); }
.hoofdnav{ display:flex; gap:26px; align-items:center; margin-inline:auto; }
.hoofdnav a{ color:var(--kleur-inkt-zacht); text-decoration:none; font-weight:500; font-size:.9375rem; }
.hoofdnav a:hover{ color:var(--kleur-inkt); }
.hoofdnav a[aria-current="page"]{ color:var(--kleur-inkt); font-weight:600; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:7px; text-decoration-color:var(--kleur-accent); }
.kopacties{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.menuknop{ display:none!important; }
.menustreepjes{ width:15px; height:1.5px; background:currentColor; box-shadow:0 -5px 0 currentColor, 0 5px 0 currentColor; }
@media (max-width:980px){
  .menuknop{ display:inline-flex!important; margin-left:auto; }
  .hoofdnav{ display:none; position:absolute; top:var(--kop-hoogte); left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--kleur-kaart); border-bottom:1px solid var(--kleur-lijn); padding:8px 24px 16px; }
  .hoofdnav.open{ display:flex; }
  .hoofdnav a{ padding:12px 0; border-bottom:1px solid var(--kleur-lijn-zacht); }
  .kop .kopacties .knop-secundair{ display:none; }
}

/* --- knoppen --- */
.knop{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; font-family:inherit; font-size:.9375rem;
  font-weight:500; line-height:1; border-radius:var(--radius-knop); border:1px solid transparent; text-decoration:none; cursor:pointer; background:none; color:var(--kleur-inkt);
  transition:background-color .15s, border-color .15s, color .15s; white-space:nowrap; }
.knop:hover{ text-decoration:none; }
.knop-klein{ min-height:36px; padding:0 14px; font-size:.875rem; }
.knop-groot{ min-height:52px; padding:0 24px; font-size:1rem; }
.knop-primair{ background:var(--kleur-accent); color:#fff; box-shadow:var(--schaduw-knop); }
.knop-primair:hover{ background:var(--kleur-accent-donker); color:#fff; }
.knop-secundair{ background:var(--kleur-kaart); color:var(--kleur-inkt); border-color:var(--kleur-lijn); box-shadow:var(--schaduw-knop); }
.knop-secundair:hover{ background:var(--kleur-zacht); color:var(--kleur-inkt); }
.knop-gevaar{ background:var(--kleur-kaart); color:var(--kleur-fout); border-color:#f3c5c5; }
.knop-gevaar:hover{ background:var(--kleur-fout-zacht); color:var(--kleur-fout); }
.knop-tertiair{ color:var(--kleur-accent); padding:0; min-height:auto; text-decoration:underline; text-underline-offset:3px; }
.knop[disabled]{ opacity:.45; cursor:not-allowed; }
.op-donker .knop-primair{ background:#fff; color:var(--kleur-inkt); }
.op-donker .knop-primair:hover{ background:#e8e8ec; color:var(--kleur-inkt); }
.op-donker .knop-secundair{ background:transparent; color:#fff; border-color:rgba(255,255,255,.28); box-shadow:none; }
.op-donker .knop-secundair:hover{ background:rgba(255,255,255,.08); color:#fff; }
.knoppen{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }

/* --- hero --- */
.hero{ position:relative; overflow:hidden; background:var(--kleur-pagina); border-bottom:1px solid var(--kleur-lijn); padding-block:96px 88px; }
.hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--kleur-lijn) 1px, transparent 1px), linear-gradient(90deg, var(--kleur-lijn) 1px, transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%); mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%); opacity:.7; }
.hero .omhulsel{ position:relative; z-index:1; }
.hero-compact{ padding-block:64px 48px; }
.hero h1{ max-width:17ch; }
.hero-compact h1{ max-width:22ch; }
.hero p.intro{ color:var(--kleur-inkt-zacht); font-size:1.1875rem; max-width:58ch; }
.hero .knoppen{ margin-top:32px; }
.hero-voetregel{ margin:18px 0 0; font-size:.875rem; color:var(--kleur-inkt-zacht); }
.hero-raster{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:center; }
@media (max-width:1080px){ .hero-raster{ grid-template-columns:1fr; } .hero-mock{ display:none; } }

/* Beeld van het werkscherm, opgebouwd uit echte onderdelen */
.hero-mock{ background:var(--kleur-kaart); border:1px solid var(--kleur-lijn); border-radius:var(--radius-kaart); overflow:hidden;
  box-shadow:0 2px 8px rgba(15,23,42,.04), 0 24px 64px -24px rgba(15,23,42,.28); }
.hm-kop{ display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--kleur-lijn); font-size:.8125rem; }
.hm-kop b{ font-size:.9375rem; }
.hm-vlak{ background:var(--kleur-accent-zacht); padding:20px 22px 18px; }
.hm-vlak .label{ color:var(--kleur-accent-donker); margin-bottom:6px; }
.hm-bedrag{ font-weight:600; font-size:2.5rem; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.hm-bedrag small{ font-size:1rem; font-weight:500; color:var(--kleur-inkt-zacht); letter-spacing:0; }
.hm-lichaam{ padding:16px 22px 20px; }

/* --- kaarten --- */
.kaart{ background:var(--kleur-kaart); border:1px solid var(--kleur-lijn); border-radius:var(--radius-kaart); padding:28px; box-shadow:var(--schaduw-kaart); }
.kaart-compact{ padding:20px 22px; }
.kaart-zacht{ background:var(--kleur-zacht); border-color:transparent; box-shadow:none; }
.kaart-accent{ background:var(--kleur-accent-zacht); border-color:transparent; box-shadow:none; }
a.kaart{ text-decoration:none; display:block; color:inherit; }
a.kaart:hover{ border-color:var(--kleur-accent); }
.kaart h2{ font-size:var(--maat-kop-3); margin-top:0; }
.kaart h3{ margin-top:0; }
.kaart > :last-child{ margin-bottom:0; }
.kaart .kaarticoon{ width:40px; height:40px; border-radius:10px; background:var(--kleur-accent-zacht); color:var(--kleur-accent-donker);
  display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:16px; font-size:.9375rem; }
.sectie-donker .kaart{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); box-shadow:none; }
.sectie-donker .kaart h3{ color:#fff; }
.cijfer{ font-size:2.75rem; font-weight:600; letter-spacing:-.03em; line-height:1; margin:0 0 8px; font-variant-numeric:tabular-nums; }
.sectie-donker .cijfer{ color:#fff; }
.bron{ font-size:.75rem; color:var(--kleur-inkt-zacht); }
.sectie-donker .bron{ color:var(--kleur-op-donker-zacht); }

/* Citaat / stelling */
.stelling{ font-size:1.75rem; line-height:1.25; font-weight:600; letter-spacing:-.02em; max-width:30ch; margin:0; }
.stelling-accent{ border-left:3px solid var(--kleur-accent); padding-left:24px; }

/* Stappen van de straat */
.straat{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; counter-reset:stap; border:1px solid var(--kleur-lijn); border-radius:var(--radius-kaart); background:var(--kleur-kaart); overflow:hidden; }
.straat > div{ padding:24px 22px; border-right:1px solid var(--kleur-lijn); position:relative; }
.straat > div:last-child{ border-right:0; }
.straat .stapnummer{ margin-bottom:14px; }
.straat h3{ font-size:1.0625rem; margin-bottom:6px; }
.straat p{ font-size:.875rem; color:var(--kleur-inkt-zacht); margin:0; }
@media (max-width:980px){ .straat{ grid-template-columns:1fr; } .straat > div{ border-right:0; border-bottom:1px solid var(--kleur-lijn); } }
.stapnummer{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--kleur-accent); color:#fff; font-size:.875rem; font-weight:600; }

/* Prijzen */
.prijskaart{ display:flex; flex-direction:column; }
.prijskaart.uitgelicht{ border:2px solid var(--kleur-accent); }
.prijs{ font-size:3rem; font-weight:600; letter-spacing:-.03em; line-height:1; margin:14px 0 4px; font-variant-numeric:tabular-nums; }
.prijs small{ font-size:1rem; font-weight:500; color:var(--kleur-inkt-zacht); letter-spacing:0; }
.prijskaart ul{ margin:20px 0 28px; flex:1; }
.tabel-wrap{ overflow-x:auto; }
table.tabel{ width:100%; border-collapse:collapse; font-size:.9375rem; }
.tabel th,.tabel td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--kleur-lijn); vertical-align:top; }
.tabel th{ font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--kleur-inkt-zacht); background:var(--kleur-lijn-zacht); }
.tabel td.rechts,.tabel th.rechts{ text-align:right; }
.tabel tr:last-child td{ border-bottom:0; }
.tabel tbody tr:hover td{ background:#fafafb; }
.tabel a{ font-weight:500; }

/* FAQ */
details.faq{ border-bottom:1px solid var(--kleur-lijn); padding:18px 0; }
details.faq summary{ cursor:pointer; font-weight:600; font-size:1.0625rem; list-style:none; display:flex; justify-content:space-between; gap:16px; }
details.faq summary::after{ content:"+"; color:var(--kleur-accent); font-weight:600; }
details.faq[open] summary::after{ content:"–"; }
details.faq p{ margin:12px 0 0; color:var(--kleur-inkt-zacht); }

/* --- velden --- */
.veld{ display:block; margin-bottom:18px; }
.veld > span,.veld > label{ display:block; font-weight:600; margin-bottom:6px; font-size:.875rem; }
.veld .hulp,.helptext{ display:block; font-weight:400; color:var(--kleur-inkt-zacht); font-size:.8125rem; margin-top:4px; }
input[type=text],input[type=search],input[type=number],input[type=date],input[type=email],input[type=password],input[type=url],select,textarea{
  width:100%; min-height:44px; padding:10px 14px; font-family:inherit; font-size:.9375rem; color:var(--kleur-inkt);
  background:var(--kleur-kaart); border:1px solid var(--kleur-lijn); border-radius:var(--radius-veld); }
input[type=color]{ width:64px; height:44px; padding:4px; border:1px solid var(--kleur-lijn); border-radius:var(--radius-veld); background:#fff; }
input:focus-visible,select:focus-visible,textarea:focus-visible{ border-color:var(--kleur-accent); outline:2px solid var(--kleur-accent-zacht); outline-offset:0; }
input[type=range]{ width:100%; accent-color:var(--kleur-accent); }
input[type=checkbox],input[type=radio]{ accent-color:var(--kleur-accent); width:17px; height:17px; }
textarea{ min-height:80px; resize:vertical; }
.velden-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.velden-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 20px; }
@media (max-width:700px){ .velden-2,.velden-3{ grid-template-columns:1fr; } }
.invoer-eenheid{ display:flex; align-items:center; border:1px solid var(--kleur-lijn); border-radius:var(--radius-veld); background:#fff; }
.invoer-eenheid input{ border:0; min-width:0; }
.invoer-eenheid span{ padding:0 12px; color:var(--kleur-inkt-zacht); font-size:.875rem; white-space:nowrap; }
.errorlist{ list-style:none; padding:0; margin:6px 0 0; color:var(--kleur-fout); font-size:.8125rem; }
.form-fouten{ background:var(--kleur-fout-zacht); color:var(--kleur-fout); padding:12px 16px; border-radius:var(--radius-veld); margin-bottom:18px; font-size:.875rem; }
.form-fouten ul{ margin:0; padding-left:18px; }
.pillen{ display:flex; flex-wrap:wrap; gap:8px; }
.pil{ display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid var(--kleur-lijn); border-radius:999px; background:#fff; font-size:.875rem; cursor:pointer; }
.pil:has(input:checked){ border-color:var(--kleur-accent); background:var(--kleur-accent-zacht); color:var(--kleur-accent-donker); }
.pil input{ width:15px; height:15px; margin:0; }

/* --- meldingen --- */
.meldingen{ margin:16px 0 0; }
.melding{ padding:12px 16px; border-radius:var(--radius-veld); margin-bottom:10px; font-size:.9375rem; background:var(--kleur-accent-zacht); color:var(--kleur-accent-donker); }
.melding.success{ background:var(--kleur-succes-zacht); color:#1b5e20; }
.melding.warning{ background:var(--kleur-waarschuwing-zacht); color:#8a4500; }
.melding.error{ background:var(--kleur-fout-zacht); color:#8e1c1c; }

/* --- voet --- */
.voet{ background:var(--kleur-donker); color:var(--kleur-op-donker-zacht); padding-block:64px 32px; }
.voet h2{ font-size:.8125rem; font-weight:600; color:#fff; margin:0 0 14px; letter-spacing:.04em; text-transform:uppercase; }
.voet a{ color:#fff; text-decoration:none; font-size:.9375rem; }
.voet a:hover{ text-decoration:underline; }
.voet li{ margin-bottom:8px; }
.voet-boven{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:56px; margin-bottom:48px; }
.voet-nav{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
.voet-merk p{ font-size:.875rem; margin:18px 0 20px; max-width:34ch; }
.onderregel{ border-top:1px solid rgba(255,255,255,.1); padding-top:24px; font-size:.8125rem; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
@media (max-width:900px){ .voet-boven{ grid-template-columns:1fr; } .voet-nav{ grid-template-columns:1fr 1fr; } }

/* =================== APP =================== */
.app-kop .omhulsel{ max-width:none; padding-inline:24px; }
.app{ display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - var(--kop-hoogte)); }
.zijbalk{ border-right:1px solid var(--kleur-lijn); background:var(--kleur-kaart); padding:20px 14px; position:sticky; top:var(--kop-hoogte); height:calc(100vh - var(--kop-hoogte)); overflow-y:auto; }
.zijbalk .label{ padding:0 10px; margin-top:18px; }
.zijbalk a{ display:flex; align-items:center; justify-content:space-between; padding:9px 10px; border-radius:8px; color:var(--kleur-inkt-zacht); text-decoration:none; font-weight:500; font-size:.9375rem; }
.zijbalk a:hover{ background:var(--kleur-zacht); color:var(--kleur-inkt); }
.zijbalk a[aria-current="page"]{ background:var(--kleur-accent-zacht); color:var(--kleur-accent-donker); font-weight:600; }
.teller{ background:var(--kleur-fout); color:#fff; border-radius:999px; font-size:.6875rem; font-weight:700; padding:1px 7px; }
.inhoud{ padding:32px 36px 64px; min-width:0; }
.inhoud-kop{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:24px; }
.inhoud-kop h1{ font-size:2rem; margin:0; }
.inhoud-kop p{ margin:6px 0 0; color:var(--kleur-inkt-zacht); }
@media (max-width:900px){ .app{ grid-template-columns:1fr; } .zijbalk{ position:static; height:auto; border-right:0; border-bottom:1px solid var(--kleur-lijn); display:flex; flex-wrap:wrap; gap:4px; padding:10px; } .zijbalk .label{ display:none; } .inhoud{ padding:24px 18px 48px; } }
.orgkeuze{ display:flex; align-items:center; gap:8px; font-size:.875rem; }
.orgkeuze select{ min-height:36px; padding:4px 10px; width:auto; }
.gebruikersmenu{ display:flex; align-items:center; gap:14px; font-size:.875rem; }
.gebruikersmenu form{ margin:0; }
.proefbalk{ background:var(--kleur-accent-zacht); color:var(--kleur-accent-donker); font-size:.875rem; padding:10px 36px; border-bottom:1px solid var(--kleur-lijn); }
.demobalk{ background:var(--kleur-donker); color:#fff; } .demobalk a{ color:#fff; }
.demoblok{ margin-top:22px; padding-top:18px; border-top:1px solid var(--kleur-lijn); }
.kop-demo{ margin:0; } .kop-demo .knop{ font-size:.9375rem; }
@media (max-width:980px){ .kop-demo{ display:none; } }
.proefbalk.verlopen{ background:var(--kleur-waarschuwing-zacht); color:#8a4500; }

.tegels{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
@media (max-width:1100px){ .tegels{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.tegel{ background:var(--kleur-kaart); border:1px solid var(--kleur-lijn); border-radius:var(--radius-kaart); padding:18px 20px; }
.tegel .label{ margin-bottom:6px; }
.tegel .waarde{ font-size:1.875rem; font-weight:600; letter-spacing:-.02em; line-height:1.1; font-variant-numeric:tabular-nums; }
.tegel .toelichting{ font-size:.8125rem; color:var(--kleur-inkt-zacht); margin-top:4px; }
.tegel.fout .waarde{ color:var(--kleur-fout); }
.tegel.goed .waarde{ color:var(--kleur-succes); }

.status{ display:inline-flex; align-items:center; gap:6px; font-size:.75rem; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--kleur-zacht); color:var(--kleur-inkt-zacht); white-space:nowrap; }
.status-concept{ background:var(--kleur-waarschuwing-zacht); color:#8a4500; }
.status-uitgebracht{ background:var(--kleur-accent-zacht); color:var(--kleur-accent-donker); }
.status-beheer{ background:var(--kleur-succes-zacht); color:#1b5e20; }
.stip{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:1px; }
.stip-hoog{ background:var(--kleur-fout); } .stip-aandacht{ background:var(--kleur-waarschuwing); } .stip-info{ background:#94a3b8; } .stip-ok{ background:var(--kleur-succes); }

.filterbalk{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.filterbalk input[type=search]{ max-width:320px; }
.filterbalk select{ width:auto; }
.leeg{ text-align:center; padding:48px 20px; color:var(--kleur-inkt-zacht); }

/* Werkblad */
.werkblad{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:24px; align-items:start; }
@media (max-width:1200px){ .werkblad{ grid-template-columns:1fr; } }
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--kleur-lijn); margin-bottom:24px; overflow-x:auto; }
.tabs button,.tabs a{ font-family:inherit; font-size:.9375rem; font-weight:500; color:var(--kleur-inkt-zacht); background:none; border:0; border-bottom:2px solid transparent;
  padding:12px 12px; cursor:pointer; margin-bottom:-1px; white-space:nowrap; text-decoration:none; }
.tabs button:hover,.tabs a:hover{ color:var(--kleur-inkt); }
.tabs button[aria-selected="true"],.tabs a[aria-current="page"]{ color:var(--kleur-inkt); font-weight:600; border-bottom-color:var(--kleur-accent); }
.tabpaneel h2{ font-size:1.25rem; margin-top:28px; }
.tabpaneel h2:first-child{ margin-top:0; }
.keuzekaarten{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:18px; }
@media (max-width:700px){ .keuzekaarten{ grid-template-columns:1fr; } }
.keuzekaart{ border:1px solid var(--kleur-lijn); border-radius:10px; padding:14px 16px; cursor:pointer; background:#fff; display:block; }
.keuzekaart:has(input:checked){ border-color:var(--kleur-accent); background:var(--kleur-accent-zacht); }
.keuzekaart input{ margin-right:6px; }
.keuzekaart b{ font-size:.9375rem; }
.keuzekaart span{ display:block; font-size:.8125rem; color:var(--kleur-inkt-zacht); margin-top:4px; font-weight:400; }
.kp-sectie{ border:1px solid var(--kleur-lijn); border-radius:12px; margin-bottom:12px; background:#fff; }
.kp-sectie > summary{ padding:14px 18px; cursor:pointer; font-weight:600; }
.kp-sectie > div{ padding:4px 18px 18px; }
.kp-rij{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:14px; padding:12px 0; border-top:1px solid var(--kleur-lijn-zacht); }
.kp-rij > span{ font-size:.875rem; font-weight:600; padding-top:10px; }
.kp-velden{ display:flex; flex-direction:column; gap:8px; }
.kp-velden small{ color:var(--kleur-inkt-zacht); font-size:.75rem; }
@media (max-width:700px){ .kp-rij{ grid-template-columns:1fr; } }
.offertetabel input,.offertetabel select{ min-height:38px; padding:6px 10px; font-size:.875rem; }
.offertetabel td{ padding:6px; }

.paneel{ position:sticky; top:calc(var(--kop-hoogte) + 16px); display:flex; flex-direction:column; gap:16px; }
.resultaatvlak{ background:var(--kleur-accent-zacht); border-radius:var(--radius-kaart); padding:22px; }
.resultaatvlak .label{ color:var(--kleur-accent-donker); }
.resultaatvlak .bedrag{ font-weight:600; font-size:2.5rem; line-height:1; margin:0; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.resultaatvlak .opbouw{ font-size:.875rem; margin:10px 0 0; }
.balk{ display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--kleur-lijn); margin:14px 0 8px; }
.balk span{ display:block; height:100%; }
.balk .b-aov{ background:var(--kleur-accent); } .balk .b-vangnet{ background:#8b88f5; } .balk .b-partner{ background:#c6c4fa; } .balk .b-gat{ background:var(--kleur-fout); }
.legenda{ display:flex; flex-wrap:wrap; gap:10px 14px; font-size:.75rem; color:var(--kleur-inkt-zacht); }
.legenda i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:5px; }
.signaal{ display:flex; gap:10px; padding:11px 0; border-top:1px solid var(--kleur-lijn-zacht); }
.signaal:first-child{ border-top:0; }
.signaal .stip{ margin-top:7px; flex-shrink:0; }
.signaal b{ font-size:.875rem; display:block; }
.signaal p{ font-size:.8125rem; color:var(--kleur-inkt-zacht); margin:2px 0 0; }
.opslagstatus{ font-size:.8125rem; color:var(--kleur-inkt-zacht); }
.opslagstatus.fout{ color:var(--kleur-fout); }
.regels-kv{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:.875rem; margin:0; }
.regels-kv dt{ color:var(--kleur-inkt-zacht); }
.regels-kv dd{ margin:0; font-weight:500; text-align:right; }
.gevarenzone{ border:1px solid #f3c5c5; background:#fffafa; border-radius:var(--radius-kaart); padding:20px 22px; }

/* Rapport */
.rapport{ background:#fff; border:1px solid var(--kleur-lijn); border-radius:var(--radius-kaart); padding:48px 56px; max-width:860px; box-shadow:var(--schaduw-kaart); }
.rapport h1{ font-size:1.75rem; margin-bottom:22px; }
.rapport h2{ font-size:1.125rem; margin:30px 0 10px; color:var(--rapport-accent, var(--kleur-accent)); letter-spacing:-.01em; }
.rapport p{ font-size:.9375rem; }
.rapport .kopgegevens{ display:grid; grid-template-columns:auto 1fr; gap:4px 20px; font-size:.9375rem; padding:16px 0; border-top:1px solid var(--kleur-lijn); border-bottom:1px solid var(--kleur-lijn); }
.rapport .kopgegevens dt{ color:var(--kleur-inkt-zacht); }
.rapport .kopgegevens dd{ margin:0; font-weight:500; }
.rapport ul.uitg{ list-style:none; padding:0; margin:12px 0 16px; }
.rapport ul.uitg li{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; border-bottom:1px solid var(--kleur-lijn); font-size:.9375rem; }
.rapport ul.uitg li.totaal{ border-bottom:2px solid var(--rapport-accent, var(--kleur-accent)); font-weight:600; }
.rapport ul.uitg li.tekort b{ color:var(--kleur-fout); }
.rapport .kader{ background:var(--kleur-accent-zacht); border-radius:10px; padding:10px 18px; margin:14px 0; }
.rapport .kader ul.uitg li:last-child{ border-bottom:0; }
.rapport .kleineletters{ font-size:.8125rem; color:var(--kleur-inkt-zacht); }
.rapport .toc ol{ padding-left:22px; color:var(--kleur-inkt-zacht); font-size:.9375rem; }
.rapport table{ width:100%; border-collapse:collapse; font-size:.875rem; margin:10px 0 14px; }
.rapport th,.rapport td{ padding:7px 8px; border-bottom:1px solid var(--kleur-lijn); text-align:left; }
.rapport th{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--kleur-inkt-zacht); }
.rapport td.rechts,.rapport th.rechts{ text-align:right; }
.rapport tr.nadruk td{ font-weight:600; }
.rapport .akk{ border:1px solid var(--kleur-lijn); border-radius:10px; padding:18px 20px; }
.rapport .akk-rij{ margin-bottom:14px; font-size:.9375rem; }
.rapport .invul{ display:block; border-bottom:1px solid #b8bcc6; height:24px; }
.rapport .invul.groot{ height:52px; }
.rapport .opties span{ margin-right:18px; } .rapport .opties i{ display:inline-block; width:12px; height:12px; border:1px solid #6b7280; border-radius:2px; margin:0 6px 0 12px; vertical-align:-1px; }
.rapport .voettekst{ margin-top:32px; padding-top:14px; border-top:1px solid var(--kleur-lijn); font-size:.75rem; color:var(--kleur-inkt-zacht); }
.bevroren{ display:flex; gap:14px; align-items:flex-start; background:var(--kleur-succes-zacht); color:#1b5e20; border-radius:var(--radius-kaart); padding:14px 18px; margin-bottom:16px; font-size:.875rem; max-width:860px; }
.bevroren code{ font-size:.75rem; word-break:break-all; }

.logovoorbeeld{ border:1px dashed var(--kleur-lijn); border-radius:10px; padding:18px; background:#fff; min-height:90px; display:flex; align-items:center; justify-content:center; }
.logovoorbeeld img{ max-height:80px; max-width:100%; width:auto; }
.rapportkop{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding-bottom:14px; margin-bottom:18px; border-bottom:2px solid var(--rapport-accent, var(--kleur-accent)); }
.rapportkop img{ max-height:56px; max-width:220px; width:auto; }
input[type=file]{ font:inherit; font-size:.875rem; }

/* Keten-verdeling */
.verdeling-rij{ display:grid; grid-template-columns:180px minmax(0,1fr) 60px; gap:12px; align-items:center; font-size:.875rem; padding:6px 0; }
.verdeling-balk{ height:8px; background:var(--kleur-lijn); border-radius:4px; overflow:hidden; }
.verdeling-balk span{ display:block; height:100%; background:var(--kleur-accent); }

/* Aanmelden / inloggen */
.aanmeld{ min-height:calc(100vh - var(--kop-hoogte)); display:flex; align-items:flex-start; justify-content:center; padding:64px 20px; position:relative; }
.aanmeld .kaart{ width:100%; max-width:480px; position:relative; z-index:1; }
.aanmeld-breed .kaart{ max-width:640px; }
.aanmeld h1{ font-size:1.75rem; }
.qr{ width:200px; height:200px; border:1px solid var(--kleur-lijn); border-radius:10px; padding:8px; background:#fff; }
code.geheim{ font-size:.875rem; background:var(--kleur-zacht); padding:4px 8px; border-radius:6px; letter-spacing:.08em; word-break:break-all; }

@media print{
  .kop,.zijbalk,.voet,.proefbalk,.geen-print,.meldingen,.bevroren form{ display:none!important; }
  body{ background:#fff; }
  .app{ display:block; } .inhoud{ padding:0; }
  .rapport{ border:0; box-shadow:none; padding:0; max-width:none; }
  .rapport h2{ break-after:avoid; }
  .rapport .akk{ break-inside:avoid; }
  * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}