:root{
  --bg:#f7f7f3; --card:#fff; --ink:#1a1a1a; --muted:#6b6b66; --line:#e2e2dc;
  --green:#8aa876; --deep:#26301f; --danger:#b3382c;
  --font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(20px,5vw,53px)}
.narrow{max-width:680px;margin:0 auto;padding:40px 20px}

.site-header{border-bottom:1px solid var(--line)}
.bar{display:flex;justify-content:space-between;align-items:center;height:84px}
.logo{font-weight:800;font-size:1.15rem;letter-spacing:-.01em;text-decoration:none}
.site-header nav{display:flex;gap:30px}
.site-header nav a{color:var(--muted);text-decoration:none}
.site-header nav a:hover{color:var(--ink)}

.hero{padding-top:110px;padding-bottom:110px}
.eyebrow{margin:0 0 14px;color:var(--green);font-weight:700;font-size:.85rem;letter-spacing:.12em}
h1{margin:0;font-size:clamp(3rem,9vw,5.2rem);line-height:.98;font-weight:800;letter-spacing:-.045em}
.h-md{font-size:2.2rem;letter-spacing:-.03em;line-height:1.1;margin-bottom:24px}
.lead{max-width:640px;margin:26px 0 0;color:var(--muted);font-size:1.25rem;line-height:1.7}

/* Filter Knoppen & Dropdowns Styling */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.filters a {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.filters a:hover {
  border-color: var(--green);
  color: var(--ink);
  transform: translateY(-1px);
}

.filters a.on {
  background: var(--deep);
  border-color: var(--deep);
  color: #fff;
  box-shadow: 0 4px 10px rgba(38, 48, 31, 0.15);
}

/* Dropdowns Formulier */
.filters-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}

.filters-form select {
  padding: 8px 36px 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  
  /* Eigen subtiel pijl-icoontje */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%206b6b66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.filters-form select:hover {
  border-color: var(--green);
  color: var(--ink);
}

.filters-form select.on {
  background-color: var(--deep);
  border-color: var(--deep);
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.filters-form .reset {
  padding: 6px 12px;
  color: var(--muted);
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.filters-form .reset:hover {
  color: var(--danger);
  text-decoration: underline;
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden;text-decoration:none}
.card:hover{border-color:var(--green)}
.thumb{height:300px;display:grid;place-items:center}
.thumb span{font-size:4rem;font-weight:800;color:var(--deep);letter-spacing:-.02em}
.g0{background:linear-gradient(135deg,#dfe6d6,#a8bb9b)}
.g1{background:linear-gradient(135deg,#ddd5c3,#b9a88a)}
.g2{background:linear-gradient(135deg,#d5dfdf,#9db7b7)}
.card-body{padding:28px}
.card h2{margin:0 0 8px;font-size:1.65rem;letter-spacing:-.02em;line-height:1.2}
.card p{margin:0 0 20px;color:var(--muted);font-size:1.1rem}
.pill{display:inline-block;padding:4px 16px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.9rem;background:var(--card)}
.empty{color:var(--muted)}

.about{padding-top:100px;padding-bottom:100px}
.about h2{font-size:2rem;letter-spacing:-.03em;margin:0 0 8px}
.about p{max-width:640px;color:var(--muted);font-size:1.15rem}
.detail{padding-top:48px;padding-bottom:90px}
.detail h1{font-size:clamp(2.4rem,7vw,4rem);margin-top:16px}
.prose{max-width:680px;margin-top:40px;font-size:1.15rem}
.back{display:inline-block;margin-bottom:24px;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}
.notice{background:#fff7e0;border:1px solid #efdca0;border-radius:12px;padding:10px 16px}
.notice.err{background:#fdecea;border-color:#f0b9b3;color:var(--danger)}

.site-footer{border-top:1px solid var(--line);padding:38px 0;color:var(--muted)}

.dash-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:40px}
.btn{display:inline-block;padding:11px 22px;border:0;border-radius:999px;background:var(--deep);color:#fff;font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn:hover{background:#3a4830}
.btn-sm{display:inline-block;padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:.88rem;text-decoration:none;cursor:pointer}
.btn-sm:hover{border-color:var(--green)}
.btn-sm.danger{color:var(--danger)}
.btn-sm.danger:hover{border-color:var(--danger)}
.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;margin-bottom:60px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.table th{color:var(--muted);font-weight:600;font-size:.9rem}
.table tr:last-child td{border-bottom:0}
.actions form{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.status{padding:3px 12px;border-radius:999px;font-size:.85rem;white-space:nowrap}
.status.live{background:#e3ecd9;color:#2f4a1f}
.status.draft{background:#eee;color:var(--muted)}
.form{display:grid;gap:20px}
.form label{display:grid;gap:6px;font-weight:600}
.form input,.form select,.form textarea{padding:11px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);font:inherit;font-weight:400}
.form .check{display:flex;align-items:center;gap:10px;font-weight:400}
.form .check input{width:18px;height:18px}
.form .btn{justify-self:start}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:600px){.hero{padding-top:70px;padding-bottom:70px}.thumb{height:220px}}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:40px}
.gallery img{width:100%;height:220px;object-fit:cover;border:1px solid var(--line);border-radius:18px;display:block}
.h-sm{font-size:1.4rem;letter-spacing:-.02em;margin:40px 0 10px}
.filelist{list-style:none;padding:0;margin:0}
.filelist li{padding:10px 0;border-bottom:1px solid var(--line)}
.filelist span{color:var(--muted);font-size:.9rem;margin-left:8px}
.detail .btn{margin-top:28px}
.filebox{display:grid;gap:8px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-weight:400}
.filebox label{display:flex;gap:10px;align-items:center;font-weight:400}
.hint{color:var(--muted);font-size:.9rem;font-weight:400}

.site-frame{width:100%;height:600px;border:1px solid var(--line);border-radius:18px;background:#fff;margin-top:20px}

.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:600px){.row3{grid-template-columns:1fr}}
.filters-form{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.filters-form select{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--muted);font:inherit;font-size:.95rem}
.filters-form select.on{background:var(--deep);border-color:var(--deep);color:#fff}
.filters-form .reset{align-self:center;color:var(--muted);font-size:.95rem}
.card p.meta{margin:-8px 0 16px;font-size:.9rem;color:var(--muted);font-size:.9rem}