:root{
--bg:#f6f2ea; --surface:#fffdf8; --soft:#f0eadf; --line:#ded6c8;
--ink:#1f2d2f; --ink2:#6b7472; --ink3:#8b928f;
--acc:#17484a; --acc2:#23666a; --accsoft:#e3efed;
--groen:#3f7d5a; --amber:#c9822b; --rood:#b65a4b;
--r1:8px; --r2:12px; --r3:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased}
a{color:var(--acc2)}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.smal{max-width:520px}

header.kop{background:var(--surface);border-bottom:1px solid var(--line);margin-bottom:22px}
header.kop .in{max-width:1060px;margin:0 auto;padding:13px 20px;display:flex;align-items:center;gap:14px}
header.kop img.logo{height:30px;width:auto;display:block}
header.kop .dv{width:1px;height:26px;background:var(--line)}
header.kop h1{font-size:14.5px;margin:0;font-weight:600}
header.kop .sub{font-size:11.5px;color:var(--ink3);margin-top:1px}
header.kop .rechts{margin-left:auto;display:flex;align-items:center;gap:10px}
.merk{width:30px;height:30px;border-radius:9px;background:var(--acc);color:#fffdf8;
display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}

.chip{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink2);
background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.chip.op{background:#fbf3e6;border-color:#e6d3b2;color:#8a5a17}
.chip.ok{background:#eef6ef;border-color:#cbe3cf;color:#2c6b3a}
.chip.nee{background:#f7eeee;border-color:#e3cccc;color:#8a2c2c}
.regel .chip{font-size:10.5px;padding:2px 8px;margin-left:6px;vertical-align:middle}
a.volg{font-size:11.5px;margin-left:8px;white-space:nowrap}

.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
background:var(--acc);color:#fffdf8;border:none;border-radius:var(--r1);padding:11px 20px;
font-size:13.5px;font-weight:500;text-decoration:none}
.knop:hover{background:var(--acc2)}
.knop.breed{width:100%}
.knop.stil{background:var(--surface);color:var(--ink2);border:1px solid var(--line)}
.knop.stil:hover{background:var(--soft);color:var(--ink)}
.knop[disabled]{opacity:.45;cursor:not-allowed}
.terug{display:inline-block;font-size:12.5px;margin-bottom:16px}

.melding{border-radius:var(--r2);padding:12px 16px;font-size:13px;margin-bottom:16px}
.melding.info{background:var(--accsoft);color:var(--acc)}
.melding.op{background:#fbf3e6;color:#6d4a15}
.melding.fout{background:#f9e9e6;color:#7d3427}
.melding ul{margin:6px 0 0;padding-left:18px}

.paneel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:20px}
.paneel + .paneel{margin-top:14px}
.paneel h2{font-size:15px;margin:0 0 12px;font-weight:600}

.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.filters a{font-size:12.5px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);
background:var(--surface);color:var(--ink2);text-decoration:none}
.filters a.aan{background:var(--acc);border-color:var(--acc);color:#fffdf8;font-weight:500}

.rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:14px}
.kaart{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);
overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit}
.kaart:hover{border-color:#c7bda9}
.kaart .plaat{background:var(--soft);height:132px;display:grid;place-items:center;color:var(--acc);
border-bottom:1px solid var(--line);position:relative}
.kaart .plaat .vlag{position:absolute;top:9px;left:9px;font-size:10px;letter-spacing:.06em;
text-transform:uppercase;font-weight:600;background:#fbf3e6;border:1px solid #e6d3b2;color:#8a5a17;
border-radius:999px;padding:3px 9px}
.kaart .tekst{padding:13px 14px 15px;display:flex;flex-direction:column;gap:3px;flex:1}
.kaart .nm{font-size:13.5px;font-weight:600}
.kaart .sp{font-size:11.5px;color:var(--ink3);flex:1;line-height:1.45}
.kaart .rij{display:flex;align-items:baseline;justify-content:space-between;margin-top:9px}
.prijs{font-size:14px;font-weight:600}
.prijs .btw{font-size:10.5px;color:var(--ink3);font-weight:400;margin-left:4px}

.split{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;align-items:start}
@media(max-width:800px){.split{grid-template-columns:1fr}}

.veld{margin-bottom:14px}
.veld label{display:block;font-size:11.5px;font-weight:600;color:var(--ink2);margin-bottom:5px}
.veld input,.veld select,.veld textarea{width:100%;background:var(--surface);
border:1px solid var(--line);border-radius:var(--r1);padding:10px 13px;font-size:14px}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--acc2);
box-shadow:0 0 0 3px rgba(35,102,106,.11)}
.veld .hint{font-size:11.5px;color:var(--ink3);margin-top:5px}
.tweeop{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pcrij{display:grid;grid-template-columns:120px 1fr;gap:12px}
@media(max-width:520px){.tweeop,.pcrij{grid-template-columns:1fr}}

.opties{margin-bottom:16px}
.opties .lb{font-size:11.5px;font-weight:600;color:var(--ink2);margin-bottom:7px}
.opties .rij{display:flex;gap:7px;flex-wrap:wrap}
.opties label{font-size:12.5px;padding:7px 13px;border-radius:var(--r1);border:1px solid var(--line);
background:var(--surface);color:var(--ink2);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.opties label:has(input:checked){border-color:var(--acc);background:var(--accsoft);
color:var(--acc);font-weight:600}
.opties input{margin:0;accent-color:var(--acc)}
.staal{width:15px;height:15px;border-radius:5px;border:1px solid rgba(0,0,0,.16);display:inline-block}

.regel{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center}
.regel:last-of-type{border-bottom:none}
.regel .mini{width:60px;height:60px;border-radius:var(--r1);background:var(--soft);
border:1px solid var(--line);display:grid;place-items:center;color:var(--acc);flex:none}
.regel .info{flex:1;min-width:0}
.regel .info .nm{font-size:13.5px;font-weight:600}
.regel .info .op{font-size:11.5px;color:var(--ink3)}
.stapel{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r1);
background:var(--surface);overflow:hidden}
.stapel button{width:29px;height:30px;border:none;background:none;color:var(--ink2);
font-size:15px;line-height:1;cursor:pointer}
.stapel button:hover{background:var(--soft);color:var(--ink)}
.stapel span{width:30px;text-align:center;font-size:13px;font-weight:600}

.totrij{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2);padding:5px 0}
.totrij.groot{font-size:15.5px;font-weight:600;color:var(--ink);border-top:1px solid var(--line);
margin-top:8px;padding-top:12px}

.regels{list-style:none;margin:0;padding:0;font-size:12.5px}
.regels li{display:flex;gap:10px;align-items:flex-start;padding:9px 0;
border-bottom:1px solid var(--line);color:var(--ink2)}
.regels li:last-child{border-bottom:none}
.regels .ok{color:var(--groen)} .regels .op{color:var(--amber)} .regels .nee{color:var(--rood)}

.codevak{display:flex;gap:8px;justify-content:center;margin:20px 0 6px}
.codevak input{width:44px;height:54px;text-align:center;font-size:21px;font-weight:600;
border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}

.tijdlijn{list-style:none;margin:0;padding:0;position:relative}
.tijdlijn:before{content:"";position:absolute;left:8px;top:12px;bottom:12px;width:1.5px;background:var(--line)}
.tijdlijn li{position:relative;padding:0 0 20px 30px;font-size:13px}
.tijdlijn .stip{position:absolute;left:2px;top:3px;width:13px;height:13px;border-radius:50%;
background:var(--surface);border:2px solid var(--line)}
.tijdlijn li.klaar .stip{background:var(--groen);border-color:var(--groen)}
.tijdlijn li.nu .stip{border-color:var(--acc);box-shadow:0 0 0 3px var(--accsoft)}
.tijdlijn .t{font-weight:600}
.tijdlijn li.later .t{color:var(--ink3);font-weight:400}

footer.voet{margin-top:34px;padding:18px 0 40px;border-top:1px solid var(--line);
font-size:11.5px;color:var(--ink3);display:flex;gap:14px;flex-wrap:wrap;align-items:center}
footer.voet .rechts{margin-left:auto}
.leeg{text-align:center;padding:44px 20px;color:var(--ink3);font-size:13.5px}

/* ── toegankelijkheid ──────────────────────────────────────────────── */
.overslaan{position:absolute;left:-9999px;top:0;background:var(--acc);color:#fffdf8;
padding:10px 16px;border-radius:0 0 var(--r1) 0;z-index:99;text-decoration:none}
.overslaan:focus{left:0}
:focus-visible{outline:2px solid var(--acc2);outline-offset:2px;border-radius:4px}
.alleenlezer{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ── statuschips ───────────────────────────────────────────────────── */
.stand{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;
border-radius:999px;padding:4px 11px;border:1px solid}
.stand:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.stand.wacht{background:#fbf3e6;border-color:#e6d3b2;color:#8a5a17}
.stand.loopt{background:var(--accsoft);border-color:#c2ddd8;color:var(--acc)}
.stand.klaar{background:#e8f0ea;border-color:#c3d8ca;color:#2c5b41}
.stand.stop{background:#f9e9e6;border-color:#e6c4bd;color:#7d3427}

/* ── budgetmeter ───────────────────────────────────────────────────── */
.meter{background:var(--soft);border-radius:999px;height:8px;overflow:hidden;margin:8px 0 6px}
.meter i{display:block;height:100%;background:var(--acc);border-radius:999px}
.meter i.op{background:var(--amber)}
.meterrij{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink3)}

/* ── bestellijst ───────────────────────────────────────────────────── */
.blijst{list-style:none;margin:0;padding:0}
.blijst li{border-bottom:1px solid var(--line)}
.blijst li:last-child{border-bottom:none}
.blijst a{display:flex;gap:14px;align-items:center;padding:15px 0;text-decoration:none;color:inherit}
.blijst a:hover .ref{color:var(--acc2)}
.blijst .ref{font-size:13.5px;font-weight:600}
.blijst .wanneer{font-size:11.5px;color:var(--ink3);margin-top:2px}
.blijst .wat{font-size:12px;color:var(--ink2);margin-top:3px}
.blijst .rechts{margin-left:auto;text-align:right;display:flex;flex-direction:column;
align-items:flex-end;gap:6px}

/* ── mobiel ────────────────────────────────────────────────────────── */
@media(max-width:640px){
  .wrap{padding:0 14px}
  header.kop .in{padding:11px 14px;gap:10px;flex-wrap:wrap}
  header.kop .rechts{width:100%;margin-left:0;justify-content:space-between}
  .rooster{grid-template-columns:1fr 1fr;gap:10px}
  .kaart .plaat{height:104px}
  .kaart .plaat svg{width:52px;height:48px}
  .kaart .tekst{padding:11px 12px 13px}
  .kaart .sp{display:none}
  .kaart .rij{flex-direction:column;align-items:flex-start;gap:2px}
  .prijs{font-size:15px}
  .knop{padding:13px 20px}          /* ruimere raakvlakken op een telefoon */
  .stapel button{width:38px;height:38px}
  .regel{flex-wrap:wrap;gap:10px}
  .regel .mini{width:48px;height:48px}
  .regel .prijs{width:auto;margin-left:auto}
  .paneel{padding:16px}
  .codevak input{width:40px;height:50px}
  footer.voet{flex-direction:column;gap:6px;align-items:flex-start}
  footer.voet .rechts{margin-left:0}
}
@media(max-width:380px){ .rooster{grid-template-columns:1fr} }