:root{--inkt:#161616;--accent:#c8873c;--kalkwit:#f4f1ec;--beton:#8a8a84;--vlak:#fff;--rand:#e3ded5;--rand-sterk:#cfc8bc;--goed:#4f7a52;--waarschuwing:#b5761f;--fout:#9c3b30;--radius:4px;--font:"Inter Tight", "Archivo", system-ui, -apple-system, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--kalkwit);color:var(--inkt);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}a{color:inherit;text-decoration:none}.schil{grid-template-columns:240px 1fr;min-height:100vh;display:grid}.zijbalk{background:var(--inkt);color:var(--kalkwit);flex-direction:column;gap:2rem;height:100vh;padding:1.75rem 1.25rem;display:flex;position:sticky;top:0}.merk{align-items:center;gap:.75rem;display:flex}.merk-klein{align-items:center;gap:.6rem;display:inline-flex}.merk strong{letter-spacing:.14em;text-transform:uppercase;font-size:1.1rem;font-weight:600}.navigatie{flex-direction:column;gap:.15rem;display:flex}.navigatie a{border-radius:var(--radius);color:#f4f1ecb8;padding:.5rem .7rem;font-size:.92rem}.navigatie a:hover{color:var(--kalkwit);background:#f4f1ec14}.navigatie a[aria-current=page]{color:var(--kalkwit);box-shadow:inset 2px 0 0 var(--accent);background:#c8873c29}.zijbalk-voet{color:#f4f1ec73;margin-top:auto;font-size:.78rem;line-height:1.45}.gebruiker{border-top:1px solid #f4f1ec24;margin-bottom:1rem;padding-top:.9rem}.gebruiker-naam{color:var(--kalkwit);font-size:.88rem;font-weight:500}.gebruiker-rol{color:var(--accent);margin-bottom:.5rem;font-size:.78rem}.afmeld-knop{color:#f4f1ecbf;background:0 0;border-color:#f4f1ec40;padding:.25rem .6rem;font-size:.78rem}.afmeld-knop:hover:not(:disabled){color:var(--kalkwit);background:#f4f1ec14;border-color:#f4f1ec73}.aanmeld-scherm{justify-content:center;align-items:center;min-height:100vh;padding:2rem 1.25rem;display:flex}.aanmeld-kaart{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);width:100%;max-width:26rem;padding:2rem}.merk-aanmelden{margin-bottom:1.75rem}.aanmeld-kaart h1{margin:0 0 .2rem;font-size:1.35rem}.aanmeld-formulier{flex-direction:column;gap:.3rem;margin-top:1.5rem;display:flex}.aanmeld-formulier label{color:var(--beton);margin-top:.6rem;font-size:.82rem}.aanmeld-formulier input{font:inherit;border:1px solid var(--rand-sterk);border-radius:var(--radius);background:var(--vlak);color:var(--inkt);padding:.5rem .6rem}.aanmeld-formulier input:focus{outline:2px solid var(--accent);outline-offset:-1px}button.breed{width:100%;margin-top:1.1rem;padding:.55rem}.demo-hint{border-top:1px solid var(--rand);color:var(--beton);margin-top:1.75rem;padding-top:1.1rem;font-size:.8rem}.demo-hint ul{gap:.2rem;margin:.5rem 0 0;padding-left:1.1rem;display:grid}.demo-hint code{background:#f2efe9;border-radius:3px;padding:.05rem .25rem}.inhoud{width:100%;max-width:1180px;padding:2.25rem 2.5rem 4rem}.kop{margin-bottom:2rem}.kop h1{letter-spacing:-.01em;margin:0 0 .2rem;font-size:1.65rem}.kop p{color:var(--beton);margin:0}.kruimelpad{color:var(--beton);margin-bottom:.5rem;font-size:.82rem}.kruimelpad a:hover{color:var(--inkt);text-decoration:underline}h2{letter-spacing:.02em;margin:2.25rem 0 .9rem;font-size:1.05rem}.tegels{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;display:grid}.tegel{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);padding:1rem 1.1rem}.tegel .waarde{letter-spacing:-.02em;font-size:1.9rem;font-weight:600;line-height:1.1}.tegel .waarde.tekst{letter-spacing:0;padding-top:.35rem;font-size:1.15rem;font-weight:500}.tegel .label{color:var(--beton);margin-top:.2rem;font-size:.82rem}.tegel[data-aandacht=true] .waarde{color:var(--accent)}.paneel{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);overflow:hidden}.rij{border-bottom:1px solid var(--rand);align-items:center;gap:1rem;padding:.95rem 1.1rem;display:grid}.rij:last-child{border-bottom:none}.rij:hover{background:#fbf9f6}.rij-projecten{grid-template-columns:1fr 150px 130px 90px}.rij-batches{grid-template-columns:1fr 160px 150px 110px}.rij-fases{grid-template-columns:1fr 130px 150px 170px}.hoofd{font-weight:500}.sub{color:var(--beton);margin-top:.1rem;font-size:.83rem}.getal{font-variant-numeric:tabular-nums}.rechts{text-align:right}.leeg{color:var(--beton);text-align:center;padding:2rem 1.1rem}.balk{background:var(--rand);border-radius:999px;height:5px;overflow:hidden}.balk span{background:var(--accent);border-radius:999px;height:100%;display:block}.balk[data-toon=neutraal] span{background:var(--beton)}.balk[data-toon=goed] span{background:var(--goed)}.balk[data-toon=fout] span{background:var(--fout)}.balk-label{color:var(--beton);justify-content:space-between;margin-bottom:.3rem;font-size:.78rem;display:flex}.badge{white-space:nowrap;border:1px solid #0000;border-radius:999px;padding:.15rem .5rem;font-size:.75rem;font-weight:500;display:inline-block}.badge[data-toon=neutraal]{color:#5f5b53;border-color:var(--rand-sterk);background:#f0ede7}.badge[data-toon=bezig]{color:var(--waarschuwing);background:#fdf3e4;border-color:#edd6b0}.badge[data-toon=goed]{color:var(--goed);background:#eef4ee;border-color:#c9ddca}.badge[data-toon=fout]{color:var(--fout);background:#f9ecea;border-color:#e6c6c1}.badge[data-toon=accent]{color:#96631f;background:#fbf0e2;border-color:#e8cfa8}.render-raster{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem;display:grid}.render-kaart{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);flex-direction:column;display:flex;overflow:hidden}.render-kaart[data-status=intern]{border-left:3px solid var(--accent)}.render-kaart[data-status=afgekeurd]{border-left:3px solid var(--fout)}.render-kaart[data-status=gedeeld]{border-left:3px solid var(--goed)}.render-voorbeeld{aspect-ratio:16/9;color:#8d857a;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--rand);background:linear-gradient(135deg,#ded7cb 0%,#efe9e0 45%,#d5cec2 100%);justify-content:center;align-items:center;font-size:.75rem;display:flex}.render-body{flex-direction:column;flex:1;gap:.6rem;padding:.85rem .95rem;display:flex}.render-titel{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.4rem;display:flex}.render-titel>div{flex:55%;min-width:0}.pad{color:var(--beton);word-break:break-all;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.72rem}.opmerking{border-left:2px solid var(--fout);color:#7d3229;background:#f9ecea;padding:.45rem .6rem;font-size:.82rem}.acties{flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:.2rem;display:flex}button{font:inherit;cursor:pointer;border-radius:var(--radius);border:1px solid var(--rand-sterk);background:var(--vlak);color:var(--inkt);padding:.35rem .7rem;font-size:.83rem}button:hover:not(:disabled){border-color:var(--beton);background:#faf8f4}button:disabled{opacity:.5;cursor:not-allowed}button.primair{background:var(--inkt);border-color:var(--inkt);color:var(--kalkwit)}button.primair:hover:not(:disabled){background:#2b2b2b;border-color:#2b2b2b}button.accent{background:var(--accent);border-color:var(--accent);color:#fff}button.accent:hover:not(:disabled){background:#b5762f;border-color:#b5762f}button.gevaar{color:var(--fout);border-color:#e0bdb7}textarea{font:inherit;border:1px solid var(--rand-sterk);border-radius:var(--radius);resize:vertical;background:var(--vlak);width:100%;min-height:60px;color:var(--inkt);padding:.45rem .55rem;font-size:.85rem}.melding{border-radius:var(--radius);padding:.4rem .6rem;font-size:.82rem}.melding[data-ok=true]{color:var(--goed);background:#eef4ee}.melding[data-ok=false]{color:var(--fout);background:#f9ecea}.waarschuwing-vlak{border-radius:var(--radius);color:#7d5417;background:#fdf3e4;border:1px solid #edd6b0;padding:1rem 1.15rem}.waarschuwing-vlak h3{margin:0 0 .35rem;font-size:.95rem}.waarschuwing-vlak p{margin:0 0 .5rem;font-size:.88rem}.waarschuwing-vlak code{background:#0000000f;border-radius:3px;padding:.1rem .3rem;font-size:.82rem}.balk-rij{align-items:center;gap:.6rem;display:flex}.balk-rij .balk{flex:1}@media (max-width:900px){.schil{grid-template-columns:1fr}.zijbalk{flex-direction:row;align-items:center;gap:1.25rem;height:auto;padding:1rem 1.25rem;position:static}.navigatie{flex-flow:wrap}.zijbalk-voet{display:none}.inhoud{padding:1.5rem 1.25rem 3rem}.rij-projecten,.rij-batches,.rij-fases{grid-template-columns:1fr}}.rij-klanten{grid-template-columns:1fr 150px 190px 150px}.rij-offertes{grid-template-columns:1fr 170px 120px 120px}.rij-offerteregel{grid-template-columns:1fr 170px 90px 110px}.rij-totaal{background:#fbf9f6;grid-template-columns:1fr 110px}.rij-uren{grid-template-columns:1fr 110px 160px 110px}.rij-medewerker{grid-template-columns:1fr 90px 130px 120px}.rij-antwoord{grid-template-columns:220px 1fr}.rij-voorstel{grid-template-columns:1fr 90px 150px}.rij-portaalfase{grid-template-columns:1fr 130px 120px}.rij-portaalrender{grid-template-columns:1fr 220px}.rij-weekkop{background:#fbf9f6;grid-template-columns:1fr auto}.rij-tussen{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.paneel.vlak{padding:1.1rem}.paneel.vlak .tegels{margin-top:0}.aandacht{color:var(--fout);margin-top:.2rem}.filters{flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem;display:flex}.filters a{border:1px solid var(--rand-sterk);color:var(--beton);border-radius:999px;padding:.25rem .75rem;font-size:.82rem}.filters a:hover{border-color:var(--beton);color:var(--inkt)}.filters a[data-actief=true]{background:var(--inkt);border-color:var(--inkt);color:var(--kalkwit)}.invoer{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end;gap:.85rem;display:grid}.invoer>button{justify-self:start}.knoprij{align-items:center;gap:.5rem;display:flex}.veld{color:var(--beton);flex-direction:column;gap:.3rem;font-size:.83rem;display:flex}.veld.breed{grid-column:1/-1}.veld em{color:var(--accent);font-style:normal}.veld input[type=text],.veld input[type=email],.veld input[type=date],.veld input[type=number],.veld select,.veld textarea{font:inherit;border:1px solid var(--rand-sterk);border-radius:var(--radius);background:var(--vlak);color:var(--inkt);width:100%;padding:.45rem .55rem;font-size:.88rem}.veld input:focus,.veld select:focus,.veld textarea:focus{outline:2px solid var(--accent);outline-offset:1px}.veld.vinkje{flex-direction:row;align-items:center;gap:.45rem}.veld.vinkje input{width:auto}.keuzes{flex-wrap:wrap;gap:.5rem 1rem;display:flex}.keuze{color:var(--inkt);align-items:center;gap:.35rem;display:flex}.pakketkeuze{border:1px solid var(--rand);border-radius:var(--radius);gap:.6rem;padding:.8rem;display:grid}.pakketkeuze legend{color:var(--beton);padding:0 .3rem;font-size:.83rem}.pakket{border:1px solid var(--rand);border-radius:var(--radius);cursor:pointer;align-items:flex-start;gap:.6rem;padding:.6rem;display:flex}.pakket:hover{border-color:var(--beton)}.pakket span{gap:.15rem;display:grid}.pakket strong{color:var(--inkt);font-weight:500}.stappen{color:var(--beton);gap:.4rem;margin:0;padding-left:1.2rem;font-size:.86rem;display:grid}.intake-scherm{background:var(--kalkwit);justify-content:center;min-height:100vh;padding:3rem 1.2rem;display:flex}.intake-kaart{background:var(--vlak);border:1px solid var(--rand);border-radius:var(--radius);width:100%;max-width:720px;padding:2rem}.intake-kaart h1{margin:.3rem 0 .8rem;font-size:1.5rem;font-weight:500}.intake-kaart>p{color:var(--beton);margin-bottom:.8rem;font-size:.9rem}.intake-kaart form{margin-top:1.4rem}@media (max-width:720px){.rij-klanten,.rij-offertes,.rij-offerteregel,.rij-uren,.rij-medewerker,.rij-antwoord,.rij-voorstel,.rij-portaalfase,.rij-portaalrender{grid-template-columns:1fr}.rechts{text-align:left}}.verborgen{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.keuzes{border:none;margin:0;padding:0}.rij-signaal{border-left:3px solid var(--rand);grid-template-columns:1fr 90px}.rij-signaal[data-ernst=kritiek]{border-left-color:var(--fout)}.rij-signaal[data-ernst=let-op]{border-left-color:var(--waarschuwing)}.rij-planbaar{grid-template-columns:1fr 150px 140px 130px}.rij-verlof{grid-template-columns:1fr 220px 200px}.rij-facturen{grid-template-columns:1fr 190px 120px 110px}.rij-factureerbaar{grid-template-columns:1fr 130px 170px}.weekraster-schuif{overflow-x:auto}.weekraster{min-width:900px}.weekkop,.weekrij{background:var(--rand);grid-template-columns:190px repeat(7,1fr);gap:1px;display:grid}.weekkop>div{background:#fbf9f6;padding:.5rem .6rem}.weeknaam,.dagvak{background:var(--vlak);padding:.6rem}.weeknaam{align-content:start;gap:.25rem;display:grid}.dagvak{align-content:start;gap:.3rem;min-height:72px;display:grid}.dagvak[data-vrij=true]{background:repeating-linear-gradient(45deg,#faf8f4,#faf8f4 6px,#f2eee7 6px 12px)}.dagvak[data-overboekt=true]{background:#f9ecea}.blok{border-left:3px solid var(--accent);background:#f6f1e8;border-radius:2px;justify-content:space-between;align-items:flex-start;gap:.3rem;padding:.3rem .4rem;font-size:.78rem;line-height:1.3;display:flex}.blok strong{font-weight:600}.weg button{color:var(--beton);background:0 0;border:none;padding:0 .2rem;font-size:.95rem;line-height:1}.weg button:hover:not(:disabled){color:var(--fout);background:0 0}.knop-link{border:1px solid var(--rand-sterk);border-radius:var(--radius);color:var(--inkt);padding:.35rem .7rem;font-size:.83rem;display:inline-block}.knop-link:hover{border-color:var(--beton);background:#faf8f4;text-decoration:none}@media (max-width:720px){.rij-signaal,.rij-planbaar,.rij-verlof,.rij-facturen,.rij-factureerbaar{grid-template-columns:1fr}}