/* app.css — De Klantenmaker, design system v1.0 (papier/inkt/petrol).
   Alles via tokens.css. Vormentaal §5/§7: radius 0, geen schaduw, geen gradient;
   scheidingen zijn 1px steen-hairlines; het 14°-vlak is het enige accent. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--dk-font);
  font-size: var(--dk-maat);
  line-height: var(--dk-regel);
  color: var(--dk-ink);
  background: var(--dk-fond);
}

/* ---- typografie ---- */
h1, h2 {
  font-family: var(--dk-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 0.94;
  color: var(--dk-ink);
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
h3 { font-family: var(--dk-font); font-weight: 600; font-size: 1.35rem; color: var(--dk-ink); line-height: 1.2; margin: 0 0 .4em; }
h4 { font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--dk-ink); margin: 0 0 .4em; }
p { margin: 0 0 1em; }
a { color: var(--dk-primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--dk-ink); }
.accent { color: var(--dk-primary); }
.opt { color: var(--dk-ink-soft); font-weight: 400; font-size: .85em; letter-spacing: 0; text-transform: none; }
.fijn { font-size: .85rem; color: var(--dk-ink-soft); }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 var(--dk-ruimte); }
.wrap.narrow { max-width: 620px; }
.wrap-breed { max-width: 1280px; margin: 0 auto; padding: 0 var(--dk-ruimte); }
main { padding: 40px 0 72px; }

/* ---- header / footer ---- */
.site-head {
  display: flex; align-items: center; gap: 16px;
  padding: 16px var(--dk-ruimte); background: var(--dk-wit);
  border-bottom: 1px solid var(--dk-lijn);
}
.brand { display: inline-flex; align-items: center; text-decoration: none; }
.brand svg { display: block; width: 140px; height: auto; }
.brand-mark {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  background: var(--dk-ink); color: var(--dk-fond); font-family: var(--dk-font-label);
  font-weight: 600; letter-spacing: .06em; font-size: .82rem;
}
.head-sub { color: var(--dk-ink-soft); font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; }
.site-foot { border-top: 1px solid var(--dk-lijn); background: var(--dk-wit); padding: 22px 0; }
.site-foot p { max-width: 920px; margin: 0 auto; padding: 2px var(--dk-ruimte); color: var(--dk-ink-soft); font-size: .85rem; }
.foot-links a { color: var(--dk-primary); }

/* ---- hero / landing ---- */
.hero { background: var(--dk-fond); padding: 72px 0 52px; position: relative; overflow: hidden; border-bottom: 1px solid var(--dk-lijn); }
.hero::before { content: ""; position: absolute; top: 48px; right: 7%; width: 118px; height: 118px; background: var(--dk-primary); transform: rotate(var(--dk-rotatie)); }
.hero-kicker { font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .08em; font-size: .82rem; color: var(--dk-primary); font-weight: 600; margin-bottom: .8em; }
.hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); max-width: 15ch; }
.hero-lead { font-size: 1.15rem; max-width: 58ch; color: var(--dk-ink); }
.hero-prijs { font-size: 1.05rem; }
.hero-prijs strong { color: var(--dk-ink); }
/* Lucht tussen de hero-hairline en de secties eronder — alleen op de landing (.hero komt daar voor); 2× --dk-ruimte houdt het 8px-grid. */
.hero ~ section { padding-top: calc(var(--dk-ruimte) * 2); }

.stappen { list-style: none; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--dk-lijn); border: 1px solid var(--dk-lijn); }
.stap { background: var(--dk-wit); padding: 22px; }
.stap-nr { display: inline-grid; place-items: center; width: 34px; height: 34px; background: var(--dk-ink); color: var(--dk-fond); font-family: var(--dk-font-display); font-weight: 700; font-size: 1.1rem; margin-bottom: 10px; }
.stap h3 { font-size: 1.05rem; margin: .2em 0; }
.stap p { font-size: .92rem; color: var(--dk-ink-soft); margin: 0; }

.band-in { background: var(--dk-ink); color: var(--dk-fond); padding: 32px; }
.band-in h2 { color: var(--dk-fond); }
.pluspunten { margin: 0; padding-left: 1.1em; }
.pluspunten li { margin-bottom: .6em; }
.band-in strong { color: var(--dk-primary-soft); }

/* ---- kaart / form ---- */
.kaart { background: var(--dk-wit); border: 1px solid var(--dk-lijn); padding: 28px; margin-bottom: 24px; }
.form-kaart { max-width: 560px; }
.tekst-midden { text-align: center; }
.vink-groot { width: 60px; height: 60px; margin: 0 auto 14px; background: var(--dk-primary); color: var(--dk-fond); font-size: 1.8rem; display: grid; place-items: center; transform: rotate(var(--dk-rotatie)); }

.veld { margin-bottom: 18px; }
.veld label { display: block; font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; margin-bottom: 6px; color: var(--dk-ink); }
.veld input, .veld textarea, .veld select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--dk-ink);
  border: 1px solid var(--dk-lijn); border-radius: 0; background: var(--dk-wit);
}
.veld input:focus, .veld textarea:focus, .veld select:focus { outline: 2px solid var(--dk-primary); outline-offset: -1px; border-color: var(--dk-primary); }
.veld-rij { display: flex; gap: 16px; }
.veld-rij .veld { flex: 1; }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
/* Lucht tussen de verstuurknop en de kleine toelichting eronder. */
.form .fijn { margin-top: 1.4em; }

/* ---- knoppen (§7) ---- */
.btn {
  display: inline-block; cursor: pointer; border: none; text-decoration: none;
  font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; line-height: 1.2;
  background: var(--dk-ink); color: var(--dk-fond); padding: 12px 24px; border-radius: 0;
}
.btn:hover { background: #000; color: var(--dk-fond); }
.btn-groot { font-size: 1rem; padding: 16px 30px; }
.btn-petrol { background: var(--dk-primary); color: var(--dk-fond); }
.btn-petrol:hover { background: #0c4a53; color: var(--dk-fond); }
.btn-licht { background: transparent; color: var(--dk-ink); border: 1px solid var(--dk-ink); padding: 11px 23px; }
.btn-licht:hover { background: var(--dk-ink); color: var(--dk-fond); }
.btn-terug { background: none; border: none; color: var(--dk-ink-soft); cursor: pointer; padding: 10px 0;
  font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.btn-terug:hover { color: var(--dk-ink); }
.btn-link { background: none; border: none; color: var(--dk-primary); cursor: pointer; padding: 2px 0; font: inherit;
  text-decoration: underline; text-decoration-color: var(--dk-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.btn-link:hover { color: var(--dk-ink); }
.btn-mini { font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  font-size: .72rem; padding: 6px 10px; border: 1px solid var(--dk-ink); background: transparent; color: var(--dk-ink); cursor: pointer; }
.btn-mini:hover { background: var(--dk-ink); color: var(--dk-fond); }
.form-inline { display: inline; }
.terug-form { margin-top: 16px; text-align: center; }

/* ---- notice ---- */
.notice { padding: 12px 16px; margin-bottom: 18px; font-size: .95rem; background: var(--dk-wit); border: 1px solid var(--dk-lijn); border-left: 3px solid var(--dk-ink); }
.notice-info { border-left-color: var(--dk-primary); }
.notice-ok { border-left-color: var(--dk-ok); }
.notice-let-op { border-left-color: var(--dk-let-op); }
.notice-fout { border-left-color: var(--dk-fout); }

/* ---- wizard ---- */
.voortgang { position: relative; height: 6px; background: var(--dk-lijn); margin-bottom: 26px; }
.voortgang-vul { height: 100%; background: var(--dk-primary); }
.voortgang-tekst { position: absolute; right: 0; top: 12px; font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; color: var(--dk-ink-soft); }
.wizard-kaart { padding: 34px; position: relative; }
.wizard-kaart::before { content: ""; position: absolute; top: 20px; right: 20px; width: 24px; height: 24px; background: var(--dk-primary); transform: rotate(var(--dk-rotatie)); }
.wizard-sub { color: var(--dk-ink-soft); margin-top: -.2em; }
.keuze-lijst { display: grid; gap: 12px; }
.keuze-kaart {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--dk-wit); border: 1px solid var(--dk-lijn); border-radius: 0;
  padding: 20px 22px; font: inherit;
}
.keuze-kaart:hover { border-color: var(--dk-primary); }
.keuze-kaart.gekozen { border-color: var(--dk-primary); background: var(--dk-primary-soft); }
.keuze-kaart.gekozen .keuze-titel { color: var(--dk-primary); }
.keuze-titel { display: block; font-weight: 600; font-size: 1.1rem; color: var(--dk-ink); }

/* samenvatting */
.samenvatting { border: 1px solid var(--dk-lijn); margin-bottom: 22px; }
.sv-rij { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--dk-lijn); }
.sv-rij:last-child { border-bottom: none; }
.sv-label { flex: 0 0 40%; font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dk-ink-soft); font-size: .82rem; }
.sv-waarde { flex: 1; }
.sv-wijzig { margin-left: auto; }
.sv-wijzig button { background: none; border: none; color: var(--dk-primary); cursor: pointer; font: inherit;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; font-size: .88rem; }
.sv-wijzig button:hover { color: var(--dk-ink); }

/* percentage-rijen */
.pct-lijst { display: grid; gap: 10px; margin-bottom: 10px; }
.pct-rij { display: flex; align-items: center; gap: 8px; }
.pct-naam { flex: 1; padding: 11px 13px; border: 1px solid var(--dk-lijn); border-radius: 0; font: inherit; background: var(--dk-wit); }
.pct-getal { width: 92px; padding: 11px 13px; border: 1px solid var(--dk-lijn); border-radius: 0; font: inherit; background: var(--dk-wit); }
.pct-naam:focus, .pct-getal:focus { outline: 2px solid var(--dk-primary); outline-offset: -1px; border-color: var(--dk-primary); }
.pct-teken { color: var(--dk-ink-soft); }
.pct-totaal { font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.pct-totaal span { color: var(--dk-ink); }
.pct-totaal.ok span { color: var(--dk-ok); }

.checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 18px; }
.check { display: flex; align-items: center; gap: 8px; padding: 11px 13px; border: 1px solid var(--dk-lijn); cursor: pointer; }
.check input { width: auto; accent-color: var(--dk-primary); }
.check:has(input:checked) { background: var(--dk-primary-soft); border-color: var(--dk-primary); color: var(--dk-primary); }

/* opdrachtbevestiging */
.ob { border: 1px solid var(--dk-lijn); padding: 24px; margin-bottom: 20px; background: var(--dk-primary-soft); }
.ob-tabel { width: 100%; border-collapse: collapse; margin: 16px 0; }
.ob-tabel td { padding: 9px 0; border-bottom: 1px solid rgba(15,91,102,.25); }
.ob-tabel .bedrag { text-align: right; font-variant-numeric: tabular-nums; }
.ob-totaal td { font-weight: 700; border-bottom: none; font-size: 1.1rem; color: var(--dk-ink); }
.niet-akkoord { margin-top: 14px; }
.niet-akkoord summary { cursor: pointer; color: var(--dk-ink-soft); font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }

/* ---- segmentatie ---- */
.seg-intro { max-width: 720px; margin-bottom: 26px; position: relative; }
.persona-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.persona-blok { background: var(--dk-wit); border: 1px solid var(--dk-lijn); padding: 24px; display: flex; flex-direction: column; }
.persona-blok h2 { font-size: 1.4rem; }
.persona-blok h3 { font-family: var(--dk-font-label); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dk-primary); font-weight: 600; margin-top: 16px; }
.persona-sam { color: var(--dk-ink-soft); }
.persona-naam { font-weight: 600; }
.demo { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.demo li { padding: 4px 0; border-bottom: 1px solid var(--dk-lijn); }
.demo li span { color: var(--dk-ink-soft); text-transform: capitalize; }
.behoeften { padding-left: 1.1em; font-size: .9rem; }
.persona-blok form { margin-top: auto; padding-top: 18px; }
.benadruk { font-weight: 600; color: var(--dk-primary); }

/* ---- plan ---- */
.plan-hero { background: var(--dk-ink); color: var(--dk-fond); padding: 48px; margin-bottom: 28px; position: relative; overflow: hidden; }
.plan-hero::before { content: ""; position: absolute; top: 30px; right: 6%; width: 96px; height: 96px; background: var(--dk-primary); transform: rotate(var(--dk-rotatie)); }
.plan-hero h1 { color: var(--dk-fond); font-size: clamp(2.2rem, 4vw, 3.4rem); }
.plan-hero .hero-kicker { color: var(--dk-primary-soft); }
.plan-klant { font-size: 1.1rem; opacity: .92; margin: 0; }
.plan-sectie { margin-bottom: 40px; }
.plan-sectie-kicker { font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--dk-ink-soft); margin: 0 0 6px; }
.plan-slot { background: var(--dk-ink); color: var(--dk-fond); padding: 40px; }
.plan-slot h2 { color: var(--dk-fond); }
.plan-slot a { color: var(--dk-fond); font-weight: 600; text-decoration: underline; }
.plan-persona { background: var(--dk-primary-soft); padding: 26px; }
.canvas-grid { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); background: var(--dk-lijn); border: 1px solid var(--dk-lijn); }
.canvas-kaart { background: var(--dk-wit); border-top: 3px solid var(--kv, var(--dk-primary)); padding: 18px; }
.canvas-kaart h4 { display: flex; align-items: center; gap: 8px; color: var(--kv, var(--dk-primary)); font-family: var(--dk-font-label); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.canvas-glyph { width: 16px; height: 16px; flex: none; }
.canvas-kaart p { margin: 0; }
.maand-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 10px; }
.maand-kaart { background: var(--dk-wit); border: 1px solid var(--dk-lijn); padding: 18px; }
.maand-kop { font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dk-ink); border-bottom: 2px solid var(--dk-primary); padding-bottom: 6px; margin-bottom: 8px; }
.maand-boodschap { font-size: .92rem; }
.maand-kanalen { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.chip { background: var(--dk-primary-soft); color: var(--dk-primary); font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; padding: 3px 9px; }
.maand-acties { padding-left: 1.1em; font-size: .88rem; margin: 0 0 10px; }
.maand-kpi { font-size: .85rem; margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--dk-lijn); }
.maand-kpi-label { font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--dk-canvas-boodschap); margin-right: 6px; }

.content-bijlage { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.cc { margin: 0; background: var(--dk-wit); border: 1px solid var(--dk-lijn); overflow: hidden; }
.cc figcaption { padding: 8px 14px; font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; color: var(--dk-ink-soft); background: var(--dk-fond); border-top: 1px solid var(--dk-lijn); }
.cc-insta .insta-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.insta-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--dk-primary); }
.insta-naam { font-weight: 600; font-size: .9rem; }
.insta-beeld { aspect-ratio: 1/1; background: var(--dk-primary-soft); display: grid; place-items: center; color: var(--dk-primary); font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .08em; }
.insta-body { padding: 10px 12px; font-size: .9rem; }
.cc-mail .mail-kop { padding: 12px 14px; border-bottom: 1px solid var(--dk-lijn); background: var(--dk-fond); }
.mail-van { display: block; font-size: .78rem; color: var(--dk-ink-soft); }
.mail-onderwerp { font-weight: 600; }
.mail-body { padding: 14px; font-size: .92rem; }
.cc-krant .krant-kader { border: 2px solid var(--dk-ink); margin: 14px; padding: 16px; text-align: center; }
.krant-kader h4 { font-family: var(--dk-font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--dk-ink); font-size: 1.2rem; }
.krant-logo { margin-top: 10px; font-family: var(--dk-font-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-primary); }
.cc-generiek { padding: 16px; }

.feedback-sectie textarea { min-height: 120px; }
.na-keuze { margin-top: 16px; }

/* ---- portaal ---- */
.portaal-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.portaal-bedrijf { color: var(--dk-ink-soft); margin-top: -.2em; }
.dash-grid { display: grid; gap: 24px; grid-template-columns: 1fr 1fr; }
.status-nu { font-family: var(--dk-font-display); text-transform: uppercase; letter-spacing: .01em; font-size: 1.5rem; color: var(--dk-ink); line-height: 1; }
.status-hint { color: var(--dk-ink-soft); }
.tijdlijn { list-style: none; padding: 0; margin: 0; }
.tl-item { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; }
.tl-stip { width: 10px; height: 10px; background: var(--dk-lijn); }
.tl-nu .tl-stip { background: var(--dk-primary); transform: rotate(var(--dk-rotatie)); }
.tl-nu .tl-tekst { font-weight: 600; color: var(--dk-ink); }
.tl-datum { font-size: .8rem; color: var(--dk-ink-soft); }
.dash-actie, .dash-blok { background: var(--dk-wit); border: 1px solid var(--dk-lijn); border-left: 3px solid var(--dk-primary); padding: 22px; margin-bottom: 22px; }
.debrief { background: var(--dk-fond); padding: 16px 18px; margin-bottom: 14px; border: 1px solid var(--dk-lijn); }
.doc-lijst { list-style: none; padding: 0; margin: 0; }
.doc-lijst li { padding: 9px 0; border-bottom: 1px solid var(--dk-lijn); }
.doc-lijst li:last-child { border-bottom: none; }
.badge { display: inline-block; padding: 3px 9px; font-family: var(--dk-font-label); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.badge-ok { background: var(--dk-primary-soft); color: var(--dk-ok); }
.badge-open { background: var(--dk-accent-soft); color: var(--dk-let-op); }
.badge-test { background: var(--dk-accent-soft); color: var(--dk-ink); }
.badge-fase { background: var(--dk-primary-soft); color: var(--dk-primary); }
.uitlog button { color: var(--dk-ink-soft); }

/* ---- CRM (intern) ---- */
body.crm { background: var(--dk-fond); }
.crm-head { display: flex; align-items: center; gap: 20px; padding: 14px 24px; background: var(--dk-ink); color: var(--dk-fond); }
.crm-head .brand { color: var(--dk-fond); font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .08em; }
.crm-head .brand-mark { background: var(--dk-fond); color: var(--dk-ink); }
.crm-head nav { display: flex; gap: 16px; }
.crm-head nav a { color: var(--dk-primary-soft); text-decoration: none; font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; }
.crm-head nav a.actief { color: var(--dk-fond); font-weight: 600; }
.crm-founder { margin-left: auto; font-size: .82rem; color: var(--dk-primary-soft); }
.crm-founder .btn-link { color: var(--dk-fond); }
.crm-tellers { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin: 24px 0; }
.teller { background: var(--dk-wit); border: 1px solid var(--dk-lijn); padding: 12px 18px; }
.teller-getal { font-family: var(--dk-font-display); font-weight: 700; font-size: 1.5rem; color: var(--dk-ink); }
.crm-testknop { margin-left: auto; }
.tabel-scroll { overflow-x: auto; }
.crm-tabel { width: 100%; border-collapse: collapse; background: var(--dk-wit); border: 1px solid var(--dk-lijn); }
.crm-tabel th, .crm-tabel td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--dk-lijn); font-size: .9rem; }
.crm-tabel th { background: var(--dk-primary-soft); color: var(--dk-ink); font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.st { display: inline-block; padding: 3px 9px; font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; font-weight: 600; }
.st-klant { background: var(--dk-primary-soft); color: var(--dk-primary); }
.st-agent { background: var(--dk-accent-soft); color: var(--dk-ink-soft); }
.st-akkoord { background: var(--dk-accent-soft); color: var(--dk-let-op); }
.st-betaling { background: var(--dk-accent-soft); color: var(--dk-let-op); }
.st-vast { background: var(--dk-accent-soft); color: var(--dk-fout); }
.st-afgerond { background: var(--dk-primary-soft); color: var(--dk-ok); }
.st-gesloten { background: var(--dk-accent-soft); color: var(--dk-ink-soft); }
.crm-detail-kop { display: flex; align-items: center; gap: 14px; }
.crm-sub { color: var(--dk-ink-soft); font-size: .9rem; }
.crm-kolommen { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; align-items: start; }
.kv { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--dk-lijn); font-size: .9rem; }
.kv span:first-child { flex: 0 0 42%; color: var(--dk-ink-soft); text-transform: capitalize; }
.crm-tijdlijn, .mini-tabel { font-size: .85rem; }
.crm-tijdlijn { list-style: none; padding: 0; }
.crm-tijdlijn li { padding: 6px 0; border-bottom: 1px solid var(--dk-lijn); }
.crm-tl-datum { color: var(--dk-ink-soft); }
.mini-tabel { width: 100%; border-collapse: collapse; }
.mini-tabel th, .mini-tabel td { padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--dk-lijn); vertical-align: top; }
.mini-tabel th { font-family: var(--dk-font-label); text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
.fk-blok { border-left: 3px solid var(--dk-primary); }
.fk-knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.fk-form { display: flex; gap: 6px; align-items: center; }
.fk-form input[type=text], .fk-form input[type=email], .fk-form select { padding: 9px 10px; border: 1px solid var(--dk-lijn); border-radius: 0; font: inherit; background: var(--dk-wit); }
.eml-view { background: var(--dk-wit); border: 1px solid var(--dk-lijn); padding: 18px; overflow-x: auto; white-space: pre-wrap; font-family: ui-monospace, Menlo, monospace; font-size: .82rem; }

.fout-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bedrijf-blok { line-height: 1.7; color: var(--dk-ink-soft); }

@media (max-width: 800px) {
  .hero::before, .plan-hero::before { display: none; }
}
@media (max-width: 720px) {
  .dash-grid, .crm-kolommen { grid-template-columns: 1fr; }
  .veld-rij { flex-direction: column; gap: 0; }
  .sv-label { flex-basis: 100%; }
  .sv-rij { flex-wrap: wrap; }
  /* CRM-klantdetail op smal scherm: geen pagina-brede scroll (§9a) */
  .crm-kolommen > * { min-width: 0; }
  .kv { flex-wrap: wrap; }
  .kv span { min-width: 0; overflow-wrap: anywhere; }
  .kv span:first-child { flex: 0 0 auto; }
  .fk-form { flex-wrap: wrap; }
  .fk-form input[type=text], .fk-form input[type=email], .fk-form select { flex: 1 1 100%; }
}