:root {
  --grond: #0d1016; --vlak: #131822; --vlak2: #1a202b; --lijn: #232a36; --lijn2: #3a4352;
  --tekst: #e8eaee; --zacht: #aab2c0; --oranje: #ffa630; --neon-oranje: #ff9500; --neon-rood: #ff2a4a;
  --neon-cyaan: #00e5ff; --cyaan: #3ddcff; --groen: #9ff0c0; --rood: #ff9aa8;
  --kop: 'Bungee Inline', Impact, sans-serif; --mono: 'IBM Plex Mono', monospace; --label: 'Share Tech Mono', monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--grond); color: var(--tekst); font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.45; }
a { color: var(--oranje); } a:hover { color: #ffc35c; }
:focus-visible { outline: 2px solid var(--cyaan); outline-offset: 2px; }
h1, h2 { margin: 0; font-family: var(--kop); font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; }
h1 { font-size: 26px; color: var(--oranje); text-shadow: 0 0 10px rgba(255,166,48,.35); }
h2 { font-size: 18px; color: var(--cyaan); }

@keyframes neon-flikker { 0%,100%{opacity:1} 41%{opacity:1} 42%{opacity:.55} 43%{opacity:1} 47%{opacity:.7} 48%{opacity:1} }
.logo { font-family: var(--kop); font-size: 32px; letter-spacing: 2px; line-height: 1; white-space: nowrap; }
.logo .fl { color: var(--neon-oranje); text-shadow: 0 0 8px var(--neon-oranje), 0 0 24px rgba(255,149,0,.5); animation: neon-flikker 8s ease-in-out infinite; }
.logo .p { color: var(--neon-rood); text-shadow: 0 0 8px var(--neon-rood), 0 0 24px rgba(255,42,74,.5); }
.logo .r { color: var(--neon-cyaan); text-shadow: 0 0 8px var(--neon-cyaan), 0 0 24px rgba(0,229,255,.5); }
@media (prefers-reduced-motion: reduce) { .logo .fl { animation: none; } }

.kop { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 14px 32px; border-bottom: 1px solid var(--lijn); }
.menu { display: flex; flex-wrap: wrap; gap: 4px; flex-grow: 1; }
.menu a { padding: 12px 14px; border-radius: 6px; color: var(--zacht); text-decoration: none; }
.menu a.actief { background: var(--vlak2); color: var(--tekst); font-weight: 500; }
.kop-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
/* Organisatiekeuze in de kop: de naam als menu-achtig element; met pijltje en keuzelijst als je bij meer organisaties hoort. */
.orgkeuze { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 6px; color: var(--tekst); font-weight: 500; background: var(--vlak2); }
.orgkeuze select { min-height: 44px; margin: 0 -14px; padding: 0 34px 0 14px; border: 0; border-radius: 6px; background: transparent; color: var(--tekst); font: inherit; font-weight: 500; cursor: pointer; appearance: none; -webkit-appearance: none; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%238a93a3' stroke-width='1.8'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.orgkeuze select:hover { background-color: var(--lijn); }
.orgkeuze select:focus-visible { box-shadow: 0 0 0 2px var(--cyaan); }
.orgkeuze select option { background: var(--vlak); color: var(--tekst); font-weight: 400; }
.inhoud { max-width: 1360px; margin: 0 auto; padding: 24px 32px 48px; display: flex; flex-direction: column; gap: 24px; }
@media (max-width: 600px) { .kop { padding: 12px 16px; gap: 12px; } .inhoud { padding: 20px 16px 40px; } }

.knop { min-height: 44px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--lijn2); background: transparent; color: var(--tekst); font: inherit; cursor: pointer; }
.knop:hover { border-color: var(--zacht); }
.knop.hoofd { border: 0; background: var(--oranje); color: #17120a; font-weight: 600; }
.knop.hoofd:hover { background: #ffb95a; }
.berekening { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 6px 28px; border-left: 2px solid var(--cyaan); margin-left: 6px; }
.berekening .veld input { width: 100%; } tr.onderrij td { border-top: 0; padding-top: 0; }
.berekening .knop.mono { min-height: 34px; padding: 0 10px; }
dl.uitgangen { margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
dl.uitgangen > div { display: flex; gap: 10px; } dl.uitgangen dt { flex: 0 0 76px; color: var(--zacht); } dl.uitgangen dd { margin: 0; }
.knop.gevaar { border-color: var(--rood); color: var(--rood); }
.knop.gevaar:hover { background: rgba(255,154,168,.08); border-color: var(--rood); }
.knop.stil { border-color: transparent; color: var(--zacht); }
.knop:disabled { opacity: .5; cursor: not-allowed; }
.veld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--zacht); }
.veld input, .veld select { min-height: 44px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--lijn2); background: var(--grond); color: var(--tekst); font: inherit; }
.kaart { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); }
.label { font-family: var(--label); letter-spacing: 2px; text-transform: uppercase; color: var(--cyaan); font-size: 13px; }
.zacht { color: var(--zacht); } .klein { font-size: 13px; }
.melding { padding: 12px 14px; border-radius: 6px; border: 1px solid #7a2e33; background: #2a1719; color: #ffd9db; }

.inlog { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.inlog form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 10px; border: 1px solid var(--lijn2); background: var(--vlak); }
/* Gloed = "hier is nu iets voor jou": hooguit één gloeiend blok per scherm. Oranje = actie/let op, rood = probleem, cyaan = hulp of voorstel. */
.gloed, .inlog form { box-shadow: 0 0 40px var(--gloed-kleur, rgba(255,166,48,.14)); }
.gloed.cyaan { --gloed-kleur: rgba(0,229,255,.14); }
.gloed.rood { --gloed-kleur: rgba(255,42,74,.18); }
.knop.hoofd.gloed { box-shadow: 0 0 18px rgba(255,166,48,.45); }
@keyframes gloed-puls { 0%, 100% { box-shadow: 0 0 12px rgba(0,229,255,.25); } 50% { box-shadow: 0 0 22px rgba(0,229,255,.6); } }
.vraagbaak-knop.bezig { animation: gloed-puls 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .vraagbaak-knop.bezig { animation: none; } }
.proef { padding: 6px 12px; border-radius: 4px; border: 1px solid #7a2e33; color: var(--rood); font-size: 13px; }

.blok { display: flex; flex-direction: column; gap: 12px; }
.rij { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--lijn); }
.tabs button { min-height: 44px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--zacht); font: inherit; cursor: pointer; }
.tabs button.actief { border-bottom-color: var(--oranje); color: var(--tekst); font-weight: 500; }
.tabelvak { overflow-x: auto; border: 1px solid var(--lijn); border-radius: 8px; background: var(--vlak); }
table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; }
th { padding: 12px 18px; font-weight: 500; font-size: 13px; color: var(--zacht); }
td { padding: 14px 18px; border-top: 1px solid var(--lijn); }
.mono { font-family: var(--mono); font-size: 13px; } .bron { color: #8fe6ff; }
.chip { padding: 4px 10px; border-radius: 4px; background: #1c2330; color: #c5ccd8; font-size: 14px; }
.stip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; }
.alarm { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 8px; background: #2a1719; border: 1px solid #7a2e33; color: #e3c4c6; }
.alarm strong { color: var(--tekst); font-weight: 600; } .alarm a { padding: 12px 14px; color: #ffb0b0; font-weight: 500; }

/* Token-velden: bewust geen wachtwoordveld, anders vult de browser het inlogwachtwoord in. */
.geheim { -webkit-text-security: disc; font-family: var(--mono); }

.tweekolom { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.stappen { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; }
.stappen button { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; min-height: 44px; padding: 12px 14px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--tekst); font: inherit; cursor: pointer; }
.stappen button.actief { background: var(--vlak2); border-color: var(--oranje); box-shadow: 0 0 14px rgba(255,166,48,.18); }
.stappen .nr { font-family: var(--label); font-size: 15px; color: var(--cyaan); }
.doel { color: #ffc57a; }
/* Lange doelveldnamen (vrije velden: KnS09.U…, 41 tekens) breken af, zodat de koppelingstabel in het scherm past. */
td .mono.doel { word-break: break-all; }
table.koppeling td:first-child { max-width: 260px; }
table.koppeling td select, table.koppeling td input { min-width: 150px; }
.formule { margin: 0; padding: 12px; border-radius: 6px; background: var(--grond); color: #8fe6ff; font-family: var(--mono); font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.knop.cyaan { border-color: var(--cyaan); color: var(--cyaan); font-weight: 600; }
.tellers { flex-direction: row; flex-wrap: wrap; gap: 24px; }
.getal { font-family: var(--label); font-size: 22px; color: var(--cyaan); }
caption { padding: 12px 18px; text-align: left; color: var(--zacht); font-size: 13px; }
.veld textarea { padding: 12px; border-radius: 6px; border: 1px solid var(--lijn2); background: var(--grond); color: #8fe6ff; font-size: 14px; resize: vertical; }
td a { color: var(--tekst); }

.waarschuwing { padding: 12px 14px; border-radius: 6px; border: 1px solid #8a6a1f; background: #241c0c; color: #ffdfa3; }
.goed { padding: 12px 14px; border-radius: 6px; border: 1px solid #1f4a35; background: #10201a; color: var(--groen); }
.verborgen { position: absolute; left: -9999px; }
td input, td select { min-height: 44px; width: 100%; padding: 0 10px; border-radius: 6px; border: 1px solid var(--lijn2); background: var(--grond); color: var(--tekst); font: inherit; }
td input[type=checkbox] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 12px 0 0 14px; accent-color: var(--cyaan); }
td input.mono, .veld input.mono { font-family: var(--mono); font-size: 14px; } td input.bron, .veld input.bron { color: #8fe6ff; }
fieldset.kaart { margin: 0; }
.knop.mono { min-height: 44px; font-family: var(--mono); font-size: 13px; }

/* Een uitgeschakelde hoofdknop is grijs, zodat hij niet op een actieve oranje knop lijkt. */
.knop.hoofd:disabled, .knop.hoofd:disabled:hover { background: #2c3442; color: #aab2c0; opacity: 1; }

.knop.gekozen { border-color: var(--cyaan); color: var(--cyaan); background: var(--vlak2); }
.kruis { min-width: 28px; min-height: 28px; margin-left: 4px; border: 0; background: transparent; color: var(--zacht); font: inherit; cursor: pointer; }
.veld input[type=time] { color-scheme: dark; }
/* Eigen keuzelijst bij een tekstveld (Keuze.jsx) en keuzelijsten in het donker */
select { color-scheme: dark; }
input.keuze { background-image: linear-gradient(45deg, transparent 50%, var(--zacht) 50%), linear-gradient(135deg, var(--zacht) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px !important; }
.keuzelijst { z-index: 50; margin: 0; padding: 4px; list-style: none; overflow-y: auto; border: 1px solid var(--lijn2); border-radius: 8px; background: var(--vlak2); box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.keuzelijst li { padding: 10px 12px; border-radius: 5px; cursor: pointer; font-size: 14px; color: var(--tekst); }
.keuzelijst li .mono { font-family: var(--mono); }
.keuzelijst li.actief { background: #243044; }
.keuzelijst li.gekozen .mono { color: var(--cyaan); }
td select.mono, .veld select.mono { font-family: var(--mono); font-size: 14px; } td select.bron { color: #8fe6ff; }
td select { min-width: 150px; } td select.bron, td input.bron { min-width: 210px; }
html { color-scheme: dark; }

/* Vraagbaak: knop rechtsonder, paneel erboven */
.vraagbaak-knop { position: fixed; right: 20px; bottom: 20px; z-index: 30; background: var(--vlak); border-color: var(--cyaan); color: var(--cyaan); box-shadow: 0 0 12px rgba(0,229,255,.25); }
.vraagbaak { position: fixed; right: 20px; bottom: 76px; z-index: 30; width: min(440px, calc(100vw - 40px)); max-height: min(70vh, 640px); display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--cyaan); border-radius: 8px; background: var(--vlak); box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 40px rgba(0,229,255,.14); }
.vraagbaak-gesprek { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 120px; }
.vb-vraag { align-self: flex-end; max-width: 90%; padding: 8px 12px; border-radius: 8px 8px 2px 8px; background: #1c2330; white-space: pre-wrap; }
.vb-antwoord { align-self: flex-start; max-width: 95%; padding: 8px 12px; border-radius: 8px 8px 8px 2px; border: 1px solid var(--lijn); white-space: pre-wrap; }
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.puls { animation: puls 1.4s infinite; }

/* Openbare infopagina (#/info) */
.info-logo { text-decoration: none; }
.info-knop { display: inline-flex; align-items: center; text-decoration: none; }
.knop.info-knop:not(.hoofd) { color: var(--tekst); }
.info-inhoud { max-width: 1180px; gap: 56px; }
.info-held { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: center; padding-top: 20px; }
.info-held-tekst { display: flex; flex-direction: column; gap: 18px; }
.info-held h1 { font-size: 34px; line-height: 1.2; }
.info-groot { margin: 0; font-size: 18px; max-width: 34em; color: var(--tekst); }
.info-stroom { width: 100%; height: auto; }
.info-stroom .vak { fill: var(--vlak); stroke-width: 1.5; }
.info-stroom .vak.kern { stroke: var(--lijn2); fill: var(--vlak2); }
.info-stroom .lijn { stroke: var(--lijn2); stroke-width: 2; fill: none; }
.info-stroom .puls { stroke: var(--neon-cyaan); stroke-width: 3; fill: none; stroke-linecap: round; stroke-dasharray: 8 92; filter: drop-shadow(0 0 4px var(--neon-cyaan)); animation: info-puls 3.2s linear infinite; }
@keyframes info-puls { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.info-stroom text { text-anchor: middle; font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.info-stroom .naam { fill: var(--tekst); font-size: 19px; font-weight: 600; }
.info-stroom .sub { fill: var(--zacht); font-size: 12.5px; }
.info-stroom .logo-tekst { font-family: var(--kop); font-size: 34px; letter-spacing: 2px; }
@media (prefers-reduced-motion: reduce) { .info-stroom .puls { animation: none; stroke-dasharray: none; opacity: .5; } }
.info-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px 32px; }
.info-raster.drie { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.info-punt { display: flex; gap: 16px; align-items: flex-start; }
.info-punt p { margin: 4px 0 0; color: var(--zacht); }
.info-punt-kop { font-weight: 600; font-size: 16px; }
.info-icoon { flex: 0 0 34px; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px currentColor); }
.info-plannen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.info-plan { gap: 12px; padding: 20px 22px; }
.info-plan-naam { font-weight: 600; font-size: 22px; }
.info-plan-prijs { font-size: 28px; font-weight: 600; margin-top: 2px; white-space: nowrap; }
.info-plan-prijs span { font-size: 14px; font-weight: 400; color: var(--zacht); }
.info-plan ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.info-plan li span { margin-right: 8px; }
.info-contact { gap: 8px; }
@media (max-width: 860px) { .info-held { grid-template-columns: 1fr; } .info-held h1 { font-size: 27px; } .info-inhoud { gap: 44px; } }

/* Registreren (2.1.0): breder formulier, velden naast elkaar; op een telefoon één kolom. */
.inlog form.reg { max-width: 760px; gap: 16px; }
.reg .veld input { min-width: 0; width: 100%; }
.reg-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.reg-kvk { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px 16px; align-items: end; }
.reg-adres { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 12px 16px; }
@media (max-width: 640px) {
  .reg-2, .reg-kvk { grid-template-columns: 1fr; }
  .reg-adres { grid-template-columns: 1fr 1fr 1fr; }
  .reg-adres > :nth-child(1), .reg-adres > :nth-child(4) { grid-column: span 2; }
}

/* Vloeiend van vorm veranderen (2.1.0): het formulier groeit mee in breedte (stap 1 → 2) en wat na Ophalen
   verschijnt klapt open in plaats van te verspringen. Zonder beweging als de gebruiker dat zo heeft ingesteld. */
.inlog form { transition: max-width .35s ease; }
.reg-uitklap { display: grid; grid-template-rows: 1fr; animation: reg-uitklap .35s ease both; }
.reg-binnen { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 16px; }
@keyframes reg-uitklap { from { grid-template-rows: 0fr; opacity: 0; } to { grid-template-rows: 1fr; opacity: 1; } }
.reg-in { animation: reg-in .25s ease both; }
@keyframes reg-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .inlog form { transition: none; } .reg-uitklap, .reg-in { animation: none; } }

/* Abonnement kiezen bij registreren (2.2.0): vijf kaartjes naast elkaar; op een telefoon twee per rij. */
.reg-plannen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.reg-plan { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 12px 12px 12px 14px; border: 1px solid var(--lijn2); border-top: 3px solid var(--plan); border-radius: 8px; background: var(--grond); cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.reg-plan input { position: absolute; opacity: 0; pointer-events: none; }
.reg-plan:hover { border-color: var(--plan); }
.reg-plan.gekozen { border-color: var(--plan); background: color-mix(in srgb, var(--plan) 12%, var(--grond)); }
.reg-plan:has(input:focus-visible) { outline: 2px solid var(--plan); outline-offset: 2px; }
.reg-plan-naam { font-weight: 600; color: var(--plan); }
.reg-plan-prijs { font-size: 19px; font-weight: 600; color: var(--tekst); white-space: nowrap; }
.reg-plan-prijs small { font-size: 12px; font-weight: 400; color: var(--zacht); }
.reg-plan-regel { font-size: 12.5px; color: var(--zacht); line-height: 1.3; }
@media (max-width: 640px) { .reg-plannen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .reg-plan { transition: none; } }

/* Help mij kiezen (2.2.0): vragen met knoppen, advies verandert direct mee. */
.hulp { padding: 20px 22px; }
.hulp-vragen { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px 22px; }
.hulp-vraag { display: flex; flex-direction: column; gap: 8px; }
.hulp-vraagtekst { font-size: 14px; color: var(--tekst); }
.hulp-opties { display: flex; flex-wrap: wrap; gap: 6px; }
.hulp-optie { min-height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--lijn2); background: transparent; color: var(--zacht); font: inherit; font-size: 13.5px; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.hulp-optie:hover { border-color: var(--cyaan); color: var(--tekst); }
.hulp-optie[aria-pressed="true"] { border-color: var(--cyaan); color: var(--tekst); background: rgba(61,220,255,.12); }
.hulp-advies { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 8px; border: 1px solid var(--lijn2); background: var(--grond); }
@media (prefers-reduced-motion: reduce) { .hulp-optie { transition: none; } }
a.knop { text-decoration: none; }

/* Voorwaarden en privacyverklaring (2.4.0): openbaar, leesbaar en af te drukken */
.betaalregel { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--rand, #2a3140); border-left: 3px solid var(--oranje); background: rgba(255, 166, 48, 0.06); line-height: 1.5; }
.vink { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; cursor: pointer; }
.vink input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--cyaan); }
.akkoord { max-width: 760px; }
.akkoord-docs { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.akkoord-form { display: flex; flex-direction: column; gap: 14px; }
.doc-pagina { max-width: 860px; margin: 0 auto; padding: 24px 32px 64px; }
.doc-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.doc-knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.doc-knoppen .knop { display: inline-flex; align-items: center; text-decoration: none; }
.doc { line-height: 1.6; color: var(--tekst); }
.doc h1 { font-size: 26px; margin: 0 0 4px; }
.doc h2 { font-size: 19px; margin: 32px 0 8px; color: var(--cyaan); }
.doc h3 { font-size: 16px; margin: 22px 0 6px; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 22px; }
.doc li { margin-bottom: 4px; }
.doc-onder, .doc-versie { color: var(--zacht); }
.doc-versie { margin-bottom: 20px !important; }
.doc-tabel { overflow-x: auto; margin: 6px 0 14px; }
.doc table { border-collapse: collapse; width: 100%; font-size: 14px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border: 1px solid var(--lijn); }
.doc th { background: var(--vlak); }
.doc-voet { margin-top: 32px !important; color: var(--zacht); }
@media (max-width: 600px) { .doc-pagina { padding: 16px 16px 48px; } }
@media print {
  .geen-print { display: none !important; }
  body { background: #fff !important; }
  .doc-pagina { max-width: none; padding: 0; }
  .doc, .doc h1, .doc h2, .doc h3, .doc-onder, .doc-versie { color: #000 !important; text-shadow: none !important; }
  .doc a { color: #000; }
  .doc th { background: #eee; }
  .doc th, .doc td { border-color: #999; }
  .doc h2, .doc h3 { break-after: avoid; }
  .doc tr { break-inside: avoid; }
}