/* =========================================================================
   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.
   ------------------------------------------------------------------------- */
:root {
  --ivo-navy: #122439;
  --ivo-sky: #ECF5FF;
  --ivo-sand: #E3D2B6;
  --ivo-orange: #FF6B2C;

  --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. */
  --font-titel: "futura-pt", "Futura PT", "Futura PT Book", "Jost", "Futura", "Century Gothic", sans-serif;
  --font-tekst: "Open Sans", -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, bewuste afwijking.
     Sectietitels staan overal in oranje, zoals op ivothijssen.nl. Op Navy
     haalt Ivo Orange 5,5:1 en dat is ruim voldoende. Op Sky is het 2,6:1,
     onder de WCAG-eis van 3:1 voor grote tekst. Dat is een merkkeuze die met
     het ontwerp is meegekomen; het staat genoteerd als geaccepteerde
     afwijking. Wil je het alsnog conform maken, zet --titel-op-licht dan op
     var(--ivo-navy): de oranje accentstreep boven de kop houdt dan het
     merkaccent vast. Oranje tekst op Sand (1,9:1) blijft hoe dan ook uit. */
  --titel-op-licht: var(--ivo-orange);
  --titel-op-donker: var(--ivo-orange);

  --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: clamp(15.5px, 1vw, 17px);
  line-height: 1.8;
  -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: 0.72rem; font-weight: 500; letter-spacing: 0.2em; }

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 rgb(var(--navy-rgb) / 0.14);
  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) {
  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-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-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);
}

/* 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: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  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: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1;
  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(--ivo-sky);
}
.vlak-navy .btn-omlijnd:hover { color: var(--ivo-navy); }

.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: 0.66rem; 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: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  opacity: 0.75;
  transition: opacity 0.3s ease, border-color 0.2s ease;
}
.nav-link:hover { border-bottom-color: var(--ivo-orange); opacity: 1; }
.nav-menu .is-actief > .nav-link { opacity: 1; }
.nav-menu .is-actief > .nav-link { border-bottom-color: var(--ivo-orange); }

.nav-cta::after {
  content: "\2197";
  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);
  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;
  background-position: center right;
}

/* De leessluier. 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.97) 0%,
      rgb(var(--navy-rgb) / 0.88) 26%,
      rgb(var(--navy-rgb) / 0.45) 56%,
      rgb(var(--navy-rgb) / 0.12) 82%,
      rgb(var(--navy-rgb) / 0.08) 100%
    ),
    linear-gradient(
      0deg,
      rgb(var(--navy-rgb) / 0.55) 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: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  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);
}
/* Het tweede deel van de kop in oranje, zoals bij Ivo. Zet in het heroveld
   <strong> om het woord of de zin die moet opvallen. */
.hero h1 strong { font-weight: inherit; color: var(--ivo-orange); }

.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.95) 0%,
    rgb(var(--navy-rgb) / 0.72) 48%,
    rgb(var(--navy-rgb) / 0.42) 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: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  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) {
  .aanbod-raster {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
  }

  /* Met de tegelklasse ervoor, anders wint de basisregel verderop in dit
     bestand op volgorde. */
  .aanbod-tegel .tegel-nummer { font-size: 3.4rem; margin-bottom: 0.5rem; }
  .aanbod-tegel .tegel-titel { font-size: 0.82rem; letter-spacing: 0.04em; }
  .aanbod-tegel .tegel-tekst { font-size: 0.85rem; line-height: 1.5; }
  .aanbod-tegel .aanbod-tegel__cijfer b { font-size: 1.5rem; }
  .aanbod-tegel .aanbod-tegel__cijfer span { font-size: 0.74rem; }
  .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;
  border-top: 1px solid var(--hairline);
}
.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: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
}
.cijferlijst .categorie {
  justify-self: end;
  font-family: var(--font-titel);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  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: left; }
.sectie-quote blockquote {
  margin: 0;
  /* Breedte in ch, zodat de regel meeschaalt met de lettergrootte en de
     quote nooit uit zijn kader loopt. */
  max-width: 30ch;
  font-family: var(--font-titel);
  font-size: clamp(1.7rem, 1rem + 3.4vw, 4rem);
  font-weight: 500;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.sectie-quote blockquote::before { content: "\201C"; }
.sectie-quote blockquote::after { content: "\201D"; }

.sectie-quote figcaption {
  margin-top: clamp(24px, 3vw, 44px);
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  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;
}

/* Eyebrow: streepje, volgnummer, 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: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.34em;
  line-height: 1.6;
  text-transform: uppercase;
}
.blok-streep {
  width: 28px;
  height: 2px;
  background: var(--ivo-orange);
  flex: none;
}
.blok-nummer { color: var(--ivo-orange); }
.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(--ivo-sky);
}
.vlak-navy .btn-vlak { color: var(--ivo-navy); }
.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: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 1px solid rgb(var(--navy-rgb) / 0.16);
}
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: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  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); }
  .aanbod-zijkant { position: sticky; top: 120px; }
}
.aanbod-inhoud { max-width: 64ch; }
.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
   ------------------------------------------------------------------------- */
.artikel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 28ch), 1fr));
  gap: clamp(20px, 2.4vw, 36px);
}
.artikel-kaart {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--hairline);
}
.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: 0.74rem;
  letter-spacing: 0.18em;
  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: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  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: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  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: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  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.16);
  --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: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  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;
  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 {
  content: "\2197";
  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.55) 0%,
      rgb(var(--navy-rgb) / 0.82) 45%,
      rgb(var(--navy-rgb) / 0.96) 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.35rem; }
  .aanbod-tegel__body h3,
  .kaart-body h3 { font-size: 1.05rem; }
}

@media (max-width: 560px) {
  .sectie-quote blockquote { max-width: none; }
  .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;
  border-top: 1px solid var(--hairline);
  font-family: var(--font-titel);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  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: "—";
  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: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  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: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  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: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  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: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  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: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  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); }

.kpi-noot,
.rekentool-bronnen {
  max-width: 78ch;
  margin-top: clamp(24px, 2.6vw, 40px);
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline);
  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: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  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 rgb(var(--sky-rgb) / 0.2); }
.rekenregels li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
  padding-block: 0.85rem;
  border-bottom: 1px solid rgb(var(--sky-rgb) / 0.2);
}
.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); }

.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: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  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: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  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;
  border-top: 1px solid var(--hairline);
  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: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  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: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  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;
  border-top: 1px solid var(--hairline);
}
.case-quote p { font-size: 0.97rem; line-height: 1.65; font-style: italic; }
.case-quote cite {
  font-family: var(--font-titel);
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.18em;
  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: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  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; }
}