/* /assets/css/sol-brand.css */
/* Solipsis - eigen laag bovenop de Divi-CSS. Handmatig beheerd, laatste in de cascade.
   Tokens = content/site.json -> brand. Hier alleen correcties die het ontwerp NIET zichtbaar
   veranderen; elke regel noemt waarom hij er staat. Styling-wijziging nodig? Hier, met reden. */

:root {
  --sol-navy: #002835;
  --sol-blue: #00658d;
  --sol-magenta: #a93a6d;
  --sol-magenta-hover: #c7387f;
  --sol-light: #efefef;
  --sol-offwhite: #fcfcfc;
  --sol-slate: #24383f;
  --sol-green: #a4cb65;
  --sol-font-body: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  --sol-font-heading: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
}

/* Zichtbare berichttitel als h1. De titel stond als kale tekst in een Divi-tekstmodule en kreeg
   zijn opmaak van die module; de h1 neemt precies die opmaak over. */
#page-container .et_pb_text_inner > h1.sol-titel {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  text-shadow: inherit;
  padding-bottom: 0;
  margin: 0;
}

/* h1 op archiefpagina's: die hebben geen zichtbare titel. Alleen voor zoekmachines en
   schermlezers. */
.sol-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Zichtbare publicatiedatum onder de titel van een bericht (besluit 22-09-2026; Google eist dat
   de datum in het Article-schema ook zichtbaar op de pagina staat). Staat in de titelmodule, dus
   de kleur erft van de hero; alle overige opmaak hier expliciet, want de module is 72px. */
#page-container .et_pb_text_inner > p.sol-datum {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  opacity: .85;
  margin: 8px 0 0;
  padding: 0;
}

/* Uitklapper "Een greep uit de vragen" op /van-check-up-naar-doorlopend-traject/ (verzoek
   Alexander, 23-09-2026). De vragen zelf zijn ongewijzigd; alleen de presentatie: een kaart met
   het kleuraccent van het domein, en de opsomming als losse regels in plaats van een dichte lijst.
   De class komt uit content/fixes.nl.json; de kleuren zijn dezelfde als in de blokken. */

.sol-vragenlijst {
  --sol-vl-kleur: #a8d85e;
  --sol-vl-ink: #24383f;
  border: 1px solid rgba(0, 40, 53, .12);
  border: 1px solid var(--sol-vl-kleur);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}

/* De kaart staat in de pasteltint van zijn domein: de kleur voor 14% gemengd met wit, net als de
   kaartkoppen op /digital-health-score/ (verzoek Alexander, 25-09-2026; daarvoor stond hier de
   volle kleur). Divi zet een open uitklapper op #efefef via
   `.et_pb_toggle_0.et_pb_toggle.et_pb_toggle_open` (drie classes), dus deze regel heeft er vier
   nodig om te winnen. */
.sol-vragenlijst.et_pb_toggle.et_pb_toggle_item.et_pb_toggle_close,
.sol-vragenlijst.et_pb_toggle.et_pb_toggle_item.et_pb_toggle_open {
  background-color: color-mix(in srgb, var(--sol-vl-kleur) 14%, #ffffff);
}

.sol-vragenlijst--1 { --sol-vl-kleur: #a8d85e; }
.sol-vragenlijst--2 { --sol-vl-kleur: #c5de5c; }
.sol-vragenlijst--3 { --sol-vl-kleur: #5dcaa5; }
.sol-vragenlijst--4 { --sol-vl-kleur: #ffd166; }
.sol-vragenlijst--5 { --sol-vl-kleur: #ffa94d; }

.sol-vragenlijst .et_pb_toggle_title {
  padding: 14px 52px 14px 18px;
  margin: 0;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  color: var(--sol-vl-ink);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease;
}

/* Geen kleurverandering bij hover: de titel blijft zoals hij is, alleen de muisaanwijzer en het
   plus/min-teken laten zien dat je kunt klikken. Divi zet de titel dicht op #666 en open op #333
   via `.et_pb_toggle_close h5.et_pb_toggle_title` (drie delen); deze regel gaat daaroverheen en
   houdt hem in beide toestanden dezelfde inktkleur. */
.sol-vragenlijst.et_pb_toggle h5.et_pb_toggle_title,
.sol-vragenlijst.et_pb_toggle h5.et_pb_toggle_title:hover,
.sol-vragenlijst.et_pb_toggle_close h5.et_pb_toggle_title,
.sol-vragenlijst.et_pb_toggle_open h5.et_pb_toggle_title {
  color: #002835;
}

.sol-vragenlijst .et_pb_toggle_title:focus-visible {
  outline: 3px solid #a93a6d;
  outline-offset: -3px;
}

/* het plus/min-teken van Divi staat in een bolletje in de volle domeinkleur, zoals het icoon in
   de kop van een domein op /digital-health-score/. Divi kleurt het dichte teken standaard
   magenta; dat leest slecht op deze tinten, dus beide toestanden krijgen de donkere inktkleur. */
.sol-vragenlijst.et_pb_toggle_close .et_pb_toggle_title::before,
.sol-vragenlijst.et_pb_toggle_open .et_pb_toggle_title::before,
.sol-vragenlijst .et_pb_toggle_title::before {
  right: 16px;
  top: 50%;
  margin-top: -14px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background: var(--sol-vl-kleur);
  color: var(--sol-vl-ink);
  font-size: 16px;
}

/* open: geen streep onder de titel en geen apart paneel; de vragen staan gewoon op het
   gekleurde vlak, zodat de kaart één geheel blijft. */
.sol-vragenlijst.et_pb_toggle_open {
  box-shadow: 0 10px 26px rgba(0, 40, 53, .06);
}

.sol-vragenlijst.et_pb_toggle_open .et_pb_toggle_title {
  padding-bottom: 12px;
}

.sol-vragenlijst .et_pb_toggle_content {
  padding: 4px 18px 18px;
}

.sol-vragenlijst .et_pb_toggle_content ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

.sol-vragenlijst .et_pb_toggle_content li {
  position: relative;
  padding: 0 0 10px 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--sol-vl-ink);
}

.sol-vragenlijst .et_pb_toggle_content li:last-child {
  padding-bottom: 0;
}

.sol-vragenlijst .et_pb_toggle_content li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sol-vl-ink);
}

/* Op een telefoon staat de kaart in een Divi-kolom met 20px binnenruimte; daar blijft weinig
   regelbreedte over. De kaart mag daar iets ruimer staan en krijgt strakkere maten, zodat de
   vragen niet woord voor woord afbreken. */
@media (max-width: 560px) {
  .sol-vragenlijst {
    margin-left: -10px;
    margin-right: -10px;
  }

  .sol-vragenlijst .et_pb_toggle_title { padding: 13px 44px 13px 13px; font-size: 14px; }
  .sol-vragenlijst .et_pb_toggle_title::before { right: 12px; }
  .sol-vragenlijst .et_pb_toggle_content { padding: 2px 13px 14px; }
  .sol-vragenlijst .et_pb_toggle_content li { padding-left: 18px; font-size: 14px; }
  .sol-vragenlijst .et_pb_toggle_content li::before { left: 1px; top: 7px; }
}

/* De vijf domeinkaarten: de uitklapper met de vragen staat onderaan de kaart, net als de knop in
   het zesde (paarse) blok. De kolom wordt daarvoor een flexkolom; de uitklapper duwt zichzelf
   met margin-top:auto naar beneden. Divi's eigen ondermarge op de module vervalt, zodat de
   uitklapper net als de knop op de binnenruimte van de kaart eindigt. */
.sol-vraagkaart {
  display: flex;
  flex-direction: column;
}

/* Divi zet op deze module `margin-bottom: 35px !important` (module-instelling in WordPress),
   dus hier is !important nodig. Zonder die marge eindigt de uitklapper op dezelfde hoogte als de
   knop in het zesde blok (gemeten: 1px verschil); margin-top:auto duwt hem naar beneden zodra er
   ruimte over is, zodat de vijf uitklappers per rij op één lijn staan. */
.sol-vraagkaart .sol-vragenlijst {
  margin-top: auto !important;
  margin-bottom: 0 !important;
}

/* ---------------------------------------------------------------------------------------------
   ActiveCampaign-formulieren: "Laten we kennismaken" op /contact/ (formulier 111) en hetzelfde
   formulier in de footer (115). Verzoek Alexander, 23-09-2026.

   De techniek is niet aangeraakt: hetzelfde embed-script van solipsis.activehosted.com, dezelfde
   velden, namen, action en reCAPTCHA. Het script schrijft de HTML en een eigen <style> in de lege
   div ._form_111 / ._form_115; alleen de presentatie is hier aangepast.

   Waarom overal !important: de stijl van ActiveCampaign komt pas bij het laden in de pagina (dus
   na deze stylesheet) en werkt met id-selectors. Zonder !important wint hun regel altijd. Wat zij
   zelf met !important op een id vastleggen - achtergrond, kleur, binnenruimte en ronding van de
   knop - is niet te overschrijven; dat is de magenta pil die ook elders op de site staat, dus die
   blijft. De hover gaat daarom via filter.

   Het id van het <form> verschilt per aanvraag en de veldcodes (._x70025618) kunnen veranderen als
   het formulier in ActiveCampaign wordt gewijzigd. Hieronder staan daarom alleen classes die niet
   wisselen; het reCAPTCHA-veld wijzen we aan met :has(.g-recaptcha).

   Drie formulieren, dezelfde opmaak, twee kleurvarianten en een losse kaart:
     .sol-acform--licht  op een lichte achtergrond: tekst in de inktkleur (/contact/ en het
                         aanmeldformulier op /event/ai-event-van-handmatig-naar-moeiteloos/)
     .sol-acform--donker in de footer, op het donkerblauw: tekst in wit
     .sol-acform--kaart  alleen op /contact/: een witte kaart om het formulier. Op de eventpagina
                         staat het formulier al in een witte kolom, daar zou dat dubbel zijn.
   --------------------------------------------------------------------------------------------- */

/* --- gemeenschappelijk: maatvoering en gedrag ------------------------------------------------ */

.sol-acform form._form {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 600px !important;
  font-family: var(--sol-font-body) !important;
}

.sol-acform form._form ._form_element {
  margin-left: 0 !important;
  margin-bottom: 14px !important;
}

/* ActiveCampaign duwt elk veld met margin-left:-20px buiten de binnenruimte van het formulier;
   die binnenruimte is hierboven weg, dus die verschuiving ook. */
.sol-acform form._form input[type="text"],
.sol-acform form._form ._submit {
  margin-left: 0 !important;
}

/* de reCAPTCHA houdt zijn verschuiving (die staat met !important op een id-selector), dus duwen we
   het omhullende veld er evenveel tegenin. Dat veld wijzen we aan via de reCAPTCHA zelf en niet
   via de veldcode van ActiveCampaign: die kan bij een wijziging in het formulier veranderen.
   Formulier 117 (de eventpagina van 24 juni) verschuift zijn reCAPTCHA niet, dus daar hoort geen
   tegendruk; vandaar dat de drie formulieren die dat wel doen met naam genoemd staan. */
.sol-acform form._form ._form_element:has(.g-recaptcha) {
  margin-top: 4px !important;
}

.sol-acform form._form_111 ._form_element:has(.g-recaptcha),
.sol-acform form._form_115 ._form_element:has(.g-recaptcha),
.sol-acform form._form_121 ._form_element:has(.g-recaptcha),
.sol-acform form._form_125 ._form_element:has(.g-recaptcha) {
  margin-left: 20px !important;
}

.sol-acform form._form ._form_element:has(.g-recaptcha) ._form-label {
  margin-left: -20px !important;
}

.sol-acform form._form .g-recaptcha {
  margin-bottom: 6px !important;
}

/* labels: lege labels (de velden werken met een placeholder) nemen anders ruimte in */
.sol-acform form._form ._form-label {
  font-family: var(--sol-font-heading) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin-bottom: 8px !important;
}

.sol-acform form._form ._form-label:empty {
  display: none !important;
}

.sol-acform form._form .field-required {
  margin-left: 2px;
}

/* de velden: dezelfde pilvorm als op de site, maar rustiger. De rand was volvlak magenta; dat trok
   alle aandacht naar de omlijning in plaats van naar de tekst. */
.sol-acform form._form input[type="text"] {
  width: 100% !important;
  height: 58px !important;
  padding: 0 22px !important;
  border: 1px solid #ddd2d8 !important;
  border-radius: 50px !important;
  background-color: #ffffff !important;
  font-family: var(--sol-font-body) !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sol-acform form._form input[type="text"]::placeholder {
  color: #7a8890 !important;
  opacity: 1 !important;
}

.sol-acform form._form input[type="text"]:hover {
  border-color: #c9b6c0 !important;
}

/* actief veld: de merkkleur als rand plus een zachte ring, zodat duidelijk is waar je bent */
.sol-acform form._form input[type="text"]:focus {
  border-color: var(--sol-magenta) !important;
  outline: none;
}

.sol-acform form._form input[type="text"]:focus-visible {
  outline: 3px solid var(--sol-magenta);
  outline-offset: 2px;
}

.sol-acform form._form input[type="text"]._has_error {
  border-color: #d64545 !important;
}

/* de knop: breedte en lettertype liggen bij ActiveCampaign niet vast, dus daarmee geven we hem het
   formaat van de knoppen elders op de site */
.sol-acform form._form ._button-wrapper {
  margin-top: 4px !important;
}

.sol-acform form._form ._submit {
  min-width: 220px !important;
  font-family: var(--sol-font-heading) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  transition: filter .2s ease, box-shadow .2s ease, transform .1s ease;
}

.sol-acform form._form ._submit:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 18px rgba(169, 58, 109, .28);
}

.sol-acform form._form ._submit:active {
  transform: translateY(1px);
}

.sol-acform form._form ._form-thank-you {
  font-family: var(--sol-font-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  text-align: left !important;
  padding: 6px 0 !important;
}

/* --- variant licht: /contact/, op de grijze sectie ------------------------------------------- */

/* de kaart om het formulier; laadt het script niet, dan is er geen <form> en blijft de kaart weg */
.sol-acform--kaart .et_pb_code_inner:has(form) {
  background: #ffffff;
  border-radius: 22px;
  padding: 28px 30px 30px;
  box-shadow: 0 14px 34px rgba(0, 40, 53, .08);
  max-width: 560px;
}

/* ActiveCampaign zet het hele formulier op wit; op de lichtgrijze sectie was het label boven de
   reCAPTCHA daardoor onleesbaar, en het bedankbericht na het versturen ook. */
.sol-acform--licht form._form,
.sol-acform--licht form._form ._form-label,
.sol-acform--licht form._form ._form-thank-you {
  color: var(--sol-slate) !important;
}

.sol-acform--licht form._form .field-required {
  color: var(--sol-magenta) !important;
}

.sol-acform--licht form._form input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(169, 58, 109, .16) !important;
}

.sol-acform--licht form._form ._submit:focus-visible {
  outline: 3px solid var(--sol-navy);
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .sol-acform--kaart .et_pb_code_inner:has(form) {
    padding: 22px 20px 24px;
    border-radius: 18px;
  }

  .sol-acform--licht form._form ._submit {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* de reCAPTCHA van Google is 304px breed en vast van formaat; op een smal scherm steekt hij
   daardoor buiten de binnenruimte van de kaart. Iets verkleinen laat hem netjes meelopen. */
/* de regels in een keuzelijst kunnen niet afbreken; op een smal scherm past de langste sessienaam
   daarom alleen in een iets kleinere letter */
@media (max-width: 430px) {
  .sol-acform--licht form._form select,
  .sol-acform--licht form._form select option {
    font-size: 13px !important;
  }

  .sol-acform--licht form._form select {
    padding: 6px !important;
  }

  .sol-acform--licht form._form select option {
    padding: 8px;
  }
}

@media (max-width: 430px) {
  .sol-acform--licht form._form .g-recaptcha {
    transform: scale(.9);
    transform-origin: left center;
  }
}

/* Het aanmeldformulier op /event/ai-event-van-handmatig-naar-moeiteloos/ heeft twee velden die de
   andere twee formulieren niet hebben: een tekstvak ("Waar zou jij AI voor willen inzetten?") en
   een akkoordvinkje. In WordPress stond daar een eigen stijlblok voor in de pagina; dat is
   verwijderd (content/fixes.nl.json) en hier overgenomen in dezelfde vormtaal als de rest. */

.sol-acform--licht form._form textarea:not(.g-recaptcha-response) {
  width: 100% !important;
  min-height: 116px !important;
  padding: 14px 20px !important;
  border: 1px solid #ddd2d8 !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  font-family: var(--sol-font-body) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  color: var(--sol-slate) !important;
  resize: vertical !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sol-acform--licht form._form textarea:not(.g-recaptcha-response)::placeholder {
  color: #7a8890 !important;
  opacity: 1 !important;
}

.sol-acform--licht form._form textarea:not(.g-recaptcha-response):hover {
  border-color: #c9b6c0 !important;
}

.sol-acform--licht form._form textarea:not(.g-recaptcha-response):focus {
  border-color: var(--sol-magenta) !important;
  box-shadow: 0 0 0 3px rgba(169, 58, 109, .16) !important;
  outline: none;
}

.sol-acform--licht form._form textarea:not(.g-recaptcha-response):focus-visible {
  outline: 3px solid var(--sol-magenta);
  outline-offset: 2px;
}

/* Het aanmeldformulier op /event/event-digitale-werkplek-24-juni-2026/ heeft een keuzelijst voor
   de sessies (<select multiple>, drie opties). Die stond in WordPress in een pil van 67px hoog met
   appearance:none en een pijltje erbij, terwijl het geen uitklaplijst is: de drie regels stonden
   klem in een rond vakje. Hier is het een gewone, rustige lijst waarin je de opties ziet staan. */
.sol-acform--licht form._form select {
  width: 100% !important;
  height: auto !important;
  padding: 8px !important;
  border: 1px solid #ddd2d8 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  background-image: none !important;
  font-family: var(--sol-font-body) !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--sol-slate) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.sol-acform--licht form._form select:hover {
  border-color: #c9b6c0 !important;
}

.sol-acform--licht form._form select:focus {
  border-color: var(--sol-magenta) !important;
  box-shadow: 0 0 0 3px rgba(169, 58, 109, .16) !important;
  outline: none;
}

.sol-acform--licht form._form select:focus-visible {
  outline: 3px solid var(--sol-magenta);
  outline-offset: 2px;
}

.sol-acform--licht form._form select option {
  padding: 9px 12px;
  border-radius: 10px;
}

/* een gekozen optie in de merkkleur. Chrome en Safari negeren background-color op een option, maar
   luisteren wel naar een background-image; vandaar het verloop van één kleur. */
.sol-acform--licht form._form select option:checked {
  background: var(--sol-magenta) linear-gradient(0deg, var(--sol-magenta) 0%, var(--sol-magenta) 100%);
  color: #ffffff;
}

/* het akkoordvinkje als aanklikbare kaart; het label eromheen maakt de hele regel klikbaar */
.sol-acform--licht form._form ._row._checkbox-radio {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid #e0e5e8;
  border-radius: 14px;
  background: #ffffff;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}

.sol-acform--licht form._form ._row._checkbox-radio:hover {
  border-color: #c9b6c0;
  background: #fdf7fa;
}

.sol-acform--licht form._form ._row._checkbox-radio:has(input:checked) {
  border-color: var(--sol-magenta);
  background: #fbf1f6;
}

.sol-acform--licht form._form ._row._checkbox-radio:has(input:focus-visible) {
  outline: 3px solid var(--sol-magenta);
  outline-offset: 2px;
}

.sol-acform--licht form._form input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex: none;
  accent-color: var(--sol-magenta);
  cursor: pointer;
}

.sol-acform--licht form._form ._row._checkbox-radio label,
.sol-acform--licht form._form ._row._checkbox-radio span {
  display: inline !important;
  width: auto !important;
  margin: 0 !important;
  font-family: var(--sol-font-body) !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--sol-slate) !important;
  cursor: pointer;
}

/* het kopje boven het vinkje ("akkoord privacy verklaring") stond in een lichtgrijs dat op wit
   onvoldoende contrast heeft (3,6:1); dit haalt 4,5:1 */
.sol-acform--licht form._form legend._form-label {
  font-family: var(--sol-font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5a6a72 !important;
  margin-bottom: 8px !important;
}

/* --- variant donker: de footer, op het donkerblauw ------------------------------------------- */

/* hier klopt het wit van ActiveCampaign wel; de tekst blijft dus wit, alleen het sterretje krijgt
   een lichte tint van de merkkleur (magenta op donkerblauw leest slecht). */
.sol-acform--donker form._form .field-required {
  color: #f0aecb !important;
}

/* de footer is een smalle kolom naast de adresgegevens: daar passen dezelfde velden in een iets
   kleinere maat. ActiveCampaign leverde ze 30px hoog, wat te krap is om in te typen. */
.sol-acform--donker form._form input[type="text"] {
  height: 46px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
  border-color: #e4e8ea !important;
}

.sol-acform--donker form._form input[type="text"]:hover {
  border-color: #ffffff !important;
}

.sol-acform--donker form._form input[type="text"]:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .22) !important;
}

.sol-acform--donker form._form input[type="text"]:focus-visible {
  outline-color: #ffffff;
}

.sol-acform--donker form._form ._form_element {
  margin-bottom: 10px !important;
}

.sol-acform--donker form._form ._form-label {
  font-size: 13px !important;
}

/* ActiveCampaign verkleint de reCAPTCHA hier al (scale .75) vanaf de linkerbovenhoek; vanuit het
   midden blijft de witruimte boven en onder gelijk. */
.sol-acform--donker form._form .g-recaptcha {
  transform-origin: left center !important;
}

.sol-acform--donker form._form ._submit {
  min-width: 0 !important;
  font-size: 16px !important;
}

.sol-acform--donker form._form ._submit:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ heroknop naar de check

   Verzoek Alexander (25-09-2026): dezelfde knop als in de hero van de homepage ("Ontvang jouw
   Digital Health Score") staat nu ook in de hero van /wat-meten-we/ en
   /van-check-up-naar-doorlopend-traject/, met een link naar /digital-health-score/. Die twee
   pagina's hebben zelf geen knop, dus ook geen genummerde knop-CSS van Divi; deze regels geven
   de knop dezelfde vorm als op de homepage (magenta pil, Ubuntu 700 18px, 16/24 binnenruimte,
   gemeten 25-09-2026). Het pijltje bij hover komt uit .et_pb_button in sol-core.css; net als op
   /agents/ maakt de knop daar rechts ruimte voor, zodat het binnen de pil valt. */

/* Divi zet onder de ondertitel van deze twee hero's 77px lucht; de knop stond daardoor bijna
   tegen de onderrand. De ondertitel krijgt dezelfde 22px als op de homepage, zodat de knop er
   net zo dicht onder staat en de hero ongeveer even hoog blijft (gemeten 25-09-2026). */
.sol-hero-sub.et_pb_module {
  margin-bottom: 22px !important;
}

/* Onder de knop hoort lucht voordat de hero ophoudt: de rij zelf geeft 20px, deze marge maakt er
   64px van (verzoek Alexander, 25-09-2026). Divi zet de laatste module in een kolom op
   `margin-bottom: 0` via `.et_pb_column .et_pb_module:last-child`; daar gaat deze regel
   overheen. */
.sol-hero-knopblok.et_pb_module {
  margin-top: 0;
  margin-bottom: 44px !important;
}

.sol-hero-knop {
  display: inline-block;
  border-radius: 50px;
  padding: 16px 24px !important;
  border-width: 0 !important;
  background-color: #a93a6d;
  color: #edeaeb !important;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 18px;
  font-weight: 700 !important;
  transition: all 300ms ease 0ms;
}

.sol-hero-knop:hover {
  background-color: #a93a6d !important;
  padding: 16px 48px 16px 24px !important;
}

.sol-hero-knop::after {
  display: inline-block;
  left: auto;
  right: 20px;
  margin-left: 0;
  font-size: 1.6em;
  opacity: 0;
  transition: all 300ms ease 0ms;
}

.sol-hero-knop:hover::after {
  opacity: 1;
  margin-left: 0;
}

.sol-hero-knop:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ pijltje op alle knoppen

   Verzoek Alexander (25-09-2026): de knoppen die uit WordPress komen krijgen dezelfde beweging
   als de nieuwe knoppen op /agents/ en /digital-health-score/.

   Divi tekent het pijltje (het teken "5" uit het lettertype ETmodules) bij hover net buiten de
   knop en rekt de knop daarvoor normaal gesproken op. Op deze site staat de binnenruimte van elke
   knop vast op 16/24px met !important, dus dat oprekken gebeurde niet: het pijltje viel buiten de
   pil en had de kleur van de knoptekst, waardoor het op de pagina-achtergrond onzichtbaar bleef.

   Deze twee regels zetten dat recht voor alle knoppen tegelijk: bij hover komt er rechts 24px bij
   en het pijltje staat binnen de pil. De selector begint met `body #page-container` omdat de
   knopregels van Divi per pagina dat ook doen; anders wint hun !important. Alle knoppen op de
   site hebben dezelfde binnenruimte (gecontroleerd 25-09-2026), dus 48px rechts klopt overal. */

body #page-container .et_pb_button:hover {
  padding-right: 48px !important;
}

body #page-container .et_pb_button::after {
  left: auto;
  right: 20px;
  margin-left: 0;
}

/* ------------------------------------------------------------------ pijltje op "Lees meer"

   De "Lees meer"-links onder de kaarten in een bloglijst zijn geen Divi-knop maar een
   `.more-link`; die heeft het pijltje van zichzelf niet (gemerkt 25-09-2026). Hieronder hetzelfde
   recept als bij de knoppen: bij hover komt er rechts ruimte bij en schuift het pijltje in beeld.
   Het teken "5" uit het lettertype ETmodules is hetzelfde pijltje dat Divi op zijn knoppen zet. */

body #page-container .more-link {
  position: relative;
  transition: all 300ms ease 0ms;
}

body #page-container .more-link::after {
  content: "\35";
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  font-family: ETmodules;
  font-size: 22px;
  font-weight: 400;
  font-style: normal;
  line-height: 1em;
  opacity: 0;
  text-transform: none;
  transition: all 300ms ease 0ms;
}

/* de bloglijst zet de binnenruimte met !important (`.et_pb_blog_0 a.more-link{padding:16px
   !important}`), dus die ruimte erbij moet hier ook !important zijn */
body #page-container .more-link:hover {
  padding-right: 40px !important;
}

body #page-container .more-link:hover::after {
  opacity: 1;
}

/* ------------------------------------------------------------------ Contact-knop bij scrollen

   Verzoek Alexander (25-09-2026): de Contact-knop in het menu mag er bij het scrollen niet anders
   uit gaan zien. Divi kleurt in de vastgezette header alle menulinks donkerblauw
   (`.et-fixed-header #top-menu a{color:#002835!important}`) en de link van de huidige pagina
   magenta; op het magenta pilletje is dat allebei slecht leesbaar. Deze regel houdt de tekst daar
   licht, in beide toestanden. */

#main-header.et-fixed-header #top-menu li.cta-button > a,
#main-header.et-fixed-header #top-menu li.cta-button.current-menu-item > a,
#main-header.et-fixed-header #top-menu li.cta-button.current_page_item > a {
  color: #f1f1f1 !important;
}

/* ------------------------------------------------------------------ 404-pagina

   De 404 van WordPress zei "Geen Resultaten Gevonden" met een zoekformulier dat naar /?s= postte;
   dat doet op een statische site niets. De pagina heeft nu een eigen tekst met wegwijzers
   (content/fixes.nl.json) en een knop die het zoekvenster opent. */

/* de zijbalk is leeg gemaakt; het tekstvlak mag dan de volle breedte hebben (Divi zet op een
   pagina met rechterzijbalk een smalle kolom met een scheidingslijn) */
body.error404 #left-area {
  width: 100% !important;
  padding-right: 0 !important;
  border-right: 0 !important;
}

body.error404 #sidebar {
  display: none !important;
}

.sol-404 {
  max-width: 62ch;
  padding: 10px 0 40px;
}

.sol-404 h1.not-found-title {
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  color: #002835;
  margin-bottom: 14px;
}

.sol-404-tekst {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  line-height: 32px;
  color: #002835;
}

.sol-404-knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 26px 0 36px;
}

.sol-404-zoek {
  border: 2px solid #e2e7e9;
  border-radius: 50px;
  background: #ffffff;
  color: #002835;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 24px;
  cursor: pointer;
  transition: border-color 200ms ease;
}

.sol-404-zoek:hover {
  border-color: #002835;
}

.sol-404-zoek:focus-visible {
  outline: 3px solid #a93a6d;
  outline-offset: 2px;
}

.sol-404-kop {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #5d6d75;
  margin-bottom: 10px;
}

.sol-404-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px 24px;
}

.sol-404-lijst a {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  line-height: 30px;
  color: #a93a6d;
  text-decoration: none;
}

.sol-404-lijst a:hover {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .sol-404-lijst {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ omgekeerde knop

   Gebruikt door de link naar Google Maps op de eventpagina en door de verwijzing naar
   /adoptie/copilot-training/ op /adoptie/ (09-10-2026). Beide staan in een WordPress-pagina
   die geen eigen stylesheet heeft, dus de opmaak hoort hier.

   De link naar Google Maps onder het blok Locatie op /event/.../ (verzoek Alexander, 01-10-2026).
   Het is de tegenhanger van de volle magenta knop op dezelfde pagina: dezelfde pil (50px rond),
   hetzelfde lettertype en dezelfde binnenruimte (Ubuntu 700 18px, 16/24px), maar omgekeerd -
   wit met een magenta rand, en bij hover vult hij zich. Het pijltje is hetzelfde teken "5" uit
   ETmodules dat Divi op zijn knoppen zet; het schuift net als daar bij hover in beeld, waarvoor
   rechts 24px bij komt. Geen Divi-knopclass, want die is per pagina genummerd. */
.sol-knop-rand {
  display: inline-block;
  position: relative;
  border-radius: 50px;
  border: 2px solid #a93a6d;
  padding: 14px 22px;
  background-color: #ffffff;
  color: #a93a6d;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  transition: all 300ms ease 0ms;
}

.sol-knop-rand:hover {
  background-color: #a93a6d;
  color: #ffffff;
  padding-right: 46px;
}

.sol-knop-rand::after {
  content: "\35";
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-family: ETmodules;
  font-size: 22px;
  font-weight: 400;
  opacity: 0;
  transition: all 300ms ease 0ms;
}

.sol-knop-rand:hover::after {
  opacity: 1;
}

.sol-knop-rand:focus-visible {
  outline: 3px solid #a93a6d;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ het team in een net raster

   Verzoek Alexander (05-10-2026): de foto's op /over-ons/ moeten netjes als een raster onder
   elkaar staan. Dat ging mis doordat Divi elke kaart zo hoog maakt als zijn eigen tekst: een naam
   die over twee regels valt ("Sebastiaan Orsel") of een functie die afbreekt
   ("Financieel medewerker/HR") duwde de kaart omlaag, waardoor de regels onder de foto's per
   kolom verschilden en de volgende rij scheef begon (gemeten: kaarten van 217 tot 249px).

   Naam en functie krijgen daarom allebei de ruimte van twee regels, ook als er maar een nodig is.
   Elke kaart is dan even hoog, staan alle foto's op dezelfde lijn en blijven de namen en functies
   per rij netjes onder elkaar. De class sol-team zet content/fixes.nl.json op de vijf rijen van
   /over-ons/, zodat dit de teamblokken op andere pagina's (zoals de sprekers op /event/...) niet
   raakt. Regelhoogtes gemeten 05-10-2026: naam 18px, functie 32,4px. */
.sol-team .et_pb_team_member .et_pb_module_header {
  /* 2 regels van 18px plus de 10px die Divi er onder zet; alles rekent in border-box */
  min-height: 46px;
}

.sol-team .et_pb_team_member .et_pb_member_position {
  min-height: 65px;
}

/* op een telefoon staan de kaarten onder elkaar; dan is die vaste ruimte alleen maar lucht */
@media (max-width: 767px) {
  .sol-team .et_pb_team_member .et_pb_module_header,
  .sol-team .et_pb_team_member .et_pb_member_position {
    min-height: 0;
  }
}

/* ------------------------------------------------------------------ aankondigingsbalk

   Verzoek Alexander (20-10-2026): het evenement van 5 november was te moeilijk te vinden, ook
   volgens een klant. Deze strook staat direct onder de header, alleen op de routes en in de
   periode uit content/banner.nl.json (BLOKKEN.md blok 14).

   Vormtaal uit de bestaande blokken: hetzelfde magenta vlak als de slot-CTA van /wat-meten-we/
   met daarin de blauwe knop, en de bovenregel in Ubuntu 200 zoals in een kaart. Alleen compacter,
   want het is een balk en geen sectie. */

.sol-banner {
  display: block;
  background: var(--sol-magenta, #a93a6d);
  color: #ffffff;
}

.sol-banner-breedte {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 30px;
  width: 80%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 0;
}

.sol-banner-tekst {
  flex: 1 1 420px;
}

.sol-banner p {
  margin: 0;
  padding: 0;
}

.sol-banner-eyebrow {
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  font-weight: 200;
  line-height: 1.3;
  color: rgba(255, 255, 255, .88);
}

.sol-banner-titel {
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin-top: 2px !important;
}

.sol-banner-sub {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: rgba(255, 255, 255, .88);
  margin-top: 4px !important;
}

/* dezelfde knop als in het magenta vlak op /wat-meten-we/: blauw, 50px rond, met het pijltje dat
   bij hover in beeld schuift (dat komt uit .et_pb_button in sol-core.css) */
.sol-banner .sol-banner-knop {
  flex: none;
  display: inline-block;
  border-radius: 50px;
  padding: 14px 22px !important;
  border-width: 0 !important;
  background-color: var(--sol-blue, #00658d);
  color: #edeaeb !important;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 17px;
  font-weight: 700 !important;
  transition: all 300ms ease 0ms;
}

.sol-banner .sol-banner-knop:hover {
  background-color: var(--sol-blue, #00658d) !important;
  padding: 14px 46px 14px 22px !important;
}

.sol-banner .sol-banner-knop::after {
  display: inline-block;
  left: auto;
  right: 18px;
  margin-left: 0;
  font-size: 1.6em;
  opacity: 0;
  transition: all 300ms ease 0ms;
}

.sol-banner .sol-banner-knop:hover::after {
  opacity: 1;
  margin-left: 0;
}

.sol-banner .sol-banner-knop:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

@media (max-width: 767px) {
  .sol-banner-breedte {
    padding: 20px 0;
  }

  .sol-banner .sol-banner-knop {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---------------------------------------------------------------- Expert insight: het kader

   Op /blog/pentest/ staat het blok in een lichtgrijs vlak met ronde hoeken. Die opmaak zit daar in de
   genummerde Divi-CSS van die pagina (.et_pb_text_7: #EFEFEF, 25px rond, 20px binnenruimte), en die
   staat op een berichtpagina uit het sjabloon niet. Daarom hier dezelfde maten onder een eigen class
   (verzoek Alexander, 6-11-2026). Zelfde grijs als de afwisselende secties van de site. */

.sol-insight {
  background: var(--sol-light, #efefef);
  border-radius: 25px;
  padding: 24px 28px;
  margin: 0 0 30px;
  overflow: hidden;
}

.sol-insight h2 {
  margin-top: 0 !important;
}

.sol-insight > p:last-of-type {
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .sol-insight {
    padding: 20px;
  }
}

/* ---------------------------------------------------------------- Expert insight: de ondertekening

   Het blok "Expert insight" (eerst op /blog/pentest/) sluit af met de naam en de rol van degene die
   het schrijft. Op verzoek van Alexander (6-11-2026) staat daar nu ook de foto bij, in de vorm van
   het teamblok op /over-ons/: een rond portret met daarnaast de naam in Ubuntu 800 en de functie in
   Open Sans 14px. De portretten in de uploads zijn al rond uitgesneden; de border-radius is het
   vangnet voor een foto die dat niet is.

   Eigen markup met een eigen prefix, want de teammodule van Divi (.et_pb_team_member_NN) heeft zijn
   opmaak in de genummerde CSS van /over-ons/ en die staat op een berichtpagina niet. */

.sol-expert {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
}

.sol-expert-foto {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.sol-expert .sol-expert-naam {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.45;
}

.sol-expert-naam strong {
  display: block;
  font-family: var(--sol-font-heading, 'Ubuntu', Helvetica, Arial, sans-serif);
  font-weight: 800;
  color: var(--sol-navy, #002835);
}

.sol-expert-naam span {
  display: block;
  font-family: var(--sol-font-body, 'Open Sans', Helvetica, Arial, sans-serif);
  font-size: 14px;
  color: var(--sol-navy, #002835);
}

@media (max-width: 479px) {
  .sol-expert-foto {
    width: 60px;
    height: 60px;
  }
}

/* ---------------------------------------------------------------- downloadblok in een bericht

   Het blok van /adoptie/copilot-training/ (BLOKKEN.md blok 10): lichtgrijs vlak, links de voorkant van
   de whitepaper met 14px ronding en een zachte schaduw, rechts de tekst met de knop en daaronder de
   regel met bestandssoort, aantal pagina's en grootte. Daar heet het .sol-cp-download en staat de
   opmaak in sol-cp.css, dat alleen die pagina laadt; dit is dezelfde vorm met een eigen prefix, voor
   gebruik in de body van een bericht (verzoek Alexander, 6-11-2026). Maten overgenomen uit sol-cp.css. */

.sol-download {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: center;
  background: var(--sol-light, #efefef);
  border-radius: 25px;
  padding: 32px;
  margin: 0 0 30px;
}

.sol-download-cover {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 40, 53, .18);
}

.sol-download-eyebrow {
  font-family: var(--sol-font-heading, 'Ubuntu', Helvetica, Arial, sans-serif);
  font-weight: 700;
  color: var(--sol-magenta, #a93a6d);
  margin: 0 0 6px !important;
}

.sol-download-tekst h2 {
  margin-top: 0 !important;
}

.sol-download .sol-download-knop {
  margin: 22px 0 0 !important;
}

/* De knop in het downloadblok is de volle magenta knop van de huisstijl, dezelfde als op
   /adoptie/copilot-training/ (Ubuntu 18px/700, wit op magenta, rond, pijltje bij hover). Een
   blog is een gespiegelde WordPress-pagina en laadt sol-ui.css niet, en de kleuren van de
   knoppen op zo'n pagina zitten in de genummerde Divi-selectors (.et_pb_button_0 en verder).
   Een knop die wij zelf in de tekst zetten heeft geen nummer en kreeg daardoor de standaard van
   Divi: doorzichtig, 2px rand, hoekjes van 3px, Open Sans 20px. Daarom hier de huisstijl los. */
.sol-download .sol-download-knop .et_pb_button {
  display: inline-block;
  color: #edeaeb !important;
  background-color: var(--sol-magenta, #a93a6d);
  border-width: 0 !important;
  border-radius: 50px;
  padding: 16px 24px !important;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 18px;
  font-weight: 700 !important;
  line-height: 1.7em;
  transition: all 300ms ease 0ms;
}

/* de achtergrond blijft bij hover dezelfde kleur: Divi maakt hem standaard bijna doorzichtig en
   dan verdwijnt de knop. Het pijltje schuift mee naar binnen, net als elders op de site. */
.sol-download .sol-download-knop .et_pb_button:hover {
  background-color: var(--sol-magenta, #a93a6d) !important;
  border-width: 0 !important;
  padding: 16px 48px 16px 24px !important;
}

.sol-download .sol-download-knop .et_pb_button::after {
  display: inline-block;
  left: auto;
  right: 20px;
  margin-left: 0;
  font-size: 1.6em;
  opacity: 0;
  transition: all 300ms ease 0ms;
}

.sol-download .sol-download-knop .et_pb_button:hover::after {
  opacity: 1;
  margin-left: 0;
}

.sol-download .sol-download-meta {
  margin: 14px 0 0 !important;
  font-size: 14px;
  line-height: 24px;
  color: #5d6d75;
}

@media (max-width: 767px) {
  .sol-download {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }

  .sol-download-cover {
    max-width: 200px;
  }
}

/* Genummerde stapkaarten in een artikelkolom (BLOKKEN.md blok 7, referentie /agents/). Dezelfde
   witte kaart met magenta rondje als daar, maar onder elkaar en met het cijfer links naast de
   tekst: de tekstkolom van een bericht is te smal voor vijf kaarten naast elkaar, en een raster
   van drie zou met vijf stappen een gat laten (webkwaliteit 1.1). Maten uit blok 7: rand 1px
   #e2e7e9, 25px rond, 26px/24px binnenruimte, rondje 42px, tekst Open Sans 16px/32px.
   Het cijfer komt uit een CSS-teller, zodat de markup een gewone <ol> blijft en de volgorde ook
   zonder opmaak klopt. Toegevoegd 6-11-2026 op verzoek van Alexander, bij /blog/mfa-uitzonderingen/. */

ol.sol-stappen {
  list-style: none;
  counter-reset: sol-stap;
  margin: 26px 0 23px;
  padding: 0 !important;
}

ol.sol-stappen > li {
  counter-increment: sol-stap;
  position: relative;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e2e7e9;
  border-radius: 25px;
  padding: 24px 26px 24px 88px;
  font-family: var(--sol-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 32px;
  color: var(--sol-navy);
}

ol.sol-stappen > li + li {
  margin-top: 14px;
}

ol.sol-stappen > li::before {
  content: counter(sol-stap);
  position: absolute;
  left: 26px;
  top: 25px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sol-magenta);
  color: #ffffff;
  font-family: var(--sol-font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

/* de eerste zin is de stap zelf, in dezelfde vette regel als de kop van een stapkaart op /agents/ */
ol.sol-stappen > li strong {
  font-weight: 700;
  color: var(--sol-navy);
}

/* op een telefoon past 88px inspringing niet naast de tekst: dan staat het cijfer erboven, zoals
   op /agents/, waar de kaarten ook smal zijn */
@media (max-width: 767px) {
  ol.sol-stappen > li {
    padding: 78px 24px 24px;
  }

  ol.sol-stappen > li::before {
    left: 24px;
    top: 24px;
  }
}

/* ================================================================================
   Leesbaarheid van een lang artikel (6-11-2026, verzoek Alexander: "leest niet lekker").

   Gemeten op /blog/mfa-uitzonderingen/ voor de wijziging: de tekstkolom is 878px breed bij
   16px, dat is ~110 tekens per regel (comfortabel is 60 tot 80), een h2 heeft 0px lucht boven
   zich en de pagina is 7181px aan ononderbroken grijze tekst. Daar is niets mis mee bij een
   tip van 300 woorden, maar dit artikel is er 2100.

   Twee aangrijpingspunten, allebei gezet door build_site.py:

   - .sol-blogartikel staat op de body van ELK blogartikel, ook de veertien die 1-op-1 uit
     WordPress zijn gespiegeld (akkoord Alexander, 6-11-2026: die zijn 1000 tot 2000 woorden en
     hebben dezelfde leesmaat nodig; bewuste afwijking van de 1-op-1 replica, ANALYSE.md 28).
     Alle blogs hebben dezelfde opbouw (sectie 0 hero, 1 body, 2 slot-CTA), dus de regels hangen
     aan .et_pb_section_1 en aan de volle kolom daarin. Dat moet, want de modulenummering
     verschilt per pagina (text_3, text_4, text_6, text_8). De smalle kolommen in die sectie
     (het vraag-en-antwoord) en de slot-CTA in sectie 2 blijven zo buiten schot.
   - .sol-bericht-blog staat op de builder-div van een bericht uit ons eigen sjabloon. Daar
     hangen alleen de dingen aan die markup nodig hebben en dus alleen daar bestaan: het
     samenvattingspaneel, de kaarten en de breedte van de panelen.

   Productivity Tips, events en vacatures vallen hier bewust helemaal buiten (verzoek Alexander,
   6-11-2026): die zijn kort en hebben dit niet nodig.
   De inhoud verandert niet, alleen maat, lucht en vlakken. Tokens en vormen komen uit
   BLOKKEN.md (paneel = 25px rond #efefef zoals het Expert insight-blok, kaart = blok 7).
   ================================================================================ */

/* ---- 1. leesmaat: de lopende tekst stopt bij ~78 tekens, panelen en kaarten mogen breder.
         Dat verschil in breedte geeft het artikel meteen ritme. */
/* ---- De artikelkolom is een raster van twee: links het artikel, rechts de inhoudsopgave.
     Daarmee staat de leesmaat vast zonder dat er een lege strook overblijft: de container is
     1078px, met 100px inspringing aan weerszijden blijft 878px over, daarvan is 220px voor de
     inhoudsopgave en 38px de tussenruimte, dus het artikel wordt 620px (~73 tekens bij 17px).
     Verzoek Alexander 6-11-2026: de witruimte rechts opvullen in plaats van de maat loslaten.

     De inspringing van 100px stond tot nu toe als marge op elke module; die gaat naar de kolom,
     anders telt hij twee keer. De pseudo-elementen van Divi (clearfix) worden uitgezet, want in
     een raster wordt elk daarvan een eigen cel. */
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  column-gap: 38px;
  align-items: start;
  padding: 0 100px;
}

.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4::before,
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4::after {
  display: none;
}

.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 > .sol-artikelkolom {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 > .sol-artikelkolom > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}

.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner p,
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner ul,
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner ol:not(.sol-stappen),
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner h2,
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner h3 {
  max-width: 660px;
}

/* een paneel met lopende tekst is precies de leesmaat plus zijn eigen binnenruimte (660 + 2x30),
   zodat er geen lege strook naast de tekst overblijft; een blok met kaarten mag breder, want daar
   staat korte tekst in twee kolommen */
.sol-bericht-blog .sol-insight,
.sol-bericht-blog .sol-download,
.sol-bericht-blog .et_pb_text_2,
.sol-bericht-blog .et_pb_text_3 {
  max-width: 720px;
}

.sol-bericht-blog ol.sol-stappen,
.sol-bericht-blog .sol-kaarten {
  max-width: 820px;
}

.sol-bericht-blog .sol-insight {
  padding: 26px 30px;
}

/* ---- 2. tekstgrootte: 17px/34px in plaats van 16px/32,4px. Een punt groter leest rustiger
         op een lang stuk, en bij 660px blijft het aantal tekens per regel onder de 80. */
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner p,
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner li {
  font-size: 17px;
  line-height: 34px;
}

/* ---- 3. koppen: lucht erboven in plaats van eronder, zodat een h2 bij zijn eigen sectie hoort
         en de lezer ziet waar een nieuw stuk begint. */
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner h2 {
  font-size: 30px;
  line-height: 40px;
  padding: 54px 0 14px !important;
}

.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner h2:first-child {
  padding-top: 0 !important;
}

/* een paneel of kaartenblok brengt zijn eigen lucht mee; dan hoeft de kop erna niet nog eens
   54px te krijgen */
.sol-bericht-blog .sol-insight + h2,
.sol-bericht-blog .sol-download + h2,
.sol-bericht-blog .sol-kaarten + h2 {
  padding-top: 34px !important;
}

/* ---- 4. opsomming: magenta bolletje in de marge in plaats van het standaard schijfje binnen de
         tekst, zodat de regels links uitlijnen met de alinea's eromheen. */
.sol-bericht-blog .et_pb_text_4 .et_pb_text_inner > ul {
  list-style: none;
  padding: 0 0 16px !important;
}

.sol-bericht-blog .et_pb_text_4 .et_pb_text_inner > ul > li {
  position: relative;
  list-style: none;
  padding-left: 28px;
}

.sol-bericht-blog .et_pb_text_4 .et_pb_text_inner > ul > li + li {
  margin-top: 12px;
}

.sol-bericht-blog .et_pb_text_4 .et_pb_text_inner > ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sol-magenta);
}

/* ---- 5. de samenvatting als paneel. Het zijn twee losse tekstmodules (kop en tekst); samen
         vormen ze een lichtgrijs paneel in dezelfde vorm als het Expert insight-blok, zodat het
         artikel bovenaan een anker heeft in plaats van meteen lopende tekst. */
.sol-bericht-blog .et_pb_text_2,
.sol-bericht-blog .et_pb_text_3 {
  background: var(--sol-light);
}

.sol-bericht-blog .et_pb_text_2 {
  border-radius: 25px 25px 0 0;
  padding: 30px 30px 0;
  margin-bottom: 0 !important;
}

.sol-bericht-blog .et_pb_text_3 {
  border-radius: 0 0 25px 25px;
  padding: 0 30px 30px;
}

.sol-bericht-blog .et_pb_text_2 h2 {
  font-size: 20px;
  line-height: 30px;
  padding-bottom: 0 !important;
}

.sol-bericht-blog .et_pb_text_3 p {
  font-size: 17px;
  line-height: 34px;
  padding-bottom: 0 !important;
}

/* ---- 6. kaarten naast elkaar binnen een artikel: dezelfde kaart als de genummerde stapkaarten
         (BLOKKEN.md blok 7), maar zonder cijfer en twee per rij. Voor vier korte punten die bij
         elkaar horen; dat leest sneller dan vier alinea's achter elkaar. */
.sol-bericht-blog .sol-kaarten {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 10px 0 23px;
}

.sol-bericht-blog .sol-kaart {
  background: #ffffff;
  border: 1px solid #e2e7e9;
  border-radius: 25px;
  padding: 26px 24px;
}

.sol-bericht-blog .sol-kaart p {
  padding-bottom: 0 !important;
}

@media (max-width: 980px) {
  .sol-bericht-blog .sol-kaarten {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  /* in een kolom van 240px zijn 17px met 34px regelafstand te los: dan staan er maar ~28 tekens
     op een regel en valt de tekst uit elkaar. Op een telefoon dus 16px/28px. */
  .sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner p,
  .sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner li,
  .sol-bericht-blog .et_pb_text_3 p {
    font-size: 16px;
    line-height: 28px;
  }

  .sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 .et_pb_text_inner h2 {
    font-size: 24px;
    line-height: 34px;
    padding: 38px 0 12px !important;
  }

  .sol-bericht-blog .et_pb_text_2 {
    padding: 24px 24px 0;
  }

  .sol-bericht-blog .et_pb_text_3 {
    padding: 0 24px 24px;
  }

  .sol-bericht-blog .sol-kaart {
    padding: 24px 22px;
  }
}

/* ---- 7. een paneel is breder dan de tekstkolom, maar de tekst erin houdt dezelfde leesmaat.
         Zo staat er in het hele artikel nooit een regel van meer dan ~78 tekens, en blijft het
         verschil tussen tekst (660px) en vlakken (820px) het enige wat het ritme bepaalt. */
.sol-bericht-blog .et_pb_text_3 p,
.sol-bericht-blog .sol-insight > p,
.sol-bericht-blog .sol-download .sol-download-tekst p {
  max-width: 660px;
}

/* ---- 8. de inhoudsopgave in de rechterstrook (6-11-2026, verzoek Alexander).

   Gegenereerd door build_site.py uit de h2's van het artikel, op alle 16 blogs. Hij loopt mee
   terwijl je leest; op een telefoon valt het raster terug naar een kolom en staat hij als blok
   bovenaan. De vorm is de lichte kaart uit BLOKKEN.md blok 7: wit, 1px #e2e7e9, 25px rond. */

/* De rij om het artikel heeft overflow:hidden (hij klipt de afgeronde onderhoeken van zijn
   kader). Dat maakt er een scrollbox van en daarmee werkt position:sticky niet meer: de
   inhoudsopgave bleef bovenaan hangen en scrolde het beeld uit. overflow:clip klipt precies
   hetzelfde, inclusief de ronding, maar maakt geen scrollbox, dus de inhoudsopgave loopt weer
   mee. Alleen op blogartikelen, zodat geen andere pagina dit merkt. */
.sol-blogartikel .et_pb_section_1 .et_pb_row {
  overflow: clip;
}

.sol-blogartikel .sol-inhoud {
  grid-column: 2;
  grid-row: 1;            /* zonder deze regel zet het raster het artikel in rij 2 */
  position: sticky;
  /* de vaste kop is 112px hoog; met 150px blijft er bijna 40px lucht tussen het menu en de doos
     in plaats van dat hij eraan vastplakt (verzoek Alexander, 6-11-2026). Dezelfde 40px staat
     als marge boven de doos, zodat hij bij het begin van het artikel gelijk loopt met de eerste
     module en niet tegen de hero aan zit. */
  top: 150px;
  margin-top: 40px;
  /* een artikel met tien tussenkoppen geeft een lange lijst; die mag het scherm niet uitlopen,
     anders blijft de onderkant onbereikbaar zolang hij vastzit */
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #e2e7e9;
  border-radius: 25px;
  padding: 22px 20px;
  font-family: var(--sol-font-body);
}

.sol-blogartikel .sol-inhoud .sol-inhoud-kop {
  font-family: var(--sol-font-heading);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: .02em;
  color: var(--sol-navy);
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.sol-blogartikel .sol-inhoud ol {
  list-style: none;
  counter-reset: sol-inhoud;
  margin: 0;
  padding: 0 !important;
}

/* Nummer en tekst op dezelfde basislijn. Met een absoluut geplaatst nummer lukt dat niet: dat
   hangt aan de bovenkant van het regelitem en stond daardoor 5,5px boven de eerste regel van de
   link (gemeten 6-11-2026). Een flexregel met align-items: baseline laat de browser de twee
   basislijnen uitlijnen, ook als de link over twee regels loopt en ook als de lettergroottes
   verschillen (11px en 13px). */
.sol-blogartikel .sol-inhoud li {
  counter-increment: sol-inhoud;
  display: flex;
  align-items: baseline;
  gap: 8px;
  list-style: none;
  padding-left: 0;
  margin: 0 0 8px;
}

.sol-blogartikel .sol-inhoud li::before {
  content: counter(sol-inhoud);
  flex: 0 0 12px;
  text-align: right;
  font-size: 11px;
  line-height: 20px;
  color: var(--sol-magenta);
  font-weight: 700;
}

.sol-blogartikel .sol-inhoud li a {
  flex: 1 1 auto;
  min-width: 0;
}

.sol-blogartikel .sol-inhoud a {
  font-size: 13px;
  line-height: 20px;
  color: var(--sol-slate);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.sol-blogartikel .sol-inhoud a:hover,
.sol-blogartikel .sol-inhoud a:focus-visible {
  color: var(--sol-magenta);
  border-bottom-color: var(--sol-magenta);
}

/* een kop die je aanklikt landt onder de vaste header, niet erachter (webkwaliteit) */
.sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 h2[id] {
  scroll-margin-top: 150px;     /* 112px vaste kop plus lucht: de kop landt eronder, niet erachter */
}

@media (max-width: 980px) {
  /* een kolom: eerst de inhoudsopgave, daaronder het artikel. Niet meer meelopend, want dan
     neemt hij op een smal scherm het halve beeld in beslag. */
  .sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 {
    grid-template-columns: 1fr;
    padding: 0 40px;
  }

  .sol-blogartikel .sol-inhoud {
    grid-column: 1;
    grid-row: auto;        /* in een kolom moeten ze onder elkaar, niet in dezelfde cel */
    position: static;
    max-height: none;
    overflow: visible;
    margin-top: 30px;
    margin-bottom: 26px;
  }

  .sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 > .sol-artikelkolom {
    grid-row: auto;
  }

  .sol-blogartikel .sol-inhoud ol {
    columns: 2;
    column-gap: 24px;
  }
}

@media (max-width: 767px) {
  .sol-blogartikel .et_pb_section_1 .et_pb_column_4_4 {
    padding: 0 30px;
  }

  .sol-blogartikel .sol-inhoud ol {
    columns: 1;
  }
}

/* ---- 9. video in een artikel (6-11-2026, de AI-tip bij /blog/scans-automatisch-uitlezen/).

   De video loopt over de volle breedte van de tekstkolom, net als de alinea's eromheen (verzoek
   Alexander, 6-11-2026). Hij is staand (1080x1350), dus bij 620px wordt hij 775px hoog; dat mag,
   het is de illustratie van het hele stuk. Geen geluid, dus geen ondertitels nodig, maar wel een
   bijschrift dat vertelt wat je ziet. preload="none" in de markup: het bestand is 4,2 MB en wordt
   pas geladen als iemand op afspelen drukt. Vorm: 25px rond, zoals de panelen en kaarten in
   BLOKKEN.md. */

.sol-blogartikel .sol-video {
  margin: 26px 0 30px;
  max-width: 100%;
}

.sol-blogartikel .sol-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 25px;
  background: var(--sol-light);
}

.sol-blogartikel .sol-video figcaption {
  margin-top: 12px;
  font-family: var(--sol-font-body);
  font-size: 14px;
  line-height: 24px;
  color: #5d6d75;
}


/* ---- 10. leesbaarheid van de titel op de herofoto (6-11-2026).

   De hero van een bericht komt uit het referentiebericht en heeft daar een verloop van #002835:
   dicht links, 0,7 op 28% en 0,4 op 72%. Bij een foto met een licht vlak achter de kop is dat te
   weinig. Nagemeten op 1440px, slechtste punt onder de h1 tegen de echte pixels van de foto:
   2,85:1 op /blog/mfa-uitzonderingen/, 3,16:1 op /blog/van-ai-hebben-naar-ai-gebruiken/ en
   3,17:1 op /blog/scans-automatisch-uitlezen/. De webkwaliteitstandaard vraagt 4,5:1 voor tekst
   op een foto, dus alle drie zakten erdoor.

   Hieronder ligt een extra laag over de hero, alleen links waar de tekst staat; rechts blijft de
   foto onaangeraakt. Alleen op onze eigen berichten (sol-bericht-blog): de gespiegelde blogs
   hebben hetzelfde verloop en dezelfde tekortkoming, maar daar is het de vormgeving van de live
   site en dat is een aparte afweging. */

.sol-bericht-blog .et_pb_section_0::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(0, 40, 53, .5) 0%,
    rgba(0, 40, 53, .5) 55%,
    rgba(0, 40, 53, 0) 88%);
}

/* de kop en de knop horen boven die laag te staan */
.sol-bericht-blog .et_pb_section_0 > .et_pb_row {
  position: relative;
  z-index: 1;
}
/* /assets/css/sol-zoek.css */
/* Solipsis - zoeken (25-09-2026).

   De site is statisch; het zoeken gebeurt in de browser met de index uit
   tools/build_zoekindex.py (/assets/zoek-index.json). Dit bestand staat op elke pagina, net als
   sol-brand.css, want het vergrootglas staat in de header.

   Zonder JavaScript is er niets te zien: de knop staat op display:none en het script zet pas
   `sol-zoek-aan` op <html> als het draait. Zo krijgt niemand een knop die niets doet.

   Kleuren en vormen komen uit de huisstijl: donkerblauw #002835, magenta #a93a6d, grijs #efefef,
   hoekronding 25px zoals de kaarten op de homepage. */

/* Het vergrootglas: een ronde knop met een dunne ring, donkerblauw icoon, magenta bij hover.
   Twee dingen zijn hier belangrijk:
   - `position: relative` met een z-index, anders ligt Divi's .logo_container eroverheen en komt
     een klik nooit bij de knop aan (gemerkt 25-09-2026);
   - `float: right` zodat hij in de rij van Divi meeloopt, met marge om hem op dezelfde hoogte te
     krijgen als het menu en de Contact-knop. */

.sol-zoek-knop {
  display: none;
  position: relative;
  z-index: 3;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  /* 6px eronder zetten: dan valt het hart van het rondje op het hart van de Contact-knop
     (gemeten 25-09-2026: die staat op 65px, het rondje zonder marge op 59px) */
  margin: 6px 0 0 14px;
  padding: 0;
  border: 1px solid rgba(0, 40, 53, .14);
  border-radius: 50%;
  background: #ffffff;
  color: #002835;
  cursor: pointer;
  float: right;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 200ms ease;
}

.sol-zoek-aan .sol-zoek-knop {
  display: inline-flex;
}

.sol-zoek-knop svg {
  display: block;
}

.sol-zoek-knop:hover,
.sol-zoek-knop:focus-visible {
  border-color: #a93a6d;
  background: #fdf5f8;
  color: #a93a6d;
  transform: translateY(-1px);
  outline: none;
}

.sol-zoek-knop:focus-visible {
  box-shadow: 0 0 0 3px rgba(169, 58, 109, .25);
}

/* de header schuift bij het scrollen dicht; de knop krimpt dan mee met het menu */
.et-fixed-header .sol-zoek-knop {
  width: 34px;
  height: 34px;
}

/* naast het mobiele menu staat hij dichter op de rand */
@media (max-width: 980px) {
  .sol-zoek-knop {
    margin-left: 10px;
  }
}

/* ---------------------------------------------------------------- het zoekvenster */

.sol-zoek-laag {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  /* het venster groeit mee met de resultaten in plaats van altijd de volle hoogte te vullen */
  align-items: flex-start;
  padding: 12vh 20px 20px;
  background: rgba(0, 40, 53, .55);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 200ms;
}

.sol-zoek-laag.is-open {
  opacity: 1;
  visibility: visible;
}

.sol-zoek-venster {
  width: 100%;
  max-width: 720px;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 25px;
  box-shadow: 0 30px 70px rgba(0, 40, 53, .3);
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform 200ms ease;
}

.sol-zoek-laag.is-open .sol-zoek-venster {
  transform: none;
}

.sol-zoek-balk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #e2e7e9;
}

.sol-zoek-balk svg {
  flex: none;
  color: #5d6d75;
}

.sol-zoek-veld {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 18px;
  line-height: 32px;
  color: #002835;
}

.sol-zoek-veld::placeholder {
  color: #8d9aa0;
}

.sol-zoek-veld:focus {
  outline: 0;
}

.sol-zoek-sluit {
  flex: none;
  border: 1px solid #e2e7e9;
  border-radius: 50px;
  background: #ffffff;
  color: #5d6d75;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  cursor: pointer;
}

.sol-zoek-sluit:hover {
  border-color: #002835;
  color: #002835;
}

/* de rij met soorten boven de resultaten: alles, en elk soort dat in de uitslag voorkomt */
.sol-zoek-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e7e9;
}

.sol-zoek-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid #e2e7e9;
  border-radius: 50px;
  background: #ffffff;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  color: #5d6d75;
  cursor: pointer;
  transition: all 180ms ease;
}

.sol-zoek-chip span {
  padding: 0 6px;
  border-radius: 50px;
  background: #f2f6f6;
  font-size: 11px;
  color: #8d9aa0;
}

.sol-zoek-chip:hover {
  border-color: #002835;
  color: #002835;
}

.sol-zoek-chip.is-aan {
  background: #002835;
  border-color: #002835;
  color: #ffffff;
}

.sol-zoek-chip.is-aan span {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}

.sol-zoek-chip:focus-visible {
  outline: 3px solid #a93a6d;
  outline-offset: 2px;
}

.sol-zoek-uitslag {
  overflow-y: auto;
  padding: 8px 10px 14px;
}

.sol-zoek-melding {
  padding: 18px 12px;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  line-height: 26px;
  color: #5d6d75;
}

.sol-zoek-teller {
  padding: 10px 12px 4px;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8d9aa0;
}

.sol-zoek-rij {
  display: block;
  padding: 12px 14px;
  border-radius: 18px;
  text-decoration: none;
  color: inherit;
}

.sol-zoek-rij:hover,
.sol-zoek-rij.is-actief {
  background: #f2f6f6;
}

.sol-zoek-kop {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.sol-zoek-titel {
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 16px;
  line-height: 26px;
  font-weight: 700;
  color: #002835;
}

.sol-zoek-soort {
  padding: 2px 10px;
  border-radius: 50px;
  background: #efefef;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: #5d6d75;
  white-space: nowrap;
}

.sol-zoek-fragment {
  margin: 2px 0 0;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: #5d6d75;
}

.sol-zoek-fragment mark {
  background: rgba(168, 216, 94, .45);
  color: #002835;
  padding: 0 2px;
  border-radius: 3px;
}

@media (max-width: 640px) {
  .sol-zoek-laag {
    padding: 8vh 12px 12px;
  }

  .sol-zoek-venster {
    max-height: 84vh;
  }

  .sol-zoek-chips {
    padding: 12px 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .sol-zoek-chip {
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-zoek-laag,
  .sol-zoek-venster,
  .sol-zoek-knop {
    transition: none;
  }
}
/* /assets/css/sol-consent.css */
/* Solipsis - opmaak van de cookiemelding (27-09-2026).

   Een strook onderaan het scherm, niet een vlak over de hele pagina: de bezoeker kan gewoon
   doorlezen terwijl hij kiest. Kleuren uit de huisstijl (donkerblauw #002835, magenta #a93a6d),
   hoekronding 25px zoals de kaarten. De twee knoppen zijn even groot en even duidelijk; "weigeren"
   mag niet moeilijker te vinden zijn dan "accepteren".

   De markup maakt src/js/sol-consent.js; zonder JavaScript is er geen melding en draait er ook
   geen tracking. */

.sol-ck {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  padding: 0 16px 16px;
  transform: translateY(110%);
  transition: transform 260ms ease;
}

.sol-ck.is-open {
  transform: none;
}

.sol-ck-binnen {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 26px;
  border-radius: 25px;
  /* een dun wit randje: de strook komt daardoor beter los van de pagina eronder
     (verzoek Alexander, 27-09-2026) */
  border: 1px solid rgba(255, 255, 255, .28);
  background: #002835;
  color: #efefef;
  box-shadow: 0 22px 50px rgba(0, 40, 53, .35);
}

.sol-ck-tekst p {
  margin: 0;
  font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
  font-size: 14px;
  line-height: 24px;
  color: rgba(255, 255, 255, .85);
}

.sol-ck-kop {
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif !important;
  font-size: 18px !important;
  font-weight: 700;
  line-height: 26px !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

.sol-ck-tekst a {
  color: #ffffff;
  text-decoration: underline;
}

.sol-ck-tekst a:hover {
  color: #ffffff;
  text-decoration: none;
}

.sol-ck-knoppen {
  flex: none;
  display: flex;
  gap: 10px;
}

.sol-ck-knop {
  min-width: 130px;
  padding: 13px 22px;
  border-radius: 50px;
  border: 2px solid transparent;
  font-family: 'Ubuntu', Helvetica, Arial, Lucida, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease;
}

.sol-ck-knop--ja {
  background: #a93a6d;
  color: #ffffff;
}

.sol-ck-knop--ja:hover {
  background: #c7387f;
}

.sol-ck-knop--nee {
  background: transparent;
  border-color: rgba(255, 255, 255, .5);
  color: #ffffff;
}

.sol-ck-knop--nee:hover {
  border-color: #ffffff;
}

.sol-ck-knop:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* de knop in de voet waarmee je je keuze herziet: leest als de links ernaast */
.sol-ck-herzie {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.sol-ck-herzie:hover {
  text-decoration: underline;
}

@media (max-width: 860px) {
  .sol-ck {
    padding: 0 10px 10px;
  }

  .sol-ck-binnen {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
    border-radius: 22px;
  }

  .sol-ck-knoppen {
    flex-direction: row;
  }

  .sol-ck-knop {
    flex: 1;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-ck {
    transition: none;
  }
}

/* ------------------------------------------------------------------ het koekje linksonder

   Een klein knopje dat op elke pagina blijft staan, zodat een bezoeker zijn cookiekeuze altijd kan
   aanpassen en niet eerst naar de voet hoeft te scrollen (verzoek Alexander, 27-09-2026). Links,
   want rechtsonder zit de omhoog-knop van Divi. Terwijl de melding zelf open staat is hij weg. */

.sol-ck-koekje {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(0, 40, 53, .14);
  border-radius: 50%;
  background: #ffffff;
  color: #002835;
  cursor: pointer;
  opacity: .85;
  box-shadow: 0 6px 18px rgba(0, 40, 53, .14);
  transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease, color 200ms ease;
}

.sol-ck-koekje:hover {
  opacity: 1;
  transform: translateY(-2px);
  border-color: #a93a6d;
  color: #a93a6d;
}

.sol-ck-koekje:focus-visible {
  opacity: 1;
  outline: 3px solid #a93a6d;
  outline-offset: 2px;
}

.sol-ck-koekje.is-weg {
  display: none;
}

@media (max-width: 860px) {
  .sol-ck-koekje {
    left: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
  }
}

@media print {
  .sol-ck-koekje,
  .sol-ck {
    display: none !important;
  }
}