:root{
  --bg:#fff6e0; --paper:#ffffff; --ink:#24304a; --muted:#66708a; --line:#e6dcc3;
  --sun:#ffc531; --sun-dark:#e5a50f; --sun-ink:#3d2b00;
  --coral:#ff6f61; --sky:#4cb8f0; --mint:#43c59e; --grape:#9b7cf2;
  --danger:#c8402f; --ok:#1f8a5f;
  --accent:var(--sky);
}
*{box-sizing:border-box}
html{scroll-padding-top:5.5rem}
body{margin:0;color:var(--ink);font:400 1rem/1.55 Nunito,system-ui,sans-serif;
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(76,184,240,.18) 0 70px, transparent 71px),
    radial-gradient(circle at 90% 8%, rgba(255,111,97,.16) 0 90px, transparent 91px),
    radial-gradient(circle at 80% 70%, rgba(67,197,158,.16) 0 110px, transparent 111px),
    radial-gradient(circle at 5% 85%, rgba(155,124,242,.14) 0 80px, transparent 81px);
  background-attachment:fixed;min-height:100vh;display:flex;flex-direction:column}
h1,h2,.brand,.price,.stamp{font-family:Fredoka,Nunito,system-ui,sans-serif;font-weight:600}
a{color:var(--sky)}

/* balk bovenaan */
.top{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,4vw,2.5rem);background:var(--sun);border-bottom:4px solid var(--ink);
  border-radius:0 0 22px 22px}
.brand{font-size:1.35rem;color:var(--ink);text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.top nav a{text-decoration:none;font-weight:800;color:var(--ink);padding:.3rem .9rem;border-radius:999px;background:rgba(255,255,255,.55);transition:transform .15s}
.top nav a:hover{background:#fff;transform:translateY(-2px) rotate(-2deg)}
.who{font-weight:800;padding:.3rem .9rem}

main{width:100%;flex:1;max-width:1180px;margin:0 auto;padding:1.5rem clamp(1rem,4vw,2.5rem) 4rem}
.intro{margin:1.2rem 0 2.2rem;text-align:center}
.intro h1{font-size:clamp(2rem,6vw,3.4rem);margin:0 0 .4rem;line-height:1.1}
.wobble{display:inline-block;transform:rotate(-2deg);background:linear-gradient(transparent 62%, rgba(255,197,49,.65) 62%)}
.intro p{margin:0 auto;color:var(--muted);max-width:52ch;font-size:1.1rem}

/* kaarten */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.6rem}
.card{--accent:var(--sky);position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:26px;padding:1rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;
  box-shadow:5px 6px 0 var(--accent);transition:transform .18s,box-shadow .18s}
.card:nth-child(4n+2){--accent:var(--coral)}
.card:nth-child(4n+3){--accent:var(--mint)}
.card:nth-child(4n+4){--accent:var(--grape)}
.card:not(.reserved):hover{transform:translateY(-5px) rotate(-1deg);box-shadow:8px 11px 0 var(--accent)}
.pic{position:relative;width:100%;aspect-ratio:1;border:3px solid var(--ink);border-radius:18px;background:#fff;display:grid;place-items:center;overflow:hidden}
.pic img{max-width:92%;max-height:92%;object-fit:contain}
.brand-tag{margin:.7rem 0 0;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card .brand-tag+h2{margin-top:.15rem}
.card h2{font-size:1.1rem;line-height:1.25;margin:.6rem 0 .1rem;min-height:2.5em;display:flex;align-items:center}
.price{margin:0 0 .5rem;padding:.15rem 1.1rem;border-radius:999px;background:var(--accent);color:#fff;font-size:1.35rem;
  text-shadow:0 1px 0 rgba(0,0,0,.18);transform:rotate(-2deg)}
.price.none{background:transparent;color:var(--muted);font:600 .95rem Nunito,sans-serif;text-shadow:none;transform:none}
.card form{width:100%}

/* knoppen */
.btn{display:inline-block;width:100%;padding:.7rem 1rem;border-radius:999px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);
  font:800 .95rem Nunito,sans-serif;text-align:center;text-decoration:none;cursor:pointer;
  box-shadow:0 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background .12s}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink);background:#fffaf0}
.btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.btn:focus-visible,input:focus-visible{outline:4px solid var(--sky);outline-offset:2px}
.btn.primary{background:var(--sun);color:var(--sun-ink)}
.btn.primary:hover{background:#ffd154}
.btn.outline{background:transparent;box-shadow:none;border-color:var(--line);color:var(--ink)}
.btn.outline:hover{border-color:var(--ink);box-shadow:none;background:#fff}
.btn.ghost{border-style:dashed;box-shadow:none;font-size:.85rem;background:transparent}
.btn.danger{border-color:var(--danger);color:var(--danger);box-shadow:0 3px 0 var(--danger)}
.btn:disabled{cursor:not-allowed;transform:none}
.btn.small{width:auto;padding:.3rem .85rem;font-size:.82rem;box-shadow:0 2px 0 var(--ink)}

/* gereserveerd: grijs met stempel */
.card.reserved{background:#e9e9ec;border-color:#a7abb5;box-shadow:5px 6px 0 #c9ccd3}
.card.reserved .pic{border-color:#a7abb5}
.card.reserved .pic img,.card.reserved h2{filter:grayscale(1);opacity:.45}
.card.reserved .price{background:#b9bdc6;transform:none;opacity:.8}
.card.reserved .btn:disabled{background:#d6d9df;border-color:#a7abb5;color:#6d7380;box-shadow:none}
.stamp{position:absolute;left:0;right:0;top:50%;margin:-1.2rem auto 0;width:max-content;transform:rotate(-9deg);padding:.3rem 1.1rem;
  border:4px solid var(--coral);border-radius:12px;background:rgba(255,255,255,.95);font-size:1.3rem;color:var(--coral)}


/* filters */
.filters{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:flex-end;justify-content:center;margin:0 0 1.8rem}
.filters label{font-size:.85rem;color:var(--muted)}
select{font:700 .95rem Nunito,sans-serif;padding:.55rem 2.2rem .55rem .9rem;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;min-width:12rem}
select:disabled{opacity:.5;cursor:not-allowed}
select:focus-visible{outline:4px solid var(--sky);outline-offset:2px}
.toggle{display:inline-flex;align-items:center;gap:.6rem;padding:.45rem 1rem .45rem .5rem;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:800;text-decoration:none;box-shadow:0 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.toggle:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}
.toggle:focus-visible{outline:4px solid var(--sky);outline-offset:2px}
.toggle .knob{position:relative;width:2.6rem;height:1.5rem;border-radius:999px;border:3px solid var(--ink);background:#d9dce3;transition:background .15s}
.toggle .knob::after{content:"";position:absolute;top:50%;left:2px;width:.9rem;height:.9rem;margin-top:-.45rem;border-radius:50%;background:var(--ink);transition:transform .15s}
.toggle.on .knob{background:var(--mint)}
.toggle.on .knob::after{transform:translateX(1.1rem)}

/* formulieren en panelen */
.panel{background:var(--paper);border:3px solid var(--ink);border-radius:24px;padding:1.5rem;margin:1rem 0;display:flex;flex-direction:column;gap:1rem;box-shadow:6px 7px 0 var(--sky)}
.panel.narrow{max-width:440px;margin:2rem auto}
.panel h1{margin:0}
label{display:flex;flex-direction:column;gap:.3rem;font-weight:800}
input{font:inherit;padding:.6rem .85rem;border:3px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);width:100%}
.row{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.row input{flex:1;min-width:0}
.row .btn{width:auto}
.two{display:grid;grid-template-columns:1fr 240px;gap:1.5rem}
.two>div{display:flex;flex-direction:column;gap:1rem}
.preview{align-self:start;border:3px solid var(--ink);border-radius:18px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.preview img{max-width:92%;max-height:92%;object-fit:contain}
.small{font-size:.9rem;color:var(--muted);margin:0}
.flash{padding:.7rem 1rem;border-radius:14px;margin:.5rem 0;font-weight:800;border:3px solid}
.flash.ok{background:#dcf5ea;color:var(--ok);border-color:var(--ok)}
.flash.err{background:#fde5e1;color:var(--danger);border-color:var(--danger)}
.empty{color:var(--muted);text-align:center}
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1rem 0}
.bar h1{margin:0}.bar .btn{width:auto}.bar form{display:inline}
.tablewrap{overflow-x:auto;background:var(--paper);border:3px solid var(--ink);border-radius:20px}
table{width:100%;border-collapse:collapse}
th,td{padding:.7rem .9rem;text-align:left;border-bottom:2px solid var(--line);vertical-align:middle}
th{font-size:.9rem;color:var(--muted)}
tr:last-child td{border-bottom:0}
.thumb{width:48px;height:48px;object-fit:contain;border:2px solid var(--line);border-radius:10px;background:#fff}
.actions{display:flex;gap:.4rem;flex-wrap:wrap}
.actions form{display:inline}
@media (max-width:640px){.two{grid-template-columns:1fr}.preview{max-width:240px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.site-footer{text-align:center;padding:1rem;font-size:.85rem;color:var(--muted)}

/* tijdelijke meldingen */
#toasts{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:9000;display:flex;flex-direction:column;gap:.6rem;align-items:center;width:min(92vw,420px);pointer-events:none}
.toast{pointer-events:auto;cursor:pointer;width:100%;padding:.75rem 1.1rem;border:3px solid var(--ink);border-radius:18px;background:#fff;color:var(--ink);font-weight:800;box-shadow:0 4px 0 var(--sky);animation:toast-in .3s ease-out}
.toast.ok{box-shadow:0 4px 0 var(--mint)}
.toast.out{opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.card.pulse{animation:card-pulse 1.2s ease-out}
@keyframes card-pulse{0%{transform:scale(1.04) rotate(1deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.toast,.card.pulse{animation:none}}

/* favoriet */
.check{flex-direction:row;align-items:center;gap:.6rem}
input[type=checkbox]{width:1.5rem;height:1.5rem;padding:0;accent-color:var(--sun-dark);cursor:pointer}
.card.fav{border-color:var(--sun-dark);background:linear-gradient(#fffdf3,#fff 40%);animation:fav-glow 2.4s ease-in-out infinite}
.fav-badge{position:absolute;top:-17px;left:50%;z-index:2;white-space:nowrap;padding:.2rem .9rem;border:3px solid var(--ink);border-radius:999px;background:var(--sun);color:var(--sun-ink);font:600 .95rem Fredoka,sans-serif;transform:translateX(-50%) rotate(-3deg);animation:fav-wiggle 2.4s ease-in-out infinite}
.card.fav::before,.card.fav::after{content:"\2726";position:absolute;color:var(--sun-dark);font-size:1.4rem;line-height:1;pointer-events:none;animation:twinkle 1.8s ease-in-out infinite}
.card.fav::before{top:.5rem;left:-.7rem}
.card.fav::after{bottom:3.4rem;right:-.7rem;animation-delay:.9s}
.card.fav.reserved{animation:none;background:#e9e9ec;border-color:#a7abb5}
.card.fav.reserved::before,.card.fav.reserved::after{display:none}
.card.fav.reserved .fav-badge{background:#c9ccd3;color:#6d7380;border-color:#a7abb5;animation:none}
@keyframes fav-glow{0%,100%{box-shadow:5px 6px 0 var(--sun),0 0 0 0 rgba(255,197,49,.55)}50%{box-shadow:5px 6px 0 var(--sun),0 0 0 12px rgba(255,197,49,0)}}
@keyframes fav-wiggle{0%,100%{transform:translateX(-50%) rotate(-3deg)}50%{transform:translateX(-50%) rotate(3deg) scale(1.05)}}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.7) rotate(0)}50%{opacity:1;transform:scale(1.25) rotate(25deg)}}
@media (prefers-reduced-motion:reduce){.card.fav,.fav-badge,.card.fav::before,.card.fav::after{animation:none}}

/* Reserveren-knop krijgt de kleur van de kaart */
.card:not(.reserved) .btn.primary{background:var(--accent);color:var(--ink)}
.card:not(.reserved) .btn.primary:hover{background:var(--accent);filter:brightness(1.08)}

/* filter in beheer */
.seg{display:inline-flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.seg a{padding:.4rem 1rem;border:3px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:800;text-decoration:none;transition:transform .12s}
.seg a:hover{transform:translateY(-2px)}
.seg a.on{background:var(--sun);box-shadow:0 3px 0 var(--ink)}
.seg a:focus-visible{outline:4px solid var(--sky);outline-offset:2px}

/* zoeken */
.filters .search{min-width:min(100%,19rem)}
.filters .search .row{flex-wrap:nowrap}
input[type=search]{-webkit-appearance:none;appearance:none}
.toolbar{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;align-items:center;justify-content:space-between;margin:0 0 1rem}
.toolbar .seg{margin:0}
.searchbox{flex-wrap:nowrap;flex:1;min-width:15rem;max-width:26rem}

.adminfilters{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;flex:1 1 100%}
.adminfilters input[type=search]{flex:1 1 16rem;min-width:0;max-width:26rem}
.adminfilters select{min-width:0}
.adminfilters .btn{width:auto}