/* Maatwerk-opmaak voor auto.ibl82.nl.
   Samengesteld door server\bouw-assets.ps1 uit de losse bronbestanden;
   niet met de hand aanpassen. */

/* ======================================================================
   Zijmarge (hele site)
   ====================================================================== */

/* ==========================================================================
   Zijmarge: één maat voor de hele site.

   Feedback Peter (01-10-2026, op een MacBook Air 13): "Er moet aan beide
   zijkanten meer witruimte komen." Gemeten op 1280px breed begon alles, logo
   en tekst, op x=15: de container is 1280px en de enige lucht was de 15px die
   in de blokinstelling van elke rij en van de header stond.

   De maat komt nu uit Kadence zelf: Customizer > Layout > Content Edge Spacing
   (theme mod content_edge_spacing, gezet met server\zet-zijmarge.php). Kadence
   maakt daar --global-content-edge-padding van: 48px desktop, 32px tablet, 0
   mobiel. De footer en de berichtpagina's gebruiken die variabele al uit
   zichzelf.

   --avb-zijmarge is die maat met een ondergrens van 15px, zodat mobiel blijft
   zoals het was. Alles wat op de linkerlijn van het logo moet staan gebruikt
   deze variabele: de header, de buitenste Kadence-rijen, en de eigen secties
   (.avb-wg__binnen, .avb-doelgroep__binnen, .avb-cv__binnen, de
   OTYS-containers en het blad van de nieuwsberichten).

   Wil je de maat wijzigen: doe dat in de Customizer, niet hier.
   ========================================================================== */
:root {
  --avb-zijmarge: max(15px, var(--global-content-edge-padding, 15px));
}

/* Losse tekstblokken direct in de pagina, op een pagina met volle breedte
   (/faq/, /voor-kandidaten/, /handige-links/, /inloggen-job-alert/). Die
   hadden geen container en liepen van x=0 tot de rechterrand, 1425px breed.
   Ze beginnen nu op de lijn van het logo en lopen hooguit 860px door, de
   leesbreedte van de werkgeverspagina's. Met marge en niet met padding, zodat
   een opsomming zijn eigen inspringing houdt. */
body.content-width-fullwidth .entry-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table, figure, .wp-block-heading, .wp-block-list, .wp-block-table, .wp-block-buttons, .wp-block-image, .wp-block-separator, .wp-block-details, .interactions-form) {
  box-sizing: border-box;
  max-width: min(860px, calc(100% - 2 * var(--avb-zijmarge)));
  margin-left: max(var(--avb-zijmarge), calc((100% - 1280px) / 2 + var(--avb-zijmarge)));
  margin-right: auto;
}

/* Opsommingen in zo'n losse tekstpagina: de bolletjes staan buiten de lijst,
   dus zonder inspringing vielen ze op mobiel op x=0, buiten de marge
   (/handige-links/, 26-10-2026). Een lijst met eigen inline padding houdt die. */
body.content-width-fullwidth .entry-content > :is(ul, ol) {
  padding-left: 1.25em;
}

/* De WooCommerce-winkel (/winkel/) staat in Kadence' gewone container. Die
   krijgt op mobiel geen padding (Kadence-zijmarge daar 0), waardoor de
   productlijst op x=0 begon. Gevonden in de apparatentest van 02-10-2026. */
@media (max-width: 767px) {
  body.woocommerce.archive .content-container.site-container {
    padding-left: var(--avb-zijmarge);
    padding-right: var(--avb-zijmarge);
  }
}

/* Header en buitenste rijen hebben 15px in hun eigen blokinstelling. Onder
   768px blijft die gewoon staan. Geneste rijen (in een kolom of een slide)
   hebben geen eigen container en blijven buiten schot. */
@media (min-width: 768px) {
  header .wp-block-kadence-header-row .kadence-header-row-inner,
  .kb-row-layout-wrap > .kt-row-column-wrap.kb-theme-content-width,
  .entry-content > .kb-row-layout-wrap > .kt-row-column-wrap,
  .wrap.kt-clear > .kb-row-layout-wrap > .kt-row-column-wrap {
    padding-left: var(--avb-zijmarge);
    padding-right: var(--avb-zijmarge);
  }

  /* De footer staat in Kadence' eigen .site-container, die de zijmarge al
     geeft. De Kadence-rij in de footerwidget had daarbovenop nog 15px (en de
     onderbalk 20px), waardoor de footer rechts van het logo kwam te staan.
     Hier vult de rij alleen aan wat de container nog niet geeft: op desktop
     en tablet niets. */
  .site-footer .widget > .kb-row-layout-wrap > .kt-row-column-wrap {
    padding-left: calc(var(--avb-zijmarge) - var(--global-content-edge-padding, 0px));
    padding-right: calc(var(--avb-zijmarge) - var(--global-content-edge-padding, 0px));
  }
}

/* ======================================================================
   Menubalk (alle pagina's)
   ====================================================================== */

/* ==========================================================================
   Menubalk — altijd wit met donkere tekst, overal en in elke toestand.
   Het thema wisselde tussen een transparante variant (witte tekst, bedoeld
   voor een donkere hero) en een gewone variant. Dat leverde witte tekst op
   een witte balk zodra een pagina geen donkere hero had. Hieronder staat de
   transparante variant onvoorwaardelijk uit.
   ========================================================================== */

/* --- balk altijd wit --------------------------------------------------- */
.wp-block-kadence-header .wp-block-kadence-header-row,
.wp-block-kadence-header .kadence-header-row-inner,
.wp-block-kadence-header-desktop,
.wp-block-kadence-header-tablet {
  background-color: #ffffff !important;
}

/* --- lichte lijn onder de balk ------------------------------------------ */
/* Gevraagd op 02-10-2026: een witte balk boven een witte pagina, of boven het
   witte uitgeklapte menu, werd één groot wit vlak. Een lijn van 1px op de
   volle breedte geeft de balk een rand.
   De lijn hangt aan de rij zelf, zodat hij meebeweegt als de balk vastzet.
   Het menupaneel loopt achter de balk door en zit in de navigatielijst met
   z-index 99; de lijn ligt daar met 100 overheen, dus ook bij een open menu
   blijft hij zichtbaar. */
.wp-block-kadence-header .wp-block-kadence-header-row {
  position: relative;
}

.wp-block-kadence-header .wp-block-kadence-header-row::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #e5e9ef;
  z-index: 100;
  pointer-events: none;
}

/* --- tekst altijd donker ----------------------------------------------- */
.wp-block-kadence-header .kb-nav-link-content,
.wp-block-kadence-header .auto-heaader-login-link a,
.wp-block-kadence-header .auto-heaader-login-link .wp-block-navigation-item__label,
.wp-block-kadence-header .wp-block-navigation-item__content,
header.kb-mega-open .automotive-main-menu .kb-nav-link-content:not(.sub-menu .kb-nav-link-content),
header.kb-mega-open .auto-heaader-login-link ul.auto-heaader-login-link li.wp-block-navigation-item {
  color: #05183a !important;
}

/* pijltjes mee in dezelfde kleur */
.wp-block-kadence-header .kb-nav-dropdown-toggle-btn svg,
.wp-block-kadence-header .kb-nav-arrow-svg,
.wp-block-kadence-header .wp-block-navigation__submenu-icon svg,
.wp-block-kadence-header .auto-heaader-login-link svg,
header.kb-mega-open li.automotive-menu-item.has-children .automotive-menu-toggle svg {
  fill: #05183a !important;
  color: #05183a !important;
}

/* --- hover en actief in AVB-rood --------------------------------------- */
.wp-block-kadence-header .kb-nav-link-content:hover,
.wp-block-kadence-header .kb-nav-link-content:focus,
.wp-block-kadence-header .auto-heaader-login-link a:hover,
.wp-block-kadence-header li.current-menu-item > .kb-link-wrap > .kb-nav-link-content {
  color: #d50117 !important;
}

.wp-block-kadence-header .kb-nav-link-content:hover .kb-nav-arrow-svg,
.wp-block-kadence-header .kb-link-wrap:hover .kb-nav-dropdown-toggle-btn svg {
  fill: #d50117 !important;
}

/* --- uitklapmenu onder "Inloggen" ---------------------------------------- *\
   30-10-2026: "dit valt niet mooi". Het menu begon op de onderkant van het
   menu-item (y 67), 15px boven de onderrand van de witte balk (y 82). Dat
   stuk viel achter de balk weg, waardoor "Voor werknemers" half afgesneden
   was. Ook stond het links uitgelijnd op "Inloggen" en liep het rechts 80px
   van het scherm af.
   Nu: 16px lager, net onder de balk, en rechts uitgelijnd op het item. Het
   onzichtbare ::before vult de 16px ertussen, zodat het menu niet dichtklapt
   als je de muis van "Inloggen" naar beneden beweegt.                     */
.wp-block-kadence-header .auto-heaader-login-link .has-child > .wp-block-navigation__submenu-container {
  top: calc(100% + 16px) !important;
  left: auto !important;
  right: 0 !important;
}

.wp-block-kadence-header .auto-heaader-login-link .has-child > .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
}

/* --- precies één logo, altijd hetzelfde -------------------------------- */
/* Het thema houdt drie varianten aan (gewoon, sticky, transparant) en wisselt
   ertussen. Stonden er twee tegelijk aan, dan zag je twee logo's onder elkaar.
   Hieronder blijft altijd de gewone staan en de andere twee nooit. */
.wp-block-kadence-header .kb-identity .custom-logo,
.wp-block-kadence-header .kb-identity img.kb-img:not(.kb-img-transparent):not(.kb-img-sticky) {
  display: inline-block !important;
}

.wp-block-kadence-header .kb-identity .kb-img-transparent,
.wp-block-kadence-header .kb-identity .kb-img-sticky {
  display: none !important;
}

/* mocht er toch een tweede identity-blok in dezelfde rij staan */
.wp-block-kadence-header-desktop .kb-identity ~ .kb-identity,
.wp-block-kadence-header-tablet .kb-identity ~ .kb-identity {
  display: none !important;
}

/* --- het logo iets steviger ------------------------------------------- */
/* Feedback 06-08-2026: "net even te braaf". Het logo stond op 210x46 in een
   balk van 82px, dus met 18px lucht boven en onder; daardoor zweefde het.
   Het staat nu op 240x53 en vult de balk beter. Het logo-ontwerp zelf (meer
   gewicht in de letters) ligt bij Harvey - dit is puur de plaatsing, en met
   deze regel weer terug te zetten. */
.wp-block-kadence-header .kb-identity .custom-logo,
.wp-block-kadence-header .kb-identity img.kb-img:not(.kb-img-transparent):not(.kb-img-sticky) {
  width: 240px !important;
  height: auto !important;
  max-width: 100% !important;
}

/* op smalle schermen blijft de oude maat: daar telt elke pixel naast het
   hamburgermenu */
@media (max-width: 767px) {
  .wp-block-kadence-header .kb-identity .custom-logo,
  .wp-block-kadence-header .kb-identity img.kb-img:not(.kb-img-transparent):not(.kb-img-sticky) {
    width: 200px !important;
  }
}

/* --- rood bolletje achter Vacatures ------------------------------------ */
.kb-nav-link-content .link-highlight-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 8px;
  border-radius: 999px;
  background: #d50117;
  color: #ffffff !important;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

.kb-nav-link-content .link-highlight-label-text {
  color: #ffffff !important;
  font-size: 12px;
  line-height: 1;
}


/* ==========================================================================
   Een losse groep onderaan een megamenu, met een lijn erboven

   Werkgeversmenu, gevraagd op 17-08-2026: na "ATS-koppeling" extra witruimte,
   zodat Contact en Inloggen als aparte groep leesbaar zijn.
   Werkzoekendenmenu, gevraagd op 21-08-2026: Job alert onderaan de lijst, dan
   een streepje, dan Inloggen en Inschrijven.

   De klasse avb-menu-scheiding staat wel op het menu-item in WordPress, maar
   de eigen walker van het child theme (automotive-multi-column-menu) geeft elk
   <li> alleen automotive-menu-item mee en laat de eigen klassen vallen. Daarom
   grijpen we hier het item aan waar de link in zit; dat blijft kloppen als de
   volgorde nog verandert.

   Let op het begin van de id in plaats van de hele id: het megamenu staat twee
   keer in de pagina (bureaublad en mobiel), en het tweede exemplaar krijgt van
   WordPress "-1" achter zijn id. Met #menu-werkgeversitems alleen kreeg de
   mobiele versie de lijn niet.
   ========================================================================== */
[id^="menu-werkgeversitems"] > .automotive-menu-item:has(> a[href$="/contact/"]),
[id^="menu-werkzoekendenitems"] > .automotive-menu-item:has(> a[href*="kandidaten-login"]) {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid #e8ecf2;
}

/* ======================================================================
   Mobiel menu (off-canvas)
   ====================================================================== */

/* ==========================================================================
   Mobiel menu (off-canvas) — donkerblauw met witte tekst.

   Het off-canvas menu hergebruikt de desktop-meganavigatie. Twee dingen
   maakten het onleesbaar: avb-menu.css dwingt overal in de header donkere
   tekst af (bedoeld voor de witte balk) en de megamenu-rij heeft een eigen
   donkerrode achtergrond die als los blok over de items viel. Hieronder
   wordt alles binnen het off-canvas overschreven; de selectors zijn minstens
   even specifiek en staan later in de bundel, dus zij winnen.
   ========================================================================== */

@media (max-width: 1024px) {

/* --- paneel: donkerblauw, nette randafwerking --------------------------- */
.wp-block-kadence-off-canvas .kb-off-canvas-inner-wrap {
  background-color: #05183a !important;
  padding: 24px 20px 32px !important;
}

.wp-block-kadence-off-canvas .kb-off-canvas-close {
  color: #ffffff !important;
}

/* --- hoofditems: wit, ruim aanraakvlak, dunne scheidingslijn ------------ */
.wp-block-kadence-off-canvas .kb-navigation > li {
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.wp-block-kadence-off-canvas .kb-navigation > li > .kb-link-wrap {
  padding: 4px 0;
}

.wp-block-kadence-off-canvas .kb-nav-link-content {
  color: #ffffff !important;
  font-size: 17px;
  font-weight: 600;
}

.wp-block-kadence-off-canvas .kb-nav-link-content:hover,
.wp-block-kadence-off-canvas .kb-nav-link-content:focus {
  color: #ffffff !important;
  opacity: .85;
}

/* pijltjes wit en meedraaien bij openklappen */
.wp-block-kadence-off-canvas .kb-nav-dropdown-toggle-btn svg,
.wp-block-kadence-off-canvas .kb-nav-arrow-svg {
  fill: #ffffff !important;
  color: #ffffff !important;
  transition: transform .2s ease;
}

.wp-block-kadence-off-canvas .kb-nav-dropdown-toggle-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* --- megamenu-inhoud: gewoon een ingesprongen lijst --------------------- */
.wp-block-kadence-off-canvas ul.sub-menu.mega-menu {
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 0 10px !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}

.wp-block-kadence-off-canvas .automotive-mega-menu-container {
  background: none !important;
  background-color: transparent !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  box-shadow: none !important;
}

.wp-block-kadence-off-canvas .automotive-mega-menu-container .kt-row-column-wrap {
  padding: 0 !important;
}

/* de kop in het megapaneel herhaalt het hoofditem; overbodig in de lijst */
.wp-block-kadence-off-canvas .auto-mega-menu-heading {
  display: none !important;
}

.wp-block-kadence-off-canvas .automotive-menu-link {
  color: rgba(255, 255, 255, .88) !important;
  font-size: 15px;
  padding: 6px 0;
}

.wp-block-kadence-off-canvas .automotive-menu-link:hover,
.wp-block-kadence-off-canvas .automotive-menu-link:focus {
  color: #ffffff !important;
}

.wp-block-kadence-off-canvas .automotive-menu-toggle svg {
  fill: #ffffff !important;
}

/* tweede niveau (provincies, categorieën) iets verder ingesprongen */
.wp-block-kadence-off-canvas .automotive-menu.automotive-level-2 {
  padding-left: 14px;
}

/* het vacature-aantal-bolletje blijft rood; dat leest prima op donkerblauw */

/* --- zoekbalk bovenin (avb-mobielmenu.js zet hem neer) ------------------ */
.avb-menu-zoek {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 22px;
}

.avb-menu-zoek__veld {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: #05183a;
  font-size: 15px;
}

.avb-menu-zoek__veld::placeholder {
  color: #6b7688;
}

.avb-menu-zoek__knop {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #d50117 !important;
  color: #ffffff !important;
  cursor: pointer;
}

/* --- inloggen: de twee portaallinks altijd zichtbaar als knoppen -------- */
.wp-block-kadence-off-canvas .auto-heaader-login-link {
  margin-top: 22px;
}

/* avb-menu.css kleurt het tekst-span donkerblauw (voor de witte balk);
   hier erft het gewoon de kleur van de link zelf */
.wp-block-kadence-off-canvas .auto-heaader-login-link .wp-block-navigation-item__label {
  color: inherit !important;
}

/* "Inloggen" wordt een klein kopje in plaats van een uitklaplink */
.wp-block-kadence-off-canvas .auto-heaader-login-link .wp-block-navigation-submenu > .wp-block-navigation-item__content {
  color: rgba(255, 255, 255, .65) !important;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

.wp-block-kadence-off-canvas .auto-heaader-login-link .wp-block-navigation-submenu__toggle {
  display: none !important;
}

.wp-block-kadence-off-canvas .auto-heaader-login-link .wp-block-navigation__submenu-container {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  height: auto !important;
  overflow: visible !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 10px 0 0 !important;
  margin: 0 !important;
}

.wp-block-kadence-off-canvas .auto-heaader-login-link .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 11px 18px !important;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600;
  text-align: center;
}

.wp-block-kadence-off-canvas .auto-heaader-login-link .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgba(255, 255, 255, .1);
}

/* --- knop "Vacature plaatsen": witte pil met donkerblauwe tekst --------- */
.wp-block-kadence-off-canvas .kb-button {
  background: #ffffff !important;
  color: #05183a !important;
  width: 100%;
  justify-content: center;
  margin-top: 14px;
}

.wp-block-kadence-off-canvas .kb-button:hover,
.wp-block-kadence-off-canvas .kb-button:focus {
  background: #d50117 !important;
  color: #ffffff !important;
}

/* --- de zwarte laag over het paneel ------------------------------------- */
/* De mega-menu's krijgen op desktop een donkere overlay achter het
   uitklapmenu (ul.sub-menu.kb-nav-sub-menu.mega-menu:after in de
   Customizer-CSS, rgba(0,0,0,.5)). Die dimt daar de pagina erachter.
   In het mobiele menu staat datzelfde uitklapmenu gewoon in de kolom, zodat
   die overlay als een zwart vlak over "Werkgevers" en het inlogblok viel.
   Binnen het off-canvas heeft hij geen functie, dus daar uit. */
.wp-block-kadence-off-canvas ul.sub-menu.kb-nav-sub-menu.mega-menu:after,
.wp-block-kadence-off-canvas .kb-nav-sub-menu:after {
  content: none !important;
  display: none !important;
}

/* --- paneel over de volle breedte --------------------------------------- */
/* Het paneel was ruim 80% breed; daardoor bleef er rechts een strook van de
   pagina zichtbaar, wat verwarrend leest (besproken 06-08-2026). */
.wp-block-kadence-off-canvas .kb-off-canvas-inner-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* --- rust tussen de navigatie en het inlogblok -------------------------- */
.wp-block-kadence-off-canvas .kb-off-canvas-inner > nav.wp-block-navigation {
  margin-top: 22px;
}

}

/* ======================================================================
   Homepage
   ====================================================================== */

/* ==========================================================================
   Homepage — sectie "Onze klanten"
   Logo's staan standaard grijs en komen bij hover in kleur.
   De navigatieknoppen staan onder de logo's in plaats van erboven.
   ========================================================================== */

.kb-row-layout-id2052_9430f6-f4 ,
.kb-row-layout-id2768_ba0fce-40 {
  --avb-rood: #d50117;
  --avb-blauw: #05183a;
  --avb-rand: #e3e8ef;
}

/* ==========================================================================
   Teller achter de kop "Vakgebieden" — zelfde bolletje als in het menu.
   Het getal wordt door avb-home.js uit de vakgebieden zelf geteld.
   ========================================================================== */
.avb-teller {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  margin-left: 10px;
  border-radius: 999px;
  background: #d50117;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}

/* ==========================================================================
   Vakgebieden-tegels — donkere fade onderaan de foto.
   De plugin auto-global-accordion zet die verloop alleen op mobiel, waardoor
   de witte tekst op een lichte foto wegvalt. Hieronder staat hij overal.
   ========================================================================== */
.auto-accordion .auto-tab {
  position: relative;
}

.auto-accordion .auto-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52%;
  background: linear-gradient(
    to top,
    rgba(5, 24, 58, .90) 0%,
    rgba(5, 24, 58, .66) 28%,
    rgba(5, 24, 58, .28) 62%,
    rgba(5, 24, 58, 0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* het bijschrift moet boven de fade blijven staan */
.auto-accordion .auto-caption {
  position: absolute;
  z-index: 2;
}

.auto-accordion .auto-caption-header h3,
.auto-accordion .auto-vacature-number,
.auto-accordion .auto-description,
.auto-accordion .auto-caption-link {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* mobiel had al een eigen verloop; die wordt hier vervangen zodat er niet
   twee lagen over elkaar komen */
@media (max-width: 768px) {
  .auto-accordion.swiper-container .auto-caption { background: none; }
}

/* --- plaats en uren onder elkaar op de vacaturekaarten ------------------ *\
   Op de homepage staat onder de titel de plaatsnaam en daaronder het aantal
   uren, hetzelfde gegeven als op /vacatures/ maar zonder icoon. Beide regels
   stonden naast elkaar in een flexrij, waardoor ze in de spotlight tegen
   elkaar aan plakten ("Zoetermeer24 - 40 uur"). Ze staan nu onder elkaar,
   in beide blokken gelijk.                                                */
.automotive-latest-vacancies .automotive-vacancy-footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.automotive-spotlight-vacancies .automotive-vacancy-contnet > .automotive-usp {
  flex: 0 0 100%;
}

/* --- aantal vacatures achter de naam van het vakgebied -----------------
   Het getal komt uit de plugin (veld "Vacature Number" per vakgebied) en
   staat in de HTML als een eigen <span> naast de <h3>. Naam en aantal staan
   hier in één tekststroom: het aantal blijft daardoor altijd direct achter
   de naam staan en valt er nooit los onder, ook niet bij lange namen als
   "Training & opleiding". Peter vroeg daar in het overleg om. */
/* De plugin zet dit bijschrift in een flex-kolom; daarin wordt elk kind een
   eigen blok en komt het aantal onder de naam. Als gewone tekstblok lopen
   naam en aantal wel door elkaar heen. */
.auto-accordion .auto-caption-header {
  display: block;
  white-space: nowrap;
}

/* De tegels verschillen sterk in breedte: de open tegel is ruim 600px, de
   dichte tegels rond 240px. Een vaste 24px paste daar niet met het aantal
   erachter ("Administratief (144)" viel eronder). De naam schaalt daarom mee
   met de tegel zelf, met 24px als bovengrens, zodat naam en aantal op elke
   tegelbreedte op één regel blijven. */
.auto-accordion .auto-tab {
  container-type: inline-size;
}

.auto-accordion .auto-caption-header h3 {
  display: inline;
  font-size: min(24px, 6cqw);
}

.auto-accordion .auto-vacature-number {
  display: inline;
  margin-left: 8px;
  color: #ffffff;
  font-weight: 400;
  font-size: .78em;
  white-space: nowrap;
  opacity: .92;
}

.auto-accordion .auto-vacature-number::before { content: "("; }
.auto-accordion .auto-vacature-number::after  { content: ")"; }

/* de omschrijving hoort weer op een eigen regel onder de naam */
.auto-accordion .auto-description {
  display: block;
}

/* ==========================================================================
   Pijltjes van de vakgebieden-carrousel

   Ze waren leeg: twee witte rondjes zonder chevron. Oorzaak zit in de
   volgorde van twee stylesheets, niet in de carrousel zelf.

   `auto-global-accordion` maakt de knoppen als lege div's aan en zet in zijn
   eigen frontend.css `.swiper-button-prev:after { content: "" }`. Die plugin
   is geschreven tegen een nieuwe Swiper: die zet zelf een SVG in de knop, en
   de plugin geeft dat pijltje met `svg { width: 24px }` zijn maat. Swiper 9
   werkt anders: die tekent het pijltje met een letterteken uit zijn eigen
   icoonfont in `:after`, precies wat de plugin leegmaakt.

   Tot 18-08-2026 stond er twee keer Swiper op elke pagina, 9.4.1 van de
   plugin en 14.1.0 van het thema, en die tweede won. Sinds die dubbeling
   eruit is (mu-plugin avb-swiper-lokaal.php, alles op 9.4.1) is er geen SVG
   meer en blijft de lege `content` over.

   Hieronder staat hetzelfde pijltje terug dat Swiper 14 in de knop zette,
   als achtergrond op de `::after`, in dezelfde 24px die de plugin ervoor
   klaarzet. Dat scheelt een tweede Swiper op elke pagina en het beeld is
   gelijk aan hoe het was.
   ========================================================================== */
.auto-accordion.swiper-container ~ .swiper-button-prev::after,
.auto-accordion.swiper-container ~ .swiper-button-next::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='20' viewBox='0 0 11 20' fill='none'%3E%3Cpath d='M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z' fill='%23000000'/%3E%3C/svg%3E");
}

/* dezelfde chevron, een halve slag gedraaid */
.auto-accordion.swiper-container ~ .swiper-button-prev::after {
  transform: rotate(180deg);
}


/* ==========================================================================
   Sectie "Automotive in de spotlight"
   Rood vlak wordt blauw, de losse "Uitgelicht"-labels en de omschrijving in
   de kaarten gaan eruit, de USP-regel eronder verdwijnt, en de knop krijgt
   dezelfde maatvoering als op de vacaturepagina.
   ========================================================================== */

/* --- blauw vlak in plaats van rood ------------------------------------- */
.kadence-column2052_9ccb1f-b0 > .kt-inside-inner-col {
  background-color: #0a1e45 !important;
}

/* De textuurafbeelding blijft, maar die is rood. Grijs maken en zwak
   doorlaten geeft dezelfde subtiele diepte in het blauw; helemaal
   weghalen maakte het vlak te vlak. */
.kadence-column2052_9ccb1f-b0 > .kt-inside-inner-col:before {
  /* De textuur eroverheen gaf een andere tint dan het werkgeversblok
     verderop, dat hetzelfde blauw hoort te zijn (feedback 06-08-2026).
     Textuur weg, blauw nu overal gelijk. */
  display: none !important;
}

/* --- het label bovenaan mag rood --------------------------------------- */
.kadence-column2052_4b54d8-ac > .kt-inside-inner-col {
  background-color: #d50117 !important;
  border-color: #d50117 !important;
}

/* --- weg: het "Uitgelicht"-label op de kaarten zelf --------------------- */
.automotive-spotlight-vacancies .automotive-premium-tag {
  display: none !important;
}

/* --- weg: de omschrijving in de kaarten -------------------------------- */
.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy-text {
  display: none !important;
}

/* --- weg: de USP-regel onder de kaarten -------------------------------- */
.kadence-column2052_9d45fb-45 {
  display: none !important;
}

/* --- kaart en knop op maat van de vacaturepagina ----------------------- */
.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy {
  padding: 24px !important;
  border-radius: 20px !important;
}

.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy-title {
  font-size: 20px;
  margin-bottom: 8px;
}

/* de knop was 180px breed, zwart en met een pijl; op de vacaturepagina is
   het een witte pil over de volle breedte */
.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy-btn-wrap {
  width: 100% !important;
  margin-top: 16px !important;
}

.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy-btn-wrap a {
  height: auto !important;
  line-height: 1.2em !important;
  padding: 12px 20px !important;
  font-size: 16px !important;
  font-weight: 700;
  text-align: center !important;
  width: 100%;
  color: #111827 !important;
  background-color: #ffffff !important;
  border: 1px solid #6d7280 !important;
  border-radius: 50px !important;
  background-image: none !important;
}

.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy-btn-wrap a:hover {
  color: #ffffff !important;
  background-color: #d50117 !important;
  border-color: #d50117 !important;
}

/* ==========================================================================
   Sectie "Werken aan de mobiliteit van morgen" / "Autonieuws"
   ========================================================================== */

/* Autonieuws stond 80px lager dan de kop links; dat kwam door een
   padding-top op de rechterkolom. Op mobiel staan de kolommen onder
   elkaar en is die ruimte juist nuttig, dus alleen op desktop weg. */
@media (min-width: 1025px) {
  .kadence-column2052_0c8d23-86 > .kt-inside-inner-col {
    padding-top: 0 !important;
  }
}

/* WEGGEHAALD op 18-08-2026 - hier stond een achtergrondfoto met !important:

     .kb-row-layout-id2052_2fb36e-5e {
       background-image: url('.../984ee013aac2...-scaled.jpg') !important;
       background-position: 56% 16% !important;
     }
     .kb-row-layout-id2052_2fb36e-5e > .kt-row-layout-overlay {
       opacity: .60 !important;
     }

   Dat was dezelfde nachtfoto als de hero, over de foto heen die in het blok
   zelf stond (Frame-2147224230.png). Daardoor zag je in de bewerker iets
   anders dan de bezoeker, en veranderde er niets als je de foto in de bewerker
   verving - precies wat de werkregel in CLAUDE.md verbiedt.

   De foto, de uitsnede en de donkerte van de overlay staan nu in de
   blokinstelling van de rij (gezet met server\zet-sectie-achtergrond.php).
   Zet ze hier niet opnieuw neer: dan is de bewerker weer stuur-loos. */

/* ==========================================================================
   Sectie "Voor werknemers"
   Tekstkolom naar links, de USP's naar rechts en onder elkaar. De USP's waren
   witte kaarten met schaduw, wat eruitziet alsof je erop kunt klikken; het
   zijn geen links, dus ze worden een gewone opsomming.
   ========================================================================== */

/* --- de twee kolommen wisselen van plaats ------------------------------ */
.kb-row-layout-id2052_153bc3-23 > .kt-row-column-wrap > .kadence-column2052_d8451f-e3 {
  order: 1;
}

.kb-row-layout-id2052_153bc3-23 > .kt-row-column-wrap > .kadence-column2052_4425b3-d5 {
  order: 2;
}

/* --- USP's onder elkaar in plaats van een raster van twee -------------- */
.kb-row-layout-id2052_bcab31-7a > .kt-row-column-wrap,
.kb-row-layout-id2052_03f68c-d1 > .kt-row-column-wrap {
  grid-template-columns: 1fr !important;
  display: grid !important;
  row-gap: 6px !important;
  column-gap: 0 !important;
}

/* --- geen kaart meer: geen wit vlak, geen rand, geen schaduw ----------- */
/* de schaduw zit op de kolom zelf via .auto-shadow-box, niet op de binnenlaag */
.kb-row-layout-id2052_bcab31-7a .wp-block-kadence-column,
.kb-row-layout-id2052_03f68c-d1 .wp-block-kadence-column,
.kb-row-layout-id2052_bcab31-7a .auto-shadow-box,
.kb-row-layout-id2052_03f68c-d1 .auto-shadow-box {
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

.kb-row-layout-id2052_bcab31-7a .wp-block-kadence-column > .kt-inside-inner-col,
.kb-row-layout-id2052_03f68c-d1 .wp-block-kadence-column > .kt-inside-inner-col {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 6px 0 !important;
}

/* de infobox is geen link, maar zag er wel zo uit */
.kb-row-layout-id2052_bcab31-7a .kt-blocks-info-box-link-wrap,
.kb-row-layout-id2052_03f68c-d1 .kt-blocks-info-box-link-wrap {
  cursor: default !important;
  pointer-events: none;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  align-items: center;
}

/* icoon en tekst netjes op één regel */
.kb-row-layout-id2052_bcab31-7a .kt-blocks-info-box-title,
.kb-row-layout-id2052_03f68c-d1 .kt-blocks-info-box-title {
  margin: 0 !important;
  font-size: 18px;
  line-height: 1.35;
}

/* de iconen zijn 44 tot 50px breed; een vaste kolom houdt alle titels
   op dezelfde lijn */
.kb-row-layout-id2052_bcab31-7a .kt-blocks-info-box-media-container,
.kb-row-layout-id2052_03f68c-d1 .kt-blocks-info-box-media-container {
  margin-bottom: 0 !important;
  width: 58px !important;
  flex: 0 0 58px !important;
  display: flex;
  justify-content: flex-start;
}

/* --- logo's grijs, in kleur bij hover ----------------------------------
   Geldt ook voor de kopie van de klantenslider op /voor-werkgevers/
   (rij 2768_ba0fce-40); zie server\zet-klantenslider-2768.ps1. */
.kb-row-layout-id2052_9430f6-f4 .wp-block-kadence-image img ,
.kb-row-layout-id2768_ba0fce-40 .wp-block-kadence-image img {
  filter: grayscale(100%) contrast(.85);
  opacity: .55;
  transition: filter .25s ease, opacity .25s ease;
}

/* Per logo, niet per slide of per hele carrousel.
   Let op de directe-kindselector: de slider zit zelf ook in een
   kadence-column, dus een losse ':hover' op .wp-block-kadence-column
   kleurt alle logo's tegelijk. */
.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slide .kt-row-column-wrap
  > .wp-block-kadence-column:hover .wp-block-kadence-image img,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slide .kt-row-column-wrap
  > .wp-block-kadence-column:hover .wp-block-kadence-image img,
.kb-row-layout-id2052_9430f6-f4 .wp-block-kadence-image:hover img ,
.kb-row-layout-id2768_ba0fce-40 .wp-block-kadence-image:hover img {
  filter: none;
  opacity: 1;
}

/* --- gelijke tegels ----------------------------------------------------
   Sommige logo's zijn staand; zonder vaste hoogte rekken die hun tegel op,
   loopt het raster scheef en verschillen de slides in hoogte. Elk logo
   staat daarom gecentreerd in een vak van vaste hoogte. */
.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slide .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slide .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  box-sizing: border-box;
}

.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slide .wp-block-kadence-image,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slide .wp-block-kadence-image {
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slide .wp-block-kadence-image img,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slide .wp-block-kadence-image img {
  max-height: 54px !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
}

/* --- slide zo hoog als de logo's ---------------------------------------
   Kadence geeft de slider een vaste beeldverhouding (kb-slider-size-ratio,
   1:1): de slide wordt zo hoog als hij breed is en de logo's zweven daar
   verticaal gecentreerd in. Daardoor hing er ruim 100px lege ruimte tussen
   de logo's en de pijltjes. De verhouding gaat hier uit en de slide krimpt
   tot de inhoud. */

/* De sliderkolom had in Kadence marge -100px boven en onder om die loze
   ruimte optisch te compenseren. Zonder die compensatie stak de kolom aan
   beide kanten buiten de sectie en hingen de pijltjes over de footer. */
.kb-row-layout-id2052_9430f6-f4 .wp-block-kadence-column[class*="_9daaf0-e0"] ,
.kb-row-layout-id2768_ba0fce-40 .wp-block-kadence-column[class*="_9daaf0-e0"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.kb-row-layout-id2052_9430f6-f4 .kb-slider-size-ratio .kb-advanced-slide ,
.kb-row-layout-id2768_ba0fce-40 .kb-slider-size-ratio .kb-advanced-slide {
  height: auto !important;
  padding-bottom: 0 !important;
}
.kb-row-layout-id2052_9430f6-f4 .kb-slider-size-ratio .kb-advanced-slide-inner-wrap ,
.kb-row-layout-id2768_ba0fce-40 .kb-slider-size-ratio .kb-advanced-slide-inner-wrap {
  position: static !important;
  height: auto !important;
}

/* --- ruimte onder de slider voor de knoppen ---------------------------- */
.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider ,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider {
  position: relative;
  padding-bottom: 72px;
}

/* --- navigatieknoppen onder de logo's, gecentreerd --------------------- */
.kb-row-layout-id2052_9430f6-f4 .splide__arrows ,
.kb-row-layout-id2768_ba0fce-40 .splide__arrows {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  /* splide zet zelf position: relative op zijn container en de slides
     eindigen nu direct onder de logo's; de knoppen hangen met een negatieve
     bottom in de padding-bottom van .kb-advanced-slider, zo'n 30px onder
     de onderste logorij. */
  bottom: -60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  z-index: 3;
}

/* De extra klassen .kb-advanced-slider en .splide__arrows zijn nodig omdat
   Kadence per blok eigen knopregels print (witte achtergrond, grijze rand)
   die even zwaar wegen als de korte selector en later in de pagina staan. */
.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider .splide__arrows .splide__arrow ,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider .splide__arrows .splide__arrow {
  position: static !important;
  transform: none !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 0 !important;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--avb-rand);
  box-shadow: 0 2px 8px rgba(5, 24, 58, .08);
  opacity: 1;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider .splide__arrows .splide__arrow svg,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider .splide__arrows .splide__arrow svg,
.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider .splide__arrows .splide__arrow:before ,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider .splide__arrows .splide__arrow:before {
  fill: var(--avb-blauw);
  color: var(--avb-blauw);
  transition: fill .18s ease, color .18s ease;
}

.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider .splide__arrows .splide__arrow:hover ,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider .splide__arrows .splide__arrow:hover {
  background: var(--avb-rood);
  border-color: var(--avb-rood);
  box-shadow: 0 4px 14px rgba(213, 1, 23, .25);
}

.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider .splide__arrows .splide__arrow:hover svg,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider .splide__arrows .splide__arrow:hover svg,
.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider .splide__arrows .splide__arrow:hover:before ,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider .splide__arrows .splide__arrow:hover:before {
  fill: #fff;
  color: #fff;
}

.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider .splide__arrows .splide__arrow:disabled ,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider .splide__arrows .splide__arrow:disabled {
  opacity: .4;
}

@media (max-width: 767px) {
  .kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider ,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider { padding-bottom: 64px; }
  .kb-row-layout-id2052_9430f6-f4 .splide__arrows ,
.kb-row-layout-id2768_ba0fce-40 .splide__arrows { bottom: -52px !important; }
  .kb-row-layout-id2052_9430f6-f4 .kb-advanced-slider .splide__arrows .splide__arrow ,
.kb-row-layout-id2768_ba0fce-40 .kb-advanced-slider .splide__arrows .splide__arrow { width: 40px; height: 40px; }
  .kb-row-layout-id2052_9430f6-f4 .kb-advanced-slide .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
  .kb-row-layout-id2768_ba0fce-40 .kb-advanced-slide .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
    height: 70px;
    padding: 10px;
  }
  .kb-row-layout-id2052_9430f6-f4 .kb-advanced-slide .wp-block-kadence-image img,
  .kb-row-layout-id2768_ba0fce-40 .kb-advanced-slide .wp-block-kadence-image img {
    max-height: 44px !important;
  }
}


/* ==========================================================================
   SEO-tekstblok "Automotive functies" in de nieuwssectie.

   De koppen en tekst van de oude site zijn hier teruggebracht (overleg
   04-08-2026): Google kent die al jaren, dus bij de migratie houden we ze
   gelijk. De opmaak volgt het nieuwsblok ernaast: wit, 16px, zelfde
   maximale regelbreedte, zodat alles uitlijnt.
   ========================================================================== */
.avb-seo-tekst {
  max-width: 645px;
  margin-top: 28px;
  color: #ffffff;
}

.avb-seo-tekst__kop {
  margin: 0 0 12px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: #ffffff;
}

.avb-seo-tekst p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #ffffff;
  letter-spacing: -0.64px;
}

.avb-seo-tekst p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .avb-seo-tekst__kop { font-size: 20px; }
  .avb-seo-tekst p { font-size: 14px; }
}


/* --- klantenlogo's klikbaar ---------------------------------------------- */
/* De logo's linken naar het werkgeversoverzicht (zie home\avb-klantenlogos.js).
   De link ligt als onzichtbaar vlak over de cel, zodat het hele tegeltje
   klikbaar is en het logo zelf niets van de opmaak verliest. */
.avb-klant-klikbaar > .kt-inside-inner-col {
  position: relative;
}

.avb-klantlink {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.avb-klant-klikbaar {
  transition: transform .18s ease;
}

.avb-klant-klikbaar:hover {
  transform: translateY(-2px);
}


/* ==========================================================================
   Sectiekoppen op de homepage gelijkgetrokken

   Feedback 06-08-2026: "de titels zoals 'voor werkgevers', 'autonieuws',
   'vacatures' zijn allemaal anders in grootte, dikte en lettertype. Graag de
   grootte en fontsoort aanhouden van vakgebieden voor de titels op de
   homepage die h2 zijn."

   Ze liepen uiteen van 42px/600 tot 68px/500. "Vakgebieden" is de maat:
   Plus Jakarta Sans, 56px, gewicht 400, regelhoogte 56 (tablet 48, mobiel
   38/42 - dezelfde waarden als dat blok zelf).
   ========================================================================== */
.kt-adv-heading2052_89ef3a-51,   /* Automotive vacatures */
.kt-adv-heading2052_9ff9e1-10,   /* Automotive in de spotlight */
.kt-adv-heading2052_5e0b1c-4a,   /* Werken aan de mobiliteit van morgen */
.kt-adv-heading2052_ca55fc-2f,   /* Autonieuws */
.kt-adv-heading2052_15c9a8-c4,   /* Onze klanten */
.avb-doelgroep__kop {            /* Voor werknemers / Voor werkgevers */
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 56px !important;
  font-weight: 400 !important;
  line-height: 56px !important;
  letter-spacing: normal !important;
}

/* "Automotive functies" staat binnen de nieuwssectie, onder een kop van
   hetzelfde niveau. Zelfde lettertype en gewicht, maar een stap kleiner,
   zodat de twee koppen in die kolom niet met elkaar concurreren. */
.avb-seo-tekst__kop {
  font-family: "Plus Jakarta Sans", sans-serif !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: 42px !important;
}

@media (max-width: 1024px) {
  .kt-adv-heading2052_89ef3a-51,
  .kt-adv-heading2052_9ff9e1-10,
  .kt-adv-heading2052_5e0b1c-4a,
  .kt-adv-heading2052_ca55fc-2f,
  .kt-adv-heading2052_15c9a8-c4,
  .avb-doelgroep__kop {
    font-size: 48px !important;
    line-height: 1.1 !important;
  }
  .avb-seo-tekst__kop { font-size: 32px !important; line-height: 1.2 !important; }
}

/* "Autonieuws" staat in de smalle rechterkolom van de nieuwssectie. Op iPad
   staand (768 tot ongeveer 900px) is die kolom 216 tot 234px breed en past
   het woord op 48px niet: het brak af als "Autonieu / ws" (apparatentest
   02-10-2026). Alleen daar een stap kleiner; vanaf 900px past 48px weer. */
@media (min-width: 768px) and (max-width: 900px) {
  .kt-adv-heading2052_ca55fc-2f {
    font-size: 40px !important;
  }
}

@media (max-width: 767px) {
  .kt-adv-heading2052_89ef3a-51,
  .kt-adv-heading2052_9ff9e1-10,
  .kt-adv-heading2052_5e0b1c-4a,
  .kt-adv-heading2052_ca55fc-2f,
  .kt-adv-heading2052_15c9a8-c4,
  .avb-doelgroep__kop {
    font-size: 38px !important;
    line-height: 42px !important;
  }
  .avb-seo-tekst__kop { font-size: 26px !important; line-height: 1.25 !important; }
}


/* --- spotlight-kaarten passend maken naast de vacaturelijst -------------- */
/* De rechterkolom werd met drie kaarten langer dan de vijf vacatures links,
   waardoor er onderaan links witruimte overbleef (feedback 07-08-2026:
   "de blokken rechts wat kleiner maken zodat het allemaal mooi uitlijnt,
   totaalblok mag niet groter worden").

   De spotlight-kaarten waren 240px tegen 143px links. Het verschil zat in de
   knop "Bekijk vacature" (61px inclusief marge) en ruimere padding. De hele
   kaart is al klikbaar - net als de kaarten links, die ook geen knop hebben -
   dus de knop kan eruit. Daarna vullen de drie kaarten samen precies de
   hoogte van de kolom, zodat beide kolommen altijd gelijk eindigen. */

.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy-btn-wrap > a.automotive-vacancy-btn {
  display: none !important;
}

/* het knopblok bevat ook de regels met locatie en bedrijf; die blijven staan */
.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy-btn-wrap {
  margin-top: 0 !important;
}

.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy {
  padding: 16px 20px !important;
}

/* de drie kaarten verdelen de beschikbare hoogte gelijk */
.automotive-home-spotlight .vacancies-list.automotive-grid-view {
  height: 100%;
  align-content: stretch;
}

.automotive-home-spotlight .vacancies-list article.automotive-vacancy {
  height: 100%;
  justify-content: flex-start;
}

/* de kolom zelf mag meegroeien met de vacaturelijst ernaast */
.automotive-home-spotlight > .kt-inside-inner-col {
  height: 100%;
}

/* de kaartinhoud compact: dezelfde regels als links, zonder loze ruimte.
   De kop en de locatieregel hadden samen 39px aan lege hoogte. */
.automotive-home-spotlight .automotive-vacancy-header {
  gap: 14px !important;
  align-items: flex-start !important;
}

.automotive-home-spotlight .automotive-vacancy-title {
  margin: 0 0 4px !important;
}

.automotive-home-spotlight .automotive-usp {
  padding: 0 !important;
  margin: 8px 0 0 !important;
  min-height: 0 !important;
}

/* De regels in de kaart werden UITGEREKT in plaats van compact gezet.
   `.automotive-vacancy-contnet` is een flexbox met `flex-wrap: wrap`, en elke
   regel (titel, bedrijfsnaam, plaats, uren) is een eigen flexregel omdat ze
   `flex: 0 0 100%` hebben. Omdat de kaart een vaste hoogte krijgt - de drie
   spotlightkaarten verdelen samen de hoogte van de vacaturelijst ernaast -
   verdeelde `align-content: stretch` (de standaard) alle overgebleven hoogte
   over die regels. Eén regel tekst van 22px werd zo 46px hoog, met gaten van
   24px ertussen als gevolg.

   Met flex-start houden de regels hun eigen hoogte en verzamelt de overgebleven
   ruimte zich onderaan de kaart, waar hij als kaartmarge leest in plaats van
   als kapotte regelafstand. De titel blijft daarmee ook bovenaan staan, op
   gelijke hoogte met het logo dat rechtsboven hangt. */
.automotive-home-spotlight .automotive-vacancy-contnet {
  align-content: flex-start !important;
}

.automotive-home-spotlight .automotive-vacancy-footer {
  padding: 0 !important;
}

/* de locatieregel op één regel houden en de kop strakker, zodat drie
   spotlight-kaarten samen niet langer worden dan de vijf vacatures links */
/* alleen op desktop, waar de kolommen naast elkaar staan en de hoogte telt */
@media (min-width: 1025px) {
  .automotive-home-spotlight .automotive-usp-text {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy-header {
  gap: 8px !important;
}

.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy {
  padding: 14px 18px !important;
}

.automotive-home-vacancies .automotive-home-spotlight .vacancies-list.automotive-grid-view {
  gap: 8px !important;
}

/* De blauwe kolom volgt de hoogte van de vacaturelijst ernaast: de drie
   kaarten verdelen samen de ruimte die overblijft onder de kop. Met
   min-height 0 kunnen ze krimpen, zodat de rechterkolom de rijhoogte niet
   meer opdrijft en beide kolommen altijd gelijk eindigen. */


.automotive-home-vacancies .automotive-home-spotlight .automotive-spotlight-vacancies {
  /* de hoogte wordt gelijkgezet aan de lijst ernaast (avb-spotlight.js);
     de drie kaarten verdelen die hoogte gelijk */
  display: grid !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  align-content: stretch !important;
}

.automotive-home-vacancies .automotive-home-spotlight .automotive-spotlight-vacancies article.automotive-vacancy {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}

/* De kop en de locatieregel hadden elk 27px onverklaarde hoogte (een
   min-height uit het thema die hier geen doel dient). Vastgezet op de
   werkelijke inhoud; dat scheelt 54px per kaart. */
.automotive-home-vacancies .automotive-home-spotlight .automotive-vacancy-header {
  min-height: 0 !important;
  height: auto !important;
  align-items: flex-start !important;
}

.automotive-home-vacancies .automotive-home-spotlight .automotive-usp {
  min-height: 0 !important;
  height: auto !important;
  align-items: center !important;
}

/* --- titels van twee regels -------------------------------------------- *\
   De titel ontleende zijn hoogte aan de zwevende ruimte die voor het logo
   wordt vrijgehouden: 44px, precies een regel. Liep een titel over twee
   regels ("Autotechnicus - Van Roosmalen Volvo Helmond"), dan werd de tweede
   regel halverwege afgesneden en viel het laatste woord over de bedrijfsnaam
   heen. In de linkerlijst mag de kaart nu gewoon meegroeien.                */
.automotive-home-vacancies .automotive-latest-vacancies .automotive-vacancy-header,
.automotive-home-vacancies .automotive-latest-vacancies h3.automotive-vacancy-title {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* In de spotlight ligt de kaarthoogte wel vast: drie kaarten verdelen samen
   de hoogte van de lijst ernaast. Meegroeien kan daar niet, dus wordt de
   titel op hele regels afgekapt met een beletselteken. Er blijft dan nooit
   een half afgesneden regel staan.                                         */
.automotive-home-vacancies .automotive-home-spotlight h3.automotive-vacancy-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: auto !important;
  max-height: none !important;
}

/* De zwevende ruimte voor het logo stond hier op 24px, één tekstregel, om te
   voorkomen dat hij als extra regel meetelde in de afkapping hierboven.
   Het logokader is 40px hoog (32px op mobiel), dus stak het logo 16px onder
   die ruimte uit en liep de tweede titelregel eronderdoor. Gemeten op 390px
   breed gebeurde dat bij twee van de drie spotlightkaarten.

   De afkapping blijkt in de praktijk niet actief - de titel komt uit op
   display: flow-root, niet op -webkit-box - dus de float werkt hier gewoon en
   mag even hoog zijn als het logo. De maat komt nu uit dezelfde variabele als
   het kader zelf (zie vacatures\avb-kaartlogo.css); daarmee vervalt de
   uitzondering en kunnen de twee niet opnieuw uit elkaar lopen. */
.automotive-home-vacancies .automotive-home-spotlight h3.automotive-vacancy-title::before {
  height: var(--avb-logo-hoog) !important;
}

/* --- blok "Onze klanten" ------------------------------------------------ *\
   De tekst stond 10px onder de kop, terwijl het blok "Voor werkgevers" er
   vlak boven 26px aanhoudt. Dat verschil viel op omdat de twee blokken
   onder elkaar staan. De 10px komt uit de tussenruimte van de kolom; met
   16px erbij komt het geheel op dezelfde 26px uit.                        */
.kt-adv-heading2052_15c9a8-c4 {
  margin-bottom: 16px !important;
}

/* de knop naar het werkgeversoverzicht, in dezelfde stijl als de knoppen
   in het blok erboven */
.avb-klanten-cta {
  margin: 26px 0 0 !important;
}

/* ==========================================================================
   Autonieuws uit de RSS-feed

   Tot 13-08-2026 stonden hier twee dingen: een verborgen icoonlijst met vier
   ingetypte regels (waarvan de teksten niet eens bij de links hoorden) en een
   queryblok met negen geïmporteerde berichten uit december en februari. Beide
   stonden stil.

   Het is nu een core/rss-blok op https://www.aftersalesmagazine.nl/feed/ -
   dezelfde bron als de live site. Zie server\zet-autonieuws-rss.php.

   Hieronder alleen de opmaak: het rode blokje als opsommingsteken en witte,
   onderstreepte regels, zoals het lijstje er eerst uitzag.
   ========================================================================== */

.avb-autonieuws.wp-block-rss {
  margin: 0;
  padding: 0;
  list-style: none;
}

.avb-autonieuws .wp-block-rss__item {
  display: grid;
  grid-template-columns: 9px 1fr;
  column-gap: 14px;
  align-items: start;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.avb-autonieuws .wp-block-rss__item::before {
  content: "";
  width: 9px;
  height: 9px;
  background: #d50117;
  /* op de eerste tekstregel uitlijnen */
  margin-top: .42em;
}

.avb-autonieuws .wp-block-rss__item-title {
  display: block;
}

.avb-autonieuws .wp-block-rss__item-title a {
  color: #ffffff !important;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.avb-autonieuws .wp-block-rss__item-title a:hover {
  color: #ffffff !important;
  text-decoration-thickness: 2px;
}

@media (max-width: 767px) {
  .avb-autonieuws .wp-block-rss__item-title a {
    font-size: 14px;
  }

  .avb-autonieuws .wp-block-rss__item {
    margin-bottom: 12px;
  }
}

/* --- "Ontdek jouw volgende werkgever": logo's bovenaan uitlijnen ---------
   Ruben, 03-11-2026: het logoraster begon 20px lager dan de kop ernaast.
   Die 20px is de standaard bovenpadding die Kadence op elke slide zet
   (.kb-advanced-slide-inner-wrap). Alleen de bovenkant; de ruimte voor de
   pijlknoppen onderaan blijft zoals hij was. Alleen op de homepage.        */
.kb-row-layout-id2052_9430f6-f4 .kb-advanced-slide-inner-wrap {
  padding-top: 0 !important;
}

/* ======================================================================
   Homepage - USP-iconen
   ====================================================================== */

/* ======================================================================
   Blauwe USP-iconen.
   De iconen zitten als <img src="...svg"> in de infobox, dus fill of
   stroke werkt niet. De blauwe variant ligt er als achtergrond overheen
   en de rode <img> wordt onzichtbaar gemaakt - onzichtbaar en niet
   verwijderd, zodat de afmetingen kloppen blijven.
   Gegenereerd door maak-usp-css.ps1; niet met de hand aanpassen.
   ====================================================================== */

.kt-info-box2052_309641-35 .kadence-info-box-image-inner-intrisic {
  background-image: url('/wp-content/uploads/2026/07/blauw-briefcase.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.kt-info-box2052_309641-35 .kadence-info-box-image-inner-intrisic img {
  opacity: 0;
}

.kt-info-box2052_9e5ece-a2 .kadence-info-box-image-inner-intrisic {
  background-image: url('/wp-content/uploads/2026/07/blauw-UserWbrief.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.kt-info-box2052_9e5ece-a2 .kadence-info-box-image-inner-intrisic img {
  opacity: 0;
}

.kt-info-box2052_f769cf-1c .kadence-info-box-image-inner-intrisic {
  background-image: url('/wp-content/uploads/2026/07/blauw-send.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.kt-info-box2052_f769cf-1c .kadence-info-box-image-inner-intrisic img {
  opacity: 0;
}

.kt-info-box2052_5e0f9f-f1 .kadence-info-box-image-inner-intrisic {
  background-image: url('/wp-content/uploads/2026/07/blauw-fluent-send.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.kt-info-box2052_5e0f9f-f1 .kadence-info-box-image-inner-intrisic img {
  opacity: 0;
}

.kt-info-box2052_cdec01-3f .kadence-info-box-image-inner-intrisic {
  background-image: url('/wp-content/uploads/2026/07/blauw-briefcase.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.kt-info-box2052_cdec01-3f .kadence-info-box-image-inner-intrisic img {
  opacity: 0;
}

.kt-info-box2052_e03a3a-d1 .kadence-info-box-image-inner-intrisic {
  background-image: url('/wp-content/uploads/2026/07/blauw-UserWbrief.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.kt-info-box2052_e03a3a-d1 .kadence-info-box-image-inner-intrisic img {
  opacity: 0;
}

.kt-info-box2052_5ab2c1-05 .kadence-info-box-image-inner-intrisic {
  background-image: url('/wp-content/uploads/2026/07/blauw-send.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.kt-info-box2052_5ab2c1-05 .kadence-info-box-image-inner-intrisic img {
  opacity: 0;
}

.kt-info-box2052_4cdcf6-a6 .kadence-info-box-image-inner-intrisic {
  background-image: url('/wp-content/uploads/2026/07/blauw-fluent-send.svg');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.kt-info-box2052_4cdcf6-a6 .kadence-info-box-image-inner-intrisic img {
  opacity: 0;
}

/* ======================================================================
   Homepage - doelgroepsecties
   ====================================================================== */

/* ==========================================================================
   Homepage: secties "Voor werknemers" en "Voor werkgevers".

   Naar het aangeleverde ontwerp (04-08-2026): werknemers als licht vlak met
   grote kop links, intro met AutomaticMatch-tekst rechts en vier witte
   USP-kaarten eronder; werkgevers als donkerblauw vlak met drie linkkaarten
   (bovenste rood) en een contactregel. De HTML staat als wp:html-blokken in
   de homepage (id 2052); zie home\zet-doelgroep-secties.ps1.
   ========================================================================== */

.avb-doelgroep {
  padding: 90px 0;
}

/* --- iconen als CSS-masker ---------------------------------------------- */
/* WordPress stript <svg> uit pagina-inhoud; de vorm zit daarom hier als
   mask-image en de kleur volgt currentColor van het element. */
.avb-ikoon {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.avb-ikoon--aanbod {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Ccircle cx='11.4' cy='12.7' r='2.4'/%3E%3Cpath d='m13.3 14.7 2.2 2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2'/%3E%3Ccircle cx='11.4' cy='12.7' r='2.4'/%3E%3Cpath d='m13.3 14.7 2.2 2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

.avb-ikoon--account {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='10.5' cy='7.8' r='3.2'/%3E%3Cpath d='M4 20c.6-3.4 3.2-5.2 6.5-5.2 1 0 2 .2 2.8.5' stroke-linecap='round'/%3E%3Crect x='14.6' y='15.2' width='6.2' height='5' rx='1.1'/%3E%3Cpath d='M16.1 15.2v-1.3a1.6 1.6 0 0 1 3.2 0v1.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='10.5' cy='7.8' r='3.2'/%3E%3Cpath d='M4 20c.6-3.4 3.2-5.2 6.5-5.2 1 0 2 .2 2.8.5' stroke-linecap='round'/%3E%3Crect x='14.6' y='15.2' width='6.2' height='5' rx='1.1'/%3E%3Cpath d='M16.1 15.2v-1.3a1.6 1.6 0 0 1 3.2 0v1.3'/%3E%3C/svg%3E");
}

.avb-ikoon--snel {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.2 13.8M21 3l-6.8 18-3.5-7.2L3.5 10.3 21 3Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3 10.2 13.8M21 3l-6.8 18-3.5-7.2L3.5 10.3 21 3Z'/%3E%3C/svg%3E");
}

.avb-ikoon--cv {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5H14L17.5 7v13.5h-11V3.5Z'/%3E%3Cpath d='M14 3.5V7h3.5'/%3E%3Cpath d='M9 12h6M9 15.2h6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5H14L17.5 7v13.5h-11V3.5Z'/%3E%3Cpath d='M14 3.5V7h3.5'/%3E%3Cpath d='M9 12h6M9 15.2h6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.avb-ikoon--plaatsen {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5H14L17.5 7v13.5h-11V3.5Z'/%3E%3Cpath d='M14 3.5V7h3.5'/%3E%3Cpath d='M12 11v5M9.5 13.5h5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5H14L17.5 7v13.5h-11V3.5Z'/%3E%3Cpath d='M14 3.5V7h3.5'/%3E%3Cpath d='M12 11v5M9.5 13.5h5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.avb-ikoon--bereik {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='9' cy='8.6' r='2.9'/%3E%3Cpath d='M3.8 19.3c.5-3.1 2.7-4.8 5.2-4.8s4.7 1.7 5.2 4.8' stroke-linecap='round'/%3E%3Ccircle cx='16.6' cy='9.7' r='2.3'/%3E%3Cpath d='M15.8 14.8c2.3.2 4 1.8 4.4 4.5' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='9' cy='8.6' r='2.9'/%3E%3Cpath d='M3.8 19.3c.5-3.1 2.7-4.8 5.2-4.8s4.7 1.7 5.2 4.8' stroke-linecap='round'/%3E%3Ccircle cx='16.6' cy='9.7' r='2.3'/%3E%3Cpath d='M15.8 14.8c2.3.2 4 1.8 4.4 4.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.avb-ikoon--pijlrechts {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
}

.avb-doelgroep__binnen {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--avb-zijmarge, 15px); /* zelfde lijn als het logo; zie algemeen/avb-zijmarge.css */
}

/* --- gedeelde knoppen --------------------------------------------------- */
.avb-doelgroep__knop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 26px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.avb-doelgroep__pijl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: 0 0 auto;
}

/* het schuine pijltje in de knopcirkel */
.avb-doelgroep__pijl::after {
  content: "";
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 10.5 10.5 1.5M3.5 1.5h7v7'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 10.5 10.5 1.5M3.5 1.5h7v7'/%3E%3C/svg%3E") no-repeat center / contain;
}

.avb-doelgroep__knop--rood {
  background: #d50117;
  color: #ffffff !important;
}

.avb-doelgroep__knop--rood .avb-doelgroep__pijl {
  background: rgba(255, 255, 255, .16);
}

.avb-doelgroep__knop--rood:hover {
  background: #05183a;
}

.avb-doelgroep__knop--omlijnd {
  border: 1px solid rgba(255, 255, 255, .55);
  color: #ffffff !important;
  background: transparent;
}

.avb-doelgroep__knop--omlijnd .avb-doelgroep__pijl {
  border: 1px solid rgba(255, 255, 255, .55);
}

.avb-doelgroep__knop--omlijnd:hover {
  background: #ffffff;
  color: #05183a !important;
}

.avb-doelgroep__knop--omlijnd:hover .avb-doelgroep__pijl {
  border-color: #05183a;
}

/* ==========================================================================
   Voor werknemers (licht)
   ========================================================================== */
.avb-doelgroep--werknemers {
  background: #f2f3f5;
}

.avb-doelgroep__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 60px;
  /* De kop lijnt uit met de bovenkant van de tekst ernaast. Stond op 'center';
     toen Peter de intro langer maakte (10-08-2026) zakte de kop mee naar het
     midden en viel er een gat onder. Met 'start' blijft de uitlijning kloppen,
     hoe lang de tekst ook wordt. */
  align-items: start;
  margin-bottom: 56px;
}

.avb-doelgroep__kop {
  margin: 0;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.05;
  font-weight: 500;
  color: #101418;
}

.avb-doelgroep__tekst p {
  margin: 0 0 14px;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.6;
}

.avb-doelgroep__tekst .avb-doelgroep__sub {
  margin-top: 22px;
  color: #101418;
  font-weight: 700;
}

.avb-doelgroep__tekst .avb-doelgroep__knop {
  margin-top: 14px;
}

/* 30-10-2026: "Schrijf je in" naast "Bekijk vacatures". Op een smal scherm
   schuift de tweede knop onder de eerste. */
.avb-doelgroep__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.avb-doelgroep__tekst .avb-doelgroep__knoppen .avb-doelgroep__knop {
  margin-top: 0;
}

/* De omlijnde knop is wit, voor de donkere werkgeverssectie. Op de lichte
   achtergrond hier wordt hij donkerblauw. */
.avb-doelgroep--werknemers .avb-doelgroep__knop--omlijnd {
  border-color: #05183a;
  color: #05183a !important;
}

.avb-doelgroep--werknemers .avb-doelgroep__knop--omlijnd .avb-doelgroep__pijl {
  border-color: #05183a;
}

.avb-doelgroep--werknemers .avb-doelgroep__knop--omlijnd:hover {
  background: #05183a;
  color: #ffffff !important;
}

.avb-doelgroep--werknemers .avb-doelgroep__knop--omlijnd:hover .avb-doelgroep__pijl {
  border-color: #ffffff;
}

.avb-doelgroep__kaarten {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* De kaarten in een rij worden even hoog: het rooster rekt ze op tot de
   langste. De ondergrens stond op 280px, ruim boven wat de inhoud nodig heeft
   (op 1440px was de inhoud 200px en bleef er 80px leeg onderin). Die is naar
   220px, zodat de kaarten hun formaat aan de tekst ontlenen. */
.avb-usp-kaart {
  display: flex;
  flex-direction: column;
  min-height: 220px;
  padding: 26px;
  border-radius: 16px;
  background: #ffffff;
}

.avb-usp-kaart__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.avb-usp-kaart__kop {
  margin: 0;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 600;
  color: #101418;
  /* Hier stond `min-height: 3.75em`: ruimte voor drie titelregels, ook als de
     titel er maar twee nodig had, zodat de uitleg in alle vier de kaarten op
     dezelfde hoogte begon. Dat werkte, maar liet in elke kaart met een titel
     van twee regels een lege regel staan - de "loze ruimte in het midden".
     De uitleg wordt nu aan de ONDERkant uitgelijnd (zie hieronder), en daarmee
     staan de teksten al gelijk zonder dat er iets gereserveerd hoeft te worden. */
}

.avb-usp-kaart__icoon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: #d50117;
}

/* Let op de dubbele klasse. De uitleg is een <p> binnen `.entry-content`, en
   het thema zet daar `.entry-content p` (specificiteit 0-1-1) op. Een enkele
   klasse als `.avb-usp-kaart__uitleg` is 0-1-0 en verliest het daarvan, dus de
   `margin-top: auto` hieronder kwam niet aan. Met de kaartklasse ervoor is het
   0-2-0 en wint hij wel. */
.avb-usp-kaart .avb-usp-kaart__uitleg {
  /* De uitleg staat tegen de onderkant van de kaart. Alle vier de kaarten zijn
     even hoog (het rooster rekt ze gelijk), dus eindigen de teksten op dezelfde
     regel, ongeacht of de titel twee of drie regels nodig heeft.

     Dit stond eerder al zo (`margin: auto 0 0`) en is toen teruggedraaid omdat
     de teksten uiteenliepen. Dat kwam niet door het uitlijnen zelf maar doordat
     de kaarten toen niet even hoog werden. Nu de ondergrens van 280px eraf is
     en het rooster de hoogte bepaalt, sluiten ze wel op elkaar aan. */
  margin: auto 0 0;
  padding-top: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
}

/* ==========================================================================
   Voor werkgevers (donkerblauw)
   ========================================================================== */
.avb-doelgroep--werkgevers {
  background: #0a1e45;
}

.avb-doelgroep__binnen--twee {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 80px;
  /* Bovenkant op bovenkant (Ruben, 03-11-2026). Op 'center' stond de kop
     "Voor werkgevers" 50px lager dan de eerste kaart ernaast. */
  align-items: start;
}

.avb-doelgroep--werkgevers .avb-doelgroep__kop {
  color: #ffffff;
  margin-bottom: 26px;
}

.avb-doelgroep--werkgevers .avb-doelgroep__intro-tekst p {
  margin: 0 0 16px;
  color: #c5cede;
  font-size: 16px;
  line-height: 1.65;
}

.avb-doelgroep--werkgevers .avb-doelgroep__knop {
  margin-top: 12px;
}

.avb-linkkaarten {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.avb-linkkaart {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  border-radius: 16px;
  background: #ffffff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}

.avb-linkkaart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

.avb-linkkaart__icoon {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  color: #d50117;
}

.avb-linkkaart__tekst {
  flex: 1 1 auto;
}

.avb-linkkaart__kop {
  display: block;
  margin: 0 0 2px;
  font-size: 20px;
  font-weight: 700;
  color: #05183a;
}

.avb-linkkaart__sub {
  display: block;
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

.avb-linkkaart__pijl {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: #6b7280;
  transition: transform .18s ease;
}

.avb-linkkaart:hover .avb-linkkaart__pijl {
  transform: translateX(4px);
}

.avb-linkkaart--rood {
  background: #d50117;
}

.avb-linkkaart--rood .avb-linkkaart__icoon,
.avb-linkkaart--rood .avb-linkkaart__pijl {
  color: #ffffff;
}

.avb-linkkaart--rood .avb-linkkaart__kop {
  color: #ffffff;
}

.avb-linkkaart--rood .avb-linkkaart__sub {
  color: rgba(255, 255, 255, .85);
}

.avb-doelgroep__contact {
  margin: 6px 0 0;
  color: #c5cede;
  font-size: 15px;
}

.avb-doelgroep__contact a {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Responsief
   ========================================================================== */
@media (max-width: 1024px) {
  .avb-doelgroep {
    padding: 64px 0;
  }

  .avb-doelgroep__intro,
  .avb-doelgroep__binnen--twee {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .avb-doelgroep__kaarten {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .avb-usp-kaart {
    min-height: 0;
  }

  /* stond op 40px om de uitleg omlaag te duwen; dat doet `margin-top: auto`
     nu zelf, en alleen waar er ruimte over is */
  .avb-usp-kaart__uitleg {
    padding-top: 20px;
  }
}

@media (max-width: 600px) {
  .avb-doelgroep {
    padding: 48px 0;
  }

  .avb-doelgroep__kaarten {
    grid-template-columns: 1fr;
  }

  /* de kaarten staan hier onder elkaar; dan hoeft er geen ruimte voor een
     derde titelregel gereserveerd te worden */
  .avb-usp-kaart__kop {
    min-height: 0;
  }

  .avb-usp-kaart__uitleg {
    padding-top: 16px;
  }

  .avb-linkkaart {
    padding: 18px 20px;
  }
}

/* ======================================================================
   Zoekbalk
   ====================================================================== */

/* ==========================================================================
   Zoekbalk "Trefwoord / Selecteer Regio"
   Het regioveld is een <input readonly> die een keuzelijst opent, maar dat is
   nergens aan te zien. Onderstaand pijltje maakt duidelijk dat het uitklapt;
   het draait om zodra de lijst openstaat.
   Staat op de homepage en op het vacatureoverzicht.
   ========================================================================== */

.vacancies-search-section .owp-search-criteria.owp-custom-multiselect {
  position: relative;
}

.vacancies-search-section .owp-search-criteria.owp-custom-multiselect::after {
  content: "";
  position: absolute;
  right: 27px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -8px;
  border-right: 2px solid #05183a;
  border-bottom: 2px solid #05183a;
  transform: rotate(45deg);
  transform-origin: center;
  pointer-events: none;
  opacity: .55;
  transition: transform .2s ease, opacity .2s ease;
}

/* pijltje omhoog zodra de keuzelijst openstaat */
.vacancies-search-section .owp-search-criteria.owp-custom-multiselect:has(.owp-multiselect-dropdown.open)::after {
  transform: rotate(225deg);
  margin-top: -3px;
  opacity: .9;
}

/* ruimte vrijhouden, anders loopt een lange regionaam onder het pijltje door */
.vacancies-search-section .owp-multiselect-input {
  padding-right: 52px !important;
}

/* ======================================================================
   Pakkettenpagina
   ====================================================================== */

/* ==========================================================================
   Pakkettenoverzicht (/voor-werkgevers/ en /vacature-plaatsen/)
   Opzet naar het aangeleverde voorbeeld: gecentreerde kop, een tabbalk als
   pil boven de kaarten, en de kaarten samen in één licht paneel met dunne
   scheidingslijnen in plaats van losse blokken met schaduw.
   ========================================================================== */

/* --- ruimte onder het menu -------------------------------------------- */
.kb-row-layout-id2768_a62197-1d > .kt-row-column-wrap,
.page-id-2768 .content-container > .entry-content > .wp-block-kadence-rowlayout:first-of-type
  > .kt-row-column-wrap,
.page-id-2811 .content-container > .entry-content > .wp-block-kadence-rowlayout:first-of-type
  > .kt-row-column-wrap {
  padding-top: 64px;
}

/* --- kop gecentreerd, zoals in het voorbeeld -------------------------- */
.page-id-2768 .kb-row-layout-id2768_a62197-1d .wp-block-kadence-advancedheading,
.page-id-2811 .kb-row-layout-id2768_a62197-1d .wp-block-kadence-advancedheading {
  text-align: center;
}

/* de extra ruimte boven het raster zat er voor het label "Meest gekozen";
   het paneel heeft die ruimte nu zelf, dus hier kan het strakker */
.page-id-2768 .woocommerce ul.products,
.page-id-2811 .woocommerce ul.products {
  padding-top: 0;
}

/* minder lucht tussen kop, tabbalk en kaarten */
.avb-pakket-tabs {
  /* De tabbalk stond te dicht op de pakketten: het label "Meest gekozen"
     van de middelste kaart raakte hem bijna. De balk schuift verder omhoog
     en er komt ruimte onder, zodat filters en pakketten uit elkaar staan
     (feedback 07-08-2026). */
  margin-top: -58px;
}

/* Op de productpagina's ("Zoek je toch iets anders?") staat de kop direct
   boven het queryblok; daar schoof de tabbalk door de titel heen. */
.single-product .avb-pakket-tabs {
  margin-top: 16px;
}

/* De knop "Laat alle pakketten zien" stond hier ook nog. Die hoorde bij de
   opzet van vóór de tabbladen en is op 24-08-2026 uit de pagina zelf gehaald
   (server\zet-oude-pakketknop-weg.php), dus de opmaak kan hier ook weg. */

/* ==========================================================================
   Tabbalk boven de kaarten. De indeling komt uit de mu-plugin
   avb-pakket-tabs.php en staat dus al in de html van de server.
   ========================================================================== */

.avb-pakket-tabs {
  text-align: center;
}

.avb-pakket-tabnav {
  display: inline-flex;
  gap: 4px;
  /* het uitgelichte pakket steekt met het label "Meest gekozen" boven het
     paneel uit; zonder deze ruimte valt het label over de tabbalk.
     13-08-2026: het label staat sinds de feedback hoger, dus hier meer ruimte.
     21-08-2026: het label plakt weer op de kaart en zit dus 27px lager; die
     27px kan er hier af, anders wordt het gat tussen balk en kaart groter. */
  margin: 0 auto 91px;
  padding: 5px;
  border-radius: 999px;
  background: #f1f3f6;
  border: 1px solid #e3e8ef;
}

.avb-pakket-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 11px 30px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #4b5563;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}

/* Het thema geeft elke button een donkere achtergrond bij hover; met donkere
   tekst erop viel het label weg. Daarom hier expliciet vastgezet. */
.avb-pakket-tab:hover,
.avb-pakket-tab:focus {
  background: #e6eaf0 !important;
  color: #05183a !important;
}

.avb-pakket-tab.is-actief,
.avb-pakket-tab.is-actief:hover,
.avb-pakket-tab.is-actief:focus {
  background: #05183a !important;
  color: #ffffff !important;
}

/* --- de kaarten samen in één paneel ----------------------------------- */
.woocommerce ul.products.avb-pakket-paneel,
.woocommerce-page ul.products.avb-pakket-paneel {
  display: none !important;
}

.woocommerce ul.products.avb-pakket-paneel.is-actief,
.woocommerce-page ul.products.avb-pakket-paneel.is-actief {
  display: grid !important;
  text-align: left;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 20px;
  /* bovenaan extra ruimte, anders steekt het label "Meest gekozen"
     door de rand van het paneel */
  padding: 30px 8px 8px !important;
  gap: 0 !important;
}

/* Het uitgelichte pakket steekt boven het paneel uit; het queryblok heeft
   overflow hidden, waardoor de bovenkant van het icoonrondje werd
   afgesneden. */
.woocommerce ul.products.avb-pakket-paneel,
.woocommerce-page ul.products.avb-pakket-paneel {
  overflow: visible !important;
}

/* Het thema verbergt alles vanaf de vierde kaart, want die zaten vroeger
   achter "Laat alle pakketten zien". Binnen een tabpaneel moeten ze gewoon
   allemaal zichtbaar zijn. */
.woocommerce .avb-pakket-paneel li.product:nth-child(n+4),
.woocommerce-page .avb-pakket-paneel li.product:nth-child(n+4) {
  position: relative !important;
  opacity: 1 !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: initial;
}

/* kaarten even hoog, zodat de knoppen op één lijn eindigen */
.avb-pakket-paneel > li.product {
  display: flex !important;
  flex-direction: column;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.avb-pakket-paneel > li.product > .wp-block-kadence-column,
.avb-pakket-paneel > li.product > .wp-block-kadence-column > .kt-inside-inner-col {
  flex: 1 1 auto;
}

/* de knop onderaan de kaart */
.avb-pakket-paneel > li.product .kadence-column2768_a70caa-51 {
  margin-top: auto !important;
}

/* dunne scheidingslijn tussen de kaarten */
.avb-pakket-paneel > li.product + li.product {
  border-left: 1px solid #e8ecf2 !important;
}

/* bij meer dan drie pakketten komt er een tweede rij; die krijgt een lijn
   erboven en de eerste van de rij geen lijn links */
.avb-pakket-paneel > li.product:nth-child(3n+1) {
  border-left: 0 !important;
}

.avb-pakket-paneel > li.product:nth-child(n+4) {
  border-top: 1px solid #e8ecf2 !important;
  padding-top: 22px !important;
  margin-top: 6px !important;
}

/* Elke kaart heeft een .kb-query-item-flip-back met een eigen rand,
   hoekafronding en rode gloed; dat gaf de vreemde omlijning om het middelste
   pakket. De laag zelf blijft staan, want het label "Meest gekozen" hangt
   eraan - alleen de omlijning gaat eraf. */
.avb-pakket-paneel li.product .kb-query-item-flip-back {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Het uitgelichte pakket komt als lichte, opgetilde kaart uit het paneel:
   een koele tint in de huisstijlkleur met een zachte schaduw. Het rood blijft
   voorbehouden aan het label en de knop. */
.avb-pakket-paneel > li.product.post-4098 {
  background: #f6f9fd !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(5, 24, 58, .10), 0 2px 6px rgba(5, 24, 58, .05) !important;
  position: relative;
  z-index: 2;
}

/* Feedback 06-08-2026: het uitgelichte pakket mag hoger staan en meer lucht
   krijgen. Alleen op desktop: op mobiel staan de kaarten naast elkaar te
   scrollen en steekt er niets uit (zie de mobiele regels onderaan). */
@media (min-width: 1025px) {

  .avb-pakket-paneel > li.product.post-4098 {
    margin-top: -78px !important;
    margin-bottom: 15px !important;
    padding-top: 12px !important;
  }

  /* Het label "Meest gekozen" komt uit het child theme
     (.plans_list .product_cat-premium .kb-query-item-flip-back:after).

     Het stond met top:14px half over de bovenrand van de kaart, is op
     13-08-2026 op -42px gezet ("hoger en meer lucht") en zweefde daarmee los
     boven de kaart - het leek eerder bij de tabbalk te horen dan bij het
     pakket. Feedback 21-08-2026: hij moet op het blokje plakken.

     Nu op -15px, precies de helft van zijn hoogte, dus hij zit als vaantje op
     de bovenrand. Hij hangt aan .kb-query-item-flip-back en die volgt de
     hoogte van de kaart, dus hij blijft daar zitten als er inhoud bij komt. */
  .avb-pakket-paneel > li.product.post-4098 .kb-query-item-flip-back::after {
    top: -15px !important;
    height: 30px !important;
    line-height: 30px !important;
    padding: 0 16px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 12px rgba(213, 1, 23, .28);
  }
}

/* geen scheidingslijn tegen de opgetilde kaart aan */
.avb-pakket-paneel > li.product.post-4098,
.avb-pakket-paneel > li.product.post-4098 + li.product {
  border-left: 0 !important;
}

.avb-pakket-paneel > li.product.post-4098 > .wp-block-kadence-column,
.avb-pakket-paneel > li.product.post-4098 > .wp-block-kadence-column > .kt-inside-inner-col {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* --- volgorde in de kaart: icoon, prijs, naam, lijst, knop ------------- */
/* de kaart is een flex-kolom, dus de volgorde is met 'order' te zetten;
   de klassen komen uit het query-card-sjabloon en zijn voor elke kaart gelijk */
.woocommerce li.product .kb-row-layout-id2768_d2222a-9f { order: 1; }   /* icoon      */
.woocommerce li.product .kadence-column2768_8597d5-ac   { order: 2; }   /* prijs      */
.woocommerce li.product .kt-adv-heading2768_3c2cd2-16   { order: 3; }   /* naam       */
.woocommerce li.product .kadence-column2768_95d150-08   { order: 4; }   /* kenmerken  */
.woocommerce li.product .kadence-column2768_a70caa-51   { order: 5; }   /* knop       */

/* prijs groot en direct onder het icoon */
.woocommerce li.product .kadence-column2768_8597d5-ac {
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

.woocommerce li.product .custom-price-style,
.woocommerce li.product .kadence-column2768_8597d5-ac .price {
  font-size: 34px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  color: #05183a !important;
}

/* de naam eronder, rustiger dan de prijs */
.woocommerce li.product .kt-adv-heading2768_3c2cd2-16 {
  font-size: 19px !important;
  font-weight: 600 !important;
  text-align: left !important;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e8ecf2;
}

/* de streep die eerst boven de prijs stond is nu dubbelop */
.woocommerce li.product .kadence-column2768_95d150-08 {
  border-top: 0 !important;
  padding-top: 14px !important;
}

@media (max-width: 1024px) {
  .kb-row-layout-id2768_a62197-1d > .kt-row-column-wrap,
  .page-id-2768 .content-container > .entry-content > .wp-block-kadence-rowlayout:first-of-type
    > .kt-row-column-wrap,
  .page-id-2811 .content-container > .entry-content > .wp-block-kadence-rowlayout:first-of-type
    > .kt-row-column-wrap {
    padding-top: 40px;
  }
}

@media (max-width: 767px) {
  .avb-pakket-tabnav {
    display: flex;
    width: 100%;
  }
  .avb-pakket-tab {
    flex: 1;
    padding: 10px 10px;
    font-size: 14px;
  }
  .avb-pakket-paneel > li.product + li.product {
    border-left: 0 !important;
    border-top: 1px solid #e8ecf2 !important;
  }
}


/* ==========================================================================
   Mobiel: filterbalk en pakketten
   Feedback 07-08-2026. Twee dingen gingen mis op een telefoon:
    - de balk werd met -58px omhooggetrokken (bedoeld voor desktop, waar het
      uitgelichte pakket met zijn label boven de rij uitsteekt). Op mobiel
      staat er niets uit te steken en schoof de balk over de titel heen;
    - de labels kregen 30px padding links en rechts, waardoor er per knop
      maar ~60px tekstbreedte overbleef en "Zichtbaarheid" over drie regels
      brak.
   De pakketten stonden bovendien onder elkaar; ze scrollen nu horizontaal,
   met een randje van de volgende kaart in beeld zodat zichtbaar is dat er
   meer staat.
   ========================================================================== */

@media (max-width: 1024px) {

  /* --- filterbalk ------------------------------------------------------- */
  .avb-pakket-tabs {
    margin-top: 0 !important;
  }

  .avb-pakket-tabnav {
    max-width: 100%;
    margin: 0 auto 28px !important;
    padding: 3px;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .avb-pakket-tabnav::-webkit-scrollbar {
    display: none;
  }

  .avb-pakket-tabnav .avb-pakket-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 13.5px !important;
    padding: 10px 12px !important;
  }

  /* --- pakketten naast elkaar, horizontaal scrollend --------------------- */
  .woocommerce ul.products.avb-pakket-paneel.is-actief,
  .woocommerce-page ul.products.avb-pakket-paneel.is-actief {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* ruimte voor de schaduw van de kaarten en voor het "Meest gekozen"-label */
    padding: 34px 14px 18px !important;
    scrollbar-width: none;
  }

  .kb-query-grid-wrap.avb-pakket-paneel::-webkit-scrollbar {
    display: none;
  }

  .woocommerce ul.products.avb-pakket-paneel > li.product {
    flex: 0 0 84% !important;   /* de volgende kaart piept ernaast: scrollhint */
    max-width: 84% !important;
    scroll-snap-align: center;
    margin: 0 !important;   /* het uitgelichte pakket stak omhoog; niet op mobiel */
  }

}

/* ======================================================================
   Pakketiconen
   ====================================================================== */

/* ======================================================================
   Icoonvakje van de pakketkaart.
   Welk icoon waar komt regelt avb-pakketten.js; het queryblok bouwt de
   kaarten namelijk opnieuw op, waardoor CSS op de losse kaart niet
   betrouwbaar aankomt.
   Gegenereerd door maak-pakket-iconen.ps1; niet met de hand aanpassen.
   ====================================================================== */

/* De icoonkolom stond in het ontwerp op opacity 0, waardoor het icoon
   nooit te zien was. */
.woocommerce ul.products li.product .like_icon {
  opacity: 1 !important;
}

.woocommerce ul.products li.product .like_icon img {
  width: 38px;
  height: 38px;
  max-width: none;
  object-fit: contain;
  object-position: left center;
}

/* ======================================================================
   Werkgeversoverzicht - A tot Z
   ====================================================================== */

/* A tot Z-balk boven het werkgeversoverzicht (/werkgevers/, 26-10-2026).
   De balk zelf komt uit [otys-relations-list] in kadence-child/custom.php;
   letters zonder werkgever staan er grijs bij, zodat het alfabet niet
   verspringt als er een werkgever bijkomt. */

.avb-alfabet {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 24px;
	padding: 0 0 20px;
	border-bottom: 1px solid #d2d5da;
}

.avb-alfabet a,
.avb-alfabet span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
}

.avb-alfabet a {
	color: #1a1f2b;
	background: #fff;
	border: 1px solid #d2d5da;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.avb-alfabet a:hover,
.avb-alfabet a:focus-visible {
	border-color: #d50117;
	color: #d50117;
}

.avb-alfabet a.is-actief {
	background: #d50117;
	border-color: #d50117;
	color: #fff;
}

.avb-alfabet span.is-leeg {
	color: #b4b9c2;
}

@media (max-width: 767px) {
	.avb-alfabet {
		gap: 4px;
	}
	.avb-alfabet a,
	.avb-alfabet span {
		min-width: 30px;
		height: 30px;
		font-size: 13px;
		padding: 0 6px;
	}
}

/* ======================================================================
   CV-database (cvs-zoeken en cv-credits)
   ====================================================================== */

/* ==========================================================================
   CV-database: /cvs-zoeken/ (7882) en /cv-credits/

   Naar het aangeleverde ontwerp (17-08-2026, CV_database_pagina.png). De
   landingspagina vervangt /cv-s-zoeken.html van de oude site; dat was daar de
   OTYS-zoekpagina zelf. Zoeken kan op het nieuwe domein pas na inloggen in het
   recruitmentportal, dus deze pagina is een landingspagina die uitlegt wat de
   database is, een eerlijke indruk van de profielen geeft en doorstuurt naar
   de CV-credits en het portal.

   Maten en kleuren volgen de bestaande site:
     kop 56/48/38px Plus Jakarta Sans 400   (zoals .avb-doelgroep__kop)
     sectiekop 24px 600                     (zoals .avb-seo-tekst__kop was)
     kaartkop 21px 600 / 20px 700           (zoals .avb-usp-kaart__kop)
     tekst 16px/1.6 #4b5563, klein 14px #6b7280
     rood #d50117, donkerblauw #05183a, rand #e8ecf2, licht #f6f9fd
     container 1280px met 15px lucht, gelijk aan de header

   De HTML staat als wp:html-blokken in de pagina's zelf; zie
   cvs\zet-cvs-zoeken.ps1 en cvs\zet-cv-credits.ps1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Iconen als CSS-masker.
   WordPress (kses) stript <svg> uit pagina-inhoud, dus in de blokken staan
   lege spans en zit de vorm hier. De kleur volgt currentColor.
   -------------------------------------------------------------------------- */
.avb-cv-ikoon {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.avb-cv-ikoon--schild {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 5 5.6v5.1c0 4.6 2.9 7.9 7 9.5 4.1-1.6 7-4.9 7-9.5V5.6l-7-2.8Z'/%3E%3Cpath d='m8.8 11.8 2.3 2.3 4.1-4.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2.8 5 5.6v5.1c0 4.6 2.9 7.9 7 9.5 4.1-1.6 7-4.9 7-9.5V5.6l-7-2.8Z'/%3E%3Cpath d='m8.8 11.8 2.3 2.3 4.1-4.6'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--slot {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='9.6' rx='2'/%3E%3Cpath d='M8.2 10.4V7.6a3.8 3.8 0 0 1 7.6 0v2.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.6' y='10.4' width='14.8' height='9.6' rx='2'/%3E%3Cpath d='M8.2 10.4V7.6a3.8 3.8 0 0 1 7.6 0v2.8'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--pin {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s6.6-5.7 6.6-10.4a6.6 6.6 0 1 0-13.2 0C5.4 15.5 12 21.2 12 21.2Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.4'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s6.6-5.7 6.6-10.4a6.6 6.6 0 1 0-13.2 0C5.4 15.5 12 21.2 12 21.2Z'/%3E%3Ccircle cx='12' cy='10.6' r='2.4'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--map {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 7.4a1.6 1.6 0 0 1 1.6-1.6h4.1l2.1 2.5h8.2a1.6 1.6 0 0 1 1.6 1.6v8.7a1.6 1.6 0 0 1-1.6 1.6H4.8a1.6 1.6 0 0 1-1.6-1.6V7.4Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.2 7.4a1.6 1.6 0 0 1 1.6-1.6h4.1l2.1 2.5h8.2a1.6 1.6 0 0 1 1.6 1.6v8.7a1.6 1.6 0 0 1-1.6 1.6H4.8a1.6 1.6 0 0 1-1.6-1.6V7.4Z'/%3E%3C/svg%3E");
}

/* het documentje rechts in een profielkaart: een cv met poppetje en regels */
.avb-cv-ikoon--cvdoc {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 3.4A1.6 1.6 0 0 1 4.4 1.8h15.2l9.6 8.4v26.4a1.6 1.6 0 0 1-1.6 1.6H4.4a1.6 1.6 0 0 1-1.6-1.6V3.4Z'/%3E%3Cpath d='M19.6 1.8v8.4h9.6'/%3E%3Ccircle cx='11.4' cy='17.6' r='3'/%3E%3Cpath d='M6.6 25.6c.5-2.8 2.4-4.2 4.8-4.2s4.3 1.4 4.8 4.2'/%3E%3Cpath d='M19.6 18.4h5.6M19.6 23.2h5.6M8 30.4h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 40' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 3.4A1.6 1.6 0 0 1 4.4 1.8h15.2l9.6 8.4v26.4a1.6 1.6 0 0 1-1.6 1.6H4.4a1.6 1.6 0 0 1-1.6-1.6V3.4Z'/%3E%3Cpath d='M19.6 1.8v8.4h9.6'/%3E%3Ccircle cx='11.4' cy='17.6' r='3'/%3E%3Cpath d='M6.6 25.6c.5-2.8 2.4-4.2 4.8-4.2s4.3 1.4 4.8 4.2'/%3E%3Cpath d='M19.6 18.4h5.6M19.6 23.2h5.6M8 30.4h16'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--auto {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 16.4v2.2a.9.9 0 0 0 .9.9h1.8a.9.9 0 0 0 .9-.9v-1.3M20.6 16.4v2.2a.9.9 0 0 1-.9.9h-1.8a.9.9 0 0 1-.9-.9v-1.3'/%3E%3Cpath d='M4.6 17.3h14.8a1.2 1.2 0 0 0 1.2-1.2v-3.3a2 2 0 0 0-1.3-1.9l-1.5-.5-1.7-3.5a2 2 0 0 0-1.8-1.1H8.7a2 2 0 0 0-1.8 1.1L5.2 10.4l-1.5.5a2 2 0 0 0-1.3 1.9v3.3a1.2 1.2 0 0 0 1.2 1.2Z'/%3E%3Cpath d='M5.6 10.6h12.8'/%3E%3Ccircle cx='6.9' cy='13.8' r='1.1'/%3E%3Ccircle cx='17.1' cy='13.8' r='1.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.4 16.4v2.2a.9.9 0 0 0 .9.9h1.8a.9.9 0 0 0 .9-.9v-1.3M20.6 16.4v2.2a.9.9 0 0 1-.9.9h-1.8a.9.9 0 0 1-.9-.9v-1.3'/%3E%3Cpath d='M4.6 17.3h14.8a1.2 1.2 0 0 0 1.2-1.2v-3.3a2 2 0 0 0-1.3-1.9l-1.5-.5-1.7-3.5a2 2 0 0 0-1.8-1.1H8.7a2 2 0 0 0-1.8 1.1L5.2 10.4l-1.5.5a2 2 0 0 0-1.3 1.9v3.3a1.2 1.2 0 0 0 1.2 1.2Z'/%3E%3Cpath d='M5.6 10.6h12.8'/%3E%3Ccircle cx='6.9' cy='13.8' r='1.1'/%3E%3Ccircle cx='17.1' cy='13.8' r='1.1'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--zoek {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.8'/%3E%3Cpath d='m15.6 15.6 4.6 4.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.6' cy='10.6' r='6.8'/%3E%3Cpath d='m15.6 15.6 4.6 4.6'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--persoon {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.8' r='4'/%3E%3Cpath d='M4.4 20.2c0-4.2 3.4-6.6 7.6-6.6s7.6 2.4 7.6 6.6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.8' r='4'/%3E%3Cpath d='M4.4 20.2c0-4.2 3.4-6.6 7.6-6.6s7.6 2.4 7.6 6.6'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--info {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.4'/%3E%3Cpath d='M12 7.7v.1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.4'/%3E%3Cpath d='M12 7.7v.1'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--mensen {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.2'/%3E%3Cpath d='M6.4 19c0-3.3 2.5-5.2 5.6-5.2S17.6 15.7 17.6 19'/%3E%3Ccircle cx='4.6' cy='10.4' r='2.2'/%3E%3Cpath d='M1.4 18c0-2.4 1.4-3.8 3.2-3.8'/%3E%3Ccircle cx='19.4' cy='10.4' r='2.2'/%3E%3Cpath d='M22.6 18c0-2.4-1.4-3.8-3.2-3.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.4' r='3.2'/%3E%3Cpath d='M6.4 19c0-3.3 2.5-5.2 5.6-5.2S17.6 15.7 17.6 19'/%3E%3Ccircle cx='4.6' cy='10.4' r='2.2'/%3E%3Cpath d='M1.4 18c0-2.4 1.4-3.8 3.2-3.8'/%3E%3Ccircle cx='19.4' cy='10.4' r='2.2'/%3E%3Cpath d='M22.6 18c0-2.4-1.4-3.8-3.2-3.8'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--support {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 15v-3a7.8 7.8 0 0 1 15.6 0v3'/%3E%3Crect x='2.4' y='13.6' width='4' height='6' rx='1.6'/%3E%3Crect x='17.6' y='13.6' width='4' height='6' rx='1.6'/%3E%3Cpath d='M19.8 19.6v.6a2 2 0 0 1-2 2H13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 15v-3a7.8 7.8 0 0 1 15.6 0v3'/%3E%3Crect x='2.4' y='13.6' width='4' height='6' rx='1.6'/%3E%3Crect x='17.6' y='13.6' width='4' height='6' rx='1.6'/%3E%3Cpath d='M19.8 19.6v.6a2 2 0 0 1-2 2H13'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--pijl {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
}

.avb-cv-ikoon--vink {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 6.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 6.8'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   Gedeelde opbouw
   -------------------------------------------------------------------------- */
.avb-cv {
  padding: 72px 0;
}

.avb-cv__binnen {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--avb-zijmarge, 15px); /* zelfde lijn als het logo; zie algemeen/avb-zijmarge.css */
}

/* De eerste sectie schuift onder de menubalk vandaan. Op deze pagina's staat
   geen donkere hero, dus de balk is wit en heeft ruimte nodig. */
.avb-cv--eerste {
  padding-top: 56px;
}

.avb-cv--licht {
  background: #f6f9fd;
}

.avb-cv__kop {
  margin: 0 0 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #101418;
}

.avb-cv__kop--gecentreerd {
  text-align: center;
  margin-bottom: 34px;
}

/* Let op de dubbele klasse in de selectors hieronder.
   Het thema zet zijn alineamaten met `.entry-content p` (specificiteit 0-1-1).
   Een enkele klasse als `.avb-cv-cta__sub` is 0-1-0 en verliest het daarvan:
   de witte tekst op de rode balk werd donker en de regels in de profielkaarten
   kregen de marge van het thema. Met `.avb-cv` ervoor is het 0-2-0 en wint de
   opmaak hier wel. */
.avb-cv p {
  color: #4b5563;
  font-size: 16px;
  line-height: 1.6;
}

/* --- knoppen -------------------------------------------------------------
   Zelfde vorm als .avb-doelgroep__knop op de homepage: pil, 16px, 600.
   Deze knoppen zijn geen .kb-button, dus het ronde schijfje uit
   algemeen\avb-knoppen.css raakt ze niet; dat is hier ook niet gewenst,
   het ontwerp toont platte pilknoppen.
   ------------------------------------------------------------------------- */
.avb-cv-knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.avb-cv-knop--rood {
  background: #d50117;
  border-color: #d50117;
  color: #ffffff !important;
}

.avb-cv-knop--rood:hover,
.avb-cv-knop--rood:focus {
  background: #05183a;
  border-color: #05183a;
  color: #ffffff !important;
}

.avb-cv-knop--omlijnd {
  background: #ffffff;
  border-color: #d50117;
  color: #d50117 !important;
}

.avb-cv-knop--omlijnd:hover,
.avb-cv-knop--omlijnd:focus {
  background: #d50117;
  color: #ffffff !important;
}

.avb-cv-knop--wit {
  background: #ffffff;
  border-color: #ffffff;
  color: #d50117 !important;
}

.avb-cv-knop--wit:hover,
.avb-cv-knop--wit:focus {
  background: #05183a;
  border-color: #05183a;
  color: #ffffff !important;
}

.avb-cv-knop--witomlijnd {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #ffffff !important;
}

.avb-cv-knop--witomlijnd:hover,
.avb-cv-knop--witomlijnd:focus {
  background: #ffffff;
  border-color: #ffffff;
  color: #d50117 !important;
}

/* tekstlink met pijltje, zoals onder "Een waardevolle aanvulling" */
.avb-cv-knop--tekst {
  padding: 13px 22px;
  background: #ffffff;
  border-color: #e2c7ca;
  color: #d50117 !important;
  justify-content: space-between;
  gap: 26px;
}

.avb-cv-knop--tekst:hover,
.avb-cv-knop--tekst:focus {
  border-color: #d50117;
}

.avb-cv-knop__pijl {
  width: 17px;
  height: 17px;
}


/* ==========================================================================
   1. Hero: tekst links, een indruk van de database rechts
   ========================================================================== */
.avb-cv-hero__binnen {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 64px;
  align-items: start;
}

/* lettergrootte en regelhoogte komen uit de Customizer (h1_font), net als
   elke andere H1; zie server/zet-h1-grootte.php */
.avb-cv-hero__titel {
  margin: 0 0 26px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  letter-spacing: normal;
  color: #101418;
}

.avb-cv .avb-cv-hero__lead {
  margin: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 700;
  color: #101418;
}

.avb-cv .avb-cv-hero__tekst {
  margin: 0 0 28px;
  max-width: 460px;
}

.avb-cv-hero__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}

/* --- het vertrouwenskaartje onder de knoppen ---------------------------- */
.avb-cv-bewijs {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 420px;
  padding: 22px 26px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(5, 24, 58, .05);
}

.avb-cv-bewijs__ikoon {
  width: 34px;
  height: 34px;
  color: #d50117;
}

.avb-cv-bewijs__label {
  display: block;
  margin: 0 0 2px;
  font-size: 14px;
  color: #6b7280;
}

.avb-cv-bewijs__waarde {
  display: block;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: #05183a;
}

/* --- rechterkolom: de indruk van de database ---------------------------- */
.avb-cv-indruk__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 6px;
}

.avb-cv .avb-cv-indruk__intro {
  margin: 0 0 20px;
  max-width: 520px;
}

/* "Beschikbaar na inloggen" - eerlijk label, geen knop */
.avb-cv-slotlabel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  color: #d50117;
}

.avb-cv-slotlabel__ikoon {
  width: 19px;
  height: 19px;
}

.avb-cv-profielen {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.avb-cv-profiel {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 24px 28px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
}

/* de initialen in een grijze schijf; bewust geen foto, want de profielen
   zijn een indruk en geen echte kandidaat */
.avb-cv-profiel__schijf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  border-radius: 50%;
  background: #eef1f6;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #7b8798;
}

.avb-cv-profiel__body {
  flex: 1 1 auto;
  min-width: 0;
}

.avb-cv-profiel__functie {
  display: block;
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: #05183a;
}

.avb-cv .avb-cv-profiel__regel {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.4;
  color: #6b7280;
}

.avb-cv .avb-cv-profiel__regel:last-child {
  margin-bottom: 0;
}

.avb-cv-profiel__regelikoon {
  width: 17px;
  height: 17px;
  color: #9aa4b2;
}

.avb-cv-profiel__doc {
  width: 52px;
  height: 65px;
  flex: 0 0 52px;
  color: #c8d0dc;
}

.avb-cv .avb-cv-indruk__voet {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  font-size: 15px;
  color: #6b7280;
}

.avb-cv-indruk__voetikoon {
  width: 19px;
  height: 19px;
  color: #9aa4b2;
}


/* ==========================================================================
   2. Drie eigenschappen van de database
   ========================================================================== */
.avb-cv-usps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.avb-cv-usp {
  padding: 34px 30px 38px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  text-align: center;
}

.avb-cv-usp__ikoon {
  width: 46px;
  height: 46px;
  margin: 0 auto 22px;
  color: #d50117;
}

.avb-cv-usp__kop {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  color: #101418;
}

.avb-cv .avb-cv-usp p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #6b7280;
}


/* ==========================================================================
   3. Zo werkt het - drie stappen met scheidingslijnen
   ========================================================================== */
.avb-cv-stappen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.avb-cv-stap {
  padding: 0 28px;
  text-align: center;
}

.avb-cv-stap + .avb-cv-stap {
  border-left: 1px dashed #dfe4ec;
}

.avb-cv-stap__nummer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fdeaec;
  font-size: 22px;
  font-weight: 700;
  color: #d50117;
}

.avb-cv-stap__kop {
  margin: 0 0 12px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  color: #101418;
}

.avb-cv .avb-cv-stap p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #6b7280;
}

/* de losse melding onder de stappen */
.avb-cv-melding {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 780px;
  margin: 40px auto 0;
  padding: 22px 28px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 14px;
}

.avb-cv-melding__ikoon {
  width: 30px;
  height: 30px;
  color: #d50117;
}

.avb-cv .avb-cv-melding p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4b5563;
}


/* ==========================================================================
   4. Aanvulling op vacatureplaatsing + "Goed om te weten"
   ========================================================================== */
.avb-cv-duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
}

.avb-cv-duo__vak {
  padding: 34px 36px;
  border-radius: 16px;
}

.avb-cv-duo__vak--wit {
  background: #ffffff;
  border: 1px solid #e8ecf2;
}

.avb-cv-duo__vak--licht {
  background: #f6f9fd;
  border: 1px solid #e8ecf2;
}

.avb-cv .avb-cv-duo__vak p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.65;
}

.avb-cv-duo__kop {
  margin: 0 0 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #101418;
}

/* de rechterkolom heeft het icoon naast de kop */
.avb-cv-duo__kopregel {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.avb-cv-duo__kopregel .avb-cv-duo__kop {
  margin: 0;
}

.avb-cv-duo__kopikoon {
  width: 30px;
  height: 30px;
  color: #d50117;
}


/* ==========================================================================
   5. Rode oproepbalk
   ========================================================================== */
.avb-cv-cta {
  padding: 0 0 20px;
}

.avb-cv-cta__vlak {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 48px 56px;
  border-radius: 16px;
  background: #d50117;
}

.avb-cv-cta__tekst {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

.avb-cv-cta__kop {
  margin: 0 0 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

.avb-cv .avb-cv-cta__sub {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.avb-cv-cta__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* het lijntekeningetje rechts: vergrootglas met een profiel erin */
.avb-cv-cta__figuur {
  flex: 0 0 auto;
  width: 230px;
  height: 190px;
  color: rgba(255, 255, 255, .55);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 190' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='96' cy='84' r='66'/%3E%3Ccircle cx='96' cy='68' r='22'/%3E%3Cpath d='M62 122c4-20 17-30 34-30s30 10 34 30'/%3E%3Cpath d='m145 133 40 40'/%3E%3Cpath d='M176 60h44M176 84h30M176 108h38'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 190' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='96' cy='84' r='66'/%3E%3Ccircle cx='96' cy='68' r='22'/%3E%3Cpath d='M62 122c4-20 17-30 34-30s30 10 34 30'/%3E%3Cpath d='m145 133 40 40'/%3E%3Cpath d='M176 60h44M176 84h30M176 108h38'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
}


/* ==========================================================================
   6. Vertrouwensbalk onderaan
   ========================================================================== */
.avb-cv-vertrouwen {
  padding-top: 28px;
  padding-bottom: 72px;
}

.avb-cv-vertrouwen__rij {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.avb-cv-punt {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avb-cv-punt__ikoon {
  width: 34px;
  height: 34px;
  color: #d50117;
}

.avb-cv .avb-cv-punt p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #4b5563;
}


/* ==========================================================================
   /cv-credits/ - de drie creditpakketten

   De prijzen komen uit WooCommerce (producten 4107, 4108 en 4109) en worden
   door cvs\zet-cv-credits.ps1 uit de winkel gelezen, zodat de pagina niet uit
   de pas loopt met de webshop.
   ========================================================================== */
.avb-cvc-pakketten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.avb-cvc-pakket {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 34px 32px 32px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 20px;
}

/* het middelste pakket springt eruit, net als "Meest gekozen" op
   /voor-werkgevers/ */
.avb-cvc-pakket--uitgelicht {
  background: #f6f9fd;
  box-shadow: 0 10px 30px rgba(5, 24, 58, .10), 0 2px 6px rgba(5, 24, 58, .05);
}

.avb-cvc-pakket__label {
  position: absolute;
  top: -15px;
  left: 32px;
  height: 30px;
  padding: 0 16px;
  border-radius: 15px;
  background: #d50117;
  font-size: 13px;
  font-weight: 700;
  line-height: 30px;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(213, 1, 23, .28);
}

.avb-cvc-pakket__ikoon {
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  color: #d50117;
}

.avb-cv .avb-cvc-pakket__prijs {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  color: #05183a;
}

.avb-cvc-pakket__btw {
  display: block;
  margin: 6px 0 0;
  font-size: 14px;
  color: #6b7280;
}

.avb-cvc-pakket__naam {
  margin: 14px 0 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8ecf2;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: #05183a;
}

.avb-cv .avb-cvc-pakket__lijst {
  margin: 18px 0 26px;
  padding: 0;
  list-style: none;
}

.avb-cv .avb-cvc-pakket__lijst li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: #4b5563;
}

.avb-cvc-pakket__vink {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  color: #d50117;
}

.avb-cvc-pakket__knop {
  margin-top: auto;
  justify-content: center;
}


/* ==========================================================================
   Responsief
   ========================================================================== */
@media (max-width: 1024px) {
  .avb-cv {
    padding: 56px 0;
  }

  .avb-cv--eerste {
    padding-top: 40px;
  }

  .avb-cv-hero__binnen,
  .avb-cv-duo {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .avb-cv-hero__tekst,
  .avb-cv-bewijs {
    max-width: none;
  }

  .avb-cv-usps,
  .avb-cvc-pakketten {
    grid-template-columns: 1fr;
  }

  .avb-cv-stappen {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .avb-cv-stap {
    padding: 0;
  }

  /* onder elkaar hoort de scheiding boven de stap, niet ernaast */
  .avb-cv-stap + .avb-cv-stap {
    border-left: 0;
    border-top: 1px dashed #dfe4ec;
    padding-top: 32px;
  }

  .avb-cv-cta__vlak {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 40px 32px;
  }

  .avb-cv-cta__figuur {
    align-self: center;
    width: 190px;
    height: 155px;
  }

  .avb-cv-vertrouwen__rij {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  /* het uitgelichte pakket steekt hier niet uit; anders valt het label
     over de kaart erboven */
  .avb-cvc-pakket--uitgelicht {
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .avb-cv {
    padding: 44px 0;
  }

  .avb-cv__kop,
  .avb-cv-duo__kop {
    font-size: 21px;
  }

  .avb-cv-hero__knoppen .avb-cv-knop,
  .avb-cv-cta__knoppen .avb-cv-knop {
    flex: 1 1 100%;
    justify-content: center;
  }

  .avb-cv-indruk__top {
    flex-direction: column;
    gap: 8px;
  }

  /* de profielkaart wordt te smal voor drie kolommen; het documentje is
     versiering en kan weg, de initialen en de tekst blijven */
  .avb-cv-profiel {
    gap: 18px;
    padding: 20px;
  }

  .avb-cv-profiel__doc {
    display: none;
  }

  .avb-cv-profiel__schijf {
    width: 62px;
    height: 62px;
    flex-basis: 62px;
    font-size: 18px;
  }

  .avb-cv-profiel__functie {
    font-size: 19px;
  }

  .avb-cv-duo__vak {
    padding: 26px 22px;
  }

  .avb-cv-cta__kop {
    font-size: 24px;
  }

  .avb-cv-vertrouwen__rij {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ======================================================================
   Werkgeverspaginas (bereik, campagnes, klantresultaten, werken-bij, ATS)
   ====================================================================== */

/* ==========================================================================
   Werkgeverspagina's: bereik, campagnes & zichtbaarheid, klantresultaten,
   werken-bij-sites en ATS-koppeling.

   Naar de aanlevering van 17-08-2026 (map Werkgevers_Ruben). De klant hield de
   inhoud bewust compact - "less is more" - dus dit is een klein stelsel van
   tekstblokken, een beeldblok, een uitklapblok en een slider, en geen nieuwe
   opmaaktaal per pagina.

   Maten en kleuren volgen de rest van de site:
     paginakop  56/48/38px Plus Jakarta Sans 400  (zoals .avb-doelgroep__kop)
     sectiekop  24px 600
     tekst      16px/1.65 #4b5563, klein 15px #6b7280
     rood #d50117, donkerblauw #05183a, rand #e8ecf2, licht #f6f9fd
     container 1280px met 15px lucht, gelijk aan de header

   Let op de dubbele klasse in selectors die op een <p> mikken: het thema zet
   zijn alineamaten met `.entry-content p` (specificiteit 0-1-1), dus een enkele
   klasse verliest het daarvan. Met `.avb-wg` ervoor wint deze opmaak wel.

   De HTML staat als wp:html-blokken in de pagina's zelf; zie
   werkgevers\zet-werkgeverspaginas.ps1.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Iconen als CSS-masker (WordPress stript <svg> uit pagina-inhoud)
   -------------------------------------------------------------------------- */
.avb-wg-ikoon {
  display: inline-block;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.avb-wg-ikoon--vink {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 6.8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 6.8'/%3E%3C/svg%3E");
}

.avb-wg-ikoon--pijl {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
}

.avb-wg-ikoon--chevron {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}


/* --------------------------------------------------------------------------
   Sectie en container
   -------------------------------------------------------------------------- */
.avb-wg {
  padding: 88px 0;
}

.avb-wg__binnen {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--avb-zijmarge, 15px); /* zelfde lijn als het logo; zie algemeen/avb-zijmarge.css */
}

/* Smallere maat voor lopende tekst: een regel van 1280px leest niet.
   De container zelf blijft 1280 breed en alleen de inhoud wordt beperkt, zodat
   de tekst links uitlijnt met het logo in de header en met de beelden eronder.
   Met een smallere container werd het blok gecentreerd en liep de linkerrand
   van de tekst niet meer gelijk met de rest van de pagina. */
.avb-wg__binnen--smal > * {
  max-width: 860px;
}

/* De eerste sectie schuift onder de witte menubalk vandaan en heeft daar
   ruimte voor nodig; deze pagina's hebben geen donkere hero. */
.avb-wg--eerste {
  padding-top: 56px;
  padding-bottom: 40px;
}

.avb-wg--licht {
  background: #f6f9fd;
}

/* Voor een sectie die alleen een beeld of de slider bevat: die hangt bij de
   tekst erboven, dus geen lucht erboven en minder eronder. */
.avb-wg--strak {
  padding-top: 0;
  padding-bottom: 32px;
}


/* --------------------------------------------------------------------------
   Koppen en tekst
   -------------------------------------------------------------------------- */
/* Geen eigen lettergrootte of regelhoogte: elke H1 op de site volgt de
   Customizer (theme mod h1_font, 48/42/32px), zie server/zet-h1-grootte.php.
   Afgesproken 02-10-2026: "overal dezelfde h1-grootte". */
.avb-wg__titel {
  margin: 0 0 22px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 400;
  color: #101418;
}

.avb-wg__binnen--smal > .avb-wg__titel {
  max-width: 1040px;
}

.avb-wg__kop {
  margin: 0 0 14px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #101418;
}

.avb-wg .avb-wg__lead {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  color: #101418;
}

.avb-wg p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.65;
  color: #4b5563;
}

.avb-wg p:last-child {
  margin-bottom: 0;
}

.avb-wg a:not([class]) {
  color: #d50117;
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* --------------------------------------------------------------------------
   Inhoudsblokken onder elkaar.

   Eerst stond elk blok als kop plus grijze alinea's in één kolom, en zo las de
   hele pagina als één lap. Nu heeft elk blok een lijn erboven, een rood
   volgnummer, een grotere kop en een eerste alinea die als lead werkt. Op
   desktop staat de kop links naast de tekst (zie de mediaquery hieronder).

   Het volgnummer is een CSS-teller en dus alleen opmaak: de koppen in de
   pagina blijven gewoon de koppen. De teller loopt door over de secties heen,
   daarom staat de reset op .entry-content.
   -------------------------------------------------------------------------- */
.entry-content {
  counter-reset: avb-blok;
}

.avb-wg-blok {
  counter-increment: avb-blok;
  padding-top: 28px;
  border-top: 1px solid #dfe4ec;
}

.avb-wg-blok + .avb-wg-blok {
  margin-top: 64px;
}

/* na de paginakop een flinke stap, anders plakt het eerste blok eraan */
.avb-wg__binnen--smal > .avb-wg__titel + .avb-wg-blok {
  margin-top: 64px;
}

.avb-wg-blok > .avb-wg__kop::before {
  content: counter(avb-blok, decimal-leading-zero);
  content: counter(avb-blok, decimal-leading-zero) / "";
  display: block;
  margin-bottom: 16px;
  padding-left: 34px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  color: #d50117;
  background: linear-gradient(#d50117, #d50117) left center / 24px 2px no-repeat;
}

.avb-wg-blok > .avb-wg__kop,
.avb-wg:not(.avb-wg--eerste) .avb-wg__kop {
  margin-bottom: 18px;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

/* de eerste alinea van een blok is de lead: donker en groter */
.avb-wg .avb-wg-blok > .avb-wg__kop + p {
  margin-bottom: 20px;
  font-size: 19px;
  line-height: 1.55;
  font-weight: 500;
  color: #101418;
}

.avb-wg .avb-wg-blok > p {
  font-size: 17px;
  line-height: 1.7;
}

/* Losse kop met één alinea buiten een blok ("Waarom AutomotiveVacaturebank.nl?"
   op /bereik/): dat is de conclusie van de pagina, dus die tekst mag groot.
   Bewust niet in twee kolommen: "AutomotiveVacaturebank.nl?" is één lang woord
   en past niet in de smalle linkerkolom. */
.avb-wg:not(.avb-wg--eerste) > .avb-wg__binnen--smal > .avb-wg__kop + p {
  max-width: 900px;
  font-size: clamp(19px, 1.8vw, 24px);
  line-height: 1.5;
  color: #101418;
}

@media (min-width: 1025px) {
  .avb-wg__binnen--smal > .avb-wg-blok {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: start;
    max-width: none;
  }

  /* kop links over de hele hoogte van het blok, en hij blijft staan terwijl
     de tekst ernaast voorbij scrolt */
  .avb-wg-blok > .avb-wg__kop {
    grid-column: 1;
    grid-row: 1 / span 30;
    position: sticky;
    top: 120px;
    margin-bottom: 0;
  }

  .avb-wg-blok > :not(.avb-wg__kop) {
    grid-column: 2;
  }
}

/* twee blokken naast elkaar, voor de kortere stukken */
.avb-wg-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.avb-wg-kaart {
  padding: 30px 32px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
}

.avb-wg--licht .avb-wg-kaart {
  background: #ffffff;
}


/* --------------------------------------------------------------------------
   Beeldblok: infographic of sfeerbeeld
   -------------------------------------------------------------------------- */
.avb-wg-beeld {
  margin: 0;
}

.avb-wg-beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* de infographics hebben zelf al een lichte kaartrand in het beeld;
   een extra rand eromheen wordt dan dubbelop */
.avb-wg-beeld--infographic img {
  border-radius: 18px;
}

.avb-wg-beeld--sfeer img {
  border-radius: 18px;
}

.avb-wg .avb-wg-beeld figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
}


/* --------------------------------------------------------------------------
   Cijferrij.
   De documenten eisen dat de cijfers uit de infographic ook als gewone
   HTML-tekst op de pagina staan, zodat ze niet alleen in een afbeelding
   zichtbaar zijn (en periodiek bijgewerkt kunnen worden).
   -------------------------------------------------------------------------- */
.avb-wg-cijfers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.avb-wg-cijfer {
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
}

/* Bewust kleiner dan in de infographic: de cijfers staan daar al groot. Deze
   rij is de tekstversie ernaast - leesbaar voor zoekmachines en makkelijk bij
   te werken - en hoort niet met het beeld te concurreren. */
.avb-wg-cijfer__getal {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: #05183a;
}

.avb-wg .avb-wg-cijfer__wat {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: #101418;
}

.avb-wg .avb-wg-cijfer__bij {
  margin: 2px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #6b7280;
}

.avb-wg .avb-wg-cijfers__bron {
  margin: 16px 0 0;
  font-size: 13px;
  color: #9aa4b2;
}


/* --------------------------------------------------------------------------
   Voordelenlijst met vinkjes
   -------------------------------------------------------------------------- */
.avb-wg-voordelen {
  margin: 0;
  padding: 0;
  list-style: none;
}

.avb-wg-voordelen li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.55;
  color: #4b5563;
}

.avb-wg-voordelen li:last-child {
  margin-bottom: 0;
}

.avb-wg-voordelen__vink {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  color: #d50117;
}


/* --------------------------------------------------------------------------
   Uitklapblok.
   Bewust <details>/<summary>: geen script nodig, werkt met toetsenbord en
   schermlezer, en de inhoud staat gewoon in de HTML - dus indexeerbaar, ook
   als hij dichtgeklapt is.
   -------------------------------------------------------------------------- */
.avb-wg-uitklap {
  border: 1px solid #e8ecf2;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.avb-wg-uitklap + .avb-wg-uitklap {
  margin-top: 12px;
}

.avb-wg-uitklap > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: #05183a;
  cursor: pointer;
  list-style: none;
}

/* het standaard driehoekje weg, in beide motoren */
.avb-wg-uitklap > summary::-webkit-details-marker { display: none; }
.avb-wg-uitklap > summary::marker { content: ""; }

.avb-wg-uitklap > summary:hover {
  background: #f6f9fd;
}

.avb-wg-uitklap > summary:focus-visible {
  outline: 2px solid #d50117;
  outline-offset: -2px;
}

.avb-wg-uitklap__pijl {
  width: 20px;
  height: 20px;
  color: #d50117;
  transition: transform .18s ease;
}

.avb-wg-uitklap[open] .avb-wg-uitklap__pijl {
  transform: rotate(180deg);
}

.avb-wg-uitklap__inhoud {
  padding: 0 24px 22px;
}

.avb-wg .avb-wg-uitklap__inhoud p {
  font-size: 15px;
  line-height: 1.65;
}


/* --------------------------------------------------------------------------
   Knoppen (zelfde vorm als op /cvs-zoeken/)
   -------------------------------------------------------------------------- */
.avb-wg-knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: 100px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.avb-wg-knop--rood {
  background: #d50117;
  border-color: #d50117;
  color: #ffffff !important;
}

.avb-wg-knop--rood:hover,
.avb-wg-knop--rood:focus {
  background: #05183a;
  border-color: #05183a;
  color: #ffffff !important;
}

.avb-wg-knop--omlijnd {
  background: #ffffff;
  border-color: #d50117;
  color: #d50117 !important;
}

.avb-wg-knop--omlijnd:hover,
.avb-wg-knop--omlijnd:focus {
  background: #d50117;
  color: #ffffff !important;
}

.avb-wg-knop--wit {
  background: #ffffff;
  border-color: #ffffff;
  color: #d50117 !important;
}

.avb-wg-knop--wit:hover,
.avb-wg-knop--wit:focus {
  background: #05183a;
  border-color: #05183a;
  color: #ffffff !important;
}

.avb-wg-knop--witomlijnd {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #ffffff !important;
}

.avb-wg-knop--witomlijnd:hover,
.avb-wg-knop--witomlijnd:focus {
  background: #ffffff;
  border-color: #ffffff;
  color: #d50117 !important;
}

.avb-wg-knop__pijl {
  width: 17px;
  height: 17px;
}


/* --------------------------------------------------------------------------
   Afsluitende contactoproep.
   Elk document eindigt met precies zo'n blok; het staat overal op dezelfde
   plek en in dezelfde vorm.
   -------------------------------------------------------------------------- */
.avb-wg-cta {
  padding-bottom: 72px;
}

.avb-wg-cta__vlak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 44px 52px;
  border-radius: 16px;
  background: #d50117;
}

.avb-wg-cta__tekst {
  max-width: 720px;
}

.avb-wg-cta__kop {
  margin: 0 0 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
}

.avb-wg .avb-wg-cta__sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}

.avb-wg-cta__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 0 0 auto;
}


/* ==========================================================================
   Slider met voorbeelden van werken-bij-sites

   Briefing: een groot rustig voorbeeld per slide, pijlen, navigatiepunten,
   toetsenbord- en veegbediening, geen snelle automatische rotatie, vaste
   beeldverhouding zodat er niets verspringt tijdens het laden. Merknaam en
   toelichting staan als HTML in de pagina, niet in het beeld.

   Zonder JavaScript blijft het een horizontaal scrollende strook met alle
   slides; de bediening wordt pas zichtbaar zodra het script aanhaakt.
   ========================================================================== */
.avb-wg-slider {
  position: relative;
}

.avb-wg-slider__spoor {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.avb-wg-slider__spoor::-webkit-scrollbar {
  display: none;
}

.avb-wg-slide {
  flex: 0 0 100%;
  max-width: 100%;
  scroll-snap-align: center;
}

.avb-wg-slide__figuur {
  margin: 0;
}

/* vaste beeldverhouding: geen verspringende inhoud tijdens het laden */
.avb-wg-slide__beeld {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  background: #f1f3f6;
}

.avb-wg-slide__bij {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 16px;
}

.avb-wg-slide__merk {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: #05183a;
}

.avb-wg .avb-wg-slide__uitleg {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: #6b7280;
}

/* --- bediening --------------------------------------------------------- */
/* pas tonen als de JS er is; anders zijn het knoppen die niets doen */
.avb-wg-slider__bediening {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 24px;
}

.avb-wg-slider.is-actief .avb-wg-slider__bediening {
  display: flex;
}

.avb-wg-slider__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border: 1px solid #d8dee8;
  border-radius: 50%;
  background: #ffffff;
  color: #05183a;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.avb-wg-slider__knop:hover:not(:disabled),
.avb-wg-slider__knop:focus-visible {
  background: #d50117;
  border-color: #d50117;
  color: #ffffff;
}

.avb-wg-slider__knop:disabled {
  opacity: .4;
  cursor: default;
}

.avb-wg-slider__knop .avb-wg-ikoon {
  width: 19px;
  height: 19px;
}

.avb-wg-slider__knop--vorige .avb-wg-ikoon {
  transform: rotate(180deg);
}

.avb-wg-slider__punten {
  display: flex;
  align-items: center;
  gap: 9px;
}

.avb-wg-slider__punt {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d0d7e2;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}

.avb-wg-slider__punt:hover,
.avb-wg-slider__punt:focus-visible {
  background: #9aa4b2;
}

.avb-wg-slider__punt.is-actief {
  background: #d50117;
  transform: scale(1.25);
}

/* zichtbare focus houden; het thema zet die site-breed uit */
.avb-wg-slider__knop:focus-visible,
.avb-wg-slider__punt:focus-visible,
.avb-wg-slide a:focus-visible {
  outline: 2px solid #d50117;
  outline-offset: 3px;
}


/* ==========================================================================
   Reviews (klantresultaten)
   Het queryblok van Kadence levert de kaarten; de inhoud komt uit het
   berichttype auto-klantenervaring. Hier alleen wat lucht eromheen.
   ========================================================================== */
.avb-wg-reviews {
  margin-top: 8px;
}


/* ==========================================================================
   Responsief
   ========================================================================== */
@media (max-width: 1024px) {
  .avb-wg {
    padding: 48px 0;
  }

  .avb-wg--eerste {
    padding-top: 40px;
  }

  .avb-wg-duo {
    grid-template-columns: 1fr;
  }

  .avb-wg-cijfers {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .avb-wg-cta__vlak {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 34px 28px;
  }
}

@media (max-width: 600px) {
  .avb-wg {
    padding: 40px 0;
  }

  .avb-wg__kop {
    font-size: 21px;
  }

  .avb-wg .avb-wg__lead,
  .avb-wg .avb-wg-blok > .avb-wg__kop + p {
    font-size: 18px;
  }

  .avb-wg-blok + .avb-wg-blok,
  .avb-wg__binnen--smal > .avb-wg__titel + .avb-wg-blok {
    margin-top: 48px;
  }

  .avb-wg-kaart,
  .avb-wg-cijfer {
    padding: 22px 20px;
  }

  .avb-wg-cta__kop {
    font-size: 23px;
  }

  .avb-wg-cta__knoppen .avb-wg-knop,
  .avb-wg-cta__knoppen {
    width: 100%;
  }

  .avb-wg-cta__knoppen .avb-wg-knop {
    justify-content: center;
  }

  .avb-wg-uitklap > summary {
    padding: 16px 18px;
    font-size: 16px;
  }

  .avb-wg-uitklap__inhoud {
    padding: 0 18px 18px;
  }

  .avb-wg-slider__spoor {
    gap: 14px;
  }

  .avb-wg-slide__merk {
    font-size: 18px;
  }
}

/* wie liever geen beweging ziet, krijgt geen vloeiend scrollen */
@media (prefers-reduced-motion: reduce) {
  .avb-wg-slider__spoor {
    scroll-behavior: auto;
  }

  .avb-wg-uitklap__pijl,
  .avb-wg-slider__punt,
  .avb-wg-knop {
    transition: none;
  }
}

/* Op de smalste telefoons (360px) paste "AutomotiveVacaturebank.nl?" op /bereik/
   net niet op een regel van 24px. Daar een stap kleiner (apparatentest 02-10-2026). */
@media (max-width: 400px) {
  .avb-wg-blok > .avb-wg__kop,
  .avb-wg:not(.avb-wg--eerste) .avb-wg__kop {
    font-size: 22px;
  }
}

/* --- werkgeverdetail: sprong naar "Recente vacatures" ---------------------
   Feedback Peter (03-11-2026): de knop "Bekijk recente vacatures" in de
   headerfoto zakt te weinig. Gemeten op /werkgever/broekhuis/976503/: de
   sectie #av-employer-vacancies landde op y=1, dus precies onder de vaste
   menubalk (82px desktop, 74px mobiel). De kop "Recente vacatures" en de
   eerste vacature vielen erachter weg. Met deze marge houdt de browser bij
   de sprong rekening met de menubalk, plus wat lucht.                      */
#av-employer-vacancies {
  scroll-margin-top: 112px;
}
@media (max-width: 1024px) {
  #av-employer-vacancies {
    scroll-margin-top: 96px;
  }
}

/* ======================================================================
   Productpagina - carrousel
   ====================================================================== */

.kb-query-grid-wrap.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden;
    gap: 30px;
    scroll-behavior: smooth;
}


/* DESKTOP → 3 FULL CARDS, NO OFFSET */
.kb-query-grid-wrap.products > li.kb-query-item {
    box-sizing: border-box; /* important for exact width */
    flex: 0 0 calc((100% - 60px)/3); /* 60px = 2 gaps (3 cards) */
}

/* NAVIGATION BUTTONS */
.custom-carousel-nav{
  position:absolute;
  z-index:1;
  top: -5px;
  right:0px;
  display: flex;
  gap: 35px;  
}
.custom-carousel-nav button {
  background-color: transparent !important;
  border: 1px solid #C2C2C2;
  color: #1E1E1E;
  border-radius: 100px;
  padding: 0px 25px 8px 25px;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.2em;
}

/* TABLET → 2 FULL CARDS */
@media (max-width: 1024px) {
    .kb-query-grid-wrap.products > li.kb-query-item {
        flex: 0 0 calc((100% - 30px)/2);
        max-width: calc((100% - 30px)/2);
    }
}

/* MOBILE → 1 FULL CARD */
@media (max-width: 767px) {
      .kb-query-grid-wrap.products{
    gap:10 !important;   
  }
    .kb-query-grid-wrap.products > li.kb-query-item {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .custom-carousel-nav{
        top: 50px;
        right: 0px;
        gap: 20px;
    }
    .custom-carousel-nav button {
        font-size: 28px;
        padding: 0px 15px 8px 15px;
    }
}
.wp-block-kadence-query-card3144_bf192c-33.wp-block-kadence-query-card .kb-query-grid-wrap.kb-query-grid-wrap{
  padding: 20px 0px;
}

/* ======================================================================
   Productpagina - tekst, lijsten en vragen
   ====================================================================== */

/* ==========================================================================
   Producttekst: de tabbladen en de veelgestelde vragen op /product/<naam>/

   Feedback 21-08-2026: "je kunt geen bullets in pakket, omschrijving en wat
   krijg je zetten - ze staan er in de achterkant wel in, maar op de site niet."

   Oorzaak zat in de blokinstelling van de kolom met de tabbladen:
   `selector ul { list-style-type: none; padding-left: 0 }`. Bedoeld voor de
   tabbalk (die is ook een <ul>), maar het gold voor élke opsomming in de
   tabbladen. Die regel wijst nu alleen nog naar .kt-tabs-title-list
   (server\zet-productsjabloon.php).

   Wat hier staat, is de opmaak die daarna nodig is: het thema zet geen
   inspringing op een ul, dus zonder padding staan de bolletjes buiten beeld.
   ========================================================================== */

/* Let op de dubbele klasse. In de Customizer-CSS van de site staat
   `.single-content ul, .single-content ol { padding-left: 0 }`. Die telt even
   zwaar (0-1-1) maar staat inline en dus later in de pagina, dus met alleen
   `.kt-tab-inner-content ul` bleef de inspringing 0 en hingen de bolletjes
   buiten de tekst. Zelfde val als bij `.entry-content p`; zie PROJECT.md. */
.single-content .kt-tab-inner-content ul,
.single-content .kt-tab-inner-content ol,
.entry-content .kt-tab-inner-content ul,
.entry-content .kt-tab-inner-content ol {
  margin: 12px 0;
  padding-left: 1.35em;
}

.kt-tab-inner-content ul { list-style: disc outside; }
.kt-tab-inner-content ol { list-style: decimal outside; }

.kt-tab-inner-content li { margin: 0 0 6px; }

.kt-tab-inner-content li > ul,
.kt-tab-inner-content li > ol {
  margin: 6px 0 0;
}

/* de bolletjes in de huisstijl, net als de vinkjes in de pakketkaarten */
.kt-tab-inner-content li::marker {
  color: #d50117;
}

/* ==========================================================================
   Veelgestelde vragen per product

   De vragen komen uit het veld auto-faq en worden getekend door de shortcode
   [avb-product-faq] in de mu-plugin avb-product-velden.php. Het zijn
   <details>/<summary>-uitklappers: die werken zonder JavaScript en de tekst
   staat gewoon in de pagina, dus ook voor Google en voor de zoekfunctie van
   de browser.
   ========================================================================== */

.avb-faq {
  display: grid;
  gap: 8px;
}

.avb-faq__inleiding {
  margin-bottom: 4px;
}

.avb-faq__item {
  border: 1px solid #e8ecf2;
  border-radius: 14px;
  background: #fafafa;
  overflow: hidden;
}

.avb-faq__vraag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 600;
  color: #140a2b;
  list-style: none;          /* het standaard driehoekje weg */
}

/* Safari tekent het driehoekje via dit pseudo-element */
.avb-faq__vraag::-webkit-details-marker { display: none; }

/* eigen chevron, dezelfde als bij de tabbladen */
.avb-faq__vraag::after {
  content: "";
  flex: 0 0 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23140a2b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s ease;
}

.avb-faq__item[open] > .avb-faq__vraag::after {
  transform: rotate(180deg);
}

.avb-faq__vraag:hover { color: #d50117; }

.avb-faq__antwoord {
  padding: 0 18px 16px;
}

.avb-faq__antwoord > *:first-child { margin-top: 0; }
.avb-faq__antwoord > *:last-child  { margin-bottom: 0; }

.single-content .avb-faq__antwoord ul,
.single-content .avb-faq__antwoord ol,
.entry-content .avb-faq__antwoord ul,
.entry-content .avb-faq__antwoord ol {
  margin: 10px 0;
  padding-left: 1.35em;
}

.avb-faq__antwoord ul { list-style: disc outside; }
.avb-faq__antwoord ol { list-style: decimal outside; }
.avb-faq__antwoord li::marker { color: #d50117; }

/* ======================================================================
   Vacatureoverzicht - mobiele balk
   ====================================================================== */

/* ==========================================================================
   Mobiele balk onderaan het vacatureoverzicht.

   Er stond een los rond knopje rechtsonder met alleen een trechtertje; dat is
   niet te raden. Het wordt een vaste balk over de volle breedte met twee
   helften: zoeken en filteren, met tekst erbij.
   ========================================================================== */

.avb-mobielbalk,
.avb-zoekpaneel__kop,
.avb-zoekpaneel__achtergrond,
.avb-zoekpaneel__plaatshouder {
  display: none;
}

/* Alleen waar de filters een uitschuifpaneel zijn. De OTYS-plugin toont ze
   vanaf 768px als kolom links naast de vacatures; deze balk stond eerst tot
   1024px, waardoor de filters op een iPad dubbel in beeld waren en "Filter
   resultaten" daar niets zichtbaars deed (apparatentest 02-10-2026). */
@media (max-width: 767px) {

  .avb-mobielbalk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    background: #ffffff;
    /* dunne rode lijn erboven, zodat de balk opvalt tegen de vacaturekaarten */
    border-top: 1px solid #d50117;
    box-shadow: 0 -4px 18px rgba(5, 24, 58, .10);
    /* ruimte voor de thuisbalk van iOS */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .avb-mobielbalk__knop {
    appearance: none;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    color: #05183a;
    cursor: pointer;
    text-decoration: none;
    min-height: 56px;
  }

  .avb-mobielbalk__knop:active {
    background: #f1f3f6;
  }

  /* scheidingslijn tussen de twee helften, zoals in het voorbeeld */
  .avb-mobielbalk__knop + .avb-mobielbalk__knop {
    border-left: 1px solid #e3e8ef;
  }

  .avb-mobielbalk__knop svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: block;
  }

  /* aantal actieve filters als bolletje achter de tekst */
  .avb-mobielbalk__telling {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #d50117;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
  }

  /* het oude ronde knopje verdwijnt; de balk neemt het over */
  #toggle-vacancies-filters {
    display: none !important;
  }

  /* de balk mag de laatste vacature niet afdekken */
  body.avb-heeft-mobielbalk {
    padding-bottom: 72px;
  }

  /* het filterpaneel moet boven de balk uitkomen */
  #vacancies-filters {
    z-index: 9999;
  }

  /* --- Zoekpaneel -------------------------------------------------------
     "Zoeken" in de balk zet avb-zoek-open op de body. Het zoekformulier uit
     de hero komt dan als paneel van onderen boven de balk te staan, in het
     donkerblauw van de hero, zodat de witte velden en de rode knop er net zo
     uitzien als bovenaan de pagina. */

  /* Alleen in de flow zolang het paneel open is: de Kadence-kolom is een
     flexbox met 40px tussenruimte, een lege plaatshouder zou die ook dicht
     al toevoegen. De hoogte (formulier plus marge) zet het script. */
  body.avb-zoek-open .avb-zoekpaneel__plaatshouder {
    display: block;
  }

  /* De Kadence-rij van de hero heeft z-index 1 en sluit het formulier
     daarmee in: hoe hoog het paneel ook staat, het viel achter de
     vacaturelijst en de achtergrond. Zolang het paneel open is, gaat de
     hele rij naar voren (net onder de balk). */
  body.avb-zoek-open .kt-row-column-wrap:has(.vacancies-search-section) {
    z-index: 9997;
  }

  body.avb-zoek-open .vacancies-search-section {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(57px + env(safe-area-inset-bottom, 0px));
    z-index: 9997;
    max-height: calc(100dvh - 57px - 72px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 6px 16px 20px;
    background: #05183a;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -10px 30px rgba(5, 24, 58, .28);
    animation: avb-zoekpaneel-in .28s cubic-bezier(.22, 1, .36, 1);
  }

  /* alleen schuiven, geen fade: blijft de animatie om wat voor reden ook
     op het eerste frame hangen, dan is het paneel toch gewoon te zien */
  @keyframes avb-zoekpaneel-in {
    from { transform: translateY(24px); }
    to   { transform: none; }
  }

  body.avb-zoek-open .avb-zoekpaneel__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0 14px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
  }

  .avb-zoekpaneel__sluit {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
  }

  .avb-zoekpaneel__sluit svg {
    width: 22px;
    height: 22px;
  }

  /* de regiolijst klapt in het paneel open in plaats van eroverheen, anders
     valt hij onder de balk weg */
  /* het pijltje hoort bij het veld, niet bij het midden van de open lijst
     (het veld is 64px hoog) */
  body.avb-zoek-open .vacancies-search-section .owp-search-criteria.owp-custom-multiselect::after {
    top: 32px;
  }

  body.avb-zoek-open .vacancies-search-section .owp-multiselect-dropdown {
    position: static;
    max-height: 40dvh;
    overflow-y: auto;
  }

  body.avb-zoek-open .avb-zoekpaneel__achtergrond {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9996;
    background: rgba(5, 24, 58, .45);
  }

  /* "Zoeken" in de balk laat zien dat het paneel openstaat */
  body.avb-zoek-open .avb-mobielbalk__knop[aria-expanded="true"] {
    color: #d50117;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body.avb-zoek-open .vacancies-search-section {
    animation: none;
  }
}

/* ======================================================================
   Vacatureoverzicht - uitgelicht
   ====================================================================== */

/* ==========================================================================
   Uitgelichte vacatures boven het overzicht.

   Zonder filter staan ze gewoon open. Zodra er gefilterd of gezocht wordt,
   klappen ze dicht tot een smalle balk, zodat de resultaten van het filter
   vooraan staan. De balk blijft klikbaar om ze alsnog te bekijken.

   De omhulling komt uit de mu-plugin avb-uitgelicht.php.
   ========================================================================== */

.avb-uitgelicht {
  margin-bottom: 24px;
}

.avb-uitgelicht__knop {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  background: #f6f9fd;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #05183a;
  text-align: left;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}

.avb-uitgelicht__knop:hover,
.avb-uitgelicht__knop:focus {
  background: #eef3fa !important;
  color: #05183a !important;
  border-color: #d3dce8;
}

.avb-uitgelicht__ster {
  display: flex;
  color: #d50117;
}

.avb-uitgelicht__label {
  flex: 1 1 auto;
}

.avb-uitgelicht__actie {
  font-weight: 500;
  color: #4b5563;
}

/* driehoekje dat meedraait */
.avb-uitgelicht__pijl {
  width: 9px;
  height: 9px;
  border-right: 2px solid #05183a;
  border-bottom: 2px solid #05183a;
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform .2s ease, margin-top .2s ease;
}

.avb-uitgelicht:not(.is-ingeklapt) .avb-uitgelicht__pijl {
  transform: rotate(225deg);
  margin-top: 3px;
}

/* --- in- en uitgeklapt ------------------------------------------------ */
.avb-uitgelicht.is-ingeklapt .avb-uitgelicht__inhoud {
  display: none;
}

.avb-uitgelicht:not(.is-ingeklapt) .avb-uitgelicht__inhoud {
  margin-top: 18px;
}

/* zonder de knop (geen filter actief) is er niets in te klappen */
.avb-uitgelicht__inhoud > .vacancies-list {
  margin-bottom: 0;
}

/* De uitgelichte kaarten volgen de weergave van de hoofdlijst: staat die in
   de enkelekolom (standaard), dan staan de uitgelichte vacatures ook onder
   elkaar; schakelt de bezoeker naar het rooster, dan weer ernaast. Alleen
   /vacatures/ heeft naast de shortlist ook een hoofdlijst, dus elders
   (homepage, detailpagina) verandert er niets. */
body:has(.vacancies-list.automotive-list-view:not(.vacancies-shortlist)) .vacancies-shortlist.automotive-grid-view {
  grid-template-columns: 1fr;
}

@media (max-width: 767px) {
  .avb-uitgelicht__knop {
    padding: 12px 14px;
    font-size: 14px;
  }
  .avb-uitgelicht__actie {
    display: none;
  }
}

/* ======================================================================
   Vacaturekaarten - bedrijfslogo
   ====================================================================== */

/* ==========================================================================
   Bedrijfslogo's op vacaturekaarten.

   De logo's komen uit OTYS en hebben elk formaat dat de werkgever uploadt.
   Elk logo krijgt hier een vast kader waar het in past (object-fit: contain),
   zodat alle kaarten gelijk ogen.

   Op de homepage (Nieuwste vacatures / spotlight) staat het logo rechts
   naast de titel. Dat stond eerder in de Customizer-CSS met right:0 en een
   titel van 80% breed, waardoor lange titels op mobiel onder het logo
   doorliepen. Het logo staat nu binnen de kaartrand en de titel houdt er
   met een zwevend blokje altijd ruimte voor vrij.

   --- 18-08-2026: twee dingen rechtgezet -----------------------------------

   1. HET KADER EN DE VRIJGEHOUDEN RUIMTE WAREN UIT ELKAAR GELOPEN.
      De zwevende ruimte in de titel (`::before`) was ooit geschreven voor een
      kader van 100x40: 116x44, dus het kader plus 16px tussenruimte. Toen het
      kader op de homepage naar 132x52 ging, is die float blijven staan. Het
      logo stak daardoor 16px naar links en 8px naar beneden buiten de ruimte
      die ervoor was vrijgehouden, en de titel liep er onderdoor. Gemeten op
      390px breed: 5 van de 8 kaarten hadden tekst onder het logo.

      Daarom staan de maten nu in variabelen en wordt de float eruit berekend.
      Ze kunnen zo niet meer los van elkaar veranderen. Let op de hoogte: die
      is precies gelijk aan het kader, niet minder. Een tekstregel wordt door
      een float opzijgeduwd zodra hij die float raakt; is de float even hoog
      als het logo, dan raakt elke regel die het logo zou raken ook de float
      en wordt hij dus altijd weggeduwd.

   2. DE LOGO'S OOGDEN ONGELIJK.
      Met object-fit: contain bepaalt de verhouding van het bronbeeld hoe groot
      een logo in het kader wordt getekend. In een kader van 132x52 werd een
      breed logo (Broekhuis, 180x43) 132x32 getekend en een vierkant logo
      (Van Mossel, 125x125) maar 52x52 - een verschil van 2,5x in breedte.

      De verhouding van het kader was op zich goed gekozen (2,54:1, en het
      meetkundig gemiddelde van de logo's op de site is 2,45:1). Het kader was
      alleen te groot, waardoor het verschil in absolute pixels opviel. Het is
      nu kleiner en iets minder breed van verhouding (88x40 = 2,2:1). Daarmee
      loopt de getekende breedte van 40 tot 88px in plaats van 52 tot 132px.

      Verder gelijktrekken kan niet met CSS alleen: bij contain is de spreiding
      in breedte altijd gelijk aan de verhouding van het kader, en die smaller
      maken drukt juist de brede logo's plat. Wie ze echt allemaal even groot
      wil hebben, moet de bronbeelden in OTYS op een gelijk canvas zetten.
   ========================================================================== */

/* --- vast kader voor elk logo, waar het ook staat ---------------------- *\
   Eén maat voor de hele site: het vacatureoverzicht, de uitgelichte kaarten
   en de homepage. Stond op 100x40 terwijl de homepage 132x52 aanhield; die
   twee zijn nu gelijk, zodat een logo overal even groot staat.            */
.automotive-vacancy-photo {
  width: 88px;
  height: 40px;
  flex: 0 0 auto;
}

.automotive-vacancy-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* --- homepage: logo rechtsboven naast de titel ------------------------- *\
   Eén plek waar de maat vastligt. De lijst "Automotive vacatures" en de
   spotlight ernaast krijgen exact hetzelfde kader, zodat de twee kolommen
   gelijk ogen.                                                             */
.automotive-home-vacancies .automotive-vacancy {
  --avb-logo-breed: 88px;
  --avb-logo-hoog: 40px;
  --avb-logo-tussen: 16px;
}

@media (max-width: 767px) {
  /* Op mobiel staan de kaarten onder elkaar en is er per kaart maar ~310px
     tekstbreedte. Een kader van 88px nam daar een kwart van in beslag; op
     72px houdt de titel genoeg regelbreedte over. */
  .automotive-home-vacancies .automotive-vacancy {
    --avb-logo-breed: 72px;
    --avb-logo-hoog: 32px;
    --avb-logo-tussen: 12px;
  }
}

.automotive-latest-vacancies .automotive-vacancy-photo,
.automotive-spotlight-vacancies .automotive-vacancy-photo {
  width: var(--avb-logo-breed);
  height: var(--avb-logo-hoog);
}

/* het thema zet het logo zelf vast op 100x40; hier volgt het het kader */
.automotive-latest-vacancies .automotive-vacancy-photo img,
.automotive-spotlight-vacancies .automotive-vacancy-photo img {
  max-width: var(--avb-logo-breed);
  height: var(--avb-logo-hoog);
}

.automotive-home-vacancies .automotive-vacancy .automotive-vacancy-contnet {
  position: relative;
}

.automotive-home-vacancies .automotive-vacancy .automotive-vacancy-photo {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
}

.automotive-home-vacancies .automotive-vacancy .automotive-vacancy-photo img {
  object-position: right top;
}

/* De titel wijkt alleen úít voor het logo waar dat hangt: een onzichtbare
   float ter grootte van het logokader plus de tussenruimte duwt de eerste
   regels opzij; alles daaronder krijgt de volle breedte. Vaste padding
   rechts deed dat eerder over de hele hoogte, waardoor de smalle kolom met
   het globale word-break woorden opknipte ("Autotechni / cus"). Woorden
   breken nu nooit meer af: een woord dat niet naast het logo past, schuift
   vanzelf naar de volle regel eronder. (Geen overflow-wrap als vangnet: die
   brak het eerste woord alsnog af naast de float; de kaart heeft overflow
   hidden voor het extreme geval.) */
.automotive-home-vacancies .automotive-vacancy h3.automotive-vacancy-title {
  width: 100% !important;
  margin-top: 0;
}

/* Geldt voor alle vacaturekaarten (lijst, uitgelicht, home): het thema zet
   sitebreed word-break: break-word, waardoor titels als
   "Schademanager/calculator" halverwege braken. Woorden blijven heel; een
   woord dat niet past schuift naar de volgende regel.

   Aanvulling 02-10-2026 (apparatentest): een woord dat in zijn geheel niet
   in de kolom past, liep buiten de kaart en werd afgeknipt. Op iPad staand is
   de titelkolom 193 tot 213px, en "Wagenparkbeheerder" of
   "Verkoopondersteuning" is breder. Zo'n woord breekt nu af op een
   Nederlandse lettergreep, met een streepje (de pagina staat op nl-NL).
   Alleen woorden van 10 tekens of meer, met minstens 4 tekens aan elke kant,
   dus gewone titels blijven zoals ze waren.

   Niet elke browser heeft een Nederlands afbreekwoordenboek (Safari op iPad
   en Chrome op Android wel, de testbrowser niet). Daarom als vangnet
   overflow-wrap: break-word: dat breekt alleen een woord dat ook op een eigen
   regel niet past, dus gewone woorden schuiven nog steeds heel door. Op de
   homepage blijft dat uit, vanwege de float voor het logo (zie hierboven). */
.automotive-vacancy h3.automotive-vacancy-title {
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

.automotive-home-vacancies .automotive-vacancy h3.automotive-vacancy-title {
  overflow-wrap: normal;
}

.automotive-home-vacancies .automotive-vacancy h3.automotive-vacancy-title::before {
  content: "";
  float: right;
  width: calc(var(--avb-logo-breed) + var(--avb-logo-tussen));
  height: var(--avb-logo-hoog);
}

/* ======================================================================
   Vacaturelijst - resultaatteller
   ====================================================================== */

/* ==========================================================================
   Resultaatteller boven de vacaturelijst.

   "2.467 vacatures gevonden · 1 t/m 12 getoond" - zoals de oude site die
   had, maar in de stijl van de nieuwe kaarten: rustig grijs, het aantal
   vet in de donkere titelkleur. De regel staat in het grid van de lijst
   en beslaat de volle breedte (grid-column in de template).
   ========================================================================== */

.avb-resultaten {
  margin: 0 0 14px;
  font-size: 15px;
  color: #4b5563;
}

.avb-resultaten strong {
  color: #05183a;
  font-weight: 700;
}

/* puntje tussen aantal en reeks */
.avb-resultaten__reeks::before {
  content: "\00B7";
  margin: 0 8px 0 6px;
  color: #9ca3af;
}

/* --- Job Alert-blok tussen de vacatures --------------------------------- */
/* Staat twee keer in de lijst (zie vacancies-list.php): voor het rooster na
   een volle rij van drie, voor de lijstweergave na de vierde vacature.
   Alleen de variant van de actieve weergave is zichtbaar. */
.vacancies-list.automotive-grid-view .avb-jobalert-cta--lijst,
.vacancies-list.automotive-list-view .avb-jobalert-cta--rooster {
  display: none;
}

/* Donkerblauw vlak in de kaartstijl. */
.avb-jobalert-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 26px 28px;
  border-radius: 20px;
  background: #05183a;
  color: #fff;
}

.avb-jobalert-cta__kop {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.avb-jobalert-cta__sub {
  margin: 0;
  font-size: 15px;
  color: #cbd5e1;
}

.avb-jobalert-cta__knop {
  flex: 0 0 auto;
  padding: 12px 28px;
  border-radius: 100px;
  background: #d50117;
  color: #fff !important;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease;
}

.avb-jobalert-cta__knop:hover,
.avb-jobalert-cta__knop:focus {
  background: #ffffff;
  color: #d50117 !important;
}

@media (max-width: 600px) {
  .avb-jobalert-cta {
    padding: 22px 20px;
  }
}

/* --- paginering: de puntjes tussen de paginanummers --------------------- */
.pagination-item.avb-pagination-gap span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 40px;
  color: #6b7280;
  user-select: none;
}

/* Het thema geeft elk paginanummer een vast bolletje van 40x40; daar past
   een driecijferig nummer (187) niet in en op mobiel hing het cijfer ook
   scheef door een afwijkende line-height. Het bolletje is nu een pil die
   meegroeit met het nummer en het cijfer altijd centreert. */
.pagination .pagination-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border-radius: 20px;
  box-sizing: border-box;
  line-height: 1;
}


/* --- altijd drie kaarten naast elkaar ------------------------------------ *\
   Het rooster stond op repeat(auto-fill, minmax(300px, 1fr)): het aantal
   kolommen hing dan af van de vensterbreedte, dus bij 1360px stonden er twee
   kaarten naast elkaar en bij 1440px drie. Het aantal ligt nu vast per
   schermformaat, zodat de pagina er op elke desktop hetzelfde uitziet.
   De homepageblokken houden hun eigen indeling (die staan in dezelfde
   grid-klasse maar hebben een eigen kolomopbouw).                          */
.vacancies-list.automotive-grid-view:not(.automotive-latest-vacancies):not(.automotive-spotlight-vacancies) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  .vacancies-list.automotive-grid-view:not(.automotive-latest-vacancies):not(.automotive-spotlight-vacancies) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .vacancies-list.automotive-grid-view:not(.automotive-latest-vacancies):not(.automotive-spotlight-vacancies) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- witruimte onder de uitgelichte vacatures ---------------------------- *\
   Zonder filter staan de uitgelichte vacatures niet in het inklapblok maar
   los boven de lijst, en dan sloot de eerste rij van de lijst er zonder
   tussenruimte op aan. Dezelfde afstand als tussen de kaarten onderling.   */
.vacancies-list.vacancies-shortlist:not(.automotive-latest-vacancies):not(.automotive-spotlight-vacancies) {
  margin-bottom: 20px;
}

/* --- gelijke kaarten in het rooster -------------------------------------- */
/* De kaarten in een rij zijn even hoog, maar titels en samenvattingen
   verschillen in lengte. Het verschil kwam als een gat tussen de tekst en de
   locatieregels te staan, wat rommelig oogt (feedback 07-08-2026).
   Titel en samenvatting krijgen daarom een vaste hoogte: twee regels titel,
   drie regels tekst. Langere teksten worden afgekapt met puntjes. Zo hebben
   alle kaarten dezelfde opbouw, staan de regels onder elkaar uitgelijnd en
   wordt de pagina bovendien korter. */

/* Alleen waar de kaarten echt naast elkaar staan. Op smallere schermen is er
   maar één kaart per rij, dus valt er niets te egaliseren - en daar leverde
   het afkappen juist problemen op: de titel werd op twee regels afgekapt maar
   de derde regel werd nog getekend, dwars over de bedrijfsnaam heen. */
/* De hoogte volgt de regelhoogte, nooit een vast aantal pixels: de titel
   erfde 30px per regel van het thema, terwijl het vak op 48px stond. Twee
   regels pasten dus niet en de tweede werd middendoor afgesneden - precies
   wat eerder op de homepage speelde. De regelhoogte staat hier zelf op 1.25
   (25px, strakker en beter passend bij een kaarttitel) en het vak op exact
   twee van die regels. Zo blijft de kaart even hoog als voorheen en is de
   tweede regel heel. */
@media (min-width: 1025px) {

  .vacancies-list.automotive-grid-view .automotive-vacancy-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
    height: 2.5em;
    /* Woorden blijven heel, maar een woord dat in zijn eentje breder is dan
       de kaart ("Bedrijfsleider/Vestigingsmanager") liep buiten de kaart en
       werd door de overloop middenin een letter afgekapt. Zulke woorden
       breken nu netjes af in plaats van weg te vallen. */
    overflow-wrap: anywhere;
  }

  .vacancies-list.automotive-grid-view .automotive-vacancy-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    height: 3.9em;
  }

}

/* ======================================================================
   Vacature - detailpagina
   ====================================================================== */

/* ==========================================================================
   Vacature-detailpagina.

   - de eigenschappen rechts krijgen een grijs icoon in plaats van een rood
     streepje, en staan met locatie en bedrijf in dezelfde lijst
   - de tekstblokken zijn geen uitklapvelden meer maar gewoon tekst
   ========================================================================== */

/* --- één blok rechts: logo, eigenschappen, solliciteren ----------------- */
/* Eerder stonden de criteria links onder de banner, de eigenschappen rechts
   in een eigen rij, en logo en sollicitatieknop weer een rij lager. Daardoor
   begon de tekst links pas ver onder de vouw. Nu is het rechts één blok en
   loopt de tekst links er meteen naast. */
.avb-vacature-blok {
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  padding: 20px;
  background: #ffffff;
}

/* Het blok loopt mee tijdens het scrollen, zodat de sollicitatieknop en de
   kerngegevens in beeld blijven bij een lange vacaturetekst. De afstand tot
   de bovenkant houdt rekening met de meelopende menubalk. */
@media (min-width: 1025px) {
  /* de kolom moet net zo hoog worden als de tekst ernaast, anders heeft het
     blok geen ruimte om in mee te schuiven */
  .automotive-row-2 .automotive-col-right {
    align-self: stretch;
  }

  /* een ouder met overflow verderop breekt sticky; hier expliciet vrijgeven */
  .automotive-row-2,
  .automotive-row-2 .automotive-col-right {
    overflow: visible;
  }

  .avb-vacature-blok {
    position: sticky;
    top: 110px;
    /* als het blok ooit hoger wordt dan het scherm, blijft het scrollbaar */
    max-height: calc(100vh - 130px);
    overflow-y: auto;
  }
}

/* Alleen het logo staat nog op wit. De scheidingslijn eronder is weg: het
   grijze vlak dat er direct onder begint, scheidt de twee nu zelf. */
.avb-vacature-blok__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
  margin-bottom: 16px;
  border-bottom: 0;
}

.avb-vacature-blok__logo img {
  max-width: 190px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* --- één doorlopend grijs vlak ----------------------------------------- *\
   Het grijs zat eerst alleen om de sollicitatiekaart. Het loopt nu door vanaf
   de eigenschappenlijst tot en met de knop, zodat het blok uit twee delen
   bestaat: het logo op wit, en daaronder alles wat de vacature beschrijft en
   waar je op klikt in één vlak.

   Het zijn twee losse elementen (de lijst en de kaart) die samen één vlak
   moeten lijken. Daarom krijgt de bovenste de ronding aan de bovenkant, de
   onderste die aan de onderkant, en staat er geen millimeter marge tussen -
   een marge zou als witte streep dwars door het grijs lopen.                */
.avb-vacature-blok .automotive-job-info {
  margin: 0;
  padding: 16px 16px 4px;
  background: #f1f3f6;
  border-radius: 10px 10px 0 0;
}

.avb-vacature-blok .automotive-job-info ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.avb-vacature-blok .automotive-sidebar {
  margin-top: 0;
  padding: 4px 16px 16px;
  background: #f1f3f6;
  border-radius: 0 0 10px 10px;
}

/* Onder 768px is de sollicitatiekaart verborgen - daar neemt de vaste balk
   onderin het over (.avb-solliciteerbalk). Die 768 komt niet uit dit bestand
   maar uit de Customizer-CSS ("vacancy single page"); staat die ooit anders,
   pas dit breekpunt dan mee aan.
   De eigenschappenlijst is dan het laatste deel van het grijze vlak en moet
   zelf de ronding aan de onderkant dragen; zonder dit eindigt het vlak in twee
   scherpe hoeken. */
@media (max-width: 768px) {
  .avb-vacature-blok .automotive-job-info {
    padding-bottom: 16px;
    border-radius: 10px;
  }
}

/* de tekst links begint bovenaan, gelijk met het blok */
.automotive-row-2 .automotive-col-left .automotive-job-description
  .avb-geen-uitklap:first-child .automotive-accordion-header {
  padding-top: 0;
}

/* --- eigenschappenlijst ------------------------------------------------ */
/* Feedback 21-08-2026: "deze hele opsomming van iconen beter ordenen, het is
   nu erg warrig met aan de rechterkant de uitlijning van woorden soms onder
   elkaar."

   Klopte. De waarde stond rechts uitgelijnd en begon dus bij elke regel op een
   andere plek - gemeten liep dat van x=1189 tot x=1260 - en bij een eigenschap
   met meer dan één waarde (Sector, Aantal uren) stapelden die waarden rechts
   onder elkaar. Dan lijkt "32 uur / 38 uur / 40 uur" drie losse regels in
   plaats van één antwoord.

   Deze kolom is maar 306px breed, ook op een breed scherm. Drie kolommen naast
   elkaar (icoon, label, waarde) paste daar niet in: dan brak "Van Roosmalen"
   af en liep "Personenauto's" de rand uit. Daarom staat het label nu op de
   eerste regel en de waarde eronder, allebei ingesprongen naast het icoon.
   Alles begint op dezelfde lijn en de waarden van één eigenschap staan achter
   elkaar op één regel, gescheiden door een punt - zo lees je "32 uur · 38 uur ·
   40 uur" als één antwoord in plaats van als drie regels.

   De oude instellingen (grid-template-columns: auto 1fr, en een kolom met
   flex-direction: column + text-align: right) stonden in
   kadence-child/otys-jobs-apply/assets/css/style.css. Die zijn daar weggehaald
   in plaats van hier met !important overschreven; zo staat de opmaak van deze
   lijst op één plek. Projectkopie:
   server\kadence-child\otys-jobs-apply\assets\css\style.css */
.automotive-job-info li.automotive-job-info-item {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  row-gap: 1px;
  margin-bottom: 14px;
}

/* het icoon staat op de labelregel; de waarde eronder loopt door tot de rand */
.automotive-job-info-icoon { grid-column: 1; grid-row: 1; }

.automotive-job-info-label {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.automotive-job-info-values {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
  min-width: 0;
  margin-left: 0;
  text-align: left;
  font-weight: 600;
  color: #05183a;
  overflow-wrap: anywhere;
}

/* een puntje tussen twee waarden van dezelfde eigenschap, zodat je ziet dat
   het één antwoord is en niet twee losse regels.
   Het puntje hangt achter de vorige waarde en niet vóór de volgende: bij een
   afbreking blijft het dan op de eerste regel staan in plaats van als los
   teken aan een nieuwe regel te beginnen. */
.automotive-job-info-value:not(:last-child)::after {
  content: "\00b7";
  margin-left: 6px;
  color: #9aa3af;
  font-weight: 400;
}

/* vaste breedte, zodat alle labels op dezelfde lijn beginnen; het icoon staat
   gecentreerd op de eerste tekstregel */
.automotive-job-info-icoon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  width: 20px;
  height: 1.5em;
  color: #454545;
}

.automotive-job-info-icoon svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* label en waarde op dezelfde regelhoogte als het icoon */
.automotive-job-info-label,
.automotive-job-info-values {
  line-height: 1.5em;
}

/* het rode streepje voor het label gaat eruit */
.automotive-job-info-label {
  padding-left: 0 !important;
  border-left: 0 !important;
}

/* ==========================================================================
   Vaste sollicitatieknop onderin op mobiel.
   Op een telefoon staat het blok met de knop ver boven de tekst; deze balk
   houdt solliciteren binnen bereik zonder terugscrollen.
   ========================================================================== */

.avb-solliciteerbalk {
  display: none;
}

@media (max-width: 1024px) {
  .avb-solliciteerbalk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
    display: block;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: #ffffff;
    border-top: 1px solid #d50117;
    box-shadow: 0 -4px 18px rgba(5, 24, 58, .10);
  }

  .avb-solliciteerbalk__knop {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 20px !important;
    border-radius: 999px !important;
    background: #d50117 !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600;
    line-height: 1.2 !important;
    text-decoration: none;
  }

  .avb-solliciteerbalk__knop:hover {
    background: #b30113 !important;
    color: #ffffff !important;
  }

  /* de balk mag de laatste tekst niet afdekken */
  body.single-vacancy,
  .automotive-vacancy-wrapper {
    padding-bottom: 88px;
  }

  /* Feedback 06-08-2026: dezelfde knop stond er op een telefoon drie keer -
     in het blok rechts (dat op mobiel boven de tekst komt), onder de
     vacaturetekst, en in de vaste balk onderin. De vaste balk staat altijd in
     beeld, dus die onder de tekst kan weg. Blijven over: één knop in het blok
     bij de vacaturegegevens en de vaste balk. */
  .automotive-apply-inline {
    display: none;
  }

  /* het blok rechts staat op mobiel boven de tekst; niet ook nog vastzetten */
  .avb-vacature-blok {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

/* --- tekstblokken: geen uitklapveld meer -------------------------------- */
.automotive-job-description .avb-geen-uitklap .automotive-accordion-header {
  cursor: default;
  justify-content: flex-start;
  padding-bottom: 12px;
}

.automotive-job-description .avb-geen-uitklap .automotive-accordion-icon {
  display: none;
}

/* altijd zichtbaar, ook als er ergens nog een script de klasse weghaalt */
.automotive-job-description .avb-geen-uitklap .automotive-accordion-body {
  display: block !important;
  padding-bottom: 8px;
}

.automotive-job-description .avb-geen-uitklap + .avb-geen-uitklap {
  border-top: 0;
}


/* ==========================================================================
   Uitlijning met de headercontainer.

   De header gebruikt een container van 1280px met 15px padding; het logo
   begint daardoor op 1440px-schermen op 95px. De OTYS-containers stonden op
   1320px met 20px padding (start 80px) en liepen dus 15px uit de pas met het
   logo. Zelfde maat = op elke schermbreedte dezelfde linkerlijn.
   Sinds 02-10-2026 is de padding de gedeelde zijmarge (algemeen/avb-zijmarge.css).
   ========================================================================== */
.automotive-container,
.automotive-hero-content {
  max-width: 1280px !important;
  padding-left: var(--avb-zijmarge, 15px) !important;
  padding-right: var(--avb-zijmarge, 15px) !important;
}

/* ======================================================================
   Vacature - sollicitatiepagina
   ====================================================================== */

/* ==========================================================================
   Sollicitatiepagina  (/vacature/<slug>/solliciteer/)

   Feedback 06-08-2026: "de vacaturetitel valt weg, met te weinig witruimte
   erboven."

   Oorzaak, gemeten 13-08-2026: deze pagina draait op het sjabloon
   `vacancy-apply` en krijgt van het thema de body-class `no-header`. Daardoor
   reserveert het thema geen ruimte voor de menubalk, terwijl het Kadence-
   headerblok wél vast bovenaan staat (`item-is-fixed`, 82px hoog). Op
   /vacatures/ is de buitenste headerwikkel 82px hoog en begint het artikel op
   82; hier is die wikkel 0 hoog en begint het artikel op 0. De kop
   "Je solliciteert momenteel op" en de halve titel verdwenen zo achter de balk.

   Hieronder wordt die ruimte alsnog gereserveerd, plus witruimte erboven.
   ========================================================================== */

body.vacancy-apply-template-default article {
  /* 82px menubalk + 48px lucht */
  padding-top: 130px;
}

/* De titel stond op 64px (de oude Customizer-maat). Sinds 02-10-2026 staat
   die op 48px voor elke H1 op de site, dus hier geen eigen maat meer. */

/* "Je solliciteert momenteel op" is het bijschrift bij de titel; die twee
   horen bij elkaar te staan. */
body.vacancy-apply-template-default .vacancy-header .vacancy-spacing {
  padding-bottom: 4px;
}

@media (max-width: 1024px) {
  body.vacancy-apply-template-default article {
    padding-top: 112px;
  }
}

@media (max-width: 767px) {
  body.vacancy-apply-template-default article {
    padding-top: 96px;
    /* het artikel had 130px marge links en rechts; dat past niet op een
       telefoon */
    margin-left: 18px;
    margin-right: 18px;
  }

  body.vacancy-apply-template-default .vacancy-spacing {
    padding-left: 0;
    padding-right: 0;
  }
}

/* --------------------------------------------------------------------------
   Feedback 20-08-2026: "de knop staat klem tegen de kantlijn beneden."

   Klopt: het artikel had alleen padding aan de bovenkant, dus de onderrand van
   de knop "Solliciteer" viel precies samen met de bovenrand van de footer.
   Gemeten op 1440px: knop tot 2777, footer vanaf 2777, dus nul pixels ertussen.
   Op de vacaturepagina zelf zit daar 40px.
   -------------------------------------------------------------------------- */

body.vacancy-apply-template-default article {
  padding-bottom: 64px;
}

@media (max-width: 1024px) {
  body.vacancy-apply-template-default article {
    padding-bottom: 48px;
  }
}

@media (max-width: 767px) {
  body.vacancy-apply-template-default article {
    padding-bottom: 40px;
  }
}

/* ======================================================================
   Autonieuws - eigen berichtpagina
   ====================================================================== */

/* ==========================================================================
   Autonieuws: de eigen berichtpagina's

   Sinds 24-08-2026 staat elk feed-item als eigen pagina op /autonieuws/<slug>/.
   Onderaan zet avb-autonieuws.php de kop "Bron" met een link naar de uitgever,
   net als op de oude site.

   Feedback van dezelfde dag: de tekst liep over de volle 1280px, zo'n 150
   tekens per regel. Dat leest niet. Een leesregel van 65 tot 75 tekens is de
   norm, en daar komt een kolom van 720px met tekst van 18px op uit.

   De witruimte boven kwam ergens anders vandaan en is bij de bron opgelost:
   de kopbalk van Kadence staat op doorzichtig, dus de pagina begon onder de
   balk. Elke andere pagina op de site zet `_kad_post_transparent` op 'disable';
   de nieuwsberichten doen dat nu ook (avb-autonieuws.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Het blad waar het artikel op staat

   Feedback 24-08-2026: een smalle kolom midden op een witte pagina lijnt
   nergens mee uit. Daarom een wit blad met een zachte ondergrond eromheen. De
   hoeken van dat blad staan precies onder het logo links en onder "Inloggen"
   rechts.

   Gemeten op 1440px: de rij in de kopbalk loopt van 80 tot 1360, maar heeft
   15px lucht aan weerskanten, dus het logo begint op 95 en "Inloggen" eindigt
   op 1345. Diezelfde 15px staat hieronder als marge op het blad.

   Sinds 02-10-2026 is die lucht de gedeelde zijmarge (algemeen/avb-zijmarge.css).
   Het blad staat in Kadence' .site-container, die zelf al de Kadence-zijmarge
   geeft; de marge hieronder vult alleen het verschil aan (desktop 0, mobiel
   15px). Nagemeten: blad en logo allebei op x=121 (1440) en x=48 (1280).
   -------------------------------------------------------------------------- */
body.single-avb_nieuws #wrapper {
  background: #f3f6fa;
}

body.single-avb_nieuws article.single-entry {
  margin: 32px calc(var(--avb-zijmarge, 15px) - var(--global-content-edge-padding, 0px)) 80px;
  background: #fff;
  border: 1px solid #e5eaf1;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(5, 24, 58, 0.04), 0 12px 32px rgba(5, 24, 58, 0.05);
}

/* de leeskolom: smal en gecentreerd, tekst blijft links uitgelijnd */
body.single-avb_nieuws .entry-content-wrap {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 56px;
  padding-bottom: 72px;
}

body.single-avb_nieuws .entry-header {
  margin-bottom: 8px;
}

/* De titel had hier een eigen maat (30 tot 44px). Sinds 02-10-2026 volgt
   elke H1 de Customizer (h1_font), zie server/zet-h1-grootte.php. */

body.single-avb_nieuws .entry-content {
  font-size: 18px;
  line-height: 1.75;
  color: #16233a;
}

body.single-avb_nieuws .entry-content p {
  margin: 0 0 24px;
}

body.single-avb_nieuws .entry-content h2,
body.single-avb_nieuws .entry-content h3 {
  margin: 40px 0 12px;
  font-size: 24px;
  line-height: 1.3;
  color: #05183a;
}

body.single-avb_nieuws .entry-content h3 {
  font-size: 20px;
}

body.single-avb_nieuws .entry-content ul,
body.single-avb_nieuws .entry-content ol {
  margin: 0 0 24px;
  padding-left: 1.35em;
}

body.single-avb_nieuws .entry-content li {
  margin-bottom: 8px;
}

body.single-avb_nieuws .entry-content blockquote {
  margin: 32px 0;
  padding-left: 20px;
  border-left: 3px solid #d50117;
  font-style: italic;
  color: #3c4a63;
}

/* Kadence laat het blad op smalle schermen met -16px buiten de kolom lopen.
   Dat kost de afgeronde hoeken, dus hier een eigen marge terug. */
@media (max-width: 1024px) {
  body.single-avb_nieuws #primary article.single-entry {
    margin: 20px calc(var(--avb-zijmarge, 15px) - var(--global-content-edge-padding, 0px)) 56px;
    border-radius: 12px;
  }

  body.single-avb_nieuws .entry-content-wrap {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 767px) {
  body.single-avb_nieuws .entry-content {
    font-size: 17px;
    line-height: 1.7;
  }

  body.single-avb_nieuws .entry-content-wrap {
    padding-top: 28px;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* de bronvermelding onder het artikel */
.avb-nieuws-bron {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #e8ecf2;
}

.avb-nieuws-bron h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #05183a;
}

.avb-nieuws-bron p {
  margin: 0;
}

.avb-nieuws-bron a {
  color: #d50117;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ======================================================================
   Favorieten (menu en pagina)
   ====================================================================== */

/* ==========================================================================
   Favorieten (02-10-2026)
   Het a'tje met teller in de menubalk ([avb_favorieten_knop]) en de pagina
   /favorieten/ ([avb_favorieten]); zie mu-plugin avb-favorieten.php.
   ========================================================================== */

/* --- het a'tje in de menubalk -------------------------------------------- */
.avb-fav {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 14px;
  border-radius: 50%;
  color: #05183a;
  text-decoration: none !important;
  transition: color .18s ease, background-color .18s ease;
}

.avb-fav:hover,
.avb-fav:focus-visible {
  color: #d50117;
  background-color: #f6f9fd;
}

.avb-fav:focus-visible {
  outline: 2px solid #d50117;
  outline-offset: 2px;
}

.avb-fav__icoon {
  display: block;
  width: 26px;
  height: 26px;
}

/* het getal: zelfde rode bolletje als het aantal vacatures in het menu */
.avb-fav__aantal {
  position: absolute;
  top: -2px;
  right: -9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #d50117;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-sizing: content-box;
}

.avb-fav__aantal[hidden] {
  display: none;
}

/* er komt een favoriet bij: het bolletje tikt even aan */
.avb-fav__aantal.is-nieuw {
  animation: avb-fav-tik .32s cubic-bezier(.2, .9, .3, 1.4);
}

@keyframes avb-fav-tik {
  0%   { transform: scale(.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Desktop: een dun verticaal streepje tussen het a'tje en "Inloggen", zoals
   in een webshop tussen winkelwagen en account (gevraagd 02-10-2026).
   De kolom zet 20px tussen de onderdelen; met de 18px marge hier staat het
   streepje precies in het midden van die 38px. */
.wp-block-kadence-header-desktop .avb-fav {
  margin-right: 18px;
}

.wp-block-kadence-header-desktop .avb-fav::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -19px;
  width: 1px;
  height: 24px;
  background: #d8dee8;
  transform: translateY(-50%);
  pointer-events: none;
}

/* In het uitgeklapte menu (tablet en mobiel). Dat paneel ligt over de hele
   header heen, dus zonder dit viel het a'tje weg zodra je het menu opende.
   Het staat nu rechtsboven, direct links van het kruisje (41px breed, 5px
   uit de hoek), in wit op het donkerblauw van het menu. */
.kb-off-canvas-inner .avb-fav {
  position: absolute;
  top: 5px;
  right: 54px;
  margin: 0;
  color: #ffffff;
}

.kb-off-canvas-inner .avb-fav:hover,
.kb-off-canvas-inner .avb-fav:focus-visible {
  color: #ffffff;
  background-color: rgba(255, 255, 255, .1);
}

.kb-off-canvas-inner .avb-fav:focus-visible {
  outline-color: #ffffff;
}

.kb-off-canvas-inner .avb-fav__aantal {
  border-color: #05183a;
}

/* op tablet en mobiel staat het a'tje naast het hamburgermenu */
@media (max-width: 1024px) {
  .avb-fav {
    margin-right: 6px;
  }
}

/* --- de pagina /favorieten/ ------------------------------------------------ */
/* de intro erboven heeft zelf al 40px lucht aan de onderkant */
.avb-favorieten {
  margin-top: 0;
}

.avb-favorieten .automotive-vacancy {
  transition: opacity .2s ease, transform .2s ease;
}

.avb-favorieten .automotive-vacancy.is-weg {
  opacity: 0;
  transform: scale(.97);
}

.avb-favorieten__leeg {
  max-width: 560px;
  padding: 36px 40px;
  border: 1px solid #e8ecf2;
  border-radius: 16px;
  background: #f6f9fd;
}

.avb-favorieten__leeg[hidden] {
  display: none;
}

.avb-wg .avb-favorieten__leeg p {
  margin: 0 0 20px;
}

.avb-wg .avb-favorieten__leeg .avb-favorieten__leeg-kop {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  color: #101418;
}

@media (max-width: 600px) {
  .avb-favorieten__leeg {
    padding: 26px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .avb-fav__aantal.is-nieuw { animation: none; }
  .avb-favorieten .automotive-vacancy { transition: none; }
}

/* ======================================================================
   Knoppen (hele site)
   ====================================================================== */

/* ==========================================================================
   Eén knopvorm voor de hele site.

   De norm is de "Solliciteer nu"-knop: een pil met de tekst links en aan de
   rechterkant een rond schijfje met een pijltje erin.

   Alleen de VORM wordt gelijkgetrokken - maat, afronding en het pijltje.
   De kleuren blijven zoals ze zijn: een rode knop blijft rood, een witte
   blijft wit. Er liepen vijf verschillende maten door elkaar:

     Bekijk alle vacatures   64px hoog   padding 21/27   14px   radius 70
     Kies dit pakket         54px hoog   padding 16/16   16px   radius 50
     Verzenden               61px hoog   padding 16/68   18px   radius 100
     Solliciteer nu          53px hoog   padding  4/4    16px   radius 100
     Maak Job Alert          58px hoog   padding 16/56   16px   radius 100

   Uitgezonderd: de knop in de vacaturekaarten (die blijft zoals hij is),
   het ronde zoekpijltje, de tabbladen op de pakkettenpagina, de mobiele
   balken en de cookiemelding.
   ========================================================================== */

.kb-button.kt-button,
.automotive-apply-btn,
.automotive-cta-btn,
.avb-solliciteerbalk__knop,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 6px 6px 26px !important;
  min-height: 56px;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: left;
  text-decoration: none;
}

/* --- het schijfje met het pijltje --------------------------------------- */
/* Als ::after, zodat elke knop hem krijgt zonder dat de opmaak in tientallen
   blokken aangepast hoeft te worden. Standaard lichtgrijs; op een gevulde
   knop wit, want daar valt grijs weg tegen de achtergrond. */
.kb-button.kt-button::after,
.automotive-apply-btn::after,
.automotive-cta-btn::after,
.avb-solliciteerbalk__knop::after,
.woocommerce a.button::after,
.woocommerce button.button::after {
  content: "";
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f1f3f6;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMCAxMSI+PHBhdGggZD0iTTAuNzU3IDAuNzg3TDkuMjQzIDAuNzg3TTkuMjQzIDAuNzg3TDkuMjQzIDkuMjcyTTkuMjQzIDAuNzg3TDAuNzU3IDkuMjcyIiBzdHJva2U9IiNENTAxMTciIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGZpbGw9Im5vbmUiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
}

/* op een gevulde knop is het schijfje wit */
.kb-button.kb-btn-global-fill::after,
.automotive-apply-btn::after,
.automotive-cta-btn::after,
.avb-solliciteerbalk__knop::after,
.woocommerce a.button.alt::after,
.woocommerce button.button.alt::after {
  background-color: #ffffff;
}

/* pijltjes die de knop zelf al meebracht zijn nu dubbelop */
.kb-button.kt-button .kb-svg-icon-wrap,
.automotive-apply-btn .automotive-apply-icon {
  display: none !important;
}

/* --- uitzonderingen ---------------------------------------------------- */
/* de knop in een vacaturekaart blijft zoals hij is */
.automotive-vacancy-btn,
.vacancies-list .automotive-vacancy-btn {
  display: inline-block !important;
  padding: 12px 20px !important;
  min-height: 0;
  font-size: 16px !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  text-align: center;
}

.automotive-vacancy-btn::after {
  content: none !important;
}

/* geen tekstknoppen; die blijven zoals ze zijn */
button.owp-search-button {
  border-radius: 110px !important;
  padding: 20px !important;
  min-height: 0;
}

button.owp-search-button::after,
.avb-pakket-tab::after,
.avb-mobielbalk__knop::after,
.avb-uitgelicht__knop::after,
.cmplz-btn::after {
  content: none !important;
}

.avb-pakket-tab {
  padding: 11px 30px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
  min-height: 0;
}

.avb-mobielbalk__knop {
  padding: 16px 12px !important;
  font-size: 15px !important;
  border-radius: 0 !important;
  justify-content: center;
  min-height: 56px;
}

.avb-uitgelicht__knop {
  padding: 13px 18px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  min-height: 0;
}

/* --- mobiel ------------------------------------------------------------ */
@media (max-width: 767px) {
  .kb-button.kt-button,
  .automotive-apply-btn,
  .automotive-cta-btn,
  .woocommerce a.button,
  .woocommerce button.button {
    padding: 5px 5px 5px 22px !important;
    min-height: 52px;
    font-size: 15px !important;
    gap: 12px;
  }

  .kb-button.kt-button::after,
  .automotive-apply-btn::after,
  .automotive-cta-btn::after,
  .woocommerce a.button::after,
  .woocommerce button.button::after {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }
}

/* ======================================================================
   Invoervelden (hele site)
   ====================================================================== */

/* ==========================================================================
   Invoervelden: overal dezelfde ronding.

   Feedback 18-08-2026: "het zoekformulier in het mobiele menu heeft vierkante
   afrondingen, dit form veld ook rondingen geven zoals rest van de site,
   zelfde geldt voor sollicitatieformulier velden en job alert."

   Gemeten op 18-08-2026:

     /vacatures/          zoekveld            100px   goed
     /job-alert/          e-mailveld           50px   goed
     /job-alert/          keuzelijst meervoud   2px   VIERKANT
     /job-alert/          keuzelijst enkel      0px   VIERKANT
     /.../solliciteer/    tekstvelden          50px   goed
     /.../solliciteer/    tekstvak             20px   goed
     mobiel menu          zoekveld              3px   VIERKANT

   De site houdt twee maten aan: een pil (50px) voor velden van één regel en
   20px voor velden van meer regels. Die staan in de Customizer-CSS, op
   `.form-input-wrapper input[type=...]` en `.form-input-wrapper textarea`.
   `select` staat daar niet tussen - vandaar dat precies de keuzelijsten
   vierkant bleven. Dat wordt hieronder rechtgezet, met dezelfde waarden.
   ========================================================================== */

/* --- keuzelijsten in de OTYS-formulieren -------------------------------- *\
   Geldt voor zowel de job alert als het sollicitatieformulier: die gebruiken
   allebei dezelfde `.form-input-wrapper`-opbouw.

   De rechterkant houdt meer ruimte vrij dan de rest (44px in plaats van 18px)
   omdat daar het pijltje van de keuzelijst staat; met 18px rondom botst de
   tekst van een lange optie daartegenaan.                                   */
.form-input-wrapper select {
  width: 100%;
  border: 1px solid #f5f5f5;
  background-color: #fafafa;
  border-radius: 50px;
  padding: 12px 44px 12px 18px;
  margin: 0;
  height: auto;
  color: #05183a;
  font-size: 15px;
}

/* Een lijst waarin je meerdere regels tegelijk ziet kan geen pil zijn: de
   ronding zou de bovenste en onderste optie afsnijden. Die krijgt 20px, net
   als het tekstvak op het sollicitatieformulier. */
.form-input-wrapper select[multiple],
.form-input-wrapper select[size]:not([size="1"]) {
  border-radius: 20px;
}

.form-input-wrapper select:focus {
  border-color: #cbd5e0;
  outline: none;
}

/* --- zoekveld in het mobiele menu -------------------------------------- *\
   Dit stond al op 999px in menu\avb-mobielmenu.css, maar kwam er niet door:
   Kadence zet sitebreed `input[type="text"] { border-radius: 3px }`, en die
   selector (0-1-1) wint van een enkele klasse (0-1-0). Met het formulier
   ervoor en het element erbij is het 0-2-1 en wint hij wel.
   Zie ook de vergelijkbare val bij `.entry-content p` in cvs\avb-cvs.css.  */
.avb-menu-zoek input.avb-menu-zoek__veld {
  border-radius: 999px;
}

/* --- job alert: dropdown met vinkjes ------------------------------------ *\
   30-10-2026: in een <select multiple> moest je Ctrl ingedrukt houden om
   meer dan een functiegroep, regio of sector te kiezen. De template
   server\otys\field-select.php zet die lijsten op /job-alert/ neer als
   <details>. De balk is gelijk aan de dropdown van het sollicitatieformulier
   (.automotive-multiselect-header in vacancies-apply-shortcode.php):
   "Selecteer opties", gekozen opties als rode labels. Het
   sollicitatieformulier zelf blijft ongewijzigd.
   Gedrag in algemeen\avb-keuzelijst.js.                                     */
.form-input-wrapper .avb-keuzelijst {
  position: relative;
  margin: 0;
  font-size: 14px;
}

.form-input-wrapper .avb-keuzelijst__knop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  min-height: 42px;
  list-style: none;
  border: 1px solid #f5f5f5;
  background: #fafafa;
  border-radius: 50px;
  padding: 10px 18px;
  cursor: pointer;
  user-select: none;
}

.form-input-wrapper .avb-keuzelijst__knop::-webkit-details-marker {
  display: none;
}

.form-input-wrapper .avb-keuzelijst__leeg {
  color: #888;
}

.form-input-wrapper .avb-keuzelijst__leeg[hidden] {
  display: none;
}

.form-input-wrapper .avb-keuzelijst__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.form-input-wrapper .avb-keuzelijst__tags:empty {
  display: none;
}

.form-input-wrapper .avb-keuzelijst__tag {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  background: #d50117;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
}

.form-input-wrapper .avb-keuzelijst__weg {
  margin: -4px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}

.form-input-wrapper .avb-keuzelijst[open] .avb-keuzelijst__knop,
.form-input-wrapper .avb-keuzelijst__knop:focus-visible {
  border-color: #cbd5e0;
  outline: none;
}

.form-input-wrapper .avb-keuzelijst__paneel {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(5, 24, 58, .12), 0 2px 6px rgba(5, 24, 58, .06);
}

.form-input-wrapper .avb-keuzelijst__optie {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  color: #05183a;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}

/* De formulier-CSS van de plugin zet 10px links van elke span in een label;
   de ruimte naast het vinkje komt hier uit de gap. */
.form-input-wrapper .avb-keuzelijst__optie span {
  margin: 0;
}

.form-input-wrapper .avb-keuzelijst__optie:hover {
  background: #f5f6f8;
}

.form-input-wrapper .avb-keuzelijst__optie input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 1.5px solid #b8bfca;
  border-radius: 6px;
  background: #fff center / 14px no-repeat;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.form-input-wrapper .avb-keuzelijst__optie input[type="checkbox"]:checked {
  border-color: #d50117;
  background-color: #d50117;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-input-wrapper .avb-keuzelijst__optie input[type="checkbox"]:focus-visible {
  outline: 2px solid #05183a;
  outline-offset: 2px;
}

/* --- compacter: job alert en sollicitatieformulier ---------------------- *\
   30-10-2026: "graag beide formulieren meer uitzoomen, het is nu zo groot".
   Gemeten per veld: label 20px vet, 27px tot het veld, veld 64px hoog en
   daaronder nog 30px. Samen ~150px per vraag, op de job alert met zes
   vragen ruim 900px. Nu: label 16px, elk veld 48px, ~80px per vraag.

   De grote maten staan in de Customizer-CSS (`.form-label-col label`,
   `.form-input-wrapper input[type=...]`, `textarea`), die ná deze file in
   de pagina staat. Met `form` ervoor winnen deze regels. Alleen de padding
   van de tekstvelden staat daar met !important (die regel geldt ook voor
   de velden van de WooCommerce-afrekenpagina), dus die moet hier ook met
   !important; door de `form .form-input-wrapper`-selector blijft afrekenen
   erbuiten. De dropdown van het sollicitatieformulier
   (.automotive-multiselect-header, inline-CSS in
   vacancies-apply-shortcode.php) gaat mee, zodat alle velden even hoog zijn:
   11px boven en onder, regelhoogte 24px, rand 1px = 48px.               */
form .form-input-wrapper {
  margin-bottom: 18px;
  margin-block-end: 18px;
}

form .form-label-col {
  margin-bottom: 8px;
}

form .form-label-col label {
  font-size: 16px;
  line-height: 1.35;
  margin-bottom: 0;
}

form .form-input-wrapper input[type="text"],
form .form-input-wrapper input[type="email"],
form .form-input-wrapper input[type="tel"],
form .form-input-wrapper input[type="url"],
form .form-input-wrapper input[type="number"],
form .form-input-wrapper input[type="password"],
form .form-input-wrapper input[type="date"],
form .form-input-wrapper input[type="file"] {
  margin: 0;
  padding: 11px 18px !important;
  font-size: 15px;
  line-height: 24px;
}

form .form-input-wrapper textarea {
  margin: 0;
  padding: 11px 18px;
  font-size: 15px;
}

form .form-input-wrapper select {
  padding-top: 11px;
  padding-bottom: 11px;
  line-height: 24px;
}

form .form-input-wrapper .avb-keuzelijst__knop,
form .form-input-wrapper .automotive-multiselect-header {
  min-height: 0;
  padding: 11px 18px;
  line-height: 24px;
}

/* een label is iets hoger dan een regel tekst; de balk mag dan meegroeien,
   maar niet met de volle 24px regelhoogte eromheen */
form .form-input-wrapper .avb-keuzelijst__tag,
form .form-input-wrapper .automotive-tag {
  line-height: 16px;
}

/* ======================================================================
   Premium-kaarten
   ====================================================================== */

/* ==========================================================================
   Premium-kaartcarrousel (productpagina's en /voor-werkgevers/).

   Het sjabloon legde een donkere binnenschaduw over elke kaart die niet in
   het midden stond; daardoor oogden de kaarten grijs. De kaarten zijn zelf
   wit, dus die schaduw kan eraf.
   ========================================================================== */

.kb-blocks-fluid-carousel .splide__slide .kb-gallery-image-contain,
.kb-blocks-fluid-carousel .splide__slide:not(.is-active) .kb-gallery-image-contain {
  box-shadow: none !important;
  background: transparent !important;
}

.kb-blocks-fluid-carousel .kadence-blocks-gallery-item,
.kb-blocks-fluid-carousel .kadence-blocks-gallery-item figure,
.kb-blocks-fluid-carousel .kb-gallery-figure {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.kb-blocks-fluid-carousel .splide__slide img {
  background: transparent !important;
  mix-blend-mode: normal;
}

/* ==========================================================================
   De kaartgalerijen zelf (productsjabloon 3144 en /voor-werkgevers/ 2768)
   zijn een slider: vier grote kaarten in beeld, automatisch scrollend en met
   pijlen te bedienen. De SVG's zijn buiten het witte blok transparant, dus op
   een witte achtergrond krijgt elke kaart hier een kader met zachte schaduw -
   anders leken het losse icoontjes.
   ========================================================================== */

.kb-gallery-id-3144_16998b-cc .kb-gal-image-radius,
.kb-gallery-id-2768_kaarten-01 .kb-gal-image-radius {
  background: #ffffff;
  border: 1px solid #e8ecf2;
  border-radius: 20px;
  box-shadow: 0 8px 22px rgba(5, 24, 58, .07);
}

.kb-gallery-id-3144_16998b-cc .kb-gallery-image-contain,
.kb-gallery-id-2768_kaarten-01 .kb-gallery-image-contain,
.kb-gallery-id-3144_16998b-cc .kb-gallery-figure,
.kb-gallery-id-2768_kaarten-01 .kb-gallery-figure {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* wat lucht boven en onder, zodat de schaduw en de pijlen niet afgesneden
   worden door de overflow van de slider */
.kb-gallery-id-3144_16998b-cc .kb-slide-item,
.kb-gallery-id-2768_kaarten-01 .kb-slide-item {
  padding-top: 10px;
  padding-bottom: 26px;
}

/* ======================================================================
   Vinkjes (hele site)
   ====================================================================== */

/* ==========================================================================
   Vinkjes in de pakketlijsten.

   Tot 13-08-2026 stond er een ✅ in de producttekst zelf. WordPress maakte
   daar een plaatje van (s.w.org) en deze CSS schoof dat plaatje uit beeld om
   er een eigen vinkje overheen te zetten. Dat was een laag over de echte
   inhoud - zie de werkregel in CLAUDE.md - en het gaf een zichtbare fout: het
   vinkje stond in de tekststroom, dus een regel die terugviel begon weer onder
   het vinkje in plaats van in te springen ("Inclusief alle voordelen van
   'Gerichte Zichtbaarheid'").

   De tekens zijn met `server\haal-vinkjes-uit-tekst.php` uit de tekst gehaald.
   Het vinkje is nu een opsommingsteken van de opmaak: het staat in een eigen
   kolom, dus de tekst springt netjes in.
   ========================================================================== */

.auto-product-description ul,
.woocommerce li.product .auto-product-description ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto-product-description ul > li {
  display: grid;
  grid-template-columns: 1.15em 1fr;
  column-gap: .38em;
  align-items: start;
  margin: 0 0 6px;
  padding: 0;
  list-style: none;
}

.auto-product-description ul > li::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  /* dun rood vinkje in een zachtroze rondje, in de huisstijl */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fdf1f2'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23d50117' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  /* op de eerste regel uitlijnen, ook als die regel hoger is dan het vinkje */
  margin-top: .12em;
}

/* Mocht er ergens toch nog een ✅ in een tekst staan, dan blijft dat gewoon
   het teken zelf - geen laag eroverheen meer. Wel op tekstgrootte houden,
   anders springt de regelhoogte. */
img.emoji[alt="✅"],
img.wp-smiley[alt="✅"] {
  width: 1.1em !important;
  height: 1.1em !important;
  vertical-align: -.16em !important;
}

/* ======================================================================
   Footer
   ====================================================================== */

/* ==========================================================================
   Footer: één lettergrootte voor alle links.

   Gevraagd op 13-08-2026: "de fonts in de footer moeten allemaal dezelfde
   grootte zijn". De maten in de blokken zelf zijn gelijkgetrokken met
   `server\zet-footer-lettergroottes.php` (11px voor de kolomkoppen, 12px voor
   de rest). De menulinks in de kolommen komen niet uit een blok maar uit
   menu-widgets; die stonden op desktop op 12px en op mobiel op 10px. Die 10px
   staat niet in een instelling van het thema of in het child theme - hij komt
   uit de opmaak van Kadence zelf. Daarom hier vastgezet.

   Dit is opmaak, geen inhoud: de teksten en de links komen gewoon uit de
   menu's in WordPress.
   ========================================================================== */

#colophon .menu-item > a,
.site-footer .menu-item > a,
footer .menu-item > a {
  font-size: 12px;
  line-height: 1.7;
}

/* de onderste balk (copyright en de drie links) hoort bij hetzelfde ritme */
#colophon .site-info,
#colophon .site-info a,
.site-footer .site-info,
.site-footer .site-info a {
  font-size: 12px;
}

/* ======================================================================
   Voor werkgevers - reviewslider
   ====================================================================== */

/* Reviewslider op /voor-werkgevers/, boven het filmpje (03-11-2026, verzoek Peter).
   Markup staat als wp:html-blok in de pagina (server/werkgevers-reviews-slider.php),
   bediening in avb-reviews.js. Het schuiven doet de browser met scroll-snap; zonder
   JavaScript blijft de strook gewoon scrollbaar. */
.avb-reviews {
  width: 100%;
  position: relative;
}

.avb-reviews__spoor {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.avb-reviews__spoor::-webkit-scrollbar {
  display: none;
}

.avb-reviews__spoor:focus-visible {
  outline: 2px solid #c8102e;
  outline-offset: 4px;
}

.avb-review {
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 694px) minmax(0, 287px);
  justify-content: space-between;
  align-items: start;
  align-content: start; /* slide rekt uit tot de langste review; inhoud blijft bovenaan */
  gap: 24px 40px;
  margin: 0;
  padding: 0;
}

.avb-review__quote {
  margin: 0;
  padding: 0;
  border: 0;
  quotes: none;
}

.avb-review__quote p {
  margin: 0;
  font-size: 22px;
  line-height: 1.55;
  font-style: italic;
  font-weight: 400;
  color: #1e1e1e;
}

.avb-review__wie {
  margin: 4px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #515151;
}

.avb-review__wie strong {
  font-weight: 600;
  color: #1e1e1e;
}

/* bediening: alleen zichtbaar als het script draait */
.avb-reviews__bediening {
  display: none;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.avb-reviews.is-actief .avb-reviews__bediening {
  display: flex;
}

.avb-reviews__knop {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #c2c2c2;
  border-radius: 50%;
  background: #fff;
  color: #1e1e1e;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

/* pijltje als getekende chevron, zodat het optisch in het midden staat */
.avb-reviews__knop span {
  display: none;
}

.avb-reviews__knop::before {
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: translateX(-2px) rotate(45deg);
}

.avb-reviews__knop--vorige::before {
  transform: translateX(2px) rotate(-135deg);
}

.avb-reviews__knop:hover,
.avb-reviews__knop:focus-visible {
  border-color: #1e1e1e;
  background: #fff;
  color: #1e1e1e;
}

.avb-reviews__knop:disabled {
  opacity: .35;
  cursor: default;
}

.avb-reviews__punten {
  display: flex;
  gap: 8px;
}

.avb-reviews__punt {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c2c2c2;
  cursor: pointer;
  box-shadow: none;
}

.avb-reviews__punt.is-actief {
  background: #c8102e;
}

@media (max-width: 767px) {
  .avb-review {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .avb-review__quote p {
    font-size: 19px;
  }
}