:root{
  --bg:#0b0b0b; --bg-alt:#141414; --card:#181818; --line:#252525;
  --text:#f0ede8; --muted:#a39d96; --accent:#e8431a; --accent-text:#f0ede8;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{ font-family:'DM Sans', system-ui, sans-serif; background:var(--bg); color:var(--text); line-height:1.7; }
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}
h1,h2,h3,.logo,.btn{ font-family:'Oswald', sans-serif; }
h1,h2{ text-transform:uppercase; font-weight:700; }
.wrap{ max-width:1060px; margin:0 auto; padding:0 24px; }
.smal{ max-width:720px; margin:0 auto; padding:0 24px; }
.eyebrow{ display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; }
.muted{ color:var(--muted); }
.accent{ color:var(--accent); }
.btn{
  display:inline-block; background:var(--accent); color:var(--accent-text); text-transform:uppercase; letter-spacing:.04em;
  padding:14px 26px; border-radius:10px; border:1px solid var(--accent);
  font-weight:600; text-decoration:none; font-size:1rem; cursor:pointer; transition:transform .15s;
}
.btn:hover{ transform:translateY(-2px); }
.btn[disabled]{ opacity:.6; cursor:default; transform:none; }

nav{ position:sticky; top:0; z-index:50; background:var(--bg); border-bottom:1px solid var(--line); padding:14px 0; }
nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.logo{ font-weight:700; font-size:1.35rem; text-decoration:none; color:var(--text); letter-spacing:.01em; }
.logo span{ color:var(--accent); }
nav a.terug{ color:var(--muted); text-decoration:none; font-size:.95rem; }
nav a.terug:hover{ color:var(--text); }

main{ position:relative; z-index:2; padding:72px 0 88px;
  background:radial-gradient(1200px 600px at 80% -10%, rgba(232,67,26,.14), transparent 60%); }
h1{ font-size:clamp(2.1rem,5vw,3.2rem); line-height:1.08; letter-spacing:-.01em; margin-bottom:20px; }
.lede{ font-size:1.12rem; color:var(--muted); max-width:60ch; }

/* Overzicht */
.lijst{ display:grid; gap:18px; margin-top:44px; }
.lijst:not(:has(.item)){ margin-top:0; }
.item{ display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 28px; text-decoration:none; color:var(--text); transition:border-color .15s, transform .15s; }
.item:hover{ border-color:var(--accent); transform:translateY(-2px); }
.item .datum{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.item h2{ font-size:1.45rem; line-height:1.2; margin:6px 0 8px; }
.item p{ color:var(--muted); }
.leeg{ margin-top:44px; padding:28px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); }

/* Artikel */
.meta{ display:flex; gap:12px; align-items:center; margin:8px 0 34px; color:var(--muted); font-size:.92rem; }
.meta img{ width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 18%; border:2px solid var(--accent); }
.tekst{ font-size:1.08rem; }
.tekst p{ margin-bottom:1.15em; }
.tekst h2{ font-size:1.6rem; line-height:1.2; margin:1.8em 0 .6em; }
.tekst h3{ font-size:1.2rem; margin:1.4em 0 .4em; }
.tekst a{ color:var(--accent); }
.tekst ul,.tekst ol{ margin:0 0 1.15em 1.3em; }
.tekst li{ margin-bottom:.4em; }
.tekst blockquote{ border-left:3px solid var(--accent); padding:4px 0 4px 18px; margin:1.4em 0; color:var(--text); font-style:italic; }
.tekst strong{ color:#fff; }
.volgende{ margin-top:40px; padding:26px 28px; background:var(--bg-alt); border-left:3px solid var(--accent); border-radius:6px; }
.volgende p{ color:var(--muted); margin-bottom:16px; }

/* Aanmelden */
.aanmelden{ margin-top:56px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px; }
.aanmelden h2{ font-size:1.5rem; line-height:1.2; margin-bottom:8px; }
.aanmelden #art-wrap > p{ color:var(--muted); margin-bottom:20px; }
.aanmelden .velden{ display:grid; gap:12px; }
@media(min-width:640px){ .aanmelden .velden{ grid-template-columns:1fr 1fr; } }
.aanmelden input[type=text], .aanmelden input[type=email]{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--text); font:inherit;
}
.aanmelden input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(232,67,26,.18); }
.vinkje{ display:flex; gap:10px; align-items:flex-start; margin:16px 0 18px; }
.vinkje input{ width:18px; height:18px; margin-top:4px; accent-color:var(--accent); flex-shrink:0; cursor:pointer; }
.vinkje label{ font-size:.92rem; color:var(--muted); line-height:1.5; cursor:pointer; }
.aanmelden small{ display:block; margin-top:12px; color:var(--muted); font-size:.85rem; }
.aanmelden small.fout{ color:var(--accent); display:none; }
.aanmelden a{ color:inherit; }

footer{ position:relative; z-index:2; border-top:1px solid var(--line); padding:36px 0; font-size:.9rem; color:var(--muted); }
footer .wrap{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
footer a{ color:inherit; }