/* BessQ — bessq.com
   Eén stylesheet voor de hele site. Geen build-stap, geen framework.
   De server levert dit gzipped uit (zie .htaccess), dus bewust leesbaar gelaten. */

:root{
  --groen:#4E7F26;
  --groen-donker:#2F6B1F;
  --groen-licht:#9BCB6B;
  --inkt:#0F1A20;
  --tekst:#46545D;
  --grijs:#5A6870;
  --grijs-licht:#6B7A83;
  --grijs-zacht:#7B8890;
  --lijn:#E1E7E2;
  --lijn-sterk:#C9D3CB;
  --lijn-zacht:#E9EDE9;
  --vlak:#F5F7F4;
  --wit:#fff;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --kop:"Archivo",system-ui,-apple-system,Segoe UI,sans-serif;
  --body:"Source Sans 3",system-ui,-apple-system,Segoe UI,sans-serif;
  --breed:1180px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--wit);color:var(--tekst);font-family:var(--body);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--kop);letter-spacing:-.025em;line-height:1.07;margin:0;color:var(--inkt);text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse;width:100%}
img{max-width:100%}
a{color:var(--groen-donker);text-decoration:none}
a:hover{color:var(--groen)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--groen);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}

/* ---------- lay-out ---------- */
.wrap{max-width:var(--breed);margin:0 auto;padding:0 24px}
.sectie{padding:88px 0}
.sectie--lijn{border-top:1px solid var(--lijn)}
.sectie--vlak{background:var(--vlak);border-top:1px solid var(--lijn)}
.sectie--onder{border-bottom:1px solid var(--lijn)}
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px}
.grid--kaart{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.grid--breed{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.grid--duo{grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:24px}
.mid{align-items:center}
.eind{align-items:end}

/* ---------- typografie ---------- */
.kicker{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--groen);margin-bottom:20px}
.h-xl{font-weight:800;font-size:clamp(2.2rem,5.2vw,4rem)}
.h-l{font-weight:800;font-size:clamp(2.1rem,4.8vw,3.6rem)}
.h-m{font-weight:800;font-size:clamp(1.7rem,3.4vw,2.7rem)}
.h-s{font-weight:800;font-size:clamp(1.5rem,2.8vw,2rem)}
.lead{margin-top:28px;font-size:1.125rem;color:var(--grijs);max-width:34rem;text-wrap:pretty}
.intro{color:var(--grijs);max-width:36rem;text-wrap:pretty}
.klein{font-size:.9rem;color:var(--grijs-licht)}
.mt{margin-top:20px}.mt-l{margin-top:44px}
.byline{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-zacht);padding-top:12px}

/* ---------- knoppen ---------- */
.knop{display:inline-block;background:var(--groen);color:#fff;padding:14px 26px;border-radius:2px;font-weight:600;border:1px solid var(--groen)}
.knop:hover{background:var(--groen-donker);border-color:var(--groen-donker);color:#fff}
.knop--rand{background:transparent;color:var(--inkt);border:1px solid var(--lijn-sterk)}
.knop--rand:hover{background:var(--vlak);color:var(--inkt);border-color:var(--lijn-sterk)}
.knop--klein{padding:11px 20px;font-size:.9rem}
.knoppen{margin-top:36px;display:flex;flex-wrap:wrap;gap:12px}

/* ---------- header ---------- */
.kop-balk{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--lijn)}
.kop-balk .wrap{height:70px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo img{height:30px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--grijs-licht);font-weight:600;font-size:.95rem}
.nav a:hover{color:var(--inkt)}
.nav a[aria-current="page"]{color:var(--inkt);box-shadow:inset 0 -2px 0 var(--groen)}
.nav a.knop{color:#fff}
.menu-knop{display:none;background:transparent;border:1px solid var(--lijn-sterk);border-radius:2px;padding:8px 12px;color:var(--inkt);font-weight:600}
@media(max-width:900px){
  .nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--wit);border-bottom:1px solid var(--lijn);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 20px}
  .nav.open{display:flex}
  .nav a{padding:12px 0;border-bottom:1px solid var(--lijn-zacht)}
  .nav a.knop{margin-top:14px;text-align:center;border-bottom:0}
  .menu-knop{display:block}
}

/* ---------- feitenbalk ---------- */
.feiten{background:var(--vlak);border-bottom:1px solid var(--lijn)}
.feiten .wrap{padding-top:18px;padding-bottom:18px;display:flex;flex-wrap:wrap;gap:8px 40px;font-family:var(--mono);font-size:.8rem;color:var(--grijs-licht)}
.feiten strong{color:var(--inkt)}

/* ---------- kaarten ---------- */
.kaart{background:var(--vlak);border:1px solid var(--lijn);border-radius:4px;padding:26px}
.kaart h3{font-weight:700;font-size:1.12rem}
.kaart p{margin-top:12px;color:var(--grijs);text-wrap:pretty}
.kaart--wit{background:var(--wit)}
.kaart--donker{background:var(--inkt);border-color:var(--inkt)}
.kaart--donker h3,.kaart--donker p{color:#C6D0D6}
.kaart--donker h3{color:#fff}

/* ---------- figuren ---------- */
figure{margin:0}
.beeld{border:1px solid var(--lijn);border-radius:4px;overflow:hidden;background:var(--vlak)}
.beeld img{width:100%;height:100%;object-fit:cover;display:block}
.beeld--hero{aspect-ratio:16/10}
.beeld--h290{height:290px}
.beeld--h240{height:240px}
.beeld--h400{height:400px}
.onderschrift{padding-top:14px}
.onderschrift h3{font-weight:700;font-size:1.05rem}
.onderschrift p{margin-top:8px;font-size:.95rem;color:var(--grijs)}
.meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-zacht);padding:12px 2px 0;display:flex;justify-content:space-between;gap:12px}
.meta span:last-child{color:var(--groen)}

/* ---------- tabel ---------- */
.tabel-omhulsel{border:1px solid var(--lijn);border-radius:4px;overflow-x:auto}
.tabel-omhulsel table{min-width:640px}
th{text-align:left;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--grijs-licht);padding:14px 16px;border-bottom:2px solid var(--groen);vertical-align:top}
th small{display:block;text-transform:none;letter-spacing:0;font-size:.72rem;color:#8B979E;margin-top:4px;font-family:var(--body)}
td{padding:14px 16px;border-bottom:1px solid var(--lijn-zacht);color:var(--grijs)}
td:first-child{font-weight:600;color:var(--inkt)}
td.num{font-family:var(--mono);font-size:.92rem;color:var(--groen-donker)}

/* ---------- lijsten ---------- */
.punten{display:flex;flex-direction:column;gap:10px}
.punten li{position:relative;padding-left:20px;color:var(--grijs)}
.punten li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--groen)}
.kaart--donker .punten li{color:#C6D0D6}
.kaart--donker .punten li::before{background:var(--groen-licht)}

.stappen li{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:22px 0;border-top:1px solid var(--lijn)}
.stappen .nr{font-family:var(--mono);font-size:.78rem;color:var(--groen);padding-top:5px}
.stappen h3{font-weight:700;font-size:1.12rem}
.stappen p{margin-top:8px;color:var(--grijs);text-wrap:pretty}

/* ---------- documenten ---------- */
.doc{background:var(--wit);border:1px solid var(--lijn);border-radius:4px;padding:20px;display:flex;justify-content:space-between;align-items:center;gap:16px;color:inherit}
.doc:hover{border-color:var(--groen);color:inherit}
.doc b{display:block;font-weight:600;color:var(--inkt)}
.doc small{display:block;font-size:.9rem;color:var(--grijs-licht);margin-top:4px}
.doc .ext{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--groen)}

/* ---------- diagram ---------- */
.diagram{background:var(--wit);border:1px solid var(--lijn);border-radius:4px;padding:24px}
.diagram svg{width:100%;height:auto;display:block}
.legenda{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:18px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs-licht)}
.legenda span{display:flex;align-items:center;gap:7px}
.vlek{width:11px;height:11px;border-radius:2px;display:inline-block}

/* ---------- formulier ---------- */
.formulier{background:var(--vlak);border:1px solid var(--lijn);border-radius:4px;padding:32px}
.veld{margin-bottom:18px}
.veld label{display:block;font-weight:600;font-size:.9rem;color:var(--inkt);margin-bottom:6px}
.veld input,.veld select,.veld textarea{width:100%;padding:12px 14px;border:1px solid var(--lijn-sterk);border-radius:2px;background:var(--wit);font:inherit;color:var(--inkt)}
.veld textarea{min-height:120px;resize:vertical}
.veld-rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.akkoord{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--grijs);margin-bottom:20px}
.akkoord input{margin-top:5px;flex:0 0 auto}
.melding{margin-top:14px;font-size:.92rem;color:#B4441F}
.geslaagd{background:var(--vlak);border:1px solid var(--groen);border-radius:4px;padding:32px}

/* ---------- scan ---------- */
.scan-kaart{max-width:620px;margin:0 auto;background:var(--wit);border:1px solid var(--lijn);border-radius:4px;padding:32px}
.voortgang{display:flex;gap:6px;margin-bottom:28px}
.voortgang i{flex:1;height:3px;background:var(--lijn);border-radius:2px}
.voortgang i.aan{background:var(--groen)}
.vraag h2{font-weight:800;font-size:clamp(1.4rem,3.4vw,1.9rem);margin-bottom:24px}
.keuzes{display:flex;flex-direction:column;gap:12px}
.keuze{display:block;width:100%;text-align:left;background:var(--wit);border:1px solid var(--lijn-sterk);border-radius:3px;padding:18px 20px;font-weight:600;color:var(--inkt);line-height:1.4}
.keuze:hover{border-color:var(--groen);background:var(--vlak)}
.terug{margin-top:22px;background:transparent;border:0;padding:0;color:var(--grijs-licht);font-size:.92rem;text-decoration:underline}
.aanbevolen{border:1px solid var(--groen);border-radius:4px;padding:28px;background:var(--vlak)}
.aanbevolen .label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--groen);margin-bottom:14px}
.route{border:1px solid var(--lijn);border-radius:4px;padding:22px;background:var(--wit);margin-top:14px}
.route h3{font-weight:700;font-size:1.08rem}
.route p{margin-top:10px;color:var(--grijs);font-size:.96rem;text-wrap:pretty}
.route .knop{margin-top:16px}
.verborgen{display:none}

/* ---------- footer ---------- */
.voet{padding:56px 0;background:var(--inkt);color:#8D9BA3}
.voet h4{color:#fff;font-size:.95rem;font-weight:700;margin-bottom:14px}
.voet a{color:#B9C4CA}
.voet a:hover{color:#fff}
.voet .kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:40px}
.voet li{margin-bottom:8px;font-size:.94rem}
.voet .slot{margin-top:44px;padding-top:24px;border-top:1px solid #24333B;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:#6E7D85}
.voet img{height:26px;width:auto;margin-bottom:18px;opacity:.95}

@media print{.kop-balk,.voet,.knoppen{display:none}}