:root{
  --bg:#f4efe9; --tekst:#2a2a2a; --accent:#b07d56; --bg-opacity:0.15;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--tekst);
  display:flex; justify-content:center; align-items:flex-start;
  padding:1.25rem; min-height:100vh;
}
.bg{
  position:fixed; inset:0; z-index:-1; background-size:cover; background-position:center;
  opacity:var(--bg-opacity);
}
.kaart{
  width:100%; max-width:520px; background:rgba(255,255,255,.88);
  backdrop-filter:blur(4px); border-radius:20px; padding:1.5rem;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.logo{max-height:80px; margin:0 auto 1rem; display:block}
h1{font-size:1.5rem; margin:.2rem 0 .6rem; text-align:center}
.intro{text-align:center; color:#5a5246; margin-bottom:1.25rem}
.veld{display:block; margin-bottom:1rem}
.veld span{display:block; font-size:.85rem; margin-bottom:.3rem; color:#5a5246}
input[type=text]{
  width:100%; padding:.8rem 1rem; font-size:1rem; border:1px solid #d9d0c2;
  border-radius:12px; background:#fff;
}
.knop{
  width:100%; padding:.9rem 1rem; font-size:1rem; border:0; border-radius:14px;
  background:#ece4d7; color:var(--tekst); cursor:pointer; margin-top:.25rem;
}
.knop.primair{background:var(--accent); color:#fff; font-weight:600; margin-top:1rem}
.knop:active{transform:translateY(1px)}
.lijst{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.5rem; margin-top:1rem}
.thumb{position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; background:#ddd}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb .balk{position:absolute; left:0; bottom:0; height:4px; background:var(--accent); width:0; transition:width .2s}
.thumb.klaar::after{content:"✓"; position:absolute; top:4px; right:6px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); font-weight:700}
.klaar{text-align:center}
.klaar .groot{font-size:1.3rem; font-weight:700; margin:1.5rem 0}
.fout{background:#fdecea; color:#a3271c; padding:.8rem 1rem; border-radius:12px; margin-top:1rem}