/* =========================================================================
   HORECA IMPACT - designsysteem
   Ivo-skin: exact hetzelfde palet en dezelfde typografie als ivothijssen.nl.
   Sectieritme wisselt strikt Navy en Sky, met Sand eenmaal bij de quote.
   Geen build-stap: dit bestand wordt rechtstreeks ingeladen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS
   Alleen de vier merkkleuren komen in dit bestand voor. Elke kleur staat
   tweemaal: als hexwaarde (de canonieke waarde uit het merkboek, waarop het
   controlescript toetst) en als losse RGB-kanalen. De kanalen worden gebruikt
   voor alles met transparantie, zodat verlopen en sluiers automatisch
   meeveranderen als een kleur wijzigt. Bij Ivo ging dat één keer mis met een
   hardgecodeerde rgba() in de hero; deze opzet maakt die fout onmogelijk.
   LET OP: wijzig je een hex, wijzig dan de bijbehorende kanalen mee.
   ------------------------------------------------------------------------- */
/* Over de haarlijnen. De doorlopende lijnen tussen lijstregels blijven
   staan: die geven een lange lijst zijn ritme. Weg zijn de korte streepjes
   boven een kleine meta- of bijschriftregel binnen een blok. Die liepen door
   een max-width vaak niet tot de rand door, en dan lezen ze als een restje
   in plaats van als een scheiding. De rekentool houdt al zijn randen, want
   die begrenzen invoervelden en uitkomstregels. */
:root {
  --ivo-navy: #122439;
  --ivo-sky: #ECF5FF;
  --ivo-sand: #E3D2B6;
  --ivo-orange: #FF6B2C;

  /* De contrastkleur van een vlak, met de tekstkleur die daarbij hoort.
     Die twee horen bij elkaar: zet je alleen de achtergrond om en laat je
     de tekstkleur vast staan, dan levert elke nieuwe donkere context licht
     op licht op. Precies dat gebeurde met de omlijnde knop in de hero. */
  --vlak-contrast: var(--ivo-navy);
  --vlak-contrast-tekst: var(--ivo-sky);

  --navy-rgb: 18 36 57;
  --sky-rgb: 236 245 255;
  --sand-rgb: 227 210 182;
  --orange-rgb: 255 107 44;

  /* Typografie, overgenomen van ivothijssen.nl.
     Let op: die site laadt Futura PT niet; er staat Jost als variabele woff2
     ingesloten en dát is wat je in beeld ziet. De stack is hier gelijk
     gehouden, zodat Futura PT het automatisch overneemt zodra de Adobe
     Fonts-kit erin gaat. */
  /* 0.57.0: Jost voorop, gelijk aan ivothijssen.nl 0.22.0. Futura PT stond
     eerst, maar wordt alleen met een Adobe Fonts-kit geladen; wie Futura PT
     zelf op de computer had zag een andere site dan de rest. Met kit zet
     body.heeft-futura de volgorde om (onderaan dit bestand). */
  --font-titel: "Jost", "Jost terugval", "Futura", "Century Gothic", sans-serif;
  --font-tekst: "Open Sans", "Open Sans terugval", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Ritme en maatvoering */
  --container-max: 1560px;
  --gutter: clamp(20px, 4vw, 56px);
  --pad-sectie: clamp(72px, 7vw, 132px);
  --radius: 2px;
  --radius-knop: 0px;
  --header-h: clamp(68px, 5.5vw, 88px);
  --band-h: 62px;

  /* Contrast.
     Sectietitels stonden overal in oranje, zoals op ivothijssen.nl. Op Navy
     haalt Ivo Orange 5,5:1 en dat blijft dus staan. Op een licht vlak is het
     gemeten 2,58:1, onder de WCAG-eis van 3:1 voor grote tekst, en dat is
     hier eerst als geaccepteerde afwijking blijven staan. Bij de toetsing
     van 19 oktober kwam het punt terug met dezelfde meting, en toen is de
     keuze gemaakt: koppen op lichte vlakken worden navy. Het merkaccent gaat
     niet verloren, want de oranje accentstreep boven de kop neemt dat over,
     en op donkere vlakken en op knoppen blijft oranje gewoon oranje.
     Oranje tekst op Sand (1,9:1) stond al uit. */
  --titel-op-licht: var(--ivo-navy);
  --titel-op-donker: var(--ivo-orange);

  /* Typografische schaal (0.57.0), gelijk aan ivothijssen.nl 0.22.0. Eén
     labelmaat en één knopmaat, zodat niets meer onder de 12 pixel uitkomt.
     Was: zeven kleine maten tussen 10,5 en 12 pixel, met een letterafstand
     van 0,14 tot 0,24 em. Wie de ruimere spatiëring terug wil, zet alleen
     --ls-label en --ls-knop terug. --fs-menu is nieuw ten opzichte van het
     zusterthema: de review vraagt 13 pixel voor de hoofdmenu-items. */
  --fs-body: clamp(1rem, 1vw, 1.0625rem);
  --lh-body: 1.6;
  --fs-label: 0.75rem;
  --ls-label: 0.08em;
  --fs-knop: 0.875rem;
  --ls-knop: 0.08em;
  --fs-menu: 0.8125rem;
  --doel-min: 44px;

  --schaduw-zacht: 0 10px 40px rgb(var(--navy-rgb) / 0.10);
  --schaduw-diep: 0 30px 80px rgb(var(--navy-rgb) / 0.28);
}

/* -------------------------------------------------------------------------
   2. BASIS
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-tekst);
  /* Maten één op één van ivothijssen.nl. */
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  color: var(--ivo-navy);
  background: var(--ivo-sky);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-titel);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.008em;
  text-transform: uppercase;
  /* Geen automatische afbreking op display-koppen: een kop als "WAAR WIJ
     HORE-CATEAMS IN TRAINEN" oogt als een fout, niet als typografie. De maat
     wordt zo gekozen dat het langste woord past; break-word blijft staan als
     laatste redmiddel tegen overloop. Afbreking staat alleen aan op de kleine
     koppen in tegels en kaarten, waar de kolom nu eenmaal smal is. */
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
}

h1 { font-size: clamp(2.1rem, 5.6vw, 6.15rem); line-height: 0.9; letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 4vw, 3.9rem); }
h3 { font-size: clamp(1.05rem, 1.35vw, 1.28rem); font-weight: 500; line-height: 1.2; letter-spacing: 0.03em; }
h4 { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); }

p { margin: 0 0 1.1em; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }

img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 2rem 0;
}

/* Navy op oranje haalt 5,5:1; Sky op oranje zou op 2,6:1 uitkomen. */
::selection {
  background: var(--ivo-orange);
  color: var(--ivo-navy);
}

:focus-visible {
  outline: 3px solid var(--ivo-orange);
  outline-offset: 3px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 999;
  width: auto; height: auto;
  clip: auto; clip-path: none;
  padding: 12px 20px;
  background: var(--ivo-orange);
  color: var(--ivo-navy);
  font-weight: 700;
}

.site-main > *:first-child:not(.hero):not(.pagina-hero):not(.c4b-page) {
  padding-top: calc(var(--pad-sectie) + var(--header-h));
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------------------
   3. VLAKKEN
   Het sectieritme. Elke sectie krijgt precies één vlakklasse; de kleuren van
   tekst, titels en randen volgen daaruit, zodat een sectie-part zelf nooit
   een kleur hoeft te weten.
   ------------------------------------------------------------------------- */
.vlak-navy,
.vlak-sky,
.vlak-sand {
  padding-block: var(--pad-sectie);
  position: relative;
}

.vlak-navy {
  background: var(--ivo-navy);
  color: var(--ivo-sky);
  --titel: var(--titel-op-donker);
  --hairline: rgb(var(--sky-rgb) / 0.18);
  --zacht: rgb(var(--sky-rgb) / 0.72);
  --vlak-contrast: var(--ivo-sky);
  --vlak-contrast-tekst: var(--ivo-navy);
}

.vlak-sky {
  background: var(--ivo-sky);
  color: var(--ivo-navy);
  --titel: var(--titel-op-licht);
  --hairline: rgb(var(--navy-rgb) / 0.16);
  --zacht: rgb(var(--navy-rgb) / 0.70);
  --vlak-contrast: var(--ivo-navy);
  --vlak-contrast-tekst: var(--ivo-sky);
}

.vlak-sand {
  background: var(--ivo-sand);
  color: var(--ivo-navy);
  --titel: var(--ivo-navy);
  --hairline: rgb(var(--navy-rgb) / 0.20);
  --zacht: rgb(var(--navy-rgb) / 0.74);
  --vlak-contrast: var(--ivo-navy);
  --vlak-contrast-tekst: var(--ivo-sky);
}

/* Micro-label boven een sectietitel. Op lichte vlakken in navy met verlaagde
   dekking, op navy in oranje. Nooit oranje op sand. */
.eyebrow {
  display: inline-block;
  margin: 0 0 1.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--zacht);
}
.vlak-navy .eyebrow { color: var(--ivo-orange); }
.vlak-sand .eyebrow { color: rgb(var(--navy-rgb) / 0.62); }

.sectie-titel {
  color: var(--titel);
  max-width: 18ch;
}
.sectie-titel.breed { max-width: 26ch; }

/* Oranje accentstreep die op lichte vlakken het werk van de oranje titel
   overneemt zonder de contrasteis te breken. */
.accentstreep::before {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin-bottom: 1.4rem;
  background: var(--ivo-orange);
}

.lead {
  font-size: clamp(1.02rem, 1.15vw, 1.2rem);
  font-weight: 300;
  line-height: 1.75;
  color: var(--zacht);
  max-width: 54ch;
}

/* -------------------------------------------------------------------------
   4. KNOPPEN
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.1rem 1.8rem;
  /* 1px rand en scherpe hoeken, gemeten op ivothijssen.nl. */
  border: 1px solid transparent;
  border-radius: var(--radius-knop);
  font-family: var(--font-titel);
  font-size: var(--fs-knop);
  font-weight: 500;
  letter-spacing: var(--ls-knop);
  text-transform: uppercase;
  line-height: 1;
  min-height: var(--doel-min);
  min-width: var(--doel-min);
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.btn:hover { transform: translateY(-2px); }

.btn-primair {
  background: var(--ivo-orange);
  border-color: var(--ivo-orange);
  color: var(--ivo-navy);
}
.btn-primair:hover {
  background: var(--ivo-navy);
  border-color: var(--ivo-navy);
  color: var(--ivo-sky);
}

.btn-omlijnd {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.btn-omlijnd:hover {
  background: var(--vlak-contrast);
  border-color: var(--vlak-contrast);
  color: var(--vlak-contrast-tekst);
}

.btn-tekst {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  border-bottom: 2px solid var(--ivo-orange);
  border-radius: 0;
  padding-bottom: 0.35em;
}
.btn-tekst:hover { transform: none; color: var(--ivo-orange); }
.vlak-sand .btn-tekst:hover { color: var(--ivo-navy); border-bottom-color: var(--ivo-navy); }

.knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2rem;
}

/* -------------------------------------------------------------------------
   5. HEADER
   ------------------------------------------------------------------------- */
/* De header zweeft over de hero heen, zoals op ivothijssen.nl: geen dichte
   balk met een streep eronder, maar transparant tot er gescrold wordt. De
   hero vangt de hoogte op met padding-top, zodat er niets onder verdwijnt. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  color: var(--ivo-sky);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.site-header.is-gekrompen {
  background: rgb(var(--navy-rgb) / 0.96);
  border-bottom-color: rgb(var(--sky-rgb) / 0.12);
  backdrop-filter: blur(12px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
  padding-block: 10px;
}

/* Geldt voor zowel het eigen logo als de <a class="custom-logo-link"> die
   WordPress zelf om het logo heen zet. */
.site-logo { display: inline-flex; align-items: center; }
.site-logo img,
.site-logo svg,
.site-logo .site-logo-img,
.site-logo .custom-logo-link img {
  height: clamp(38px, 3.2vw, 52px);
  width: auto;
  max-width: 300px;
  object-fit: contain;
}

.header-inner .nav-cta { font-size: var(--fs-knop); padding: 0.88rem 1.35rem; }
/* De CTA mag nooit over het laatste menu-item heen schuiven. */
.nav-cta-item { flex: none; margin-left: clamp(8px, 1vw, 20px); }
.nav-menu > li:not(.nav-cta-item) { min-width: 0; }

.site-logo-tekst {
  font-family: var(--font-titel);
  font-size: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.site-logo-tekst strong { font-weight: 700; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 36px);
}
.nav-menu > li { position: relative; }

.nav-link {
  display: inline-block;
  padding: 10px 2px;
  font-family: var(--font-titel);
  font-size: var(--fs-menu);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.3s ease, border-color 0.2s ease;
}
/* Aanwijzen en "hier ben je" zagen er hetzelfde uit: allebei een volle
   oranje rand. Bij het langslopen van het menu raakte je daardoor kwijt
   op welke pagina je stond. Hover is nu een halve rand, de actieve
   pagina een volle. */
.nav-link:hover,
.nav-ouder:hover { border-bottom-color: rgb(var(--orange-rgb) / 0.45); opacity: 1; }
.nav-menu .is-actief > .nav-link { opacity: 1; }
.nav-menu .is-actief > .nav-link { border-bottom-color: var(--ivo-orange); }
.nav-ouder { cursor: default; }

.nav-cta::after {
  /* Was \2197 (schuin omhoog): dat suggereert een externe link, en de knop gaat naar een pagina op deze site. */
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
}

.nav-caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 8px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ivo-orange);
  vertical-align: middle;
}

.submenu {
  position: absolute;
  top: 100%;
  left: -18px;
  min-width: max-content;
  padding: 10px 0;
  background: var(--ivo-navy);
  border: 1px solid rgb(var(--sky-rgb) / 0.14);
  box-shadow: var(--schaduw-diep);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-menu > li:hover > .submenu,
.nav-menu > li:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu a {
  display: block;
  padding: 10px 22px;
  font-size: 0.86rem;
  color: var(--ivo-sky);
  white-space: nowrap;
}
.submenu a:hover { color: var(--ivo-orange); }

.menu-toggle {
  display: none;
  width: 46px; height: 46px;
  padding: 0;
  background: none;
  border: 1px solid rgb(var(--sky-rgb) / 0.3);
  border-radius: var(--radius);
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 22px; height: 2px;
  margin: 4px auto;
  background: var(--ivo-sky);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   6. HERO
   Opzet gelijk aan ivothijssen.nl: één paginabreed beeld met een navy
   leessluier van links, de tekst eroverheen, en onderaan een lopende band.
   ------------------------------------------------------------------------- */
.hero,
.pagina-hero {
  position: relative;
  background: var(--ivo-navy);
  color: var(--ivo-sky);
  --titel: var(--ivo-orange);
  --zacht: rgb(var(--sky-rgb) / 0.78);
  --hairline: rgb(var(--sky-rgb) / 0.18);
  --vlak-contrast: var(--ivo-sky);
  --vlak-contrast-tekst: var(--ivo-navy);
  overflow: hidden;
  isolation: isolate;
}

/* De hero vult het scherm. svh in plaats van vh, anders springt de hoogte
   op een telefoon mee met de adresbalk. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 90px));
}

.hero-beeld {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  /* Horizontaal rechts, zodat de tekst links op het rustige deel van de
     foto staat. Verticaal bewust hoog en niet in het midden: de heroes
     zijn breed en laag, en de foto's zijn staand. Het midden van een
     staande foto van een pratende man is zijn borst, dus met "center"
     viel het hoofd buiten beeld. Op achtentwintig procent blijft het
     gezicht in het kader en blijft er onder nog genoeg over. */
  background-position: right 28%;
}

/* De leessluier. Op 30 oktober lichter gezet: op de groepsfoto's
   verdwenen de mensen links in het donkerste deel. De stops onder de
   tekst blijven zwaar genoeg voor leesbaar wit (ruim boven 4,5:1), de
   rechterhelft is vrijwel opengetrokken.
   Opgebouwd uit de kanaalvariabele, dus hij verandert mee
   als --navy-rgb wijzigt. Bij Ivo ging dat ooit mis met een hardgecodeerde
   rgba() en leverde dat een zichtbare rand op. */
.hero-beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgb(var(--navy-rgb) / 0.90) 0%,
      rgb(var(--navy-rgb) / 0.78) 26%,
      rgb(var(--navy-rgb) / 0.28) 56%,
      rgb(var(--navy-rgb) / 0.05) 82%,
      rgb(var(--navy-rgb) / 0.03) 100%
    ),
    linear-gradient(
      0deg,
      rgb(var(--navy-rgb) / 0.40) 0%,
      rgb(var(--navy-rgb) / 0) 38%
    );
}

.hero-inhoud {
  position: relative;
  z-index: 1;
  /* Ruimte voor de band, die onderin de hero ligt in plaats van eronder. */
  padding-bottom: calc(var(--band-h) + clamp(36px, 4.5vw, 76px));
}

/* Het label: streepje, tekst, punt, tekst. Zonder volgnummer. */
.hero-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin: 0 0 1.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--zacht);
}
.hero-label .scheider { color: var(--ivo-orange); letter-spacing: 0; }

.hero h1 {
  max-width: 16ch;
  margin-bottom: clamp(28px, 3.5vw, 56px);
}

/* Herotitel: twee gewichten, geen kleurverschil.
   Het deel in <strong> valt op doordat het zwaarder staat. Op deze maat is
   dat genoeg; een kop van bijna honderd pixels hoeft niet ook nog van kleur
   te wisselen. De gewichten staan lichter dan de rest van de koppen: 400
   tegen 700, met hetzelfde verschil ertussen dat eerder per ongeluk ontstond
   (600 tegen 900), maar twee stappen rustiger.
   Beide herovarianten staan hier samen, want eerder gold de regel alleen
   voor .hero en kreeg .pagina-hero stilzwijgend het vette van de browser. */
.hero h1,
.pagina-hero h1 {
  font-weight: 400;
}
.hero h1 strong,
.pagina-hero h1 strong {
  font-weight: 700;
  color: inherit;
}

.pagina-hero h1 { max-width: 20ch; }

/* Leadtekst en knoppen naast elkaar, niet onder elkaar. */
.hero-onder {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 48px);
  align-items: end;
}
@media (min-width: 900px) {
  .hero-onder {
    grid-template-columns: minmax(24ch, 0.5fr) minmax(min-content, auto);
    justify-content: start;
    gap: clamp(32px, 5vw, 80px);
  }
}
.hero-onder .lead { max-width: 34ch; margin: 0; }
.hero-onder .knoprij { margin: 0; }

/* Compacte hero voor subpagina's. */
.pagina-hero {
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 120px));
  padding-bottom: clamp(72px, 9vw, 150px);
}
.pagina-hero .hero-beeld::after {
  background: linear-gradient(
    100deg,
    rgb(var(--navy-rgb) / 0.86) 0%,
    rgb(var(--navy-rgb) / 0.55) 48%,
    rgb(var(--navy-rgb) / 0.25) 100%
  );
}
.pagina-hero .lead { margin-top: 1.2rem; }

/* De lopende band onder de hero. */
.hero-band {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  border-top: 1px solid var(--hairline);
  background: rgb(var(--navy-rgb) / 0.85);
  overflow: hidden;
  padding-block: 20px;
  /* Een masker kijkt alleen naar dekking, niet naar kleur. Daarom een
     merkkleur in plaats van zwart: zo blijft het bestand aan het merkboek
     voldoen en slaat de kleurscan niet aan op een kleur die niemand ziet. */
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--ivo-navy) 6%, var(--ivo-navy) 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--ivo-navy) 6%, var(--ivo-navy) 94%, transparent);
}
.hero-band__spoor {
  display: flex;
  width: max-content;
  animation: hithm-band 46s linear infinite;
}
.hero-band__spoor span {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  padding-inline: 1.5rem;
  opacity: 0.62;
}
.hero-band__spoor span::after {
  content: "\25C6";
  margin-left: 3rem;
  font-size: 0.5em;
  vertical-align: 0.35em;
  color: var(--ivo-orange);
  opacity: 0.9;
}
@keyframes hithm-band {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-band__spoor { animation: none; }
}

/* -------------------------------------------------------------------------
   7. SECTIE - AANBOD, verspringende tegels
   Naar het voorbeeld van ivothijssen.nl: geen kaarten met een rand, maar
   foto met tekst eronder, een spookcijfer erboven en een aflopende trap.
   Kolommen schalen mee met hun inhoud; geen vaste vw-breedtes, dat was bij
   Ivo precies de oorzaak van drie te smalle kolommen.
   ------------------------------------------------------------------------- */
/* Geen regelbreedte-cap: deze kop hoort op één regel te staan, de container
   begrenst hem al. Met de ingesloten letter past "Waar wij horecateams in
   trainen" vanaf ongeveer 900px op één regel. */
.sectie-aanbod .blok-titel { margin-bottom: 1.2rem; max-width: none; }
.sectie-aanbod .lead { margin-bottom: clamp(30px, 4vw, 60px); }

.aanbod-raster {
  display: grid;
  /* 300px is met de sweep bepaald: breed genoeg dat "Leerambassadeur" en
     "Bedrijfsleider" heel blijven staan. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}

.aanbod-tegel {
  display: flex;
  flex-direction: column;
  color: inherit;
}

/* De zigzag. Geen rechte trap maar om en om hoog en laag, waarbij elk paar
   iets verder zakt: 0, laag, half, laag+half. Zo staat het op
   ivothijssen.nl.

   Het aantal kolommen volgt uit de minimumbreedte van 320px en de container
   van 1560px: drie kolommen tussen 1100 en 1500, vier daarboven. De modulo
   is daarop afgestemd, anders springt het patroon halverwege een rij terug
   en oogt het als een fout in plaats van een ritme. */
:root {
  --zigzag-laag: clamp(48px, 5vw, 96px);
  --zigzag-half: clamp(26px, 2.6vw, 50px);
}

@media (min-width: 1100px) and (max-width: 1499px) {
  .aanbod-tegel:nth-child(3n+2) { margin-top: var(--zigzag-laag); }
  .aanbod-tegel:nth-child(3n+3) { margin-top: var(--zigzag-half); }
}
/* Vanaf 1520px staan alle vijf de trajecten op één rij, zoals op
   ivothijssen.nl. De kolom is dan 266 tot 274px breed. De tegel gaat daar
   een maat omlaag, want "Leerambassadeurbegeleiding" is 26 tekens in één
   woord en moet heel blijven.

   De maten zijn teruggerekend met de systeemletter, die breder is dan Jost.
   Zodra de webfonts geladen zijn is dat woord ongeveer een vijfde smaller,
   dus er zit marge in. */
@media (min-width: 1520px) {
  /* Het aantal kolommen volgt het aantal tegels in plaats van vast op vijf
     te staan. auto-fit maakt vijf sporen en klapt de lege weer in, waarna de
     overgebleven tegels de vrije ruimte verdelen. Stond hier repeat(5), dan
     bleef bij vier onderdelen de vijfde kolom leeg en hing het hele blok
     een kolombreedte links van het midden. Komt er ooit een vijfde bij, dan
     staat het vanzelf weer zoals het was. */
  .aanbod-raster {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
    gap: 20px;
  }

  /* Vanaf vijf tegels weer hard op vijf kolommen. auto-fit rekent met een
     minimumbreedte en zou bij krappe ruimte de vijfde tegel op een tweede
     rij zetten; repeat(5) maakt de kolommen dan liever iets smaller. */
  .aanbod-raster:has(.aanbod-tegel:nth-child(5)) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* De kleinere letter hieronder is er voor vijf smalle kolommen, waar
     "Leerambassadeurbegeleiding" maar net past. Bij vier of minder is de
     tegel een stuk breder en blijft de gewone maat staan.

     Met de tegelklasse ervoor, anders wint de basisregel verderop in dit
     bestand op volgorde. */
  .aanbod-raster:has(.aanbod-tegel:nth-child(5)) .aanbod-tegel .tegel-nummer { font-size: 3.4rem; margin-bottom: 0.5rem; }
  .aanbod-raster:has(.aanbod-tegel:nth-child(5)) .aanbod-tegel .tegel-titel { font-size: 0.82rem; letter-spacing: 0.04em; }
  .aanbod-raster:has(.aanbod-tegel:nth-child(5)) .aanbod-tegel .tegel-tekst { font-size: 0.85rem; line-height: 1.5; }
  .aanbod-raster:has(.aanbod-tegel:nth-child(5)) .aanbod-tegel .aanbod-tegel__cijfer b { font-size: 1.5rem; }
  .aanbod-raster:has(.aanbod-tegel:nth-child(5)) .aanbod-tegel .aanbod-tegel__cijfer span { font-size: var(--fs-label); }
  .aanbod-raster:has(.aanbod-tegel:nth-child(5)) .aanbod-tegel .aanbod-tegel__body { gap: 0.45rem; padding-top: 0.9rem; }

  .aanbod-tegel:nth-child(5n+2) { margin-top: var(--zigzag-laag); }
  .aanbod-tegel:nth-child(5n+3) { margin-top: var(--zigzag-half); }
  .aanbod-tegel:nth-child(5n+4) { margin-top: calc(var(--zigzag-laag) + var(--zigzag-half)); }
  .aanbod-tegel:nth-child(5n+5) { margin-top: calc(var(--zigzag-half) * 2); }
}

.tegel-nummer {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-titel);
  font-size: clamp(3rem, 5vw, 5.8rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  /* Alleen een omtrek, geen vulling. */
  color: transparent;
  -webkit-text-stroke: 1.5px var(--hairline);
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}
/* Bij hover vult het cijfer zich oranje, zoals op ivothijssen.nl. */
.aanbod-tegel:hover .tegel-nummer {
  color: var(--ivo-orange);
  -webkit-text-stroke-color: var(--ivo-orange);
}

.aanbod-tegel figure {
  margin: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ivo-navy);
}
.aanbod-tegel figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.aanbod-tegel:hover figure img { transform: scale(1.05); }

.aanbod-tegel__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.1rem;
}

.tegel-titel {
  font-family: var(--font-titel);
  /* Kleiner dan een gewone h3: "Leerambassadeurbegeleiding" is één woord
     van 26 tekens en moet in een tegelkolom heel blijven staan. Maat met de
     sweep teruggerekend. */
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.1rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.15;
  overflow-wrap: break-word;
  hyphens: auto;
}
.aanbod-tegel:hover .tegel-titel { color: var(--ivo-orange); }

.tegel-tekst {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--zacht);
}

.aanbod-tegel__cijfer {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  margin-top: 0.3rem;
  padding-top: 0.7rem;
}
.aanbod-tegel__cijfer b {
  font-family: var(--font-titel);
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ivo-sand);
}
.vlak-sky .aanbod-tegel__cijfer b,
.vlak-sand .aanbod-tegel__cijfer b { color: var(--ivo-orange); }
.aanbod-tegel__cijfer span {
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--zacht);
}

/* -------------------------------------------------------------------------
   8. SECTIE - IN CIJFERS, reuzenlijst
   Het getal in Sand, alleen het plus- of procentteken in Oranje, en rechts
   een klein categorielabel. Zo op ivothijssen.nl.
   ------------------------------------------------------------------------- */
.cijferlijst { border-top: 1px solid var(--hairline); }

.cijferlijst li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding-block: clamp(24px, 3vw, 46px);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 760px) {
  .cijferlijst li {
    /* De cijferkolom schaalt mee met zijn eigen inhoud in plaats van een
       vaste vw-breedte; zo kan "3.000+" nooit meer afbreken. */
    grid-template-columns: minmax(max-content, auto) minmax(24ch, 1fr) minmax(max-content, auto);
    align-items: center;
    gap: clamp(28px, 5vw, 90px);
  }
}

.cijferlijst .waarde {
  font-family: var(--font-titel);
  font-size: clamp(3.2rem, 8vw, 7.4rem);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.03em;
  color: var(--ivo-sand);
  font-variant-numeric: tabular-nums;
  min-width: 3.1em;
  white-space: nowrap;
}
/* Het teken staat kleiner en hoger, als een superscript. */
.cijferlijst .waarde .teken {
  color: var(--ivo-orange);
  font-size: 0.5em;
  vertical-align: 0.5em;
}
/* Op Sand zelf zou het getal wegvallen; daar wordt het navy. */
.vlak-sand .cijferlijst .waarde { color: var(--ivo-navy); }

.cijferlijst .omschrijving {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--zacht);
  max-width: 28ch;
}
.cijferlijst .bron {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0.55;
}
.cijferlijst .categorie {
  justify-self: end;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
  opacity: 0.42;
  white-space: nowrap;
}
@media (max-width: 759px) {
  .cijferlijst .categorie { justify-self: start; }
}

/* -------------------------------------------------------------------------
   9. SECTIE - WERKWIJZE IN STAPPEN, sticky intro
   ------------------------------------------------------------------------- */
.sectie-stappen .stappen-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 70px);
}
@media (min-width: 1000px) {
  .sectie-stappen .stappen-raster {
    grid-template-columns: minmax(22ch, 0.8fr) minmax(0, 1.2fr);
  }
  .sectie-stappen .stappen-intro {
    position: sticky;
    top: 120px;
    align-self: start;
  }
}

.stappen-lijst > li {
  display: grid;
  grid-template-columns: minmax(max-content, auto) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 40px);
  padding-block: clamp(22px, 2.6vw, 40px);
  border-top: 1px solid var(--hairline);
}
.stappen-lijst > li:last-child { border-bottom: 1px solid var(--hairline); }

.stappen-lijst .nummer {
  font-family: var(--font-titel);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ivo-orange);
}
.vlak-sand .stappen-lijst .nummer { color: var(--ivo-navy); }

.stappen-lijst h3 { margin-bottom: 0.5rem; }
.stappen-lijst p { color: var(--zacht); max-width: 58ch; }

/* -------------------------------------------------------------------------
   10. SECTIE - QUOTE, paginabreed op Sand
   ------------------------------------------------------------------------- */
.sectie-quote { text-align: center; }
/* De quote was een mega-statement: kapitalen op vier rem. Dat schreeuwde,
   en bij een lange zin brak hij middenin een woord af. Nu rustiger: gewone
   kapitalisatie, ruim de helft kleiner, en een iets lichtere kleur zodat de
   uitspraak leest als een gedachte in plaats van als een poster. De regel
   mag langer worden, want kleinere letters dragen meer tekens per regel. */
.sectie-quote blockquote {
  margin: 0 auto;
  /* Breedte in ch, zodat de regel meeschaalt met de lettergrootte en de
     quote nooit uit zijn kader loopt. Gecentreerd leest een uitspraak het
     beste in korte regels, dus smaller dan bij links uitgelijnde tekst:
     dertig tekens geeft hier drie regels in plaats van twee lange. */
  max-width: 30ch;
  font-family: var(--font-titel);
  /* Groter dan de vorige versie, maar nog steeds gewone kapitalisatie.
     Die eerste opzet stond op vier rem in hoofdletters en schreeuwde; dit
     draagt wel als uitspraak zonder een poster te worden. */
  font-size: clamp(1.5rem, 1.05rem + 1.8vw, 2.6rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: rgb(var(--navy-rgb) / 0.88);
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: manual;
}
.vlak-navy .sectie-quote blockquote { color: rgb(var(--sky-rgb) / 0.92); }
.sectie-quote blockquote::before { content: "\201C"; }
.sectie-quote blockquote::after { content: "\201D"; }

.sectie-quote figcaption {
  margin: clamp(24px, 3vw, 44px) auto 0;
  padding-top: 1.2rem;
  max-width: 40ch;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.sectie-quote figcaption small {
  display: block;
  margin-top: 0.4rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 0.9rem;
  color: rgb(var(--navy-rgb) / 0.7);
}

/* -------------------------------------------------------------------------
   11. SECTIE - TEKSTBLOK, redactioneel met beeld buiten het grid
   ------------------------------------------------------------------------- */
.sectie-tekstblok .tekstblok-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (min-width: 900px) {
  .sectie-tekstblok .tekstblok-raster.heeft-beeld {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  }
  .sectie-tekstblok .tekstblok-beeld { margin-top: clamp(20px, 3vw, 56px); }
}
.sectie-tekstblok .tekstblok-tekst { max-width: 62ch; }
.sectie-tekstblok .tekstblok-tekst p,
.sectie-tekstblok .tekstblok-tekst li { color: var(--zacht); }
.sectie-tekstblok .tekstblok-tekst ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5em;
}
.sectie-tekstblok .tekstblok-tekst ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 2px;
  background: var(--ivo-orange);
}
.tekstblok-beeld img { width: 100%; }

/* -------------------------------------------------------------------------
   11b. SECTIE - CONTENTBLOK
   Opbouw naar het voorbeeld van ivothijssen.nl: het beeld loopt door tot de
   rand van het venster, het tekstvlak staat ernaast. Geen kader, geen
   schaduw, geen ronde hoek: vlak redactioneel.
   ------------------------------------------------------------------------- */
.sectie-contentblok {
  padding-block: 0;
  overflow: hidden;
}

.sectie-contentblok .contentblok-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  /* Half om half. De tekstkolom is daarmee smaller dan voorheen; de
     kopmaat verderop is daarop teruggerekend zodat lange samenstellingen
     heel blijven staan. */
  .sectie-contentblok .contentblok-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: clamp(520px, 52vw, 860px);
  }
  .sectie-contentblok .contentblok-beeld { grid-column: 1; grid-row: 1; }
  .sectie-contentblok .contentblok-tekst { grid-column: 2; grid-row: 1; }

  /* Beeld rechts is de omgekeerde stand. */
  .sectie-contentblok:not(.beeld-links) .contentblok-beeld { grid-column: 2; }
  .sectie-contentblok:not(.beeld-links) .contentblok-tekst { grid-column: 1; }
}

.sectie-contentblok .contentblok-beeld {
  margin: 0;
  min-height: clamp(260px, 52vw, 520px);
  background: var(--ivo-navy);
}
.sectie-contentblok .contentblok-beeld img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

/* De uitlijnmarge zit op de kolom, niet op het tekstblok zelf. Dat is
   bewust: met box-sizing: border-box telt padding mee in max-width, en op
   een breed scherm at de padding het hele tekstblok op, waardoor de kop op
   nul breedte uitkwam en per letter afbrak. Kolom houdt de marge, blok
   houdt de regelbreedte. */
.sectie-contentblok .contentblok-tekst {
  display: flex;
  align-items: center;
  padding-block: var(--pad-sectie);
  padding-inline: var(--gutter);
}
@media (min-width: 900px) {
  .sectie-contentblok.beeld-links .contentblok-tekst {
    padding-left: clamp(36px, 5vw, 86px);
    padding-right: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  }
  .sectie-contentblok:not(.beeld-links) .contentblok-tekst {
    padding-right: clamp(36px, 5vw, 86px);
    padding-left: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  }
}

.sectie-contentblok .contentblok-inner {
  width: 100%;
  max-width: 62ch;
}

.sectie-contentblok.zonder-beeld .contentblok-inner {
  max-width: 68ch;
  margin-inline: auto;
}
/* Zonder beeld hoort er geen half leeg raster te staan. Het blok valt dan
   terug op één kolom met de gewone sectiehoogte, zodat een contentblok ook
   zonder foto af oogt. */
@media (min-width: 900px) {
  .sectie-contentblok.zonder-beeld .contentblok-raster {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .sectie-contentblok.zonder-beeld .contentblok-tekst {
    grid-column: 1;
    padding-inline: max(var(--gutter), calc((100vw - var(--container-max)) / 2 + var(--gutter)));
  }
}

/* Eyebrow: streepje en label. */
.blok-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin: 0 0 1.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  line-height: 1.6;
  text-transform: uppercase;
}
.blok-streep {
  width: 28px;
  height: 2px;
  background: var(--ivo-orange);
  flex: none;
}
.blok-label { color: var(--zacht); }

.blok-titel {
  margin-bottom: 1.8rem;
  font-weight: 600;
  font-size: clamp(2.2rem, 4.6vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--titel);
  max-width: 19ch;
}

/* Eerste alinea als lead, de rest kleiner en rustiger. Zo hoeft de redactie
   geen apart veld te vullen om dat verschil te krijgen. */
.sectie-contentblok .contentblok-body > p:first-child {
  font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.6;
  color: var(--vlak-contrast);
  max-width: 56ch;
}
.sectie-contentblok .contentblok-body > p:first-child + p,
.sectie-contentblok .contentblok-body > p ~ p {
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--zacht);
  max-width: 54ch;
}
.sectie-contentblok .contentblok-body ul { margin: 1.1em 0; }
.sectie-contentblok .contentblok-body ul li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.5em;
  color: var(--zacht);
}
.sectie-contentblok .contentblok-body ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.65em;
  width: 8px; height: 2px;
  background: var(--ivo-orange);
}
.sectie-contentblok .contentblok-body a:not(.btn) { border-bottom: 1px solid var(--ivo-orange); }

.blok-meta {
  margin: 1.6rem 0 0;
  font-size: 0.92rem;
  color: var(--zacht);
}

.sectie-contentblok .knoprij { margin-top: 2rem; }

/* Knop die de contrastkleur van zijn vlak aanneemt: navy op licht,
   Sky op navy. */
.btn-vlak {
  background: var(--vlak-contrast);
  border-color: var(--vlak-contrast);
  color: var(--vlak-contrast-tekst);
}
.btn-vlak:hover {
  background: var(--ivo-orange);
  border-color: var(--ivo-orange);
  color: var(--ivo-navy);
}
.btn-vlak::after {
  content: "\2197";
  font-size: 1.05em;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   11c. SECTIE - KAARTENRIJ
   ------------------------------------------------------------------------- */
.kaarten-raster {
  display: grid;
  /* 360px is met de sweep bepaald: daarmee vallen vensters tot en met 1180
     terug op twee kaarten in plaats van drie te smalle, waarin woorden als
     "samenwerkingsverband" niet meer heel pasten. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(18px, 2vw, 32px);
  margin-top: clamp(28px, 3.5vw, 52px);
  align-items: start;
}

.kaart {
  display: flex;
  flex-direction: column;
  background: var(--ivo-sky);
  color: var(--ivo-navy);
  border: 1px solid rgb(var(--navy-rgb) / 0.10);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.vlak-sky .kaart { background: var(--ivo-sand); border-color: rgb(var(--navy-rgb) / 0.14); }
a.kaart:hover { transform: translateY(-6px); box-shadow: var(--schaduw-diep); }

.kaart figure { margin: 0; overflow: hidden; }
.kaart figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}
a.kaart:hover figure img { transform: scale(1.05); }

.kaart-body {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
  padding: clamp(20px, 2vw, 30px);
}
.kaart-body h3 { font-size: clamp(1.1rem, 1rem + 0.45vw, 1.45rem); }
.kaart-body p { font-size: 0.95rem; color: rgb(var(--navy-rgb) / 0.78); }
.kaart-link {
  margin-top: auto;
  padding-top: 0.6rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
a.kaart:hover .kaart-link { color: var(--ivo-orange); }

/* -------------------------------------------------------------------------
   12. SECTIE - USP-GRID
   ------------------------------------------------------------------------- */
.usp-icoon {
  width: 46px;
  height: 46px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.usp-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26ch), 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: clamp(30px, 4vw, 56px);
}
.usp-raster li {
  padding: clamp(24px, 2.6vw, 44px);
  background: inherit;
}
.vlak-navy .usp-raster li { background: var(--ivo-navy); }
.vlak-sky .usp-raster li { background: var(--ivo-sky); }
.vlak-sand .usp-raster li { background: var(--ivo-sand); }
.usp-raster h3 { margin-bottom: 0.6rem; }
.usp-raster p { color: var(--zacht); font-size: 0.95rem; }

/* -------------------------------------------------------------------------
   13. SECTIE - CONTACTBLOK
   Geen dicht oranje vlak meer, maar de opzet van het contactblok van
   ivothijssen.nl: licht vlak, genummerd label, grote oranje kop met tekst
   links, knoppen rechts, merkteken als watermerk erachter.
   ------------------------------------------------------------------------- */
.sectie-cta { overflow: hidden; }

.sectie-cta .cta-raster {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 900px) {
  .sectie-cta .cta-raster {
    grid-template-columns: minmax(0, 1.25fr) minmax(min-content, auto);
    align-items: end;
  }
}

.sectie-cta .cta-tekst { position: relative; z-index: 1; }
.sectie-cta .blok-titel { max-width: 13ch; margin-bottom: 2.2rem; }
.sectie-cta .lead { max-width: 48ch; }

.sectie-cta .cta-acties {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
@media (min-width: 900px) {
  .sectie-cta .cta-acties { justify-content: flex-end; padding-bottom: 0.3rem; }
}

/* Watermerk: groot, bijna weggevallen, rechts achter de knoppen. Op een
   lichtvlak nauwelijks zichtbaar, precies zoals het bedoeld is. */
.sectie-cta .cta-merkteken {
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  bottom: -18%;
  width: clamp(220px, 26vw, 420px);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
.sectie-cta .cta-merkteken img {
  width: 100%;
  height: auto;
  /* Het logo mag hier alleen als vorm dienen, niet als kleurvlak. */
  filter: grayscale(1);
}
@media (max-width: 899px) {
  .sectie-cta .cta-merkteken { display: none; }
}

.sectie-cta .hi-formulier { width: min(100%, 26rem); }

/* -------------------------------------------------------------------------
   14. SECTIE - FOTOCOLLAGE en LOGORIJ
   ------------------------------------------------------------------------- */
.foto-collage {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(10px, 1.2vw, 20px);
  margin-top: clamp(30px, 4vw, 56px);
}
.foto-collage figure { margin: 0; overflow: hidden; }
.foto-collage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s ease; }
.foto-collage figure:hover img { transform: scale(1.04); }
@media (min-width: 900px) {
  .foto-collage figure:first-child { grid-column: span 2; grid-row: span 2; }
  .foto-collage figure:first-child img { aspect-ratio: 1 / 1; }
}

.logo-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 70px);
  margin-top: clamp(26px, 3vw, 44px);
}
.logo-rij img {
  max-height: 46px;
  width: auto;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.logo-rij img:hover { opacity: 1; filter: grayscale(0); }

/* -------------------------------------------------------------------------
   15. AANBOD- EN CASEDETAIL
   ------------------------------------------------------------------------- */
.aanbod-feiten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20ch), 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.aanbod-feiten div { padding: clamp(18px, 2vw, 28px); background: var(--ivo-sky); }
.aanbod-feiten dt {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgb(var(--navy-rgb) / 0.6);
  margin-bottom: 0.4rem;
}
.aanbod-feiten dd { margin: 0; font-size: 1.05rem; font-weight: 600; }

.aanbod-raster-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: start;
}
@media (min-width: 1000px) {
  .aanbod-raster-detail { grid-template-columns: minmax(0, 1.3fr) minmax(26ch, 0.7fr); }

  /* Zonder zijkolom liep de tekst in een smalle linkerkolom terwijl rechts
     een lege plek openstond. Dan maar één kolom over de volle breedte. */
  .aanbod-raster-detail:not(:has(.aanbod-zijkant)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .aanbod-zijkant { position: sticky; top: 120px; }
}
.aanbod-inhoud { max-width: 78ch; }
.aanbod-inhoud h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin: 2rem 0 0.8rem; }
.aanbod-inhoud p { color: var(--zacht); }

.aanbod-zijkant {
  padding: clamp(24px, 3vw, 40px);
  background: var(--ivo-navy);
  color: var(--ivo-sky);
}
.aanbod-zijkant h3 { color: var(--ivo-orange); margin-bottom: 1rem; }
.aanbod-zijkant li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.7em;
  font-size: 0.95rem;
  color: rgb(var(--sky-rgb) / 0.82);
}
.aanbod-zijkant li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 2px;
  background: var(--ivo-orange);
}
.aanbod-zijkant .btn { margin-top: 1.2rem; width: 100%; justify-content: center; }

/* -------------------------------------------------------------------------
   16. ARTIKELEN, ZOEKEN, 404
   ------------------------------------------------------------------------- */
/* auto-fill en niet auto-fit. Met auto-fit vallen lege kolommen weg en
   rekt één kaart zich uit over de volle breedte; dat zag eruit als een
   banner in plaats van als het eerste item van een reeks. Met auto-fill
   blijven de kolommen staan en houdt een enkele kaart zijn gewone maat. */
.artikel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 28ch), 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.artikel-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border: 1px solid var(--hairline);
}

/* Het beeld raakt de rand van de kaart; de tekst eronder houdt zijn eigen
   binnenruimte. De verhouding ligt vast, zodat een rij kaarten één lijn
   houdt ook als de foto's verschillend zijn uitgesneden. */
.artikel-kaart-beeld {
  display: block;
  overflow: hidden;
  background: rgb(var(--navy-rgb) / 0.06);
}
.artikel-kaart-beeld img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.artikel-kaart:hover .artikel-kaart-beeld img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .artikel-kaart-beeld img { transition: none; }
  .artikel-kaart:hover .artikel-kaart-beeld img { transform: none; }
}

/* De tekst van de kaart. Stond eerder als padding op de kaart zelf, maar
   dan kreeg het beeld die padding ook en zweefde het in een kader. */
.artikel-kaart > :not(.artikel-kaart-beeld) {
  margin-inline: clamp(20px, 2.2vw, 32px);
}
.artikel-kaart > :not(.artikel-kaart-beeld):first-child { margin-top: clamp(20px, 2.2vw, 32px); }
.artikel-kaart > :last-child { margin-bottom: clamp(20px, 2.2vw, 32px); }
.artikel-kaart-beeld + time { margin-top: clamp(18px, 2vw, 26px); }

/* Duwt de leeslink naar de onderkant, zodat die in elke kaart van een rij
   op dezelfde hoogte staat. */
.artikel-kaart .artikel-lees { margin-top: auto; }
.artikel-kaart h2 { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); }
.artikel-kaart p { color: var(--zacht); font-size: 0.95rem; }
.artikel-kaart time {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0.66;
}

.entry-content { max-width: 68ch; }
.entry-content h2 { margin: 2.2rem 0 0.8rem; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); }
.entry-content h3 { margin: 1.8rem 0 0.6rem; }
.entry-content ul { margin: 0 0 1.2em; }
.entry-content ul li { position: relative; padding-left: 1.4em; margin-bottom: 0.45em; }
.entry-content ul li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 8px; height: 2px; background: var(--ivo-orange);
}
.entry-content a:not(.btn) { border-bottom: 1px solid var(--ivo-orange); }
.entry-content blockquote {
  margin: 1.6rem 0;
  padding-left: 1.4rem;
  border-left: 3px solid var(--ivo-orange);
  font-size: 1.1rem;
}
.entry-content img { margin: 1.6rem 0; }

.zoekformulier {
  display: flex;
  gap: 10px;
  max-width: 34rem;
  margin-top: 1.6rem;
}
.zoekformulier input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 0.9em 1em;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 2px solid var(--hairline);
  border-radius: var(--radius);
}
.zoekformulier input[type="search"]:focus { border-color: var(--ivo-orange); outline: none; }

.paginering {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(30px, 4vw, 54px);
}
.paginering .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  font-weight: 700;
  font-size: 0.9rem;
}
.paginering .page-numbers.current,
.paginering .page-numbers:hover { background: var(--ivo-orange); border-color: var(--ivo-orange); color: var(--ivo-navy); }

/* -------------------------------------------------------------------------
   17. FORMULIEREN
   ------------------------------------------------------------------------- */
.hi-formulier label {
  display: block;
  margin-bottom: 1rem;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.hi-formulier input[type="text"],
.hi-formulier input[type="email"],
.hi-formulier input[type="tel"],
.hi-formulier select,
.hi-formulier textarea {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.9em 1em;
  font: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ivo-navy);
  background: var(--ivo-sky);
  border: 2px solid rgb(var(--navy-rgb) / 0.18);
  border-radius: var(--radius);
}
.hi-formulier textarea { min-height: 140px; resize: vertical; }
.hi-formulier input:focus,
.hi-formulier select:focus,
.hi-formulier textarea:focus { border-color: var(--ivo-orange); outline: none; }
.hi-formulier .wpcf7-submit {
  margin-top: 0.6rem;
  padding: 0.95em 1.8em;
  background: var(--ivo-orange);
  border: 2px solid var(--ivo-orange);
  border-radius: var(--radius);
  color: var(--ivo-navy);
  font-size: var(--fs-knop);
  font-weight: 700;
  letter-spacing: var(--ls-knop);
  text-transform: uppercase;
  cursor: pointer;
}
.hi-formulier .wpcf7-submit:hover { background: var(--ivo-navy); border-color: var(--ivo-navy); color: var(--ivo-sky); }

.contact-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 4vw, 70px);
  align-items: start;
}
@media (min-width: 950px) {
  .contact-raster { grid-template-columns: minmax(0, 1.1fr) minmax(26ch, 0.9fr); }
}
.contact-gegevens li { margin-bottom: 1.1rem; }
.contact-gegevens .label {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgb(var(--navy-rgb) / 0.6);
  margin-bottom: 0.25rem;
}
.vlak-navy .contact-gegevens .label { color: rgb(var(--sky-rgb) / 0.66); }
.contact-gegevens a:hover { color: var(--ivo-orange); }

/* -------------------------------------------------------------------------
   18. FOOTER met reuzenwoordmerk
   ------------------------------------------------------------------------- */
.site-footer {
  background: var(--ivo-navy);
  color: var(--ivo-sky);
  --hairline: rgb(var(--sky-rgb) / 0.18);
  --zacht: rgb(var(--sky-rgb) / 0.72);
  padding-top: clamp(56px, 6vw, 100px);
  overflow: hidden;
}

.footer-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22ch), 1fr));
  gap: clamp(28px, 3.5vw, 60px);
  padding-bottom: clamp(40px, 5vw, 70px);
}
.footer-kolom h4 {
  margin-bottom: 1rem;
  font-family: var(--font-tekst);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgb(var(--sky-rgb) / 0.55);
}
.footer-kolom li { margin-bottom: 0.6rem; font-size: 0.95rem; color: var(--zacht); }
.footer-kolom a:hover { color: var(--ivo-orange); }
.footer-intro p { color: var(--zacht); max-width: 36ch; margin-top: 1.2rem; }
.footer-logo { margin-bottom: 1.2rem; }
.footer-logo img { height: 50px; }

.social-rij { display: flex; gap: 12px; margin-top: 1.4rem; }
.social-rij a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid var(--hairline);
}
.social-rij svg { width: 18px; height: 18px; fill: currentColor; }
.social-rij a:hover { background: var(--ivo-orange); border-color: var(--ivo-orange); color: var(--ivo-navy); }

.footer-woordmerk {
  font-family: var(--font-titel);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.01em;
  /* Het woordmerk pakt bijna de volle breedte. De maat is met de sweep
     teruggerekend zodat "Horeca Impact" bij elke vensterbreedte binnen het
     kader blijft; overflow:hidden is de vangnetregel voor een smallere of
     bredere letter dan de testletter. */
  font-size: min(11vw, 12rem);
  color: rgb(var(--sky-rgb) / 0.10);
  padding-bottom: 0.06em;
  user-select: none;
  white-space: nowrap;
  /* Gecentreerd, zodat het woordmerk bij elke vensterbreedte links en
     rechts evenveel ruimte houdt. Links uitgelijnd liep het op brede
     schermen tegen de rechterrand aan en werd het door overflow:hidden
     afgekapt: dan mist er een letter en lijkt het een fout in plaats van
     een achtergrondelement. */
  text-align: center;
  overflow: hidden;
}

.footer-onderrand {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--zacht);
}
.footer-onderrand a:hover { color: var(--ivo-orange); }

/* -------------------------------------------------------------------------
   19. RESPONSIVE
   Getest van 360 tot 2560 pixels. Alle kolomdefinities gebruiken minmax met
   een ch- of max-content-ondergrens, zodat tekst nooit breder wordt dan zijn
   kader. Vaste vw-breedtes komen hier bewust niet voor.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .menu-toggle { display: block; }

  .nav-menu {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px var(--gutter) 28px;
    background: rgb(var(--navy-rgb) / 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(var(--sky-rgb) / 0.16);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-120%);
    transition: transform 0.3s ease;
  }
  .nav-menu.is-open { transform: translateY(0); }

  .nav-link {
    padding: 0.5rem 0 0.9rem;
    font-size: clamp(1.6rem, 7vw, 2.4rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    opacity: 1;
    border-bottom: 1px solid rgb(var(--sky-rgb) / 0.12);
  }
  .nav-link:hover { border-bottom-color: rgb(var(--sky-rgb) / 0.12); color: var(--ivo-orange); }
  .nav-cta::after {
  /* Was \2197 (schuin omhoog): dat suggereert een externe link, en de knop gaat naar een pagina op deze site. */
  content: "\2192";
  font-size: 1.05em;
  line-height: 1;
}

.nav-caret { float: right; margin-top: 8px; }

  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    padding: 0 0 8px 16px;
    background: transparent;
  }
  .submenu a { padding: 10px 0; }

  .nav-cta-item { margin-top: 18px; }
  .nav-cta-item .btn { width: 100%; justify-content: center; }
}

@media (max-width: 899px) {
  /* Op telefoon staat de tekst over de volle breedte; de sluier wordt dan
     van onderaf opgebouwd in plaats van van links. */
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero-beeld { background-position: center; }
  .hero-beeld::after {
    background: linear-gradient(
      180deg,
      rgb(var(--navy-rgb) / 0.40) 0%,
      rgb(var(--navy-rgb) / 0.70) 45%,
      rgb(var(--navy-rgb) / 0.88) 100%
    );
  }
}

/* Op de smalste telefoons passen de langste samenstellingen
   ("Leerambassadeurbegeleiding", "inwerkgesprekken") niet meer op één regel.
   Browsers met een Nederlands afbreekwoordenboek hyphenateren netjes, maar
   daar wil je niet van afhangen: hier worden de koppen zo ver verkleind dat
   het langste woord heel blijft. Grenzen zijn met de sweep bepaald. */
@media (max-width: 460px) {
  .sectie-contentblok .contentblok-tekst h2 { font-size: 1.1rem; }
  .sectie-quote blockquote { font-size: 1.5rem; }
  .aanbod-tegel__body h3,
  .kaart-body h3 { font-size: 1.05rem; }
}

@media (max-width: 560px) {
  /* Op een smal scherm bepaalt de schermbreedte de regellengte al; een
     kolom van dertig tekens zou daar onnodig veel korte regels geven. */
  .sectie-quote blockquote { max-width: 24ch; }
  .footer-woordmerk { font-size: 12vw; }
  .knoprij .btn { width: 100%; justify-content: center; }
}

/* Zeer brede schermen: het raster stopt bij --container-max, maar de hero
   mag doorlopen. Het tekstvlak blijft uitgelijnd op de container. */
@media (min-width: 1800px) {
  :root { --pad-sectie: clamp(110px, 6vw, 160px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Onthullen bij scrollen; zonder JS blijft alles gewoon zichtbaar. */
.js .onthul { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .onthul.is-zichtbaar { opacity: 1; transform: none; }

@media print {
  .site-header, .site-footer, .menu-toggle { display: none; }
  body { background: transparent; color: var(--ivo-navy); }
}

/* =========================================================================
   20. SECTIES VAN DE NIEUWE POSITIONERING
   Leercultuur als categorie, de keten, het model en het bewijs. De tokens,
   vlakken, knoppen en typeschaal hierboven blijven ongewijzigd: Horeca
   Impact en ivothijssen.nl moeten één familie blijven.
   ========================================================================= */

/* Koppen van secties: de leadtekst begrenzen, niet de kop zelf. Een ch-maat
   op een wikkel rekent met de letter van dát element, en dat is hier de
   tekstletter, niet de titelletter. Zet je er 70ch op, dan moet een kop van
   57px in ongeveer 560px passen en breekt hij middenin een woord af. */
.aanbod-kop,
.contrast-kop-blok,
.keten-kop,
.pijlers-kop,
.modules-kop,
.kpi-kop,
.rekentool-kop,
.fases-kop,
.cases-kop,
.doelgroepen-kop { margin-bottom: clamp(30px, 3.6vw, 60px); }

.aanbod-kop .sectie-titel,
.contrast-kop-blok .sectie-titel,
.keten-kop .sectie-titel,
.pijlers-kop .sectie-titel,
.modules-kop .sectie-titel,
.kpi-kop .sectie-titel,
.rekentool-kop .sectie-titel,
.fases-kop .sectie-titel,
.cases-kop .sectie-titel,
.doelgroepen-kop .sectie-titel { margin-bottom: 1.2rem; }

.aanbod-kop .lead,
.contrast-kop-blok .lead,
.keten-kop .lead,
.pijlers-kop .lead,
.modules-kop .lead,
.kpi-kop .lead,
.rekentool-kop .lead,
.fases-kop .lead,
.cases-kop .lead,
.doelgroepen-kop .lead { max-width: 62ch; }

/* -------------------------------------------------------------------------
   20.1 AANBOD - tegels
   ------------------------------------------------------------------------- */
.aanbod-tegel { gap: 0; }
.aanbod-tegel .tegel-duur {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-orange);
}
.vlak-sand .aanbod-tegel .tegel-duur { color: var(--ivo-navy); }

/* -------------------------------------------------------------------------
   20.2 CONTRAST - twee kolommen tegenover elkaar
   ------------------------------------------------------------------------- */
.contrast-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--hairline);
  border-block: 1px solid var(--hairline);
}
@media (min-width: 820px) {
  .contrast-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.contrast-kolom { padding: clamp(24px, 3vw, 44px); }
.vlak-navy .contrast-kolom { background: var(--ivo-navy); }
.vlak-sky .contrast-kolom { background: var(--ivo-sky); }
.vlak-sand .contrast-kolom { background: var(--ivo-sand); }

.contrast-kop {
  margin-bottom: 1.4rem;
  font-family: var(--font-titel);
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.contrast-kolom li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: 0.8em;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--zacht);
}
.contrast-kolom li:last-child { margin-bottom: 0; }

/* Een streep bij wat er misgaat, een haakje bij wat er komt. Vorm volgt de
   inhoud: dit blok moet in één oogopslag als tegenstelling lezen. */
.contrast-min li::before,
.contrast-plus li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}
.contrast-min li::before {
  content: "\2212";
  color: rgb(var(--navy-rgb) / 0.45);
}
.vlak-navy .contrast-min li::before { color: rgb(var(--sky-rgb) / 0.45); }
.contrast-plus li::before {
  content: "→";
  color: var(--ivo-orange);
}
.vlak-sand .contrast-plus li::before { color: var(--ivo-navy); }

.contrast-plus .contrast-kop { color: var(--titel); }
.vlak-sand .contrast-plus .contrast-kop { color: var(--ivo-navy); }

/* -------------------------------------------------------------------------
   20.3 DE ONTWIKKELKETEN
   ------------------------------------------------------------------------- */
.ontwikkelketen {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.4vw, 20px);
}

.schakel {
  flex: 1 1 150px;
  position: relative;
  padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 22px);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--ivo-orange);
}

.schakel-nummer {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--ivo-orange);
}
.vlak-sand .schakel-nummer { color: var(--ivo-navy); }

.schakel-naam {
  font-family: var(--font-titel);
  font-size: clamp(0.95rem, 1.1vw, 1.1rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.cascade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin-top: clamp(32px, 3.6vw, 56px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--hairline);
}
.cascade li { display: grid; gap: 0.4rem; }
.cascade strong {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .cascade strong { color: var(--ivo-navy); }
.cascade span { font-size: 0.95rem; line-height: 1.6; color: var(--zacht); }

/* -------------------------------------------------------------------------
   20.4 DE VIER PIJLERS
   ------------------------------------------------------------------------- */
.pijlers-ketting {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(24px, 2.6vw, 44px);
}

.pijler {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}
.pijler::before {
  content: "";
  position: absolute;
  top: -5px; left: 0;
  width: 10px; height: 10px;
  background: var(--ivo-orange);
}

.pijler-nummer {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--ivo-orange);
}
.pijler-titel {
  margin-bottom: 0.6rem;
  font-family: var(--font-titel);
  font-size: clamp(1.1rem, 1.45vw, 1.45rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .pijler-titel { color: var(--ivo-navy); }
.pijler-vraag { margin-bottom: 0.5rem; font-size: 0.96rem; font-weight: 600; line-height: 1.5; }
.pijler-tekst { font-size: 0.92rem; line-height: 1.6; color: var(--zacht); }

.pijlers-voetnoot,
.modules-voetnoot {
  margin-top: clamp(28px, 3vw, 48px);
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* -------------------------------------------------------------------------
   20.5 DE VIJF HR-MODULES
   ------------------------------------------------------------------------- */
.modulelijst { border-top: 1px solid var(--hairline); }
.module {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding-block: clamp(20px, 2.2vw, 34px);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 860px) {
  .module {
    grid-template-columns: 5ch minmax(min-content, 0.9fr) minmax(0, 1.4fr);
    gap: clamp(16px, 2vw, 40px);
    align-items: baseline;
  }
}
.module-nummer {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  font-variant-numeric: tabular-nums;
  color: var(--ivo-orange);
}
.vlak-sand .module-nummer { color: var(--ivo-navy); }
.module-titel {
  font-family: var(--font-titel);
  font-size: clamp(1rem, 1.2vw, 1.22rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.module-probleem { font-size: 0.95rem; line-height: 1.6; color: var(--zacht); }

/* -------------------------------------------------------------------------
   20.6 MEETKADER
   ------------------------------------------------------------------------- */
.kpi-lijst { border-top: 1px solid var(--hairline); }
.kpi-lijst li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.3rem;
  padding-block: clamp(14px, 1.6vw, 24px);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 760px) {
  .kpi-lijst li {
    /* min-content als ondergrens, niet 0. Een kolom mag nooit smaller
       worden dan het langste onbreekbare woord erin, anders loopt
       "Medewerkerstevredenheid" over de rand. Dat gaf geen overloop op de
       pagina en viel daardoor alleen op in de woordbreedtecontrole. */
    grid-template-columns: minmax(min-content, 0.8fr) minmax(0, 1.6fr);
    gap: clamp(16px, 2vw, 40px);
    align-items: baseline;
  }
}
.kpi-naam {
  font-family: var(--font-titel);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.kpi-wat { font-size: 0.95rem; line-height: 1.6; color: var(--zacht); }

/* Geen eigen streep boven het voorbehoud. De lijst sluit zelf al af met de
   onderrand van de laatste regel, en de rekentool met de rand van het kader.
   Een tweede lijn daar vlak onder las als een dubbele streep, en hij was ook
   korter dan de regelstrepen omdat de noot op 78ch staat. De witruimte doet
   het scheidingswerk nu alleen. */
.kpi-noot,
.rekentool-bronnen {
  max-width: 78ch;
  margin-top: clamp(24px, 2.6vw, 40px);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--zacht);
}

/* -------------------------------------------------------------------------
   20.7 REKENTOOL
   ------------------------------------------------------------------------- */
.rekentool {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
@media (min-width: 900px) {
  .rekentool { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.rekentool-invoer,
.rekentool-uitkomst { padding: clamp(24px, 3vw, 44px); }
.vlak-navy .rekentool-invoer { background: var(--ivo-navy); }
.vlak-sky .rekentool-invoer { background: var(--ivo-sky); }
.vlak-sand .rekentool-invoer { background: var(--ivo-sand); }
.rekentool-uitkomst { background: var(--ivo-navy); color: var(--ivo-sky); }

.rekenveld { margin-bottom: 1.6rem; }
.rekenveld:last-child { margin-bottom: 0; }
.rekenveld > label,
.rekenveld legend {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.rekenveld small {
  display: block;
  margin-top: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--zacht);
}

.rekenveld-groep { border: 0; padding: 0; margin-bottom: 1.6rem; }

.rekenveld-invoer {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--hairline);
  background: transparent;
}
.rekenveld-invoer .teken {
  display: grid;
  place-items: center;
  padding-inline: 0.8em;
  font-family: var(--font-titel);
  font-weight: 700;
  background: rgb(var(--navy-rgb) / 0.06);
}
.vlak-navy .rekenveld-invoer .teken { background: rgb(var(--sky-rgb) / 0.08); }

.rekentool input[type="number"],
.rekentool select {
  width: 100%;
  padding: 0.7em 0.8em;
  border: 1px solid var(--hairline);
  background: transparent;
  color: inherit;
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.rekenveld-invoer input[type="number"] { border: 0; }

.rekenveld-drie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
  gap: 0.8rem;
}
.rekenveld-drie label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--zacht);
}

.rekenregels { border-top: 1px solid var(--hairline); }
.rekenregels li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid var(--hairline);
}
.rekenregel-wat { font-size: 0.95rem; color: rgb(var(--sky-rgb) / 0.78); }
.rekenregel-bedrag {
  font-family: var(--font-titel);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rekenregel-totaal .rekenregel-wat { color: var(--ivo-sky); font-weight: 600; }
.rekenregel-totaal .rekenregel-bedrag { font-size: 1.35rem; color: var(--ivo-sand); }

/* De uitkomst staat in twee kaders. Boven de drie posten die je nu al
   betaalt, daaronder apart de omzet die blijft liggen: dat is geen
   uitgave maar geld dat niet binnenkomt, en in één doorlopend rijtje las
   dat als hetzelfde soort getal. */
.rekenuitkomst { display: grid; gap: 0.9rem; }
.rekenkader {
  border: 1px solid var(--hairline);
  padding-inline: 1.1rem;
  background: rgb(var(--sky-rgb) / 0.03);
}
.rekenkader li:last-child { border-bottom: 0; }
.rekenregels-totaal,
.rekenregels-totaal li { border: 0; }
.rekenregels-totaal li { padding-inline: 1.1rem; }

/* =========================================================================
   REKENTOOL, HERZIENE VERSIE
   Drie knoppen in plaats van een uitklaplijst: het verschil tussen de
   drie waarden is precies waar de vraag over gaat, en een keuzelijst
   verstopt er twee van de drie. Het radiorondje zelf is weg; de hele
   tegel is de knop, en de gekozen tegel krijgt een oranje rand.
   ========================================================================= */
.rekenveld-keuze { border: 0; padding: 0; margin-bottom: 1.6rem; }
.keuzerij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.keuze {
  position: relative;
  display: block;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.keuze:hover { border-color: rgb(var(--orange-rgb) / 0.5); }
.keuze input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.keuze-kop {
  display: block;
  font-family: var(--font-titel);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}
.keuze-uitleg {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--zacht);
}
.keuze:has(input:checked) {
  border-color: var(--ivo-orange);
  background: rgb(var(--orange-rgb) / 0.07);
}
/* Toetsenbord: de tegel moet ook zichtbaar zijn zonder muis. */
.keuze:has(input:focus-visible) { outline: 2px solid var(--ivo-orange); outline-offset: 2px; }

/* Wat voor geld een regel is: besparing of omzet die blijft liggen. */
.rekenregel-soort {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  /* Was 0,5: te weinig contrast voor tekst van 12 pixel op navy. */
  color: rgb(var(--sky-rgb) / 0.75);
}
/* De uitkomsttabel van het model van Ivo: nu, verbetering, straks. */
.rekenveld-een,
.rekenveld-twee {
  display: grid;
  gap: 0.8rem;
  margin-top: 0.7rem;
}
.rekenveld-twee { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rekenveld-een { grid-template-columns: minmax(150px, 1fr); }
.rekenveld-een label,
.rekenveld-twee label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: var(--zacht);
}
.keuzerij-twee { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Verbergen moet verbergen. Een eigen display-regel wint het van de
   standaardregel van de browser voor [hidden], waardoor de velden voor
   "per vertrekker" bleven staan terwijl de andere manier aanstond. */
.rekenveld-een[hidden],
.rekenveld-twee[hidden],
.rekenveld-drie[hidden] { display: none; }

.rekentabel {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.rekentabel th,
.rekentabel td {
  padding: 0.7rem 0.4rem;
  text-align: right;
  border-bottom: 1px solid var(--hairline);
}
.rekentabel th[scope="row"] {
  text-align: left;
  font-weight: 400;
  font-size: 0.92rem;
  color: rgb(var(--sky-rgb) / 0.78);
}
.rekentabel thead th {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: rgb(var(--sky-rgb) / 0.5);
  border-bottom-color: var(--hairline);
}
.rekentabel thead th:first-child { text-align: left; }
.rekentabel td { font-size: 0.98rem; }
/* De middenkolom is waar het om gaat: dat is het geld dat vrijkomt. */
.rekentabel td:nth-child(3) { color: var(--ivo-sand); font-weight: 600; }
.rekentabel .leeg { color: rgb(var(--sky-rgb) / 0.25); }
.rekentabel-tussen th,
.rekentabel-tussen td {
  font-weight: 600;
  color: var(--ivo-sky);
  border-bottom-width: 2px;
}
.rekentabel tfoot th,
.rekentabel tfoot td {
  padding-top: 0.9rem;
  border-bottom: 0;
  font-family: var(--font-titel);
  font-size: 1.1rem;
  font-weight: 700;
}
.rekentabel tfoot td:nth-child(3) { font-size: 1.3rem; }
.verborgen {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (max-width: 640px) {
  .rekentabel thead th:nth-child(4),
  .rekentabel td:nth-child(4) { display: none; }
}

.rekentool-slot { margin-top: 1.6rem; }
.rekentool-investering {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgb(var(--sky-rgb) / 0.78);
}

.rekentool-ruimte {
  display: grid;
  gap: 0.3rem;
  margin: 1.4rem 0;
  padding: clamp(16px, 2vw, 24px);
  background: rgb(var(--orange-rgb) / 0.14);
  border-left: 3px solid var(--ivo-orange);
}
.rekentool-ruimte-label {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-orange);
}
.rekentool-ruimte-bedrag {
  font-family: var(--font-titel);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ivo-sky);
}

/* -------------------------------------------------------------------------
   20.8 FASES
   ------------------------------------------------------------------------- */
.faselijst { border-top: 1px solid var(--hairline); }
.fase {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(14px, 2vw, 34px);
  padding-block: clamp(22px, 2.6vw, 38px);
  border-bottom: 1px solid var(--hairline);
}

.fase-nummer {
  font-family: var(--font-titel);
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--hairline);
}

.fase-naam {
  margin-bottom: 0.4rem;
  font-family: var(--font-titel);
  font-size: clamp(1.15rem, 1.8vw, 1.7rem);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .fase-naam { color: var(--ivo-navy); }

.fase-meta {
  margin-bottom: 0.7rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}
.fase-meta .scheider { margin-inline: 0.5em; }

.fase-thema { max-width: 62ch; font-size: 0.96rem; line-height: 1.6; color: var(--zacht); }

.fase-oplevering {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  max-width: 62ch;
  font-size: 0.93rem;
  line-height: 1.6;
}
.fase-label {
  display: inline-block;
  margin-right: 0.6em;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-orange);
}
.vlak-sand .fase-label { color: var(--ivo-navy); }

/* -------------------------------------------------------------------------
   20.9 CASES
   ------------------------------------------------------------------------- */
.cases-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(22px, 2.6vw, 44px);
  align-items: start;
}

.case-kaart {
  padding-top: 1.2rem;
  border-top: 2px solid var(--ivo-orange);
}
.case-titel {
  margin-bottom: 0.5rem;
  font-family: var(--font-titel);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .case-titel { color: var(--ivo-navy); }
.case-meta {
  margin-bottom: 1rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

.case-cijfers { display: grid; gap: 0.9rem; margin-bottom: 1.2rem; }
.case-cijfers li { display: grid; gap: 0.1rem; }
.case-cijfers b {
  font-family: var(--font-titel);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ivo-sand);
}
.vlak-sky .case-cijfers b,
.vlak-sand .case-cijfers b { color: var(--ivo-orange); }
.case-cijfers span { font-size: 0.92rem; line-height: 1.5; }
.case-cijfers small { font-size: 0.78rem; color: var(--zacht); }

.case-quote {
  margin: 0;
  padding-top: 1rem;
}
.case-quote p { font-size: 0.97rem; line-height: 1.65; font-style: italic; }
.case-quote cite {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-style: normal;
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* -------------------------------------------------------------------------
   20.10 DOELGROEPEN - de doorverwijstabel
   ------------------------------------------------------------------------- */
.doelgroepen-lijst { border-top: 1px solid var(--hairline); }
.doelgroep { border-bottom: 1px solid var(--hairline); }

.doelgroep-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  padding-block: clamp(20px, 2.2vw, 34px);
  transition: background-color 0.25s ease, padding-inline 0.25s ease;
}
@media (min-width: 860px) {
  .doelgroep-link {
    grid-template-columns: minmax(min-content, 0.9fr) minmax(0, 1.3fr) minmax(16ch, auto);
    gap: clamp(16px, 2vw, 40px);
    align-items: baseline;
  }
}
.doelgroep-link:hover,
.doelgroep-link:focus-visible {
  background: rgb(var(--orange-rgb) / 0.08);
  padding-inline: clamp(10px, 1.4vw, 22px);
}

.doelgroep-wie {
  font-family: var(--font-titel);
  font-size: clamp(1rem, 1.2vw, 1.22rem);
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.doelgroep-zoekt { font-size: 0.95rem; line-height: 1.6; color: var(--zacht); }
.doelgroep-route {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-orange);
}
.vlak-sand .doelgroep-route { color: var(--ivo-navy); }
.doelgroep-route .pijl { transition: transform 0.25s ease; }
.doelgroep-link:hover .doelgroep-route .pijl { transform: translateX(6px); }

/* -------------------------------------------------------------------------
   20.11 LOSSE QUOTEREGEL
   ------------------------------------------------------------------------- */
.quote-regel {
  font-family: var(--font-titel);
  font-size: clamp(1.2rem, 1.8vw, 1.8rem);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--titel);
  text-wrap: balance;
}
.quote-regel.groot { font-size: clamp(1.4rem, 2.4vw, 2.3rem); }
.vlak-sand .quote-regel { color: var(--ivo-navy); }

/* -------------------------------------------------------------------------
   20.12 SMALLE SCHERMEN
   Maten teruggerekend met de woordbreedtecontrole in sweep.js, in de echte
   letter: het langste woord moet op 360px binnen de kolom passen.
   ------------------------------------------------------------------------- */
@media (max-width: 420px) {
  h1 { font-size: 1.95rem; }
  .sectie-titel { font-size: 1.7rem; }
  .rekentool-ruimte-bedrag { font-size: 1.7rem; }
}

/* -------------------------------------------------------------------------
   FORMULIEREN

   Eigen formulieren in het thema, zonder plugin. De maatvoering volgt de
   rest van de site: labels klein maar niet piepklein, invoervelden met
   dezelfde hoogte als een knop, en een duidelijke focusring want daar
   navigeert een deel van de bezoekers op.
   ------------------------------------------------------------------------- */
.hi-formulier {
  max-width: 54rem;
}

.hi-formulier-uitleg {
  margin: 0 0 1.6rem;
  max-width: 54ch;
  color: var(--zacht);
}

.hi-formulier-velden {
  display: grid;
  gap: 1.1rem;
}

.hi-formulier-rij {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 620px) {
  .hi-formulier-rij { grid-template-columns: 1fr; }
}

.hi-formulier-veld {
  margin: 0;
  display: grid;
  gap: 0.4rem;
}

.hi-formulier-veld label {
  /* Het thema zet labels elders in kleine hoofdletters met veel spatiëring.
     Bij een formulier werkt dat tegen je: dat is precies het soort label dat
     op een telefoon slecht leest, en hier moet een bezoeker ze alle vijf
     snappen voordat hij iets invult. Dus gewone schrijfwijze. */
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.hi-formulier-veld .verplicht {
  color: var(--ivo-orange);
}

.hi-formulier-veld input,
.hi-formulier-veld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 1rem;
  color: var(--ivo-navy);
  /* Sky in plaats van wit: het merkboek kent geen wit, en een invoerveld
     dat net iets lichter is dan het vlak eromheen leest prima zolang de
     rand het werk doet. */
  background: var(--ivo-sky);
  border: 1px solid rgb(var(--navy-rgb) / 0.3);
  border-radius: var(--radius);
}

/* Op een Sky-vlak zou het veld wegvallen; daar krijgt het een iets diepere
   rand in plaats van een andere vulling. */
.vlak-sky .hi-formulier-veld input,
.vlak-sky .hi-formulier-veld textarea {
  border-color: rgb(var(--navy-rgb) / 0.45);
}

.hi-formulier-veld textarea {
  resize: vertical;
  min-height: 9rem;
}

.hi-formulier-veld input:focus-visible,
.hi-formulier-veld textarea:focus-visible,
.hi-formulier-akkoord input:focus-visible {
  outline: 3px solid var(--ivo-orange);
  outline-offset: 2px;
  border-color: var(--ivo-navy);
}

.hi-formulier-akkoord {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
  color: var(--zacht);
  max-width: 62ch;
}

.hi-formulier-akkoord a {
  text-transform: none;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* De akkoordregel is een zin, geen veldnaam. Het blok hierboven zette
   hem al op gewone kapitalisatie, maar `.hi-formulier label` is
   specifieker en won, dus stond de hele privacyzin in gespatieerde
   kapitalen. In een brede kolom viel dat nog mee; in de voetkolom werd
   het vier regels schreeuwen. */
.hi-formulier-akkoord label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 0;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.hi-formulier-akkoord input {
  margin-top: 0.25rem;
  width: 1.1rem;
  height: 1.1rem;
}

.hi-formulier-knop {
  margin: 0.4rem 0 0;
}

/* Het vangnetveld staat buiten beeld in plaats van op display:none, want
   sommige invulrobots slaan verborgen velden over en lopen hier dan juist
   wel in. Schermlezers slaan het over door aria-hidden op de wikkel. */
.hi-formulier-vangnet {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hi-formulier-gelukt {
  padding: 1.6rem 1.8rem;
  border-left: 4px solid var(--ivo-orange);
  background: rgb(var(--navy-rgb) / 0.04);
}

.hi-formulier-gelukt-titel {
  margin: 0 0 0.4rem;
  font-family: var(--font-titel);
  font-size: 1.3rem;
  font-weight: 600;
}

.hi-formulier-gelukt p:last-child { margin-bottom: 0; }

.hi-formulier-fout {
  margin: 0 0 1.2rem;
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--ivo-orange);
  background: rgb(255 107 44 / 0.08);
  font-weight: 600;
}

.vlak-navy .hi-formulier-veld input,
.vlak-navy .hi-formulier-veld textarea {
  background: var(--ivo-sky);
  border-color: rgb(var(--sky-rgb) / 0.5);
}

.vlak-navy .hi-formulier-uitleg,
.vlak-navy .hi-formulier-akkoord {
  color: rgb(var(--sky-rgb) / 0.8);
}

.vlak-navy .hi-formulier-akkoord a { color: var(--ivo-sky); }

/* -------------------------------------------------------------------------
   JURIDISCHE PAGINA'S

   Privacy, cookies en voorwaarden zijn doorlopende documenten met koppen,
   lijsten en tabellen. De tekstbloksectie waarin ze staan is gemaakt voor
   een korte redactionele passage: daar staat normaal één kop in, groot en
   in hoofdletters en zonder marge. Op een document van vijfhonderd woorden
   levert dat een opeengedrukte brij op. Vandaar eigen maatvoering, scherp
   afgebakend op .juridisch-tekst zodat geen enkel ander tekstblok verandert.
   ------------------------------------------------------------------------- */
.juridisch-tekst > *:first-child { margin-top: 0; }
.juridisch-tekst > *:last-child { margin-bottom: 0; }

/* De juridische pagina's lopen over de volle contentbreedte, net als de
   rest van de site. Alleen de lopende tekst krijgt een rem mee: een regel
   van 1560 pixels is ruim 200 tekens lang en daar raakt een lezer bij elke
   regelovergang de draad kwijt. Koppen, lijsten en tabellen gebruiken de
   hele breedte, want die winnen er wel bij. */
.sectie-tekstblok:has(.juridisch-tekst) .tekstblok-tekst {
  max-width: none;
}

.juridisch-tekst p { max-width: 90ch; }

.juridisch-tekst .juridisch-datum {
  margin: 0 0 2.6rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

.juridisch-tekst h2 {
  margin: 2.8rem 0 0.9rem;
  font-family: var(--font-titel);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ivo-navy);
}

.juridisch-tekst h3 {
  margin: 1.9rem 0 0.5rem;
  font-family: var(--font-titel);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.15rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ivo-navy);
}

.juridisch-tekst p {
  margin: 0 0 1.15rem;
  line-height: 1.75;
}

.juridisch-tekst ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.juridisch-tekst a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.juridisch-tekst table {
  width: 100%;
  margin: 0.4rem 0 1.8rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.juridisch-tekst th,
.juridisch-tekst td {
  padding: 0.75rem 1.2rem 0.75rem 0;
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
  border-bottom: 1px solid rgb(var(--navy-rgb) / 0.14);
}

.juridisch-tekst thead th {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ivo-navy);
  border-bottom-width: 2px;
}

.juridisch-tekst td { color: var(--zacht); }

/* Op een telefoon past een tabel van vijf kolommen niet. Dan wordt elke rij
   een blokje onder elkaar, in plaats van een tabel die horizontaal schuift. */
@media (max-width: 680px) {
  .juridisch-tekst table,
  .juridisch-tekst tbody,
  .juridisch-tekst tr,
  .juridisch-tekst td {
    display: block;
    width: 100%;
  }
  .juridisch-tekst thead { display: none; }
  .juridisch-tekst tr {
    padding: 0.9rem 0;
    border-bottom: 1px solid rgb(var(--navy-rgb) / 0.14);
  }
  .juridisch-tekst td {
    padding: 0 0 0.35rem;
    border: 0;
  }
  .juridisch-tekst td:first-child {
    font-weight: 600;
    color: var(--ivo-navy);
  }
}

/* Nieuwsbriefaanmelding in de voettekst. Eén veld en een knop, naast elkaar
   waar het past en onder elkaar op een telefoon. Verschijnt alleen wanneer
   er een nieuwsbrieflijst is ingesteld. */
/* Het aanmeldblok staat als vierde kolom naast Contact, en niet meer als
   losse strook onder het woordmerk. Daardoor leest de voet als vier
   gelijkwaardige kolommen in plaats van drie plus een uitsmijter.

   De kop gebruikt dezelfde h4 als de andere kolommen, zodat de vier
   koppen op één lijn beginnen. Het veld en de knop staan onder elkaar:
   in een kolom van ruim twintig tekens past niets naast elkaar. */
.voet-nieuwsbrief .hi-formulier { max-width: none; }

.voet-nieuwsbrief .hi-formulier-uitleg {
  margin-bottom: 1rem;
  font-size: 0.92rem;
}

.voet-nieuwsbrief .hi-formulier-akkoord { font-size: 0.875rem; }

/* -------------------------------------------------------------------------
   23. MERKPORTAAL - kleuren, logo's, letters, en de blokken eromheen

   Deze pagina stond eerder als één lap losse HTML in de editor, met drie
   eigen stijlblokken erin. Die kon per definitie uit de pas lopen met de
   rest van de site. Nu tekenen de kaartjes met dezelfde variabelen als
   alles hier, dus een kleurwijziging komt vanzelf op het merkportaal
   terecht en de kleurcontrole kijkt mee.
   ------------------------------------------------------------------------- */

.btn-klein {
  padding: 0.6rem 1rem;
  /* Niet kleiner dan de gewone knop van het thema, die op 0,72rem staat
     en uitkomt op bijna elf pixels. Daaronder wordt een knop met wijde
     letterafstand in hoofdletters lastig te lezen. */
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  gap: 0.4rem;
}

/* 23.1 Kleurenpalet
   ------------------------------------------------------------------------- */
/* Vier kaarten, dus een vast ritme: 1, 2, 4. Met auto-fit maakte de
   browser zes sporen waarvan er twee leeg bleven, en dat gaf een rij die
   niet uitkwam op de kolom eronder. */
.kleurkaarten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(28px, 3.2vw, 48px);
}
@media (min-width: 560px) {
  .kleurkaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .kleurkaarten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Het kleurvlak loopt tot aan de rand van de kaart; de tekst staat
   eronder met eigen binnenruimte. Een vlak met lucht eromheen leest als
   een plaatje van een kleur, tegen de rand leest het als de kleur zelf. */
.kleurkaart {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0;
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.kleurkaart-rol {
  padding: clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px) 0;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* Een rand om het vlak, want zonder rand is Ivo Sky op een Sky-paneel
   onzichtbaar en zie je niet dat er een kleurkaartje staat. */
/* Het vlak staat los van de kaartrand en heeft rondom een lijn. Dat is
   geen versiering: Navy op een Navy-paneel en Sky op een Sky-paneel
   hebben dezelfde kleur als hun ondergrond, en zonder lijn rondom lijkt
   zo'n kaartje leeg in plaats van dat het de kleur toont. Een vlak dat
   tot aan de rand doorliep zag er rustiger uit, maar liet precies de
   twee kleuren verdwijnen die het vaakst gebruikt worden. */
.kleurkaart-vlak {
  display: block;
  height: clamp(84px, 9vw, 116px);
  margin: clamp(12px, 1.3vw, 16px) clamp(14px, 1.5vw, 18px) 0;
  border: 1px solid var(--hairline);
}

.kleurkaart-naam {
  padding: clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px) 0.5rem;
  font-family: var(--font-titel);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.kleurkaart-waarden {
  display: grid;
  gap: 0.3rem;
  margin: 0;
  padding: 0 clamp(14px, 1.5vw, 18px) clamp(14px, 1.5vw, 18px);
  font-size: 0.82rem;
  color: var(--zacht);
}
/* Label links, waarde direct erachter op een vaste kolom. Met
   space-between dreven ze op een brede kaart zo ver uit elkaar dat je ze
   niet meer als paar las. */
.kleurkaart-waarden > div {
  display: grid;
  grid-template-columns: 3.4em minmax(0, 1fr);
  align-items: baseline;
  gap: 0.6rem;
}
.kleurkaart-waarden dt {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
}
.kleurkaart-waarden dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.kleur-steun,
.kleur-verhouding {
  max-width: 78ch;
  margin-top: clamp(20px, 2.2vw, 32px);
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--zacht);
}
.kleur-steun-label {
  display: block;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .kleur-steun-label { color: var(--ivo-navy); }

/* 23.2 Logovarianten
   ------------------------------------------------------------------------- */
/* Zes varianten, dus drie kolommen op een breed scherm: twee nette
   rijen van drie. Met auto-fit werden het er vijf naast elkaar met één
   eenzame kaart eronder, en dat was precies de rommeligheid. */
.logokaarten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(28px, 3.2vw, 48px);
}
@media (min-width: 560px) {
  .logokaarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .logokaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.logokaart {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--hairline);
}

/* Het proefvlak draagt zijn eigen achtergrond, want daar gaat het om: een
   inverse logo hoort op donker te staan, ook als het paneel licht is. */
.logokaart-proef {
  display: grid;
  place-items: center;
  min-height: clamp(110px, 11vw, 150px);
  padding: clamp(18px, 2vw, 28px);
}
.logokaart-proef.op-licht { background: var(--ivo-sky); }
.logokaart-proef.op-donker { background: var(--ivo-navy); }
.logokaart-proef img {
  max-width: 100%;
  max-height: clamp(44px, 5vw, 64px);
  width: auto;
  height: auto;
  object-fit: contain;
}

.logokaart-onder {
  display: grid;
  gap: 0.3rem;
  padding: clamp(14px, 1.6vw, 20px);
  border-top: 1px solid var(--hairline);
}

.logokaart-naam {
  font-family: var(--font-titel);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.logokaart-rol { font-size: 0.84rem; color: var(--zacht); }

/* Twee knoppen van gelijke breedte naast elkaar. Onder elkaar zagen ze
   eruit als twee losse regels in plaats van als één keuze tussen twee
   bestandssoorten. */
.logokaart-knoppen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 0.8rem 0 0;
}
.logokaart-knoppen .btn { justify-content: center; }

.logoregels {
  max-width: 78ch;
  margin-top: clamp(28px, 3vw, 44px);
}
.logoregels-titel {
  margin: 0 0 0.8rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.logoregels ul {
  display: grid;
  gap: 0.5rem;
}
.logoregels li {
  position: relative;
  padding-left: 1.2rem;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--zacht);
}
.logoregels li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--ivo-orange);
}

/* 23.3 Typografie
   ------------------------------------------------------------------------- */
.letterkaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(18px, 2.2vw, 32px);
  margin-top: clamp(28px, 3.2vw, 48px);
}

.letterkaart {
  display: grid;
  align-content: start;
  gap: 0.7rem;
  padding: clamp(20px, 2.4vw, 32px);
  border: 1px solid var(--hairline);
}

.letterkaart-rol {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

.letterkaart-naam {
  margin: 0;
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.8rem);
  line-height: 1;
}
.letterkaart-naam.is-titel {
  font-family: var(--font-titel);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.letterkaart-naam.is-tekst {
  font-family: var(--font-tekst);
  font-weight: 300;
  letter-spacing: -0.01em;
  text-transform: none;
}

.letterkaart-proef {
  display: grid;
  gap: 0.35rem;
  padding-block: 0.6rem;
  border-block: 1px solid var(--hairline);
}
.letterkaart-proef p { margin: 0; }
.letterkaart-proef.is-titel p {
  font-family: var(--font-titel);
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}
.letterkaart-proef.is-tekst p:first-child {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.5;
}
.letterkaart-proef.is-tekst p:last-child {
  font-family: var(--font-tekst);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--zacht);
}

.letterkaart-uitleg {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--zacht);
}

.letterkaart-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0.4rem 0 0;
}
.letterkaart-gewicht {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--hairline);
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.letterhierarchie {
  max-width: 78ch;
  margin-top: clamp(28px, 3vw, 44px);
}
.letterhierarchie-titel {
  margin: 0 0 0.8rem;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.letterhierarchie dl {
  margin: 0;
  border-top: 1px solid var(--hairline);
}
.letterhierarchie dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--hairline);
}
.letterhierarchie dt {
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.letterhierarchie dd {
  margin: 0;
  font-size: 0.88rem;
  color: var(--zacht);
}

/* 23.4 Download
   ------------------------------------------------------------------------- */
/* Een kader eromheen, zodat het blok leest als één ding dat je kunt
   ophalen. Zonder kader zweefde er een oranje knop in het midden van een
   leeg vlak, met daaronder een losse regel kleine hoofdletters. */
.downloadblok {
  max-width: 62ch;
  margin-top: clamp(24px, 2.8vw, 40px);
  padding: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--hairline);
}
.downloadblok .sectie-titel { margin-bottom: 0.8rem; }
.downloadblok .lead { max-width: none; }
.downloadblok-knop { margin: clamp(20px, 2.2vw, 30px) 0 0; }
.downloadblok-meta {
  margin: 0.9rem 0 0;
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* 23.5 Ingesloten venster
   ------------------------------------------------------------------------- */
.insluiting {
  margin-top: clamp(24px, 2.8vw, 40px);
  border: 1px solid var(--hairline);
  /* De hoogte komt uit het veld, maar nooit hoger dan het scherm min de
     header: anders moet iemand op een telefoon eerst door een venster van
     800 pixels heen voordat de pagina weer verdergaat. */
  height: min(var(--insluit-hoogte, 800px), calc(100svh - var(--header-h) - 40px));
}
.insluiting iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.insluiting-bron {
  max-width: 78ch;
  margin: 0.9rem 0 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--zacht);
}
.insluiting-bron a { border-bottom: 1px solid currentColor; }

/* -------------------------------------------------------------------------
   24. KOPPEN DIE NIET MIDDEN IN EEN WOORD MOGEN BREKEN

   De koppen staan in hoofdletters en hebben een regelbreedte in ch. Dat
   werkt zolang het langste woord in die breedte past, maar ch is de
   breedte van het cijfer nul en een hoofdletter is in deze letter ruim
   een derde breder. Negentien ch biedt dus plaats aan ongeveer veertien
   hoofdletters, en Nederlandse samenstellingen zijn vaak langer:
   "BESCHIKBAARHEID" is er vijftien. Die viel buiten de kolom, en
   overflow-wrap hakte hem zonder koppelteken doormidden:
   "BESCHIKBAARHEI / D OPVRAGEN".

   Automatisch afbreken is geen oplossing: Chrome levert voor deze
   woorden geen Nederlandse afbreekpunten, dat is nagemeten. Een kleinere
   letter of een bredere kolom zou het ontwerp veranderen voor alle
   koppen, terwijl het probleem maar af en toe speelt.

   min-width: min-content lost het precies daar op waar het speelt: de
   kop houdt zijn ingestelde regelbreedte voor gewone tekst, en wordt
   alleen breder wanneer één woord dat afdwingt. Past het dan nog niet,
   bijvoorbeeld op een telefoon, dan breekt overflow-wrap alsnog; dat is
   daar ook het enige wat kan.
   ------------------------------------------------------------------------- */
.sectie-titel,
.blok-titel,
.hero h1,
.pagina-hero h1,
.kpi-kop .sectie-titel,
.merken-kop .sectie-titel {
  min-width: min-content;
}

/* -------------------------------------------------------------------------
   25. DE VIJF MODELLEN

   De modellenkaart uit het trajectdocument, met de letters a tot en met e
   die daar ook gebruikt worden. Opzet gelijk aan de faselijst: een brede
   letter in de kantlijn, de inhoud ernaast, en een lijn tussen de regels.
   ------------------------------------------------------------------------- */
.modellenlijst {
  margin-top: clamp(28px, 3.2vw, 48px);
  border-top: 1px solid var(--hairline);
}

.model {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  padding-block: clamp(20px, 2.2vw, 32px);
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 760px) {
  .model {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 40px);
    align-items: start;
  }
}

.model-letter {
  font-family: var(--font-titel);
  font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
  color: var(--ivo-orange);
}

.model-body { display: grid; gap: 0.5rem; }

.model-naam {
  margin: 0;
  font-family: var(--font-titel);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--titel);
}
.vlak-sand .model-naam { color: var(--ivo-navy); }

.model-wat {
  margin: 0;
  max-width: 72ch;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--zacht);
}

.model-waar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin: 0.2rem 0 0;
}

/* Het onderscheid tussen een doorlopende laag en een eigen lesblok is het
   enige wat in deze lijst echt verschilt per model, dus dat krijgt een
   label in plaats van een zin. */
.model-soort {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--hairline);
  font-family: var(--font-titel);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.model-soort.is-blok {
  border-color: var(--ivo-orange);
  color: var(--ivo-orange);
}
.vlak-sand .model-soort.is-blok { border-color: var(--ivo-navy); color: var(--ivo-navy); }

.model-plek {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--zacht);
}

.modellen-noot {
  max-width: 78ch;
  margin-top: clamp(24px, 2.6vw, 40px);
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--zacht);
}

/* =========================================================================
   0.57.0 STAP 1: LEESBAARHEID
   Zelfde aanpak als ivothijssen.nl 0.22.0: één labelmaat, één knopmaat.
   ========================================================================= */
/* Kapitaalkoppen op een smal scherm: een fractie meer regelwit, en een
   kleinere h1 zodat kop, intro en beide knoppen op een scherm van 740
   pixel hoog passen. */
@media (max-width: 480px) {
  h1, h2, h3 { line-height: 1; }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
}

/* De footerlinks waren 20 pixel hoog; nu minstens 24, het WCAG-minimum
   voor een doel met ruimte eromheen. De juridische links onderaan ook. */
.footer-kolom li a,
.footer-onderrand a { display: inline-block; padding-block: 2px; min-height: 24px; }

/* =========================================================================
   0.57.0 STAP 2: NAVIGATIE EN HERO
   ========================================================================= */
/* "Aanbod" is een echte knop. Zelfde uiterlijk als de andere menu-items. */
button.nav-ouder {
  margin: 0;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.nav-ouder[aria-expanded="true"] { opacity: 1; border-bottom-color: rgb(var(--orange-rgb) / 0.45); }
.nav-ouder[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-caret { transition: transform 0.2s ease; }
.nav-link:focus-visible,
.submenu a:focus-visible { outline: 2px solid var(--ivo-orange); outline-offset: 2px; opacity: 1; }

/* Met script bepaalt de knop of het submenu open is, niet de focus: anders
   bleef het open staan na Escape. Hover op desktop blijft werken. Zonder
   script valt het terug op de oude regel met :focus-within. */
@media (min-width: 1025px) {
  .nav-menu > li.is-uitgeklapt > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .js .nav-menu > li:has(> .nav-ouder):not(:hover):not(.is-uitgeklapt) > .submenu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
  }
}

@media (max-width: 1024px) {
  /* Een dicht mobiel menu stond alleen buiten beeld geschoven; met Tab
     kwam je nog op onzichtbare links terecht. */
  .nav-menu { visibility: hidden; transition: transform 0.3s ease, visibility 0s linear 0.3s; }
  .nav-menu.is-open { visibility: visible; transition: transform 0.3s ease, visibility 0s; }
  button.nav-ouder { display: block; width: 100%; }
  /* De menuknop staat in de html vóór de navigatie (voor de tabvolgorde).
     De navigatie zelf neemt hier geen plek in de balk in, zodat de knop
     rechts blijft staan; het paneel erin is toch al position: fixed. */
  .header-inner { position: relative; }
  .hoofdnavigatie { position: absolute; width: 0; height: 0; }
  /* Op de telefoon klapt het submenu uit op de knop in plaats van altijd
     open te staan. Zonder script blijft het open. */
  .js .nav-menu > li:has(> .nav-ouder):not(.is-uitgeklapt) > .submenu { display: none; }
  .submenu a { min-height: var(--doel-min); display: flex; align-items: center; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-menu, .nav-menu.is-open { transition: none; }
}

/* De herofoto als echte afbeelding in plaats van een achtergrond. Zelfde
   uitsnede als voorheen: rechts, op achtentwintig procent van boven. */
.hero-beeld picture,
.hero-beeld .hero-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}
.hero-beeld .hero-foto {
  object-fit: cover;
  object-position: right 28%;
}
.hero-beeld::after { z-index: 1; }
@media (max-width: 899px) {
  .hero-beeld .hero-foto { object-position: center; }
}

/* De leessluier zwaarder onder de tekstkolom: de witte kop liep over het
   lichte raam rechts van Ivo. Van links 90 naar 70 procent tot over het
   midden, daarna snel open, zodat de foto rechts zichtbaar blijft. Gemeten
   achter de kop: minstens 4,5:1 op 1024 en 1440 pixel breed. */
@media (min-width: 900px) {
  .hero .hero-beeld::after {
    background:
      linear-gradient(
        100deg,
        rgb(var(--navy-rgb) / 0.90) 0%,
        rgb(var(--navy-rgb) / 0.82) 30%,
        rgb(var(--navy-rgb) / 0.70) 55%,
        rgb(var(--navy-rgb) / 0.26) 78%,
        rgb(var(--navy-rgb) / 0.06) 100%
      ),
      linear-gradient(
        0deg,
        rgb(var(--navy-rgb) / 0.40) 0%,
        rgb(var(--navy-rgb) / 0) 38%
      );
  }
}

/* De navigatie stond los op de foto en viel weg tegen lichte plekken (het
   raam rechts, en de menuknop op tabletbreedte). Een verloop van navy naar
   transparant achter de balk geeft de witte items altijd genoeg contrast.
   Na scrollen wordt de balk dicht navy, zoals het was. */
.site-header:not(.is-gekrompen) {
  background: linear-gradient(
    180deg,
    rgb(var(--navy-rgb) / 0.88) 0%,
    rgb(var(--navy-rgb) / 0.62) 60%,
    rgb(var(--navy-rgb) / 0) 100%
  );
  background-origin: border-box;
  background-repeat: no-repeat;
}

/* Pauzeknop van de lopende band: 44 bij 44, rechts op de band. */
.hero-band-pauze {
  position: absolute;
  right: max(8px, calc(var(--gutter) / 2));
  bottom: calc((var(--band-h) - var(--doel-min)) / 2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--doel-min);
  height: var(--doel-min);
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: rgb(var(--navy-rgb) / 0.9);
  color: var(--ivo-sky);
  cursor: pointer;
}
.hero-band-pauze:hover { border-color: var(--ivo-orange); color: var(--ivo-orange); }
.hero-band-pauze:focus-visible { outline: 2px solid var(--ivo-orange); outline-offset: 2px; }
/* Pauzeteken: twee staande streepjes. Gepauzeerd: een afspeeldriehoek. */
.hero-band-pauze span {
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}
.hero-band-pauze[aria-pressed="true"] span {
  width: 0;
  height: 0;
  border-inline: 0;
  border-block: 6px solid transparent;
  border-left: 10px solid currentColor;
  margin-left: 3px;
}
.hero-band:hover .hero-band__spoor,
.hero:has(.hero-band-pauze:focus-visible) .hero-band__spoor,
.hero.band-gepauzeerd .hero-band__spoor { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .hero-band-pauze { display: none; }
}

/* =========================================================================
   0.57.0 STAP 3: REKENTOOL
   ========================================================================= */
/* Het omzetveld is een tekstveld geworden (voor de duizendtalpunt); het
   krijgt dezelfde opmaak als de nummervelden. */
.rekentool input[type="text"] {
  width: 100%;
  padding: 0.7em 0.8em;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--font-tekst);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.rekentool input[type="text"]:focus-visible,
.rekentool input[type="number"]:focus-visible { outline: 2px solid var(--ivo-orange); outline-offset: 0; }
.rekenveld-drie input[type="number"] { min-height: var(--doel-min); }

/* Keuzetegels: de hele tegel is het aanraakgebied (minstens 44 pixel
   hoog), en naast de oranje rand is er een tweede teken: een rondje dat
   gevuld raakt met een vinkje. Zo hangt de keuze niet alleen van kleur af. */
.keuze {
  min-height: var(--doel-min);
  padding-left: 2.6rem;
}
.keuze::before {
  content: "";
  position: absolute;
  left: 0.85rem;
  top: 0.95rem;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: 0.7;
}
.keuze:has(input:checked)::before {
  opacity: 1;
  border-color: var(--ivo-orange);
  background: var(--ivo-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23122439' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.keuze-uitleg { font-size: 0.875rem; }

/* Uitkomstregels: overal één opmaak. Omschrijving links, bedrag rechts,
   en onder 400 pixel allemaal onder elkaar. Voorheen bepaalde de lengte
   van de omschrijving of een regel wel of niet afbrak. */
.rekenregels li {
  flex-wrap: nowrap;
  align-items: baseline;
}
.rekenregel-wat { flex: 1 1 auto; min-width: 0; }
.rekenregel-bedrag { flex: none; text-align: right; white-space: nowrap; }
@media (max-width: 399px) {
  .rekenregels li { flex-direction: column; gap: 0.2rem; }
  .rekenregel-bedrag { text-align: left; }
}

/* Vaste balk onderaan op een telefoon, met alleen het totaal. */
.rekentool-balk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem var(--gutter) calc(0.8rem + env(safe-area-inset-bottom, 0px));
  background: var(--ivo-navy);
  color: var(--ivo-sky);
  border-top: 2px solid var(--ivo-orange);
  box-shadow: 0 -10px 30px rgb(var(--navy-rgb) / 0.25);
  animation: hithm-balk-in 0.2s ease-out;
}
.rekentool-balk[hidden] { display: none; }
.rekentool-balk-wat { font-size: 0.875rem; }
.rekentool-balk-bedrag {
  font-family: var(--font-titel);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ivo-sand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@keyframes hithm-balk-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@media (min-width: 768px) {
  .rekentool-balk { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rekentool-balk { animation: none; }
}

/* =========================================================================
   0.57.0 STAP 4: AFBEELDINGEN EN LETTERS
   ========================================================================= */
/* Met een Adobe Fonts-kit neemt Futura PT de titels over, zoals bedoeld. */
.heeft-futura { --font-titel: "futura-pt", "Futura PT", "Futura PT Book", "Jost", "Jost terugval", sans-serif; }

/* Picture-elementen gedragen zich als het beeld erin. */
.contentblok-beeld picture,
.aanbod-tegel figure picture { display: contents; }

/* =========================================================================
   0.57.0 STAP 5: WAT ONDERNEMERS ZEGGEN
   Lichte sectie direct na de meetsectie. Staan beide op Sky, dan lopen ze
   door als één blok met een lijn ertussen, zodat het navy-sky-ritme van de
   rest van de pagina niet verschuift. Opzet gelijk aan ivothijssen.nl.
   ========================================================================= */
.sectie-kpi.vlak-sky + .sectie-testimonials.vlak-sky { padding-top: 0; }
.sectie-kpi.vlak-sky + .sectie-testimonials.vlak-sky > .container {
  border-top: 1px solid rgb(var(--navy-rgb) / 0.14);
  padding-top: var(--pad-sectie);
}
.sectie-testimonials .sectie-titel { margin-bottom: clamp(28px, 3vw, 48px); }

.testimonials-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 3vw, 56px);
  margin: 0 0 clamp(36px, 4vw, 64px);
}
.testimonials-logos img {
  height: 32px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
}

.testimonials-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 3vw, 56px);
}
@media (min-width: 860px) {
  .testimonials-raster { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}
/* Zelfde letter en kleur als de quote op zand, zonder het zandvlak: een
   oranje streep links draagt het merkaccent. */
.testimonial {
  margin: 0;
  padding-left: clamp(18px, 2vw, 28px);
  border-left: 3px solid var(--ivo-orange);
}
.testimonial blockquote {
  margin: 0;
  font-family: var(--font-titel);
  font-size: clamp(1.15rem, 0.95rem + 0.7vw, 1.5rem);
  font-weight: 400;
  line-height: 1.4;
  color: rgb(var(--navy-rgb) / 0.88);
  text-wrap: pretty;
}
.testimonial blockquote p::before { content: "\201C"; }
.testimonial blockquote p::after { content: "\201D"; }
.testimonial figcaption { margin-top: 1.1rem; }
.testimonial-naam {
  display: block;
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.testimonial-functie { display: block; font-size: 0.95rem; color: var(--zacht); }
.testimonial-case {
  display: inline-block;
  margin-top: 0.4rem;
  padding-block: 0.3rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.testimonials-meer { margin: clamp(32px, 3.5vw, 56px) 0 0; }

/* Voorbeeldweergave: onmiskenbaar plaatshouder, gestippeld en met noot. */
.testimonials-voorbeeldnoot {
  margin: -0.5rem 0 1.6rem;
  font-size: 0.95rem;
  color: var(--zacht);
}
.is-voorbeeld .testimonial { border-left-style: dashed; }
.testimonials-logos.is-voorbeeld li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 44px;
  border: 1px dashed rgb(var(--navy-rgb) / 0.3);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--zacht);
}

/* =========================================================================
   0.57.0 STAP 6: AANBOD EN METHODE
   ========================================================================= */
/* --- Aanbod: gewoon raster van twee kolommen, geen trap, geen wees ------ */
.sectie-aanbod .aanbod-raster,
.sectie-aanbod .aanbod-raster:has(.aanbod-tegel:nth-child(5)) {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(36px, 4vw, 64px) clamp(20px, 2.4vw, 40px);
  align-items: stretch;
}
@media (min-width: 768px) {
  .sectie-aanbod .aanbod-raster,
  .sectie-aanbod .aanbod-raster:has(.aanbod-tegel:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sectie-aanbod .aanbod-raster .aanbod-tegel:nth-child(n) { margin-top: 0; }

/* Eén beeldverhouding die bij de bronfoto's past (4:3), zodat gezichten
   en handen niet meer worden afgesneden zoals in het staande kader. */
.sectie-aanbod .aanbod-tegel figure { aspect-ratio: 4 / 3; }

/* Nummer links van de titel. */
.tegel-kop {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.2vw, 18px);
}
.sectie-aanbod .aanbod-raster .aanbod-tegel .tegel-nummer {
  flex: none;
  margin: 0;
  font-size: clamp(2.2rem, 3vw, 3rem);
}
.sectie-aanbod .aanbod-raster .aanbod-tegel .tegel-titel { font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); letter-spacing: 0.01em; }
.sectie-aanbod .aanbod-raster .aanbod-tegel .tegel-tekst { font-size: 1rem; line-height: 1.55; }

/* Kleine oranje tekst haalde op een licht vlak maar 2,6:1. Zelfde regel als
   bij de koppen: op licht navy, op donker blijft het oranje. */
.vlak-sky .aanbod-tegel .tegel-duur { color: var(--titel-op-licht); }

/* De hele kaart reageert: een lichte lift, een zachte schaduw en de pijl
   schuift op. Ook bij toetsenbordfocus, met een zichtbare rand. */
.sectie-aanbod .aanbod-tegel {
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sectie-aanbod .aanbod-tegel figure img { transition: transform 0.25s ease; }
.sectie-aanbod .aanbod-tegel:hover,
.sectie-aanbod .aanbod-tegel:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--schaduw-zacht);
}
.sectie-aanbod .aanbod-tegel:focus-visible {
  outline: 2px solid var(--ivo-orange);
  outline-offset: 4px;
}
.sectie-aanbod .aanbod-tegel:focus-visible .tegel-titel { color: var(--ivo-orange); }
.sectie-aanbod .aanbod-tegel:focus-visible .tegel-nummer {
  color: var(--ivo-orange);
  -webkit-text-stroke-color: var(--ivo-orange);
}
.vlak-sky .aanbod-tegel:hover .tegel-titel,
.vlak-sky .aanbod-tegel:focus-visible .tegel-titel { color: var(--titel-op-licht); text-decoration: underline; text-decoration-color: var(--ivo-orange); text-underline-offset: 0.2em; }
.tegel-pijl {
  display: inline-block;
  margin-left: auto;
  padding-left: 0.5rem;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--ivo-orange);
  transition: transform 0.2s ease;
}
.aanbod-tegel:hover .tegel-pijl,
.aanbod-tegel:focus-visible .tegel-pijl { transform: translateX(6px); }
.sectie-aanbod .aanbod-tegel__body { gap: 0.5rem; padding: 1.1rem 0.2rem 0.6rem; }
.sectie-aanbod .aanbod-tegel .tegel-duur { margin-top: 0.2rem; padding-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .sectie-aanbod .aanbod-tegel,
  .sectie-aanbod .aanbod-tegel figure img,
  .tegel-pijl { transition: none; }
  .sectie-aanbod .aanbod-tegel:hover,
  .sectie-aanbod .aanbod-tegel:focus-visible { transform: none; }
  .sectie-aanbod .aanbod-tegel:hover figure img { transform: none; }
}

/* --- Methode: "Meer rust" sluit de keten bewust af --------------------- */
/* Zeven schakels in zes kolommen liet de laatste alleen op een rij staan,
   als een restant. Nu is hij de afsluiting: volle breedte, oranje vlak,
   met een pijl die vanuit de keten naar het eindpunt wijst. Navy tekst op
   oranje (5,5:1); wit op oranje haalt maar 2,8:1. */
@media (min-width: 640px) {
  .ontwikkelketen .schakel:last-child {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-color: var(--ivo-orange);
    background: var(--ivo-orange);
    color: var(--ivo-navy);
  }
  .ontwikkelketen .schakel:last-child::before {
    content: "\2192";
    order: 2;
    font-size: 1.5rem;
    line-height: 1;
  }
  .ontwikkelketen .schakel:last-child .schakel-nummer { order: 1; margin: 0; color: var(--ivo-navy); }
  .ontwikkelketen .schakel:last-child .schakel-naam { order: 3; font-size: clamp(1.1rem, 1.5vw, 1.45rem); }
}

/* =========================================================================
   0.57.0 STAP 7: FORMULIEREN EN FOOTER
   ========================================================================= */
/* Foutmelding onder het veld (gelijk aan ivothijssen.nl). Geen nieuwe
   kleur: op een licht vlak navy tekst met een oranje markering (oranje
   tekst haalt daar maar 2,6:1), op een donker vlak oranje tekst (5,5:1).
   Het veld krijgt een dikkere oranje rand, zodat de fout niet alleen aan
   de kleur van de tekst te zien is. */
.hi-veldfout,
.hi-formulier .wpcf7-not-valid-tip {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-top: 0.4rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: var(--titel-op-licht);
}
.hi-veldfout[hidden] { display: none; }
.hi-veldfout::before,
.hi-formulier .wpcf7-not-valid-tip::before {
  content: "!";
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: var(--ivo-orange);
  color: var(--ivo-navy);
  font-size: 0.8em;
  font-weight: 700;
}
.vlak-navy .hi-veldfout,
.site-footer .hi-veldfout,
.vlak-navy .hi-formulier .wpcf7-not-valid-tip { color: var(--ivo-orange); }
.hi-formulier-veld.heeft-fout input,
.hi-formulier-veld.heeft-fout textarea,
.vlak-sky .hi-formulier-veld.heeft-fout input,
.vlak-sky .hi-formulier-veld.heeft-fout textarea,
.hi-formulier .wpcf7-not-valid {
  border: 2px solid var(--ivo-orange);
}
.hi-formulier-fout {
  padding: 0.9rem 1.1rem;
  border-left: 4px solid var(--ivo-orange);
  background: rgb(var(--orange-rgb) / 0.08);
  font-weight: 600;
}
.hi-formulier-gelukt:focus { outline: none; }
.hi-formulier-gelukt:focus-visible { outline: 2px solid var(--ivo-orange); outline-offset: 3px; }

/* Toestemmingsregel: tekst minimaal 14 pixel, vinkje 20 bij 20 met een
   klikgebied van 44 pixel hoog (het hele label is klikbaar). */
.hi-formulier-akkoord,
.voet-nieuwsbrief .hi-formulier-akkoord { font-size: 0.875rem; }
.hi-formulier-akkoord label {
  min-height: var(--doel-min);
  gap: 0.75rem;
  padding-block: 0.25rem;
  cursor: pointer;
}
.hi-formulier-akkoord input,
.hi-formulier .wpcf7-acceptance input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  accent-color: var(--ivo-orange);
  cursor: pointer;
}
.hi-formulier-akkoord .hi-veldfout { margin-top: 0.4rem; }
.hi-formulier .wpcf7-acceptance label { display: inline-flex; gap: 0.75rem; align-items: flex-start; min-height: var(--doel-min); cursor: pointer; }

/* Footer: telefoon en KvK-nummer, als ze in de Customizer staan. */
.footer-contact-regel { color: var(--zacht); }

/* =========================================================================
   0.57.0 RONDE 2: DE HELE SITE
   Dezelfde regels als op de homepage, doorgetrokken naar alle sjablonen
   en secties. Geen nieuwe kleuren of letters.
   ========================================================================= */

/* --- Beelden als <picture> met srcset en vaste maten --------------------- */
/* Het picture-element zelf telt niet mee in de opmaak; de bestaande regels
   voor de img (verhouding, object-fit, hover) blijven zo gewoon werken. */
.kaart figure picture,
.foto-collage picture,
.tekstblok-beeld picture,
.logo-rij picture,
.sectie-usp picture { display: contents; }

/* Artikelhero: de foto als echte afbeelding, met dezelfde sluier als
   voorheen (van 62 naar 86 procent navy, van boven naar beneden). */
.pagina-hero.is-artikel .hero-beeld::after {
  background: linear-gradient(rgb(var(--navy-rgb) / 0.62), rgb(var(--navy-rgb) / 0.86));
}

/* --- Kleine oranje labels op lichte vlakken ------------------------------ */
/* Op navy haalt oranje 5,5:1, op Sky en Sand maar 2,6:1 en 1,9:1: te weinig
   voor tekst van 12 pixel. Zelfde keuze als bij de koppen (zie
   --titel-op-licht): op lichte vlakken navy, op donkere vlakken blijft het
   oranje. Gemeten op /werkwijze/, /voor-wie/ en /aanbod/...: ketennummers,
   modulenummers, het label "Oplevering" bij de fases en de doorverwijzing
   bij de doelgroepen. */
.vlak-sky .schakel-nummer,
.vlak-sky .module-nummer,
.vlak-sky .fase-label,
.vlak-sky .doelgroep-route,
.vlak-sand .schakel-nummer,
.vlak-sand .fase-label,
.vlak-sand .doelgroep-route { color: var(--ivo-navy); }

/* Feitenlijst op een aanbodpagina (Voor wie, Doorlooptijd, Vorm): 60
   procent navy op Sky is 4,1:1; 72 procent haalt 6,0:1. */
.aanbod-feiten dt { color: rgb(var(--navy-rgb) / 0.72); }

/* --- Artikelen (plugin c4it-blog-conversie, opmaak via het thema) -------- */
/* De links in de inhoudsopgave waren 21 tot 23 pixel hoog; nu minstens 24,
   het WCAG-minimum voor een doel met ruimte eromheen. */
.c4b-blog .c4b-toc a { display: inline-block; min-height: 24px; padding-block: 2px; }
/* "(optioneel)" stond op 70 procent dekking (4,1:1); 85 procent haalt 4,5:1
   ruim. */
.c4b-blog .c4b-opt { opacity: 0.85; }

/* --- Lopende tekst minstens 16 pixel -------------------------------------- */
/* In kaarten, lijsten en tegels stond de lopende tekst op 14,7 tot 15,5
   pixel (0,92 tot 0,97 rem), kleiner dan de broodtekst. Gemeten op alle
   pagina's: alles wat een zin is staat nu op de broodtekstmaat. Kleine
   lettertjes (bronnen, voetnoten, de toestemmingsregel) blijven kleiner en
   blijven boven de 12 pixel. */
.kaart-body p,
.usp-raster p,
.artikel-kaart p,
.contrast-kolom li,
.sectie-contentblok .contentblok-body > p:first-child + p,
.sectie-contentblok .contentblok-body > p ~ p,
.sectie-contentblok .contentblok-body ul li,
.cascade span,
.pijler-tekst,
.module-probleem,
.kpi-wat,
.fase-thema,
.fase-oplevering,
.case-quote p,
.doelgroep-zoekt,
.aanbod-zijkant li,
.entry-content td,
.tekstblok-body td { font-size: var(--fs-body); }

/* --- Focus nooit onder de vaste balken ------------------------------------ */
/* De header staat vast bovenin. Sprong de browser met Tab of via een anker
   (#formulier) naar een veld, dan kon dat veld er net onder vallen (WCAG
   2.4.11). Zelfde voor de vaste knop onderaan een artikel (c4b-sticky, 52
   pixel hoog op 16 pixel van de rand). */
html { scroll-padding-top: calc(var(--header-h) + 24px); scroll-padding-bottom: 24px; }
.c4b-blog { scroll-padding-bottom: 96px; }
html:has(body.c4b-blog) { scroll-padding-bottom: 96px; }

/* --- Zoekveld en ingesloten venster: dezelfde focusrand als de rest ------- */
/* Het zoekveld (zoekresultaten en 404) zette de outline uit en kleurde
   alleen de rand van 1 pixel oranje. Nu dezelfde rand als de velden in de
   formulieren. Het ingesloten venster (/ondertekenen/) krijgt de rand om
   het kader zolang de focus erin staat. */
.zoekformulier input[type="search"]:focus-visible,
.insluiting iframe:focus-visible,
.insluiting iframe:focus,
.insluiting:focus-within {
  outline: 3px solid var(--ivo-orange);
  outline-offset: 2px;
}

/* Blogs van de plugin C4IT Blog Conversie (.c4b-page): de themaregel voor
   het eerste blok in <main> gaf hier sectieruimte plus headerhoogte boven de
   blogkop, waardoor een lichte balk onder de header stond. De blogkop loopt
   nu door tot bovenaan, onder de transparante header, net als de hero op de
   andere pagina's; alleen de tekst in de kop schuift de headerhoogte op. */

.c4b-page .c4b-hero__inner { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 88px)); }