* { box-sizing: border-box; }

:root{
  --pink:#f8cfe5;     /* lichtroze */
  --lilac:#d8c3ff;    /* lila */
  --babyblue:#cfe9ff; /* babyblauw */
  --ink:#1f1f2b;
  --primary: var(--lilac);
  --primary-ink: #3a2a6a;
}

body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin: 0; color: #222; }
header { position: sticky; top: 0; background: white; border-bottom: 1px solid var(--babyblue); padding: 12px 16px; display: flex; align-items: center; gap: 16px; }
header a.brand { font-weight: 700; text-decoration: none; color: inherit; }
nav a { margin-right: 12px; text-decoration: none; color: #444; }
nav a:hover { text-decoration: underline; }
.hero { padding: 48px 16px; background: linear-gradient(180deg,var(--babyblue),#fff); }
.hero h1 { margin: 0 0 12px; font-size: 38px; }
.hero p { margin: 0 0 24px; font-size: 18px; color:#444; }
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); }
.card { border: 1px solid var(--babyblue); border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.card img { width: 100%; height: 160px; object-fit: cover; }
.card .p { padding: 12px; }
.btn { display: inline-block; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--primary-ink); color: #1c1535; background: var(--primary-ink); text-decoration: none; }
.btn.alt { background: white; color: var(--primary-ink); }
footer { border-top: 1px solid var(--babyblue); padding: 24px 16px; color:#555; }
.small { font-size: 12px; color:#666; }
.badge { display:inline-block; padding:4px 8px; border:1px solid var(--primary-ink); color:var(--primary-ink); border-radius: 999px; font-size:12px; }
.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid var(--babyblue); padding: 8px; text-align: left; }
.alert { border-left: 4px solid #f39c12; background:#fff9e6; padding:12px; border-radius:6px; }