/* Algodyn — algodyn.app, versie 4.
   Eén stylesheet voor alle pagina's. Black tie met messing, zoals besloten op
   15 september 2026 en vastgelegd in STRATEGIE-v3 §5.

   Twee stemmen in de opmaak:
     .vraag     — de vraag van de CFO aan zichzelf, serif cursief
     .antwoord  — zijn antwoord, serif rechtop
     .neutraal  — feiten, bijschriften, voet; daar spreekt niemand

   Geen inline style-attributen: de CSP van deze site staat ze niet toe.
   Alles hieronder is een klasse. */

:root {
  --nacht: #10151D;
  --nacht-2: #171E29;
  --grafiet: #2A2F37;
  --zacht: #5B6270;
  --papier: #F4F2ED;
  --papier-2: #EAE6DD;
  --lijn: #D6D1C6;
  --lijn-n: rgba(157, 180, 207, 0.18);
  --messing: #C9A45C;
  --messing-licht: #D8B874;
  --messing-inkt: #7A5E22;
  --staal: #9DB4CF;
  --rood: #C0442F;
  --rood-n: #E58A77;
  --groen-inkt: #2F6B4F;
  --op-n: #E7E4DD;
  --op-n-z: #A3ABB8;
  --wit: #F7F4EE;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}

/* ---------- grondslag ---------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--grafiet);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 14px; }
a { color: inherit; text-decoration-color: var(--messing); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--messing); outline-offset: 3px;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 20px; } body { font-size: 16px; } }

.band { padding: 112px 0; }
.band.p2 { background: var(--papier-2); }
.band.nacht, .nacht { background: var(--nacht); color: var(--op-n); }
@media (max-width: 720px) { .band { padding: 72px 0; } }

.col { max-width: 62ch; }
.num, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.geen-lijn { border-top: 0; }

/* ---------- de twee stemmen ---------- */

.vraag {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(21px, 2.2vw, 28px); line-height: 1.25;
  color: var(--messing-inkt); margin: 0 0 14px; max-width: 46ch; text-wrap: balance;
}
.nacht .vraag { color: var(--messing); }

.antwoord {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px); line-height: 1.03;
  color: var(--nacht); margin: 0 0 22px; max-width: 26ch; text-wrap: balance;
}
.nacht .antwoord { color: var(--wit); }
.antwoord.m { font-size: clamp(30px, 3.6vw, 46px); max-width: 36ch; }
.antwoord.s { font-size: clamp(23px, 2.4vw, 30px); line-height: 1.2; max-width: 46ch; }
.antwoord.mod { font-size: clamp(25px, 2.8vw, 34px); max-width: 36ch; }
.slotzin { margin-top: 36px; }

.neutraal { font-family: var(--sans); font-size: 15px; color: var(--zacht); max-width: 78ch; }
.nacht .neutraal { color: var(--op-n-z); }

.label {
  display: block; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--messing-inkt); margin: 0 0 20px;
}
.nacht .label { color: var(--staal); }

.subkop {
  font-family: var(--serif); font-weight: 400; font-size: 28px;
  color: var(--nacht); margin: 48px 0 0; line-height: 1.1;
}
.nacht .subkop { color: var(--wit); }

/* ---------- kop en voet ---------- */

.site-kop { background: var(--nacht); color: var(--op-n); border-bottom: 1px solid var(--lijn-n); }
.site-kop .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.woordmerk { text-decoration: none; color: var(--wit); font-family: var(--serif); font-size: 28px; line-height: 1; }
.woordmerk small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; color: var(--staal); margin-top: 6px; }
.site-nav { display: flex; align-items: center; gap: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.site-nav a { text-decoration: none; color: var(--op-n-z); padding: 6px 0; border-bottom: 1px solid transparent; }
.site-nav a:hover { color: var(--wit); border-bottom-color: var(--messing); }
.site-nav a[aria-current] { color: var(--wit); border-bottom-color: var(--messing); }
.site-nav a.btn { border-bottom: 0; color: var(--nacht); }
/* de twee knoppen rechtsboven: bellen is de daad, inloggen is voor wie al klant is */
.nav-acties { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.site-nav .nav-acties a.btn.ghost { color: var(--wit); border-color: rgba(231, 228, 221, 0.35); background: transparent; }
.site-nav .nav-acties a.btn.ghost:hover { border-color: var(--wit); background: transparent; }
@media (max-width: 960px) {
  .site-kop .wrap { flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
  .site-nav { gap: 12px 16px; flex-wrap: wrap; font-size: 11px; letter-spacing: 0.1em; }
  .nav-acties { margin-left: 0; }
}
/* op een telefoon is bellen de daad; inloggen staat dan in de voet */
@media (max-width: 620px) {
  .site-nav .nav-acties a[data-inloggen] { display: none; }
  .site-nav { gap: 10px 14px; }
  .woordmerk small { letter-spacing: 0.18em; }
}

.site-voet { background: var(--nacht); color: var(--op-n-z); border-top: 1px solid var(--lijn-n); padding: 56px 0 64px; font-size: 14px; }
.site-voet .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
@media (max-width: 860px) { .site-voet .wrap { grid-template-columns: 1fr; } }
.site-voet .definitie { font-family: var(--serif); font-size: 22px; color: var(--op-n); margin: 18px 0 8px; }
.site-voet .fijn { margin: 0; }
/* De wettelijke identiteit: klein, maar op elke pagina en zonder JavaScript. */
.colofon { margin: 14px 0 0; font-size: 12.5px; color: var(--op-n-z); max-width: 68ch; line-height: 1.6; }
.bellen-voet { color: var(--messing); text-decoration: none; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; }
.bellen-voet:hover { text-decoration: underline; }
.site-voet nav { display: flex; gap: 20px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.site-voet nav a { text-decoration: none; color: var(--op-n); }
.site-voet nav a:hover { color: var(--messing); }

/* ---------- knopvlakken ---------- */

.acties { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 28px 0 14px; }
.btn {
  display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px;
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  text-decoration: none; cursor: pointer; border: 1px solid var(--messing);
  background: var(--messing); color: var(--nacht); border-radius: 0;
}
.btn:hover { background: var(--messing-licht); border-color: var(--messing-licht); }
.btn.klein { min-height: 38px; padding: 0 16px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--nacht); border-color: var(--zacht); }
.btn.ghost:hover { background: transparent; border-color: var(--nacht); }
.nacht .btn.ghost, .instrument-kader .btn.ghost, .own .btn.ghost { color: var(--wit); border-color: rgba(231, 228, 221, 0.35); }
.nacht .btn.ghost:hover, .instrument-kader .btn.ghost:hover, .own .btn.ghost:hover { border-color: var(--wit); }

/* ---------- hero ---------- */

.hero { padding: 88px 0 104px; }
@media (max-width: 720px) { .hero { padding: 56px 0 64px; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero .onder { font-size: 18px; color: var(--op-n); max-width: 52ch; }

/* ---------- productschermen ---------- */

.scherm { margin: 0; }
.scherm.tweede { margin-top: 28px; }
.venster { background: #fff; border: 1px solid var(--lijn); box-shadow: 0 40px 80px -44px rgba(16, 21, 29, 0.35); }
.nacht .venster { background: #0C1118; border-color: #2A3342; box-shadow: 0 50px 100px -50px rgba(0, 0, 0, 0.8); }
.venster img { display: block; width: 100%; height: auto; }
.scherm figcaption { font-size: 13px; color: var(--zacht); margin-top: 12px; }
.nacht .scherm figcaption { color: var(--op-n-z); }

/* ---------- iedereen aan tafel ---------- */

.tafel { overflow-x: auto; margin-top: 44px; }
.tafel table { border-collapse: collapse; width: 100%; min-width: 760px; }
.tafel th, .tafel td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--lijn); }
.tafel thead th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zacht); font-weight: 500; border-bottom: 2px solid var(--nacht); }
.tafel td.wie { font-family: var(--serif); font-size: 26px; color: var(--nacht); width: 22%; }
.tafel td.hun { font-family: var(--serif); font-style: italic; font-size: 21px; color: var(--messing-inkt); width: 30%; }
.tafel td.laat { font-size: 16px; }

/* ---------- daarom: drie modules ---------- */

.doen { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; align-items: center; padding: 64px 0; border-top: 1px solid var(--lijn); }
.doen:first-of-type { border-top: 2px solid var(--nacht); }
.doen.om > :first-child { order: 2; }
@media (max-width: 980px) { .doen { grid-template-columns: 1fr; gap: 32px; padding: 44px 0; } .doen.om > :first-child { order: 0; } }
.module { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--zacht); margin-bottom: 14px; line-height: 1.7; }
.module b { color: var(--nacht); font-weight: 500; }
.doen .zin { font-family: var(--serif); font-size: clamp(30px, 4.2vw, 56px); line-height: 1.06; color: var(--nacht); margin: 0 0 18px; max-width: 24ch; text-wrap: balance; }
.link { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--messing-inkt); text-decoration: none; border-bottom: 1px solid var(--messing); padding-bottom: 2px; }

/* ---------- scenario's ---------- */

.scen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
@media (max-width: 980px) { .scen { grid-template-columns: 1fr; gap: 36px; } }
.scen .a { font-family: var(--serif); font-size: 24px; line-height: 1.3; color: var(--nacht); margin: 0 0 16px; }
.nacht .scen .a { color: var(--wit); }
.feitenlijst { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--lijn); }
.feitenlijst li { padding: 14px 0; border-bottom: 1px solid var(--lijn); color: var(--grafiet); font-size: 16px; }
.nacht .feitenlijst { border-top-color: var(--lijn-n); }
.nacht .feitenlijst li { border-bottom-color: var(--lijn-n); color: var(--op-n); }

/* ---------- rekenkunde: willen, moeten, kunnen ---------- */

.dialoog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--lijn-n); }
.dialoog > div { padding: 28px 28px 8px 0; }
.dialoog > div + div { padding-left: 28px; border-left: 1px solid var(--lijn-n); }
.dialoog .woord { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--staal); margin-bottom: 16px; }
.dialoog .vraag { font-size: 24px; max-width: none; }
.dialoog p.a { font-family: var(--serif); font-size: 24px; line-height: 1.24; color: var(--nacht); }
.nacht .dialoog p.a { color: var(--wit); }
@media (max-width: 900px) { .dialoog { grid-template-columns: 1fr; } .dialoog > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--lijn-n); } }
.manifest { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--staal); margin-top: 40px; }

/* ---------- constraints ---------- */

.gesprek { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 72px; align-items: start; }
@media (max-width: 980px) { .gesprek { grid-template-columns: 1fr; gap: 44px; } }
.beurt { padding: 22px 0; border-top: 1px solid var(--lijn-n); }
.beurt:first-child { border-top: 0; padding-top: 0; }
.beurt p.a { font-family: var(--serif); font-size: 23px; line-height: 1.26; color: var(--nacht); margin: 0; }
.nacht .beurt p.a { color: var(--wit); }

/* ---------- het instrument ---------- */

.instrument-kader { background: var(--nacht); color: var(--op-n); padding: 32px; margin-top: 44px; }
@media (max-width: 720px) { .instrument-kader { padding: 24px 20px; } }
.instrument-kop { margin-bottom: 24px; }
.instrument-kop h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); color: var(--wit); margin: 0 0 8px; line-height: 1.1; }
.instrument-kop p { margin: 0; max-width: 62ch; color: var(--op-n-z); font-size: 15px; }
.instrument { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 960px) { .instrument { grid-template-columns: 1fr; gap: 36px; } }
.motor-status { font-family: var(--mono); font-size: 12px; color: var(--op-n-z); min-height: 1em; margin: 0 0 8px; }
.chart-title { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--staal); margin: 0 0 10px; }
.chart { width: 100%; height: auto; display: block; background: var(--nacht-2); border: 1px solid var(--lijn-n); }
.chart text { font-family: var(--mono); font-size: 11px; fill: var(--op-n-z); }
.chart .lbl-target { fill: var(--messing); font-size: 12.5px; }
.chart .lbl-now { fill: var(--staal); }
.chart .handle { cursor: grab; }
.slider-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 16px; font-family: var(--mono); font-size: 12px; color: var(--op-n-z); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--messing); }
.binds { font-size: 15px; color: var(--op-n); margin: 18px 0 8px; min-height: 1.5em; }
.caption { font-family: var(--mono); font-size: 11.5px; color: var(--op-n-z); margin: 10px 0 0; }

.wmk { border-top: 1px solid var(--lijn-n); }
.wmk-blok { padding: 18px 0 16px; border-bottom: 1px solid var(--lijn-n); }
.wmk-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.wmk-kop b { font-family: var(--serif); font-weight: 400; font-size: 28px; color: var(--wit); line-height: 1; }
.wmk-kop span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--op-n-z); }
.wmk-blok.grenzen .wmk-kop { margin-bottom: 4px; }
.verdict { font-family: var(--serif); font-size: 26px; line-height: 1.2; color: var(--wit); }
.verdict .num { color: var(--messing); }
.verdict.no .num { color: var(--rood-n); }
.kv { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 16px; align-items: baseline; font-size: 15.5px; }
.kv .k { color: var(--op-n); }
.kv .v { font-family: var(--mono); font-size: 15px; color: var(--wit); text-align: right; font-variant-numeric: tabular-nums; }
.kv .o { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-n-z); min-width: 9ch; }
.kv .v.hit { text-decoration: underline; text-decoration-color: var(--rood-n); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.kv .o.hit { color: var(--rood-n); }
.kv .note { grid-column: 1 / -1; font-size: 13px; color: var(--op-n-z); margin-top: 4px; }
.constraint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 15px; margin: 6px 0; color: var(--op-n); }
.constraint input[type="number"] { width: 72px; min-height: 38px; padding: 0 8px; background: var(--nacht-2); color: var(--wit); border: 1px solid rgba(231, 228, 221, 0.3); font-family: var(--mono); font-size: 15px; }
.constraint input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--messing); }
.instrument .acties { margin-top: 22px; }

/* eigen cijfers */
.eigen { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; margin-top: 56px; }
@media (max-width: 960px) { .eigen { grid-template-columns: 1fr; gap: 36px; } }
.own { background: var(--nacht); color: var(--op-n); padding: 32px; }
.own h3 { font-family: var(--serif); font-weight: 400; color: var(--wit); font-size: 30px; margin: 0 0 18px; }
.own-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
@media (max-width: 560px) { .own-grid { grid-template-columns: 1fr; } .own { padding: 24px 20px; } }
.own label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--op-n-z); margin-bottom: 6px; }
.own input { width: 100%; min-height: 46px; padding: 0 12px; background: var(--nacht-2); color: var(--wit); border: 1px solid rgba(231, 228, 221, 0.28); font-family: var(--mono); font-size: 16px; }
.own .stand { font-size: 14px; color: var(--op-n-z); margin: 18px 0 0; }
.own .stand b { color: var(--wit); font-weight: 500; }

/* ---------- kan ik hierop bouwen ---------- */

.vertrouwen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 2px solid var(--nacht); }
.vertrouwen > div { padding: 24px 22px 8px 0; }
.vertrouwen > div + div { padding-left: 22px; border-left: 1px solid var(--lijn); }
.vertrouwen b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--nacht); margin-bottom: 8px; line-height: 1.12; }
.vertrouwen p { font-size: 15.5px; }
@media (max-width: 980px) { .vertrouwen { grid-template-columns: 1fr 1fr; } .vertrouwen > div:nth-child(3) { border-left: 0; padding-left: 0; } .vertrouwen > div { border-bottom: 1px solid var(--lijn); } }
@media (max-width: 560px) { .vertrouwen { grid-template-columns: 1fr; } .vertrouwen > div + div { border-left: 0; padding-left: 0; } }

/* ---------- prijs ---------- */

.prijs { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 72px; align-items: start; }
@media (max-width: 980px) { .prijs { grid-template-columns: 1fr; gap: 44px; } }
.bedrag { font-family: var(--serif); font-weight: 400; font-size: clamp(88px, 13vw, 168px); line-height: 0.9; color: var(--nacht); margin: 0; font-variant-numeric: tabular-nums; }
.nacht .bedrag { color: var(--wit); }
.stappen { list-style: none; counter-reset: s; padding: 0; margin: 0; border-top: 1px solid var(--lijn); }
.stappen li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--lijn); font-family: var(--serif); font-size: 22px; line-height: 1.26; color: var(--nacht); }
.stappen li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--messing-inkt); padding-top: 8px; }
.nacht .stappen { border-top-color: var(--lijn-n); }
.nacht .stappen li { border-bottom-color: var(--lijn-n); color: var(--wit); }
.nacht .stappen li::before { color: var(--messing); }
.inbegrepen { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--lijn); }
.inbegrepen li { padding: 14px 0 14px 26px; border-bottom: 1px solid var(--lijn); position: relative; color: var(--grafiet); font-size: 16px; }
.inbegrepen li::before { content: "·"; position: absolute; left: 4px; color: var(--messing-inkt); }
.nacht .inbegrepen { border-top-color: var(--lijn-n); }
.nacht .inbegrepen li { border-bottom-color: var(--lijn-n); color: var(--op-n); }
.nacht .inbegrepen li::before { color: var(--messing); }

/* ---------- vragen ---------- */

.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; }
@media (max-width: 980px) { .faq { grid-template-columns: 1fr; gap: 28px; } }
.faq details { border-top: 1px solid var(--lijn); padding: 18px 0; }
.faq details:last-child { border-bottom: 1px solid var(--lijn); }
.faq summary { cursor: pointer; list-style: none; font-family: var(--serif); font-style: italic; font-size: 23px; color: var(--nacht); }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { margin: 10px 0 0; font-size: 16px; max-width: 62ch; }

/* ---------- modules: overzicht ---------- */

.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: end; }
@media (max-width: 900px) { .intro { grid-template-columns: 1fr; gap: 20px; } }
.kaarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--nacht); margin-top: 56px; }
.nacht .kaarten { border-top-color: var(--wit); }
.kaart { padding: 24px 22px 18px 0; }
.kaart + .kaart { padding-left: 22px; border-left: 1px solid var(--lijn); }
.nacht .kaart + .kaart { border-left-color: var(--lijn-n); }
@media (max-width: 1000px) { .kaarten { grid-template-columns: 1fr 1fr; } .kaart:nth-child(3) { border-left: 0; padding-left: 0; } .kaart { border-bottom: 1px solid var(--lijn-n); } }
@media (max-width: 560px) { .kaarten { grid-template-columns: 1fr; } .kaart + .kaart { border-left: 0; padding-left: 0; } }
.kaart h3 { font-family: var(--serif); font-weight: 400; font-size: 32px; color: var(--nacht); margin: 0 0 6px; line-height: 1.05; }
.nacht .kaart h3 { color: var(--wit); }
.kaart .pijler { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--staal); margin-bottom: 14px; }
.kaart .belofte { font-family: var(--serif); font-size: 20px; line-height: 1.26; color: var(--grafiet); margin: 0 0 14px; }
.nacht .kaart .belofte { color: var(--op-n); }
.telling { font-family: var(--mono); font-size: 11.5px; color: var(--op-n-z); line-height: 1.8; margin: 0; }
.telling b { color: var(--nacht); font-weight: 500; }
.nacht .telling b { color: var(--wit); }
.kaart a { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--messing); text-decoration: none; border-bottom: 1px solid var(--messing); margin-top: 14px; padding-bottom: 2px; }

/* ---------- modules: pagina ---------- */

.mod-kop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; align-items: start; }
.mod-kop > figure + figure { grid-column: 2; }
@media (max-width: 980px) { .mod-kop { grid-template-columns: 1fr; gap: 36px; } .mod-kop > figure + figure { grid-column: 1; } }
.modulenaam { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7vw, 86px); line-height: 0.96; color: var(--nacht); margin: 0 0 10px; }
.vragenlijst { list-style: none; margin: 0 0 22px; padding: 0; }
.vragenlijst li { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.3; color: var(--messing-inkt); padding: 7px 0; border-bottom: 1px solid var(--lijn); }

.krijgt { margin-top: 56px; border-top: 2px solid var(--nacht); }
.groep { padding: 22px 0 8px; border-bottom: 1px solid var(--lijn); }
.groep h4 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zacht); margin: 0 0 12px; font-weight: 500; }
.groep ul { list-style: none; margin: 0; padding: 0; }
.groep li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: baseline; padding: 7px 0; font-size: 16px; }
.groep li .vink { color: var(--groen-inkt); font-family: var(--mono); }
@media (max-width: 620px) { }

.status { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zacht); white-space: nowrap; }
.status.aanbouw { color: var(--messing-inkt); }
@media (max-width: 620px) {
  .groep li { grid-template-columns: 24px 1fr; }
  .groep li .status { grid-column: 2; white-space: normal; }
}

.tabel { overflow-x: auto; margin-top: 18px; }
.tabel table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 15.5px; }
.tabel th, .tabel td { text-align: left; vertical-align: top; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--lijn); }
.tabel th { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zacht); font-weight: 500; border-bottom: 2px solid var(--nacht); }
.tabel td:first-child { color: var(--nacht); font-weight: 500; }

.ophoudt { list-style: none; margin: 18px 0 0; padding: 0; max-width: 78ch; }
.ophoudt li { padding: 10px 0 10px 26px; border-bottom: 1px solid var(--lijn); position: relative; font-size: 16px; }
.ophoudt li::before { content: "—"; position: absolute; left: 0; color: var(--rood); }

.zin { margin-top: 44px; border-top: 1px solid var(--lijn); padding-top: 24px; max-width: 58ch; }
.zin .kopje { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zacht); margin-bottom: 8px; }
.zin p { font-family: var(--serif); font-size: 22px; line-height: 1.26; color: var(--nacht); margin: 0; }

/* ---------- privacy ---------- */

.afspraken { list-style: none; counter-reset: a; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--lijn); }
.nacht .afspraken { border-top-color: var(--lijn-n); }
.afspraken li { counter-increment: a; display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--lijn); max-width: 880px; }
.nacht .afspraken li { border-bottom-color: var(--lijn-n); }
.afspraken li::before { content: counter(a, decimal-leading-zero); font-family: var(--mono); font-size: 12px; color: var(--messing-inkt); padding-top: 5px; }
.nacht .afspraken li::before { color: var(--messing); }
.afspraken b { color: var(--nacht); font-weight: 500; }
.nacht .afspraken b { color: var(--wit); }
/* Het portret van de maker. Blijft weg zolang beeld/jeroen.jpg er niet is:
   site.js zet hem pas aan als het bestand werkelijk laadt. */
.portret { margin: 32px 0 0; max-width: 300px; }
.portret img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.05); border: 1px solid var(--lijn); }
.portret figcaption { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zacht); margin-top: 10px; }

.twee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
@media (max-width: 900px) { .twee { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- demo ---------- */

.meenemen { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--lijn); max-width: 62ch; }
.meenemen li { padding: 14px 0; border-bottom: 1px solid var(--lijn); font-size: 16px; }
.meenemen li b { color: var(--nacht); font-weight: 500; }
.nacht .meenemen { border-top-color: var(--lijn-n); }
.nacht .meenemen li { border-bottom-color: var(--lijn-n); color: var(--op-n); }
.nacht .meenemen li b { color: var(--wit); }

/* ---------- afdrukken: alleen het meegenomen voorbeeld ---------- */

#export { display: none; }
@media print {
  body > *:not(#export) { display: none !important; }
  #export { display: block; position: absolute; left: 0; top: 0; width: 100%; padding: 24px; background: #fff; color: #111; font-family: var(--sans); }
  #export h1 { font-size: 22px; color: #111; }
  #export table { border-collapse: collapse; width: 100%; margin: 12px 0; }
  #export td { border-bottom: 1px solid #ddd; padding: 6px 8px; font-size: 12px; }
  #export .num { text-align: right; }
  #export .chip { font-size: 10px; color: #555; }
}

/* Iedereen aan tafel: op smalle schermen onder elkaar in plaats van schuiven */
@media (max-width: 720px) {
  .tafel { overflow-x: visible; }
  .tafel table { min-width: 0; }
  .tafel thead { display: none; }
  .tafel table, .tafel tbody, .tafel tr, .tafel td { display: block; width: auto; }
  .tafel tr { padding: 18px 0; border-bottom: 1px solid var(--lijn); }
  .tafel td { border-bottom: 0; padding: 2px 0; width: auto; }
  .tafel td.wie { width: auto; font-size: 24px; margin-bottom: 4px; }
  .tafel td.hun { width: auto; font-size: 19px; margin-bottom: 6px; }
}