/* ai-werkers huisstijl: Delfts Blauw, Futura, kaarten met randblauw, knoppen uppercase */
:root{
  --blauw:#0F4C81;--blauw-donker:#0d4474;--midden:#7DA8D0;--licht:#E8F0FB;--inkt:#111111;
  --grijs:#F5F5F5;--rand:#D0DFF0;--tekst2:#555;--wit:#FFFFFF;
  --groen-bg:#C6EFCE;--groen:#276221;--oranje-bg:#FFEB9C;--oranje:#9C5700;--rood-bg:#FFC7CE;--rood:#9C0006;
  --font:'Futura','Century Gothic','Trebuchet MS',sans-serif;
}
*{box-sizing:border-box}
body{margin:0;font:400 14px/1.7 var(--font);color:var(--inkt);background:var(--grijs);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--blauw)}

/* navigatie */
.nav{background:var(--blauw);color:var(--wit)}
.nav-boven{display:flex;align-items:center;gap:14px;padding:10px 20px;max-width:1200px;margin:0 auto}
.logo{display:flex;align-items:center;gap:10px;color:var(--wit);text-decoration:none}
.logo svg{filter:brightness(0) invert(1)}
.logo .woord{font-weight:900;letter-spacing:-.5px;font-size:17px}
.logo .scheid{opacity:.5}
.logo .product{font-weight:700;font-size:15px}
.badge{border:1px solid rgba(255,255,255,.6);border-radius:99px;padding:1px 8px;font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.nav-rechts{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:12px}
.taal{display:flex;border:1px solid rgba(255,255,255,.5);border-radius:8px;overflow:hidden}
.taal button{background:none;border:0;color:var(--wit);font:700 11px var(--font);letter-spacing:1.5px;padding:4px 9px;cursor:pointer;opacity:.7}
.taal button.aan{background:var(--wit);color:var(--blauw);opacity:1}
.nav-email{opacity:.85}
.knop-uit{background:none;border:1px solid rgba(255,255,255,.6);color:var(--wit);border-radius:12px;padding:6px 12px;font:700 11px var(--font);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer}
.tabs{display:flex;gap:6px;padding:0 20px 10px;max-width:1200px;margin:0 auto;flex-wrap:wrap}
.tabs a{color:var(--wit);text-decoration:none;font:700 11px var(--font);letter-spacing:1.5px;text-transform:uppercase;padding:7px 14px;border-radius:12px;opacity:.75}
.tabs a:hover{opacity:1;background:rgba(255,255,255,.08)}
.tabs a.actief{background:var(--wit);color:var(--blauw);opacity:1}

main{width:100%;max-width:1200px;margin:24px auto;padding:0 16px;flex:1}
.kaart{background:var(--wit);border:1px solid var(--rand);border-radius:12px;padding:22px;margin-bottom:16px;box-shadow:0 1px 2px rgba(15,76,129,.05)}
.overline{font-size:9px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--blauw);margin:0 0 10px}
h1{font-size:28px;font-weight:900;color:var(--blauw);margin:0 0 12px;line-height:1.2}
h2{font-size:18px;font-weight:900;margin:0 0 12px}
.sub{color:var(--tekst2)}
.klein{color:var(--tekst2);font-size:12px}

.knop{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:10px 18px;border-radius:12px;border:1px solid var(--blauw);background:var(--wit);color:var(--blauw);font:700 12px var(--font);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;text-decoration:none}
.knop:hover{background:var(--licht)}
.knop.primair{background:var(--blauw);color:var(--wit)}
.knop.primair:hover{background:var(--blauw-donker)}
.knop:disabled{opacity:.5;cursor:default}

input,select{font:inherit;padding:9px 11px;border:1px solid var(--rand);border-radius:10px;background:var(--grijs)}
input:focus,select:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px var(--licht)}
.rij{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

table{width:100%;border-collapse:collapse}
th{background:var(--licht);color:var(--blauw);font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-align:left;padding:9px 8px}
td{padding:8px;border-bottom:1px solid var(--rand);vertical-align:top}
td.getal,th.getal{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}

.pil{display:inline-block;padding:1px 9px;border-radius:99px;font-size:11px;font-weight:700}
.pil.groen{background:var(--groen-bg);color:var(--groen)}
.pil.oranje{background:var(--oranje-bg);color:var(--oranje)}
.pil.rood{background:var(--rood-bg);color:var(--rood)}
.pil.blauw{background:var(--licht);color:var(--blauw)}
.goed{color:var(--groen)}.fout{color:var(--rood)}

.cijfers{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.cijfer{background:var(--wit);border:1px solid var(--rand);border-radius:12px;padding:16px}
.cijfer .waarde{font-size:28px;font-weight:900;color:var(--blauw);line-height:1.1}
.cijfer .label{font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--midden)}

.dropzone{display:block;margin-top:16px;border:2px dashed var(--rand);border-radius:12px;padding:36px;text-align:center;background:var(--grijs);cursor:pointer}
.dropzone.over{border-color:var(--blauw);background:var(--licht)}

details summary{cursor:pointer;padding:6px 0}
footer{background:var(--blauw);color:var(--wit);text-align:center;font-size:11px;padding:12px;opacity:.95}
footer b{font-weight:900}

/* inloggen */
.login{flex:1;display:grid;place-items:center;padding:24px 16px}
.login .kaart{width:100%;max-width:420px;padding:32px}
.login h1{text-transform:uppercase;letter-spacing:1px}
.login hr{border:0;border-top:1px solid var(--rand);margin:20px 0}
.login .knop{width:100%}

@media (max-width:700px){.nav-email{display:none}.nav-boven{flex-wrap:wrap}h1{font-size:22px}}