/* Gedeelde stijl voor uitrusting, teamruimte en beheer */
:root{--zwart:#0a0b09;--donker:#11130f;--paneel:#171a14;--lijn:#2a3022;--groen:#5b7a1e;--groen-licht:#8fb339;--wit:#eef0ea;--grijs:#9aa192;--rood:#c8102e}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
body{background:var(--zwart);color:var(--wit);font:16px/1.6 Inter,system-ui,sans-serif;overflow-x:hidden}
a{color:var(--groen-licht)}
img{display:block;max-width:100%}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}
.label{font:700 .8rem/1 "Saira Condensed",sans-serif;letter-spacing:.25em;text-transform:uppercase;color:var(--groen-licht)}
.label::before{content:"";display:inline-block;width:28px;height:2px;background:var(--rood);vertical-align:middle;margin-right:10px}
h1{font:400 clamp(2.2rem,6vw,4rem)/1 "Saira Stencil One",sans-serif;letter-spacing:.03em;margin:.6rem 0 1rem}
h2{font:400 clamp(1.6rem,4vw,2.3rem)/1.1 "Saira Stencil One",sans-serif;letter-spacing:.03em;margin:.4rem 0 .8rem}
h3{font:700 1.08rem "Saira Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase}
p{color:#c9cec1}
.klein{font-size:.88rem;color:var(--grijs)}
section{padding:56px 0;border-top:1px solid var(--lijn)}
section.donker{background:var(--donker)}

nav{position:sticky;top:0;z-index:50;background:rgba(10,11,9,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--lijn)}
nav .wrap{display:flex;align-items:center;gap:18px;height:64px}
nav .merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--wit);margin-right:auto}
nav .merk img{width:40px;height:40px}
nav .merk span{font:400 1.15rem "Saira Stencil One",sans-serif;letter-spacing:.06em}
nav .links a{font:600 .88rem "Saira Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--grijs);margin-left:16px}
nav .links a:hover{color:var(--wit)}
header.kop{padding:56px 0 40px;background:linear-gradient(180deg,rgba(10,11,9,.6),var(--zwart)),url(beelden/hero.jpg) center/cover}
header.kop p{max-width:640px;color:#d6dacf}

.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;font:700 .9rem "Saira Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:2px solid var(--groen);background:var(--groen);color:#fff;cursor:pointer}
.knop:hover{background:var(--groen-licht);border-color:var(--groen-licht);color:var(--zwart)}
.knop.rand{background:transparent}
.knop.rood{background:transparent;border-color:var(--rood);color:#ff8a9a}
.knop.rood:hover{background:var(--rood);color:#fff}
.knop.klein{padding:7px 12px;font-size:.78rem}
.knop:disabled{opacity:.5;cursor:wait}

.kaart{border:1px solid var(--lijn);background:var(--paneel);padding:22px}
.raster{display:grid;gap:14px}
.raster.twee{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.raster.twee{grid-template-columns:1fr}}

label.veld{display:block;margin-bottom:12px}
label.veld span{display:block;font:700 .75rem "Saira Condensed",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--grijs);margin-bottom:5px}
input,textarea,select{width:100%;background:var(--zwart);border:1px solid var(--lijn);color:var(--wit);padding:11px 12px;font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--groen-licht);outline-offset:-1px}
textarea{min-height:130px;resize:vertical}
.vink{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.vink input{width:auto}

.melding{padding:12px 16px;margin:12px 0;border-left:3px solid var(--groen-licht);background:rgba(143,179,57,.08)}
.melding.fout{border-color:var(--rood);background:rgba(200,16,46,.08)}
.verborgen{display:none!important}

.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}
.tabs button{background:transparent;border:1px solid var(--lijn);color:var(--grijs);padding:10px 16px;font:700 .85rem "Saira Condensed",sans-serif;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.tabs button[aria-selected=true]{border-color:var(--groen-licht);color:var(--wit);background:var(--paneel)}

.lijst-item{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;padding:14px 0;border-bottom:1px dashed var(--lijn)}
.lijst-item:last-child{border-bottom:0}
.lijst-item .meta{font:700 .75rem "Saira Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--groen-licht)}

.keuze{display:flex;flex-wrap:wrap;gap:6px}
.keuze button{background:transparent;border:1px solid var(--lijn);color:var(--grijs);padding:8px 12px;font:700 .8rem "Saira Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.keuze button[aria-pressed=true]{color:#fff}
.keuze button[data-s=ja][aria-pressed=true],.keuze button[data-s=heb][aria-pressed=true]{background:var(--groen);border-color:var(--groen)}
.keuze button[data-s=misschien][aria-pressed=true],.keuze button[data-s=zoek][aria-pressed=true]{background:#8a6d1c;border-color:#8a6d1c}
.keuze button[data-s=nee][aria-pressed=true],.keuze button[data-s=niet][aria-pressed=true]{background:#3a3f35;border-color:#3a3f35}

.leden{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lid{font:700 .74rem "Saira Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--lijn);color:var(--grijs)}
.lid.ja,.lid.heb{border-color:var(--groen);color:var(--groen-licht)}
.lid.misschien,.lid.zoek{border-color:#8a6d1c;color:#e0b84a}
.lid.nee,.lid.niet{text-decoration:line-through;opacity:.6}

table.matrix{width:100%;border-collapse:collapse;font-size:.92rem}
table.matrix th,table.matrix td{border-bottom:1px solid var(--lijn);padding:10px 8px;text-align:left;vertical-align:top}
table.matrix th{font:700 .72rem "Saira Condensed",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs)}
.tabel-scroll{overflow-x:auto;border:1px solid var(--lijn);background:var(--paneel)}

.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:10px}
.fotos figure{position:relative;border:1px solid var(--lijn)}
.fotos img{aspect-ratio:1;object-fit:cover;width:100%}
.fotos button{position:absolute;top:4px;right:4px}

footer{border-top:1px solid var(--lijn);padding:32px 0;background:var(--donker)}
footer p{font-size:.88rem;color:var(--grijs)}
