/* ==========================================================================
   Herbwise Blocks
   Kleurvariabelen (--hw-*) worden per seizoen inline toegevoegd door de
   plugin (includes/season.php). Deze stylesheet verwijst er alleen naar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font: KyivType Serif (variabel font, wght + CONT as)
   Plaats de fontbestanden zelf in assets/fonts/ (zie README).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "KyivType Serif";
  src: url("../fonts/KyivTypeSerif-VarGX.woff2") format("woff2-variations"),
       url("../fonts/KyivTypeSerif-VarGX.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --hw-font: "KyivType Serif", Georgia, "Times New Roman", serif;
  --hw-container: 1120px; /* maximale breedte van de inhoud, exclusief zijpadding */
  --hw-sectie-padding: 80px;
  --hw-radius-kaart: 16px 4px 16px 32px;      /* hero-kaart */
  --hw-radius-kaart-groot: 32px 8px 32px 56px; /* M9-kaarten */
  --hw-radius-band: 24px 8px 24px 56px;        /* M8-band */
  --hw-radius-knop: 4px 4px 4px 16px;          /* gevulde knop */
  --hw-nav-hoogte: 112px;
}

/* --------------------------------------------------------------------------
   Typografie (tekststijlen uit de Design Library, desktop-waarden;
   mobiele waarden volgen de Typography/Primitives "Mobile"-mode)
   -------------------------------------------------------------------------- */
.hw-display-accent,
.hw-display-1,
.hw-display-2,
.hw-h1,
.hw-h2,
.hw-h4,
.hw-h3,
.hw-eyebrow,
.hw-body-accent,
.hw-body-lg,
.hw-body,
.hw-body-sm,
.hw-label,
.hw-label-sm,
.hw-caption {
  font-family: var(--hw-font);
  margin: 0;
  font-variation-settings: "CONT" 500;
}

/* Koppen breken alleen af als een enkel woord breder is dan de regel
   (noodrem), zonder automatische woordafbreking. De max-width zorgt dat
   een kop nooit breder wordt dan zijn container (in flex-lay-outs zou
   hij anders meegroeien met het langste woord en uit beeld lopen,
   waardoor de noodrem nooit afgaat). */
.hw-display-accent, .hw-display-1, .hw-display-2,
.hw-h1, .hw-h2, .hw-h3, .hw-h4 { overflow-wrap: break-word; max-width: 100%; }

/* Subtiele verschijn-animatie: front.js zet hw-verschijn op kaarten en
   panelen (trapsgewijs via de delay-variabele) en hw-verschenen zodra
   het element in beeld scrolt. Zonder JavaScript of met verminderde
   beweging blijft alles gewoon direct zichtbaar. */
.hw-verschijn {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--hw-verschijn-delay, 0s);
}
.hw-verschijn.hw-verschenen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .hw-verschijn { opacity: 1; transform: none; transition: none; }
}

/* Eenvoudige opsomming in huisstijl (regels die met "- " beginnen) */
.hw-lijst { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hw-lijst:last-child { margin-bottom: 0; }
.hw-lijst li { position: relative; padding-left: 20px; }
.hw-lijst li::before {
  content: "\00B7";
  position: absolute;
  left: 0;
  top: -3px;
  font-family: var(--hw-font);
  font-size: 24px;
  font-weight: 840;
  line-height: 1;
  color: currentColor;
}
.hw-display-accent { font-size: 36px; font-weight: 840; line-height: 1.08; letter-spacing: .12em; text-transform: uppercase; }
.hw-display-1      { font-size: 36px; font-weight: 100; line-height: 1.08; letter-spacing: .12em; text-transform: uppercase; font-variation-settings: "CONT" 0; }
.hw-display-2      { font-size: 24px; font-weight: 200; line-height: 1.08; letter-spacing: .10em; text-transform: uppercase; font-variation-settings: "CONT" 0; }
.hw-h1             { font-size: 20px; font-weight: 700; line-height: 1.26; letter-spacing: .20em; text-transform: uppercase; }
.hw-h2             { font-size: 18px; font-weight: 700; line-height: 1.22; letter-spacing: .20em; text-transform: uppercase; }
.hw-h3             { font-size: 18px; font-weight: 500; line-height: 1.26; letter-spacing: .18em; text-transform: uppercase; }
.hw-h4             { font-size: 16px; font-weight: 350; line-height: 1.30; letter-spacing: .18em; text-transform: uppercase; }
.hw-eyebrow        { font-size: 14px; font-weight: 350; line-height: 1.5;  letter-spacing: .16em; text-transform: uppercase; }
.hw-body-accent    { font-size: 24px; font-weight: 700; line-height: 28px; letter-spacing: .02em; }
.hw-body-lg        { font-size: 18px; font-weight: 350; line-height: 28px; letter-spacing: .02em; }
.hw-body           { font-size: 16px; font-weight: 500; line-height: 26px; letter-spacing: .02em; }
.hw-body-sm        { font-size: 14px; font-weight: 500; line-height: 22px; letter-spacing: .04em; }
.hw-label          { font-size: 14px; font-weight: 700; line-height: 1.4;  letter-spacing: .10em; }
.hw-label-sm       { font-size: 12px; font-weight: 700; line-height: 1.4;  letter-spacing: .10em; }
.hw-caption        { font-size: 11px; font-weight: 200; line-height: 1.5;  letter-spacing: .02em; }

@media (max-width: 781px) {
  :root {
    --hw-sectie-padding: 40px;
    /* Alle hoekafrondingen op mobiel de helft minder heftig */
    --hw-radius-kaart: 8px 2px 8px 16px;
    --hw-radius-kaart-groot: 16px 4px 16px 28px;
    --hw-radius-band: 12px 4px 12px 28px;
    --hw-radius-knop: 2px 2px 2px 8px;
  }
  .hw-display-accent { font-size: 28px; letter-spacing: .10em; }
  .hw-display-1      { font-size: 28px; letter-spacing: .10em; }
  .hw-display-2      { font-size: 20px; letter-spacing: .08em; }
  .hw-h1             { font-size: 17px; letter-spacing: .16em; }
  .hw-h2             { font-size: 16px; letter-spacing: .16em; }
  .hw-h3             { font-size: 16px; letter-spacing: .16em; }
  .hw-h4             { font-size: 14px; letter-spacing: .16em; }
  .hw-eyebrow        { font-size: 12px; letter-spacing: .14em; }
  .hw-body-accent    { font-size: 20px; line-height: 26px; }
  .hw-body-lg        { font-size: 16px; line-height: 26px; }
  .hw-body           { font-size: 15px; line-height: 24px; }
  .hw-body-sm        { font-size: 13px; line-height: 20px; }
  .hw-label          { font-size: 13px; letter-spacing: .06em; }
  .hw-label-sm       { font-size: 11px; letter-spacing: .06em; }
  .hw-caption        { font-size: 10px; }
  .hw-btn--outline   { border-radius: 12px; }
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */
.hw-container {
  max-width: calc(var(--hw-container) + 2 * var(--hw-sectie-padding));
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: var(--hw-sectie-padding);
}

/* Volle breedte: de componenten breken uit de content-container van het
   theme en lopen door tot de zijkanten van het scherm. De margin-reset
   haalt de tussenruimte weg die themes tussen blokken zetten. */
.hw-nav.hw-nav,
.hw-hero.hw-hero,
.hw-m2.hw-m2, .hw-m3.hw-m3, .hw-m4.hw-m4, .hw-m5.hw-m5, .hw-m6.hw-m6, .hw-m7.hw-m7,
.hw-m8.hw-m8, .hw-m9.hw-m9, .hw-m10.hw-m10, .hw-m11.hw-m11, .hw-m13.hw-m13, .hw-m17.hw-m17, .hw-m20.hw-m20, .hw-m21.hw-m21,
.hw-footer.hw-footer {
  width: 100vw;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  box-sizing: border-box;
}

/* 100vw is inclusief scrollbalk; clip voorkomt een horizontale scrollbalk
   zonder position:sticky te breken (dat zou met overflow:hidden wel gebeuren). */
body { overflow-x: clip; }

/* Ruimte die het theme zelf om de template-onderdelen zet (block themes:
   blockGap tussen header/inhoud/footer en padding op de site-wrapper).
   Aanname op basis van de standaard block-theme structuur; controleer dit
   op de site en meld het als er ergens nog ruimte overblijft. */
.wp-site-blocks { padding-block: 0 !important; }
.wp-site-blocks > * { margin-block: 0 !important; }
.wp-site-blocks .wp-block-post-content,
.wp-site-blocks main { margin-block: 0 !important; padding-block: 0 !important; }
.wp-block-template-part > .hw-nav,
.wp-block-template-part > .hw-footer { margin-block: 0 !important; }

.hw-svg { display: block; width: 100%; height: auto; }

.hw-nav a,
.hw-footer a,
.hw-m9kaart__link { text-decoration: none; }

:where(.hw-nav, .hw-footer, .hw-hero, .hw-m2, .hw-m3, .hw-m5, .hw-m6, .hw-m7, .hw-m8, .hw-m9, .hw-m10) img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Knoppen */
.hw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--hw-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .10em;
  font-variation-settings: "CONT" 500;
  background: var(--hw-accent);
  color: var(--hw-on-accent);
  border: 0;
  border-radius: var(--hw-radius-knop);
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s ease, background-color .2s ease, color .2s ease;
}
.hw-btn:hover,
.hw-btn:focus-visible { filter: brightness(1.08); color: var(--hw-on-accent); }
.hw-btn:focus-visible { outline: 2px solid var(--hw-darkest); outline-offset: 2px; }

.hw-btn--outline {
  background: transparent;
  border: 1px solid var(--hw-accent);
  border-radius: 20px;
  color: var(--hw-accent-variant);
}
.hw-btn--outline:hover,
.hw-btn--outline:focus-visible {
  background: var(--hw-accent);
  color: var(--hw-on-accent);
  filter: none;
}

/* --------------------------------------------------------------------------
   M000 Top nav
   -------------------------------------------------------------------------- */
.hw-nav {
  background: var(--hw-achtergrond-zacht);
  position: relative;
  z-index: 50;
}
/* Sticky gedrag (aangestuurd door front.js): verdwijnt bij omlaag
   scrollen, komt direct terug bij omhoog scrollen. */
.hw-nav--zweeft {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 !important;
  transition: transform .25s ease;
}
.hw-nav--verborgen { transform: translateY(-100%); }
/* Eerste omschakeling naar zwevend: zonder overgang, tegen terugspring-flits */
.hw-nav--direct { transition: none !important; }
body.hw-nav-zweeft { padding-top: var(--hw-nav-hoogte, 112px); }

/* Submenu: container niet klikbaar, subitems verschijnen bij hover of
   toetsenbordfocus. */
.hw-nav__lijst li { position: relative; }
.hw-nav__lijst li.menu-item-has-children > a { cursor: default; }
.hw-nav__lijst li.menu-item-has-children > a::after { content: " \25BE"; font-size: 10px; }
.hw-nav__lijst .sub-menu {
  list-style: none;
  margin: 0;
  padding: 16px 20px;
  display: none;
  position: absolute;
  top: 100%;
  left: -20px;
  min-width: 200px;
  flex-direction: column;
  gap: 12px;
  background: var(--hw-achtergrond-zacht);
  border-radius: 8px 24px 24px 24px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  z-index: 60;
}
.hw-nav__lijst li:hover > .sub-menu,
.hw-nav__lijst li:focus-within > .sub-menu { display: flex; }
.hw-nav__inner {
  max-width: calc(var(--hw-container) + 2 * var(--hw-sectie-padding));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 24px var(--hw-sectie-padding);
  min-height: var(--hw-nav-hoogte);
  box-sizing: border-box;
}
.hw-nav__logo { display: block; flex-shrink: 0; }
.hw-nav__logo img,
.hw-nav__logoimg,
.hw-nav .custom-logo-link img,
.hw-nav img.custom-logo {
  height: 32px !important;
  width: auto !important;
  max-width: none;
}
.hw-nav__logokleur { display: block; }
.hw-nav__logo .hw-svg,
.hw-nav__logosvg { height: 32px; width: auto; }
.hw-nav__logotekst { font-family: var(--hw-font); font-weight: 840; font-size: 20px; letter-spacing: .1em; color: var(--hw-primair); text-transform: uppercase; }
.hw-nav__menu { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 40px; }
.hw-nav__lijst { display: flex; gap: 40px; list-style: none; margin: 0; padding: 0; }
.hw-nav__lijst a,
.hw-nav__insta {
  font-family: var(--hw-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--hw-primair);
  font-variation-settings: "CONT" 500;
}
.hw-nav__lijst a:hover,
.hw-nav__lijst a:focus-visible,
.hw-nav__insta:hover,
.hw-nav__insta:focus-visible { color: var(--hw-accent); }
.hw-nav__insta { display: inline-flex; align-items: center; gap: 6px; }
.hw-nav__toggle { display: none; }

@media (max-width: 781px) {
  .hw-nav__inner { padding: 16px var(--hw-sectie-padding); gap: 16px; min-height: 0; justify-content: space-between; }
  .hw-nav__logo img, .hw-nav__logoimg { height: 40px; }
  .hw-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 8px;
    font-family: var(--hw-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--hw-primair);
    cursor: pointer;
  }
  .hw-nav__toggle-icoon { display: inline-flex; flex-direction: column; gap: 4px; }
  .hw-nav__toggle-icoon span { width: 18px; height: 2px; background: currentColor; display: block; }
  .hw-nav__menu {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    background: var(--hw-achtergrond-zacht);
    padding: 24px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .hw-nav.is-open .hw-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity .2s ease, transform .2s ease;
  }
  .hw-nav__lijst { flex-direction: column; gap: 16px; }
  /* Logo kleiner op mobiel; navhoogte blijft gelijk voor meer lucht */
  .hw-nav__logo img,
  .hw-nav__logoimg,
  .hw-nav .custom-logo-link img,
  .hw-nav img.custom-logo { height: 28px !important; }
  .hw-nav__logo .hw-svg,
  .hw-nav__logosvg { height: 28px; }
  .hw-nav__inner { min-height: 72px; }
  /* Insta-link losser van de menu-items, met een subtiele divider */
  .hw-nav__insta {
    width: 100%;
    margin-top: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--hw-achtergrond);
  }
  /* Groepstitels (niet klikbaar) in Caption/Default, zonder pijltje */
  .hw-nav__lijst li.menu-item-has-children > a {
    font-size: 11px;
    font-weight: 200;
    line-height: 1.5;
    letter-spacing: .02em;
  }
  .hw-nav__lijst li.menu-item-has-children > a::after { content: none; }
  /* Submenu op mobiel: direct zichtbaar, ingesprongen */
  .hw-nav__lijst .sub-menu {
    display: flex !important;
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 8px 0 0 16px;
    min-width: 0;
  }
}

/* --------------------------------------------------------------------------
   M1 Hero (met parallax-achtergrond)
   -------------------------------------------------------------------------- */
.hw-hero {
  position: relative;
  min-height: calc(100svh - var(--hw-nav-hoogte, 112px));
  display: flex;
  overflow: hidden;
  isolation: isolate;
}
.hw-hero--hoog { min-height: 100svh; }
.hw-hero__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 64px;
  padding-block: var(--hw-sectie-padding);
}
.hw-hero__bg {
  position: absolute;
  inset: -18% 0;
  background-size: cover;
  background-position: center;
  z-index: -1;
  will-change: transform;
}
.hw-hero__kaart {
  background: var(--hw-achtergrond-zacht);
  border-radius: 32px 8px 32px 56px;
  padding: 48px 64px;
  max-width: 618px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.hw-hero__kaart--rechts {
  align-self: flex-end;
  border-radius: 8px 32px 56px 32px;
}
.hw-hero__zegel { width: 150px; }
.hw-hero__titel { color: var(--hw-darkest); }
.hw-hero__tekst { color: var(--hw-text); }
.hw-hero__tekst p { margin: 0 0 1em; } .hw-hero__tekst p:last-child { margin-bottom: 0; }

@media (max-width: 781px) {
  .hw-hero__inner { gap: 32px; }
  .hw-hero__kaart { padding: 24px; gap: 24px; border-radius: 16px 4px 16px 28px; }
  .hw-hero__kaart--rechts { border-radius: 4px 16px 28px 16px; }
  .hw-hero__zegel { width: 110px; }
}

/* --------------------------------------------------------------------------
   M2 Half Image
   -------------------------------------------------------------------------- */
.hw-m2 { background: var(--hw-achtergrond); padding-block: var(--hw-sectie-padding); }
.hw-m2__inner { display: flex; align-items: stretch; }
.hw-m2__beeldvak { display: contents; }
/* De beeldkolom is 56px hoger dan de afbeelding (zoals in Figma), zodat
   het contentblok net iets verder kan doorscrollen dan de afbeelding. */
.hw-m2__beeld { margin: 0 0 56px; flex: 0 0 45%; position: relative; z-index: 1; overflow: hidden; border-radius: 32px 8px 56px 32px; }
.hw-m2--beeld-rechts .hw-m2__beeld { border-radius: 8px 32px 32px 56px; }
.hw-m2__img { border-radius: 32px 8px 56px 32px; object-fit: cover; width: 100%; aspect-ratio: 3 / 4; }
.hw-m2--beeld-rechts .hw-m2__img { border-radius: 8px 32px 32px 56px; }
/* Contentblok: zelfde kleur als de sectie (inline gezet door de plugin),
   overlapt de afbeelding altijd, en scrolt sticky mee tot de onderkant
   van het component. */
.hw-m2__panel {
  flex: 1;
  position: sticky;
  top: calc(var(--hw-nav-hoogte, 112px) + 24px);
  align-self: flex-start;
  margin-top: 56px;
  background: var(--hw-achtergrond);
  border-radius: 8px 32px 32px 32px;
  padding: 56px 64px;
  margin-left: -10%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.hw-m2--beeld-rechts .hw-m2__inner { flex-direction: row-reverse; }
.hw-m2--beeld-rechts .hw-m2__panel { margin-left: 0; margin-right: -10%; border-radius: 32px 8px 32px 32px; }
.hw-m2__zegel { width: 150px; color: var(--hw-on-licht-accent-licht); }
.hw-m2__kop { color: var(--hw-text); }
.hw-m2__tekst { color: var(--hw-text); }
.hw-m2__tekst p { margin: 0 0 1em; } .hw-m2__tekst p:last-child { margin-bottom: 0; }

@media (min-width: 782px) {
  /* Zelfde "hoog" optie als M1 Hero: de sectie vult (minimaal) de
     viewporthoogte. De afbeelding laat zijn vaste 3:4-verhouding los en
     vult de volledige hoogte van de rij (object-fit: cover), het paneel
     blijft even breed en scrolt zoals gebruikelijk sticky mee. */
  .hw-m2--hoog .hw-m2__inner { min-height: calc(100svh - var(--hw-nav-hoogte, 112px)); }
  .hw-m2--hoog .hw-m2__beeld { height: 100%; }
  .hw-m2--hoog .hw-m2__img { height: 100%; aspect-ratio: auto; }
}

@media (max-width: 781px) {
  .hw-m2__inner { flex-direction: column !important; }
  /* De afbeelding blijft staan (sticky) terwijl de content er bij het
     scrollen overheen glijdt. Hoe ver de afbeelding mee mag reizen wordt
     door front.js berekend (hoogte van .hw-m2__beeldvak): bij lange
     content laat de afbeelding los zodra de content nog 56px van de
     bovenkant van de afbeelding is; bij korte content eindigt de content
     56px voorbij de onderkant van de afbeelding. */
  .hw-m2__beeldvak { display: block; }
  .hw-m2__beeld {
    flex-basis: auto;
    width: 100%;
    position: sticky;
    top: calc(var(--hw-nav-hoogte, 72px) + 8px);
    margin-bottom: 0;
    border-radius: 16px 4px 28px 16px;
  }
  .hw-m2--beeld-rechts .hw-m2__beeld { border-radius: 4px 16px 16px 28px; }
  .hw-m2__img { border-radius: 16px 4px 28px 16px; }
  .hw-m2--beeld-rechts .hw-m2__img { border-radius: 4px 16px 16px 28px; }
  .hw-m2__panel {
    position: static;
    margin: -48px 16px 0; /* margin-top wordt op mobiel door front.js bijgesteld */
    padding: 32px 24px;
    border-radius: 4px 16px 16px 16px !important;
  }
  .hw-m2__zegel { width: 110px; }
}

/* --------------------------------------------------------------------------
   M3 Floating Cards
   -------------------------------------------------------------------------- */
.hw-m3 { background: var(--hw-achtergrond-zacht); padding-block: calc(var(--hw-sectie-padding) + 40px); }
@media (max-width: 781px) {
  .hw-m3 { padding-block: 96px; }
}
.hw-m3__kop { color: var(--hw-text); text-align: center; margin-bottom: 56px; }
.hw-m3__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 48px 56px;
}
.hw-m3kaart { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100%; }
.hw-m3kaart__illu {
  position: absolute;
  inset: 0 0 104px; /* onderin blijft ruimte vrij voor de CTA */
  z-index: 0;
  pointer-events: none;
}
/* Illustratie uitgelijnd aan de bovenkant van de kaart */
.hw-m3kaart__illu .hw-svg { margin-top: 0; }
.hw-m3kaart__illu .hw-svg { width: 100%; max-height: 100%; }
.hw-m3kaart__inhoud {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 0;
  padding-top: 168px;
  width: 100%;
}
.hw-m3kaart__kop { color: var(--hw-text); }
.hw-m3kaart__subkop { color: var(--hw-text); }
.hw-m3kaart__tekst { color: var(--hw-text); margin-top: 40px; margin-bottom: 40px; }
.hw-m3kaart__tekst p { margin: 0 0 1em; } .hw-m3kaart__tekst p:last-child { margin-bottom: 0; }
/* Knop onderaan: alle knoppen in de rij op 1 lijn */
.hw-m3kaart .hw-btn { margin-top: auto; align-self: center; }

@media (max-width: 781px) {
  .hw-m3__grid { gap: 64px; }
  .hw-m3kaart__inhoud { padding-top: 120px; }
  .hw-m3kaart__illu { inset: 0 0 80px; }
}

/* --------------------------------------------------------------------------
   M4 Full width image
   -------------------------------------------------------------------------- */
.hw-m4 {
  margin: 0;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hw-sectie-padding);
}
.hw-m4__bg {
  position: absolute;
  inset: -18% 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.hw-m4__kaart {
  position: relative;
  background: var(--hw-achtergrond);
  border-radius: var(--hw-radius-kaart-groot);
  padding: 56px;
  max-width: 762px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.hw-m4__eyebrow { color: var(--hw-primair); }
.hw-m4__kop { color: var(--hw-darkest); }
.hw-m4__tekst { color: var(--hw-text); }
.hw-m4__tekst p { margin: 0 0 1em; } .hw-m4__tekst p:last-child { margin-bottom: 0; }

@media (max-width: 781px) {
  .hw-m4 { padding: 24px; }
  .hw-m4__kaart { padding: 32px 24px; gap: 24px; }
}

/* --------------------------------------------------------------------------
   M5 Quote
   -------------------------------------------------------------------------- */
.hw-m5 { background: var(--hw-accent-licht); padding-block: var(--hw-sectie-padding); }
.hw-m5__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.hw-m5__zegel { width: 288px; max-width: 60vw; color: var(--hw-on-licht-accent-licht); }
.hw-m5__quote { margin: 0; max-width: 1040px; color: var(--hw-on-licht-accent); }
.hw-m5__quote .hw-display-2 { font-size: 24px; }
.hw-m5__auteur { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.hw-m5__auteur cite { font-style: normal; }

/* --------------------------------------------------------------------------
   M6 Instafeed (Smash Balloon)
   -------------------------------------------------------------------------- */
.hw-m6 { background: var(--hw-achtergrond); padding-block: var(--hw-sectie-padding); }
.hw-m6__kop { color: var(--hw-text); margin-bottom: 56px; }
.hw-m6__feed { margin-inline: auto; }
.hw-m6__feed #sb_instagram .sbi_photo,
.hw-m6__feed #sb_instagram .sbi_photo img { border-radius: 16px; }
.hw-m6__onder { color: var(--hw-text); margin-top: 56px; }
.hw-m6__melding { color: var(--hw-text); opacity: .7; }

/* --------------------------------------------------------------------------
   M7 Newsletter
   -------------------------------------------------------------------------- */
.hw-m7 { background: var(--hw-achtergrond-zacht); padding-block: var(--hw-sectie-padding); }
.hw-m7__inner { display: flex; gap: 80px; align-items: stretch; }
.hw-m7__content { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; align-items: flex-start; }
.hw-m7__kop, .hw-m7__tekst { color: var(--hw-text); }
.hw-m7__tekst p { margin: 0 0 1em; } .hw-m7__tekst p:last-child { margin-bottom: 0; }
.hw-m7__form { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 656px; background: var(--hw-achtergrond); border-radius: 24px 80px 80px 24px; padding: 8px 8px 8px 32px; box-sizing: border-box; }
@media (max-width: 781px) {
  .hw-m7__form { border-radius: 12px 40px 40px 12px; padding-left: 20px; }
}
.hw-m7__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--hw-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--hw-text);
  padding: 12px 0;
}
.hw-m7__input::placeholder { color: var(--hw-text); opacity: .6; }
.hw-m7__input:focus { outline: none; }
.hw-m7__form:focus-within { outline: 2px solid var(--hw-accent); outline-offset: 2px; }
.hw-m7__submit {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hw-accent);
  color: var(--hw-on-accent);
  font-size: 20px;
  cursor: pointer;
  transition: filter .2s ease;
}
.hw-m7__submit:hover, .hw-m7__submit:focus-visible { filter: brightness(1.08); }
.hw-m7__beeld { margin: 0; flex: 0 0 384px; border-radius: 16px; overflow: hidden; }
.hw-m7__img { border-radius: 16px; object-fit: cover; width: 100%; height: 100%; min-height: 377px; }

@media (max-width: 781px) {
  .hw-m7__inner { flex-direction: column; gap: 40px; }
  .hw-m7__beeld { flex-basis: auto; }
  .hw-m7__img { min-height: 0; aspect-ratio: 1; }
}

/* --------------------------------------------------------------------------
   M8 SVG Illustration (sticky illustratie + kleurband)
   -------------------------------------------------------------------------- */
.hw-m8 { background: var(--hw-achtergrond-zacht); padding-block: calc(var(--hw-sectie-padding) + 40px); overflow: clip; isolation: isolate; }
.hw-m8__inner { padding-inline: calc(var(--hw-sectie-padding) + 72px); }
.hw-m8__row { display: flex; align-items: flex-end; }
.hw-m8__illu { flex: 0 0 238px; align-self: stretch; position: relative; z-index: 2; }
/* De illustratie steekt 56px boven de kleurband uit */
.hw-m8--band .hw-m8__content { padding-top: 56px; }
.hw-m8__illu-sticky .hw-svg { width: 100%; }
.hw-m8__content { flex: 1; min-width: 0; }
.hw-m8__head { position: relative; padding: 44px 40px; }
/* Tekst boven de illustratie; de kleurband eronder */
.hw-m8__head > * { position: relative; z-index: 3; }
.hw-m8__body { position: relative; z-index: 3; }
/* Zonder kleurband geen extra bandpadding rond de kop; de content
   overlapt de illustratie juist ruim (negatieve marge) */
.hw-m8:not(.hw-m8--band) .hw-m8__head { padding: 0 40px; }
.hw-m8:not(.hw-m8--band) .hw-m8__body { padding-top: 24px; }
.hw-m8:not(.hw-m8--band) .hw-m8__content { margin-left: -120px; }
.hw-m8--illu-rechts:not(.hw-m8--band) .hw-m8__content { margin-left: 0; margin-right: -120px; }
.hw-m8__eyebrow { margin-bottom: 8px; color: var(--hw-accent-variant); }
.hw-m8__intro p { margin: 0 0 1em; } .hw-m8__intro p:last-child { margin-bottom: 0; }
.hw-m8--band .hw-m8__head::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -180px;
  background: var(--hw-accent);
  border-radius: var(--hw-radius-band);
  z-index: 1;
}
.hw-m8--band .hw-m8__kop { color: var(--hw-on-accent); }
.hw-m8--band .hw-m8__intro { color: var(--hw-on-accent-licht); }
.hw-m8:not(.hw-m8--band) .hw-m8__kop,
.hw-m8:not(.hw-m8--band) .hw-m8__intro { color: var(--hw-text); }
.hw-m8__intro { margin-top: 16px; }
.hw-m8__body { padding: 56px 40px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.hw-m8__tekst { color: var(--hw-text); }
.hw-m8__tekst p { margin: 0 0 1em; } .hw-m8__tekst p:last-child { margin-bottom: 0; }

/* Gespiegelde variant: illustratie rechts, content rechts uitgelijnd */
.hw-m8--illu-rechts .hw-m8__row { flex-direction: row-reverse; }
.hw-m8--illu-rechts .hw-m8__content { text-align: right; }
.hw-m8--illu-rechts .hw-m8__body { align-items: flex-end; }
.hw-m8--illu-rechts.hw-m8--band .hw-m8__head::before {
  left: 0;
  right: -180px;
  border-radius: 8px 24px 56px 24px;
}

/* Partnerstrook onder het component (logo's + kleine tekst) */
.hw-m8__partners {
  margin-top: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
.hw-m8__logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}
.hw-m8__logos img { height: var(--logo-h, 60px) !important; width: auto !important; }
.hw-m8__ondertekst { color: var(--hw-text); max-width: 880px; }

@media (max-width: 981px) {
  .hw-m8__inner { padding-inline: var(--hw-sectie-padding); }
  .hw-m8__illu { flex-basis: 160px; }
  .hw-m8--band .hw-m8__head::before { left: -120px; }
  .hw-m8--illu-rechts.hw-m8--band .hw-m8__head::before { left: 0; right: -120px; }
}
@media (max-width: 781px) {
  .hw-m8__row { flex-direction: column !important; }
  .hw-m8__illu { flex-basis: auto; width: 50%; max-width: 220px; margin-inline: auto; }
  .hw-m8 { padding-top: 48px; }
  .hw-m8__row { align-items: stretch; }
  .hw-m8--band .hw-m8__content { padding-top: 0; }
  /* Negatieve ruimte: de svg valt deels over de kleurband (verticaal,
     zoals dat op desktop horizontaal gebeurt); de band krijgt daarvoor
     extra padding aan de bovenkant. */
  .hw-m8__head { padding: 32px 0; margin-top: 24px; }
  .hw-m8--band .hw-m8__head { padding-top: 112px; margin-top: -144px; }
  .hw-m8--band .hw-m8__head::before,
  .hw-m8--illu-rechts.hw-m8--band .hw-m8__head::before { left: -24px; right: -24px; }
  .hw-m8__body { padding: 32px 0 0; }
  .hw-m8:not(.hw-m8--band) .hw-m8__head { padding: 0; margin-top: -72px; }
  .hw-m8:not(.hw-m8--band) .hw-m8__content,
  .hw-m8--illu-rechts:not(.hw-m8--band) .hw-m8__content { margin-left: 0; margin-right: 0; }
  .hw-m8--illu-rechts .hw-m8__content { text-align: left; }
  .hw-m8--illu-rechts .hw-m8__body { align-items: flex-start; }
  .hw-m8__logos { gap: 24px; }
  .hw-m8__logos img { height: calc(var(--logo-h, 60px) * .7) !important; }
}

/* --------------------------------------------------------------------------
   M9 Cards
   -------------------------------------------------------------------------- */
.hw-m9 { background: var(--hw-achtergrond); padding-block: var(--hw-sectie-padding); }
.hw-m9__header { max-width: 880px; margin: 0 0 56px; text-align: left; display: flex; flex-direction: column; gap: 16px; }
.hw-m9__kop, .hw-m9__intro, .hw-m9__voet { color: var(--hw-text); }
.hw-m9__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: stretch;
}
/* 2-koloms variant (4 kaarten in een grid) met wisselende organische
   hoeken per kaart, zoals in het Figma-design */
.hw-m9--kol2 .hw-m9__grid { grid-template-columns: repeat(2, 1fr); }
.hw-m9--kol2 .hw-m9kaart:nth-child(4n+1) { border-radius: 32px 8px 32px 56px; }
.hw-m9--kol2 .hw-m9kaart:nth-child(4n+2) { border-radius: 32px 56px 32px 8px; }
.hw-m9--kol2 .hw-m9kaart:nth-child(4n+3) { border-radius: 8px 32px 56px 32px; }
.hw-m9--kol2 .hw-m9kaart:nth-child(4n+4) { border-radius: 56px 32px 8px 32px; }
.hw-m9--kol2 .hw-m9kaart:nth-child(4n+2) .hw-m9kaart__beeld { border-radius: 24px 32px 0 0; }
.hw-m9--kol2 .hw-m9kaart:nth-child(4n+3) .hw-m9kaart__beeld { border-radius: 4px 24px 0 0; }
.hw-m9--kol2 .hw-m9kaart:nth-child(4n+4) .hw-m9kaart__beeld { border-radius: 32px 24px 0 0; }
@media (max-width: 781px) {
  .hw-m9--kol2 .hw-m9__grid { grid-template-columns: 1fr; }
  .hw-m9--kol2 .hw-m9kaart:nth-child(4n+1) { border-radius: 16px 4px 16px 28px; }
  .hw-m9--kol2 .hw-m9kaart:nth-child(4n+2) { border-radius: 16px 28px 16px 4px; }
  .hw-m9--kol2 .hw-m9kaart:nth-child(4n+3) { border-radius: 4px 16px 28px 16px; }
  .hw-m9--kol2 .hw-m9kaart:nth-child(4n+4) { border-radius: 28px 16px 4px 16px; }
  .hw-m9--kol2 .hw-m9kaart:nth-child(4n+2) .hw-m9kaart__beeld { border-radius: 12px 16px 0 0; }
  .hw-m9--kol2 .hw-m9kaart:nth-child(4n+3) .hw-m9kaart__beeld { border-radius: 2px 12px 0 0; }
  .hw-m9--kol2 .hw-m9kaart:nth-child(4n+4) .hw-m9kaart__beeld { border-radius: 16px 12px 0 0; }
}
.hw-m9kaart {
  position: relative;
  background: var(--hw-achtergrond-zacht);
  border-radius: var(--hw-radius-kaart-groot);
  padding: 32px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
}
/* Beeld volgt de bovenhoeken van de kaart, iets minder rond door de
   padding (32->24, 8->4, 56->32, zoals in Figma); onderkant recht */
.hw-m9kaart__beeld { margin: 0 0 32px; border-radius: 24px 4px 0 0; overflow: hidden; }
.hw-m9kaart__img { border-radius: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 781px) {
  /* Na de basisregel, anders wint de desktopafronding (cascade-volgorde) */
  .hw-m9kaart__beeld { border-radius: 12px 2px 0 0; }
}
.hw-m9kaart__inhoud { display: flex; flex-direction: column; gap: 8px; }
.hw-m9kaart__eyebrow, .hw-m9kaart__kop, .hw-m9kaart__tekst { color: var(--hw-text); }
.hw-m9kaart__tekst { margin-top: 8px; }
.hw-m9kaart__tekst p { margin: 0 0 1em; } .hw-m9kaart__tekst p:last-child { margin-bottom: 0; }
.hw-m9kaart__link { margin-top: auto; padding-top: 32px; align-self: center; text-align: center; color: var(--hw-accent-variant); }
/* Heeft de kaart een CTA, dan is de hele kaart klikbaar: het klikvlak
   van de link wordt over de hele kaart uitgerekt. */
.hw-m9kaart__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--hw-radius-kaart-groot);
}
.hw-m9kaart__link:hover, .hw-m9kaart__link:focus-visible { color: var(--hw-accent); }
.hw-m9__voet { text-align: center; margin-top: 56px; }

/* --------------------------------------------------------------------------
   M10 Contact Form
   -------------------------------------------------------------------------- */
.hw-m10 { background: var(--hw-achtergrond-zacht); padding-block: var(--hw-sectie-padding); }
.hw-m10__inner { display: flex; gap: 80px; align-items: stretch; }
.hw-m10__content { flex: 1; display: flex; flex-direction: column; gap: 32px; align-items: stretch; }
.hw-m10__kop, .hw-m10__tekst { color: var(--hw-text); }
.hw-m10__beeld { margin: 0; flex: 0 0 384px; border-radius: 16px; overflow: hidden; }
.hw-m10__img { border-radius: 16px; object-fit: cover; width: 100%; height: 100%; }

/* Formulierstyling: van toepassing op elk formulier dat in het blok wordt
   geplaatst (Contact Form 7, WPForms, Gravity Forms, enz.). */
.hw-m10__form input[type="text"],
.hw-m10__form input[type="email"],
.hw-m10__form input[type="tel"],
.hw-m10__form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  background: var(--hw-achtergrond);
  border-radius: 8px 24px 32px 24px;
  padding: 22px 32px;
  font-family: var(--hw-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--hw-text);
  margin-bottom: 16px;
}
.hw-m10__form textarea { min-height: 204px; resize: vertical; }
.hw-m10__form input:focus,
.hw-m10__form textarea:focus { outline: 2px solid var(--hw-accent); outline-offset: 2px; }
.hw-m10__form input[type="submit"],
.hw-m10__form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--hw-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .10em;
  background: var(--hw-accent);
  color: var(--hw-on-accent);
  border: 0;
  border-radius: var(--hw-radius-knop);
  cursor: pointer;
}

/* WPForms binnen M10: dezelfde veldstyling als het Figma-design.
   Gebaseerd op de standaard WPForms-markup; de !important is nodig omdat
   WPForms eigen styling met hoge specificiteit meelevert. */
.hw-m10__form .wpforms-container .wpforms-form input[type="text"],
.hw-m10__form .wpforms-container .wpforms-form input[type="email"],
.hw-m10__form .wpforms-container .wpforms-form input[type="tel"],
.hw-m10__form .wpforms-container .wpforms-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  background: var(--hw-achtergrond) !important;
  border-radius: 8px 24px 32px 24px !important;
  padding: 22px 32px !important;
  height: auto !important;
  min-height: 64px;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
  font-family: var(--hw-font) !important;
  font-size: 16px !important;
  font-weight: 500;
  color: var(--hw-text) !important;
  box-shadow: none !important;
}
.hw-m10__form .wpforms-container .wpforms-form textarea { min-height: 204px; }
.hw-m10__form .wpforms-container .wpforms-form input:focus,
.hw-m10__form .wpforms-container .wpforms-form textarea:focus {
  outline: 2px solid var(--hw-accent) !important;
  outline-offset: 2px;
}
.hw-m10__form .wpforms-container .wpforms-field { position: relative; padding: 0 0 16px !important; }
/* Labels zonder invoerveld (zoals de AVG-checkbox) blijven gewoon boven
   hun veld staan, in de labelstijl. */
.hw-m10__form .wpforms-container .wpforms-field-label {
  position: static;
  display: block;
  margin: 0 0 8px !important;
  font-family: var(--hw-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .10em;
  color: var(--hw-text) !important;
}
/* Zwevend label, alleen op velden met een tekstveld (front.js zet de
   class hw-veld-zwevend): het label staat verticaal gecentreerd als
   hinttekst in het veld en schuift naar boven zodra het veld focus
   krijgt of gevuld is (class hw-veld-actief). */
.hw-m10__form .wpforms-container .hw-veld-zwevend .wpforms-field-label {
  position: absolute;
  top: 32px; /* halve invoerveldhoogte: onafhankelijk van foutmeldingen onder het veld */
  transform: translateY(-50%);
  left: 32px;
  z-index: 2;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .02em;
  opacity: .55;
  pointer-events: none;
  transition: top .15s ease, transform .15s ease, font-size .15s ease, opacity .15s ease;
}
/* Tekstvakken (textarea) zijn hoog; daar hoort de hint bovenin */
.hw-m10__form .wpforms-container .hw-veld-zwevend.hw-veld-tekstvak .wpforms-field-label {
  top: 24px;
  transform: none;
}
.hw-m10__form .wpforms-container .hw-veld-zwevend.hw-veld-actief .wpforms-field-label {
  top: 8px;
  transform: none;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  opacity: .8;
}
.hw-m10__form .wpforms-container .wpforms-field.hw-veld-actief input[type="text"],
.hw-m10__form .wpforms-container .wpforms-field.hw-veld-actief input[type="email"],
.hw-m10__form .wpforms-container .wpforms-field.hw-veld-actief input[type="tel"],
.hw-m10__form .wpforms-container .wpforms-field.hw-veld-actief textarea {
  padding-top: 32px !important;
  padding-bottom: 16px !important;
}
/* Dropdown (bv. onderwerpkeuze) in de stijl van de invoervelden */
.hw-m10__form .wpforms-container .wpforms-form select {
  width: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  background-color: var(--hw-achtergrond) !important;
  border-radius: 8px 24px 32px 24px !important;
  padding: 20px 56px 20px 32px !important;
  min-height: 64px;
  box-sizing: border-box !important;
  font-family: var(--hw-font) !important;
  font-size: 16px !important;
  font-weight: 500;
  color: var(--hw-text) !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23555555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 24px center;
  background-size: 16px;
}
.hw-m10__form .wpforms-container .wpforms-form select:focus-visible {
  outline: 2px solid var(--hw-accent) !important;
  outline-offset: 2px;
}

/* Checkbox in de stijl van de invoervelden: achtergrond-vlak met een
   subtiel asymmetrisch hoekje, accent bij aanvinken. */
.hw-m10__form .wpforms-container input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  background: var(--hw-achtergrond);
  border: 0 !important;
  border-radius: 4px 4px 4px 10px;
  cursor: pointer;
  vertical-align: middle;
}
.hw-m10__form .wpforms-container input[type="checkbox"]:checked {
  background-color: var(--hw-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
.hw-m10__form .wpforms-container input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--hw-accent);
  outline-offset: 2px;
}
/* Checkbox en tekst netjes naast elkaar, ongeacht of WPForms de input
   naast of binnen het label plaatst */
.hw-m10__form .wpforms-container .wpforms-field ul { list-style: none; margin: 0; padding: 0; }
.hw-m10__form .wpforms-container .wpforms-field ul li,
.hw-m10__form .wpforms-container .wpforms-field ul li label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
/* Tekst bij checkboxes: Body/Small */
.hw-m10__form .wpforms-container .wpforms-field ul li,
.hw-m10__form .wpforms-container .wpforms-field ul li label {
  font-family: var(--hw-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 22px !important;
  letter-spacing: .04em;
  color: var(--hw-text) !important;
}
.hw-m10__form .wpforms-container .wpforms-field ul li a { color: var(--hw-accent-variant); }
/* Foutmeldingen: Caption in de accent-variant kleur van het seizoen */
.hw-m10__form .wpforms-container .wpforms-error {
  font-family: var(--hw-font) !important;
  font-size: 11px !important;
  font-weight: 200 !important;
  line-height: 1.5 !important;
  letter-spacing: .02em;
  color: var(--hw-accent-variant) !important;
}

/* Bevestigingsbericht na het versturen: kaartje in de stijl van de
   invoervelden, in plaats van het groene WPForms-blok. */
.hw-m10__form .wpforms-confirmation-container-full {
  background: var(--hw-achtergrond) !important;
  border: 0 !important;
  border-radius: 8px 24px 32px 24px !important;
  padding: 24px 32px !important;
  margin: 0 !important;
}
.hw-m10__form .wpforms-confirmation-container-full p {
  font-family: var(--hw-font) !important;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: .02em;
  color: var(--hw-text) !important;
  margin: 0;
}
.hw-m10__form .wpforms-confirmation-container-full p + p { margin-top: 1em; }

/* Placeholders van WPForms verbergen; het label is de hinttekst */
.hw-m10__form .wpforms-container .wpforms-form input::placeholder,
.hw-m10__form .wpforms-container .wpforms-form textarea::placeholder { color: transparent; }
.hw-m10__form .wpforms-container .wpforms-field-sublabel { font-family: var(--hw-font) !important; }
.hw-m10__form .wpforms-container button[type="submit"],
.hw-m10__form .wpforms-container .wpforms-submit {
  font-family: var(--hw-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .10em;
  padding: 16px !important;
  background: var(--hw-accent) !important;
  color: var(--hw-on-accent) !important;
  border: 0 !important;
  border-radius: var(--hw-radius-knop) !important;
  cursor: pointer;
}

@media (max-width: 781px) {
  .hw-m10__inner { flex-direction: column; gap: 40px; }
  .hw-m10__beeld { flex-basis: auto; }
  .hw-m10__form .wpforms-container .wpforms-form input[type="text"],
  .hw-m10__form .wpforms-container .wpforms-form input[type="email"],
  .hw-m10__form .wpforms-container .wpforms-form input[type="tel"],
  .hw-m10__form .wpforms-container .wpforms-form textarea {
    border-radius: 4px 12px 16px 12px !important;
  }
  .hw-m10__form .wpforms-confirmation-container-full {
    border-radius: 4px 12px 16px 12px !important;
    padding: 16px 20px !important;
  }
  .hw-m10__form .wpforms-container .wpforms-form select {
    border-radius: 4px 12px 16px 12px !important;
  }
}

/* --------------------------------------------------------------------------
   M00 Footer
   -------------------------------------------------------------------------- */
.hw-footer { background: var(--hw-accent-variant); color: var(--hw-on-accent); padding-block: var(--hw-sectie-padding); }
.hw-footer a { color: var(--hw-on-accent); }
.hw-footer a:hover, .hw-footer a:focus-visible { color: var(--hw-on-accent-licht); }
.hw-footer__boven { display: flex; gap: 56px; align-items: flex-start; }
.hw-footer__zegel { width: 128px; flex-shrink: 0; color: var(--hw-on-accent-licht); }
.hw-footer__kolommen { display: flex; flex: 1; gap: 64px; flex-wrap: wrap; }
.hw-footer__coltitel { font-family: var(--hw-font); font-size: 11px; font-weight: 200; line-height: 1.5; letter-spacing: .02em; color: var(--hw-on-accent-licht); margin: 0 0 12px; }
.hw-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hw-footer__links a { font-family: var(--hw-font); font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: .10em; }
.hw-footer__lijn { border: 0; border-top: 1px solid var(--hw-on-accent-licht); opacity: .4; margin: 48px 0; }
.hw-footer__onder { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.hw-footer__links-onder { order: 1; }
.hw-footer__meta { order: 2; }
.hw-footer__meta { max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.hw-footer__copyright, .hw-footer__kvk, .hw-footer__disclaimer { color: var(--hw-on-accent-licht); }
.hw-footer__links-onder { display: flex; gap: 48px; align-items: center; flex-wrap: wrap; }
.hw-footer__insta { display: inline-flex; align-items: center; gap: 8px; }
.hw-footer__onderlinks { list-style: none; display: flex; gap: 48px; margin: 0; padding: 0; }
.hw-footer__onderlinks a { font-family: var(--hw-font); font-size: 12px; font-weight: 350; letter-spacing: .04em; color: var(--hw-on-accent-licht); }

@media (max-width: 781px) {
  .hw-footer__boven { flex-direction: column; gap: 32px; }
  .hw-footer__kolommen { flex-direction: column; gap: 32px; }
  /* De verborgen scheidingslijn leverde ook de verticale ruimte tussen
     de kolommen en dit blok; die ruimte komt hier terug. */
  .hw-footer__onder { flex-direction: column; gap: 32px; margin-top: 48px; }
  /* Mobiel: de grote scheidingslijn verdwijnt; de enige divider is die
     boven de insta-link. Volgorde: kolommen, divider, insta, juridische
     tekst. */
  .hw-footer__lijn { display: none; }
  .hw-footer__links-onder { display: contents; }
  .hw-footer__onderlinks { order: 2; gap: 20px; flex-direction: column; align-items: flex-start; }
  .hw-footer__insta {
    order: 1;
    display: flex;
    width: 100%;
    padding-top: 32px;
    border-top: 1px solid var(--hw-on-accent-licht);
    border-top-color: color-mix(in srgb, var(--hw-on-accent-licht) 40%, transparent);
  }
  .hw-footer__meta {
    order: 3;
    width: 100%;
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   Bewegingsvoorkeuren
   -------------------------------------------------------------------------- */
@media (max-width: 781px) {
  .hw-m10__form input[type="text"],
  .hw-m10__form input[type="email"],
  .hw-m10__form input[type="tel"],
  .hw-m10__form textarea { border-radius: 4px 12px 16px 12px; }
  .hw-m4__kaart { border-radius: 16px 4px 16px 28px; }
  .hw-m6__feed #sb_instagram .sbi_photo,
  .hw-m6__feed #sb_instagram .sbi_photo img { border-radius: 8px; }
  .hw-m7__img, .hw-m10__img { border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-m8__illu-sticky { transform: none !important; }
  .hw-btn, .hw-m7__submit { transition: none; }
  .hw-nav--zweeft { transition: none; }
  .hw-nav__menu { transition: none; transform: none; }
}

/* --------------------------------------------------------------------------
   M11 Jaarfeesten
   -------------------------------------------------------------------------- */
.hw-m11 { background: var(--hw-achtergrond); padding-block: var(--hw-sectie-padding); }
.hw-m11__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 56px;
}
.hw-m11__headertekst { max-width: 880px; display: flex; flex-direction: column; gap: 16px; }
.hw-m11__kop, .hw-m11__intro { color: var(--hw-text); }
.hw-m11__zegel { width: 120px; flex-shrink: 0; }
.hw-m11__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}
/* Wisselende organische hoeken, in het ritme van de rest van de site */
.hw-m11kaart:nth-child(4n+1) { border-radius: 32px 8px 32px 56px; }
.hw-m11kaart:nth-child(4n+2) { border-radius: 32px 56px 32px 8px; }
.hw-m11kaart:nth-child(4n+3) { border-radius: 8px 32px 56px 32px; }
.hw-m11kaart:nth-child(4n+4) { border-radius: 56px 32px 8px 32px; }
.hw-m11kaart {
  background: var(--hw-achtergrond-zacht);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  height: 100%;
  box-sizing: border-box;
}
.hw-m11kaart__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.hw-m11kaart__naam { color: var(--hw-text); }
.hw-m11kaart__label {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--hw-accent);
  color: var(--hw-on-accent);
  border-radius: 4px 4px 4px 12px;
}
/* Datum in een chip, verwant aan de nieuwsbrief-invoervorm */
.hw-m11kaart__datum {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: var(--hw-achtergrond);
  color: var(--hw-text);
  border-radius: 12px 40px 40px 12px;
}
.hw-m11kaart__notitie { color: var(--hw-text); opacity: .85; }
/* Uitgelicht feest (bv. open avond) */
.hw-m11kaart--uitgelicht { background: var(--hw-accent-licht); }
.hw-m11kaart--uitgelicht .hw-m11kaart__naam,
.hw-m11kaart--uitgelicht .hw-m11kaart__notitie { color: var(--hw-on-licht-accent); }
.hw-m11kaart--uitgelicht .hw-m11kaart__datum {
  background: var(--hw-achtergrond-zacht);
  color: var(--hw-on-licht-accent);
}
.hw-m11__voet { color: var(--hw-text); text-align: center; margin-top: 40px; }

@media (max-width: 1100px) {
  .hw-m11__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
  .hw-m11__header { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 32px; }
  .hw-m11__zegel { width: 96px; }
  .hw-m11__grid { grid-template-columns: 1fr; gap: 12px; }
  .hw-m11kaart { padding: 20px; gap: 10px; }
  .hw-m11kaart:nth-child(4n+1) { border-radius: 16px 4px 16px 28px; }
  .hw-m11kaart:nth-child(4n+2) { border-radius: 16px 28px 16px 4px; }
  .hw-m11kaart:nth-child(4n+3) { border-radius: 4px 16px 28px 16px; }
  .hw-m11kaart:nth-child(4n+4) { border-radius: 28px 16px 4px 16px; }
  .hw-m11kaart__datum { padding: 8px 16px; border-radius: 8px 24px 24px 8px; }
}

/* --------------------------------------------------------------------------
   M12 Recepten (automatisch, in de M3-kaartstijl)
   -------------------------------------------------------------------------- */
.hw-m12kaart__regel { color: var(--hw-on-licht-accent-licht); }
.hw-m12kaart__foto { margin: 0 0 24px; width: 100%; }
.hw-m12kaart__foto img { border-radius: 16px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* --------------------------------------------------------------------------
   M13 Recept Kop: illustratie links, half over een gekleurd paneel met
   titel, chips, ingrediënten en intro (naar de mockup)
   -------------------------------------------------------------------------- */
.hw-m13 { background: var(--hw-achtergrond-zacht); padding-block: calc(var(--hw-sectie-padding) + 24px); }
.hw-m13__inner { display: flex; align-items: center; }
.hw-m13__illu,
.hw-m13__foto { flex: 0 0 38%; max-width: 440px; margin: 0; position: relative; z-index: 2; }
.hw-m13__foto img { border-radius: var(--hw-radius-kaart-groot); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hw-m13__paneel {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  margin-left: -10%;
  background: var(--hw-achtergrond-accent);
  color: var(--hw-text);
  border-radius: var(--hw-radius-kaart-groot);
  padding: 64px 64px 64px calc(10% + 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.hw-m13__paneel:first-child { margin-left: 0; padding-left: 64px; }
.hw-m13__titel { color: inherit; }
.hw-m13__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-m13__chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--hw-achtergrond);
  color: var(--hw-text);
  border-radius: 12px 4px 12px 4px;
}
.hw-m13__chip--kruid { background: var(--hw-accent-licht); color: var(--hw-on-licht-accent); }
a.hw-m13__chip { text-decoration: none; }
a.hw-m13__chip:hover, a.hw-m13__chip:focus-visible { text-decoration: underline; }
/* Wetenschappelijke naam op de kruid-pagina: cursief, geen kapitalen */
.hw-m22__wetenschappelijk { font-style: italic; text-transform: none; letter-spacing: .04em; color: inherit; opacity: .85; margin-top: -12px; }
.hw-m13__chip--ingredient { background: var(--hw-lightest); color: var(--hw-text); }
.hw-m13__ingredientenkop { color: inherit; margin: 0 0 -8px; }
.hw-m13__ingredienten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; color: inherit; }
.hw-m13__ingredienten li { position: relative; padding-left: 20px; }
.hw-m13__ingredienten li::before {
  content: "\00B7";
  position: absolute;
  left: 0;
  top: -3px;
  font-family: var(--hw-font);
  font-size: 24px;
  font-weight: 840;
  line-height: 1;
}
.hw-m13__intro { color: inherit; }
.hw-m13__intro p { margin: 0 0 1em; } .hw-m13__intro p:last-child { margin-bottom: 0; }

@media (max-width: 781px) {
  .hw-m13__inner { flex-direction: column; }
  .hw-m13__illu,
  .hw-m13__foto { flex-basis: auto; width: 60%; max-width: 240px; margin-inline: auto; }
  .hw-m13__paneel {
    width: 100%;
    box-sizing: border-box;
    margin: -48px 0 0;
    padding: 72px 24px 32px;
  }
  .hw-m13__paneel:first-child { margin-top: 0; padding-top: 32px; }
}

/* --------------------------------------------------------------------------
   M17 Artikel Kop (eigen layout: content links, foto rechts)
   -------------------------------------------------------------------------- */
.hw-m17 { background: var(--hw-achtergrond-zacht); padding-block: var(--hw-sectie-padding); }
.hw-m17__inner { display: flex; align-items: center; gap: 64px; }
.hw-m17__content { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hw-m17__titel { color: var(--hw-text); }
.hw-m17__intro { color: var(--hw-text); }
.hw-m17__intro p { margin: 0 0 1em; } .hw-m17__intro p:last-child { margin-bottom: 0; }
.hw-m17__foto { margin: 0; flex: 0 0 320px; }
.hw-m17__foto img { border-radius: var(--hw-radius-kaart-groot); width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

@media (max-width: 781px) {
  .hw-m17__inner { flex-direction: column-reverse; align-items: stretch; gap: 32px; }
  .hw-m17__foto { flex-basis: auto; }
}

/* --------------------------------------------------------------------------
   M14 Ingrediënten, M15 Bereiding en M16 Kader (kaarten in de contentflow)
   -------------------------------------------------------------------------- */
.hw-m14, .hw-m15, .hw-m16 {
  border-radius: var(--hw-radius-kaart-groot);
  padding: 32px;
  margin-block: 24px;
}
.hw-m14__kop, .hw-m15__kop { color: var(--hw-text); margin-bottom: 20px; }
.hw-m14__lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--hw-text); }
.hw-m14__lijst li { position: relative; padding-left: 22px; }
.hw-m14__lijst li::before {
  content: "\00B7";
  position: absolute;
  left: 0;
  top: -2px;
  font-family: var(--hw-font);
  font-size: 26px;
  font-weight: 840;
  line-height: 1;
  color: var(--hw-accent);
}
.hw-m15__stappen { list-style: none; margin: 0; padding: 0; counter-reset: hw-stap; display: flex; flex-direction: column; gap: 16px; color: var(--hw-text); }
.hw-m15__stappen li { counter-increment: hw-stap; display: flex; align-items: baseline; gap: 16px; }
.hw-m15__stappen li::before {
  content: counter(hw-stap);
  font-family: var(--hw-font);
  font-size: 24px;
  font-weight: 840;
  font-variation-settings: "CONT" 500;
  line-height: 1;
  color: var(--hw-accent);
  min-width: 28px;
}
.hw-m16__kop { color: var(--hw-on-licht-accent); margin-bottom: 12px; }
.hw-m16__tekst { color: var(--hw-on-licht-accent); }
.hw-m16__tekst p { margin: 0 0 1em; } .hw-m16__tekst p:last-child { margin-bottom: 0; }

@media (max-width: 781px) {
  .hw-m14, .hw-m15, .hw-m16 { padding: 24px 20px; }
}

/* --------------------------------------------------------------------------
   M17 Artikel Kop (bouwt op de M13-stijlen)
   -------------------------------------------------------------------------- */
.hw-m17__meta { color: var(--hw-primair); }

/* --------------------------------------------------------------------------
   M19 Recepten Overzicht: filters en paginering
   -------------------------------------------------------------------------- */
.hw-m19__header { max-width: 880px; margin-bottom: 40px; display: flex; flex-direction: column; gap: 16px; }
.hw-m19__kop, .hw-m19__intro { color: var(--hw-text); }
/* Inklapbare filterbox met samenvatting van actieve filters */
.hw-m19 { scroll-margin-top: calc(var(--hw-nav-hoogte, 112px) + 16px); }
.hw-m19__filterbox {
  border-radius: var(--hw-radius-kaart);
  padding: 4px 24px;
  margin-bottom: 56px;
}
.hw-m19__samenvatting {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  color: var(--hw-text);
}
.hw-m19__samenvatting::-webkit-details-marker { display: none; }
.hw-m19__actief { display: flex; flex-wrap: wrap; gap: 8px; }
.hw-m19__actiefchip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--hw-accent);
  color: var(--hw-on-accent);
  border-radius: 4px 4px 4px 10px;
}
.hw-m19__caret { margin-left: auto; transition: transform .2s ease; color: var(--hw-text); }
.hw-m19__filterbox[open] .hw-m19__caret { transform: rotate(180deg); }
.hw-m19__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: 8px 0 24px;
}
.hw-m19__filter { display: flex; flex-direction: column; gap: 6px; }
.hw-m19__filterlabel { color: var(--hw-text); }
.hw-m19__select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: var(--hw-achtergrond);
  border-radius: 8px 20px 20px 8px;
  padding: 12px 44px 12px 20px;
  font-family: var(--hw-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--hw-text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23555555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
}
.hw-m19__select:focus-visible { outline: 2px solid var(--hw-accent); outline-offset: 2px; }
.hw-m19__plukbaar {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-end;
  padding: 12px 4px;
  cursor: pointer;
  color: var(--hw-text);
}
.hw-m19__plukbaar input {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  background: var(--hw-achtergrond-zacht);
  border: 0;
  border-radius: 4px 4px 4px 10px;
  cursor: pointer;
}
.hw-m19__plukbaar input:checked {
  background-color: var(--hw-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}
.hw-m19__plukbaar input:focus-visible { outline: 2px solid var(--hw-accent); outline-offset: 2px; }
.hw-m19__submit { padding: 11px 20px; }
.hw-m19__wis { color: var(--hw-accent-variant); align-self: flex-end; padding: 13px 4px; }
.hw-m19__paginering {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 56px;
}
.hw-m19__pagina { color: var(--hw-accent-variant); text-decoration: none; padding: 6px 10px; }
.hw-m19__pagina--actief {
  background: var(--hw-accent);
  color: var(--hw-on-accent);
  border-radius: 4px 4px 4px 12px;
}
.hw-m19__leeg a { color: var(--hw-accent-variant); }

@media (max-width: 781px) {
  .hw-m19__filterbox { padding: 2px 16px; margin-bottom: 40px; }
  .hw-m19__filters { gap: 12px; }
  .hw-m19__filter { flex: 1 1 100%; }
  .hw-m19__select { width: 100%; }
  .hw-m19__plukbaar { align-self: flex-start; }
  .hw-m19__submit { width: 100%; justify-content: center; }
  .hw-m19__wis { align-self: center; padding: 8px 4px; }
}

/* Wanneer JavaScript de filters direct toepast is de knop overbodig,
   maar zonder JavaScript blijft hij nodig; daarom blijft hij staan. */

/* --------------------------------------------------------------------------
   M20 Tekstpagina: gewone blokken in huisstijl, leesbare kolom
   -------------------------------------------------------------------------- */
.hw-m20 { background: var(--hw-achtergrond); padding-block: var(--hw-sectie-padding); }
.hw-m20__inhoud {
  max-width: calc(720px + 2 * var(--hw-sectie-padding));
  box-sizing: border-box;
  margin-inline: auto;
  padding-inline: var(--hw-sectie-padding);
  color: var(--hw-text);
}
.hw-m20__kop { color: var(--hw-text); margin: 0 0 32px; }
.hw-m20__inhoud h1 { font-family: var(--hw-font); font-size: 24px; font-weight: 200; line-height: 1.08; letter-spacing: .10em; text-transform: uppercase; font-variation-settings: "CONT" 0; margin: 0 0 32px; }
.hw-m20__inhoud h2 { font-family: var(--hw-font); font-size: 20px; font-weight: 700; line-height: 1.26; letter-spacing: .20em; text-transform: uppercase; margin: 48px 0 16px; }
.hw-m20__inhoud h3 { font-family: var(--hw-font); font-size: 18px; font-weight: 500; line-height: 1.26; letter-spacing: .18em; text-transform: uppercase; margin: 40px 0 12px; }
.hw-m20__inhoud h1:first-child,
.hw-m20__inhoud h2:first-child,
.hw-m20__inhoud h3:first-child { margin-top: 0; }
.hw-m20__inhoud p { font-family: var(--hw-font); font-size: 16px; font-weight: 500; line-height: 26px; letter-spacing: .02em; margin: 0 0 1.1em; }
.hw-m20__inhoud ul,
.hw-m20__inhoud ol { list-style: none; margin: 0 0 1.1em; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--hw-font); font-size: 16px; font-weight: 500; line-height: 26px; letter-spacing: .02em; }
.hw-m20__inhoud ul li { position: relative; padding-left: 20px; }
.hw-m20__inhoud ul li::before { content: "\00B7"; position: absolute; left: 0; top: -3px; font-size: 24px; font-weight: 840; line-height: 1; color: var(--hw-accent); }
.hw-m20__inhoud ol { counter-reset: hw-m20-stap; }
.hw-m20__inhoud ol li { counter-increment: hw-m20-stap; position: relative; padding-left: 32px; }
.hw-m20__inhoud ol li::before { content: counter(hw-m20-stap) "."; position: absolute; left: 0; font-weight: 840; color: var(--hw-accent); }
.hw-m20__inhoud a { color: var(--hw-accent-variant); }
.hw-m20__inhoud strong { font-weight: 700; }
.hw-m20__inhoud em { font-style: italic; }
.hw-m20__inhoud hr { border: 0; border-top: 1px solid var(--hw-accent-licht); margin: 40px 0; }

@media (max-width: 781px) {
  .hw-m20__inhoud h1 { font-size: 20px; letter-spacing: .08em; }
  .hw-m20__inhoud h2 { font-size: 17px; letter-spacing: .16em; }
  .hw-m20__inhoud h3 { font-size: 16px; letter-spacing: .16em; }
}

/* --------------------------------------------------------------------------
   M21 404: één zwevende kaart in de M3-stijl, gecentreerd
   -------------------------------------------------------------------------- */
.hw-m21 { background: var(--hw-achtergrond); padding-block: calc(var(--hw-sectie-padding) + 40px); }
.hw-m21__kaart {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
  /* Een staande illustratie groeit met de beschikbare hoogte; de kaart
     biedt daarom een ruim podium, met de content onderin. */
  min-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hw-m21__illu {
  position: absolute;
  inset: 0 0 104px; /* onderin blijft ruimte vrij voor de knop */
  z-index: 0;
  pointer-events: none;
}
.hw-m21__illu .hw-svg { width: 100%; height: 100%; max-height: 100%; }
.hw-m21__inhoud {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Duwt de content onder het hart van de illustratie; door de
     centrering is de visuele verschuiving de helft hiervan. */
  padding-top: 240px;
}
.hw-m21__eyebrow { color: var(--hw-text); margin-bottom: 6px; }
.hw-m21__kop { color: var(--hw-text); }
.hw-m21__tekst { color: var(--hw-text); margin-top: 24px; margin-bottom: 40px; }
.hw-m21__tekst p { margin: 0 0 1em; } .hw-m21__tekst p:last-child { margin-bottom: 0; }

@media (max-width: 781px) {
  .hw-m21 { padding-block: 96px; }
  .hw-m21__kaart { min-height: 0; display: block; }
  /* Illustratie mag iets buiten de kaart steken, dichter op de randen */
  .hw-m21__illu { inset: 0 -28px 80px; }
  /* Meer aanloop zodat het hart van de illustratie zichtbaar blijft;
     de illustratie schaalt met de breedte, de aanloop dus ook. */
  .hw-m21__inhoud { padding-top: clamp(220px, 62vw, 300px); }
  .hw-m21__kop.hw-display-accent { font-size: 22px; }
}