/* Huisstijl van de klant (pakket van 06-10-2026): kleuren en letters.
   AANNAMES: lijnkleur en hulptekst zijn ink met 24% en 78% dekking; de tekstletter van de klant ontbreekt, DM Sans is de vervanger.
   Letters staan lokaal (geen Google Fonts, AVG). */
@font-face { font-family: "DM Sans"; src: url(../assets/fonts/DMSans-Variable.woff2) format("woff2"); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(../assets/fonts/JetBrainsMono-Variable.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
:root {
  --zwart: #000000; --ink: #1A1815; --wit: #FFFFFF; --cream: #E8E3D8; --cream-licht: #EDE9E0;
  --off-white: #F5F5F5; --charcoal: #2B2926; --blauw: #AED6EA; --goud: #C09C71;
  --lijn: rgba(26, 24, 21, .24); --zacht: rgba(26, 24, 21, .78);
  --tekst: "DM Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --titel: "JetBrains Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--cream); color: var(--ink); font: 15px/1.6 var(--tekst); -webkit-text-size-adjust: 100%; }
button, input, textarea { font: inherit; color: inherit; }
input, textarea { font-size: 16px; }
h1, h2, h3 { font-family: var(--titel); font-weight: 500; color: var(--zwart); margin: 0 0 10px; line-height: 1.3; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .14em; font-weight: 500; }
p { margin: 0 0 10px; }
a { color: var(--ink); text-decoration-color: var(--goud); }
:focus-visible { outline: 3px solid var(--blauw); outline-offset: 2px; }
main:focus { outline: none; }
.skip { position: absolute; left: -999px; top: 0; background: var(--zwart); color: var(--wit); padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

.top { background: var(--cream); color: var(--zwart); display: flex; align-items: center; gap: 12px; padding: 10px 24px; min-height: 64px; flex-wrap: wrap; border-bottom: 1px solid var(--goud); position: relative; }
.merk { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0; }
.merk .teken { width: 38px; height: 38px; flex: none; object-fit: contain; }
.merk .woord { font-family: var(--titel); font-size: 13px; line-height: 1.3; text-transform: uppercase; letter-spacing: .22em; }
.merk .woord small { display: block; font-family: var(--tekst); font-size: 12px; color: var(--zacht); text-transform: none; letter-spacing: 0; }
.demo-band { font-family: var(--titel); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; border: 1px solid var(--goud); padding: 3px 9px; }
.wie { font-size: 13px; color: var(--zacht); }
.knop-licht { background: transparent; border: 1px solid var(--zwart); color: var(--zwart); padding: 8px 14px; min-height: 44px; min-width: 44px; cursor: pointer; font-family: var(--titel); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.knop-licht:hover { border-color: var(--goud); color: var(--charcoal); }

.romp { display: flex; min-height: calc(100vh - 64px); }
#nav { width: 236px; flex: none; background: var(--cream-licht); border-right: 1px solid var(--lijn); padding: 22px 12px; }
#navlist { display: flex; flex-direction: column; gap: 2px; }
.navitem { display: flex; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent; padding: 11px 12px; min-height: 44px; cursor: pointer; color: var(--ink); font-family: var(--titel); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.navitem:hover { border-left-color: var(--goud); }
.navitem.on { border-left-color: var(--zwart); background: var(--wit); color: var(--zwart); }
.view { flex: 1; min-width: 0; padding: 32px 36px 40px; max-width: 1060px; }
.gate { max-width: 640px; margin: 32px auto; padding: 0 16px; }

.card { background: var(--wit); border: 1px solid var(--lijn); padding: 22px 24px; margin-bottom: 18px; }
.card.zacht { background: var(--cream-licht); }
.intro { color: var(--zacht); max-width: 680px; }
.klein { font-size: 13px; color: var(--zacht); }
.kern { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: 14px 0 4px; clear: both; }
.kern div { border-left: 1px solid var(--goud); padding-left: 12px; }
.kern span { display: block; font-size: 13px; color: var(--zacht); }
.kern strong { font-family: var(--titel); font-weight: 500; font-size: 16px; color: var(--zwart); }
.label { display: inline-block; font-size: 12px; padding: 2px 8px; background: var(--off-white); border: 1px solid var(--lijn); color: var(--zacht); white-space: nowrap; }
.label.nieuw { background: var(--blauw); border-color: var(--blauw); color: var(--zwart); font-weight: 600; }
.label.goed { background: var(--wit); border-color: var(--zwart); color: var(--zwart); }
.label.wacht { background: var(--cream-licht); border-color: var(--goud); color: var(--ink); }
.knop { display: inline-flex; align-items: center; justify-content: center; background: var(--zwart); color: var(--wit); border: 1px solid var(--zwart); padding: 10px 18px; min-height: 44px; cursor: pointer; font-family: var(--titel); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; text-decoration: none; }
.knop:hover { background: var(--charcoal); border-color: var(--charcoal); }
.knop:disabled { background: var(--lijn); border-color: transparent; color: var(--zacht); cursor: not-allowed; }
.knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.knoppen.midden { justify-content: center; }
.seg { display: inline-flex; border: 1px solid var(--zwart); margin: 4px 0 16px; flex-wrap: wrap; }
.seg button { background: var(--wit); border: 0; border-right: 1px solid var(--zwart); padding: 9px 16px; min-height: 44px; cursor: pointer; font-family: var(--titel); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--zwart); color: var(--wit); }
.melding { background: var(--wit); border: 1px solid var(--lijn); border-left: 3px solid var(--goud); padding: 12px 16px; margin: 14px 0 0; }
.melding[hidden] { display: none; }
.uitleg-prod { font-size: 13px; color: var(--zacht); border-top: 1px solid var(--lijn); margin-top: 14px; padding-top: 12px; }
.uitleg-prod strong { color: var(--ink); }
.voet { font-size: 13px; color: var(--zacht); border-top: 1px solid var(--lijn); margin-top: 28px; padding-top: 12px; }

.logo-groot { display: block; width: 96px; margin: 4px auto 18px; }
.logo-welkom { float: right; width: 72px; margin: 0 0 10px 18px; }
.inlog { max-width: 620px; margin: 32px auto; padding: 0 16px; }
.inlog h1, .inlog .intro { text-align: center; margin-left: auto; margin-right: auto; }

.map h2 .nr { color: var(--zacht); }
.doc { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--wit); border: 1px solid var(--lijn); padding: 12px 14px; margin-bottom: 8px; min-height: 56px; color: inherit; text-decoration: none; }
a.doc { cursor: pointer; }
a.doc:hover { border-color: var(--goud); }
.doc.uit { background: var(--off-white); }
.doc .nr { font-family: var(--titel); font-size: 12px; color: var(--zacht); width: 44px; flex: none; }
.doc .t { flex: 1; min-width: 0; }
.doc .t strong { display: block; color: var(--zwart); font-weight: 600; overflow-wrap: anywhere; }
.doc .t small { color: var(--zacht); font-size: 13px; }
.doc .rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.nieuwlijst { margin: 0 0 4px; padding-left: 18px; }

.vraag { border-top: 1px solid var(--lijn); padding: 12px 0; }
.vraag:first-of-type { border-top: 0; }
.vraag .v { font-weight: 600; color: var(--zwart); }
.vraag .a { margin-top: 6px; padding-left: 12px; border-left: 1px solid var(--goud); }
.vraag .meta { font-size: 13px; color: var(--zacht); }
.veld { display: block; font-family: var(--titel); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin: 12px 0 6px; }
textarea, input[type=text] { width: 100%; border: 1px solid var(--lijn); padding: 10px 12px; background: var(--wit); }
textarea:focus, input[type=text]:focus { border-color: var(--zwart); outline: 3px solid var(--blauw); outline-offset: 0; }
textarea { min-height: 110px; resize: vertical; }
label.vink { display: flex; gap: 10px; align-items: center; margin-top: 12px; cursor: pointer; min-height: 44px; }
label.vink input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--zwart); }
.nda-tekst { max-height: 320px; overflow-y: auto; border: 1px solid var(--lijn); background: var(--cream-licht); padding: 14px 18px; font-size: 14px; }
.nda-tekst ol { padding-left: 20px; margin: 0; }
.nda-tekst li { margin-bottom: 8px; }

.toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--zwart); color: var(--wit); padding: 12px 18px; max-width: min(560px, calc(100vw - 24px)); border-top: 2px solid var(--goud); z-index: 50; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .top { padding: 10px 16px; }
  .wie { display: none; }
  .romp { display: block; }
  #nav { width: auto; border-right: 0; border-bottom: 1px solid var(--lijn); padding: 8px 12px; }
  #navlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
  .navitem { border-left: 0; border-bottom: 2px solid transparent; padding: 10px; }
  .navitem.on { border-bottom-color: var(--zwart); }
  .view { padding: 20px 16px 32px; }
  h1 { font-size: 23px; }
  h2 { font-size: 14px; }
  .intro, .doc .t small, .vraag .meta, .klein, .uitleg-prod, .voet { font-size: 15px; }
  .doc { flex-wrap: wrap; }
  .doc .nr { display: none; }
  .doc .t { flex: 1 1 200px; }
  .doc .rechts { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .logo-welkom { width: 56px; }
  .card { padding: 18px 16px; }
}
@media (max-width: 380px) {
  .merk .woord small { display: none; }
  .merk .woord { letter-spacing: .14em; }
  .knop-licht { padding: 8px 10px; }
}
.nieuwlijst .klein { display: block; }