:root{
  --papier:#F6F1E3;
  --papier-diep:#EAE1C9;
  --blad:#1F4D2E;
  --blad-diep:#163A22;
  --blad-zacht:#DCE8CC;
  --biet:#8E2F4A;
  --mosterd:#E0A526;
  --inkt:#241F17;
  --inkt-zacht:#6B6252;
  --lijn:#D8CDB2;
  --wit:#FFFDF7;
  --kop:"Baloo 2","Trebuchet MS",Verdana,sans-serif;
  --tekst:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--tekst);color:var(--inkt);background:var(--papier);
  background-image:radial-gradient(var(--papier-diep) 1px, transparent 1px);
  background-size:14px 14px;
  font-size:17px;line-height:1.5;min-height:100vh;
}
h1,h2,h3,button{font-family:var(--kop)}
.verborgen{display:none !important}
.wrap{max-width:620px;margin:0 auto;padding:0 16px}

/* ---------- aanmelden ---------- */
#aanmelden{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;
}
.poort{width:100%;max-width:420px;text-align:center}
.poort .zon{
  width:96px;height:96px;margin:0 auto 18px;border-radius:50%;background:var(--mosterd);
  display:grid;place-items:center;font-size:50px;box-shadow:0 10px 0 rgba(36,31,23,.08)
}
.poort h1{font-size:38px;margin:0;font-weight:800;line-height:1}
.poort .onder{margin:6px 0 26px;color:var(--inkt-zacht)}
.poort input{
  width:100%;padding:18px;font-size:22px;text-align:center;border:2px solid var(--lijn);
  border-radius:16px;background:var(--wit);font-family:var(--kop);font-weight:600;color:var(--inkt)
}
.poort input:focus{outline:3px solid var(--mosterd);outline-offset:1px;border-color:var(--blad)}
.poort .fout{color:var(--biet);font-weight:600;min-height:24px;margin:10px 0 0;font-size:15px}
.poort .hulp{margin-top:22px;font-size:14px;color:var(--inkt-zacht);line-height:1.6}

/* ---------- kop ---------- */
header.top{background:var(--blad);color:#F3EFE0;padding:16px 0 18px;border-bottom:5px solid var(--mosterd)}
header.top .wrap{display:flex;align-items:center;gap:13px}
.logo{width:54px;height:54px;flex:0 0 54px;border-radius:50%;background:var(--mosterd);display:grid;place-items:center;font-size:29px}
header h1{margin:0;font-size:27px;font-weight:800;letter-spacing:-.01em;line-height:1.05}
header .sub{margin:3px 0 0;font-size:14px;color:#BCD3B9}
header .ik{
  margin-left:auto;background:rgba(255,255,255,.12);border:0;color:#F3EFE0;border-radius:12px;
  padding:9px 12px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--kop);white-space:nowrap
}

/* ---------- tabs ---------- */
nav.tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--wit);border-top:2px solid var(--lijn);
  padding:7px 8px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(36,31,23,.09)
}
nav.tabs .inner{max-width:620px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
nav.tabs button{
  border:0;background:none;padding:8px 1px 6px;border-radius:13px;font-size:11.5px;font-weight:600;
  color:var(--inkt-zacht);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;position:relative
}
nav.tabs button .ic{font-size:23px;line-height:1}
nav.tabs button[aria-selected="true"]{background:var(--blad-zacht);color:var(--blad)}
nav.tabs .bel{
  position:absolute;top:2px;right:calc(50% - 24px);min-width:20px;height:20px;padding:0 5px;background:var(--biet);
  color:#fff;border-radius:10px;font-size:12px;font-weight:700;display:grid;place-items:center;font-family:var(--tekst)
}

main{padding-bottom:108px}
section{padding-top:20px}
.paneel-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 14px}
.paneel-kop h2{margin:0;font-size:24px;font-weight:700}
.paneel-kop p{margin:2px 0 0;font-size:14.5px;color:var(--inkt-zacht)}

.jaar{display:flex;align-items:center;gap:4px;background:var(--wit);border:2px solid var(--lijn);border-radius:12px;padding:3px}
.jaar button{border:0;background:none;font-size:20px;width:34px;height:34px;border-radius:9px;cursor:pointer;color:var(--blad)}
.jaar button:disabled{opacity:.25;cursor:default}
.jaar span{font-weight:700;font-family:var(--kop);font-size:17px;min-width:46px;text-align:center}

/* ---------- kaarten ---------- */
.kaart{background:var(--wit);border:2px solid var(--lijn);border-radius:18px;padding:14px;margin-bottom:12px}
.rij{display:flex;gap:13px;align-items:center}
.emoji{font-size:37px;line-height:1;width:50px;text-align:center;flex:0 0 50px}
.info{flex:1;min-width:0}
.naam{font-family:var(--kop);font-weight:700;font-size:19px;line-height:1.25}
.meta{font-size:14px;color:var(--inkt-zacht);margin-top:2px}
.meta b{color:var(--blad)}
.klaar{display:inline-block;background:var(--mosterd);color:#3B2A05;font-family:var(--kop);font-weight:700;
  font-size:13px;border-radius:8px;padding:1px 9px;margin-top:4px}
.groei{height:9px;border-radius:5px;background:var(--papier-diep);margin-top:9px;overflow:hidden}
.groei i{display:block;height:100%;background:var(--blad);border-radius:5px}
.groei.rijp i{background:var(--mosterd)}
.kaartknop{background:none;border:0;padding:0;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}

.knop{font-family:var(--kop);font-weight:700;border:0;cursor:pointer;border-radius:14px;padding:13px 18px;
  font-size:17px;background:var(--blad);color:#fff}
.knop:active{transform:translateY(1px)}
.knop.groot{width:100%;padding:18px;font-size:20px;display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:18px}
.knop.mosterd{background:var(--mosterd);color:#3B2A05}
.knop.biet{background:var(--biet)}
.knop.stil{background:var(--papier-diep);color:var(--inkt)}
.knop.klein{padding:10px 14px;font-size:15px;border-radius:12px}
.acties{display:flex;gap:8px;margin-top:11px}
.acties .knop{flex:1}

.leeg{text-align:center;padding:34px 20px;border:2px dashed var(--lijn);border-radius:18px;background:rgba(255,253,247,.6)}
.leeg .em{font-size:44px}
.leeg p{margin:8px 0 0;color:var(--inkt-zacht)}

/* ---------- maandkaart ---------- */
.maand{background:var(--blad);color:#F3EFE0;border-radius:20px;padding:18px;margin-bottom:16px;position:relative;overflow:hidden}
.maand::after{content:"";position:absolute;right:-30px;top:-30px;width:130px;height:130px;border-radius:50%;background:rgba(224,165,38,.16)}
.maand h3{margin:0 0 8px;font-size:21px;position:relative}
.maand p{margin:0 0 6px;font-size:15px;color:#D9E6D2;position:relative;line-height:1.45}
.maand p b{color:var(--mosterd);font-weight:700}
.maand .weetje{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);font-style:italic;color:#F3EFE0}

/* ---------- voorraad ---------- */
.aantal{font-family:var(--kop);font-size:25px;font-weight:800;color:var(--blad);white-space:nowrap;text-align:right}
.aantal small{font-size:14px;font-weight:600;color:var(--inkt-zacht);display:block;line-height:1.1}
.gereserveerd{font-size:13.5px;color:var(--biet);font-weight:600;margin-top:2px}

/* ---------- bestellingen ---------- */
.best{border-left:7px solid var(--biet)}
.best.af{border-left-color:var(--blad);opacity:.55}
.wie{display:inline-block;background:var(--blad-zacht);color:var(--blad);font-weight:700;border-radius:9px;
  padding:1px 9px;font-size:13.5px;margin-bottom:3px}

/* ---------- jaar ---------- */
.totaal{background:var(--blad);color:#F3EFE0;border-radius:20px;padding:24px;text-align:center;margin-bottom:18px}
.totaal .groot{font-family:var(--kop);font-size:46px;font-weight:800;line-height:1.02}
.totaal p{margin:4px 0 0;color:#BCD3B9;font-size:15px}
.balk{margin-bottom:13px}
.balk .lbl{display:flex;justify-content:space-between;font-size:15px;margin-bottom:4px;gap:10px}
.balk .lbl b{font-family:var(--kop);white-space:nowrap}
.balk .spoor{height:16px;background:var(--wit);border:2px solid var(--lijn);border-radius:9px;overflow:hidden}
.balk .spoor i{display:block;height:100%;background:var(--mosterd)}

/* ---------- tips ---------- */
.tipkaart{background:var(--wit);border:2px solid var(--lijn);border-radius:18px;padding:16px;margin-bottom:12px}
.tipkaart h3{margin:0 0 8px;font-size:19px;display:flex;align-items:center;gap:9px}
.tipkaart h3 span{font-size:26px}
.tipkaart p{margin:0 0 8px;font-size:15.5px;line-height:1.5}
.tipkaart p:last-child{margin-bottom:0}
.tipkaart .kop-regel{font-family:var(--kop);font-weight:700;color:var(--blad)}

/* ---------- modaal ---------- */
.overlay{position:fixed;inset:0;background:rgba(36,31,23,.55);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.modaal{background:var(--papier);width:100%;max-width:620px;max-height:92vh;overflow-y:auto;
  border-radius:22px 22px 0 0;padding:20px 16px calc(24px + env(safe-area-inset-bottom));border-top:5px solid var(--mosterd);
  animation:omhoog .22s ease-out}
@keyframes omhoog{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:660px){.overlay{align-items:center;padding:20px}.modaal{border-radius:22px}}
.modaal h3{margin:0 0 4px;font-size:23px}
.modaal .hint{margin:0 0 16px;color:var(--inkt-zacht);font-size:14.5px}

.kies{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px}
.kies button{background:var(--wit);border:2px solid var(--lijn);border-radius:15px;padding:11px 5px;cursor:pointer;
  font-family:var(--kop);font-weight:600;font-size:13.5px;color:var(--inkt);display:flex;flex-direction:column;
  align-items:center;gap:4px;line-height:1.15}
.kies button .e{font-size:27px}
.kies button[aria-pressed="true"]{border-color:var(--blad);background:var(--blad-zacht)}

.teller{display:flex;align-items:center;gap:12px;justify-content:center;margin:6px 0 14px}
.teller button{width:64px;height:64px;border-radius:20px;border:0;background:var(--blad);color:#fff;font-size:32px;
  font-family:var(--kop);cursor:pointer;line-height:1}
.teller .waarde{font-family:var(--kop);font-weight:800;font-size:38px;min-width:100px;text-align:center}
.eenheden{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.eenheden button{border:2px solid var(--lijn);background:var(--wit);border-radius:12px;padding:9px 15px;
  font-family:var(--kop);font-weight:600;font-size:15px;cursor:pointer;color:var(--inkt)}
.eenheden button[aria-pressed="true"]{border-color:var(--blad);background:var(--blad-zacht);color:var(--blad)}

.veld{margin-bottom:14px}
.veld label{display:block;font-family:var(--kop);font-weight:600;margin-bottom:6px;font-size:16px}
.veld input{width:100%;padding:14px;font-size:18px;border:2px solid var(--lijn);border-radius:14px;background:var(--wit);
  color:var(--inkt);font-family:var(--tekst)}
.veld input:focus{outline:3px solid var(--mosterd);outline-offset:1px;border-color:var(--blad)}
.modaal-knoppen{display:flex;gap:10px;margin-top:6px}
.modaal-knoppen .knop{flex:1;padding:16px;font-size:18px}

.status{position:fixed;left:50%;bottom:118px;z-index:70;background:var(--inkt);color:var(--papier);padding:12px 20px;
  border-radius:14px;font-family:var(--kop);font-weight:600;font-size:16px;box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transform:translateX(-50%) scale(.9);transition:opacity .18s,transform .18s;max-width:90vw;text-align:center}
.status.aan{opacity:1;transform:translateX(-50%) scale(1)}
.status.slecht{background:var(--biet)}

.voet{text-align:center;font-size:13px;color:var(--inkt-zacht);padding:26px 10px 0}
button:focus-visible,input:focus-visible{outline:3px solid var(--mosterd);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* spans binnen een klikbare kaart als blok tonen */
.kaartknop .naam,.kaartknop .groei,.kaartknop .meta{display:block}
.kaartknop .emoji{flex:0 0 50px}