/* ============================================================
   Catermonkey redesign — prototype stylesheet
   Standalone. Niet gekoppeld aan de echte site build.

   STRUCTUUR:
   1. SITE-BREED       — tokens, reset, typografie, knoppen, chrome,
                         herbruikbare componenten (sectiekop, accordeon)
   2. HOMEPAGE         — secties die alleen op de homepage voorkomen
   3. PRICING          — prijzenpagina
   4. DOELGROEPPAGINA  — klanten/… (stappenplan, meer-functies)
   5. OPLOSSINGSPAGINA — oplossingen/… (functiekaarten)
   6. RESPONSIVE       — breakpoints voor alle pagina's
   7. VORMGEVING       — de stijl van sep 2026, over al het bovenstaande
   ============================================================ */


/* ============================================================
   1. SITE-BREED
   ============================================================ */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --cm-bg:        #ffffff;
  --cm-bg-soft:   #f3f5f4;
  --cm-text:      #154c52;
  /* Was #6b7a7c: haalde op wit 4,47:1 en op mint 3,88:1, allebei onder
     de norm van 4,5:1. Deze tint haalt 5,38 op wit en 4,67 op mint. */
  --cm-muted:     #4d6467;
  --cm-accent:    #154c52;
  --cm-border:    #e3e8e7;
  --cm-radius:    8px;
  /* Eén pil. Stond als 50px, 99px en 999px door elkaar. */
  --cm-radius-pil: 999px;

  /* Donkere vlakken zijn niet vlak: er valt licht op, altijd van
     linksboven. Eén bron voor de hele site, zodat de gloed in de
     slot-CTA, de kwalificatiekaart en de footer dezelfde hoek heeft. */
  --cm-dark-card:
    radial-gradient(110% 130% at 4% 0%, #21707a 0%, rgba(33, 112, 122, 0) 62%),
    var(--wb-inkt);
  --cm-font:      'Schibsted Grotesk', Helvetica, Arial, sans-serif;
  --cm-font-nav:  'Schibsted Grotesk', Helvetica, Arial, sans-serif;
  --cm-content-w: 1120px;
}

/* ── Reset / base ─────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--cm-font);
  color: var(--cm-text);
  line-height: 1.5;
  /* Een woord dat niet op de regel past, mag afbreken. Doet niets bij
     woorden die wel passen; vangt lange samenstellingen en adressen op
     ("Gegevensbeschermingsautoriteit", "info@…"). */
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
/* Koppen zijn Poppins, site-breed. Stond eerder per component ingesteld,
   waardoor elke nieuwe sectie het opnieuw moest weten en het bij de
   functiepagina's misging: die vielen terug op Lato. */
h1, h2, h3, h4 { font-family: var(--cm-font-nav); }

/* filter.js verbergt items met het hidden-attribuut. Zonder deze regel wint
   elke `display: flex/grid/block` op een kaart of rij van de browserstandaard
   `[hidden] { display: none }`, want dezelfde specificiteit en later in het
   bestand. Gevolg: het filter telde wel maar verborg niets — op de
   antwoordenindex, de integratiepagina en het klantcase-overzicht. */
[hidden] { display: none !important; }
a { color: inherit; }
.wrap {
  max-width: var(--cm-content-w);
  margin: 0 auto;
  padding: 0 24px;
}
/* De zijmarge van .wrap moet winnen van secties die hun eigen verticale
   ruimte zetten. Die schrijven `padding: 88px 0`, en dat zette de 24px
   opzij terug op nul: op mobiel plakte de tekst tegen de schermrand, en
   op desktop stonden die secties 24px breder dan de rest van de pagina.
   Twee kaarten zijn zelf .wrap en hebben hun eigen binnenruimte; die
   houden we met hun breedte van de rand af, zodat ze op dezelfde lijn
   staan als de tekst eromheen. */
.wrap:not(.cm-final-cta__card):not(.cm-cta-row) {
  padding-left: 24px;
  padding-right: 24px;
}
.cm-final-cta__card.wrap {
  width: calc(100% - 48px);
  max-width: calc(var(--cm-content-w) - 48px);
}
/* Smalle tekstkolommen staan links, op dezelfde lijn als de rest.
   Deze blokken zijn .wrap én smaller dan de contentbreedte. Met de
   margin: auto van .wrap kwamen ze als smalle kolom in het midden te
   staan, terwijl kruimelpad, zoekveld en grids eronder links beginnen.
   De linkermarge hieronder is precies de lege ruimte naast de
   contentbreedte, dus de tekst begint waar alles begint. Uitzondering
   van de functiepagina's (.cm-feature): die hebben hun eigen raster (§7.9). */
.cm-page-intro.wrap,
.cm-blog-intro.wrap,
.cm-news.wrap,
.cm-intg-body.wrap,
.cm-case.wrap,
.cm-about.wrap,
.cm-faq-page.wrap,
.cm-signup-faq.wrap,
.cm-post__kop.wrap,
.cm-post__body.wrap,
.cm-author-wrap.wrap,
.cm-legal__kop.wrap {
  margin-left: max(0px, calc((100% - var(--cm-content-w)) / 2));
  margin-right: auto;
}
.cm-post .cm-cta-row.wrap {
  margin-left: calc(max(0px, calc((100% - var(--cm-content-w)) / 2)) + 24px);
}
/* Staat onder de tekst van een blogpost: even breed als die tekstkolom
   (720px min 2 × 24px) en gecentreerd, net als de tekst. */
.cm-cta-row.wrap {
  width: calc(100% - 48px);
  max-width: 672px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Alleen voor schermlezers ─────────────────────────────── */
.cm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Placeholder (prototype utility) ─────────────────────── */
.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(45deg, #f1f5f4, #f1f5f4 10px, #e8f1ec 10px, var(--vlak-tint-6) 20px);
  border: 2px dashed var(--cm-accent);
  border-radius: var(--cm-radius);
  color: var(--cm-accent);
  font-family: var(--cm-font-nav);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  padding: 16px;
}

/* ── Header / nav ─────────────────────────────────────────── */
.cm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.cm-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--cm-font);
  font-weight: 700;
  font-size: 20px;
  text-decoration: none;
  color: var(--cm-text);
  letter-spacing: -0.01em;
}
.cm-nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
}
.cm-nav-links a { text-decoration: none; color: var(--cm-text); }
.cm-nav-right { display: flex; align-items: center; gap: 20px; }

/* ── Uitklapmenu in de nav ────────────────────────────────── */
.cm-nav-item--has-menu { position: relative; }
.cm-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--cm-text);
  cursor: pointer;
}
.cm-nav-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.cm-nav-item.is-open .cm-nav-caret { transform: translateY(1px) rotate(-135deg); }

.cm-nav-menu {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  z-index: 20;
  width: 560px;
  padding: 12px;
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(21, 76, 82, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.cm-nav-item.is-open .cm-nav-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}
/* Onzichtbare brug, zodat het paneel niet dichtvalt terwijl je
   ernaartoe beweegt. */
.cm-nav-item--has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 14px;
}
.cm-nav-menu__list {
  display: grid;
  /* Kolomsgewijs vullen, zodat een alfabetische lijst per kolom van
     boven naar beneden loopt in plaats van heen en weer over de rijen. */
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--cm-menu-rows, 3), auto);
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cm-nav-menu__list a {
  display: block;
  padding: 12px 14px;
  border-radius: var(--cm-radius);
  transition: background 0.12s ease;
}
.cm-nav-menu__list a:hover { background: var(--cm-bg-soft); }
.cm-nav-menu__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}
/* Acht doelgroepen met een toelichting: vier rijen, dus twee kolommen.
   Drie kolommen wordt te smal zodra er een zin onder de naam staat. */
.cm-nav-menu--rows4 { --cm-menu-rows: 4; }

/* De oplossingenlade heeft twee groepjes: het werk zelf, en wat daar
   omheen zit (maaltijdservice en de koppelingen). Een kopje in gewone
   letters, want kapitalen gebruiken we nergens meer. */
.cm-nav-menu__kop {
  margin: 2px 14px 8px;
  font-family: var(--cm-font-nav);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cm-muted);
}
.cm-nav-menu__kop--tweede {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--cm-border);
}
.cm-nav-menu__list--rijen1 { --cm-menu-rows: 1; }
.cm-nav-menu__list--rijen2 { --cm-menu-rows: 2; }
.cm-nav-menu__list--rijen3 { --cm-menu-rows: 3; }
.cm-nav-menu__list a[aria-current="page"] { background: var(--cm-bg-soft); }
.cm-nav-menu__list a[aria-current="page"] .cm-nav-menu__title { color: var(--cm-accent); }

.cm-nav-menu__desc {
  display: block;
  font-family: var(--cm-font);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--cm-muted);
}

@media (prefers-reduced-motion: reduce) {
  .cm-nav-menu, .cm-nav-caret { transition: none; }
}

/* ── Knoppen ──────────────────────────────────────────────── */
.cm-btn {
  display: inline-block;
  padding: 10px 26px;
  font-size: 14px;
  text-decoration: none;
  border-radius: var(--cm-radius-pil);
  border: 2px solid var(--cm-accent);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.cm-btn--ghost {
  border: 2px solid var(--cm-accent);
}


/* ── Sectiekop (herbruikbaar) ─────────────────────────────── */
.cm-section-head h2 {
  font-family: var(--cm-font-nav);
  margin: 0 0 12px;
}
.cm-section-head p { margin: 0; }

/* ── Accordeon (herbruikbaar: FAQ, "herken je dit?") ─────── */
.cm-faq-list { display: grid; gap: 0; }
.cm-faq {
  border-top: 1px solid var(--cm-border);
}
.cm-faq:last-child { border-bottom: 1px solid var(--cm-border); }
.cm-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.cm-faq summary::-webkit-details-marker { display: none; }
.cm-faq summary::after {
  font-size: 20px;
  color: var(--cm-accent);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.cm-faq p { margin: 16px 0 0; max-width: 68ch; }

/* ── Footer ───────────────────────────────────────────────── */
/* ── Footer ───────────────────────────────────────────────────
   Ingedeeld op de vraag die iemand stelt, net als de navigatie.
   Vijf kolommen, en daaronder de wettelijke regel en de socials. */
.cm-footer {
  /* Zelfde lichtkleur als --cm-dark-card, maar compacter: de footer is
     schermbreed, dus een uitgesmeerde gloed leest als een flauwe helling
     in plaats van als licht. Op 20% valt hij op de merkkolom. */
  background:
    radial-gradient(52% 100% at 20% 0%, #247984 0%, rgba(36, 121, 132, 0) 60%),
    var(--vlak-om);
  color: #e3eeec;
  padding: 72px 0 32px;
  font-size: 14px;
}
.cm-footer__top {
  display: grid;
  grid-template-columns: minmax(200px, 0.85fr) 3.4fr;
  gap: 32px;
  padding-bottom: 48px;
}
.cm-footer .cm-logo { color: var(--op-vlak-om); font-size: 22px; }
.cm-footer__tagline { margin: 14px 0 22px; color: #a9c4c1; line-height: 1.6; max-width: 30ch; }

/* Haarlijnen tussen de kolommen, dezelfde taal als de scheiding in de
   slot-CTA. Ze lopen allemaal even ver door, waardoor de ongelijke
   kolomlengtes juist minder opvallen. Geen streepjes tussen de links
   onderling: die stoppen per kolom op een andere hoogte en maken er een
   tabel met kapotte kolommen van. */
.cm-footer__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  padding-left: 32px;
}
.cm-footer__col { padding: 0 16px; }
.cm-footer__col + .cm-footer__col { border-left: 1px solid rgba(255, 255, 255, 0.12); }
.cm-footer__col:first-child { padding-left: 0; }
.cm-footer__col:last-child { padding-right: 0; }
.cm-footer__col h2 { font-weight: 700;
  color: var(--op-vlak-om); margin: 0 0 14px;
}
.cm-footer__col ul { list-style: none; margin: 0; padding: 0; }
.cm-footer__col li { margin-bottom: 9px; }
.cm-footer__col a {
  color: #e3eeec; text-decoration: none; line-height: 1.45;
  border-bottom: 1px solid transparent;
}
.cm-footer__col a:hover { color: var(--op-vlak-om); border-bottom-color: rgba(255,255,255,.5); }

.cm-footer__bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 24px;
}
.cm-footer__legal {
  margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-size: 13px; color: #a9c4c1;
}
.cm-footer__legal a { color: #a9c4c1; }
.cm-footer__legal a:hover { color: var(--op-vlak-om); }
.cm-footer__social { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.cm-footer__social a {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; color: #e3eeec;
  border: 1px solid rgba(255,255,255,.2);
}
.cm-footer__social a:hover { color: var(--cm-text); background: var(--vlak); border-color: var(--wb-wit); }
.cm-footer__proto {
  margin: 22px 0 0; font-size: 12px; color: rgba(207,224,221,.5); text-align: center;
}

@media (max-width: 1080px) {
  .cm-footer__top { grid-template-columns: 1fr; gap: 40px; }
  /* Gestapeld vallen de kolommen op meerdere rijen; verticale lijnen
     lopen dan niet meer door en worden losse streepjes. Weg ermee. */
  .cm-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    border-left: none;
    padding-left: 0;
  }
  .cm-footer__col,
  .cm-footer__col:first-child,
  .cm-footer__col:last-child { padding: 0; }
  .cm-footer__col + .cm-footer__col { border-left: none; }
}
@media (max-width: 700px) {
  .cm-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-footer__bottom { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   2. HOMEPAGE
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
.cm-hero { padding: 56px 0 40px; }
.cm-hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.cm-hero__eyebrow {
  margin: 0 0 14px;
}
.cm-hero h1 {
  font-family: var(--cm-font-nav);
  margin: 0 0 20px;
}
.cm-hero__sub {
  font-size: 18px;
  margin: 0 0 32px;
  max-width: 46ch;
}
/* flex-wrap: op een smal scherm zakt de tweede knop onder de eerste, in
   plaats van dat allebei in drie regels worden geperst. */
.cm-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 36px; }
.cm-hero__actions .cm-btn { padding: 14px 32px; font-size: 15px; }

.cm-hero__screenshot {
  width: 100%;
  /* Geen border-radius: de aangeleverde schermafbeeldingen hebben ruimte
     rondom het beeld. Een radius grijpt dan op die ruimte aan en niet op
     het beeld, dus je ziet er niets van. Wil je ronde hoeken, dan moeten
     die in de schermafbeelding zelf zitten.
     Wel drop-shadow en geen box-shadow: die volgt de vorm van het beeld
     in plaats van het rechthoekige kader eromheen. */
  filter: drop-shadow(0 8px 12px rgba(21, 76, 82, 0.15));
}

/* De tekeningen komen uit prototypes/artworks/_fragment.py en geven het
   vel een vaste breedte (392px). Op een telefoon is de kolom smaller:
   dan krimpt het vel mee in plaats van dat het rechts wordt afgesneden,
   en schuiven de vijf stapnamen eronder dichter op elkaar. De selectors
   zijn een tikje specifieker dan die in de tekening zelf, want die
   staat later in de pagina. */
/* .cm-art is een grid: zonder vaste kolom groeit die mee met het vel,
   en dan betekent max-width: 100% gewoon weer 392px. */
.cm-art { grid-template-columns: minmax(0, 1fr); }
.cm-art > *, .cm-art .stel, .cm-art .vel { max-width: 100%; }
@media (max-width: 560px) {
  .cm-art .rail .stap { padding: 0 7px; }
  .cm-art .rail .stap.nu::after { left: 7px; right: 7px; }
  /* De tekening heeft een vaste verhouding van 4:3. Op een telefoon is
     dat te laag voor wat erin staat, en dan valt de onderkant weg. Hier
     wordt hij zo hoog als zijn inhoud. div. voor de specificiteit. */
  div.cm-art { aspect-ratio: auto; padding-top: 24px; padding-bottom: 24px; }
}

/* ── Trust-strip ──────────────────────────────────────────── */
.cm-trust-curated { padding: 8px 0 48px; }
.cm-trust-curated__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--cm-muted);
  margin: 0 0 20px;
}
.cm-trust-curated__row {
  display: flex;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}
.cm-trust-curated__row img { height: 34px; width: auto; opacity: 0.75; }

/* ── Product ──────────────────────────────────────────────── */
.cm-product { padding: 88px 0; }
.cm-product__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.cm-product__list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; }
.cm-product__list li { display: flex; gap: 12px; font-size: 15px; }
.cm-product__list li::before { content: "✓"; color: var(--cm-accent); font-weight: 700; flex-shrink: 0; }

/* ── Documentbeeld (offerte zoals de klant hem krijgt) ───── */
/* Twee pagina's licht verspringend, zodat je ziet dat het een document
   is en niet een losse afbeelding. Geen rotatie: dat zou versiering zijn
   zonder dat het iets vertelt. De knop opent alle pagina's. */
.cm-doc {
  display: block;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 18px 18px 0 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.cm-doc__front,
.cm-doc__back {
  /* De width- en height-attributen in de HTML werken als CSS-hint. Hieronder
     staat wel een breedte maar geen hoogte, dus bleef de hoogte op de 788 uit
     het attribuut staan en werd de offerte in elkaar gedrukt. */
  height: auto;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(21, 76, 82, 0.15);
}
.cm-doc__back {
  position: absolute;
  top: 0;
  right: 0;
  width: 86%;
  opacity: 0.55;
}
.cm-doc__front {
  position: relative;
  width: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cm-doc:hover .cm-doc__front {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(21, 76, 82, 0.22);
}
.cm-doc__caption {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--cm-font-nav);
  color: var(--cm-accent);
}
.cm-doc__caption::after { content: "→"; transition: transform 0.15s ease; }
.cm-doc:hover .cm-doc__caption::after { transform: translateX(3px); }

/* ── Documentweergave (alle pagina's) ─────────────────────── */
.cm-docviewer {
  width: min(1000px, 92vw);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--cm-bg);
  color: var(--cm-text);
  overflow: hidden;
}
.cm-docviewer::backdrop { background: rgba(21, 76, 82, 0.55); }
.cm-docviewer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cm-border);
  background: var(--cm-bg);
}
.cm-docviewer__title {
  margin: 0;
  font-family: var(--cm-font-nav);
  font-size: 14px;
  font-weight: 600;
}
.cm-docviewer__close {
  border: 1px solid var(--cm-border);
  background: none;
  border-radius: var(--cm-radius-pil);
  padding: 7px 16px;
  font-family: var(--cm-font-nav);
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-text);
  cursor: pointer;
}
.cm-docviewer__close:hover { background: var(--cm-bg-soft); }
.cm-docviewer__pages {
  overflow-y: auto;
  max-height: calc(92vh - 58px);
  padding: 20px;
  display: grid;
  gap: 20px;
  background: var(--vlak-tint-3);
}
.cm-docviewer__pages img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(21, 76, 82, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .cm-doc__front, .cm-doc__caption::after { transition: none; }
  .cm-doc:hover .cm-doc__front { transform: none; }
}

/* ── Gespreksformulier ─────────────────────────────────────────── */
/* Alleen het formulier is over: de homepage zet het in de slotkaart. */
.cm-qualify__form { display: grid; gap: 14px; }
.cm-qualify__form input,
.cm-qualify__form select,
.cm-qualify__form textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: none;
  font-family: var(--cm-font);
  /* 16px, niet 14: daaronder zoomt iOS in zodra je een veld aantikt. */
  font-size: 16px;
}
.cm-qualify__form textarea { resize: vertical; min-height: 70px; }
.cm-field { display: grid; gap: 6px; }
.cm-field__label {
  font-family: var(--cm-font-nav);
  font-weight: 600;
  font-size: 13px;
  color: #e3eeec;
}
.cm-field__opt { font-family: var(--cm-font); font-weight: 400; }
.cm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .cm-field-row { grid-template-columns: 1fr; } }
.cm-qualify__form .cm-btn { justify-self: start; margin-top: 4px; }

/* ── Klantverhaal ─────────────────────────────────────────── */
.cm-story-spotlight__card {
  display: grid;
  align-items: center;
}
.cm-story-spotlight__quote { margin: 0 0 20px; }
.cm-story-spotlight__attribution { font-weight: 700; }

/* ── Final CTA ─────────────────────────────────────────────
   Twee kolommen: links de vraag en de knop, rechts wat je
   krijgt als je erop klikt. Het vlak was eerder een lege
   rechthoek met drie regels in het midden; de bezwaren die
   op de aanmeldpagina staan horen hier, op het moment dat
   iemand bijna klikt. De reep wit onder de kaart is smal,
   zodat de kaart en de footer samen één donker slot vormen. */
.cm-final-cta__card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-items: center;
  color: var(--op-vlak-om);
}
.cm-final-cta h2 { font-family: var(--cm-font-nav); margin: 0 0 14px; color: var(--op-vlak-om); }
.cm-final-cta p { color: #e3eeec; margin: 0 0 28px; max-width: 44ch; }

.cm-final-cta__actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.cm-final-cta__call {
  color: #e3eeec;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
}
.cm-final-cta__call:hover { color: var(--op-vlak-om); border-bottom-color: var(--wb-wit); }

.cm-final-cta__checks {
  margin: 0;
  list-style: none;
}
.cm-final-cta__checks li {
  position: relative;
  line-height: 1.5;
}
.cm-final-cta__checks li + li { border-top: 1px solid rgba(255, 255, 255, 0.10); }
.cm-final-cta__checks li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* Zonder lijstje (bijvoorbeeld de contact-CTA): één gecentreerde kolom. */
.cm-final-cta__card--solo { display: block; }
.cm-final-cta__card--solo p { margin-right: auto; }

@media (max-width: 900px) {
  .cm-final-cta { padding: 56px 0 32px; }
  .cm-final-cta__card { grid-template-columns: 1fr; gap: 32px; padding: 40px 28px; }
  .cm-final-cta__card--solo { padding: 40px 28px; }
  .cm-final-cta h2 { font-size: 26px; }
  .cm-final-cta__checks { padding: 0; border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.16); }
}


/* ============================================================
   3. PRICING
   ============================================================ */

/* De pakketten zelf staan in §7.7 (de menukaart). */

/* ── Vergelijkingstabel ───────────────────────────────────── */
.cm-compare__table-wrap {
  /* relative: de verborgen schermlezerteksten in de tabel staan absolute.
     Zonder dit ontsnappen ze aan het scrollvak en maken ze op een telefoon
     de hele pagina 623px breed. */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--cm-border);
}
.cm-compare__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.cm-compare__table th,
.cm-compare__table td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--cm-border);
}
.cm-compare__table tbody th[scope="row"] {
  text-align: left;
  font-family: var(--cm-font);
  font-weight: 400;
  color: var(--cm-text);
}
.cm-compare__table thead th {
  font-weight: 700;
  color: var(--cm-text);
  padding-top: 18px;
  padding-bottom: 18px;
}
.cm-compare__table tbody.cm-compare__group > tr:first-child > th {
  font-weight: 700;
  text-align: left;
}
.cm-compare__yes { font-weight: 700; }
.cm-compare__table tbody:last-child tr:last-child td,
.cm-compare__table tbody:last-child tr:last-child th { border-bottom: none; }

/* ── Ontzorgpakket ────────────────────────────────────────── */
.cm-onboarding { padding: 0 0 80px; }
.cm-onboarding__card {
  padding: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}
.cm-onboarding__copy h2 {
  font-family: var(--cm-font-nav);
  margin: 0 0 12px;
}
.cm-onboarding__copy p { max-width: 48ch; margin: 0 0 28px; }
.cm-onboarding__price {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.cm-onboarding__amount {
  line-height: 1;
  color: var(--cm-text);
}
.cm-onboarding__period { color: var(--cm-muted); margin-top: 4px; }

/* ── FAQ ──────────────────────────────────────────────────── */
.cm-pricing-faq { padding: 0 0 80px; }
.cm-pricing-faq h2 {
  font-family: var(--cm-font-nav);
  margin: 0 0 32px;
}

/* ============================================================
   4. DOELGROEPPAGINA  (voor-wie/…)
   ============================================================ */

/* ── Hero ─────────────────────────────────────────────────── */
/* Het productbeeld draagt hier de sectie, dus krijgt het meer
   kolombreedte dan op de homepage (§4: het product is de held).
   De tussenruimte is kleiner, zodat het beeld groeit zonder dat
   de tekstkolom zoveel inlevert dat de H1 extra gaat afbreken. */
.cm-hero--persona .cm-hero__grid {
  grid-template-columns: 1fr 1.4fr;
  gap: 40px;
}

/* ── Herken je dit? ───────────────────────────────────────── */
.cm-recognize { padding: 64px 0 72px; }

/* ── Stappenplan ──────────────────────────────────────────── */
.cm-steps__list {
  list-style: none;
  padding: 0;
}
.cm-step {
  display: grid;
}
.cm-step:first-child { border-top: none; }
.cm-step__num {
  display: flex;
}
.cm-step__body h3 {
  font-family: var(--cm-font-nav);
}
.cm-step__body p {
  margin: 0;
}

/* ── Meer functies (rustige lijst) ────────────────────────── */
.cm-more__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
}
.cm-more__list li { border-top: 1px solid var(--cm-border); }
.cm-more__list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--cm-text);
}
.cm-more__list a::after {
  color: var(--cm-accent);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.cm-more__list a:hover::after { transform: translateX(3px); }

/* ============================================================
   5. OPLOSSINGSPAGINA  (oplossingen/…)
   ============================================================ */

/* ── Functiekaarten ───────────────────────────────────────── */
/* De inhoudsopgave van de pagina: één kaart per functiepagina.
   Bewust kalm; de kaarten mogen het stappenplan niet overstemmen. */
.cm-feature-cards {
  display: grid;
}
.cm-feature-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cm-feature-card h3 {
  line-height: 1.35;
  margin: 0 0 8px;
}
.cm-feature-card p {
  line-height: 1.55;
  margin: 0;
}

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  /* Homepage */
  /* minmax(0, 1fr), niet 1fr: anders rekt iets met een vaste breedte
     (de tekening in de hero) de kolom op tot buiten het scherm. */
  .cm-hero__grid,
  .cm-product__grid,
  .cm-story-spotlight__card { grid-template-columns: minmax(0, 1fr); }
  .cm-hero h1 { font-size: 32px; }

  /* Pricing */
  .cm-compare__table th,
  .cm-compare__table td { padding: 10px 14px; font-size: 13px; }

  .cm-onboarding__card { flex-direction: column; }

  /* Doelgroeppagina */
  .cm-hero--persona .cm-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .cm-more__list { grid-template-columns: 1fr; }

  /* Oplossingspagina */
  .cm-feature-cards { grid-template-columns: 1fr 1fr; }
  .cm-step { grid-template-columns: 36px 1fr; gap: 16px; }
  .cm-step__num { width: 34px; height: 34px; font-size: 14px; }

  /* Gedeeld */
  .cm-nav-links { display: none; }
}


/* ============================================================
   7. HUBPAGINA'S EN DETAILPAGINA'S
   Integraties, klantcases, over ons, contact, FAQ, functies.
   Alles hier leunt op de tokens uit 1; er komt geen kleur bij.
   ============================================================ */

/* ── Gedeeld: intro, kruimelpad, zoekfilter ───────────────── */
.cm-page-intro { padding: 72px 0 40px; }
.cm-page-intro h1 { margin: 0 0 16px; }
.cm-page-intro__sub { line-height: 1.6; margin: 0; }

.cm-crumbs { padding: 28px 0 0; color: var(--cm-muted); }
.cm-crumbs a:hover { color: var(--cm-accent); }
.cm-crumbs span[aria-hidden] { margin: 0 6px; opacity: .5; }


.cm-filter {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-bottom: 40px;
}
.cm-filter__input {
  flex: 1 1 340px; max-width: 420px; color: var(--cm-text);
  padding: 12px 16px;
  border: 1px solid var(--cm-border);
  background: var(--vlak);
}
.cm-filter__count { margin: 0; }
.cm-filter__empty { margin: 24px 0 0; color: var(--cm-muted); }

.cm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; padding: 0; list-style: none; }
.cm-chips button {
  font-family: var(--cm-font-nav); font-size: 13px; font-weight: 600;
  color: var(--cm-text); background: var(--vlak); cursor: pointer;
  border: 1px solid var(--cm-border); border-radius: var(--cm-radius-pil);
  padding: 7px 15px;
}
.cm-chips button:hover { border-color: var(--cm-accent); color: var(--cm-accent); }
.cm-chips button[aria-pressed="true"] { background: var(--vlak-om); border-color: var(--cm-accent); color: var(--op-vlak-om); }

/* ── Integraties: overzicht ───────────────────────────────── */
.cm-intg { padding: 0 0 40px; }
.cm-intg__group { margin-bottom: 56px; }
.cm-intg__group-head { margin-bottom: 20px; }
.cm-intg__group-head h2 { font-family: var(--cm-font-nav); margin: 0 0 4px; }
.cm-intg__group-head p { margin: 0; }
.cm-intg__count { font-family: var(--cm-font); font-weight: 400; }

.cm-intg__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cm-intg-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; text-decoration: none; color: var(--cm-text);
  border: 1px solid var(--cm-border); background: var(--vlak);
  transition: border-color .15s ease, transform .15s ease;
}
.cm-intg-card__logo { height: 34px; width: auto; max-width: 76px; object-fit: contain; flex: none; }
.cm-intg-card__name { font-weight: 600; line-height: 1.3; }

.cm-missing { padding: 24px 0 76px; }
.cm-missing__card {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 36px;
}
.cm-missing__card h2 { margin: 0 0 6px; }
.cm-missing__card p { margin: 0; max-width: 60ch; }

/* ── Integraties: detail ──────────────────────────────────── */
.cm-intg-hero { display: flex; gap: 28px; align-items: flex-start; padding: 32px 0 44px; }
.cm-intg-hero h1 { font-size: 34px; line-height: 1.2; margin: 0 0 14px; }
.cm-intg-hero:not(.cm-intg-hero--schema) > div { max-width: 640px; }

.cm-intg-body { max-width: 720px; padding-bottom: 64px; }
.cm-intg-block { margin-bottom: 40px; }
.cm-intg-block h2 { font-size: 20px; margin: 0 0 12px; }
.cm-intg-block p { margin: 0 0 14px; line-height: 1.7; color: var(--cm-muted); }
.cm-intg-flow { margin: 0; padding: 0; list-style: none; }
.cm-intg-flow li {
  padding: 12px 0 12px 26px; position: relative;
  border-top: 1px solid var(--cm-border); color: var(--cm-muted); line-height: 1.6;
}
.cm-intg-flow li:last-child { border-bottom: 1px solid var(--cm-border); }
.cm-intg-flow li::before {
  content: "→"; position: absolute; left: 0; top: 12px; color: var(--cm-accent);
}
.cm-intg-extern { font-size: 14px; color: var(--cm-muted); }

/* ── Klantcases: overzicht ────────────────────────────────── */
.cm-cases { padding: 0 0 76px; }
.cm-case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cm-case-card {
  display: block; text-decoration: none; color: inherit;
  border-radius: 16px; overflow: hidden; background: var(--cm-bg-soft);
  border: 1px solid var(--cm-border);
  transition: transform .15s ease, border-color .15s ease;
}
.cm-case-card:hover { transform: translateY(-2px); border-color: var(--cm-accent); }
.cm-case-card__media { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cm-bg-soft); }
.cm-case-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-case-card__quote {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 18px 20px 16px;
  font-family: var(--cm-font-nav); font-weight: 600; font-size: 15px; line-height: 1.4;
  color: var(--op-vlak-om);
  background: linear-gradient(to top, rgba(21,76,82,.92), rgba(21,76,82,0));
}
.cm-case-card__body { display: block; padding: 16px 20px 20px; }
.cm-case-card__name { display: block; font-family: var(--cm-font-nav); font-weight: 600; font-size: 15px; margin: 0 0 4px; }
.cm-case-card__labels { display: block; margin: 0; font-size: 13px; color: var(--cm-muted); }

/* ── Klantcase: detailpagina ──────────────────────────────── */
.cm-case { max-width: 760px; padding: 24px 0 64px; }
.cm-case h1 { font-size: 36px; line-height: 1.2; margin: 12px 0 24px; }
.cm-case__hero { margin: 0 0 28px; }
.cm-case__hero img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; display: block; }
.cm-case__hero figcaption { font-size: 13px; color: var(--cm-muted); margin-top: 8px; }
.cm-case__intro { font-size: 18px; line-height: 1.65; margin: 0 0 28px; }
.cm-case p { line-height: 1.75; color: var(--cm-muted); }
.cm-case h2 { font-size: 22px; margin: 36px 0 12px; color: var(--cm-text); }
.cm-case__video { margin: 0 0 32px; }
.cm-case__video .placeholder { aspect-ratio: 2 / 1; border-radius: 16px; }
.cm-kort { background: var(--cm-bg-soft); border-radius: 16px; padding: 24px 28px; margin: 0 0 32px; }
.cm-kort h2 { font-family: var(--cm-font-nav); font-size: 15px; margin: 0 0 10px; }
.cm-kort ul { margin: 0; padding-left: 20px; }
.cm-kort li { margin-bottom: 6px; line-height: 1.6; color: var(--cm-muted); }
.cm-case blockquote {
  margin: 36px 0; padding: 0 0 0 24px;
  border-left: 3px solid var(--cm-accent);
}
.cm-case blockquote p {
  font-family: var(--cm-font-nav); font-weight: 600; font-size: 20px; line-height: 1.45;
  color: var(--cm-text); margin: 0 0 10px;
}
.cm-case blockquote cite { font-style: normal; font-size: 14px; color: var(--cm-muted); }

/* ── Over ons ─────────────────────────────────────────────── */
.cm-about { max-width: 720px; padding: 64px 0 40px; }
.cm-about p { font-size: 18px; line-height: 1.7; color: var(--cm-muted); margin: 0 0 16px; }
.cm-origin { padding: 56px 0; }
.cm-origin__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; }
.cm-origin p { line-height: 1.75; color: var(--cm-muted); }
.cm-facts { background: var(--cm-bg-soft); padding: 48px 0; }
.cm-facts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.cm-fact__num { font-family: var(--cm-font-nav); font-weight: 700; font-size: 34px; display: block; }
.cm-fact__label { color: var(--cm-muted); font-size: 15px; }
.cm-team { padding: 76px 0; }
.cm-team__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.cm-member { text-align: center; }
.cm-member img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; margin-bottom: 12px;
}
/* De foto's hebben width- en height-attributen; zonder dit neemt de hoogte
   die letterlijk over en wordt de cirkel een ovaal. */
.cm-member img { height: auto; }
.cm-member__name { font-family: var(--cm-font-nav); font-weight: 600; font-size: 15px; margin: 0; }
.cm-member__role { font-size: 13px; color: var(--cm-muted); margin: 2px 0 0; }

/* ── Contact ──────────────────────────────────────────────── */
.cm-routes { padding: 8px 0 64px; }
.cm-routes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cm-route {
  border: 1px solid var(--cm-border); border-radius: 16px; padding: 28px;
  display: flex; flex-direction: column;
}
.cm-route h2 { font-size: 18px; margin: 0 0 8px; }
.cm-route p { font-size: 15px; color: var(--cm-muted); line-height: 1.6; margin: 0 0 20px; }
.cm-route__links { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.cm-route__links a { font-family: var(--cm-font-nav); font-weight: 600; font-size: 15px; }

.cm-contact { padding: 0 0 76px; }
.cm-contact__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.cm-form { display: grid; gap: 18px; }
.cm-form label { font-family: var(--cm-font-nav); font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; }
.cm-form input, .cm-form select, .cm-form textarea {
  width: 100%; font-family: var(--cm-font); font-size: 15px; color: var(--cm-text);
  padding: 11px 14px; border: 1px solid var(--cm-border); border-radius: var(--cm-radius); background: var(--vlak);
}
.cm-form textarea { min-height: 140px; resize: vertical; }
.cm-form input:focus, .cm-form select:focus, .cm-form textarea:focus {
  outline: 2px solid var(--cm-accent); outline-offset: 1px; border-color: transparent;
}
/* Een vinkje staat in zijn label, naast de zin. Zonder deze regel pakt het
   de volle breedte van .cm-form input en belandt het aan de rechterkant van
   de pagina, los van de tekst waar het bij hoort. */
.cm-form label:has(> input[type="checkbox"]) {
  display: flex; align-items: flex-start; gap: 10px;
  font-weight: 400; line-height: 1.5;
}
.cm-form input[type="checkbox"] { width: auto; flex: none; margin-top: 2px; padding: 0; }
.cm-form__hint { font-size: 13px; color: var(--cm-muted); margin: 6px 0 0; }
.cm-form button { justify-self: start; }
.cm-contact-details h2 { font-size: 18px; margin: 0 0 12px; }
.cm-contact-details p { color: var(--cm-muted); line-height: 1.7; margin: 0 0 20px; }
.cm-reply {
  background: var(--cm-bg-soft); border-radius: 16px; padding: 24px 28px; margin-bottom: 28px;
}
.cm-reply strong { display: block; font-family: var(--cm-font-nav); font-size: 16px; margin-bottom: 4px; }
.cm-reply p { margin: 0; font-size: 14px; }

/* ── FAQ-hub ──────────────────────────────────────────────── */
.cm-faq-page { padding: 0 0 76px; max-width: 820px; }
.cm-faq-group { margin-bottom: 48px; }
.cm-faq-group > h2 { font-size: 22px; margin: 0 0 4px; }
.cm-faq-group__sub { margin: 0 0 16px; color: var(--cm-muted); font-size: 15px; }
.cm-faq__answer { padding-bottom: 20px; }
.cm-faq__answer p { margin: 14px 0 0; color: var(--cm-muted); font-size: 15px; line-height: 1.75; max-width: 68ch; }
.cm-faq__answer ul { margin: 14px 0 0; padding-left: 20px; color: var(--cm-muted); font-size: 15px; line-height: 1.7; }
.cm-faq__answer a { color: var(--cm-accent); }

/* ── Functiepagina ────────────────────────────────────────── */
.cm-feature { padding: 24px 0 0; }
.cm-feature__head { max-width: 760px; }
.cm-feature__head h1 { margin: 8px 0 14px; }
.cm-feature__sub { line-height: 1.55; margin: 0 0 20px; }
.cm-feature__lede { line-height: 1.7; margin: 0; }
.cm-shot { margin: 44px 0; }
.cm-shot img {
  /* 75% van de kolom: het beeld toont wat het doet, het hoeft de pagina
     niet over te nemen. */
  width: 75%; margin: 0 auto; display: block;
  filter: drop-shadow(0 8px 12px rgba(21, 76, 82, 0.15));
}
.cm-shot figcaption { margin-top: 14px; text-align: center; }
.cm-feature__body { max-width: 720px; padding-bottom: 8px; }
.cm-feature__body h2 { margin: 36px 0 12px; }
.cm-feature__body p { line-height: 1.75; margin: 0 0 14px; }
.cm-checks { margin: 0 0 32px; padding: 0; list-style: none; }
.cm-checks li { padding: 10px 0 10px 28px; position: relative; line-height: 1.6; border-top: 1px solid var(--cm-border); }
.cm-checks li:last-child { border-bottom: 1px solid var(--cm-border); }
.cm-checks li::before { content: "✓"; position: absolute; left: 0; top: 10px; font-weight: 700; }
.cm-roles { padding: 8px 0 0; }
.cm-roles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cm-role { border: 1px solid var(--cm-border); border-radius: 16px; padding: 24px; }
.cm-role h3 { font-family: var(--cm-font-nav); font-size: 15px; margin: 0 0 8px; }
.cm-role p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cm-muted); }
.cm-parts { padding: 56px 0 0; }

/* ── Menu-voet in de klantenlade ──────────────────────────── */
.cm-nav-menu__foot {
  display: block; margin: 8px 12px 4px; padding: 10px 12px 2px;
  border-top: 1px solid var(--cm-border);
  font-family: var(--cm-font-nav); font-weight: 600; font-size: 13px;
  color: var(--cm-accent); text-decoration: none;
}
.cm-nav-menu__foot:hover { text-decoration: underline; }


/* ============================================================
   8. RESPONSIVE VOOR DE NIEUWE PAGINA'S
   ============================================================ */
@media (max-width: 900px) {
  .cm-page-intro h1 { font-size: 32px; }
  .cm-intg__grid { grid-template-columns: 1fr 1fr; }
  .cm-missing__card { flex-direction: column; align-items: flex-start; }
  .cm-intg-hero { flex-direction: column; gap: 18px; }
  .cm-case-grid { grid-template-columns: 1fr 1fr; }
  .cm-origin__grid { grid-template-columns: 1fr; gap: 24px; }
  .cm-facts__grid { grid-template-columns: 1fr; gap: 24px; }
  .cm-team__grid { grid-template-columns: repeat(3, 1fr); }
  .cm-routes__grid { grid-template-columns: 1fr; }
  .cm-contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .cm-roles__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cm-intg__grid { grid-template-columns: 1fr; }
  .cm-case-grid { grid-template-columns: 1fr; }
  .cm-team__grid { grid-template-columns: 1fr 1fr; }
}

/* ── CTA-rij binnen een artikel (klantcase, functiepagina) ── */
/* De procestekening in de hero van een oplossingspagina. Zij brengt haar
   eigen maten mee (540 breed, 4:3); hier zorgen we alleen dat ze meeschaalt
   met de kolom en niet groter wordt dan ze getekend is. */
.cm-hero__tekening { width: 100%; display: flex; justify-content: center; }
.cm-hero__tekening .cm-art { width: 100%; max-width: 540px; }

/* Functiepagina's: de opbouw staat in §7.9. */

/* Twee kolommen: de zin vult de linker, de knop staat rechts. Er stond
   eerder een max-width op die zin, waardoor hij halverwege het paneel ophield
   en er een gat tussen tekst en knop viel; de knop stond dan gecentreerd op
   het gat tussen twee tekstregels in plaats van op een blok. Zonder die
   beperking vult de tekst de kolom en klopt het bij 40, 76 en 109 tekens,
   de echte spreiding over de 1446 pagina's waar dit blok op staat. */
.cm-cta-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 32px; padding: 24px 28px; margin: 40px 0 0;
}
.cm-cta-row p { margin: 0; max-width: none; }
@media (max-width: 560px) {
  .cm-cta-row { grid-template-columns: 1fr; gap: 18px; justify-items: start; }
}
.cm-form__optioneel { font-weight: 400; color: var(--cm-muted); }
.cm-contact-details p a { color: var(--cm-accent); }
.cm-story-spotlight__link { margin: 14px 0 0; }
.cm-story-spotlight__image img { width: 100%; object-fit: cover; display: block; }

/* Brochure en inloggen: hulplinks naast de primaire CTA. Op de live site
   staan ze in een balk bóven de header; hier passen ze rechts, zodat er
   geen tweede balk bijkomt. */
.cm-nav-utility {
  font-family: var(--cm-font-nav);
  font-size: 13px;
  font-weight: 600;
  color: var(--cm-muted);
  text-decoration: none;
  white-space: nowrap;
}
.cm-nav-utility:hover { color: var(--cm-accent); }
@media (max-width: 900px) { .cm-nav-utility { display: none; } }

/* ── Media: podcast en webinars ───────────────────────────── */
.cm-media { padding: 0 0 40px; }
.cm-media__list { display: grid; gap: 32px; }
.cm-media-item {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center;
  border: 1px solid var(--cm-border); border-radius: 16px; padding: 24px;
}
.cm-media-item__type { font-weight: 700; font-size: 12px; color: var(--cm-accent); margin: 0 0 6px;
}
.cm-media-item h2 { font-size: 22px; line-height: 1.25; margin: 0 0 10px; }
.cm-media-item p { color: var(--cm-muted); line-height: 1.7; margin: 0 0 12px; }

/* ── Productnieuws ────────────────────────────────────────── */
.cm-news { padding: 0 0 76px; max-width: 760px; }
.cm-news__list { list-style: none; margin: 0; padding: 0; }
.cm-news-item { padding: 28px 0; border-top: 1px solid var(--cm-border); }
.cm-news-item:last-child { border-bottom: 1px solid var(--cm-border); }
.cm-news-item__date { font-size: 13px; color: var(--cm-muted); margin: 0 0 6px; }
.cm-news-item h2 { font-size: 22px; line-height: 1.3; margin: 0 0 8px; }
.cm-news-item h2 a { text-decoration: none; }
.cm-news-item h2 a:hover { color: var(--cm-accent); }
.cm-news-item p { margin: 0; color: var(--cm-muted); line-height: 1.7; }
.cm-news__meer { margin: 28px 0 0; font-size: 14px; color: var(--cm-muted); }

@media (max-width: 900px) {
  .cm-media-item { grid-template-columns: 1fr; }
}

/* ── Video: poster met afspeelknop, speler pas na een klik ── */
.cm-video {
  display: block; position: relative; width: 100%; padding: 0;
  border: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--cm-bg-soft); aspect-ratio: 2 / 1;
}
.cm-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-video__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%;
  background: rgba(21, 76, 82, .88);
  transition: transform .15s ease, background .15s ease;
}
.cm-video__play::after {
  content: ""; position: absolute; left: 27px; top: 22px;
  border-style: solid; border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent var(--wb-wit);
}
.cm-video:hover .cm-video__play { background: var(--vlak-om); transform: translate(-50%, -50%) scale(1.06); }
.cm-video:focus-visible { outline: 3px solid var(--cm-accent); outline-offset: 2px; }
.cm-video--speelt { cursor: default; }
.cm-video--speelt iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (prefers-reduced-motion: reduce) {
  .cm-video:hover .cm-video__play { transform: translate(-50%, -50%); }
}

/* ── Pers ─────────────────────────────────────────────────── */
.cm-presscontact { padding: 8px 0 56px; }
.cm-presscontact__card {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  background: var(--cm-bg-soft); border-radius: 16px; padding: 32px 36px;
}
.cm-presscontact__card h2 { font-size: 20px; margin: 0 0 8px; }
.cm-presscontact__card p { margin: 0 0 12px; color: var(--cm-muted); max-width: 52ch; line-height: 1.6; }
.cm-presscontact__gegevens { margin: 0; font-family: var(--cm-font-nav); font-weight: 600; line-height: 1.7; }
.cm-presscontact__gegevens a { color: var(--cm-accent); }

.cm-pers { padding: 0 0 56px; }
.cm-pers .cm-section-head { text-align: left; margin-left: 0; max-width: none; margin-bottom: 24px; }
.cm-pers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cm-pers-card {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--cm-border); border-radius: 16px; overflow: hidden;
  transition: transform .15s ease, border-color .15s ease;
}
.cm-pers-card:hover { transform: translateY(-2px); border-color: var(--cm-accent); }
.cm-pers-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--cm-bg-soft); }
.cm-pers-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-pers-card__body { display: block; padding: 20px 22px 24px; }
.cm-pers-card__bron {
  display: block; font-weight: 700; font-size: 11px; color: var(--cm-accent); margin-bottom: 8px;
}
.cm-pers-card__title { display: block; font-family: var(--cm-font-nav); font-weight: 600; font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.cm-pers-card__teaser { display: block; font-size: 14px; line-height: 1.6; color: var(--cm-muted); }

.cm-pers__lijst { border-top: 1px solid var(--cm-border); }
.cm-pers-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid var(--cm-border);
  text-decoration: none; color: inherit; line-height: 1.45;
}
.cm-pers-rij span { max-width: 80ch; }
.cm-pers-rij:hover span {
  color: var(--op-vlak);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud); text-underline-offset: 4px;
}

.cm-boiler { padding: 24px 0 56px; }
.cm-boiler__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: start; }
.cm-boiler h2 { font-size: 22px; margin: 0 0 14px; }
.cm-boiler__tekst {
  background: var(--cm-bg-soft); border-radius: 16px; padding: 24px 28px;
  line-height: 1.75; margin: 0 0 12px;
}
.cm-boiler__feiten { list-style: none; margin: 0; padding: 0; }
.cm-boiler__feiten li { display: flex; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--cm-border); }
.cm-boiler__feiten li:last-child { border-bottom: 1px solid var(--cm-border); }
.cm-boiler__num { font-family: var(--cm-font-nav); font-weight: 700; font-size: 20px; min-width: 92px; }
.cm-boiler__feiten span:last-child { color: var(--cm-muted); font-size: 15px; line-height: 1.5; }

.cm-assets { padding: 0 0 76px; }
.cm-assets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cm-asset { border: 1px solid var(--cm-border); border-radius: 16px; padding: 24px 26px; }
.cm-asset h3 { font-family: var(--cm-font-nav); font-size: 17px; margin: 0 0 8px; }
.cm-asset p { font-size: 14px; line-height: 1.6; color: var(--cm-muted); margin: 0 0 12px; }

@media (max-width: 900px) {
  .cm-presscontact__card { flex-direction: column; align-items: flex-start; }
  .cm-pers__grid, .cm-assets__grid { grid-template-columns: 1fr; }
  .cm-boiler__grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ═══ Aanmeldpagina ═══════════════════════════════════════════
   pages/aanmelden/. De pagina waar "Probeer gratis" naartoe wijst.
   Zie pages/aanmelden/VERBOUWING-PLAN.md.
   ────────────────────────────────────────────────────────── */

/* De uitgeklede header. Op een aanmeldpagina is elke link een uitgang;
   wat overblijft is het logo en Inloggen. De header zelf blijft gewoon
   uit _header.html komen, dus build.py hoeft niets te weten. */
.cm-focus .cm-header nav,
.cm-focus .cm-header .cm-btn,
.cm-focus .cm-header .cm-nav-utility[href*="brochure"] { display: none; }

.cm-signup { padding: 56px 0 76px; }
.cm-signup__grid {
  display: grid; grid-template-columns: 1fr 480px; gap: 64px; align-items: start;
}
.cm-signup__copy h1 { font-size: 42px; line-height: 1.12; margin: 0 0 18px; }
.cm-signup__sub {
  font-size: 18px; line-height: 1.65; color: var(--cm-muted);
  margin: 0 0 32px; max-width: 46ch;
}
.cm-signup__aside { font-size: 14px; color: var(--cm-muted); margin: 0; }

.cm-signup__card {
  border: 1px solid var(--cm-border); border-radius: 16px;
  padding: 32px; background: var(--vlak);
  box-shadow: 0 6px 24px rgba(21, 76, 82, .07);
}
.cm-signup__card h1,
.cm-signup__card h2 { font-size: 21px; margin: 0 0 22px; }
.cm-signup__card .cm-form button { justify-self: stretch; text-align: center; }
.cm-signup__fineprint {
  font-size: 13px; color: var(--cm-muted); text-align: center; margin: 16px 0 0;
}

.cm-signup__routes { padding-top: 76px; }
.cm-signup-faq { padding: 20px 0 88px; max-width: 760px; }
.cm-signup__back {
  margin: 32px 0 0; text-align: center;
  font-family: var(--cm-font-nav); font-weight: 600; font-size: 15px;
}

@media (max-width: 980px) {
  .cm-signup__grid { grid-template-columns: 1fr; gap: 40px; }
  .cm-signup__copy h1 { font-size: 32px; }
  .cm-signup__sub { max-width: none; }
}

.cm-signup__pakket {
  background: var(--cm-bg-soft); border-radius: var(--cm-radius);
  padding: 12px 16px; margin: -6px 0 22px;
  font-size: 14px; line-height: 1.5; color: var(--cm-text);
}

/* ═══ Blog: antwoorden, geen artikelen ════════════════════════
   pages/blog/. Zie pages/blog/VERBOUWING-PLAN.md.

   De vorm komt uit de inhoud. Deze vijftien posts zijn antwoorden op
   vragen die cateraars intypen bij Google, en bijna elk artikel opent
   met een getal: 9% of 21%, 3–15%, drie keer de inkoop, veertien
   allergenen. Dat getal is hier het beeld.

   Er staan geen foto's op. Alle twintig beelden bij deze posts bleken
   generieke stock, twee met een fors watermerk erover. Volgens de
   staande regel in dit project gaan die er dan niet in, en dan moet de
   typografie het werk doen.
   ────────────────────────────────────────────────────────── */

/* Vier thema-tinten, alle vier gedempt en in dezelfde koele familie als
   --cm-text (#154c52), zodat het rooster niet uiteenvalt in een
   kleurenwaaier. */
.cm-post-card[data-filter-labels="offertes"] { --thema: #31757d; --thema-zacht: #e6f0f0; }
.cm-post-card[data-filter-labels="geld"]     { --thema: #2f6b4f; --thema-zacht: #e5efe9; }
.cm-post-card[data-filter-labels="regels"]   { --thema: #8a5a2b; --thema-zacht: #f3ebe1; }
.cm-post-card[data-filter-labels="werk"]     { --thema: #4a5a86; --thema-zacht: #e8ebf3; }
.cm-post-card[data-filter-labels="keuken"]    { --thema: #7a4f6b; --thema-zacht: #f0e8ee; }
.cm-post-card[data-filter-labels="events"]    { --thema: #9a5c3a; --thema-zacht: #f4ebe5; }
.cm-post-card[data-filter-labels="personeel"] { --thema: #3f6d7a; --thema-zacht: #e7eff1; }

.cm-blog-intro { padding: 72px 0 32px; max-width: 720px; }
.cm-blog-intro h1 { font-size: 40px; line-height: 1.15; margin: 0 0 16px; }
.cm-blog-intro__sub { font-size: 18px; line-height: 1.65; color: var(--cm-muted); margin: 0; max-width: 60ch; }

.cm-post-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 28px;
}

.cm-post { padding: 8px 0 0; }
.cm-post__kop { max-width: 720px; padding: 56px 0 32px; }
.cm-post__kruimel { font-size: 13px; color: var(--cm-muted); margin: 0 0 18px; }
.cm-post__kruimel a { color: var(--cm-accent); }
.cm-post__kop h1 { font-size: 36px; line-height: 1.2; margin: 0 0 18px; }
.cm-post__antwoord {
  font-size: 19px; line-height: 1.6; color: var(--cm-text);
  margin: 0 0 20px; font-weight: 700; max-width: 56ch;
}
.cm-post__cijfer {
  font-family: var(--cm-font-nav); font-weight: 700; font-size: 46px;
  color: var(--cm-accent); margin: 0 0 16px; letter-spacing: -.02em;
}
.cm-post__meta { font-size: 13px; color: var(--cm-muted); margin: 0; }

.cm-post__body { max-width: 720px; padding-bottom: 16px; }
.cm-post__body h2 { font-size: 23px; line-height: 1.3; margin: 40px 0 14px; }
.cm-post__body h3 { font-family: var(--cm-font-nav); font-size: 17px; margin: 28px 0 8px; }
.cm-post__body p { line-height: 1.75; color: var(--cm-muted); margin: 0 0 16px; }
.cm-post__body ul, .cm-post__body ol { margin: 0 0 18px; padding-left: 22px; color: var(--cm-muted); }
.cm-post__body li { line-height: 1.7; margin-bottom: 7px; }
.cm-post__body a { color: var(--cm-accent); }

/* ── Auteursblok ──────────────────────────────────────────────────────────
   Gezet door bb apply-authors in een <!-- cm:author -->-hek. De stijlen
   stonden alleen in cm.css, en die laadt alleen een legacy-pagina. Op het
   redesign stond het blok daardoor zonder opmaak onder het artikel, met een
   LinkedIn-vierkant van 430 pixels. Hier staan ze op de tokens van het
   redesign, zodat ze ook in het donker kloppen. */
.cm-author-wrap { max-width: 720px; margin: 40px auto 56px; }
.cm-author {
  display: flex; gap: 22px; align-items: flex-start;
  margin: 0; padding: 28px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 6px;
}
.cm-author__photo {
  flex: 0 0 auto; width: 88px; height: 88px;
  border-radius: 50%; object-fit: cover;
}
.cm-author__body { margin: 0; min-width: 0; }
.cm-author__body > p { margin: 0; }
.cm-author__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cm-accent); margin-bottom: 3px;
}
.cm-author__name { font-size: 20px; font-weight: 700; color: var(--cm-text); line-height: 1.2; }
.cm-author__role { font-size: 14px; color: var(--cm-muted); margin-top: 3px; }
.cm-author__bio { font-size: 15px; color: var(--cm-muted); margin-top: 12px; line-height: 1.6; }
.cm-author__linkedin {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 16px 8px 13px;
  background: #0a66c2; color: #fff;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}
.cm-author__linkedin:hover { background: #004182; }
.cm-author__li-icon { width: 17px; height: 17px; fill: currentColor; flex: 0 0 auto; }
@media (max-width: 560px) {
  .cm-author { flex-direction: column; gap: 16px; padding: 22px; }
}
.cm-post__body strong { color: var(--cm-text); }
.cm-post__body table {
  width: 100%; border-collapse: collapse; margin: 8px 0 24px; font-size: 15px;
}
.cm-post__body th, .cm-post__body td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--cm-border);
  color: var(--cm-muted); line-height: 1.5;
}
.cm-post__body th {
  font-family: var(--cm-font-nav); font-weight: 600; font-size: 13px;
  color: var(--cm-text); background: var(--cm-bg-soft);
  border-bottom: none;
}
.cm-post__body th:first-child { border-top-left-radius: var(--cm-radius); }
.cm-post__body th:last-child { border-top-right-radius: var(--cm-radius); }
.cm-post .cm-cta-row { max-width: 720px; margin-top: 8px; }

@media (max-width: 980px) {
  .cm-post-grid { grid-template-columns: repeat(2, 1fr); }
  .cm-blog-intro h1 { font-size: 32px; }
  .cm-post__kop h1 { font-size: 28px; }
}
@media (max-width: 640px) {
  .cm-post-grid { grid-template-columns: 1fr; }
}

/* ═══ Juridische pagina's ═════════════════════════════════════
   pages/juridisch/. Zie pages/juridisch/VERBOUWING-PLAN.md.
   Een inhoudsopgave die meescrolt, want de gebruikersvoorwaarden zijn
   31.000 tekens en zonder houvast vindt niemand daar iets in terug.
   ────────────────────────────────────────────────────────── */

.cm-legal__kop { max-width: 720px; padding: 56px 0 8px; }
.cm-legal__kop h1 { font-size: 38px; line-height: 1.15; margin: 0 0 12px; }
.cm-legal__meta { font-size: 14px; color: var(--cm-muted); margin: 0; }

.cm-legal__grid {
  display: grid; grid-template-columns: 240px 1fr; gap: 56px;
  align-items: start; padding: 40px 0 72px;
}

.cm-legal__nav { position: sticky; top: 24px; }
.cm-legal__navkop { font-weight: 600; font-size: 11px; color: var(--cm-muted);
  margin: 0 0 12px;
}
.cm-legal__navkop--tweede { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--cm-border); }
.cm-legal__nav ul { list-style: none; margin: 0; padding: 0; }
.cm-legal__nav li { margin-bottom: 9px; }
.cm-legal__nav a {
  font-size: 14px; line-height: 1.45; color: var(--cm-muted);
  text-decoration: none; display: block;
}
.cm-legal__nav a:hover { color: var(--cm-accent); }

.cm-legal__body { max-width: 720px; }
.cm-legal__body img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 8px 0 28px; }
/* Een ingesloten film op ware verhouding. Niet .cm-video: die naam is al
   in gebruik voor een stilstaand beeld met een afspeelknop erop. */
.cm-film { padding: 8px 0 72px; }
.cm-film__kader { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: var(--vlak-om); }
.cm-film__kader iframe,
.cm-film__kader video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Een film binnen de tekst van een klantcase: hij loopt mee met de
   kolom en houdt zijn eigen verhouding. */
.cm-case__film { margin: 8px 0 28px; }
.cm-case__film video { width: 100%; height: auto; display: block; border-radius: 8px; background: var(--vlak-om); }
.cm-case__film figcaption { font-size: 0.92rem; color: var(--tekst-2); margin-top: 8px; }
/* Een schermafbeelding binnen een stap van het stappenplan. */
.cm-step__beeld { margin: 14px 0 4px; }
.cm-step__beeld img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--lijn); display: block; }
.cm-legal__body h2 {
  font-size: 22px; line-height: 1.3; margin: 44px 0 14px;
  scroll-margin-top: 24px;
}
.cm-legal__body h2:first-child { margin-top: 0; }
.cm-legal__body h3 { font-family: var(--cm-font-nav); font-size: 16px; margin: 28px 0 10px; }
.cm-legal__body h4 { font-family: var(--cm-font-nav); font-size: 15px; margin: 22px 0 8px; }
.cm-legal__body p { line-height: 1.75; color: var(--cm-muted); margin: 0 0 15px; }
.cm-legal__body ul, .cm-legal__body ol { margin: 0 0 18px; padding-left: 22px; color: var(--cm-muted); }
.cm-legal__body li { line-height: 1.7; margin-bottom: 7px; }
.cm-legal__body a { color: var(--cm-accent); }
.cm-legal__body strong { color: var(--cm-text); }

.cm-tabel-wrap { overflow-x: auto; margin: 0 0 26px; }
.cm-legal__body table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.cm-legal__body th, .cm-legal__body td {
  text-align: left; padding: 11px 14px; vertical-align: top;
  border-bottom: 1px solid var(--cm-border); color: var(--cm-muted); line-height: 1.55;
}
.cm-legal__body th {
  font-family: var(--cm-font-nav); font-weight: 600; font-size: 12.5px;
  color: var(--cm-text); background: var(--cm-bg-soft); border-bottom: none;
}
.cm-legal__body td strong { font-weight: 700; }

.cm-legal__hulp { padding: 0 0 80px; }
.cm-legal__hulpkaart {
  background: var(--cm-bg-soft); border-radius: 16px; padding: 32px 36px;
  max-width: 720px;
}
.cm-legal__hulpkaart h2 { font-size: 20px; margin: 0 0 8px; }
.cm-legal__hulpkaart p { color: var(--cm-muted); line-height: 1.7; margin: 0 0 20px; max-width: 58ch; }

@media (max-width: 900px) {
  .cm-legal__grid { gap: 32px; }
  .cm-legal__nav { position: static; border-bottom: 1px solid var(--cm-border); padding-bottom: 24px; }
  .cm-legal__kop h1 { font-size: 30px; }
}


/* ═══ Blogkaart ═══════════════════════════════════════════════
   Eén soort kaart, zoals op de live site: merkbeeld, categorie, kop, de
   eerste zinnen, "Lees meer". Een eerdere opzet had twee dichtheden — kaarten
   met een handgeschreven anker en kale regels eronder — maar zodra de beelden
   erbij kwamen viel dat uiteen in twee pagina's op één pagina. Het label en
   het zoekveld doen nu het werk dat het anker deed.

   De thumbnails dragen het Catermonkey-woordmerk en het gele kader. Dat is de
   huisstijl van de blog en het blijft erop; build-thumbs.py verkleint alleen. */

/* --thema-tekst wordt hier gezet en niet op :root: een var() wordt opgelost
   waar hij gedeclareerd staat, en op :root bestaat --thema nog niet. */
.cm-post-card { --thema-tekst: var(--thema, var(--cm-accent)); }
.cm-post-card {
  display: flex; flex-direction: column;
  background: var(--vlak); border-radius: 16px;
  padding: 16px 16px 20px;
  text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(21, 76, 82, .06), 0 8px 20px rgba(21, 76, 82, .05);
  transition: box-shadow .18s ease, transform .18s ease;
}
.cm-post-card:hover {
  box-shadow: 0 2px 4px rgba(21, 76, 82, .08), 0 14px 32px rgba(21, 76, 82, .12);
  transform: translateY(-2px);
}

.cm-post-card__beeld {
  display: block; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: 10px; margin-bottom: 16px;
  background: var(--thema, var(--vlak-om));
}
.cm-post-card__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Zes posts hebben op de oude site alleen het generieke logo-plaatje. Die
   krijgen het merk op de themakleur: geen foto, maar wel herkenbaar en het
   raster valt niet open. */
.cm-post-card__merk {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.cm-post-card__merk img { width: 150px; height: auto; opacity: .9; filter: brightness(0) invert(1); }

.cm-post-card__body { display: flex; flex-direction: column; flex: 1; padding: 0 6px; }

.cm-post-card__thema {
  font-size: 11px; font-weight: 600;
  color: var(--thema-tekst);
  margin-bottom: 8px;
}
.cm-post-card__vraag {
  font-family: var(--cm-font-nav); font-weight: 600;
  font-size: 19px; line-height: 1.32; margin: 0 0 10px;
  color: var(--cm-text);
}
.cm-post-card:hover .cm-post-card__vraag { color: var(--cm-accent); }

/* Vier regels, dan afkappen. Zonder klem verschillen de kaarten tientallen
   pixels in hoogte en golft het raster. */
.cm-post-card__inleiding {
  font-size: 15px; line-height: 1.6; color: var(--cm-muted);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden; margin-bottom: 14px;
}
.cm-post-card__meer {
  margin-top: auto; font-size: 14px; font-style: italic; color: var(--cm-muted);
}
.cm-post-card:hover .cm-post-card__meer { color: var(--cm-accent); }

/* ═══ Meest gelezen ═══════════════════════════════════════════
   Zes kaarten op een zachte achtergrond, zodat de sectie zich van de rest
   afzet zonder een tweede kaartvorm nodig te hebben. Volgorde is GA4-verkeer
   over 365 dagen. */
.cm-meest { padding: 56px 0 60px; margin-top: 24px; }
.cm-meest__kop { max-width: 640px; margin: 0 auto 34px; }
.cm-meest__kop h2 { margin: 0 0 10px; }
.cm-meest__kop p { color: var(--cm-muted); margin: 0; font-size: 16px; }

.cm-blog { padding: 56px 0 72px; }
.cm-blog__kop { max-width: 640px; margin: 0 0 24px; }
.cm-blog__kop h2 { font-size: 26px; line-height: 1.2; margin: 0 0 8px; }
.cm-blog__kop p { color: var(--cm-muted); margin: 0; font-size: 15px; }

/* Standaard 24 kaarten; de rest komt met de knop of zodra er gefilterd wordt.
   Een eigen klasse, niet [hidden] — dat attribuut is van filter.js en de twee
   zouden elkaar overschrijven. */
.cm-post-card.is-boven-cap { display: none !important; }

.cm-blog__meer { margin: 36px 0 0; text-align: center; }
.cm-blog__meer button {
  font-family: var(--cm-font-nav); font-weight: 600; font-size: 15px;
  color: var(--cm-accent); background: var(--vlak);
  border: 1px solid var(--cm-border); border-radius: var(--cm-radius-pil);
  padding: 12px 26px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cm-blog__meer button:hover { border-color: var(--cm-accent); background: var(--vlak-tint-2); }

/* ============================================================
   7. VORMGEVING (sep 2026, frontend-design)
   Eén letter (Schibsted Grotesk), goud uit het logo voor knoppen en
   "klaar", inkt voor tekst, geen kapitalen boven koppen. Staat na de
   paginasecties, zodat het daar overheen gaat, en vóór het mobiele blok
   hieronder, zodat dat blijft winnen. De gloed op donkere vlakken
   (--cm-dark-card, footer) blijft: afgesproken met Yari.

   7.1 Basis       tokens, letter, knoppen, koppen
   7.2 Gedeeld     sectiekop, stappen, accordeon, linklijst,
                   klantverhaal, slot-CTA, footer
   7.3 Per type    functiepagina, prijzen, maaltijdservice, integraties
   7.4 Tekeningen  wat _fragment.py niet kan: maten van gedeelde onderdelen
   7.5 Klein scherm
   7.6 Homepage    het weekbord en de secties eronder
   7.7 Prijzen     de pakketten als menukaart
   7.8 Het bord    de planning aan de keukenmuur, homepage en doelgroepen
   7.9 Functies    tekst links, beeld rechts dat meeschuift
   7.10 Verhalen   klantverhaal met een kaart die meeschuift
   7.11 Koppeling  het schema in de kop van een integratiedetail
   7.12 Blog       een inhoudsopgave naast lange posts
   7.13 FAQ        een themalijst die meeschuift
   ============================================================ */

/* ── 7.1 Basis ─────────────────────────────────────────────── */
:root {
  --wb-inkt:   #154c52;
  --wb-diep:   #0f3a3f;
  --wb-goud:   #fbc100;
  --wb-goud-l: #ffd23f;
  --wb-grond:  #f3f5f4;
  --wb-staal:  #c9d1cf;
  --wb-lijn:   #e3e8e7;
  --wb-tekst2: #3c5a5e;
  --wb-wit:    #ffffff;
  /* Het stippenraster op de witte banden, hetzelfde raster als achter
     de tekeningen. Het markeert de band als vlak, zodat wit en grijs
     niet als één doorlopende ondergrond lezen. */
  /* ── Rollen ────────────────────────────────────────────────
     De namen hierboven zijn kleuren; deze zijn rollen. Dat verschil is
     wat een donkere modus mogelijk maakt: --wb-inkt staat 64 keer voor
     tekst en 13 keer voor een vlak, en die twee moeten de andere kant
     op bewegen. De lichte waarden hier zijn exact de huidige, dus dit
     verandert niets aan hoe de site er nu uitziet. */
  --vlak:        var(--wb-wit);     /* een kaart, het lichtste vlak */
  --op-vlak:     var(--wb-inkt);    /* tekst, randen en focus daarop */
  --vlak-om:     var(--wb-inkt);    /* het omgekeerde vlak: slot, footer */
  --op-vlak-om:  var(--wb-wit);     /* tekst daarop */
  --grond:       var(--wb-grond);   /* de pagina zelf */
  --tekst-2:     var(--wb-tekst2);  /* zachtere tekst */
  --lijn:        var(--wb-lijn);    /* hairlines */
  --op-goud:     var(--wb-inkt);    /* tekst op goud, blijft donker in beide modi */
  --tekst-1:     #2b4b4f;           /* tekst met nadruk, iets zachter dan --op-vlak */
  --tekst-3:     #5f6d6f;
  --tekst-4:     #7a8d8f;           /* nog zachter: de nee-kolom */           /* bijschrift, zachter dan --tekst-2 */
  --vlak-accent: #fff6d6;           /* een geel getint vlak */
  --vlak-accent-zacht: #fffaea;     /* hetzelfde, flauwer */
  /* Acht bijna identieke lichtgrijze vlakken. De waarden blijven exact wat
     ze waren; het samenvoegen tot minder tinten is een opruiming voor later. */
  --vlak-tint-1: #f7f9f8;
  --vlak-tint-2: #f4f9f7;
  --vlak-tint-3: #f4f7f6;
  --vlak-tint-4: #eef2f1;
  --vlak-tint-5: #eaefed;
  --vlak-tint-6: #e8f1ec;
  --vlak-tint-7: #e6ebe9;
  --vlak-tint-8: #dfe7e5;
  --vlak-tint-1: #f7f9f8;
  --vlak-tint-2: #f4f9f7;
  --vlak-tint-3: #f4f7f6;
  --vlak-tint-4: #eef2f1;
  --vlak-tint-5: #eaefed;
  --vlak-tint-6: #e8f1ec;
  --vlak-tint-7: #e6ebe9;
  --vlak-tint-8: #dfe7e5;
  --vlak-fout: #fbeceb;

  --wb-raster: radial-gradient(#d9e1df 1px, transparent 1.4px);
  --wb-raster-maat: 18px 18px;
  /* De kleuren van de magneten op het weekbord, overgenomen uit de app:
     wie het bord op de site ziet en daarna inlogt, vindt dezelfde kleuren
     terug (Yari, 24 sep). Elk vlak draagt een donkere letter uit zijn
     eigen kleurfamilie, net als in de app.

     De app zelf blijft op tekst onder de leesgrens (2,5 tot 3,6:1) en het
     bord draagt woorden die je echt leest, dus per kleur is één van de
     twee bijgesteld tot 4,5:1. Bij perzik en mint kon dat in de letter.
     Bij roze niet: daar is het vlak negen punten opgelicht (#ba8081 ->
     #cb9fa0), zodat de letter de app-kleur zelf kon blijven. Dat scheelt
     ook in het beeld, want het app-roze is veel donkerder dan de andere
     twee en trok als enige vlak alle aandacht naar Feesten.

     Blauw bestaat niet in de app: opgebouwd in dezelfde toonband (licht
     vlak, hoge verzadiging) op de blauwtint die de site al had. Inkt
     (Toonbank, alleen op de homepage) blijft donker: het bord heeft één
     zwaar vlak nodig, anders heeft het oog niets om aan vast te houden. */
  --wb-rood:        #cb9fa0;  /* app #ba8081, negen punten lichter */
  --wb-rood-op:     #781a1c;  /* app */
  --wb-blauw:       #c8dff9;  /* afgeleid, hue 212 */
  --wb-blauw-op:    #2e629e;
  --wb-groen:       #daf8d2;  /* app: bevestigd */
  --wb-groen-op:    #447934;  /* app #748170, donkerder */
  --wb-geel:        #fce7c5;  /* app: nieuwe vraag */
  --wb-geel-op:     #915c1c;  /* app #ce8228, donkerder */
}
body { background: var(--grond); }

h1, h2, h3 {
  font-family: var(--cm-font);
  color: var(--op-vlak);
  letter-spacing: -0.025em;
}
h1 { font-weight: 800; }
h2 { font-weight: 800; }
h3 { font-weight: 700; letter-spacing: -0.01em; }

/* Kop van elke pagina: groot en strak, zoals op de homepage. */
.cm-hero h1,
.cm-page-intro h1,
.cm-feature__head h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Het kleine kopje boven de H1: geen kapitalen meer, gewoon een regel
   die zegt voor wie de pagina is. Waar het niets toevoegt, is het uit
   de pagina gehaald. */
.cm-hero__eyebrow {
  font-family: var(--cm-font);
  font-size: 1rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tekst-2);
}
.cm-hero__sub,
.cm-page-intro__sub,
.cm-feature__sub { color: var(--tekst-2); }

/* Knoppen: goud met inkt. Inkt op goud haalt 6,9:1. */
.cm-btn {
  background: var(--wb-goud);
  border-color: var(--wb-goud);
  color: var(--op-goud);
  font-family: var(--cm-font);
  font-weight: 700;
}
.cm-btn:hover, .cm-btn:active { background: var(--wb-goud-l); border-color: var(--wb-goud-l); }
.cm-btn--ghost { background: transparent; border-color: var(--op-vlak); color: var(--op-vlak); }
.cm-btn--ghost:hover, .cm-btn--ghost:active { background: var(--vlak-om); border-color: var(--op-vlak); color: var(--op-vlak-om); }
/* Op een donker vlak is de hoofdknop ook goud. */
.cm-btn--inverse { background: var(--wb-goud); border-color: var(--wb-goud); color: var(--op-goud); }
.cm-btn--inverse:hover { background: var(--wb-goud-l); border-color: var(--wb-goud-l); }
/* De tweede actie in een blok dat al een gouden knop heeft. */
.cm-btn--donker { background: var(--vlak-om); border-color: var(--op-vlak); color: var(--op-vlak-om); }
.cm-btn--donker:hover, .cm-btn--donker:active { background: var(--wb-diep); border-color: var(--wb-diep); }

.cm-nav-links, .cm-nav-toggle, .cm-nav-menu__title { font-family: var(--cm-font); }

/* .cm-header a en .cm-footer a zetten color: inherit (chrome-base.css), en dat
   wint van .cm-btn. In het licht viel dat niet op omdat de kop dezelfde kleur
   heeft als de tekst op goud; op een donkere kop wordt de knoptekst dan licht
   op geel. Hier krijgt de knop zijn eigen kleur terug. */
.cm-header .cm-btn, .cm-footer .cm-btn { color: var(--op-goud); }
.cm-header .cm-btn--donker, .cm-footer .cm-btn--donker { color: var(--op-vlak-om); }

/* Links in lopende tekst: onderstreept in goud. */
.cm-story-spotlight__link a,
.cm-back a {
  font-family: var(--cm-font);
  font-weight: 700;
  color: var(--op-vlak);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud);
  text-underline-offset: 4px;
}
.proef-link:hover,
.cm-story-spotlight__link a:hover,
.cm-back a:hover { color: var(--op-vlak); text-decoration-color: var(--wb-inkt); }

/* Een foto met width- en height-attributen neemt die hoogte letterlijk
   over, en dan telt aspect-ratio niet meer. De grote klantfoto's zijn
   niet allemaal 3:2, dus hier moet de hoogte los. */
.cm-case__hero img,
.cm-story-spotlight__image img { height: auto; }

/* Blog: "Meest gelezen" op een witte band, kop links zoals overal. */
.cm-meest__kop { text-align: left; margin-left: 0; }
.cm-meest__kop h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.05; }

/* Een knop breekt niet over twee regels. */
.cm-cta-row .cm-btn { white-space: nowrap; flex-shrink: 0; }

/* Labels die nog in kapitalen stonden. */
.cm-trust-curated__label,
.cm-media-item__type,
.cm-pers-card__bron,
.cm-legal__navkop,
.cm-post-card__thema {
  font-family: var(--cm-font);
  text-transform: none;
  letter-spacing: 0;
}

/* Toetsenbordfocus: een inkt rand op licht, een gouden op donker.
   Goud op de lichte ondergrond is te flauw (1,5:1). */
:focus-visible { outline: 3px solid var(--op-vlak); outline-offset: 2px; }
.cm-footer :focus-visible,
.cm-final-cta :focus-visible,
.cm-prijzen .is-chosen :focus-visible,
.bd-strip--inkt:focus-visible { outline-color: var(--wb-goud); }

/* ── 7.2 Gedeeld ───────────────────────────────────────────── */

/* Sectiekoppen staan links, net als de rest van de tekst. */
.cm-section-head { text-align: left; max-width: none; margin: 0 0 40px; }
.cm-section-head h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.05; }
/* Een tweede groep op een overzichtspagina: dezelfde kop, een maat
   kleiner en met lucht erboven, zodat hij onder de h1 hangt in plaats
   van ernaast te concurreren. */
.cm-section-head--klein { margin-top: 48px; }
.cm-section-head--klein h2 { font-size: 1.35rem; }
/* De bestelwidget in de showroom. De widget brengt haar eigen stijl mee;
   hier staat alleen de ruimte eromheen. */
.cm-shop-demo { padding: 8px 0 72px; }
.cm-section-head p { max-width: 56ch; font-size: 1.1rem; color: var(--tekst-2); }

/* De witte banden op de site. Ze lopen van rand tot rand en dragen het
   stippenraster; de witte kaarten en de grijze ondergrond blijven effen,
   want twee patronen over elkaar wordt onrustig. */
.cm-steps,
.cm-meest,
.cm-story-spotlight,
.cm-home .regelt,
.cm-home .verhaal-band,
.cm-prijzen .pk-band {
  background-color: var(--vlak);
  background-image: var(--wb-raster);
  background-size: var(--wb-raster-maat);
}

/* Stappen: een echte volgorde, dus nummers mogen. Wit vlak, grote
   cijfers in een eigen kolom, een haarlijn tussen de stappen. */
.cm-steps { padding: 88px 0; }
.cm-steps .wrap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: start;
}
.cm-steps .cm-section-head { position: sticky; top: 32px; margin: 0; }
.cm-steps__list { max-width: none; margin: 0; counter-reset: none; }
.cm-step {
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--lijn);
}
.cm-step:first-child { padding-top: 4px; }
.cm-step__num {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--cm-font);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--op-vlak);
}
/* Goud op wit is te licht voor tekst; als streepje eronder werkt het wel. */
.cm-step__num::after {
  content: "";
  width: 24px;
  height: 4px;
  border-radius: 2px;
  background: var(--wb-goud);
}
.cm-step__body h3 { font-size: 1.3rem; line-height: 1.25; margin: 2px 0 8px; }
.cm-step__body p { font-size: 1rem; line-height: 1.6; color: var(--tekst-2); max-width: 60ch; }

/* Accordeon */
.cm-faq { border-top-color: var(--lijn); padding: 18px 0; }
.cm-faq:last-child { border-bottom-color: var(--lijn); }
.cm-faq summary { font-family: var(--cm-font); font-size: 1.1rem; font-weight: 700; color: var(--op-vlak); }
.cm-faq summary::after {
  content: "";
  width: 22px; height: 22px;
  border-radius: 50%;
  background:
    linear-gradient(var(--vlak-om), var(--wb-inkt)) center / 10px 2px no-repeat,
    linear-gradient(var(--wb-inkt), var(--wb-inkt)) center / 2px 10px no-repeat,
    var(--wb-goud);
}
.cm-faq[open] summary::after {
  content: "";
  background:
    linear-gradient(var(--vlak-om), var(--wb-inkt)) center / 10px 2px no-repeat,
    var(--wb-goud);
}
.cm-faq summary:focus-visible { outline: 3px solid var(--op-vlak); outline-offset: 4px; border-radius: 2px; }
.cm-faq p { font-size: 1rem; line-height: 1.65; color: var(--tekst-2); }

/* "Herken je dit?" krijgt de opbouw van de stappen: kop links, lijst rechts. */
.cm-recognize {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: start;
  padding-top: 88px;
  padding-bottom: 88px;
}
.cm-recognize .cm-section-head { margin: 0; }
.cm-recognize .cm-faq-list { max-width: none; margin: 0; }
.cm-recognize .cm-faq:first-child { border-top: 0; padding-top: 4px; }

/* Linklijst: geen pijltjes, een gouden streep onder bij hover. */
.cm-more { padding: 88px 0; }
.cm-more__list li { border-top-color: var(--lijn); }
.cm-more__list a { font-size: 1.02rem; font-weight: 500; padding: 15px 0; }
.cm-more__list a::after { content: none; }
.cm-more__list a:hover {
  color: var(--op-vlak);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud);
  text-underline-offset: 4px;
}
.cm-back { margin-top: 28px; font-size: 1rem; }

/* Klantverhaal: geen mintkaart, de quote als grote tekst naast de foto.
   Een witte band over de volle breedte, net als op de homepage: het blok
   ervoor staat meestal op de grijze ondergrond, en zonder wissel lazen
   die twee als één. De sectie is zelf .wrap; de schaduw trekt het wit
   tot aan de schermranden en clip-path houdt het binnen de hoogte. */
.cm-story-spotlight {
  padding: 96px 0;
  margin-bottom: 0;
}
.cm-story-spotlight__card {
  background: none;
  border-radius: 0;
  padding: 0;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
}
.cm-story-spotlight__image img { aspect-ratio: 4 / 5; border-radius: 4px; }
.cm-story-spotlight__quote {
  font-family: var(--cm-font);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--op-vlak);
  text-wrap: balance;
}
.cm-story-spotlight__attribution { font-family: var(--cm-font); font-size: 1rem; color: var(--tekst-2); }
.cm-story-spotlight__link { margin-top: 24px; font-size: 1rem; }
.cm-story-spotlight .placeholder { aspect-ratio: 4 / 5; border-radius: 4px; }

/* Slot-CTA: een losse donkere kaart met de gloed van linksboven
   (--cm-dark-card uit styles.css), op de lichte ondergrond. Er zit
   bewust ruimte tussen kaart en footer, zodat de twee niet in elkaar
   overlopen. */
.cm-final-cta { background: none; padding: 88px 0 96px; }
.cm-final-cta__card,
.cm-final-cta__card.wrap {
  background: var(--cm-dark-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 64px;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 64px;
}
.cm-final-cta h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
.cm-final-cta p { font-size: 1.15rem; }
.cm-final-cta__call { font-size: 1rem; }
.cm-final-cta__checks { border-left: 0; padding: 0; }
.cm-final-cta__checks li {
  font-size: 1rem;
  color: #e6efed;
  padding: 12px 0 12px 28px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.cm-final-cta__checks li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.cm-final-cta__checks li::before { color: var(--wb-goud); top: 12px; }
.cm-final-cta__card--solo { padding: 64px; text-align: left; }
/* Met een gezicht erbij: de foto vult de linkerkant tot de rand. */
.cm-final-cta .cm-final-cta__card--persoon.wrap {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
  align-items: stretch;
  /* De gloed begint waar de tekst begint; links ligt de foto. */
  background:
    radial-gradient(70% 130% at 42% 0%, #21707a 0%, rgba(33, 112, 122, 0) 62%),
    var(--vlak-om);
}
/* De tekst bepaalt de hoogte van de kaart, de foto vult die. Zonder
   height: 0 rekt een staande foto de kaart op tot zijn eigen hoogte. */
.cm-final-cta__foto {
  width: 100%; height: 0; min-height: 100%;
  object-fit: cover; object-position: 64% 22%;
}
.cm-final-cta__card--persoon .cm-final-cta__copy { min-height: 320px; display: flex; flex-direction: column; justify-content: center; }
.cm-final-cta__card--persoon .cm-final-cta__copy { padding: 56px; align-self: center; }
/* Staande foto: de gezichten zitten in het bovenste kwart. */
.cm-final-cta__foto--team { object-position: 50% 17%; }
/* Staande foto in een liggend vak: alleen de hoogte schuift. De gele
   rand rechts (de stoel) is van het bestand zelf afgesneden. */
.cm-final-cta__foto--luistert { object-position: 50% 15%; }
.cm-final-cta__foto--marten { object-position: 50% 14%; }
.cm-final-cta__card--solo .cm-final-cta__actions { justify-content: flex-start; }
.cm-final-cta__card--solo p { margin-left: 0; }

.cm-footer .cm-btn { background: var(--wb-goud); color: var(--op-goud); }
.cm-footer .cm-btn:hover { background: var(--wb-goud-l); }
.cm-footer__col h2 { font-family: var(--cm-font); text-transform: none; letter-spacing: 0; font-size: 0.95rem; }
.cm-footer a[href^="mailto"] { overflow-wrap: normal; white-space: nowrap; font-size: 0.9em; }

/* Een regel met een knop aan het eind van een pagina. Donker, want als wit
   kaartje met een haarlijn las het als een overgebleven formulierregel, en
   op een artikelpagina staat er vlak onder nog een wit kaartje (de auteur).
   Dit is dezelfde taal als het slotblok op de homepage, een maat kleiner. */
.cm-cta-row {
  background: var(--vlak-om);
  border: 0;
  border-radius: 10px;
  padding: 26px 28px;
}
.cm-cta-row p { font-size: 1.05rem; font-weight: 700; color: var(--op-vlak-om); }

/* ── 7.3 Per type ──────────────────────────────────────────── */

/* Functiepagina */
.cm-crumbs { font-size: 0.95rem; }
.cm-crumbs a { color: var(--tekst-2); }
.cm-feature__head h1 { margin-top: 12px; }
.cm-feature__sub { font-size: 1.25rem; }
.cm-feature__lede { font-size: 1.05rem; color: var(--tekst-2); }
.cm-feature__body p { color: var(--tekst-2); font-size: 1.02rem; }
.cm-feature__body h2 { font-size: 1.5rem; line-height: 1.15; }
.cm-shot figcaption { font-size: 0.95rem; color: var(--tekst-2); }
.cm-checks li { color: var(--tekst-1); border-top-color: var(--lijn); }
.cm-checks li:last-child { border-bottom-color: var(--lijn); }
.cm-checks li::before { color: var(--op-vlak); }

/* Prijzen */


.cm-compare { padding: 88px 0; }
.cm-compare__table-wrap { border-color: var(--lijn); border-radius: 6px; background: var(--vlak); }
.cm-compare__table { font-size: 0.98rem; }
.cm-compare__table thead th { font-family: var(--cm-font); font-size: 1.05rem; background: var(--vlak); border-bottom: 2px solid var(--op-vlak); }
.cm-compare__table thead th.cm-compare__col--featured { color: var(--op-vlak); background: var(--vlak-accent); }
.cm-compare__table tbody td.cm-compare__col--featured { background: var(--vlak-accent-zacht); }
.cm-compare__table tbody.cm-compare__group > tr:first-child > th {
  font-family: var(--cm-font);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--op-vlak);
  background: var(--grond);
}
.cm-compare__table thead th:first-child { text-align: left; }
.cm-compare__yes { color: var(--op-vlak); }
.cm-compare__no { color: var(--tekst-4); }
/* Het streepje voor "niet inbegrepen" wordt getekend in plaats van gezet.
   De betekenis staat al als echte tekst in het .cm-sr-only ernaast, dus het
   streepje is enkel beeld: het mag licht blijven zonder onder de eis voor
   leesbare tekst te vallen. Het spannetje zelf is het streepje; de teken
   erin schuift eruit, zodat de opmaak in alle zeven talen gelijk blijft. */
.cm-compare__no span[aria-hidden] {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.cm-onboarding__card {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 6px;
}
.cm-onboarding__copy h2 { font-size: 1.9rem; line-height: 1.1; }
.cm-onboarding__copy p { font-size: 1.02rem; color: var(--tekst-2); }
.cm-onboarding__amount { font-family: var(--cm-font); font-size: 3.4rem; font-weight: 800; letter-spacing: -0.035em; }
.cm-onboarding__period { font-size: 1rem; }
.cm-pricing-faq h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); }

/* Maaltijdservice: de functiekaarten worden een inhoudsopgave. */
.cm-features { padding: 88px 0; }
.cm-feature-cards { grid-template-columns: 1fr 1fr; gap: 0 56px; }
.cm-feature-card {
  border: 0;
  border-top: 1px solid var(--lijn);
  border-radius: 0;
  padding: 20px 0 22px;
}
.cm-feature-card:hover { border-color: var(--lijn); box-shadow: none; }
.cm-feature-card h3 {
  font-family: var(--cm-font);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--op-vlak);
  display: inline;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color .15s ease;
}
.cm-feature-card:hover h3,
.cm-feature-card:focus-visible h3 { text-decoration-color: var(--wb-goud); }
.cm-feature-card p { font-size: 0.98rem; color: var(--tekst-2); margin-top: 8px; }
/* Doelgroepkaart met pictogram: het tekentje staat voor de naam, op de
   regel van de kop, en de omschrijving loopt eronder door op de
   tekstkant in plaats van onder het tekentje. */
.cm-feature-card--icoon h3 { display: flex; align-items: center; gap: 10px; }
.cm-feature-card--icoon h3 svg { width: 20px; height: 20px; flex: none; color: var(--cm-accent); }
.cm-feature-card--icoon p { padding-left: 30px; }

/* Integraties */
.cm-page-intro { padding-top: 72px; max-width: var(--cm-content-w); }
.cm-page-intro h1 { max-width: 20ch; }
.cm-page-intro__sub { max-width: 60ch; }
.cm-page-intro__sub { font-size: 1.2rem; }
.cm-filter__input {
  font-family: var(--cm-font);
  font-size: 1rem;
  border-color: var(--wb-staal);
  border-radius: 4px;
}
.cm-filter__input:focus { outline: 3px solid var(--op-vlak); outline-offset: 0; border-color: var(--op-vlak); }
.cm-filter__count { font-size: 0.95rem; color: var(--tekst-2); }
.cm-intg__group-head h2 { font-size: 1.6rem; }
.cm-intg__group-head p { font-size: 1rem; color: var(--tekst-2); }
.cm-intg__count { font-size: 1rem; color: var(--tekst-2); }
.cm-intg-card { border-color: var(--lijn); border-radius: 4px; }
.cm-intg-card:hover { border-color: var(--op-vlak); transform: none; }
.cm-intg-card__name { font-family: var(--cm-font); font-size: 0.98rem; }
.cm-missing__card {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 6px;
}
.cm-missing__card h2 { font-size: 1.5rem; }
.cm-missing__card p { color: var(--tekst-2); font-size: 1.02rem; }

/* ── 7.4 Tekeningen: de opfrislaag ─────────────────────────── */
/* Letter en kapitalen regelt _fragment.py in de tekening zelf. Hier
   staan de maten en kleuren van onderdelen die veel tekeningen delen.
   "html body" maakt de regels sterker dan de stijl in de tekening, die
   later in de pagina staat. */
html body .cm-art {
  font-family: var(--cm-font);
  /* "normal" is bij Schibsted Grotesk ruimer dan bij Lato. De tekeningen
     zijn op Lato gemaakt; zonder vaste waarde groeit elke regel een
     tikje en valt de onderkant van de hoogste tekening weg. */
  line-height: 1.2;
  /* Een fijn stippenraster, zoals op een planbord. Een vlak vlak leest
     als een leeg vak. Donker sinds 17 sep 2026, met dezelfde gloed als
     het bord en de footer: op het lichte vlak kwam het witte vel er slap
     uit, en het bord liet zien dat een donkere lijst het beeld pakt. */
  background-color: var(--vlak-om);
  background-image:
    radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.3px),
    radial-gradient(110% 130% at 4% 0%, #21707a 0%, rgba(33, 112, 122, 0) 62%);
  background-size: 14px 14px, 100% 100%;
  background-repeat: repeat, no-repeat;
  border-radius: 8px;
}

/* Een functietekening is een afbeelding van een licht scherm, net zoals de
   offerte een afbeelding van papier is. Binnen een tekening houden de rollen
   daarom hun lichte waarde, ook in donkere modus; anders staat er lichte
   tekst op een wit vel. De palettokens waar dit naar verwijst veranderen
   niet mee, dus dit werkt in beide standen. */
.cm-art {
  --vlak:       var(--wb-wit);
  --op-vlak:    var(--wb-inkt);
  --tekst-1:    #2b4b4f;
  --tekst-2:    var(--wb-tekst2);
  --tekst-3:    #5f6d6f;
  --lijn:       var(--wb-lijn);
  --vlak-tint-1: #f7f9f8;
  --vlak-tint-2: #f4f9f7;
  --vlak-tint-3: #f4f7f6;
  --vlak-tint-4: #eef2f1;
  --vlak-tint-5: #eaefed;
  --vlak-tint-6: #e8f1ec;
  --vlak-tint-7: #e6ebe9;
  --vlak-tint-8: #dfe7e5;
  --vlak-accent: #fff6d6;
}

html body .cm-art .vel {
  border-color: #dfe5e4;
  border-radius: 4px;
  box-shadow: 0 1px 0 var(--wb-wit) inset, 0 10px 24px -14px rgba(15, 58, 63, .35);
}

/* Monospace in kapitalen wordt gewone tekst, een tikje groter. */
html body .cm-art .lbl,
html body .cm-art .pil,
html body .cm-art .stap,
html body .cm-art .merk span,
html body .cm-art .rij u,
html body .cm-art .uit span,
html body .cm-art .slotje span,
html body .cm-art .dagk .dl2,
html body .cm-art .dagk .aant,
html body .cm-art .afd b,
html body .cm-art .stap .w {
  font-family: var(--cm-font);
  text-transform: none;
  letter-spacing: 0;
}
html body .cm-art .lbl { font-size: 10.5px; font-weight: 700; color: var(--op-vlak); }
html body .cm-art .pil { font-size: 9.5px; font-weight: 700; color: var(--tekst-2); border-color: var(--wb-staal); }
html body .cm-art .rij u { font-size: 10px; font-weight: 500; color: #5f7274; }
html body .cm-art .uit span,
html body .cm-art .slotje span { font-size: 10px; color: var(--tekst-2); }
html body .cm-art .merk span { font-size: 10px; color: var(--tekst-2); }
html body .cm-art .dagk .dl2 { font-size: 9px; font-weight: 700; color: #5f7274; }
html body .cm-art .dagk .aant { font-size: 10px; font-weight: 700; color: var(--op-vlak); }
/* Het vak heeft een vaste hoogte van 56px, waarvan 10px bovenrand en
   witruimte. Drie regels van 14px passen daar precies in. */
html body .cm-art .afd { padding: 2px 0; }
html body .cm-art .afd b { font-size: 9px; line-height: 1.1; color: var(--tekst-2); }
html body .cm-art .stap .w { font-size: 10px; color: #5f7274; }

/* Poppins-cijfers en -koppen worden de nieuwe letter. */
html body .cm-art .tot .l, html body .cm-art .tot .v,
html body .cm-art .slot span, html body .cm-art .slot b,
html body .cm-art .periode span, html body .cm-art .periode b,
html body .cm-art .fase2 b {
  font-family: var(--cm-font);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Wat klaar is, wordt goud: dezelfde betekenis als op het weekbord. */
html body .cm-art .pil.aan { background: var(--wb-goud); border-color: var(--wb-goud); color: var(--op-goud); }
html body .cm-art .merk em,
html body .cm-art .uit em { background: var(--wb-goud); }
html body .cm-art .slotje em { border-color: var(--op-vlak); }
html body .cm-art .stap.aan .bol { background: var(--vlak-om); border-color: var(--op-vlak); }
html body .cm-art .dagk .gerecht { background: var(--vlak-tint-8); }
html body .cm-art .uit, html body .cm-art .slotje { background: var(--vlak-accent); }

/* De stappenbalk onder een tekening. */
/* Op één regel, ook bij vijf lange stapnamen: iets kleiner en krapper
   dan de monospace was, want die las smaller dan hij was. */
/* line-height 1.6 houdt de balk even hoog als met de kleinere monospace (8,5px x 1,9). */
html body .cm-art .rail .stap { font-size: 10px; line-height: 1.6; font-weight: 500; color: #8ba3a4; white-space: nowrap; padding: 0 8px; }
html body .cm-art .rail .stap.nu::after { left: 8px; right: 8px; }
html body .cm-art .rail .stap.gedaan { color: #cfdedb; }
html body .cm-art .rail .stap.nu { color: var(--op-vlak-om); font-weight: 700; }
html body .cm-art .rail .stap.nu::after { background: var(--wb-goud); height: 3px; }
html body .cm-art .rail .stap:focus-visible { outline-color: var(--wb-goud); }
html body .cm-art .veeg { background: linear-gradient(100deg, transparent 38%, rgba(251,193,0,.12) 50%, transparent 62%); }

/* ── 7.5 Klein scherm ──────────────────────────────────────── */
@media (max-width: 980px) {
  .cm-steps .wrap,
  .cm-recognize { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .cm-steps .cm-section-head { position: static; }
  .cm-steps, .cm-more, .cm-features, .cm-compare, .cm-story-spotlight { padding-top: 64px; padding-bottom: 64px; }
  .cm-recognize { padding-top: 64px; padding-bottom: 64px; }
  .cm-final-cta { padding: 56px 0 64px; }
  .cm-final-cta__card, .cm-final-cta__card.wrap,
  .cm-final-cta__card--solo { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 28px; }
  .cm-final-cta .cm-final-cta__card--persoon.wrap { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .cm-final-cta .cm-final-cta__foto { height: 220px; min-height: 0; }
  .cm-final-cta__card--persoon .cm-final-cta__copy { min-height: 0; }
  .cm-final-cta__card--persoon .cm-final-cta__copy { padding: 32px 28px 40px; }
  .cm-story-spotlight__card { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cm-story-spotlight__image { order: 2; }
  .cm-story-spotlight__image img, .cm-story-spotlight .placeholder { aspect-ratio: 3 / 2; }
  .cm-feature-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cm-step { grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
  .cm-step__num { font-size: 2rem; }


  .cm-onboarding__card { padding: 32px 24px; }
}


/* ── 7.6 Homepage ─────────────────────────────────────────── */
/* Alles onder body.cm-home: de homepage gebruikt korte namen (.rij,
   .slot, .dag) die ook in de tekeningen voorkomen. Zonder die voorzet
   zouden deze regels de tekeningen op andere pagina's verbouwen. */
/* ── Hero ─────────────────────────────────────────────────── */
.cm-home .wb {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 72px;
}
.cm-home .wb__kop {
  margin: 0 0 24px;
  /* Zo groot dat "Dé alles-in-één" nog net op één regel past. */
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  /* Was 0.98. Bij twee regels liepen de regelboxen 11px in elkaar, en een
     kop met een staart boven een accent ging botsen. 1.02 houdt de kop
     even compact en haalt de overlap eruit. */
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--op-vlak);
  text-wrap: balance;
}
.cm-home .wb__sub {
  margin: 0 0 32px;
  max-width: 34ch;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--tekst-2);
}
.cm-home .wb__acties { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Logo's onder de hero ─────────────────────────────────── */
.cm-home .wb-logos { padding-bottom: 64px; }
/* Zinsletters in plaats van kapitalen: een label hoeft niet te roepen. */
.cm-home .wb-logos .cm-trust-curated__label {
  font-family: var(--cm-font);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}

/* ── Wat het regelt ───────────────────────────────────────── */
.cm-home .regelt { padding: 96px 0; }
.cm-home .regelt__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
  align-items: start;
}
.cm-home .regelt__kop { position: sticky; top: 32px; }
.cm-home .regelt__kop h2,
.cm-home .wb-h2,
.cm-home .verhaal__quote p,
.cm-home .slot h2 {
  font-family: var(--cm-font);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--op-vlak);
}
.cm-home .regelt__kop h2,
.cm-home .wb-h2 { margin: 0 0 14px; font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.05; }
.cm-home .regelt__kop p { margin: 0; max-width: 30ch; font-size: 1.1rem; color: var(--tekst-2); }
/* Het aapje uit het logo schuift met de kop mee terwijl de regels
   rechts voorbijkomen, en kijkt een tikje mee. Versiering: alt is leeg. */
/* Boven de kop, alsof het eroverheen kijkt: de onderkant van de bril
   ligt vlak boven de titel. */
.cm-home .regelt__aap { display: block; width: 120px; height: auto; margin: -24px 0 -10px -6px; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cm-home .regelt__aap {
      animation: regelt-aap linear both;
      animation-timeline: view(block);
      animation-range: cover 0% cover 100%;
      transform-origin: 50% 90%;
    }
  }
}
@keyframes regelt-aap {
  0%   { transform: rotate(-6deg) translateY(6px); }
  50%  { transform: rotate(3deg); }
  100% { transform: rotate(-2deg) translateY(-4px); }
}

.cm-home .rij {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--lijn);
}
.cm-home .rij:first-child { border-top: 0; padding-top: 4px; }
.cm-home .rij__tekst h3 { margin: 0 0 8px; font-size: 1.3rem; line-height: 1.25; font-weight: 700; color: var(--op-vlak); }
.cm-home .rij__tekst p { margin: 0 0 12px; max-width: 58ch; color: var(--tekst-2); line-height: 1.6; }
.cm-home .rij__link {
  font-weight: 700;
  color: var(--op-vlak);
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud);
  text-underline-offset: 4px;
}
.cm-home .rij__link:hover { text-decoration-color: var(--wb-inkt); }

/* Dezelfde bolletjes als onder het bord, zodat je ziet waar het vandaan komt. */
.cm-home .rij__bord {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  margin: 2px 0 0; padding: 0; list-style: none;
}
.cm-home .rij__bord li {
  padding: 3px 10px 4px; border-radius: var(--cm-radius-pil);
  font-size: 0.8rem; font-weight: 500;
  color: var(--op-vlak); background: var(--vlak-tint-4);
}
.cm-home .rij__bord li.klaar { background: var(--vlak-om); color: var(--op-vlak-om); }
/* Onder elkaar, net als de bolletjes: naast elkaar botsten de brede
   logo's (Sligro met slagzin) met de smalle. */
.cm-home .rij__bord--logos { gap: 12px; }
.cm-home .rij__bord--logos li { padding: 0; background: none; }
.cm-home .rij__bord--logos img { height: 20px; width: auto; }
/* Het Sligro-logo draagt zijn slagzin mee en oogt op dezelfde hoogte te klein. */
.cm-home .rij__bord--logos img[alt="Sligro"] { height: 26px; }

/* ── De offerte ───────────────────────────────────────────── */
.cm-home .wb-product { padding: 96px 0; }
.cm-home .wb-product .cm-product__list li { font-size: 1.02rem; color: var(--tekst-1); }
.cm-home .wb-product .cm-product__list li::before { color: var(--op-vlak); }
.cm-home .wb-product .cm-doc__caption { font-family: var(--cm-font); }
.cm-home .wb-product .cm-doc__caption::after { content: none; }

/* ── Klantverhaal ─────────────────────────────────────────── */
/* Een eigen witte band: de offerte erboven staat op de grijze ondergrond,
   en zonder wissel lazen die twee als één blok. */
.cm-home .verhaal-band { padding: 96px 0; }
.cm-home .verhaal {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.cm-home .verhaal__foto {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 42% 50%;
  border-radius: 4px;
}
.cm-home .verhaal__quote { margin: 0; }
.cm-home .verhaal__quote p {
  margin: 0 0 20px;
  font-size: clamp(1.8rem, 3.3vw, 2.7rem);
  line-height: 1.12;
  text-indent: -0.4em;
  text-wrap: balance;
}
.cm-home .verhaal__quote footer { font-weight: 700; color: var(--tekst-2); }
.cm-home .verhaal__meer { display: flex; gap: 24px; flex-wrap: wrap; margin: 28px 0 0; }
.cm-home .verhaal__meer a {
  font-weight: 700; color: var(--op-vlak);
  text-decoration-thickness: 2px; text-decoration-color: var(--wb-goud); text-underline-offset: 4px;
}

/* ── Slot ─────────────────────────────────────────────────── */
/* Een losse donkere kaart met de gloed van linksboven, met ruimte
   eronder: de footer is een ander blok en moet zo ook lezen. */
.cm-home .slot { padding: 96px 0; }
.cm-home .slot__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
  color: var(--op-vlak-om);
  background: var(--cm-dark-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  border-radius: 16px;
}
/* Drie klassen diep, anders wint de zijmarge van .wrap uit styles.css. */
.cm-home .slot .slot__grid.wrap {
  width: calc(100% - 48px);
  max-width: calc(var(--cm-content-w) - 48px);
  padding: 64px;
}
.cm-home .slot__zelf { padding-top: 24px; }
.cm-home .slot__zelf h2 { color: var(--op-vlak-om); margin: 0 0 12px; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1.02; }
.cm-home .slot__zelf > p { margin: 0 0 28px; font-size: 1.15rem; color: #e3eeec; }
.cm-home .slot__checks { margin: 0 0 32px; padding: 0; list-style: none; }
.cm-home .slot__checks li {
  display: flex; gap: 12px; padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  color: #e6efed;
}
.cm-home .slot__checks li:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.cm-home .slot__checks li::before { content: "✓"; color: var(--wb-goud); font-weight: 700; }
.cm-home .slot__bel {
  display: block; margin-top: 18px; width: fit-content;
  color: #e3eeec; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px;
}
.cm-home .slot__bel:hover { color: var(--op-vlak-om); text-decoration-color: var(--wb-wit); }

.cm-home .slot__gesprek { background: var(--vlak); color: var(--op-vlak); border-radius: 6px; overflow: hidden; }
.cm-home .slot__foto { width: 100%; height: 180px; object-fit: cover; object-position: 64% 22%; }
.cm-home .slot__formulier { padding: 28px 32px 32px; }
.cm-home .slot__formulier h2 { color: var(--op-vlak); margin: 0 0 6px; font-size: 1.6rem; line-height: 1.15; }
.cm-home .slot__formulier > p { margin: 0 0 20px; color: var(--tekst-2); }
.cm-home .slot .cm-field__label { font-family: var(--cm-font); color: var(--op-vlak); font-weight: 700; }
.cm-home .slot .cm-field__opt { color: var(--tekst-3); }
.cm-home .slot .cm-qualify__form input,
.cm-home .slot .cm-qualify__form select,
.cm-home .slot .cm-qualify__form textarea {
  border: 1px solid var(--wb-staal);
  border-radius: 4px;
  background: var(--vlak);
  color: var(--op-vlak);
}
.cm-home .slot .cm-qualify__form input:focus-visible,
.cm-home .slot .cm-qualify__form select:focus-visible,
.cm-home .slot .cm-qualify__form textarea:focus-visible { outline: 3px solid var(--wb-goud); outline-offset: 0; border-color: var(--op-vlak); }


/* ── Klein scherm ─────────────────────────────────────────── */
@media (max-width: 980px) {
  .cm-home .wb { grid-template-columns: 1fr; gap: 40px; padding-top: 32px; }
  .cm-home .regelt { padding: 64px 0; }
  .cm-home .regelt__grid,
.cm-home .slot__grid { grid-template-columns: 1fr; gap: 32px; }
  .cm-home .regelt__kop { position: static; }
  .cm-home .regelt__aap { width: 88px; margin: 0 0 -6px -4px; }
  .cm-home .verhaal { grid-template-columns: 1fr; gap: 32px; }
  .cm-home .verhaal__foto { aspect-ratio: 3 / 2; order: 2; }
  .cm-home .slot { padding: 64px 0; }
  .cm-home .verhaal-band { padding: 64px 0; }
  .cm-home .slot .slot__grid.wrap { padding: 40px 28px; }
  .cm-home .slot__zelf { padding-top: 0; }
}
@media (max-width: 700px) {
  .cm-home .rij { grid-template-columns: 1fr; gap: 14px; }
  .cm-home .rij__bord:not(.rij__bord--logos) { flex-direction: row; flex-wrap: wrap; }
  .cm-home .slot__formulier { padding: 24px 20px 24px; }
  .cm-home .slot .slot__grid.wrap { width: calc(100% - 32px); padding: 28px 16px; }
}
@media (max-width: 560px) {
  .cm-home .wb__sub { font-size: 1.1rem; }
}


/* ── 7.7 Prijzen ──────────────────────────────────────────── */
/* De pakketten als menukaart: onder elkaar, naam en prijs verbonden met
   een stippellijn zoals op een kaart. Alles onder body.cm-prijzen. */
.cm-prijzen .pk-intro { padding: 64px 24px 32px; }
.cm-prijzen .pk-intro h1 {
  margin: 0 0 12px;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.cm-prijzen .pk-intro__sub { margin: 0; font-size: 1.2rem; color: var(--tekst-2); }

.cm-prijzen .pk-kaart-sectie { padding-bottom: 72px; }
.cm-prijzen .pk-kaart {
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 6px;
  padding: 12px 40px 32px;
}

/* Naam ..... prijs */
.cm-prijzen .pk-regel {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.cm-prijzen .pk-naam { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cm-prijzen .pk-punten {
  flex: 1;
  min-width: 24px;
  border-bottom: 3px dotted var(--wb-staal);
  transform: translateY(-6px);
}
.cm-prijzen .pk-prijs { white-space: nowrap; }
.cm-prijzen .pk-prijs small {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tekst-2);
}
.cm-prijzen .pk-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  padding: 4px 10px;
  border-radius: var(--cm-radius-pil);
  background: var(--wb-goud);
  color: var(--op-goud);
}

/* Elke regel is even groot en loopt tot de rand van de kaart, zodat er
   niets verspringt als de keuze verandert. De gloed ligt op een laag
   eronder: een verloop kan niet overvloeien, een laag kan dat wel. */
.cm-prijzen .pk-gerecht {
  position: relative;
  isolation: isolate;
  margin: 0 -40px;
  padding: 32px 40px;
  border-bottom: 1px solid var(--lijn);
  cursor: pointer;
  transition: color .25s ease;
}
.cm-prijzen .pk-gerecht::before {
  content: "";
  position: absolute; inset: -1px 0 0;
  z-index: -1;
  background: var(--cm-dark-card);
  opacity: 0;
  transition: opacity .3s ease;
}
.cm-prijzen .pk-gerecht:hover:not(.is-chosen) { background: var(--vlak-tint-1); }
.cm-prijzen .pk-gerecht:focus-visible { outline: 3px solid var(--op-vlak); outline-offset: -3px; }
.cm-prijzen .pk-gerecht.is-chosen:focus-visible { outline-color: var(--wb-goud); }
.cm-prijzen .pk-lijf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: end;
  margin-top: 14px;
}
.cm-prijzen .pk-voor { margin: 0 0 14px; font-size: 1.1rem; color: var(--tekst-2); max-width: 52ch; }
.cm-prijzen .pk-plus { margin: 0 0 8px; font-weight: 700; color: var(--op-vlak); }
.cm-prijzen .pk-wat {
  margin: 0; padding: 0; list-style: none;
  columns: 2; column-gap: 32px;
}
.cm-prijzen .pk-wat li {
  break-inside: avoid;
  display: flex; gap: 8px;
  padding: 3px 0;
  color: var(--tekst-1);
}
.cm-prijzen .pk-wat li::before { content: "✓"; font-weight: 700; color: var(--op-vlak); }
.cm-prijzen .pk-actie { display: grid; gap: 12px; }
.cm-prijzen .pk-actie .cm-btn { text-align: center; }
/* De jaardeal op de King-kaart staat geparkeerd: de regel is uit de
   pagina gehaald (Yari, 24 sep, "we gaan dat voor nu niet doen"). De
   opmaak blijft staan voor als het terugkomt; niets gebruikt hem nu. */
.cm-prijzen .pk-jaar {
  margin: 0; padding: 10px 12px;
  border-radius: 4px; background: var(--vlak-accent);
  font-size: 0.95rem; color: var(--op-vlak);
}

/* Het kroontje bij King. Goud uit het logo met een inktlijn, zodat het
   op wit en op de donkere band even goed leest. Kiest iemand King, dan
   tikt het één keer aan: beweging die antwoordt op een klik. */
.cm-prijzen .pk-kroon {
  width: 1.2em; height: auto;
  margin-left: -6px;   /* .pk-naam heeft 12px tussenruimte; zo staat hij tegen het woord */
  transform: translateY(-0.28em) rotate(-10deg);
  transform-origin: 50% 90%;
  overflow: visible;
}
.cm-prijzen .pk-kroon__lijf,
.cm-prijzen .pk-kroon__band,
.cm-prijzen .pk-kroon__bol {
  fill: var(--wb-goud);
  stroke: var(--wb-inkt);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.cm-prijzen .pk-kroon__steen { fill: var(--wb-inkt); }
.cm-prijzen .is-chosen .pk-kroon__lijf,
.cm-prijzen .is-chosen .pk-kroon__band,
.cm-prijzen .is-chosen .pk-kroon__bol { stroke: var(--wb-diep); }
@media (prefers-reduced-motion: no-preference) {
  .cm-prijzen .is-chosen .pk-kroon { animation: pk-kroon-tik .5s cubic-bezier(.3,1.6,.5,1); }
}
@keyframes pk-kroon-tik {
  0%   { transform: translateY(-0.28em) rotate(-10deg); }
  40%  { transform: translateY(-0.45em) rotate(8deg); }
  100% { transform: translateY(-0.28em) rotate(-10deg); }
}

/* Het chosen pakket: de donkere band met de gloed. */
.cm-prijzen .pk-gerecht.is-chosen { color: var(--op-vlak-om); border-bottom-color: transparent; }
.cm-prijzen .pk-gerecht.is-chosen::before { opacity: 1; }
.cm-prijzen .is-chosen .pk-regel { color: var(--op-vlak-om); }
.cm-prijzen .is-chosen .pk-punten { border-bottom-color: rgba(255,255,255,.35); }
.cm-prijzen .is-chosen .pk-prijs small,
.cm-prijzen .is-chosen .pk-voor { color: #e3eeec; }
.cm-prijzen .is-chosen .pk-plus,
.cm-prijzen .is-chosen .pk-wat li { color: var(--op-vlak-om); }
.cm-prijzen .is-chosen .pk-wat li::before { color: var(--wb-goud); }
.cm-prijzen .is-chosen .pk-jaar { background: rgba(255,255,255,.1); color: var(--op-vlak-om); }

/* De voet van de kaart, zoals "bij alle gerechten" onderaan een menu.
   Een eigen getinte strook over de volle breedte en gecentreerd: zonder
   dat las hij als een onderdeel van het pakket erboven (King). */
.cm-prijzen .pk-kaart { padding-bottom: 0; overflow: hidden; }
.cm-prijzen .pk-bij {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 8px 28px;
  margin: 0 -40px;
  padding: 22px 40px 24px;
  background: var(--vlak-tint-5);
  text-align: center;
}
.cm-prijzen .pk-bij__kop { flex-basis: 100%; margin: 0; font-weight: 800; color: var(--op-vlak); }
.cm-prijzen .pk-bij ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 20px; margin: 0; padding: 0; list-style: none;
}
.cm-prijzen .pk-bij li { display: flex; gap: 8px; color: var(--tekst-1); font-size: 0.95rem; }
.cm-prijzen .pk-bij li::before { content: "✓"; font-weight: 700; color: var(--op-vlak); }
.cm-prijzen .pk-gerecht:last-of-type { border-bottom: 0; }

/* Bewijs en keuzehulp */
.cm-prijzen .pk-kiezen {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 64px;
  align-items: start;
  padding-bottom: 96px;
}
.cm-prijzen .pk-quote { margin: 0; }
.cm-prijzen .pk-quote blockquote { margin: 0 0 16px; }
.cm-prijzen .pk-quote p {
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-indent: -0.4em;
  color: var(--op-vlak);
  text-wrap: balance;
}
.cm-prijzen .pk-quote figcaption { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 700; color: var(--tekst-2); }
.cm-prijzen .pk-quote a,
.cm-prijzen .pk-hulp a {
  color: var(--op-vlak); font-weight: 700;
  text-decoration-thickness: 2px; text-decoration-color: var(--wb-goud); text-underline-offset: 4px;
}
.cm-prijzen .pk-hulp h2 { margin: 0 0 12px; font-size: 1.6rem; }
.cm-prijzen .pk-hulp dl { margin: 0 0 16px; }
.cm-prijzen .pk-hulp dl div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-top: 1px solid var(--lijn);
}
.cm-prijzen .pk-hulp dl div:last-child { border-bottom: 1px solid var(--lijn); }
.cm-prijzen .pk-hulp dt { color: var(--tekst-1); }
.cm-prijzen .pk-hulp dd { margin: 0; font-weight: 800; color: var(--op-vlak); white-space: nowrap; }
.cm-prijzen .pk-hulp > p { margin: 0; color: var(--tekst-2); }
.cm-prijzen .pk-kies {
  font: inherit; font-weight: 800; color: var(--op-vlak);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud); text-underline-offset: 4px;
}
.cm-prijzen .pk-kies:hover { text-decoration-color: var(--wb-inkt); }
@media (prefers-reduced-motion: reduce) {
  .cm-prijzen .pk-gerecht, .cm-prijzen .pk-gerecht::before { transition: none; }
}

/* Uitbreidingen als extra's op de kaart */
.cm-prijzen .pk-extras { padding-top: 96px; padding-bottom: 72px; }
.cm-prijzen .pk-extras__lijst {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
  margin: 0; padding: 0; list-style: none;
}
.cm-prijzen .pk-extra { padding: 16px 0; border-top: 1px solid var(--lijn); }
.cm-prijzen .pk-regel--klein { font-size: 1.15rem; letter-spacing: -0.01em; gap: 10px; }
.cm-prijzen .pk-regel--klein .pk-punten { border-bottom-width: 2px; transform: translateY(-4px); }
.cm-prijzen .pk-extra p { margin: 6px 0 0; color: var(--tekst-2); }

@media (max-width: 900px) {
  .cm-prijzen .pk-kaart { padding: 4px 20px 0; }
  .cm-prijzen .pk-bij { margin: 0 -20px; padding: 20px; }
  .cm-prijzen .pk-gerecht { margin: 0 -20px; padding: 28px 20px; }
  .cm-prijzen .pk-lijf, .cm-prijzen .pk-kiezen { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .cm-prijzen .pk-extras__lijst { grid-template-columns: minmax(0, 1fr); }
  .cm-prijzen .pk-kiezen { gap: 48px; padding-bottom: 64px; }
  .cm-prijzen .pk-extras { padding-top: 64px; }
}
@media (max-width: 560px) {
  .cm-prijzen .pk-regel { font-size: 1.5rem; flex-wrap: wrap; }
  .cm-prijzen .pk-punten { display: none; }
  .cm-prijzen .pk-prijs { width: 100%; }
  .cm-prijzen .pk-regel--klein { font-size: 1.05rem; flex-wrap: nowrap; }
  .cm-prijzen .pk-regel--klein .pk-punten { display: block; }
  .cm-prijzen .pk-regel--klein .pk-prijs { width: auto; }
  .cm-prijzen .pk-wat { columns: 1; }
  .cm-prijzen .pk-hulp dl div { flex-direction: column; gap: 2px; }
  .cm-prijzen .pk-bij { justify-content: flex-start; text-align: left; }
  .cm-prijzen .pk-bij ul { flex-direction: column; }
}


/* ── 7.8 Het bord ─────────────────────────────────────────── */
/* De planning aan de keukenmuur (bord.py, bord.js). Staat op de
   homepage en op elke doelgroeppagina. Een emaille bord in een donkere
   lijst. De lijst heeft de gloed van de footer en de slot-CTA
   (--cm-dark-card, licht van linksboven), zodat het bord bij de rest
   van de site hoort; daarvoor was het aluminium, en dat was het enige
   materiaal op de site dat verder nergens terugkwam (Yari, 17 sep). */
.bd {
  position: relative;
  padding: 13px;
  border-radius: 8px;
  background: var(--cm-dark-card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 18px 40px -18px rgba(15, 58, 63, .45);
  font-family: var(--cm-font);
  text-align: left;
}
.bd__vlak { background: var(--vlak); border-radius: 2px; padding: 18px 18px 14px; }
.bd__kop {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 0 0 14px;
  font-weight: 700; font-size: 0.95rem; color: var(--op-vlak);
}
.bd__kop { white-space: nowrap; }
.bd__kop span { font-weight: 500; color: var(--tekst-3); text-align: right; white-space: normal; }
.bd__kolommen { display: grid; grid-template-columns: repeat(var(--kolommen, 4), minmax(0, 1fr)); }
.bd-kolom { padding: 0 8px; min-height: 200px; }
.bd-kolom + .bd-kolom { border-left: 1px solid var(--lijn); }
.bd-kolom:first-child { padding-left: 0; }
.bd-kolom:last-child { padding-right: 0; }
.bd-kolom__kop { margin: 0 0 10px; font-size: 0.85rem; font-weight: 700; color: var(--op-vlak); }
.bd-kolom__kop span { font-weight: 400; color: var(--tekst-3); }

/* Een magneetstrip. Volle kleur, geen witte kaart met een randje. */
.bd-strip {
  display: block; width: 100%;
  margin: 0 0 8px; padding: 8px 9px 9px;
  border: 0; border-radius: 4px;
  font: inherit; text-align: left; color: var(--op-vlak-om);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 2px 3px rgba(15,58,63,.18);
}
button.bd-strip { cursor: pointer; }
.bd-strip b { display: block; hyphens: auto; overflow-wrap: normal; font-size: 0.86rem; line-height: 1.2; font-weight: 700; }
/* De subregel staat op volle sterkte: het verschil met de titel zit in de
   maat, niet in doorschijnendheid. Op een licht vlak vrat die laatste net
   het contrast weg dat de donkere letter moest opbrengen. */
.bd-strip small { display: block; margin-top: 2px; font-size: 0.74rem; line-height: 1.25; }
.bd-strip--inkt small { opacity: .88; }
/* Lichte vlakken worden bij hover donkerder, niet lichter: oplichten liep
   op de pastels dood in het wit. */
button.bd-strip:hover { filter: brightness(.955) saturate(1.06); }
.bd-strip[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--wb-wit), 0 0 0 4px var(--wb-inkt); }
.bd-strip:focus-visible { outline: 3px solid var(--op-vlak); outline-offset: 2px; }
/* Elke kleur draagt zijn eigen letter: een donkere tint uit dezelfde
   familie als het vlak, zoals in de app. Alleen inkt draagt nog wit. */
.bd-strip--rood  { background: var(--wb-rood);  color: var(--wb-rood-op); }
.bd-strip--blauw { background: var(--wb-blauw); color: var(--wb-blauw-op); }
.bd-strip--groen { background: var(--wb-groen); color: var(--wb-groen-op); }
.bd-strip--geel  { background: var(--wb-geel);  color: var(--wb-geel-op); }
.bd-strip--inkt  { background: var(--vlak-om); }
/* Een optie ligt nog niet vast: een omtrek in plaats van een vlak. */
.bd-strip--optie { background: var(--vlak); color: var(--op-vlak); box-shadow: inset 0 0 0 2px var(--wb-inkt); }
.bd-strip--optie b { font-weight: 700; }
.bd-strip--optie[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--wb-inkt), 0 0 0 2px var(--wb-wit), 0 0 0 4px var(--wb-inkt); }
/* De gewone zaak (service, toonbank, winkel): staat er altijd, niet klikbaar. */
.bd-strip--vast { background: var(--vlak-tint-7); color: var(--op-vlak); box-shadow: none; }
.bd-strip--vast small { opacity: .75; }
/* Net veranderd: de onderregel licht even goud op. */
.bd-strip--gewijzigd small {
  opacity: 1;
  animation: bd-gewijzigd 1.8s ease-in 1.2s both;
  border-radius: 3px;
}
@keyframes bd-gewijzigd {
  0%   { background: var(--wb-goud); color: var(--op-goud); box-shadow: 0 0 0 3px var(--wb-goud); }
  100% { background: transparent; box-shadow: 0 0 0 3px transparent; }
}

/* Hoe ver de chosen opdracht is. Vaste hoogte, zodat het bord niet
   verspringt als je een andere strip kiest. */
.bd__route { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--lijn); min-height: 74px; }
.bd__route-kop { margin: 0 0 8px; font-size: 0.9rem; font-weight: 700; color: var(--op-vlak); }
.bd__stappen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bd__stappen li {
  padding: 3px 9px 4px; border-radius: var(--cm-radius-pil);
  font-size: 0.78rem; font-weight: 500;
  color: var(--op-vlak); background: var(--vlak-tint-4);
}
.bd__stappen li.klaar { background: var(--vlak-om); color: var(--op-vlak-om); }
.bd__stappen li.nieuw { background: var(--wb-goud); color: var(--op-goud); font-weight: 700; }

/* De lijst onderaan het bord, waar de stiften liggen: wat de kleuren betekenen. */
.bd__richel {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: 10px 4px 0; padding: 0; list-style: none;
  font-size: 0.78rem; font-weight: 500; color: #cfdedb;
}
.bd__richel li { display: flex; align-items: center; gap: 6px; }
.bd-kleur { width: 18px; height: 6px; border-radius: 2px; }
.bd-kleur--rood  { background: var(--wb-rood); }
.bd-kleur--blauw { background: var(--wb-blauw); }
.bd-kleur--groen { background: var(--wb-groen); }
.bd-kleur--geel  { background: var(--wb-geel); }
.bd-kleur--inkt  { background: var(--vlak-om); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.bd-kleur--optie { background: transparent; box-shadow: inset 0 0 0 1.5px var(--wb-inkt); }
.bd-kleur--vast  { background: var(--vlak-tint-7); box-shadow: inset 0 0 0 1.5px #9aa8a5; }

/* De beweging (bord.js): de strips zakken op het bord, de stappen komen
   er één voor één bij, en bij een wijziging lopen ze één voor één mee.
   Alles met dezelfde zachte uitloop, zodat het als één beweging leest. */
@media (prefers-reduced-motion: no-preference) {
  .bd-strip {
    transition:
      opacity .45s ease,
      transform .6s cubic-bezier(.2, .9, .3, 1.12),
      box-shadow .3s ease,
      filter .15s ease;
  }
  .bd.laadt .bd-strip { opacity: 0; transform: translateY(-14px) scale(.97); }
  button.bd-strip:hover { transform: translateY(-1px); }
  .bd-strip[aria-pressed="true"] { transform: translateY(-1px); }

  .bd__route-kop.komt { animation: bd-komt .4s ease both; }
  .bd__stappen li.komt { animation: bd-komt .42s cubic-bezier(.2, .9, .3, 1) both; }
  .bd__stappen li { transition: background-color .3s ease, color .3s ease; }
  .bd__stappen li.flipt { animation: bd-flipt .45s cubic-bezier(.3, 1.5, .5, 1); }
}
@keyframes bd-komt {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bd-flipt {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
/* Terwijl het getal optelt, licht de onderregel goud op. */
.bd-strip small.telt {
  opacity: 1;
  border-radius: 3px;
  background: var(--wb-goud);
  color: var(--op-goud);
  box-shadow: 0 0 0 3px var(--wb-goud);
  font-variant-numeric: normal;
}
@media (prefers-reduced-motion: reduce) {
  .bd-strip--gewijzigd small { animation: none; }
}

/* Op een doelgroeppagina staat het bord in de hero-kolom. */
.cm-hero__bord { width: 100%; }

@media (max-width: 560px) {
  .bd__kolommen { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .bd-kolom { min-height: 0; }
  .bd-kolom:nth-child(odd) { padding-left: 0; border-left: 0; }
  .bd-kolom:nth-child(even) { padding-right: 0; }
  .bd-kolom:nth-child(odd):last-child { grid-column: 1 / -1; }
}


/* ── 7.9 Functiepagina's ──────────────────────────────────── */
/* Lange uitleg leest links, in één kolom van leesbare breedte. Heeft de
   pagina een beeld, dan staat dat rechts en schuift het mee terwijl je
   leest. In de HTML staat het beeld vóór de tekst, zodat het op een
   telefoon direct na de intro komt. Onderdelen, rollen en de knop lopen
   onderaan over de volle breedte. Was tot sep 2026 alles gecentreerd. */
.cm-functiepagina .cm-feature { padding: 24px 24px 0; }
.cm-functiepagina .cm-feature__head,
.cm-functiepagina .cm-feature__body { max-width: 64ch; margin: 0; text-align: left; }
.cm-functiepagina .cm-feature__head h1 {
  margin: 12px 0 16px;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
}
.cm-functiepagina .cm-feature__lede { margin-bottom: 32px; }
.cm-functiepagina .cm-feature__body { padding-bottom: 8px; }
.cm-functiepagina .cm-feature__body > :first-child { margin-top: 0; }

/* De uitleg las als één grijze baan. Twee oorzaken, allebei hier opgelost
   (sep 2026). Het alineagat was 14px tegen een regelafstand van bijna 28px:
   kleiner dan één regel, dus de alinea's liepen in elkaar over. En er stond
   niets boven de tekst: de vinkjes en het proza begonnen zonder kopje, dus
   het oog had geen enkel aanknopingspunt. De tussenkoppen zitten nu in de
   data (als **kop**); hier staat alleen hun maat. Kleiner dan de oude 1,5rem,
   want vier koppen van die maat in een kolom van 64 tekens roepen harder dan
   de tekst eronder. */
.cm-functiepagina .cm-feature__body p { margin-bottom: 24px; }
.cm-functiepagina .cm-feature__body h2 { font-size: 1.2rem; margin: 44px 0 12px; }
.cm-functiepagina .cm-feature__kort { margin-bottom: 14px; }

.cm-functiepagina .cm-feature--beeld {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "head beeld"
    "body beeld";
  grid-template-rows: auto 1fr;
  column-gap: 56px;
  align-items: start;
}
.cm-functiepagina .cm-feature--beeld .cm-feature__head { grid-area: head; }
.cm-functiepagina .cm-feature--beeld .cm-feature__body { grid-area: body; }
.cm-functiepagina .cm-feature--beeld > .cm-parts,
.cm-functiepagina .cm-feature--beeld > .cm-roles,
.cm-functiepagina .cm-feature--beeld > .cm-cta-row { grid-column: 1 / -1; }
.cm-functiepagina .cm-feature__beeld {
  grid-area: beeld;
  position: sticky;
  top: 24px;
  padding-top: 12px;
}
.cm-functiepagina .cm-feature__beeld .cm-shot { margin: 0; }
.cm-functiepagina .cm-feature__beeld .cm-shot img { width: 100%; }
.cm-functiepagina .cm-shot figcaption { text-align: left; }
.cm-functiepagina .cm-shot--tussen { margin: 36px 0 8px; }
/* Een kader met vaste verhouding wordt in een smallere kolom lager, en
   dan valt de onderkant van een hoge tekening weg. Hier groeit het mee. */
.cm-functiepagina .cm-shot--tekening .cm-art { aspect-ratio: auto; min-height: 360px; }

/* Vinkjes weer in de kantlijn, nu de tekst links staat. */
.cm-functiepagina .cm-checks li { padding-left: 28px; }
.cm-functiepagina .cm-checks li::before { position: absolute; left: 0; top: 10px; margin: 0; }

.cm-functiepagina .cm-roles { padding-top: 56px; }

@media (max-width: 980px) {
  .cm-functiepagina .cm-feature--beeld {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "beeld" "body";
  }
  .cm-functiepagina .cm-feature__beeld { position: static; padding: 0 0 32px; }
}

/* ── 7.10 Klantverhalen ───────────────────────────────────── */
/* Het verhaal links in één kolom, rechts een kaart die meeschuift: wat
   de klant zegt, in het kort, wat voor zaak het is, en de knop. Het
   bewijs en de actie staan zo naast het lezen, niet pas onderaan. */
.cm-case.cm-case--kaart.wrap {
  max-width: var(--cm-content-w);
  margin-left: auto; margin-right: auto;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: 56px;
  align-items: start;
}
.cm-case__tekst { max-width: 68ch; }
.cm-case--kaart h1 { font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1.05; }
.cm-case__kaart {
  position: sticky; top: 24px;
  margin-top: 12px;
  padding: 28px;
  border-radius: 6px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
}
.cm-case__kaart blockquote { margin: 0 0 24px; padding: 0; border: 0; }
.cm-case__kaart blockquote p {
  margin: 0 0 12px;
  font-family: var(--cm-font);
  font-size: 1.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em;
  text-indent: -0.4em;
  color: var(--op-vlak);
}
.cm-case__kaart blockquote cite { font-style: normal; font-weight: 700; color: var(--tekst-2); }
.cm-case__kaart .cm-kort { margin: 0 0 20px; padding: 16px 0 0; border-top: 1px solid var(--lijn); background: none; border-radius: 0; }
.cm-case__kaart .cm-kort h2 { font-family: var(--cm-font); font-size: 1rem; margin: 0 0 8px; }
.cm-case__kaart .cm-kort ul { padding-left: 0; list-style: none; }
.cm-case__kaart .cm-kort li { display: flex; gap: 8px; margin-bottom: 4px; color: var(--tekst-1); }
.cm-case__kaart .cm-kort li::before { content: "✓"; font-weight: 700; color: var(--op-vlak); }
.cm-case__soort { margin: 0 0 20px; font-weight: 700; }
.cm-case__kaart > p { margin: 0 0 14px; color: var(--tekst-2); line-height: 1.5; }
.cm-case__kaart > .cm-case__kaartkop { font-weight: 800; color: var(--op-vlak); font-size: 1.15rem; }
.cm-case__contact a,
.cm-case__kaart .cm-case__soort a { font-weight: 700; color: var(--op-vlak); }
.cm-case__soort a {
  color: var(--op-vlak);
  text-decoration-thickness: 2px; text-decoration-color: var(--wb-goud); text-underline-offset: 4px;
}
.cm-case__actie { padding-top: 16px; border-top: 1px solid var(--lijn); }
.cm-case__actie p { margin: 0 0 14px; color: var(--tekst-2); line-height: 1.5; }
@media (max-width: 980px) {
  .cm-case.cm-case--kaart.wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cm-case__kaart { position: static; margin-top: 0; }
}

/* ── 7.11 Koppelingen ─────────────────────────────────────── */
/* Op een integratiedetail staat rechts in de kop wat de koppeling doet:
   Catermonkey, het pakket, en een lijn die zegt wat er welke kant op
   gaat (build-integrations.py, RICHTING). Er loopt één keer een stip
   over de lijn, in de richting van de gegevens. */
.cm-intg-hero.cm-intg-hero--schema {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}
/* figure.kp, niet .kp: de demo op de oplossingenpaginas gebruikt .kp al
   voor het kostprijsregeltje, en kreeg anders dit hele kaartje mee. */
figure.kp {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(90px, 1fr) minmax(0, 1.25fr);
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 28px 24px;
  border-radius: 6px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
}
/* Het vak volgt --vlak: wit in het licht, zodat de witte achtergrond die
   in bijna elk merklogo gebakken zit wegvalt in plaats van als
   rechthoek op te vallen. In het donker doen omkeren en lighten dat
   werk al (zie sectie 11), dus daar mag het vak gewoon donker zijn.
   Een haarlijn houdt het vak zichtbaar zonder eigen vulling. */
.kp__kant {
  display: grid; place-items: center;
  min-height: 84px; padding: 12px;
  border-radius: 6px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
}
.kp__kant--cm { background: var(--vlak-om); border-color: var(--vlak-om); }
/* Een merk zonder bruikbaar logobestand staat als naam in het vak. */
.kp__naam { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--op-vlak); text-align: center; }
.kp__logo { max-width: 100%; max-height: 38px; width: auto; height: auto; object-fit: contain; }
/* Ons eigen logo is al wit en staat op het donkere vlak. De behandeling
   voor merklogos in het donker (omkeren, lighten, dempen) zou het juist
   onleesbaar maken. */
.kp__logo.kp__logo--cm { max-height: 24px; filter: none; mix-blend-mode: normal; opacity: 1; }
.kp__lijnen { display: grid; gap: 18px; }
.kp__lijn { position: relative; text-align: center; }
.kp__lijn span {
  display: block; margin-bottom: 6px;
  font-size: 0.8rem; font-weight: 700; line-height: 1.25; color: var(--op-vlak);
}
.kp__lijn i { position: relative; display: block; height: 2px; background: var(--vlak-om); }
/* De pijlpunt aan de kant waar de gegevens heen gaan. */
.kp__lijn--heen i::after,
.kp__lijn--terug i::after {
  content: ""; position: absolute; top: -5px;
  border: 6px solid transparent;
}
.kp__lijn--heen i::after  { right: -2px; border-left: 8px solid var(--op-vlak); border-right: 0; }
.kp__lijn--terug i::after { left: -2px; border-right: 8px solid var(--op-vlak); border-left: 0; }
.kp__lijn--los i { background: repeating-linear-gradient(90deg, var(--vlak-om) 0 6px, transparent 6px 10px); }
/* De stip die één keer meeloopt. */
.kp__lijn--heen i::before,
.kp__lijn--terug i::before {
  content: ""; position: absolute; top: -4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--wb-goud);
  box-shadow: 0 0 0 2px var(--wb-wit);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .kp__lijn--heen i::before  { animation: kp-heen 1.4s cubic-bezier(.4, 0, .2, 1) .6s 2; }
  .kp__lijn--terug i::before { animation: kp-terug 1.4s cubic-bezier(.4, 0, .2, 1) 1.2s 2; }
}
@keyframes kp-heen {
  0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; }
}
@keyframes kp-terug {
  0% { left: calc(100% - 10px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; }
}
@media (max-width: 900px) {
  .cm-intg-hero.cm-intg-hero--schema { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 560px) {
  figure.kp { padding: 20px 14px; gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(70px, 1fr) minmax(0, 1fr); }
  .kp__kant { min-height: 64px; padding: 8px; }
  .kp__kant--cm span { font-size: 0.85rem; text-align: center; hyphens: manual; }
}

/* ── 7.12 Blogposts ───────────────────────────────────────── */
/* Een lange post krijgt rechts een inhoudsopgave die meeschuift
   (build-blog.py, inhoud()). De tekst blijft één kolom van leesbare
   breedte. Op een telefoon valt de opgave weg: daar scrol je gewoon. */
.cm-post.cm-post--opgave {
  display: grid;
  grid-template-columns: minmax(0, 720px) minmax(0, 260px);
  grid-template-areas: "kop opgave" "body opgave" "cta opgave";
  grid-template-rows: auto auto 1fr;
  justify-content: space-between;
  column-gap: 56px;
  max-width: var(--cm-content-w);
  margin: 0 auto;
  padding: 0 24px;
}
.cm-post--opgave > .wrap.cm-post__kop,
.cm-post--opgave > .wrap.cm-post__body {
  width: auto; max-width: none; margin: 0; padding-left: 0; padding-right: 0;
}
/* De cta-rij raakt hier alleen de breedte en de marge van .wrap kwijt, niet
   haar eigen binnenmarge. Toen dit blok nog geen achtergrond had viel dat
   niet op; met een gekleurd vlak eronder stond de tekst tegen de rand. */
.cm-post--opgave > .cm-cta-row.wrap {
  width: auto; max-width: none; margin: 0;
}
.cm-post--opgave .cm-post__kop { grid-area: kop; }
.cm-post--opgave .cm-post__body { grid-area: body; }
.cm-post--opgave .cm-cta-row { grid-area: cta; align-self: start; }
.cm-post__opgave {
  grid-area: opgave;
  align-self: start;
  position: sticky; top: 24px;
  margin-top: 56px;
  padding: 20px 0 0;
  border-top: 3px solid var(--wb-goud);
}
.cm-post__opgave-kop { margin: 0 0 10px; font-weight: 800; color: var(--op-vlak); }
.cm-post__opgave ol { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.cm-post__opgave li { border-top: 1px solid var(--lijn); }
.cm-post__opgave a {
  display: block; padding: 8px 0;
  font-size: 0.92rem; line-height: 1.35;
  color: var(--tekst-1); text-decoration: none;
}
.cm-post__opgave a:hover {
  color: var(--op-vlak);
  text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud); text-underline-offset: 4px;
}
.cm-post__body h2[id] { scroll-margin-top: 24px; }
@media (max-width: 980px) {
  .cm-post.cm-post--opgave { display: block; }
  .cm-post__opgave { display: none; }
}

/* ── 7.13 Veelgestelde vragen ─────────────────────────────── */
/* Vijf thema's en 22 vragen: links een themalijst die meeschuift,
   rechts het zoekveld en de vragen. */
.cm-faq-page.cm-faq-page--nav.wrap {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  gap: 56px;
  align-items: start;
  max-width: var(--cm-content-w);
}
.cm-faq-nav { position: sticky; top: 24px; padding-top: 16px; border-top: 3px solid var(--wb-goud); }
.cm-faq-nav__kop { margin: 0 0 8px; font-weight: 800; color: var(--op-vlak); }
.cm-faq-nav ul { margin: 0 0 20px; padding: 0; list-style: none; }
.cm-faq-nav li { border-top: 1px solid var(--lijn); }
.cm-faq-nav li a { display: block; padding: 8px 0; color: var(--tekst-1); text-decoration: none; }
.cm-faq-nav li a:hover {
  color: var(--op-vlak); text-decoration: underline; text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud); text-underline-offset: 4px;
}
.cm-faq-nav__bel { margin: 0; font-size: 0.95rem; color: var(--tekst-2); }
.cm-faq-nav__bel a { font-weight: 700; color: var(--op-vlak); }
.cm-faq-group[id] { scroll-margin-top: 24px; }
@media (max-width: 900px) {
  .cm-faq-page.cm-faq-page--nav.wrap { display: block; }
  .cm-faq-nav { display: none; }
}

/* Over ons begint met het team: de kop is die van de pagina. */
.cm-team.cm-team--boven { padding-top: 56px; }
.cm-team--boven .cm-section-head h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 12px; }
.cm-about h2,
.cm-origin h2 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.05; margin: 0 0 16px; }

/* Het logo in de header: het woordmerk met het aapje. Hoogte bepaalt de
   maat; de breedte volgt (1297 x 197). */
.cm-logo__beeld { display: block; height: 30px; width: auto; }
.cm-header .cm-btn { white-space: nowrap; }
/* Tussen tablet en laptop is de balk krap: kleiner logo, minder ruimte
   tussen de menu-items, en de brochure valt weg (die staat ook in de footer). */
@media (max-width: 1120px) {
  .cm-logo__beeld { height: 26px; }
  .cm-header .cm-nav-links { gap: 18px; }
  .cm-header .cm-nav-utility[href$=".pdf"] { display: none; }
}
/* Het klantenmenu (560 breed) steekt dan rechts buiten beeld als het
   links onder zijn knop begint: hier staat het gecentreerd eronder. De
   knop blijft het ankerpunt, zodat de hoverbrug blijft werken. */
@media (max-width: 1120px) {
  .cm-header .cm-nav-menu--rows4 { left: 50%; transform: translate(-50%, -6px); }
  .cm-header .cm-nav-item.is-open .cm-nav-menu--rows4 { transform: translate(-50%, 0); }
}
@media (max-width: 1000px) {
  .cm-header .cm-nav-utility { display: none; }
  .cm-header .cm-nav-links { gap: 14px; }
}
@media (max-width: 560px) { .cm-logo__beeld { height: 24px; } }

/* ── Mobiel: niets breder dan het scherm ─────────────────────
   Gevonden met een controle die alle pagina's op 375px laadt en meldt
   waar iets uitsteekt. Staat onderaan, zodat het wint van de
   tweekoloms-regels hierboven. */
.cm-intg-hero > div { min-width: 0; }   /* anders duwt een lange kop (EenvoudigFactureren) de flexkolom breder */
@media (max-width: 900px) {
  /* 1fr groeit mee met een brede tabel in de tekst; minmax(0, 1fr) niet. */
  .cm-legal__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* Lange samenstellingen in grote koppen: netjes afbreken met een streepje.
     Alleen woorden vanaf 12 tekens, anders wordt ook "of-ferte" gesplitst
     terwijl dat woord gewoon op de volgende regel past. */
  h1, h2, h3 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
  .cm-feature-cards { grid-template-columns: minmax(0, 1fr); }
  /* Een tabel schuift binnen zichzelf, in plaats van de hele pagina breder te maken. */
  .cm-post__body table,
  .cm-legal__body table { display: block; overflow-x: auto; }
}

/* ============================================================
   8. KLIKVLAKKEN
   Gemeten op de homepage: 62 van de 117 klikbare dingen waren lager
   dan 44px, de maat die een vingertop nodig heeft. De tekst blijft
   staan waar hij staat; alleen het vlak eromheen groeit, en waar dat
   ruimte kost wordt die er met een negatieve marge weer afgehaald.
   In de footer staan de links in dichte lijstjes: daar is 24px de
   maat, genoeg om te raken zonder de kolommen uit te rekken.
   ============================================================ */

/* De kop. Op een smal scherm staan hier al ruimere regels in
   chrome-base.css (het uitklappaneel), die winnen van deze. */
.cm-nav-toggle,
.cm-nav-links > li > a,
.cm-nav-utility {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.cm-langswitch summary { min-height: 44px; }
.cm-nav-menu__foot { display: flex; align-items: center; min-height: 44px; }

/* Links in lopende tekst. De negatieve marges houden de witruimte
   precies zoals hij getekend is. */
.cm-home .rij__link,
.cm-home .verhaal__meer a {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
}
.cm-home .slot__bel {
  margin-top: 8px;
  margin-bottom: -10px;
  padding-block: 10px;
}

/* De footer: elke link is 44px hoog, de maat waarop een duim raak tikt.
   De ruimte tussen twee links zat eerst in de marge van het lijstitem, waar
   je niets kunt raken; die zit nu in de link zelf, plus de rest erbij. Dat
   maakt de kolommen langer, en dat is de prijs: 24px is de harde eis, 44 is
   wat prettig werkt. */
.cm-footer__col li { margin-bottom: 0; }
.cm-footer__col a,
.cm-footer__legal a {
  display: inline-block;
  padding-block: 11px;
}

/* ============================================================
   9. FORMULIERSTATEN
   Het formulier in het slot had geen fout- en geen eindbeeld. De fout
   staat onder het veld waar hij over gaat; het bedankt-blok neemt de
   plek van het formulier in, zodat het laatste wat je van de pagina
   ziet een antwoord is en geen leeg formulier.
   ============================================================ */

/* Het honeypot-veld: weg voor mensen, invulbaar voor een bot. */
.cm-form-vangnet {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cm-field__fout {
  margin: 2px 0 0;
  font-family: var(--cm-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--wb-rood-op);
}
.cm-home .slot .cm-qualify__form input.is-fout,
.cm-home .slot .cm-qualify__form textarea.is-fout {
  border-color: var(--wb-rood-op);
  border-width: 2px;
}

/* Alleen voor wat het hele formulier raakt: een mislukte verzending. */
.cm-form-melding {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 4px;
  border-left: 3px solid var(--wb-rood-op);
  background: var(--vlak-fout);
  font-family: var(--cm-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--wb-rood-op);
}
.cm-form-melding[hidden] { display: none; }

.cm-form-bedankt {
  padding: 24px 20px;
  border: 1px solid var(--lijn);
  border-radius: 6px;
  background: var(--grond);
}
.cm-form-bedankt:focus-visible { outline: 3px solid var(--wb-goud); outline-offset: 2px; }
.cm-form-bedankt h3 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--op-vlak);
}
.cm-form-bedankt p { margin: 0 0 6px; color: var(--tekst-2); }
.cm-form-bedankt__bel {
  display: inline-block;
  padding-block: 10px;
  font-weight: 700;
  color: var(--op-vlak);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud);
  text-underline-offset: 4px;
}

/* ============================================================
   10. OPKOMEN BIJ HET SCROLLEN
   De motion-laag van de homepage stond op transities alleen: alles
   wat je tegenkwam stond er al. Dit laat de blokken rustig opkomen
   op het moment dat ze in beeld schuiven. Geen JavaScript, net als
   het aapje in de regelt-sectie: de scroll zelf is de tijdlijn.
   Buiten beeld van de slot-sectie gehouden, want dat is de plek
   waar iemand converteert; die mag nooit op een animatie waitingen.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cm-home .cm-trust-curated__row,
    .cm-home .rij,
    .cm-home .cm-product__grid,
    .cm-home .verhaal {
      animation: cm-opkomen linear both;
      animation-timeline: view(block);
      animation-range: entry 10% entry 60%;
    }
  }
}
@keyframes cm-opkomen {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   11. DONKERE MODUS
   Alleen op pagina's die dit bestand laden, dus de heringerichte
   pagina's. De oude Divi-pagina's laden alleen chrome.css en blijven
   daarom licht, kop en footer incluis. Dat is een besluit van Yari:
   een donkere balk boven een wit Divi-vel is slechter dan niets.

   De selectors hieronder beginnen bewust niet met .cm-header of
   .cm-footer, want split-chrome-css kopieert zulke regels naar
   chrome.css en dan zouden ze alsnog op die 1569 pagina's landen.

   Waar de kleuren vandaan komen: niet uit een omzetting van de lichte
   set, maar uit een eigen ontwerp. De grond is neutraal bijna-zwart in
   plaats van de merk-teal, vlakken worden gescheiden door hairlines in
   plaats van door vulling, en het goud blijft het goud.
   ============================================================ */

:root {
  color-scheme: light;

  /* De donkere waarden staan hier één keer. De twee blokken eronder
     wijzen de rollen ernaartoe; die twee moeten gelijk blijven. */
  --d-grond:      #0d1011;
  --d-vlak:       #14181a;
  --d-vlak-op:    #191e20;
  --d-tekst:      #e8ecec;
  --d-tekst-2:    #9aa6a6;
  --d-lijn:       rgba(255,255,255,.08);
  --d-lijn-sterk: rgba(255,255,255,.14);
  --d-glim:       inset 0 1px 0 rgba(255,255,255,.06);

  /* Lichte waarden van de rollen die geen kleur zijn. Dit is wat de site
     nu doet, alleen met een naam erop. */
  --gloed:              none;
  --kaart-rand:         0;
  --kaart-glim:         none;
  --kop-gewicht:        800;
  --logo-filter:        none;
  --logo-meng:          normal;
  --logo-dekking:       1;
  --logo-dekking-hover: 1;
  --veld-vlak:          var(--wb-wit);
  --veld-rand:          var(--wb-staal);
  --strip-rood:  var(--wb-rood);  --strip-rood-rand: 0; --strip-rood-gloed: none; --strip-rood-op:  var(--wb-rood-op);
  --strip-blauw: var(--wb-blauw); --strip-blauw-rand: 0; --strip-blauw-gloed: none; --strip-blauw-op: var(--wb-blauw-op);
  --strip-groen: var(--wb-groen); --strip-groen-rand: 0; --strip-groen-gloed: none; --strip-groen-op: var(--wb-groen-op);
  --strip-geel:  var(--wb-geel);  --strip-geel-rand: 0; --strip-geel-gloed: none; --strip-geel-op:  var(--wb-geel-op);
  --strip-inkt:  var(--wb-inkt);  --strip-inkt-rand: 0;
  /* Het bolletje in de legenda draagt in het licht een wit ringetje,
     anders valt inkt op inkt weg tegen de rand van de kaart. */
  --strip-inkt-gloed: inset 0 0 0 1px rgba(255,255,255,.55); --strip-inkt-op: var(--wb-wit);
}

/* De donkere waarden gelden op twee manieren: omdat het systeem erom
   vraagt, of omdat de bezoeker het zelf heeft chosen. CSS kan een
   mediavraag niet met een selector combineren, dus staat de lijst twee
   keer. Verander je er een, verander dan ook de andere; alles wat kan
   verschillen staat als --d-waarde bovenin, dus hier staan alleen
   verwijzingen.
   [data-theme="light"] wint van het systeem: wie expliciet licht kiest,
   krijgt licht. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --vlak:       var(--d-vlak);
    --op-vlak:    var(--d-tekst);
    --vlak-om:    var(--d-vlak-op);
    --op-vlak-om: var(--d-tekst);
    --grond:      var(--d-grond);
    --tekst-2:    var(--d-tekst-2);
    --lijn:       var(--d-lijn);
    --op-goud:    var(--d-grond);
    --wb-staal:   var(--d-lijn-sterk);
    --wb-diep:    #0a0d0e;
    --cm-bg:      var(--d-vlak);
    --cm-bg-soft: var(--d-grond);
    --cm-text:    var(--d-tekst);
    --cm-muted:   var(--d-tekst-2);
    --cm-accent:  var(--d-tekst);
    --cm-border:  var(--d-lijn);
    --tekst-1: var(--d-tekst);
    --tekst-3: var(--d-tekst-2);
    --tekst-4: var(--d-tekst-2);
    --vlak-tint-1: rgba(255,255,255,.03);
    --vlak-tint-2: rgba(255,255,255,.03);
    --vlak-tint-3: rgba(255,255,255,.035);
    --vlak-tint-4: rgba(255,255,255,.05);
    --vlak-tint-5: rgba(255,255,255,.055);
    --vlak-tint-6: rgba(255,255,255,.07);
    --vlak-tint-7: rgba(255,255,255,.075);
    --vlak-tint-8: rgba(255,255,255,.09);
    --vlak-fout: rgba(214,122,126,.14);
    --vlak-accent: rgba(251,193,0,.10);
    --vlak-accent-zacht: rgba(251,193,0,.06);
    /* De zeven themakleuren zijn chosen voor wit papier. In het donker
       worden ze naar de lichte kant gemengd in plaats van per stuk
       opnieuw chosen; dan blijven de onderlinge verschillen staan. */
    --wb-raster:  radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px);
    /* Het opgetilde vlak is lichter dan de pagina, niet donkerder: zo
    houdt het slot zijn rol als eindpunt. */
    --cm-dark-card: linear-gradient(180deg, #1c2224 0%, var(--d-vlak-op) 100%);
    --gloed: radial-gradient(52% 60% at 22% 18%, rgba(33,112,122,.28) 0%, rgba(33,112,122,0) 70%);
    --kaart-rand: 1px solid var(--d-lijn);
    --kaart-glim: var(--d-glim);
    --kop-gewicht: 700;
    --logo-filter: grayscale(1) invert(1);
    --logo-meng: lighten;
    --logo-dekking: .62;
    --logo-dekking-hover: .9;
    --veld-vlak: rgba(0,0,0,.3);
    --veld-rand: var(--d-lijn-sterk);
        --strip-rood: rgba(214,122,126,.13); --strip-rood-rand: 1px solid rgba(214,122,126,.34); --strip-rood-gloed: inset 0 0 0 1px rgba(214,122,126,.34); --strip-rood-op: #f0b0b2;
        --strip-blauw: rgba(110,170,240,.12); --strip-blauw-rand: 1px solid rgba(110,170,240,.32); --strip-blauw-gloed: inset 0 0 0 1px rgba(110,170,240,.32); --strip-blauw-op: #a8ccf5;
        --strip-groen: rgba(130,210,120,.12); --strip-groen-rand: 1px solid rgba(130,210,120,.30); --strip-groen-gloed: inset 0 0 0 1px rgba(130,210,120,.30); --strip-groen-op: #abdba3;
        --strip-geel: rgba(240,185,100,.12); --strip-geel-rand: 1px solid rgba(240,185,100,.32); --strip-geel-gloed: inset 0 0 0 1px rgba(240,185,100,.32); --strip-geel-op: #e9c08a;
        --strip-inkt: rgba(255,255,255,.045); --strip-inkt-rand: 1px solid var(--d-lijn-sterk); --strip-inkt-gloed: inset 0 0 0 1px var(--d-lijn-sterk); --strip-inkt-op: #cfd8d8;
}

  :root:not([data-theme="light"]) .cm-header,
  :root:not([data-theme="light"]) .cm-footer,
  :root:not([data-theme="light"]) .cm-btn,
  :root:not([data-theme="light"]) .cm-nav-menu,
  :root:not([data-theme="light"]) .cm-langswitch__menu {
    --vlak:       var(--d-vlak);
    --op-vlak:    var(--d-tekst);
    --vlak-om:    var(--d-vlak-op);
    --op-vlak-om: var(--d-tekst);
    --grond:      var(--d-grond);
    --tekst-2:    var(--d-tekst-2);
    --lijn:       var(--d-lijn);
    --op-goud:    var(--d-grond);
    --cm-bg:      var(--d-vlak);
    --cm-bg-soft: var(--d-grond);
    --cm-text:    var(--d-tekst);
    --cm-muted:   var(--d-tekst-2);
    --cm-accent:  var(--d-tekst);
    --cm-border:  var(--d-lijn);
}
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --vlak:       var(--d-vlak);
  --op-vlak:    var(--d-tekst);
  --vlak-om:    var(--d-vlak-op);
  --op-vlak-om: var(--d-tekst);
  --grond:      var(--d-grond);
  --tekst-2:    var(--d-tekst-2);
  --lijn:       var(--d-lijn);
  --op-goud:    var(--d-grond);
  --wb-staal:   var(--d-lijn-sterk);
  --wb-diep:    #0a0d0e;
  --cm-bg:      var(--d-vlak);
  --cm-bg-soft: var(--d-grond);
  --cm-text:    var(--d-tekst);
  --cm-muted:   var(--d-tekst-2);
  --cm-accent:  var(--d-tekst);
  --cm-border:  var(--d-lijn);
  --tekst-1: var(--d-tekst);
  --tekst-3: var(--d-tekst-2);
  --vlak-tint-1: rgba(255,255,255,.03);
  --vlak-tint-2: rgba(255,255,255,.03);
  --vlak-tint-3: rgba(255,255,255,.035);
  --vlak-tint-4: rgba(255,255,255,.05);
  --vlak-fout: rgba(214,122,126,.14);
  --vlak-accent: rgba(251,193,0,.10);
  --vlak-accent-zacht: rgba(251,193,0,.06);
  --wb-raster:  radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.4px);
  /* Het opgetilde vlak is lichter dan de pagina, niet donkerder: zo
  houdt het slot zijn rol als eindpunt. */
  --cm-dark-card: linear-gradient(180deg, #1c2224 0%, var(--d-vlak-op) 100%);
  --gloed: radial-gradient(52% 60% at 22% 18%, rgba(33,112,122,.28) 0%, rgba(33,112,122,0) 70%);
  --kaart-rand: 1px solid var(--d-lijn);
  --kaart-glim: var(--d-glim);
  --kop-gewicht: 700;
  --logo-filter: grayscale(1) invert(1);
  --logo-meng: lighten;
  --logo-dekking: .62;
  --logo-dekking-hover: .9;
  --veld-vlak: rgba(0,0,0,.3);
  --veld-rand: var(--d-lijn-sterk);
      --strip-rood: rgba(214,122,126,.13); --strip-rood-rand: 1px solid rgba(214,122,126,.34); --strip-rood-gloed: inset 0 0 0 1px rgba(214,122,126,.34); --strip-rood-op: #f0b0b2;
      --strip-blauw: rgba(110,170,240,.12); --strip-blauw-rand: 1px solid rgba(110,170,240,.32); --strip-blauw-gloed: inset 0 0 0 1px rgba(110,170,240,.32); --strip-blauw-op: #a8ccf5;
      --strip-groen: rgba(130,210,120,.12); --strip-groen-rand: 1px solid rgba(130,210,120,.30); --strip-groen-gloed: inset 0 0 0 1px rgba(130,210,120,.30); --strip-groen-op: #abdba3;
      --strip-geel: rgba(240,185,100,.12); --strip-geel-rand: 1px solid rgba(240,185,100,.32); --strip-geel-gloed: inset 0 0 0 1px rgba(240,185,100,.32); --strip-geel-op: #e9c08a;
      --strip-inkt: rgba(255,255,255,.045); --strip-inkt-rand: 1px solid var(--d-lijn-sterk); --strip-inkt-gloed: inset 0 0 0 1px var(--d-lijn-sterk); --strip-inkt-op: #cfd8d8;
  --tekst-4: var(--d-tekst-2);
  --vlak-tint-5: rgba(255,255,255,.055);
  --vlak-tint-6: rgba(255,255,255,.07);
  --vlak-tint-7: rgba(255,255,255,.075);
  --vlak-tint-8: rgba(255,255,255,.09);
}

:root[data-theme="dark"] .cm-header,
:root[data-theme="dark"] .cm-footer,
:root[data-theme="dark"] .cm-btn,
:root[data-theme="dark"] .cm-nav-menu,
:root[data-theme="dark"] .cm-langswitch__menu {
  --vlak:       var(--d-vlak);
  --op-vlak:    var(--d-tekst);
  --vlak-om:    var(--d-vlak-op);
  --op-vlak-om: var(--d-tekst);
  --grond:      var(--d-grond);
  --tekst-2:    var(--d-tekst-2);
  --lijn:       var(--d-lijn);
  --op-goud:    var(--d-grond);
  --cm-bg:      var(--d-vlak);
  --cm-bg-soft: var(--d-grond);
  --cm-text:    var(--d-tekst);
  --cm-muted:   var(--d-tekst-2);
  --cm-accent:  var(--d-tekst);
  --cm-border:  var(--d-lijn);
}


/* De zeven themakleuren zijn chosen voor wit papier. In het donker worden
   ze naar de lichte kant gemengd in plaats van per stuk opnieuw chosen;
   dan blijven de onderlinge verschillen staan. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-post-card {
    --thema-tekst: color-mix(in oklab, var(--thema, var(--cm-accent)) 42%, #e8ecec);
  }
}
:root[data-theme="dark"] .cm-post-card {
  --thema-tekst: color-mix(in oklab, var(--thema, var(--cm-accent)) 42%, #e8ecec);
}

/* ── Wat een tokenwissel nog meer nodig heeft ─────────────── */
/* Alles hieronder loopt via tokens, ook de dingen die geen kleur zijn
   (een filter, een letterdikte, een gloed). Daardoor hoeft straks alleen
   het tokenblok dubbel te staan voor de knop, en niet deze hele sectie. */

.cm-home .wb { position: relative; }
.cm-home .wb::before {
  content: ""; position: absolute; inset: -30% -20% auto -20%; height: 720px;
  z-index: -1; pointer-events: none; background: var(--gloed);
}
body { background: var(--grond); }

/* Vlakken krijgen hun scheiding van een hairline, niet van vulling. */
.cm-home .slot__gesprek,
.cm-home .bd__vlak,
.cm-feature-card,
.cm-media-item,
.cm-prijzen .pk { border: var(--kaart-rand); box-shadow: var(--kaart-glim); }

/* Wit op donker oogt zwaarder, dus de koppen gaan daar een slag lichter. */
h1, h2, h3,
.cm-home .wb__kop, .cm-home .wb-h2, .cm-home .slot__zelf h2,
.cm-section-head h2, .cm-final-cta h2, .cm-case--kaart h1,
.cm-team--boven .cm-section-head h1, .cm-origin h2 { font-weight: var(--kop-gewicht); }

/* De bordstrips: in het licht een vol pastelvlak, in het donker een was
   van dezelfde kleur over de ondergrond. Volle donkere vlakken werden modder. */

.bd-strip--rood  { background: var(--strip-rood);  border: var(--strip-rood-rand);  color: var(--strip-rood-op); }
.bd-strip--blauw { background: var(--strip-blauw); border: var(--strip-blauw-rand); color: var(--strip-blauw-op); }
.bd-strip--groen { background: var(--strip-groen); border: var(--strip-groen-rand); color: var(--strip-groen-op); }
.bd-strip--geel  { background: var(--strip-geel);  border: var(--strip-geel-rand);  color: var(--strip-geel-op); }
.bd-strip--inkt  { background: var(--strip-inkt);  border: var(--strip-inkt-rand);  color: var(--strip-inkt-op); }
.bd-kleur--rood  { background: var(--strip-rood);  box-shadow: var(--strip-rood-gloed); }
.bd-kleur--blauw { background: var(--strip-blauw); box-shadow: var(--strip-blauw-gloed); }
.bd-kleur--groen { background: var(--strip-groen); box-shadow: var(--strip-groen-gloed); }
.bd-kleur--geel  { background: var(--strip-geel);  box-shadow: var(--strip-geel-gloed); }
.bd-kleur--inkt  { background: var(--strip-inkt);  box-shadow: var(--strip-inkt-gloed); }

/* Klantlogo's zijn gemaakt voor wit papier. */
/* Klantlogo's zijn gemaakt voor wit papier en komen in drie soorten: een
   woordmerk op doorzichtig, een woordmerk op een eigen wit vlak, en een
   gevuld badgelogo. Omkeren in plaats van wit maken werkt voor alle drie:
   de inkt wordt licht en de witte achtergrond wordt zwart. Met lighten
   erbij valt dat zwart weg tegen de pagina, dus blijft alleen het merk
   over. brightness(0) maakte van elk ondoorzichtig vlak een witte vlek. */
.cm-trust-curated__row img,
.rij__bord--logos img,
.cm-intg-card__logo,
.kp__logo {
  filter: var(--logo-filter);
  mix-blend-mode: var(--logo-meng);
  opacity: var(--logo-dekking);
}
.cm-trust-curated__row img:hover { opacity: var(--logo-dekking-hover); }

/* Invoervelden. */
.cm-home .slot .cm-qualify__form input,
.cm-home .slot .cm-qualify__form select,
.cm-home .slot .cm-qualify__form textarea { background: var(--veld-vlak); border-color: var(--veld-rand); color: var(--op-vlak); }

/* De offerte en andere documenten blijven wit, maar dat doen ze vanzelf:
   het zijn ondoorzichtige foto's van papier. Geen regel nodig. */

/* ============================================================
   12. VOOR WIE HET IS (homepage)
   De doelgroepen stonden alleen in het menu en in de footer. Eerst stond
   hier een lijst met een regel uitleg per doelgroep: negenhonderd pixels
   tekst. Nu een raster van kleine kaarten met een icoon en een naam, naar
   het voorbeeld van Mews. De uitleg staat op de pagina erachter.
   ============================================================ */
.voor-wie { padding: 72px 0; }
.voor-wie__kop { margin: 0 0 24px; }
.voor-wie__kop h2 { margin: 0 0 6px; }
.voor-wie__kop p { margin: 0; color: var(--tekst-2); font-size: 1.05rem; }

.voor-wie__raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.voor-wie__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  /* Een echte rand, geen --kaart-rand: dat token is in de lichte modus 0,
     en dan staat er een witte kaart op een bijna witte grond. */
  border: 1px solid var(--lijn);
  border-radius: var(--cm-radius);
  background: var(--vlak);
  box-shadow: var(--kaart-glim, none);
  color: var(--op-vlak);
  text-decoration: none;
  font-family: var(--cm-font-nav);
  font-weight: 600;
  font-size: 0.98rem;
  transition: border-color .15s ease, transform .15s ease;
}
.voor-wie__item svg { width: 22px; height: 22px; flex: 0 0 auto; color: var(--tekst-2); }
.voor-wie__item:hover { border-color: var(--wb-goud); transform: translateY(-1px); }
.voor-wie__item:hover svg { color: var(--op-vlak); }

@media (max-width: 760px) {
  .voor-wie { padding: 56px 0; }
  .voor-wie__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .voor-wie__raster { grid-template-columns: minmax(0, 1fr); }
}

/* De klantlogo's waren een doodlopend blok: wel het bewijs, geen weg
   ernaartoe. */
.cm-trust-curated__meer {
  margin: 20px 0 0;
  text-align: center;
  font-family: var(--cm-font-nav);
  font-size: 0.95rem;
  font-weight: 600;
}
.cm-trust-curated__meer a {
  color: var(--op-vlak);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud);
  text-underline-offset: 5px;
  display: inline-block;
  padding-block: 10px;
}
.cm-trust-curated__meer a:hover { text-decoration-color: var(--op-vlak); }

/* Het productblok is een vijfde van de homepage en had één uitweg. De vier
   regels ernaast gaan ook over factureren en verkoop, dus die twee staan er
   nu bij als tekstlink onder de knop. Niet als derde en vierde knop: dan
   staan er even zware knoppen te vechten en breken ze lelijk af. Zelfde
   vorm als de links onder het klantverhaal. */
.cm-product__ook {
  margin: 16px 0 0;
  font-size: 0.98rem;
  color: var(--tekst-2);
}
.cm-product__ook a {
  font-weight: 700;
  color: var(--op-vlak);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud);
  text-underline-offset: 4px;
}
.cm-product__ook a:hover { text-decoration-color: var(--op-vlak); }

/* ── Vergelijkingspagina's (/nl/vergelijken/…) ────────────────
   Catermonkey naast één ander pakket. De tabel is die van de
   prijzenpagina (.cm-compare), hier met tekst in de cellen in plaats van
   vinkjes: "ja" zegt niets als de een het in de basis heeft en de ander
   tegen een toeslag. Alles op rollen (--vlak, --op-vlak, --tekst-2), dus
   de donkere modus hoeft hier niets apart te weten. */
.cm-vergelijk .vg-intro { padding: 40px 24px 40px; }
.cm-vergelijk .vg-intro h1 {
  margin: 0 0 16px;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
.cm-vergelijk .vg-intro__sub { margin: 0 0 14px; max-width: 60ch; font-size: 1.2rem; color: var(--tekst-2); }
.cm-vergelijk .vg-intro__meta { margin: 0; font-size: 0.95rem; color: var(--tekst-2); }
.cm-vergelijk .vg-intro__meta a,
.cm-vergelijk .vg-voetnoot a,
.cm-vergelijk .vg-bronnen a,
.cm-vergelijk .vg-overstap a,
.cm-vergelijk .vg-tabel td > a,
.cm-vergelijk .cm-faq p a {
  color: var(--op-vlak);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud);
  text-underline-offset: 4px;
}
.cm-vergelijk .vg-intro__meta a:hover,
.cm-vergelijk .vg-voetnoot a:hover,
.cm-vergelijk .vg-bronnen a:hover,
.cm-vergelijk .vg-overstap a:hover,
.cm-vergelijk .vg-tabel td > a:hover,
.cm-vergelijk .cm-faq p a:hover { text-decoration-color: var(--op-vlak); }

/* Het korte antwoord: eerst de twee alinea's, daaronder voor wie welke past. */
.cm-vergelijk .vg-kort {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  padding-top: 24px;
  padding-bottom: 80px;
}
.cm-vergelijk .vg-kort__antwoord { max-width: 68ch; }
.cm-vergelijk .vg-kort h2 { margin: 0 0 16px; font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.05; }
.cm-vergelijk .vg-kort__antwoord p { margin: 0 0 14px; font-size: 1.1rem; line-height: 1.6; color: var(--tekst-2); }
.cm-vergelijk .vg-kies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cm-vergelijk .vg-kies__kaart {
  padding: 24px 24px 12px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--lijn);
  border-radius: 16px;
}
.cm-vergelijk .vg-kies__kaart--cm { border-top-color: var(--wb-goud); }
.cm-vergelijk .vg-kies__kaart h3 { margin: 0 0 8px; font-size: 1.15rem; line-height: 1.2; }
.cm-vergelijk .vg-kies__kaart ul { margin: 0; padding: 0; list-style: none; }
.cm-vergelijk .vg-kies__kaart li { padding: 12px 0; border-top: 1px solid var(--lijn); line-height: 1.5; color: var(--tekst-1); }

/* De witte band met het stippenraster, zoals op de prijzenpagina. */
.cm-vergelijk .vg-band {
  background-color: var(--vlak);
  background-image: var(--wb-raster);
  background-size: var(--wb-raster-maat);
}

/* Tekst in de cellen: links uitgelijnd, bovenaan, met een vaste breedte
   voor de eerste kolom zodat de twee pakketten even breed zijn. */
.cm-vergelijk .vg-tabel { table-layout: fixed; min-width: 720px; }
.cm-vergelijk .vg-tabel thead th { text-align: left; }
.cm-vergelijk .vg-tabel thead th:first-child { width: 22%; }
.cm-vergelijk .vg-tabel tbody td { text-align: left; vertical-align: top; line-height: 1.5; color: var(--tekst-1); }
.cm-vergelijk .vg-tabel tbody th[scope="row"] { vertical-align: top; font-weight: 700; }
.cm-vergelijk .vg-bronregel { margin: 16px 0 0; font-size: 0.95rem; color: var(--tekst-2); }
.cm-vergelijk .vg-bronregel a { color: var(--op-vlak); text-decoration: underline; text-underline-offset: 3px; }

.cm-vergelijk .vg-prijs { padding-top: 88px; padding-bottom: 88px; }
.cm-vergelijk .vg-prijstabel tbody th[scope="row"] { font-weight: 700; }
.cm-vergelijk .vg-voetnoot { margin-top: 20px; max-width: 78ch; }
.cm-vergelijk .vg-voetnoot p { margin: 0 0 10px; font-size: 0.95rem; line-height: 1.6; color: var(--tekst-2); }

/* Waar het verschil zit: het onderwerp links, de uitleg rechts. */
.cm-vergelijk .vg-verschil { padding: 88px 0; }
.cm-vergelijk .vg-verschil__lijst { margin: 0; }
.cm-vergelijk .vg-verschil__lijst > div {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--lijn);
}
.cm-vergelijk .vg-verschil__lijst > div:last-child { border-bottom: 1px solid var(--lijn); }
.cm-vergelijk .vg-verschil__lijst dt { font-size: 1.3rem; font-weight: 800; line-height: 1.2; color: var(--op-vlak); }
.cm-vergelijk .vg-verschil__lijst dd { margin: 0; max-width: 68ch; }
.cm-vergelijk .vg-verschil__lijst dd p { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.65; color: var(--tekst-1); }
.cm-vergelijk .vg-verschil__lijst dd p:last-child { margin-bottom: 0; }

.cm-vergelijk .vg-overstap { padding-top: 88px; padding-bottom: 64px; }
.cm-vergelijk .vg-overstap__kaart {
  padding: 40px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 16px;
}
.cm-vergelijk .vg-overstap__kaart h2 { margin: 0 0 14px; font-size: 1.9rem; line-height: 1.1; }
.cm-vergelijk .vg-overstap__kaart p { margin: 0 0 12px; max-width: 68ch; font-size: 1.05rem; line-height: 1.65; color: var(--tekst-2); }
.cm-vergelijk .vg-overstap__kaart p:last-child { margin-bottom: 0; font-weight: 700; }

.cm-vergelijk .vg-bronnen { padding-bottom: 80px; }
.cm-vergelijk .vg-bronnen h2 { margin: 0 0 10px; font-size: 1.3rem; }
.cm-vergelijk .vg-bronnen p { margin: 0 0 12px; max-width: 68ch; color: var(--tekst-2); }
.cm-vergelijk .vg-bronnen ul { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; }

@media (max-width: 900px) {
  .cm-vergelijk .vg-kort { gap: 28px; padding-bottom: 64px; }
  .cm-vergelijk .vg-verschil__lijst > div { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cm-vergelijk .vg-prijs, .cm-vergelijk .vg-verschil { padding-top: 64px; padding-bottom: 64px; }
}
@media (max-width: 640px) {
  .cm-vergelijk .vg-kies { grid-template-columns: minmax(0, 1fr); }
  .cm-vergelijk .vg-overstap__kaart { padding: 28px 22px; }
}
.cm-vergelijk .vg-verschil--grond { padding-top: 88px; }
/* Het overzicht: één kaart per vergelijking. */
.cm-vergelijk .vg-hub { padding-top: 8px; padding-bottom: 80px; }
.cm-vergelijk .vg-hub__lijst { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cm-vergelijk .vg-hub__lijst a {
  display: block;
  height: 100%;
  padding: 28px;
  background: var(--vlak);
  border: 1px solid var(--lijn);
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.cm-vergelijk .vg-hub__lijst a:hover { border-color: var(--op-vlak); }
.cm-vergelijk .vg-hub__lijst h2 { margin: 0 0 10px; font-size: 1.5rem; line-height: 1.15; }
.cm-vergelijk .vg-hub__lijst p { margin: 0 0 16px; line-height: 1.6; color: var(--tekst-2); }
.cm-vergelijk .vg-hub__lijst span {
  font-weight: 700;
  color: var(--op-vlak);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--wb-goud);
  text-underline-offset: 4px;
}
.cm-vergelijk .vg-tabel--breed { min-width: 1040px; font-size: 0.92rem; }
.cm-vergelijk .vg-tabel--breed thead th:first-child { width: 13%; }
.cm-vergelijk .vg-tabel--breed th, .cm-vergelijk .vg-tabel--breed td { padding-left: 14px; padding-right: 14px; }

/* Op een telefoon past de vergelijkingstabel niet, dus schuift hij opzij.
   Schuift de naam van de rij mee, dan weet je halverwege niet meer waar je
   naar kijkt. De eerste kolom blijft daarom staan.

   De achtergrond moet expliciet: een cel is standaard doorzichtig, en een
   blijvende kolom zonder vulling laat de rest eronderdoor schuiven. */
@media (max-width: 900px) {
  .cm-vergelijk .cm-compare__table-wrap th:first-child,
  .cm-vergelijk .cm-compare__table-wrap td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--vlak);
    box-shadow: 1px 0 0 var(--lijn);
  }
  .cm-vergelijk .vg-tabel--breed tbody th.is-eigen:first-child,
  .cm-vergelijk .vg-tabel--breed tbody tr:first-child th:first-child {
    background: var(--vlak-accent-zacht);
  }
  /* de rijen die een kopje van een blok zijn, lopen over de hele breedte */
  .cm-vergelijk .cm-compare__table-wrap th[colspan]:first-child {
    position: static;
    box-shadow: none;
  }
}
@media (min-width: 1000px) { .cm-vergelijk .vg-hub__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cm-vergelijk .vg-bronnen--los { padding-top: 72px; }
@media (max-width: 640px) { .cm-vergelijk .vg-hub__lijst { grid-template-columns: minmax(0, 1fr); } }