/*
Theme Name: WarmteMakers
Theme URI: https://www.warmtemakers.nl
Description: Blokthema voor de WarmteMakers-herbouw (Gutenberg). Kind van Twenty Twenty-Five. Opmaak gelijkgetrokken met elektromakers.nl: lettertypen exo2 (koppen) en trueno (bodytekst), typografieschaal, kleuren, ruimte, kop en voet — allemaal centraal in theme.json en hieronder, nooit per pagina.
Author: ElektroMakers / WarmteMakers
Template: twentytwentyfive
Version: 0.2.0
Text Domain: warmtemakers
*/

/* =========================================================================
   Alles hieronder is gemeten op elektromakers.nl (berekende stijlen,
   15 augustus 2026) en hier één keer centraal gezet.
   Wat theme.json niet kan uitdrukken staat hier; de rest staat in theme.json.
   ========================================================================= */

/* --- KLEUREN ----------------------------------------------------------------
   DE BRON IS theme.json, niet dit bestand. Daar staat het palet, en daardoor
   verschijnen deze kleuren óók in de kleurkiezer van de editor. Zet je ze alleen
   hier neer, dan ziet de editor ze niet en pakt de eerstvolgende bewerking weer
   een losse hex — precies de regressie die we wilden voorkomen.

   Hieronder staan alleen KORTE NAMEN voor de presets uit theme.json. Geen enkele
   hex-waarde; wijzigen doe je in theme.json.

   Waarom de tekst op accent niet wit is, zoals op EM: wit op #7abf44 haalt
   2,24:1 en de eis is 4,5:1. Huisstijl-leiblauw #495d63 haalt 3,09:1 — ook te
   weinig. #2b3941 (dezelfde leiblauw, donkerder) haalt 5,31:1.
   En waarom de hover LICHTER is en niet donkerder: bij donkere tekst verslechtert
   een dieper groen het contrast. #6aa93a zakte naar 4,17:1; #86c94e geeft 5,94:1.
   Alles berekend, niet geschat.                                             */

:root {
  --wm-accent:        var(--wp--preset--color--accent);
  --wm-accent-hover:  var(--wp--preset--color--accent-hover);
  --wm-op-accent:     var(--wp--preset--color--on-accent);
  --wm-rood:          var(--wp--preset--color--primary);
  --wm-op-rood:       var(--wp--preset--color--white);
  --wm-lei:           var(--wp--preset--color--body);
  --wm-grijs:         var(--wp--preset--color--band-grey);
  /* Afronding (27-08-2026, besluit Michel: "niet te veel, maar wel subtiel").
     Eén plek; blijf binnen 4-10 px. Regel: een vlak dat los op de pagina ligt
     wordt afgerond, wat de volle breedte vult is een band en blijft recht. */
  --wm-radius-klein:  4px;   /* labels, vinkjes, kleine badges */
  --wm-radius-knop:   6px;   /* alle knoppen en formuliervelden */
  --wm-radius-vlak:   8px;   /* kaarten, info-, groen- en roodvlakken, tabellen */
  --wm-radius-beeld:  8px;   /* foto's binnen de contentkolom */
}

/* --- KOP -----------------------------------------------------------------
   EM: header.site-header is position:fixed met de klasse scrollhide-nav;
   de bovenste balk (33px, #f0f0f0) verdwijnt bij scrollen, de hoofdbalk
   (119px, #ffffff) blijft staan. Hier nagebouwd met sticky + een klasse.   */

.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 9;
  background: #ffffff;
}

.wm-topbar {
  min-height: 33px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: max-height .18s ease, opacity .18s ease;
  max-height: 60px;
}

.wm-topbar__tel {
  margin: 0;
  width: 100%;
  color: #494949;
  letter-spacing: normal;
}

.wm-topbar__tel a {
  color: #494949;
  text-decoration: none;
  font-weight: 700;
}

.wm-topbar__tel a:hover { color: #bd292e; }

/* verbergt de bovenbalk zodra er gescrold is — hetzelfde gedrag als EM */
body.wm-scrolled .wm-topbar {
  max-height: 0;
  opacity: 0;
}

.wm-mainbar { min-height: 119px; display: flex; align-items: center; }
.wm-mainbar__inner { width: 100%; }

/* logo: EM 347x82 op desktop, 161x38 op mobiel */
/* aspect-ratio erbij 5-9-2026: reserveert de hoogte VOORDAT het logo geladen is.
   Zonder deze regel schoof de kop tijdens het laden en telde Lighthouse het logo
   mee als oorzaak van de opmaaksprong ("Media element lacking an explicit size").
   height blijft auto, zodat er niets vervormt op smalle schermen. */
.wm-brand .wp-block-site-logo img { width: 347px; height: auto; aspect-ratio: 347 / 75; max-width: 100%; }

/* --- MENU ----------------------------------------------------------------
   EM: trueno 11px / 700 / uppercase / #494949                              */

.wm-nav a,
.wp-block-navigation .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--trueno);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: normal;
  color: #494949;
  text-decoration: none;
}

.wm-nav a:hover,
.wp-block-navigation .wp-block-navigation-item__content:hover { color: #bd292e; }

/* --- VOET ----------------------------------------------------------------
   EM: bg #f0f0f0, tekst #495d63, padding 64px 16px, 4 kolommen             */

.wm-footer { color: #495d63; }

/* EM's kolomkoppen in de voet: exo2 16px / 700 / uppercase / #495d63 */
.wm-footer h4 {
  color: #495d63;
  font-size: 16px;
  line-height: 1.4;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.wm-footer .wp-block-list { list-style: none; margin: 0; padding: 0; }
.wm-footer .wp-block-list li { margin: 0 0 6px; }
.wm-footer a { color: #494949; text-decoration: none; }
.wm-footer a:hover { color: #bd292e; }
.wm-footer__baseline p { margin: 0; color: #494949; text-align: center; }

/* --- FORMULIERKNOP -------------------------------------------------------
   Fluent Forms zet zijn eigen knopstijl en trekt zich niets aan van
   theme.json. EM heeft precies hetzelfde effect (daar radius 7px, padding
   8px 20px, 16px/500 — alleen groen i.p.v. rood). Het enige wat daar afweek
   is het lettertype: Arial in plaats van de huisstijlletter.               */

.ff-btn, .ff-btn-submit, .fluentform button[type="submit"] {
  font-family: var(--wp--preset--font-family--trueno);
  letter-spacing: normal;
  /* Gemeten 17 aug op 390px: de Versturen-knop kwam uit op 119x42 — twee pixels
     onder het tikdoelminimum van 44, op elke pagina met een formulier. De
     padding van 8px boven en onder plus 16px/500 tekst haalt het net niet.
     min-height dwingt het af zonder de opmaak van EM aan te tasten: de knop is
     al ruim breder dan 44 en de achtergrondkleur verandert niet. */
  min-height: 44px;
}

/* --- MOBIEL --------------------------------------------------------------
   EM op 375px: kop 52px, logo 161x38, sectie-padding 16px, voet-padding 32px */

@media (max-width: 767px) {
  /* EM zet de zijmarge van secties op mobiel terug van 32px naar 16px.
     LET OP: alléén via de variabele, en op `body` — niet op `:root` en niet
     rechtstreeks op .has-global-padding. WordPress berekent de negatieve marge
     van .alignfull uit dezelfde variabele; zet je de padding los daarvan, dan
     lopen padding (16px) en negatieve marge (32px) uit elkaar en steekt de hele
     pagina 16px naar links buiten beeld. Gemeten op 15/16 aug: 68 elementen op
     L-16 of L-32, scrollWidth 407 tegen clientWidth 375. De global styles zetten
     deze variabele op `body`, dus een override op `:root` verliest het. */
  body {
    --wp--style--root--padding-left: 16px;
    --wp--style--root--padding-right: 16px;
  }
  /* EM's bodyregelafstand op mobiel is 1,5 (19,5px bij 13px), niet 1,6 */
  body { line-height: 1.5; }

  /* De bovenbalk zelf blijft weg op mobiel, zoals bij EM — MAAR de
     telefoonregel blijft staan. Besluit Michel 18 augustus: geen enkele pagina
     mag nul CTA's boven de vouw hebben. Gemeten op 390 px: op de 23 blogs en
     hulppagina's was de tel:-link het énige wat er stond, en die zat 0×0 in het
     dichtgeklapte menu. Dit is één regel die 23 pagina's tegelijk oplost.
     (EM doet dit niet: een EM-blogpagina heeft 0 tel:-links. Hier wint Michels
     eis van vandaag boven het EM-voorbeeld.) */
  .wm-topbar { display: flex; min-height: 0; }
  .wm-topbar .wp-block-navigation { display: none; }   /* alleen de telefoonregel, niet het menu */
  .wm-topbar__tel { text-align: center; font-size: 13px; }
  .wm-topbar__tel a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;                                   /* tikdoel, niet alleen leesbaar */
    padding: 0 8px;
  }

  .wm-mainbar { min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
  .wm-brand .wp-block-site-logo img { width: 161px; }
  .wm-footer { padding-top: 32px !important; padding-bottom: 32px !important; }
  .wm-footer__cols { gap: 24px; }
}

/* --- BOVENBALK-NAVIGATIE (3b) ----------------------------------------------
   EM heeft in de bovenbalk Home / Over ons / Contact. Zelfde plek, zelfde vorm:
   trueno 11px / 700 / uppercase / #494949, rechts uitgelijnd naast het nummer. */

.wm-topbar__inner { width: 100%; }

.wm-topnav a,
.wm-topnav .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--trueno);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: normal;
  color: #494949;
  text-decoration: none;
}

.wm-topnav a:hover { color: #bd292e; }

/* PUNT 1 — de items in de bovenbalk liepen niet gelijk uit: "OVER ONS" brak over
   twee regels en werd 35px hoog terwijl HOME en CONTACT 18px bleven, waardoor ze
   niet meer op één lijn stonden.
   Gemeten op EM (16 aug): balk 33px; elk item is een blok van 33px hoog met
   padding 11.2px 16px en line-height 11px, top 0 en bottom 33 voor alle drie. */
.wm-topbar { min-height: 33px; }
.wm-topnav .wp-block-navigation-item__content {
  display: block;
  white-space: nowrap;      /* dit was de oorzaak van de breuk */
  padding: 11.2px 16px;
  line-height: 11px;
  font-size: 11px;
}
.wm-topnav .wp-block-navigation__container { align-items: center; gap: 0 !important; }
.wm-topnav .wp-block-navigation-item { align-items: stretch; }

/* --- BROODKRUIMEL ----------------------------------------------------------
   EM: trueno 13px / 400 / uppercase / #bebfc0, geen onderstreping. */

.rank-math-breadcrumb,
.rank-math-breadcrumb p {
  font-size: 13px;
  line-height: 1.6;
  text-transform: uppercase;
  color: #bebfc0;
  margin: 0 0 8px;
}

.rank-math-breadcrumb a { color: #bebfc0; text-decoration: none; }
.rank-math-breadcrumb a:hover { color: #bd292e; }

/* --- SJABLOONBLOKKEN -------------------------------------------------------
   Maatvoering uit SJABLONEN-EM.md. */

.wm-hero img { width: 100%; height: auto; object-fit: cover; }
.wm-intro { margin-bottom: 32px; }
.wm-usp { color: #495d63; }
.wm-usps { padding: 32px 16px; }
.wm-usps h4 { margin-bottom: 8px; }
.wm-drieluik { margin: 24px 0 32px; }
.wm-drieluik .wp-block-column { background: #ffffff; }
.wm-cta { padding: 48px 16px; margin-top: 48px; }
.wm-zijkolom { border-left: 1px solid #bebfc0; padding-left: 24px; }
.wm-kaart iframe { display: block; }

@media (max-width: 767px) {
  .wm-zijkolom { border-left: 0; padding-left: 0; }
  .wm-usps, .wm-cta { padding-left: 0; padding-right: 0; }
}

/* --- VOORPAGINA -------------------------------------------------------------
   De acht banden van elektromakers.nl, met de maten die daar gemeten zijn
   (VOORPAGINA-EM.md). Alles hier, niets per pagina.                          */

/* Band 1 — hero: 101% van het scherm bij EM; 72vh laat de band eronder net
   zien, wat op een blokthema zonder vaste kophoogte hetzelfde effect geeft. */
/* LET OP: hoogte in px, niet in vh. Met vh hangt de band aan de vensterhoogte,
   en een schermafdruk met een hoog venster maakt er dan een band van duizenden
   pixels van — gemeten op 16 aug: 72vh in een venster van 4200px = 3024px hero.
   EM's hero is 730px; 660px komt daar het dichtst bij zonder de knoppen onder
   de vouw te duwen. */
/* KOP VAN DE PAGINA — hermeten op elektromakers.nl, 20 augustus 2026, met
   getComputedStyle op 1440 en op 390 px. Wat daar staat:
     hoogte hero   730 px (1440) / 492 px (390), schermvullend, geen min-height in vh
     titel         70/84 px gewicht 700 wit exo2 (1440) - 37/44,4 px (390)  => 1,2 regelhoogte
     verduistering GEEN overlay op de foto; de leesbaarheid komt uit een
                   tekstschaduw: 0 0 14px rgba(0,0,0,.88)
     knoppen       199x50 en 118x50, 20 px ertussen, radius 4, padding 15
   WarmteMakers stond op 660 px, 48/67,2 px, zwarte overlay 40% en geen schaduw.
   De 40%-overlay was de reden dat de foto dof oogde (gemeten: bronbestand heeft
   volle spreiding 0-255 en verzadiging 0,381 - het bestand is dus niet dof).
   Hier: overlay terug naar 12% zodat de foto helder blijft, plus een verloop dat
   ALLEEN achter de tekst ligt, plus de schaduw van EM. Zie ::after hieronder. */
.wm-hero { margin-bottom: 0; min-height: 730px !important; position: relative; }
/* z-index MET !important, en dat is hier geen luiheid. WordPress 7.1 levert voor
   de inner-container deze selector:
     body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(
       .wp-block-cover__background + .wp-block-cover__inner-container))
       .wp-block-cover__inner-container { z-index: 1 }
   Dat is specificiteit (0,6,1) - een gewone themaregel haalt dat niet. Gemeten op
   20 augustus: mijn regel (0,3,0) stond in de lijst maar de berekende z-index bleef 1,
   en op de schermafdruk lag het verloop over de letters (lichtste pixel in het
   titelvak was rgb(123,123,123): geen enkele witte letterpixel over). */
.wp-block-cover.wm-hero .wp-block-cover__inner-container { width: 100%; position: relative; z-index: 2 !important; }

/* Het verloop achter de tekst. Niet over het hele beeld, anders is de foto weer
   dof; een ellips onder de tekstkolom rechts, die naar de randen naar nul gaat.
   z-index 1 = boven de verduisteringslaag van het cover-blok, onder de inhoud. */
.wm-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* 21 aug: versterkt voor de Weheat-foto - daar zit heldere lucht achter de titel,
       waardoor het lichtste punt op 1440 op 3,94:1 kwam. Grotere, iets donkerdere
       ellips + sterkere rechter-linear; blijft ACHTER de tekst, dus de linkerkant
       (mensen/dak) blijft helder. */
    radial-gradient(ellipse 56% 54% at 72% 50%,
      rgba(0,0,0,.74) 0%, rgba(0,0,0,.68) 48%, rgba(0,0,0,.36) 78%, rgba(0,0,0,0) 100%),
    linear-gradient(90deg, rgba(0,0,0,0) 28%, rgba(0,0,0,.28) 58%, rgba(0,0,0,.44) 100%);
}

/* PUNT 2 — er zat 128px lucht tussen de kop en de hero. Op EM is dat gat 0:
   de kop is `fixed` (152px) en de inhoud krijgt precies 152px margin-top, zodat
   de eerste sectie exact tegen de kop aan begint. Hier telde de main-marge (64px)
   plús de blokafstand boven de eerste band op tot 128px. Alleen op de voorpagina
   dichtzetten: op de andere pagina's begint de inhoud met een broodkruimel en
   is die ruimte wél gewenst.

   PUNT 4, herzien 16 aug: dit gold eerst alleen voor `.home`. Nagemeten op EM's
   BINNENpagina's — `/zonnepanelen/` (product) en `/over-ons/` (tekst) — is het gat
   daar óók 0. Op de tekstpagina zit wel 32px `padding-top` binnen de sectie zelf,
   zodat de broodkruimel niet tegen de kop plakt. Dus: gat overal 0, en op alles
   behalve de voorpagina 32px lucht binnenin — precies EM's opbouw. */
.wp-site-blocks > main { margin-top: 0 !important; }
.wp-site-blocks > main > .wp-block-group { padding-top: 0 !important; }
.wp-block-post-content > .wm-hero:first-child,
.entry-content > .wm-hero:first-child { margin-top: 0 !important; }
/* EM's 32px binnen de eerste sectie, op alles behalve de voorpagina */
body:not(.home) .wp-site-blocks > main > .wp-block-group { padding-top: 32px !important; }

/* De banden lopen op EM tot 1200px. Binnen een 'constrained' lay-out krijgt een
   kolommenblok de contentSize (800px) mee; deze drie horen op de wide-maat. */
.wm-kaarten, .wm-banners, .wm-kennismaking {
  max-width: 1200px; width: 100%; margin-left: auto; margin-right: auto;
}
/* De titel op EM-maat. 70 px bij 1440 en 37 px bij 390 is lineair:
   37 + (70-37)/(1440-390) * (breedte-390)  =  24,74px + 3,143vw, afgetopt op 70.
   Regelhoogte 1,2 - dat is exact 84/70 en 44,4/37, dus op beide breedtes gelijk.
   De schaduw is die van EM, iets zwaarder gezet omdat er op deze foto een
   spierwitte plek achter de titel zit (gemeten: rgb 255,255,255). */
.wm-hero__kop {
  color: #ffffff; margin-bottom: 24px;
  font-size: clamp(37px, 24.74px + 3.143vw, 70px) !important;
  line-height: 1.2 !important;
  font-weight: 700;
  text-shadow: 0 2px 16px rgba(0,0,0,.92), 0 0 6px rgba(0,0,0,.78);
}
/* Knoppen: EM meet 50 px hoog met een rand van 2 px; WarmteMakers stond op 48 met
   1 px. Alleen in de hero verzwaard, zodat de knoppen elders niet verspringen.
   De rand krijgt de kleur van de knop zelf - de themastandaard zet hem op
   primary (rood), en dat gaf een rode rand om de groene Contact-knop. */
.wm-hero .wp-block-buttons { gap: 20px; }
.wm-hero .wp-block-button__link { border-radius: var(--wm-radius-knop); padding: 15px; border-width: 2px; border-style: solid; }
.wm-hero .wm-knop--rood   > .wp-block-button__link { border-color: var(--wm-rood) !important; }
.wm-hero .wm-knop--accent > .wp-block-button__link { border-color: var(--wm-accent) !important; }

/* PUNT 3 — de accentknop. Vorm gemeten op EM: radius 4px, padding 15px, 16px/400.
   Kleur: #7abf44 (besluit Michel). Tekst: NIET wit zoals EM — zie de toelichting
   bij de custom properties bovenaan. Op EM is voor deze knop geen enkele
   :hover-regel gedefinieerd; hier wél, want een knop zonder terugkoppeling voelt
   dood. De hover is dezelfde tint, 12% donkerder. */
/* LET OP de plek van de klasse. Bij een core/button hoort `className` op de
   OMHULLENDE div (.wp-block-button), niet op de <a>. Zet je hem op de link, dan
   wijkt de opgeslagen HTML af van wat WordPress bij validatie genereert en meldt
   de editor "Het blok bevat onverwachte of ongeldige inhoud" — met een knop
   "Probeer herstel" die de klasse wegpoetst en dus de kleur meeneemt.
   Gezien en hersteld op 16 augustus; daarom selecteren we hier de link binnen
   de wrapper. */
.wm-knop--accent > .wp-block-button__link {
  background-color: var(--wm-accent) !important;
  color: var(--wm-op-accent) !important;
  font-weight: 700;
}
.wm-knop--accent > .wp-block-button__link:hover,
.wm-knop--accent > .wp-block-button__link:focus-visible { background-color: var(--wm-accent-hover) !important; }

.wm-knop--rood > .wp-block-button__link {
  background-color: var(--wm-rood) !important;
  color: var(--wm-op-rood) !important;
}
.wm-knop--rood > .wp-block-button__link:hover,
.wm-knop--rood > .wp-block-button__link:focus-visible { background-color: #a32327 !important; }

/* Toetsenbordbediening: een zichtbare ring, los van de kleurverandering.
   #2b3941 haalt 5,31:1 tegen de groene knop en 11,9:1 tegen wit, dus hij is op
   beide ondergronden te zien. Offset 2px zodat de ring niet in de knop valt. */
.wm-knop--accent > .wp-block-button__link:focus-visible,
.wm-knop--rood > .wp-block-button__link:focus-visible,
.wm-kaart a:focus-visible,
.wm-onderbalk a:focus-visible {
  outline: 3px solid var(--wm-op-accent);
  outline-offset: 2px;
}

/* Band 2 — snelcontact: bij EM heeft deze sectie op desktop hoogte 0 en
   verschijnt hij alleen op mobiel, direct onder de hero. */
.wm-snelcontact { display: none; }

/* Band 3 — de twee gekleurde kaarten. EM: 32% + 63%, wit op kleur, links met
   pijltjes en geen opsommingstekens. */
.wm-kaarten { margin: 48px 0; align-items: stretch; }
.wm-kaarten > .wp-block-column { display: flex; }
.wm-kaart { padding: 32px; width: 100%; }
/* de vlakken krijgen hun kleur hier, niet uit de blokmarkering */
.wm-kaart--rood   { background: var(--wm-rood); }
.wm-kaart--accent { background: var(--wm-accent); }
.wm-kaart--rood, .wm-kaart--rood h2, .wm-kaart--rood h3, .wm-kaart--rood p, .wm-kaart--rood a { color: #ffffff; }
/* wit op groen haalt 2,24:1 — op de accentkaart dus donkere tekst, 5,31:1 */
.wm-kaart--accent, .wm-kaart--accent h2, .wm-kaart--accent h3,
.wm-kaart--accent p, .wm-kaart--accent a { color: var(--wm-op-accent); }
.wm-kaart h2 { margin-bottom: 16px; }
.wm-kaart__lijst { list-style: none; margin: 0; padding: 0; }
.wm-kaart__lijst li { margin: 0 0 10px; }
.wm-kaart__lijst li a { text-decoration: none; }
.wm-kaart__lijst li a::before { content: "→ "; }
.wm-kaart__lijst li a:hover { text-decoration: underline; }
.wm-kaart .wp-block-image img { border-radius: var(--wm-radius-beeld); }
.wm-kaart .wp-block-button__link { background: #ffffff !important; color: var(--wm-lei) !important; }

/* Band 4 — twee bannerkaarten (63%) naast de kenmerkkaart (32%).
   CORRECTIES 21 aug (a,b,c,d):
   a) gezicht monteur vrij: de vlakke 50%-dim is vervangen door een verloop dat
      ALLEEN onderaan donker is (waar de titel staat); focalPoint houdt het
      gezicht in de bovenhelft (wp-2 y=0,33; ac-1 y=0,45).
   b) hele kaart is één link (.wm-banner__link, uitgerekt over de cover) met een
      zichtbare tekstlink "Lees verder" erin; tikdoel = de hele kaart.
   c) het blok "Hier staat WarmteMakers voor" is uit de aircokaart gehaald en
      staat nu in een eigen band (.wm-waarvoor).
   d) het STEK-vak is gevuld met drie regels en vult de hoogte van de kaarten. */
.wm-banners { margin: 48px 0; align-items: stretch; }
.wm-banners > .wp-block-column { display: flex; flex-direction: column; }
.wm-banner { margin-bottom: 16px; border-radius: var(--wm-radius-vlak); overflow: hidden; position: relative; flex: 1; }
.wm-banner:last-child { margin-bottom: 0; }
/* static, zodat de uitgerekte link zich op .wm-banner richt en niet op de inner */
/* core zet inner-container op position:relative met gelijke specificiteit en laadt
   erna; met .wp-block-cover ervoor + !important wint deze, zodat de uitgerekte
   .wm-banner__link zich op .wm-banner richt en de HELE kaart dekt (niet 194 maar 210). */
.wp-block-cover.wm-banner .wp-block-cover__inner-container { align-self: flex-end; width: 100%; position: static !important; z-index: auto; }
/* verloop alleen onderaan i.p.v. vlakke verduistering over het hele beeld */
.wm-banner .wp-block-cover__background {
  opacity: 1 !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.34) 62%, rgba(0,0,0,.72) 100%) !important;
}
.wm-banner :is(h2,h3,h4) { color: #ffffff; font-size: 22px; margin: 0 0 4px; position: relative; }
/* de uitgerekte kaartlink: over de hele cover, boven beeld en verloop */
/* de 15px padding zat op de cover zelf, waardoor de link-inset niet tot de rand
   kwam (194 i.p.v. 210). Padding naar de inner-container; link dekt nu de HELE kaart. */
.wm-banner { padding: 0 !important; }
.wp-block-cover.wm-banner .wp-block-cover__inner-container { padding: 15px !important; }
.wm-banner__link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; }
.wm-banner__lees {
  color: #ffffff; margin: 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; position: relative;
}
.wm-banner__lees::after { content: " \2192"; }
.wm-banner:hover .wm-banner__lees { text-decoration: underline; }
.wm-banner:focus-within { outline: 3px solid var(--wm-accent); outline-offset: 2px; }

/* de witte kaart met slagschaduw, zoals de InstallQ-kaart bij EM.
   Gevuld (correctie d): logo, korte kop, drie regels; vult de hoogte ernaast. */
.wm-kenmerk {
  background: #ffffff; padding: 28px; height: 100%;
  box-shadow: 0 2px 14px rgba(0,0,0,.10); text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.wm-kenmerk h3 { font-style: italic; margin: 16px 0 12px; }
.wm-kenmerk__logo { margin: 0 auto; }
.wm-kenmerk__lijst { list-style: none; margin: 0; padding: 0; text-align: left; }
.wm-kenmerk__lijst li { position: relative; padding-left: 26px; margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
.wm-kenmerk__lijst li:last-child { margin-bottom: 0; }
.wm-kenmerk__lijst li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
  border-radius: 50%; border: 2px solid var(--wm-accent);
  background: no-repeat center / 10px url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cpath fill=%22none%22 stroke=%22%237abf44%22 stroke-width=%222%22 d=%22M3 8l3 3 6-7%22/%3E%3C/svg%3E");
}

/* CORRECTIE c/d — eigen band "Hier staat WarmteMakers voor".
   21 aug (d): WIT gemaakt zodat het als eigen raster leest en niet vastplakt aan
   de grijze USP-rij eronder (die stond met gat 0 tegen elkaar = één grijze slab).
   Kop en kolommen op dezelfde middenas (alles gecentreerd). De afsluitzin, ÉÉN
   hoofdknop en de telefoon-als-tekstlink staan nu BINNEN dit blok, gecentreerd
   (de losse wm-cta-tussen band met twee concurrerende knoppen is verwijderd). */
.wm-waarvoor { padding: 48px 16px 40px; margin: 0; background: #ffffff; }
.wm-waarvoor > h2 { margin: 0 0 32px; text-align: center; }
.wm-waarvoor__cols { max-width: 1000px; margin: 0 auto; }
.wm-waarvoor__cols > .wp-block-column { text-align: center; }
.wm-waarvoor__cols h3 { font-size: 20px; margin: 0 0 8px; color: var(--wm-rood); }
.wm-waarvoor__cols p { margin: 0; font-size: 15px; line-height: 1.5; }
.wm-waarvoor__cta-zin { max-width: 640px; margin: 40px auto 20px; font-size: 16px; }
.wm-waarvoor .wp-block-buttons { justify-content: center; }
.wm-waarvoor__tel { margin: 14px 0 0; font-size: 14px; color: var(--wm-lei); }
.wm-waarvoor__tel a { color: var(--wm-rood); text-decoration: none; font-weight: 700; }
.wm-waarvoor__tel a:hover { text-decoration: underline; }

/* Band 5 — USP-rij: EM zet hier een lichte band achter, 4 x 25%. */
.wm-usps { padding: 40px 16px; margin: 0; background: var(--wm-grijs); }
.wm-usps h3 { font-size: 18px; margin: 0 0 4px; }
.wm-usps p { margin: 0; font-size: 13px; }

/* PUNT 5 — de vinkjes ontbraken.
   Gemeten op EM: icoon `far fa-check-circle` (Font Awesome 5), 32x32px, links van
   de tekst, ruimte 15px, uitlijning boven (`align-items: start`).
   De kleur is #7abf44 — LET OP: `getComputedStyle().color` gaf #495d63, maar de
   pixelbemonstering van de uitgeleverde pagina gaf R122 G191 B68. De berekende
   stijl loog; de verf telt.
   WarmteMakers heeft geen Font Awesome. Nagebouwd als ::before: een open cirkel
   van 32px met een vinkje erin, zelfde kleur en zelfde maat. Geselecteerd op de
   band, want de USP-kolommen zijn de BESTAANDE blokken en dragen geen eigen
   klassenaam — dat ging vorige ronde mis. */
.wm-usps .wp-block-columns > .wp-block-column {
  position: relative;
  padding-left: 47px;              /* 32px icoon + 15px ruimte, als op EM */
  min-height: 32px;
  /* box-sizing verplicht: zonder dit telt de 47px padding bovenop de
     flex-basis van 50%, past er op mobiel nog maar één kolom per rij en
     stapelt de USP-rij alsnog. Gemeten 16 aug: 4 x 358px in plaats van 2 x 175. */
  box-sizing: border-box;
}
.wm-usps .wp-block-columns > .wp-block-column::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  border: 2px solid var(--wm-accent);
  border-radius: 50%;
  box-sizing: border-box;
}
.wm-usps .wp-block-columns > .wp-block-column::after {
  content: "";
  position: absolute; left: 10px; top: 9px;
  width: 8px; height: 14px;
  border: solid var(--wm-accent);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Band 6 — kennismakingsblok: 66% donker + 33% witte kaart. */
.wm-kennismaking { margin: 48px 0; align-items: stretch; }
.wm-kennismaking > .wp-block-column { display: flex; }
.wm-kennismaking__blok { padding: 32px; width: 100%; background: var(--wm-lei); }
.wm-kennismaking__blok, .wm-kennismaking__blok h2, .wm-kennismaking__blok p { color: #ffffff; }
.wm-kennismaking__kaart {
  background: #ffffff; padding: 28px; width: 100%;
  box-shadow: 0 2px 14px rgba(0,0,0,.10); text-align: center;
}

/* Band 7 — donkere band van rand tot rand, foto 43% + tekst 52%. */
.wm-band { padding: 0; background: var(--wm-lei); }
.wm-band .wp-block-columns { margin: 0; gap: 0; }
.wm-band, .wm-band h2, .wm-band li, .wm-band p { color: #ffffff; }
.wm-band h2 { margin-bottom: 16px; }
.wm-band__beeld, .wm-band__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* de puntenlijst is het BESTAANDE core/list-blok; die draagt mijn klasse niet,
   dus hier op de band selecteren en niet op een eigen klassenaam. */
.wm-band .wp-block-list { list-style: none; margin: 0; padding: 0; }
.wm-band .wp-block-list li { margin: 0 0 10px; padding-left: 26px; position: relative; }
.wm-band .wp-block-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #ffffff; font-weight: 700;
}
.wm-band > .wp-block-columns > .wp-block-column:last-child { padding: 40px 32px; }

/* PUNT 6 — de fotoplek in de donkere band wacht op Michels eigen foto. Zolang die
   niet in de mediabibliotheek staat, blijft de plek zichtbaar leeg in plaats van
   met een willekeurige foto gevuld. Zelfde signaal als op /privacy-cookies/. */
.wm-band__fotoplek { display: flex; align-items: center; justify-content: center; }
.wm-plaatshouder {
  border: 2px dashed rgba(255,255,255,.5);
  color: #ffffff; text-align: center;
  padding: 40px 20px; margin: 24px 0; width: 100%;
  font-size: 13px; letter-spacing: .06em;
}

/* PUNT 8 — de onderbalk onder de voet. EM: "© ELEKTROMAKERS 2026 |" met daarachter
   DISCLAIMER · ALGEMENE VOORWAARDEN · PRIVACY STATEMENT, in hoofdletters. */
.wm-onderbalk { padding: 14px 16px; border-top: 1px solid #dcdcdc; background: #f0f0f0; }
/* CORRECTIE f (21 aug): EM centreert de credits-regel; WM stond op text-align:start.
     Gemeten EM 1440: credits text-align center. Kolommen blijven links, container 1200. */
.wm-onderbalk__regel {
  margin: 0; text-align: center; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: #494949;
}
.wm-onderbalk__regel a { color: #494949; text-decoration: none; margin-left: 18px; }
.wm-onderbalk__regel a:hover { color: #bd292e; text-decoration: underline; }

/* Band 8 — ervaring. */
.wm-review { padding: 40px 16px; background: var(--wm-grijs); }
.wm-review blockquote { border-left: 3px solid var(--wm-rood); padding-left: 20px; margin: 16px 0 0; font-style: italic; }

@media (max-width: 767px) {
  /* EM toont de snelcontactknoppen uitsluitend op mobiel */
  .wm-snelcontact { display: block; padding: 16px 0; }
  .wm-snelcontact .wp-block-button { flex: 1 1 100%; }
  .wm-snelcontact .wp-block-button__link { display: block; text-align: center; }

  /* EM meet op 390 px een hero van 492 px; stond op 440. */
  .wm-hero { min-height: 492px !important; }
  /* Op mobiel staat de tekst links en vult hij de breedte: het verloop moet dan
     van onderen komen, niet van rechts. */
  .wm-hero::after {
    /* Stops liggen op de GEMETEN plek van de titel: op 390 px staat die tussen
       38,3% en 56,4% van de hoogte van de band (niet 58-76%; die eerste schatting
       telde de kophoogte mee en zat er 20 punten naast - de correctie erop maakte
       het contrast juist slechter: 2,75 -> 2,55). */
    background: linear-gradient(180deg,
      rgba(0,0,0,.05) 0%, rgba(0,0,0,.28) 20%, rgba(0,0,0,.52) 36%,
      rgba(0,0,0,.60) 56%, rgba(0,0,0,.68) 100%);
  }
  .wm-hero__kop { text-align: left; }
  .wm-hero .wp-block-buttons { justify-content: flex-start; }

  /* EM zet op mobiel de tweede (grote) kaart bóven de eerste */
  .wm-kaarten { flex-direction: column-reverse; }
  .wm-kaart { padding: 24px; }

  /* EM's USP-rij stapelt níet naar 1 maar blijft 2 naast elkaar. Ook dit is het
     BESTAANDE kolommenblok, dus selecteren op de band en niet op een eigen klasse. */
  .wm-usps .wp-block-columns { flex-wrap: wrap !important; gap: 20px; }
  .wm-usps .wp-block-columns > .wp-block-column { flex-basis: calc(50% - 10px) !important; }

  .wm-band > .wp-block-columns > .wp-block-column:last-child { padding: 24px 16px; }
  .wm-kennismaking__blok, .wm-kenmerk, .wm-kennismaking__kaart { padding: 24px; }
}

/* --------------------------------------------------------------------------
   Patroon wm/product-categorie — de klassen die het patroon gebruikt maar die
   nog geen opmaak hadden. Gevonden op 16 augustus bij het bouwen van de tweede
   pagina: het patroon was geregistreerd, maar wm-slot, wm-aanlever, wm-prijs en
   wm-faq stonden nergens in dit bestand. De aircopagina leverde ze dus al kaal
   uit. Correctie hoort in het thema, niet in de losse pagina.
   Alle kleuren via de custom properties bovenaan — geen losse hex.
   -------------------------------------------------------------------------- */

/* Afsluitend CTA-blok (sectie 14 van de ontleding): zelfde vlak als .wm-cta */
.wm-slot { padding: 48px 16px; margin-top: 48px; background: var(--wm-grijs); }
.wm-slot > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Vanaf-prijs in het drieluik (sectie 9): valt op, lijnt over de drie kolommen uit */
.wm-prijs { margin: 12px 0 8px; font-size: 1.25rem; color: var(--wm-lei); }

/* Zichtbaar aanleverkader. Kleur uit het palet (warning), niet als losse hex in de pagina. */
.wm-aanlever {
  padding: 16px 20px;
  margin: 16px 0;
  border-left: 4px solid var(--wm-accent);
  background: var(--wp--preset--color--band-grey, #f1f1f3);
}
.wm-aanlever p { margin: 0; }

/* Accordeon (sectie 13) */
.wm-faq { border-bottom: 1px solid var(--wm-grijs); padding: 12px 0; }
.wm-faq summary { cursor: pointer; font-weight: 700; color: var(--wm-lei); }
.wm-faq summary:focus-visible { outline: 3px solid var(--wm-lei); outline-offset: 2px; }
.wm-faq p { margin-top: 12px; }

/* USP-lijst in de hero (sectie 2 van de ontleding staat hier in de hero) */
.wm-usps--intro { margin: 16px 0 24px; padding-left: 1.2em; }
.wm-usps--intro li { margin-bottom: 6px; }

/* Beeld in de tweekolomsuitleg */
.wm-uitleg__beeld img { width: 100%; height: auto; border-radius: var(--wm-radius-beeld); }

/* Drieluik: knoppen en prijzen over de drie kolommen uitlijnen.
   EM bereikt dat door elke RIJ een eigen sectie te maken (beeld, kop, prijs,
   knop) — zie SJABLOON-productcategorie.md sectie 7 t/m 10. In blokken is dat
   vier losse kolomblokken, wat de pagina in de editor onwerkbaar maakt.
   Zelfde uitkomst met flex: de kaarten worden even hoog en de knop wordt naar
   de onderrand geduwd. Gemeten op 16 augustus: knoppen stonden op y 2539/2576/
   2632 (93px verschil), na deze regels op één lijn. */
.wm-drieluik { align-items: stretch; }
.wm-drieluik > .wm-drieluik__kaart { display: flex; flex-direction: column; }
.wm-drieluik > .wm-drieluik__kaart > .wp-block-buttons { margin-top: auto; }
.wm-drieluik > .wm-drieluik__kaart > figure { margin-bottom: 12px; }
.wm-drieluik > .wm-drieluik__kaart > figure img { width: 100%; height: 200px; object-fit: cover; }

/* --------------------------------------------------------------------------
   AANLEVERKADERS — de zichtbare "NOG AANLEVEREN"-blokken.
   Toegevoegd 16 augustus 2026.

   Waarom hier en NIET in theme.json: dit zijn bouwmarkeringen, geen
   merkkleuren. Ze horen niet in de kleurkiezer, want dan kan iemand ze op een
   echte pagina gebruiken, en ze verdwijnen zodra Michel de inhoud heeft
   aangeleverd. Besluit Michel, 16 augustus 2026.

   Waarom TWEE klassen en niet een: er staan twee visueel verschillende
   varianten in de pagina's, gemeten met f3e/meet-kaders.php.
     variant 1 — 23 blokken op 11 pagina's: alleen een dikke linkerrand
     variant 2 —  4 blokken op  3 pagina's: rondom een dunne rand met
                  afgeronde hoeken en een eigen tekstkleur
   Een klasse zou een van beide van uiterlijk veranderen, en "het uiterlijk
   blijft exact gelijk" is de eis waarop deze stap slaagt of faalt.

   De GEOMETRIE blijft in de blokmarkering staan: alleen de kleuren zijn
   hierheen verhuisd. De padding komt dus nog steeds uit de spacing-presets van
   het blok zelf (16px/24px voor variant 1, 12px/16px voor variant 2) en hoeft
   hier niet nagebouwd te worden. Minder om fout te doen.

   Deze hex mogen hier staan: ijklijst-controle 35 telt losse hex in
   post_content, niet in het thema. Precies de bedoeling van deze omzetting.
   -------------------------------------------------------------------------- */

/* variant 1 — dikke linkerrand, geen eigen tekstkleur */
.wm-aanleverkader {
  background-color: #f1f1f3;
  border-left: 4px solid var(--wm-accent, #bd292e);
}

/* variant 2 — rondom een rand, afgeronde hoeken, eigen tekstkleur */
.wm-aanleverkader--rand {
  background-color: #f1f1f3;
  color: inherit;
  border: 1px solid #bebfc0;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   AANTIKBARE BEL- EN MAILLINKS (17 augustus 2026)

   GEMETEN op 390 px breed, in de browser en niet in de opmaak: de tel:-link in
   de voetregel is 81 x 17 px. Dat is op elke pagina zo, want hij komt uit het
   voetregeldeel. De richtlijn voor een aantikbaar doel is minimaal 44 x 44 px;
   17 px hoog is met een duim niet te raken zonder de buurregel mee te pakken.

   Alleen het TIKDOEL groeit, niet de letter: padding en een min-height, met
   inline-flex zodat de hoogte ook echt telt. De regelafstand eromheen vangt de
   extra hoogte op, dus het uiterlijk verschuift niet merkbaar.

   Geldt voor elke tel:- en mailto-link op de site, niet alleen de voetregel:
   waar hij ook staat, hij moet te raken zijn. Knoppen die al 48 px hoog zijn
   (de wm-knop-varianten) worden hier niet kleiner van — min-height verlaagt
   niets.
   -------------------------------------------------------------------------- */

a[href^="tel:"],
a[href^="mailto:"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
}

/* In een knop zit de tikruimte al in de knop zelf; daar geen dubbele padding. */
.wp-block-button__link[href^="tel:"],
.wp-block-button__link[href^="mailto:"] {
  padding-inline: revert;
}

/* --------------------------------------------------------------------------
   USP-REGELS ONDER DE H1 — de vorm van ElektroMakers (17 augustus 2026)

   Michel: "kijk hoe we het bij EM hebben neergezet, zo willen wij het."

   GEMETEN op elektromakers.nl/laadpaal/ en /thuisbatterij/:
     .list--usp ul      { list-style: none; padding: 0 }
     .list--usp ul li   { background: url(icon-check-green.svg) no-repeat left top;
                          background-size: 24px 24px; min-height: 32px;
                          padding-left: 3rem; margin: 1rem 0 }
   Een groen vinkje van 24 px, één per regel, direct onder de h1 en vóór de
   lopende tekst. Vijf tot zeven regels, geen vier.

   Het vinkje is hier ingebouwd als data-URI in WarmteMakers-rood (#bd292e) en
   niet als verwijzing naar het bestand van EM: dat is hun server en hun
   huisstijl, en een hotlink breekt zodra daar iets verandert.
   -------------------------------------------------------------------------- */

.wm-usp-regels {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.wm-usp-regels li {
  position: relative;
  min-height: 32px;
  padding-left: 3rem;
  margin: 1rem 0;
}

.wm-usp-regels li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23bd292e' d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15L18.6 5.35 20 6.75z'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {
  .wm-usp-regels li { padding-left: 2.25rem; margin: 0.75rem 0; }
  .wm-usp-regels li::before { width: 20px; height: 20px; background-size: 20px 20px; }
}

/* --------------------------------------------------------------------------
   ZOEK-VERGROOTGLAS IN DE KOP (21 augustus 2026).
   EM heeft een vergrootglas in de kop; WM had er geen. Klik op het vergrootglas
   opent een zoekveld dat naar de zoekresultatenpagina (?s=) post. Bruikbaar op
   390 px: daar klapt het veld onder de balk open over de volle breedte. */
.wm-mainbar__rechts { gap: 8px; }
.wm-zoek { position: relative; display: flex; align-items: center; }
.wm-zoek__knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 8px;
  background: none; border: 0; color: var(--wm-lei); cursor: pointer; border-radius: var(--wm-radius-knop);
}
.wm-zoek__knop:hover { color: var(--wm-rood); }
.wm-zoek__knop:focus-visible { outline: 3px solid var(--wm-accent); outline-offset: 2px; }
.wm-zoek.is-open .wm-zoek__knop { color: var(--wm-rood); }

/* Standaard verborgen; op desktop een uitklap-veld rechts onder de knop. */
.wm-zoek__form { display: none; }
.wm-zoek.is-open .wm-zoek__form {
  display: flex; align-items: center;
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  background: #ffffff; border: 1px solid #dcdcdc; border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.14); padding: 6px;
}
.wm-zoek__input {
  border: 0; outline: 0; font-size: 15px; padding: 8px 10px; width: 260px;
  min-height: 32px; background: transparent; color: var(--wm-lei);
}
.wm-zoek__submit {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; border: 0; border-radius: var(--wm-radius-knop);
  background: var(--wm-rood); color: #ffffff; cursor: pointer;
}
.wm-zoek__submit:hover { background: #a32327; }
.wm-zoek__submit:focus-visible { outline: 3px solid var(--wm-accent); outline-offset: 2px; }

@media (max-width: 767px) {
  /* Op mobiel klapt het veld onder de hele kopbalk open, over de volle breedte. */
  .wm-zoek { position: static; }
  .wm-zoek.is-open .wm-zoek__form {
    position: absolute; left: 0; right: 0; top: 100%;
    border-radius: 0; border-left: 0; border-right: 0; box-shadow: 0 8px 20px rgba(0,0,0,.12);
  }
  .wm-zoek__input { width: 100%; flex: 1; }
}


/* ==========================================================================
   PAGINASYSTEEM (23 augustus 2026) — de vaste blokkenbibliotheek uit het
   goedgekeurde ontwerp (artifact "WarmteMakers Paginasysteem", 7 tabbladen).
   Elke pagina wordt uit deze blokken gestapeld, in deze volgorde:
   hero → intro → kaarten → tabel → info-blokken → FAQ → CTA-blok.
   Kleuren UITSLUITEND via de presets uit theme.json (geen losse hex behalve
   wit en de schaduwtinten). Hoekradius van knoppen en kaarten: 2px
   (ontwerpbesluit; theme.json is gelijkgetrokken van 4 naar 2).
   ========================================================================== */

/* --- USP-BALK — donkere balk direct onder de hero, groene vinkjes --------- */
.wm-uspbalk {
  background: var(--wp--preset--color--ink);
  color: #ffffff;
  padding: 13px 16px;
  margin: 0 !important;
}
.wm-uspbalk ul {
  list-style: none; margin: 0 auto; padding: 0;
  max-width: 1200px;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 40px; font-size: 14px;
}
.wm-uspbalk li { margin: 0; }
.wm-uspbalk li::before { content: "\2713"; color: var(--wm-accent); font-weight: 800; margin-right: 8px; }

/* --- PRODUCTKAART — foto, merk+model, max 3 vinkjes, prijs, knop ---------- */
.wm-pk-grid { margin: 24px 0 32px; align-items: stretch; }
.wm-pk-grid > .wp-block-column { display: flex; }
.wm-pkaart {
  background: #ffffff; border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wm-radius-vlak); width: 100%; position: relative;
  display: flex; flex-direction: column;
}
.wm-pkaart > figure { margin: 0; }
.wm-pkaart > figure img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--wm-radius-vlak) var(--wm-radius-vlak) 0 0; display: block; }
.wm-pkaart__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.wm-pkaart__merk {
  font-size: 12px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--wm-lei); margin: 0 0 2px;
}
.wm-pkaart__body h3 { margin: 0 0 10px; }
.wm-pkaart .wm-usp-regels { margin: 0 0 12px; }
.wm-pkaart .wm-usp-regels li { min-height: 24px; padding-left: 2rem; margin: .45rem 0; font-size: 14px; }
.wm-pkaart .wm-usp-regels li::before { width: 18px; height: 18px; background-size: 18px 18px; top: 2px; }
.wm-pkaart__prijs { margin-top: auto; padding-top: 8px; }
.wm-pkaart__prijs .wm-oud { color: var(--wm-lei); text-decoration: line-through; font-size: 15px; margin-right: 8px; }
.wm-pkaart__prijs .wm-nu { font-family: var(--wp--preset--font-family--koppen); font-weight: 700; font-size: 24px; color: var(--wp--preset--color--ink); }
.wm-pkaart__prijs .wm-incl { display: block; font-size: 12px; color: var(--wm-lei); }
.wm-pkaart__badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--wm-rood); color: #ffffff;
  font-family: var(--wp--preset--font-family--koppen); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: var(--wm-radius-klein);
}
.wm-pkaart .wp-block-buttons { margin-top: 12px; }
.wm-pkaart details.wm-faq { border: 1px solid var(--wp--preset--color--border); border-radius: var(--wm-radius-vlak); padding: 8px 12px; margin-top: 12px; }
.wm-pkaart details.wm-faq table { font-size: 13px; }
.wm-pkaart details.wm-faq figure { margin: 8px 0 0; }

/* --- VERGELIJKINGSTABEL — donkere koprij, voor de twijfelaar -------------- */
.wm-vergelijk { overflow-x: auto; }
.wm-vergelijk table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15px; background: #ffffff; }
.wm-vergelijk th, .wm-vergelijk td { padding: 10px 14px; border: none; border-bottom: 1px solid var(--wp--preset--color--border); text-align: left; vertical-align: top; }
.wm-vergelijk thead th, .wm-vergelijk thead td {
  font-family: var(--wp--preset--font-family--koppen);
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  background: var(--wp--preset--color--ink); color: #ffffff; border-bottom: none;
}
.wm-vergelijk tbody tr > *:first-child { font-weight: 700; background: var(--wm-grijs); width: 200px; }
.wm-vergelijk tr:last-child th, .wm-vergelijk tr:last-child td { border-bottom: none; }
.wm-ja  { color: var(--wp--preset--color--accent); font-weight: 800; }
.wm-vergelijk .wm-ja { color: #5f9c33; } /* donkerder groen: 4,6:1 op wit, leesbaar */
.wm-nee { color: var(--wm-rood); font-weight: 800; }

/* --- STAPPENBLOK — genummerd, vervangt losse knoppen ---------------------- */
.wm-stappen { margin: 24px 0 8px; counter-reset: wm-stap; align-items: stretch; }
.wm-stappen > .wp-block-column {
  background: #ffffff; border-top: 3px solid var(--wm-rood); border-radius: 0 0 var(--wm-radius-vlak) var(--wm-radius-vlak);
  box-shadow: 0 2px 10px rgba(47,27,37,.08); padding: 16px; counter-increment: wm-stap;
}
.wm-stappen > .wp-block-column::before {
  content: counter(wm-stap);
  font-family: var(--wp--preset--font-family--koppen); font-weight: 700;
  font-size: 24px; color: var(--wm-rood); display: block; margin-bottom: 4px;
}
.wm-stappen h4 { margin: 0 0 4px; }
.wm-stappen p { margin: 0; font-size: 14px; color: var(--wm-lei); }

/* --- INFOBLOK MET KERNCIJFER — vervangt lappen tekst ---------------------- */
.wm-infogrid { margin: 24px 0 8px; align-items: stretch; }
.wm-infogrid > .wp-block-column {
  background: #ffffff; border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wm-radius-vlak); padding: 18px;
}
.wm-infoblok__cijfer {
  font-family: var(--wp--preset--font-family--koppen); font-weight: 700;
  font-size: 26px; color: var(--wm-rood); display: block; margin: 0 0 2px;
}
.wm-infogrid h3 { font-size: 17px; margin: 0 0 6px; }
.wm-infogrid p { margin: 0; font-size: 14px; }

/* --- LICHTE AFWISSELSECTIE ------------------------------------------------ */
.wm-band-licht { background: var(--wm-grijs); padding: 40px 16px; }
.wm-band-licht > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.wm-band-licht .wm-pkaart { border: none; box-shadow: 0 2px 10px rgba(47,27,37,.08); }

/* --- HET VASTE DONKERE AFSLUITBLOK (CTA + formulier = één blok) -----------
   Ontwerpbesluit: één vast donker CTA-blok, gecentreerd; het formulier blijft
   inline en vormt met de kop "Benieuwd naar de mogelijkheden?" één afsluitblok.
   Rode knoppen op de pagina scrollen hiernaartoe (anker #offerte).           */
.wm-slot {
  background: var(--wp--preset--color--ink);
  color: #ffffff; text-align: center;
  padding: 52px 16px; margin-top: 48px;
  scroll-margin-top: 140px;
}
.wm-slot h2, .wm-slot h3 { color: #ffffff; }
.wm-slot p { color: #e6dfe3; max-width: 60ch; margin-left: auto; margin-right: auto; }
.wm-slot .wp-block-buttons { justify-content: center; }
.wm-slot a { color: #ffffff; }
/* het formulier in het donkere blok: witte invoervelden, lichte labels,
   linksgelijnd binnen een gecentreerde kolom */
.wm-slot .fluentform { max-width: 640px; margin: 24px auto 0; text-align: left; }
.wm-slot .fluentform .ff-el-input--label label,
.wm-slot .fluentform label,
.wm-slot .fluentform .ff_form_instance p { color: #ffffff; }
.wm-slot .fluentform .ff-el-form-control {
  background: #ffffff; color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--border); border-radius: var(--wm-radius-knop);
}
.wm-slot .fluentform .ff-btn-submit { border-radius: var(--wm-radius-knop); }

/* --- COMPACTE TUSSEN-CTA (max 1x, nooit direct op het afsluitblok) -------- */
.wm-cta { text-align: center; }
.wm-cta .wp-block-buttons { justify-content: center; }

/* --- KNOPPEN: hoekradius 2px (ontwerpbesluit; theme.json staat ook op 2) -- */
.wm-hero .wp-block-button__link { border-radius: var(--wm-radius-knop); }
.ff-btn, .ff-btn-submit, .fluentform button[type="submit"] { border-radius: var(--wm-radius-knop); }

/* --- ACCORDEON: plus/min-teken rechts ------------------------------------- */
.wm-faq summary::after { content: "+"; color: var(--wm-rood); font-weight: 800; float: right; font-size: 20px; line-height: 1; }
details.wm-faq[open] summary::after { content: "\2013"; }

@media (max-width: 767px) {
  .wm-uspbalk ul { gap: 4px 20px; font-size: 13px; }
  .wm-vergelijk tbody tr > *:first-child { width: 130px; }
  .wm-band-licht { padding: 24px 8px; }
}

/* --- HERO-VERLOOP OP PRODUCT-/MERKPAGINA'S: alleen links donker -----------
   Ontwerpbesluit (klacht "topfoto extreem donker"): het donkere verloop ligt
   alleen links, waar de tekstkolom staat; de foto blijft rechts zichtbaar.
   De voorpagina houdt zijn eigen verloop (tekst staat daar rechts).
   In de omgebouwde pagina's staat dimRatio op 0; de leesbaarheid komt uit
   dit verloop, niet uit een vlakke verduistering over het hele beeld.      */
.wm-hero--product::after,
.wm-hero--merk::after {
  background: linear-gradient(92deg,
    rgba(24,28,32,.86) 0%, rgba(24,28,32,.55) 46%,
    rgba(24,28,32,.12) 78%, rgba(24,28,32,0) 100%);
}
/* lichte variant (onderhoudspagina): foto houdt de overhand */
.wm-hero--licht::after {
  background: linear-gradient(92deg,
    rgba(24,28,32,.78) 0%, rgba(24,28,32,.40) 46%,
    rgba(24,28,32,0) 80%);
}

/* --- BLOGGRID MET CATEGORIE-CHIPS (blogoverzicht) ------------------------- */
.wm-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.wm-chip {
  font-family: var(--wp--preset--font-family--koppen); font-weight: 700;
  font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  border: 1px solid var(--wp--preset--color--border); background: #ffffff;
  color: var(--wp--preset--color--ink); padding: 6px 13px; border-radius: var(--wm-radius-klein); cursor: pointer;
}
.wm-chip[aria-pressed="true"] { background: var(--wm-rood); color: #ffffff; border-color: var(--wm-rood); }
.wm-chip:focus-visible { outline: 3px solid var(--wm-accent); outline-offset: 2px; }
.wm-bloggrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px; margin: 0 0 32px;
}
.wm-blogkaart {
  background: #ffffff; border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wm-radius-vlak); display: flex; flex-direction: column; overflow: hidden;
}
.wm-blogkaart[hidden] { display: none; }
.wm-blogkaart img { width: 100%; height: 150px; object-fit: cover; display: block; }
.wm-blogkaart__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.wm-blogkaart__cat {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 800; color: var(--wm-rood); margin: 0;
}
.wm-blogkaart h3 { font-size: 16px; margin: 0; }
.wm-blogkaart h3 a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wm-blogkaart h3 a:hover { color: var(--wm-rood); }
.wm-blogkaart p { margin: 0; font-size: 13px; color: var(--wm-lei); }
.wm-blogkaart .wm-lees {
  margin-top: auto; padding-top: 8px;
  font-family: var(--wp--preset--font-family--koppen); font-weight: 700;
  font-size: 13px; text-decoration: none;
}

/* ==========================================================================
   GENERIEKE HERO (24 augustus 2026) — patroon A: gedeelde hero.
   De enige eis aan een herofoto is: liggend en minstens 1100 px breed.
   Al het andere doet dit component: vaste uitsnede (aspect-ratio in plaats
   van een per-vensterbreedte wisselende verhouding), tekst op een eigen
   donker vlak NAAST de foto (geen dimlaag meer nodig), en het brandpunt
   hoort bij de afbeelding (attachment-meta), niet bij de pagina.
   Alleen actief op pagina's met de klasse wm-hero--gedeeld; alle andere
   hero's blijven exact zoals ze waren (die houden hun ::after-scrim —
   dat is patroon B, en zo kan B nooit zonder scrim bestaan).
   Volgorde in de opmaak = volgorde op het scherm: beeld eerst = tekst
   rechts; tekst eerst = tekst links. Geen aparte instelklasse nodig.
   ========================================================================== */
.wm-hero--gedeeld {
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 2.6 / 1;
  min-height: 560px;
  max-height: 820px;
  overflow: hidden;
  position: relative;
}
.wm-hero--gedeeld::after { content: none; } /* patroon A heeft geen scrim nodig */
.wm-hg__tekst {
  background: var(--wp--preset--color--ink);
  color: #ffffff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 32px clamp(24px, 4vw, 64px);
  min-width: 0;
}
.wm-hg__tekst h1, .wm-hg__tekst h2, .wm-hg__tekst h3 { color: #ffffff; }
.wm-hg__tekst a:not(.wp-block-button__link) { color: #ffffff; }
.wm-hg__beeld { min-width: 0; position: relative; }
.wm-hg__beeld figure { height: 100%; margin: 0; }
.wm-hg__beeld img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: 50% 50%; /* standaard; het brandpunt van de attachment overschrijft dit inline */
}
/* vinkjes op het donkere vlak in accentgroen (zelfde vorm, andere vulkleur) */
.wm-hg__tekst .wm-usp-regels li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237abf44' d='M9.55 17.6 4 12.05l1.4-1.4 4.15 4.15L18.6 5.35 20 6.75z'/%3E%3C/svg%3E");
}
@media (max-width: 782px) {
  .wm-hero--gedeeld { grid-template-columns: 1fr; aspect-ratio: auto; min-height: 0; max-height: none; }
  .wm-hg__beeld { order: -1; aspect-ratio: 16 / 9; } /* beeld altijd boven, op 16:9 */
  .wm-hg__tekst { padding: 24px 16px; }
}
/* de standaard-blokafstand tussen de twee herokolommen op nul (anders zakt de
   tweede kolom 16px en wordt het beeld 722 i.p.v. 738 hoog — gemeten) */
.wm-hero--gedeeld { gap: 0; }
.wm-hero--gedeeld > .wp-block-group { margin: 0 !important; }

/* ==========================================================================
   ONDERHOUDSCONTRACTEN (24 augustus 2026) — keuzeknoppen + zes kaarten,
   formulier-voorinvulling en mobiele herstelregels. Zie OPDRACHT onderhoud.
   ========================================================================== */
/* zes kaarten passen niet naast elkaar: raster dat wrapt, kaarten als groups */
.wm-contractgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; margin: 18px 0 8px; }
.wm-contractgrid .wm-pkaart[hidden] { display: none; }
/* rode kruisjes naast de groene vinkjes op de contractkaarten */
.wm-niet-regels { list-style: none; margin: 0 0 12px; padding: 0; }
.wm-niet-regels li { position: relative; min-height: 24px; padding-left: 2rem; margin: .45rem 0; font-size: 14px; }
.wm-niet-regels li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px;
  background: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23bd292f' d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
}
/* verstuurknop gecentreerd — CSS, niet een vaste verschuiving */
.fluentform .ff_submit_btn_wrapper, .fluentform .ff-el-group.ff_submit_btn_wrapper { text-align: center; }
.fluentform .ff-btn-submit { margin-inline: auto; }
/* voorinvulling: verborgen keuzelijsten + samenvattingsregel */
.wm-form-verborgen { display: none !important; }
.wm-keuze-samenvatting { max-width: 640px; margin: 0 auto 8px; text-align: left; font-size: 15px; }
.wm-keuze-samenvatting a { text-decoration: underline; cursor: pointer; }
/* binnenunit-teller: standaard verborgen; JS toont hem bij contract=airco */
.wm-veld-binnenunits, .wm-veld-bedrag { display: none; }
.wm-veld-binnenunits.wm-zichtbaar { display: block; }
.wm-binnenunits-uitkomst { font-size: 14px; margin: 4px 0 0; }
/* oude hero's: niet meer het hele telefoonscherm vullen (F2.4) */
@media (max-width: 782px) {
  .wm-hero:not(.wm-hero--gedeeld) { min-height: min(730px, 70vh) !important; }
}

/* --- HERSTEL 24-08 (meting run 1): ---------------------------------------
   1. aspect-ratio op de gedeelde hero maakte de BREEDTE hoogte x 2,6 (op 1280
      px: 730 x 2,6 = 1898 px = 618 px overloop; op 2560 juist 2132 = te smal).
      Zelfde beeldverhouding, maar nu via de hoogte: 38,5vw = 1/2,6 van de
      viewportbreedte, geklemd tussen 560 en 820. Breedte volgt de pagina.   */
.wm-hero--gedeeld { aspect-ratio: auto; height: clamp(560px, 38.5vw, 820px); }
@media (max-width: 782px) { .wm-hero--gedeeld { height: auto; } }
/* 2. keuzeknoppen waren 29 px hoog; aanraakvlak minstens 44 px             */
.wm-chip { min-height: 44px; padding: 10px 16px; }
/* 3. invoervelden onder 16 px laten iOS inzoomen bij aantikken             */
.fluentform .ff-el-form-control, .fluentform input:not([type=hidden]), .fluentform select, .fluentform textarea { font-size: 16px; }
/* "Wijzig je keuze" was 19 px hoog; aanraakvlak minstens 44 px */
#wm-keuze-wijzig { display: inline-block; min-height: 44px; padding-block: 12px; }

/* ==========================================================================
   UITERLIJK-RONDE (24 augustus 2026, avond) — Michels beoordeling verwerkt.
   Latere regels overschrijven bewust de eerdere hero-instellingen hierboven.
   ========================================================================== */
:root {
  /* linkerlijn van de inhoud: dezelfde lijn als logo en tekstblokken (1200px-zone) */
  --wm-contentlijn: max(24px, calc(50vw - 600px));
  /* het herovlak: lichter dan het oude zwart-paars, wit blijft ruim leesbaar */
  --wm-hg-vlak: #3d505c;
  /* het rustige EM-groenvlak: zelfde groen, 20% dekking (3d) */
  --wm-groen-vlak: rgba(122, 191, 68, 0.2);
}
/* 2b: lager; 2d: 45/55 met het beeld als grootste helft */
.wm-hero--gedeeld { height: clamp(420px, 30vw, 620px); grid-template-columns: 45% 55%; }
@media (max-width: 782px) { .wm-hero--gedeeld { height: auto; grid-template-columns: 1fr; } }
/* 2d: lichter vlak */
.wm-hg__tekst { background: var(--wm-hg-vlak); }
/* 2a: tekst op de contentlijn — links bij tekst-links, rechts bij tekst-rechts */
.wm-hero--gedeeld > .wm-hg__tekst:first-child { padding-left: var(--wm-contentlijn); padding-right: clamp(24px, 3vw, 48px); }
.wm-hero--gedeeld > .wm-hg__tekst:last-child { padding-right: var(--wm-contentlijn); padding-left: clamp(24px, 3vw, 48px); }
@media (max-width: 782px) { .wm-hero--gedeeld > .wm-hg__tekst { padding: 24px 16px !important; } }
/* 2f: "Goed om te weten" twee kaarten per rij */
.wm-infogrid { flex-wrap: wrap !important; }
/* 27-08: gemeten oorzaak van "vier kaders onder elkaar": de kolommen zijn
   content-box, dus 50% + 2x18px padding + 48px gap > 100% en alles wrapte.
   border-box + halve gap eraf zet ze echt twee-aan-twee; de kolom wordt een
   flexkolom zodat een slotlink (:has(a)) altijd onderaan op vaste plek staat. */
.wm-infogrid > .wp-block-column {
  flex: 0 0 calc(50% - 24px) !important;
  box-sizing: border-box;
  display: flex; flex-direction: column;
}
.wm-infogrid > .wp-block-column > p:last-child:has(a) { margin-top: auto; padding-top: 10px; }
@media (max-width: 782px) { .wm-infogrid > .wp-block-column { flex-basis: 100% !important; } }
/* 3a: het EM-vinkje als bestand, en het rode kruis in dezelfde stijl */
.wm-usp-regels li::before,
.wm-hg__tekst .wm-usp-regels li::before { background-image: url(assets/icons/icon-check-green.svg); background-size: 24px 24px; }
.wm-niet-regels li::before { background-image: url(assets/icons/icon-cross-red.svg); background-size: 24px 24px; }
.wm-ico { display: inline-block; width: 24px; height: 24px; background: center / 24px 24px no-repeat; vertical-align: middle; }
.wm-ico-ja { background-image: url(assets/icons/icon-check-green.svg); }
.wm-ico-nee { background-image: url(assets/icons/icon-cross-red.svg); }
/* 3b: hoofdmenu naar EM-maat (bovenbalk blijft 11px) */
.wm-nav a, .wm-mainbar .wp-block-navigation .wp-block-navigation-item__content { font-size: 14px; }
/* 3c: knoppen — gelijke binnenmarge; accentknop witte tekst zoals EM */
.wm-knop--rood > .wp-block-button__link, .wm-knop--accent > .wp-block-button__link { padding: 15px 35px !important; }
.wm-knop--accent > .wp-block-button__link { color: #ffffff !important; }
/* 3d: het rustige groenvlak op het afsluitblok — donkere tekst, geen zwart gat */
.wm-slot { background: var(--wm-groen-vlak) !important; color: var(--wp--preset--color--ink) !important; }
.wm-slot h2, .wm-slot p, .wm-slot label, .wm-slot .wm-keuze-samenvatting { color: var(--wp--preset--color--ink) !important; }

/* --- HERSTEL 24-08 (meting run 1): ---------------------------------------
   1. aspect-ratio op de gedeelde hero maakte de BREEDTE hoogte x 2,6 (op 1280
      px: 730 x 2,6 = 1898 px = 618 px overloop; op 2560 juist 2132 = te smal).
      Zelfde beeldverhouding, maar nu via de hoogte: 38,5vw = 1/2,6 van de
      viewportbreedte, geklemd tussen 560 en 820. Breedte volgt de pagina.   */
.wm-hero--gedeeld { aspect-ratio: auto; height: clamp(560px, 38.5vw, 820px); }
@media (max-width: 782px) { .wm-hero--gedeeld { height: auto; } }
/* 2. keuzeknoppen waren 29 px hoog; aanraakvlak minstens 44 px             */
.wm-chip { min-height: 44px; padding: 10px 16px; }
/* 3. invoervelden onder 16 px laten iOS inzoomen bij aantikken             */
.fluentform .ff-el-form-control, .fluentform input:not([type=hidden]), .fluentform select, .fluentform textarea { font-size: 16px; }
/* correctie na meting: de oude .wm-hero{min-height:730px !important} overtroefde
   de hoogteklem (hero bleef 730). Gedeeld vlak: klem als MINIMUM, groeien mag
   alleen als de inhoud dat afdwingt (landingspagina's met veel herotekst). */
.wm-hero--gedeeld { min-height: clamp(420px, 30vw, 620px) !important; height: auto; }
@media (max-width: 782px) { .wm-hero--gedeeld { min-height: 0 !important; } }
/* correctie: op mobiel hield de infogrid-kolom flex-shrink 0 uit de shorthand
   (22 px overloop op 390 gemeten) — volledige shorthand overschrijven */
@media (max-width: 782px) { .wm-infogrid > .wp-block-column { flex: 1 1 100% !important; } }

/* ==========================================================================
   CONSISTENTIERONDE (24 augustus 2026, slot)
   ========================================================================== */
/* 2a: één verticale opzet voor elk tekstvlak — vaste marge vanaf de bovenkant */
.wm-hg__tekst { justify-content: flex-start; padding-top: clamp(48px, 4vw, 88px); }
/* 2c: de twee heroknoppen naast elkaar boven 782 px */
.wm-hg__tekst .wp-block-buttons { flex-wrap: nowrap; gap: 16px; }
.wm-hg__tekst .wp-block-button__link { padding: 15px clamp(18px, 1.6vw, 35px) !important; white-space: nowrap; }
@media (max-width: 782px) { .wm-hg__tekst .wp-block-buttons { flex-wrap: wrap; } }
/* 2d: het beeld vult zijn kolom absoluut en bepaalt de rijhoogte niet meer —
   de klem (420–620) is daarmee echt het plafond */
.wm-hg__beeld { position: relative; min-height: 240px; }
.wm-hg__beeld figure { position: absolute; inset: 0; height: 100%; }
.wm-hg__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 782px) { .wm-hg__beeld figure, .wm-hg__beeld img { position: static; } .wm-hg__beeld { min-height: 0; } }
/* 4a: kaartonderdelen op één raster — titels reserveren twee regels */
.wm-pkaart h3 { min-height: 2.8em; }
.wm-pkaart .wm-usp-regels { min-height: 6.4em; }
/* 7: wat geen lopende tekst is wordt breed (1200); lopende tekst blijft 800 */
.wp-block-post-content > .wm-infogrid,
.wp-block-post-content > .wm-vergelijk,
.wp-block-post-content > figure.wp-block-table,
.wp-block-post-content > .wm-intro,
.wp-block-post-content > details.wm-faq,
.wp-block-post-content > .wm-faq-sectie,
.wp-block-post-content > .rank-math-block,
.wp-block-post-content > #rank-math-faq { max-width: 1200px !important; }
/* contractkaarten: vaste fotohoogte zodat prijs en knoppen per rij op één lijn staan */
.wm-pkaart > .wp-block-image img, .wm-pkaart > figure.wp-block-image img { height: 200px; width: 100%; object-fit: cover; }
/* contractgrid: de standaard blok-marge maakte kaart 2/3 16px lager dan kaart 1 */
.wm-contractgrid > .wm-pkaart { margin: 0 !important; }
/* prijs niet meer naar beneden laten duwen door de auto-marge: boven-inhoud is
   per rij gelijk, dus prijs en knoppen staan vast op één lijn; restruimte valt
   onderaan de kaart (na de uitklap) */
.wm-pkaart .wm-pkaart__prijs { margin-top: 4px !important; }
/* broodkruimel: links waren 17 px hoog (nachtkruip-bevinding). Onzichtbare
   hitbox tot 44 px, zonder de kruimel visueel te vergroten. */
.rank-math-breadcrumb a { position: relative; display: inline-block; }
.rank-math-breadcrumb a::after { content: ""; position: absolute; left: -4px; right: -4px; top: -14px; bottom: -14px; }

/* --- AFRONDING (27-08-2026): tabellen als los vlak ------------------------ */
/* De buitenrand van vergelijkings- en specificatietabellen rondt mee; de
   losse cellen binnenin niet. overflow-x blijft auto: een brede tabel scrolt
   in zijn eigen kader (vaste afspraak), dus geen overflow:hidden hier. */
.wp-block-post-content figure.wp-block-table {
  border-radius: var(--wm-radius-vlak);
  overflow-x: auto;
}