/* Aanvullingen op de gesnoeide stylesheet. Los bestand, want purge_css.py
   overschrijft kloon-css.css bij elke ronde. */

/* De titelbalk ("Home pagina") is het enige element op de hele site dat
   'rajdhani-semibold' gebruikt - en daarvoor werd een apart lettertypebestand
   van 23 kB opgehaald. Rajdhani Bold staat er toch al voor de H1. */
h1.main-title, .main-title, .main-title .entry-title,
#top .title_container .main-title { font-family: 'rajdhani', sans-serif !important; font-weight: 700 !important; }

/* Het codeblok 'Met een Ondernemersprofiel...' vraagt om 'Open Sans' en dat is
   de enige reden dat de pagina nog naar fonts.googleapis.com gaat. De site
   heeft Open Sans Light al lokaal staan. */
.fbc-kaart, .fbc-kaart * { font-family: 'open-sans-light', 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; }

/* --- contrast ---------------------------------------------------------
   Deze regels stonden eerst als los <style> in de kop, maar LiteSpeed trok
   die in zijn bundel en die bundel halen we juist weg. Hier staan ze veilig. */

/* Links in de voettekst: #5DD4B2 op wit is 1,82 : 1 - ver onder de norm.
   #1B74B3 is het blauw van FBC en haalt 5,01 : 1. */
#footer a,
#footer .widget a,
#footer .widget_archive a,
#footer .widget_categories a,
#footer .widget_nav_menu a { color: #1B74B3 !important; }
#footer a:hover { color: #10324F !important; }

/* Kruimelpad en de link ín de paginatitel: #888888 op #F8F8F8 is 3,34 : 1.
   #5C6B78 haalt 5,16 : 1 - hetzelfde grijs als in het hoofdmenu.
   De paginatitel zelf blijft #1B74B3; die zat al goed. */
.title_container .breadcrumb,
.title_container .breadcrumb a,
.title_container .breadcrumb-title,
.title_container .trail-end,
.title_container .main-title a { color: #5C6B78 !important; }

/* --- koppenvolgorde zonder ontwerpwijziging ---------------------------
   kloon-toegankelijkheid.php zet de vijf whitepaper-koppen van H4 naar H3,
   zodat na de H2 geen niveau wordt overgeslagen. Enfold hangt zijn opmaak
   aan de tag, dus die koppen sprongen daardoor van 24 px naar 35 px en de
   kaarten werden 51 px hoger. Gemeten op kloon A is de H4 op élke breedte
   24 px, en de regelhoogte is 1.1em - niet 26,4 px vast: waar Enfold de
   kop op 20 px zet (/samenwerking/) hoort de regelhoogte 22 px te zijn.
   De selector moet `#top #wrap_all .all_colors h3` verslaan; vandaar de id.
   Geen !important: Enfold geeft sommige van deze koppen een eigen maat per
   element (op /samenwerking/ is dat 20 px, op de homepage 24 px). Met
   !important overschreef deze regel die - en dan klopt de ene wel en de
   andere niet. Zonder !important wint Enfolds eigen regel gewoon, en vangt
   deze regel alleen het gat op dat door de tagwissel ontstaat. */
#top #wrap_all .all_colors h3.kloon-kop-h4,
h3.kloon-kop-h4 { font-size: 24px; line-height: 1.1em; }

/* --- toestanden die purge_css.py nooit te zien kreeg --------------------
   Het snoeien test elke regel tegen de échte DOM van alle 45 pagina's. Wat
   alleen verschijnt ná een handeling of in een foutsituatie staat daar niet
   in, en verdwijnt dus onterecht. Gevonden op /blog/, die "Niets gevonden"
   toont: het zoekformulier kreeg 20 px marge in plaats van 40 px ruimte
   eronder, want #searchform bestaat alleen in die toestand.
   Dezelfde blinde vlek geldt voor 404, zoekresultaten en formulierfouten. */
/* 61 regels, letterlijk overgenomen uit kloon A. */
#searchform #searchsubmit,#top .menu-item-search-dropdown>a,.av_ajax_search_image,.iconfont{font-size:17px}
#top #searchform{margin:0;padding:0}
#top #searchform>div{position:relative;max-width:300px}
#top .widget #searchform>div{margin:0;max-width:100%}
#top #searchform br{display:none}
#searchform .av_searchform_search.avia-svg-icon{position:absolute;top:0;right:0;z-index:500;font-size:17px;margin:12px;pointer-events:none}
#searchform.ajax_loading_now .av_searchform_search.avia-svg-icon{display:none}
#searchform .av_searchform_search.avia-svg-icon:hover{cursor:pointer}
.avia-search-tooltip #searchform .av_searchform_search.avia-svg-icon{margin-top:9px}
#top #s{width:100%;position:relative;padding:11px 47px 11px 5px;z-index:1;margin:0;box-shadow:none}
#top #searchsubmit,.ajax_load{width:40px;height:100%;line-height:40px;padding:0;position:absolute;right:0;top:0;z-index:2;margin:0;border-radius:0;min-width:40px}
.avia-search-tooltip #searchform>div{margin:16px}
#top #searchform .ajax_search_response{line-height:1.4em;font-size:12px;margin:0}
.template-search #searchform>div{max-width:100%;margin-bottom:0}
#top #search-fail{padding-left:0}
#top #search-fail #searchform{padding-bottom:40px}
.socket_color #searchform .av_searchform_search.avia-svg-icon svg:first-child{fill:var(--enfold-socket-color-constant-font);stroke:var(--enfold-socket-color-constant-font)}
.socket_color .av_searchform_wrapper .av-search-icon:not(.av-input-field-icon){color:var(--enfold-socket-color-constant-font)}
.socket_color .av_searchform_wrapper .av-search-icon.avia-svg-icon:not(.av-input-field-icon) svg:first-child{fill:var(--enfold-socket-color-constant-font);stroke:var(--enfold-socket-color-constant-font)}
.socket_color #searchform .av_searchform_search.avia-svg-icon svg:first-child:hover{fill:var(--enfold-socket-color-bg);stroke:var(--enfold-socket-color-bg)}
.socket_color #searchform .av_searchform_search.avia-svg-icon:hover ~ #searchsubmit{background-color:var(--enfold-socket-color-secondary);border-color:var(--enfold-socket-color-button-border2)}
.socket_color .av_searchsubmit_wrapper{background-color:var(--enfold-socket-color-primary)}
.socket_color .av_searchform_element_results .av_ajax_search_entry,.socket_color .av_searchform_element_results .av_ajax_search_title,.socket_color.av_searchform_element_results .av_ajax_search_entry,.socket_color.av_searchform_element_results .av_ajax_search_title{color:var(--enfold-socket-color-primary)}
.socket_color .av_searchform_element_results .ajax_search_excerpt,.socket_color.av_searchform_element_results .ajax_search_excerpt{color:var(--enfold-socket-color-meta)}
.socket_color .av_searchform_element_results .av_ajax_search_image,.socket_color.av_searchform_element_results .av_ajax_search_image{color:var(--enfold-socket-color-meta)}
.footer_color #searchform .av_searchform_search.avia-svg-icon svg:first-child{fill:var(--enfold-footer-color-constant-font);stroke:var(--enfold-footer-color-constant-font)}
.footer_color .av_searchform_wrapper .av-search-icon:not(.av-input-field-icon){color:var(--enfold-footer-color-constant-font)}
.footer_color .av_searchform_wrapper .av-search-icon.avia-svg-icon:not(.av-input-field-icon) svg:first-child{fill:var(--enfold-footer-color-constant-font);stroke:var(--enfold-footer-color-constant-font)}
.footer_color #searchform .av_searchform_search.avia-svg-icon svg:first-child:hover{fill:var(--enfold-footer-color-bg);stroke:var(--enfold-footer-color-bg)}
.footer_color #searchform .av_searchform_search.avia-svg-icon:hover ~ #searchsubmit{background-color:var(--enfold-footer-color-secondary);border-color:var(--enfold-footer-color-button-border2)}
.footer_color .av_searchsubmit_wrapper{background-color:var(--enfold-footer-color-primary)}
.footer_color .av_searchform_element_results .av_ajax_search_entry,.footer_color .av_searchform_element_results .av_ajax_search_title,.footer_color.av_searchform_element_results .av_ajax_search_entry,.footer_color.av_searchform_element_results .av_ajax_search_title{color:var(--enfold-footer-color-primary)}
.footer_color .av_searchform_element_results .ajax_search_excerpt,.footer_color.av_searchform_element_results .ajax_search_excerpt{color:var(--enfold-footer-color-meta)}
.footer_color .av_searchform_element_results .av_ajax_search_image,.footer_color.av_searchform_element_results .av_ajax_search_image{color:var(--enfold-footer-color-meta)}
.alternate_color #searchform .av_searchform_search.avia-svg-icon svg:first-child{fill:var(--enfold-alternate-color-constant-font);stroke:var(--enfold-alternate-color-constant-font)}
.alternate_color .av_searchform_wrapper .av-search-icon:not(.av-input-field-icon){color:var(--enfold-alternate-color-constant-font)}
.alternate_color .av_searchform_wrapper .av-search-icon.avia-svg-icon:not(.av-input-field-icon) svg:first-child{fill:var(--enfold-alternate-color-constant-font);stroke:var(--enfold-alternate-color-constant-font)}
.alternate_color #searchform .av_searchform_search.avia-svg-icon svg:first-child:hover{fill:var(--enfold-alternate-color-bg);stroke:var(--enfold-alternate-color-bg)}
.alternate_color #searchform .av_searchform_search.avia-svg-icon:hover ~ #searchsubmit{background-color:var(--enfold-alternate-color-secondary);border-color:var(--enfold-alternate-color-button-border2)}
.alternate_color .av_searchsubmit_wrapper{background-color:var(--enfold-alternate-color-primary)}
.alternate_color .av_searchform_element_results .av_ajax_search_entry,.alternate_color .av_searchform_element_results .av_ajax_search_title,.alternate_color.av_searchform_element_results .av_ajax_search_entry,.alternate_color.av_searchform_element_results .av_ajax_search_title{color:var(--enfold-alternate-color-primary)}
.alternate_color .av_searchform_element_results .ajax_search_excerpt,.alternate_color.av_searchform_element_results .ajax_search_excerpt{color:var(--enfold-alternate-color-meta)}
.alternate_color .av_searchform_element_results .av_ajax_search_image,.alternate_color.av_searchform_element_results .av_ajax_search_image{color:var(--enfold-alternate-color-meta)}
.main_color #searchform .av_searchform_search.avia-svg-icon svg:first-child{fill:var(--enfold-main-color-constant-font);stroke:var(--enfold-main-color-constant-font)}
.main_color .av_searchform_wrapper .av-search-icon:not(.av-input-field-icon){color:var(--enfold-main-color-constant-font)}
.main_color .av_searchform_wrapper .av-search-icon.avia-svg-icon:not(.av-input-field-icon) svg:first-child{fill:var(--enfold-main-color-constant-font);stroke:var(--enfold-main-color-constant-font)}
.main_color #searchform .av_searchform_search.avia-svg-icon svg:first-child:hover{fill:var(--enfold-main-color-bg);stroke:var(--enfold-main-color-bg)}
.main_color #searchform .av_searchform_search.avia-svg-icon:hover ~ #searchsubmit{background-color:var(--enfold-main-color-secondary);border-color:var(--enfold-main-color-button-border2)}
.main_color .av_searchsubmit_wrapper{background-color:var(--enfold-main-color-primary)}
.main_color .av_searchform_element_results .av_ajax_search_entry,.main_color .av_searchform_element_results .av_ajax_search_title,.main_color.av_searchform_element_results .av_ajax_search_entry,.main_color.av_searchform_element_results .av_ajax_search_title{color:var(--enfold-main-color-primary)}
.main_color .av_searchform_element_results .ajax_search_excerpt,.main_color.av_searchform_element_results .ajax_search_excerpt{color:var(--enfold-main-color-meta)}
.main_color .av_searchform_element_results .av_ajax_search_image,.main_color.av_searchform_element_results .av_ajax_search_image{color:var(--enfold-main-color-meta)}
.header_color #searchform .av_searchform_search.avia-svg-icon svg:first-child{fill:var(--enfold-header-color-constant-font);stroke:var(--enfold-header-color-constant-font)}
.header_color .av_searchform_wrapper .av-search-icon:not(.av-input-field-icon){color:var(--enfold-header-color-constant-font)}
.header_color .av_searchform_wrapper .av-search-icon.avia-svg-icon:not(.av-input-field-icon) svg:first-child{fill:var(--enfold-header-color-constant-font);stroke:var(--enfold-header-color-constant-font)}
.header_color #searchform .av_searchform_search.avia-svg-icon svg:first-child:hover{fill:var(--enfold-header-color-bg);stroke:var(--enfold-header-color-bg)}
.header_color #searchform .av_searchform_search.avia-svg-icon:hover ~ #searchsubmit{background-color:var(--enfold-header-color-secondary);border-color:var(--enfold-header-color-button-border2)}
.header_color .av_searchsubmit_wrapper{background-color:var(--enfold-header-color-primary)}
.header_color .av_searchform_element_results .av_ajax_search_entry,.header_color .av_searchform_element_results .av_ajax_search_title,.header_color.av_searchform_element_results .av_ajax_search_entry,.header_color.av_searchform_element_results .av_ajax_search_title{color:var(--enfold-header-color-primary)}
.header_color .av_searchform_element_results .ajax_search_excerpt,.header_color.av_searchform_element_results .ajax_search_excerpt{color:var(--enfold-header-color-meta)}
.header_color .av_searchform_element_results .av_ajax_search_image,.header_color.av_searchform_element_results .av_ajax_search_image{color:var(--enfold-header-color-meta)}

/* --- Enfolds standaardwidgets uitzetten -------------------------------
   Enfold toont Pagina's + Categorieen + Archief zodra een widgetgebied leeg
   is. Dat gebeurde in de zijbalk en in vier voettekstkolommen: 90 links per
   pagina, 2.542 px zijbalk en 1.339 px voettekst - met "Sample Page",
   "Over Frank (Kopie)" en de bedankpagina's er zichtbaar tussen.

   We zetten daarom een leeg blok in elk widgetgebied (dan valt Enfold niet
   terug) en verbergen dat lege blok hier. De nette route op de echte site is
   Enfold > Footer > "no footer widgets" plus een pagina-indeling zonder
   zijbalk; deze regel is het equivalent daarvan op de kloon. */
#top .widget_block { display: none !important; }
#top .container_wrap.sidebar_right .sidebar,
#top .container_wrap.sidebar_left .sidebar { display: none !important; }
#top #footer:not(:has(.widget:not(.widget_block))) { padding: 0 !important; }

/* De restcontainer die Enfold na de laatste ALB-sectie neerzet is op deze site
   leeg (alle inhoud zit in secties). Zonder de zijbalk erin bleef er 110 px wit
   met een scheidingslijn over. Alleen verbergen als er echt niets in staat -
   op blogberichten staat de tekst er wél in. */
#top .container_wrap.av_default_container_wrap:not(:has(.entry-content-wrapper *)) { display: none !important; }

/* Nu de zijbalk leeg is, mag de inhoud de volle breedte gebruiken. Zonder deze
   regel blijft op blogberichten een lege kolom van 25% naast de tekst staan. */
#top .container_wrap.sidebar_left .content,
#top .container_wrap.sidebar_right .content {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-right-width: 0 !important;
  border-left-width: 0 !important;
}

/* --- contrast op het gele contactblok --------------------------------
   Het FBC-blauw #1B74B3 op het geel #FED017 haalt 3,40 : 1. De norm voor
   gewone tekst is 4,5 : 1. Het navy #10324F uit dezelfde huisstijl haalt
   8,95 : 1 en is al de hoverkleur elders op de site.
   Het donkerblauw #176399 haalde maar 4,34 - net te weinig.
   Selector: het gele blok op /contact/ is een Enfold-kolom met een eigen
   hash-klasse. Op de echte site hoort dit in de kleurinstelling van dat
   element zelf; deze regel is het equivalent op de kloon.
   11-10-2026: de hash achter av-kj8ppcmk- van de eerste kolom veranderde met
   Enfold 8.2, waardoor het telefoonnummer blauw bleef. Nu op het vaste deel
   (av-kj8ppcmk-, alleen op /contact/, pagina 331), los van de hash. */
#top.page-id-331 .flex_column[class*="av-kj8ppcmk-"] a:not(.avia-button) { color: #10324F !important; }
#top.page-id-331 .flex_column[class*="av-kj8ppcmk-"] a:not(.avia-button):hover { color: #000 !important; }

/* --- aantikbaar kruimelpad -------------------------------------------
   De "home"-link in het kruimelpad is 36 x 15 px; de norm is 24 x 24.
   De negatieve marge vangt de extra padding op, zodat de balk even hoog
   blijft en er niets verschuift. */
#top .breadcrumb a,
#top .breadcrumb .trail-begin {
  display: inline-block;
  min-width: 24px;
  padding-top: 5px; padding-bottom: 5px;
  margin-top: -5px; margin-bottom: -5px;
}

/* --- punten van Franks to-do-lijst, 17-09 -----------------------------

   1. Menukleur. De menulinks stonden op #888888: op wit is dat 3,54 : 1 en
      de norm is 4,5. #5C6B78 haalt 5,48 en is hetzelfde grijs als in het
      kruimelpad, dus het blijft in de huisstijl. */
#top #header .av-main-nav > li > a,
#top #header .av-main-nav > li > a .avia-menu-text { color: #5C6B78; }

/* 2. Zichtbare focus. Vijftien van de zeventien knoppen hadden outline:none
      en geen schaduw, dus wie met het toetsenbord navigeert ziet niet waar hij
      is. :focus-visible toont de rand alleen bij toetsenbordgebruik, dus voor
      wie klikt verandert er niets. */
#top a.avia-button:focus-visible,
#top button:focus-visible,
#top input:focus-visible,
#top textarea:focus-visible,
#top select:focus-visible,
#top .av-main-nav > li > a:focus-visible,
#top #main a:focus-visible {
  outline: 3px solid #1B74B3;
  outline-offset: 2px;
  border-radius: 2px;
}

/*    11-10 (ronde 3): sinds kloon-landmarks.php staat de voetregel (#socket) buiten
      #main, dus de regel hierboven raakte Facebook, LinkedIn, Privacyverklaring en
      Algemene voorwaarden niet meer. Op het navy vlak geel in plaats van blauw:
      #FED017 op #10324F is 8,9 : 1, het blauw zou 2,3 : 1 zijn. */
#top #socket a:focus-visible {
  outline: 3px solid #FED017;
  outline-offset: 2px;
  border-radius: 2px;
}

/* 3. De knop "Plan een kennismaking" op /samenwerking/. In rust is hij zwart op
      geel, maar bij hover wordt de vulling wit terwijl de tekst geel blijft:
      1,46 : 1, praktisch onzichtbaar. De drie exemplaren hebben elk een eigen
      hash-klasse van Enfold. De knoppen "Lees meer" en "Lees hieronder verder"
      zijn wél goed (geel op zwart, ruim 14 : 1) en blijven dus ongemoeid. */
#top .avia-button.av-m9q5a40m-0e023de374cc41feaa618a240970766d:hover,
#top .avia-button.av-5crg6w0-844bc6edf2fc331a144a79a15eabbc15:hover,
#top .avia-button.av-1gw2m4g-7629b83bf985b55119f31fd5909bbb4f:hover,
#top .avia-button.av-m9q5a40m-0e023de374cc41feaa618a240970766d:focus,
#top .avia-button.av-5crg6w0-844bc6edf2fc331a144a79a15eabbc15:focus,
#top .avia-button.av-1gw2m4g-7629b83bf985b55119f31fd5909bbb4f:focus {
  background-color: #10324F !important;
  color: #FED017 !important;
  border-color: #10324F !important;
}

/* 4. Het contactformulier viel op kloon B in één kolom. Enfold zet de helften
      naast elkaar met .form_element_half (float:left, margin-left:1%,
      clear:none) en breekt de rij met .first_form (clear:both, margin-left:0).
      Beide regels hebben dezelfde gewichtsklasse, dus de volgorde beslist. In
      het opgeschoonde bestand staat .first_form nu vóór .form_element_half in
      plaats van erna, waardoor clear:none en die 1% marge winnen: 5 px te breed
      voor twee kolommen, dus elk veld zakt naar een eigen regel. Deze regel is
      een klasse zwaarder en werkt daardoor los van de volgorde. Gemeten op
      kloon A: Naam en Bedrijfsnaam op x=786 en x=1043, gelijke y. */
#top .avia_ajax_form .first_form {
  clear: both;
  margin-left: 0;
}

/* 5. Het blok met cookie-instellingen stond als gewone inhoud onderaan elke
      pagina, 452 px hoog en zo'n 125 woorden. Op de live site staat datzelfde
      blok op display:none tot je in de cookiebalk op "instellingen" klikt.

      Oorzaak: de opschoning heeft de regel weggehaald. Logisch vanuit het
      gereedschap gezien, want het blok is nooit open als je de pagina's
      afloopt, en dus lijkt de regel ongebruikt. Dezelfde soort fout als de 61
      zoekformulierregels en de kolommen van het contactformulier.

      Overgenomen uit de samengevoegde stylesheet van de live site, zodat het
      gedrag gelijk is. De popup-variant blijft werken: die zet zelf
      display:block zodra hij geopend wordt. */
#top .av-inline-modal {
  padding: 20px;
  border-radius: 4px;
  min-width: 250px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  display: none;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
  max-height: 80vh;
  overflow: auto;
}
#top .avia-popup .av-inline-modal {
  display: block;
  opacity: 1;
}

/* 6. De kop bleef op de kloon niet bovenaan staan bij het scrollen, en daardoor
      was elke pagina ongeveer 250 px hoger dan op live.

      Oorzaak: twee regels die samen werken zijn bij de opschoning verdwenen.
      Enfold zet de kop vast met position:fixed en compenseert dat met
      padding-top op #main. Zonder die twee neemt de kop gewoon ruimte in en
      scrollt hij mee naar boven weg.

      Gemeten voor: kloon #header position relative, #main begint op 87 px,
      pagina 3009 px. Live: #header fixed, #main begint op 0, pagina 2700 px.

      Letterlijk overgenomen uit de samengevoegde stylesheet van de live site.
      Dit is de vierde regel die de opschoning had weggegooid, na de
      zoekformulieren, de kolommen van het contactformulier en het cookieblok. */
.html_header_top.html_header_sticky #header {
  position: fixed;
}
.html_header_top.html_header_sticky #main {
  padding-top: 88px;
}

/* 7. De onderste balk was op de kloon 118 px hoog tegen 54 px op live. Zelfde
      inhoud, maar de sociale iconen stonden op een eigen regel in plaats van
      rechts naast de copyrighttekst.

      Ook hier waren de regels bij de opschoning verdwenen. Vier regels uit de
      stylesheet van de live site, letterlijk overgenomen. */
#socket .social_bookmarks {
  float: right;
  margin: -10px 0 0 30px;
  position: relative;
}
#socket .social_bookmarks li {
  border-radius: 300px;
  border: none;
  overflow: hidden;
  top: 5px;
  position: relative;
}
#socket .social_bookmarks li a {
  border-radius: 300px;
}
#socket .social_bookmarks li a svg:first-child {
  height: 11px;
  width: auto;
  margin-bottom: -2px;
}

/* 8. De cookiebalk had op de kloon helemaal geen opmaak meer.

      Gemeten: op live is de balk `position: fixed` met een zwarte achtergrond
      op 85 procent en witte tekst, onderaan het scherm. Op de kloon stond hij
      op `static` met een doorzichtige achtergrond, dus als een blok tekst
      middenin de pagina, met drie grijze standaardknoppen. Er was ook geen
      regel die hem laat verdwijnen zodra iemand kiest.

      Dat is het eerste wat een bezoeker ziet, dus dit telt zwaarder dan de
      meeste andere verschillen. Alle regels hieronder komen letterlijk uit de
      samengevoegde stylesheet van de live site.

      Zesde vondst van dezelfde soort. Het patroon is inmiddels duidelijk: wat
      alleen bestaat in een toestand die je tijdens het meten niet maakt,
      overleeft de opschoning niet. Een cookiebalk is na de eerste klik weg.

      Let op bij het overnemen: tien van deze regels staan op live binnen een
      @media-blok. Mijn eerste poging trok ze daaruit los, en toen gold de
      mobiele regel `.responsive .avia-cookie-consent p{display:block}` ook op
      desktop. Gevolg: de tekst in de balk viel op twee regels in plaats van
      een. Dat zag ik op de schermafdruk, niet in de getallen. Hieronder staan
      ze weer netjes in hun eigen media-blok.

      Apart punt voor Frank: de knop "Niet akkoord" heeft op live de kleur
      #FF75B5 op wit. Dat is ongeveer 2,4 : 1 en dus te licht om goed te lezen.
      Ik neem het over zoals het op live staat en zet het als vraag op de lijst
      in plaats van het stilletjes te veranderen. */
#top .avia-cookie-consent-modal-buttons-wrap{text-align:center}
.avia-cookie-consent{width:100%;position:fixed;background-color:rgba(0,0,0,0.85);z-index:999;color:rgba(255,255,255,0.9);padding:1.1em;text-align:center;opacity:1;visibility:visible;transition:all 0.3s ease-in-out;overflow:hidden}
.avia-cookie-consent .container{float:none !important;padding:0 !important}
.avia-cookie-consent a.avia_cookie_infolink,.avia-cookie-consent p,.avia-cookie-consent .avia-cookie-consent-button{display:inline-block;vertical-align:middle;font-size:12px;letter-spacing:0.05em}
.avia-cookie-consent a.avia_cookie_infolink{color:inherit}
.avia-cookie-consent p{margin:0}
.avia-cookie-consent a.avia_cookie_infolink,.avia-cookie-consent p{margin-right:0.5em}
.avia-cookie-consent .avia-cookie-consent-button,.avia-popup .avia-cookie-consent-button{cursor:pointer;display:inline-block;background-color:#fff;border:2px solid transparent;color:#000;padding:1.1em;min-width:80px;border-radius:3px;text-decoration:none;transition:all 0.3s ease-in;line-height:1;white-space:nowrap;margin:0 0 0 6px}
.avia-cookie-consent .avia-cookie-consent-button.av-extra-cookie-btn,.avia-popup .avia-cookie-consent-button.av-extra-cookie-btn{color:#fff;background-color:transparent;border-color:#fff}
.avia-cookie-consent .avia-cookie-consent-button.avia-cookie-hide-notification,.avia-popup .avia-cookie-consent-button.avia-cookie-hide-notification{background-color:#fff;color:#FF75B5}
.avia-cookie-consent .avia-cookie-consent-button.hidden{display:none}
a.avia-cookie-consent-button:hover{opacity:0.9}
.avia-cookiemessage-bottom{bottom:0;left:0}
.avia-cookiemessage-top{top:0;left:0}
.avia-cookiemessage-top-left,.avia-cookiemessage-bottom-left,.avia-cookiemessage-top-right,.avia-cookiemessage-bottom-right{width:25%}
.avia-cookiemessage-top-left a.avia_cookie_infolink,.avia-cookiemessage-bottom-left a.avia_cookie_infolink,.avia-cookiemessage-top-right a.avia_cookie_infolink,.avia-cookiemessage-bottom-right a.avia_cookie_infolink,.avia-cookiemessage-top-left p,.avia-cookiemessage-bottom-left p,.avia-cookiemessage-top-right p,.avia-cookiemessage-bottom-right p{display:block;margin-right:0}
.avia-cookiemessage-top-left .avia-cookie-consent-button,.avia-cookiemessage-bottom-left .avia-cookie-consent-button,.avia-cookiemessage-top-right .avia-cookie-consent-button,.avia-cookiemessage-bottom-right .avia-cookie-consent-button{margin:0.5em}
.avia-cookiemessage-bottom-right{bottom:30px;right:30px}
.avia-cookiemessage-top-right{top:30px;right:30px}
.avia-cookiemessage-bottom-left{bottom:30px;left:30px}
.avia-cookiemessage-top-left{top:30px;left:30px}
.avia-cookie-consent.cookiebar-hidden{opacity:0;visibility:hidden}
.avia-cookie-consent.cookiebar-hidden-permanent{opacity:0;visibility:hidden}
.avia-cookiemessage-top.cookiebar-hidden{transform:translateY(-110%)}
.avia-cookiemessage-bottom.cookiebar-hidden{transform:translateY(110%)}
.avia-cookiemessage-bottom-left.cookiebar-hidden,.avia-cookiemessage-top-left.cookiebar-hidden{transform:translateX(-110%)}
.avia-cookiemessage-bottom-right.cookiebar-hidden,.avia-cookiemessage-top-right.cookiebar-hidden{transform:translateX(110%)}
.avia-cookie-consent.avia-cookiemessage-bottom.cookiebar-hidden{bottom:-50px}
body.admin-bar .avia-cookiemessage-top,body.admin-bar .avia-cookiemessage-top-right,body.admin-bar .avia-cookiemessage-top-left{margin-top:32px}
.av-inline-modal .avia-cookie-consent-modal-buttons-wrap{padding-bottom:10px}
@media only screen and (max-width:989px){.responsive .avia-cookie-consent .container{padding:0}}
@media only screen and (max-width:989px){.responsive .avia-cookie-consent a.avia_cookie_infolink,.responsive .avia-cookie-consent p{display:block;margin-right:0}}
@media only screen and (max-width:989px){.responsive .avia-cookie-consent-button{margin:0.5em}}
@media only screen and (max-width:989px){.responsive .av-framed-box .avia-cookiemessage-top,.responsive .av-framed-box .avia-cookiemessage-bottom{width:100% !important;left:0 !important}}
@media only screen and (max-width:989px){.responsive .av-framed-box .avia-cookiemessage-bottom{bottom:0 !important}}
@media only screen and (max-width:989px){.responsive .av-framed-box .avia-cookiemessage-top{top:0 !important}}
@media only screen and (max-width:989px){.responsive .avia-cookiemessage-top-left,.responsive .avia-cookiemessage-bottom-left,.responsive .avia-cookiemessage-top-right,.responsive .avia-cookiemessage-bottom-right{width:35%}}
@media only screen and (max-width:767px){body.responsive.admin-bar .avia-cookiemessage-top,body.responsive.admin-bar .avia-cookiemessage-top-left,body.responsive.admin-bar .avia-cookiemessage-top-right{margin-top:46px}}
@media only screen and (max-width:767px){.responsive .avia-cookiemessage-top-left,.responsive .avia-cookiemessage-bottom-left,.responsive .avia-cookiemessage-top-right,.responsive .avia-cookiemessage-bottom-right{width:55%}}
@media only screen and (max-width:479px){.responsive .avia-cookiemessage-top-left,.responsive .avia-cookiemessage-bottom-left,.responsive .avia-cookiemessage-top-right,.responsive .avia-cookiemessage-bottom-right{width:85% !important;left:7.5% !important;right:7.5% !important}}

/* 9. Een formulier met een foutmelding zag er niet uit als een fout.

      Getest door op de kloon een leeg contactformulier te verzenden: vijf
      velden werden gemarkeerd, maar ze bleven er precies hetzelfde uitzien.
      Rand grijs #e1e1e1, tekst gewoon donkergrijs. Op live krijgt een leeg
      verplicht veld een oranjerode rand en staat er een melding in een rood
      kader boven het formulier.

      Zevende vondst van dezelfde soort, en misschien wel de vervelendste: een
      bezoeker die iets vergeet, ziet niet wát hij vergeet en denkt dat de knop
      stuk is.

      Acht regels, letterlijk uit de stylesheet van de live site. */
#top #wrap_all .error .text_input,#top #wrap_all .error .text_area,#top #wrap_all .error .select{border:1px solid #DF653E}
#top #wrap_all .error .input_checkbox_label{color:#DF653E}
#ajaxresponse.hidden{visibility:visible;position:static;display:none}
#top .av-light-form,#top .av-light-form + .ajaxresponse *{color:#fff}
#top .av-light-form + .ajaxresponse .avia-form-success{background:transparent}
#top .av-dark-form,#top .av-dark-form + .ajaxresponse *{color:#222}
#top .av-dark-form + .ajaxresponse .avia-form-success{background:transparent}
#top .av-form-error-container{border:1px solid #BB1313;padding:15px;color:#BB1313;line-height:1.4em;font-size:13px;margin-bottom:20px}

/* 10. De zoekresultatenpagina miste zijn witruimte en de scheidingslijn.

       Vergeleken met live: de kop boven het zoekveld was 26 px in plaats van
       46, het blok eromheen 122 in plaats van 167, en de dunne lijn onder het
       zoekformulier ontbrak helemaal. Bij elkaar 145 px verschil.

       Achtste vondst. Deze staat alleen op de zoekpagina, en daar komt een
       opschoner alleen als je zelf iets intypt dat niets oplevert. */
.extra-mini-title{padding-bottom:20px}
.page-heading-container{position:relative;margin-bottom:40px;padding:0 0 44px 0;border-bottom-width:1px;border-bottom-style:solid;padding-right:50px}
.fullsize .page-heading-container{padding-right:0}
.page-heading-container .author_description{overflow:hidden}
.author-extra-border{display:block;position:absolute;bottom:-1px;width:600%;right:0;border-bottom-width:1px;border-bottom-style:solid}
.fullsize .author-extra-border{right:auto;left:-100%}
.sidebar_left .author-extra-border{right:auto;left:-50px}
.archive .av-content-full > .extra-mini-title{text-align:center}
.html_elegant-blog .template-author .extra-mini-title{display:none}

/* 11. De logolink bovenaan kreeg als enige geen focusrand bij navigeren met
       het toetsenbord. Elf van de twaalf elementen op de contactpagina hadden
       er wel een; deze viel buiten de opsomming in regel 2 hierboven. */
#top .logo a:focus-visible {
  outline: 3px solid #1B74B3;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   11-10-2026 (T1): leesbare formuliervelden.
   Enfold kleurt getypte tekst in velden met de meta-kleur #919191 (3,0 : 1 op wit)
   en de plaatshouder daarbovenop met opacity .5 (ongeveer 1,6 : 1). De norm is 4,5 : 1.
   Alleen de velden; de meta-kleur van datums en categorieen blijft zoals hij is.
   --------------------------------------------------------------------------- */
#top .main_color .input-text,
#top .main_color input[type='text'],
#top .main_color input[type='input'],
#top .main_color input[type='password'],
#top .main_color input[type='email'],
#top .main_color input[type='number'],
#top .main_color input[type='url'],
#top .main_color input[type='tel'],
#top .main_color input[type='search'],
#top .main_color textarea,
#top .main_color select {
  color: #4A4A4A;
}
.main_color textarea::placeholder,
.main_color input::placeholder {
  color: #6E6E6E;
  opacity: 1;
}

/* --- /mijn-groeiplan/: plek vrijhouden voor formulier 9 bovenaan (12-10-2026, ronde 6) ----------------------------
   Het ActiveCampaign-formulier staat als lege <div class="_form_9"> in de HTML en wordt gevuld zodra het script van
   ActiveCampaign klaar is. Gebeurt dat na de eerste weergave, dan verspringt de kolom met de kop (CLS 0,258 in alle drie
   de Lighthouse-runs). :empty houdt de plek vrij zolang het formulier er nog niet staat; daarna bepaalt het formulier
   zelf de hoogte, dus het eindbeeld blijft gelijk. Hoogtes per breedte gemeten met audit/prestaties/formhoogte.py.
   Verandert het formulier in ActiveCampaign (veld erbij of eraf), meet dan opnieuw. */
#top ._form_9:empty { min-height: 321px; }
@media only screen and (max-width: 1279px) { #top ._form_9:empty { min-height: 345px; } }
@media only screen and (max-width: 989px) { #top ._form_9:empty { min-height: 357px; } }
@media only screen and (max-width: 767px) { #top ._form_9:empty { min-height: 333px; } }
@media only screen and (max-width: 599px) { #top ._form_9:empty { min-height: 370px; } }
@media only screen and (max-width: 400px) { #top ._form_9:empty { min-height: 394px; } }

/* 14-10-2026 (QA mobiel/WCAG, qa-2026-10-14/02-mobiel-wcag.md) */
/* A: lange woorden in koppen en tekst op telefoons afbreken in plaats van afknippen (WCAG 1.4.10) */
@media only screen and (max-width: 767px) {
  #top #main h1, #top #main h2, #top #main h3, #top #main h4, #top #main h5, #top #main h6,
  #top #main .avia_textblock p, #top #main .avia_textblock li, #top #main button { overflow-wrap: anywhere; }
}
/* B: focus zichtbaar in het mobiele menu (WCAG 2.4.7) */
#top #av-burger-menu-ul a:focus-visible { outline: 3px solid #1b74b3; outline-offset: -3px; }
/* C: focus niet onder de open cookiebalk laten verdwijnen (WCAG 2.4.11); alleen scrollmarge, geen zichtbare ruimte */
html:has(.avia-cookie-consent:not(.cookiebar-hidden)) { scroll-padding-bottom: 200px; }