/* Spang Makandra team-app — mobiel eerst. Grote knoppen, weinig tekst, hoog contrast. */
:root{
  --rood:#7a1c1c; --rood-licht:#9d3030; --groen:#1c7a2e; --oranje:#b06a00;
  --inkt:#1a1a1a; --grijs:#6b6b6b; --lijn:#e2e0da; --papier:#faf9f5; --wit:#fff;
  --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--papier);color:var(--inkt);
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:var(--rood);text-decoration:none}

/* ---- kop ---- */
.kop{
  background:var(--rood);color:#fff;padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top));
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10;
}
.kop h1{font-size:17px;margin:0;font-weight:600;flex:1}
.kop a{color:#fff;opacity:.85;font-size:14px}
.kop .terug{font-size:22px;line-height:1;margin-right:-4px}
.merk{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}

.wrap{max-width:640px;margin:0 auto;padding:16px}

/* ---- kaarten ---- */
.kaart{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:16px;margin-bottom:12px}
.kaart h2{margin:0 0 4px;font-size:16px}
.stil{color:var(--grijs);font-size:14px;margin:0}

/* ---- knoppen ---- */
.knop{display:block;width:100%;padding:16px;border:0;border-radius:var(--radius);
  background:var(--rood);color:#fff;font-size:17px;font-weight:600;text-align:center;
  cursor:pointer;font-family:inherit}
.knop:active{background:var(--rood-licht)}
.knop.rustig{background:var(--wit);color:var(--inkt);border:1px solid var(--lijn)}
.knop.groen{background:var(--groen)}
.knop+.knop{margin-top:10px}

/* ---- lijst (categorieën / menu) ---- */
.lijst{list-style:none;margin:0;padding:0}
.lijst li{border-bottom:1px solid var(--lijn)}
.lijst li:last-child{border-bottom:0}
.lijst a{display:flex;align-items:center;gap:12px;padding:16px;color:var(--inkt)}
.lijst .naam{flex:1;font-weight:500}
.lijst .telling{font-size:13px;color:var(--grijs);font-variant-numeric:tabular-nums}
.lijst .pijl{color:var(--grijs)}
.klaar .telling{color:var(--groen);font-weight:600}

/* ---- voortgangsbalk ---- */
.balk{height:6px;background:var(--lijn);border-radius:3px;overflow:hidden;margin-top:8px}
.balk i{display:block;height:100%;background:var(--groen);transition:width .3s}

/* ---- tel-rijen ---- */
.telrij{display:flex;align-items:center;gap:12px;padding:12px 16px;
  border-bottom:1px solid var(--lijn);background:var(--wit)}
.telrij .info{flex:1;min-width:0}
.telrij .artikel{font-weight:500;display:block}
.telrij .onder{font-size:12px;color:var(--grijs)}
.telrij input{
  width:88px;padding:12px 8px;font-size:19px;text-align:center;font-family:inherit;
  border:1.5px solid var(--lijn);border-radius:10px;background:var(--papier);
  font-variant-numeric:tabular-nums;
}
.telrij input:focus{outline:0;border-color:var(--rood);background:#fff}
.telrij.ingevuld{background:#f4faf5}
.telrij.ingevuld input{border-color:var(--groen)}
.telrij.laag .onder{color:var(--rood);font-weight:600}

/* ---- inloggen ---- */
.namen{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.naamknop{padding:18px 10px;border:1px solid var(--lijn);border-radius:var(--radius);
  background:var(--wit);font-size:16px;font-weight:600;cursor:pointer;font-family:inherit}
.naamknop small{display:block;font-weight:400;color:var(--grijs);font-size:12px;margin-top:2px}
.naamknop:active{border-color:var(--rood)}
.pin{display:flex;gap:8px;justify-content:center;margin:18px 0}
.pin span{width:16px;height:16px;border-radius:50%;border:2px solid var(--rood)}
.pin span.vol{background:var(--rood)}
.toets{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.toets button{padding:20px 0;font-size:24px;border:1px solid var(--lijn);border-radius:var(--radius);
  background:var(--wit);cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums}
.toets button:active{background:var(--lijn)}
.toets .leeg{border:0;background:transparent;cursor:default}
input[type=email],input[type=password]{width:100%;padding:14px;font-size:16px;font-family:inherit;
  border:1px solid var(--lijn);border-radius:10px;margin-bottom:10px;background:var(--wit)}

.fout{background:#fdecec;border:1px solid #f3c0c0;color:var(--rood);padding:12px;
  border-radius:10px;margin-bottom:12px;font-size:14px}
.melding{background:#fff8e8;border:1px solid #f0dcae;color:#7a5200;padding:12px;
  border-radius:10px;margin-bottom:12px;font-size:14px}

/* ---- bestellijst ---- */
.lev{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.lev h2{flex:1;margin:0;font-size:16px}
.lev .bedrag{font-weight:600;font-variant-numeric:tabular-nums}
.bestelrij{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--lijn);font-size:15px}
.bestelrij:last-child{border-bottom:0}
.bestelrij .a{flex:1}
.bestelrij .n{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.bestelrij .waarschuwing{color:var(--oranje);font-size:12px;display:block}
.voet{text-align:center;color:var(--grijs);font-size:12px;padding:20px 0}