:root {
  --zand:#f2f1ed; --wit:#fcfcfc; --lijn:#e2e0d8; --tekst:#2c2c2c;
  --grijs:#777; --donker:#3a3a3a; --groen:#1f6b33; --groen-bg:#e7f4ea;
  --rood:#9b2c25; --rood-bg:#fcebea; --geel-bg:#fcf8e3; --geel-lijn:#f3e8c4;
}
* { box-sizing:border-box; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--zand); color:var(--tekst); margin:0; padding:2rem 1rem;
  display:flex; flex-direction:column; align-items:center; min-height:100vh;
}
.kaart {
  background:var(--wit); border:1px solid var(--lijn); border-radius:14px;
  width:100%; padding:2rem; box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.kaart.smal { max-width:420px; }
.kaart.breed { max-width:760px; }
.merk { font-weight:700; letter-spacing:.5px; margin:0 0 1.5rem; text-align:center; color:var(--donker); }
h1 { font-size:1.3rem; margin:0 0 .25rem; }
p.sub { color:var(--grijs); margin:0 0 1.5rem; font-size:.9rem; }
label { display:block; font-weight:600; margin:1rem 0 .35rem; font-size:.9rem; }
input[type=text], input[type=email], input[type=password], select {
  width:100%; padding:.7rem .8rem; border:1px solid var(--lijn);
  border-radius:8px; font-size:1rem; background:#fff;
}
button, .knop {
  margin-top:1.2rem; display:inline-block; width:100%; padding:.8rem; border:0;
  border-radius:8px; background:var(--donker); color:#fff; font-size:1rem;
  font-weight:600; cursor:pointer; text-align:center; text-decoration:none;
}
button:hover, .knop:hover { background:#222; }
.knop.klein { width:auto; padding:.4rem .8rem; font-size:.82rem; margin:0; }
.knop.grijs { background:#8a8a8a; }
.knop.grijs:hover { background:#6f6f6f; }
.melding { padding:.9rem 1rem; border-radius:8px; margin-bottom:1.25rem; font-size:.92rem; line-height:1.5; }
.ok   { background:var(--groen-bg); border:1px solid #b6dcc0; color:var(--groen); }
.fout { background:var(--rood-bg); border:1px solid #efb9b6; color:var(--rood); }
.let-op { background:var(--geel-bg); border:1px solid var(--geel-lijn); color:#8a6d3b; }
.hint { font-size:.8rem; color:var(--grijs); margin-top:.25rem; }
a { color:var(--donker); }
.tabel { width:100%; border-collapse:collapse; margin-top:1rem; font-size:.9rem; }
.tabel th, .tabel td { text-align:left; padding:.6rem .5rem; border-bottom:1px solid var(--lijn); }
.tabel th { font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:var(--grijs); }
.badge { display:inline-block; padding:.15rem .5rem; border-radius:99px; font-size:.72rem; font-weight:600; }
.badge.actief { background:var(--groen-bg); color:var(--groen); }
.badge.inactief { background:#eee; color:#888; }
.badge.open { background:var(--geel-bg); color:#8a6d3b; }
.balk { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; }
.acties { display:flex; gap:.4rem; flex-wrap:wrap; }

/* HUB-tegels */
.tegels { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); gap:1rem; margin-top:1.5rem; }
.tegel {
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  background:#fff; border:1px solid var(--lijn); border-radius:12px; padding:1.1rem;
  text-decoration:none; color:var(--tekst); transition:border-color .12s, transform .12s, box-shadow .12s;
  min-height:128px;
}
.tegel:hover { border-color:#b3aa98; transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.06); }
.tegel .material-icons { font-size:30px; color:var(--donker); margin-bottom:.5rem; }
.tegel .titel { font-weight:700; font-size:1rem; }
.tegel .uitleg { font-size:.8rem; color:var(--grijs); margin-top:.2rem; line-height:1.35; }
/* Teaser: zichtbaar maar geen toegang */
.tegel.teaser { filter:grayscale(1); opacity:.55; cursor:default; pointer-events:none; }
.welkom { font-size:1.4rem; margin:0; }