/* ==========================================================================
   Designsysteem West & Co
   Tokens en componenten op basis van de Figma-styleguide.
   ========================================================================== */

:root {
  /* Logokleuren */
  --wc-rood: #f0514f;
  --wc-blauw: #2c5baa;
  --wc-groen-logo: #0f9676;

  /* Huisstijl, cyaan (basisonderwijs) */
  --wc-cyaan: #00b5db;
  /* Diepere cyaan voor witte tekst op een vlak: 3,4:1 in plaats van 2,4:1 */
  --wc-cyaan-diep: #0097bc;
  --wc-cyaan-medium: #65cdf4;
  --wc-cyaan-licht: #99daf0;

  /* Huisstijl, roze (kinderopvang) */
  --wc-roze: #f973ad;
  --wc-roze-licht: #f5a4c7;
  --wc-rood-zacht: #f15f65;

  /* Huisstijl, geel/oranje (welzijn) */
  --wc-geel-fel: #f7ec16;
  --wc-geel: #ffce4b;
  --wc-oranje: #ffaa35;

  /* Huisstijl, groen */
  --wc-groen: #4abea2;
  --wc-groen-licht: #cae8de;

  /* Neutraal */
  --wc-zwart: #231f20;
  --wc-wit: #ffffff;
  --wc-grijs-licht: #f0f0f0;
  --wc-grijs: #d3d3d3;
  --wc-grijs-tekst: #5f5b5c;

  /* Semantisch */
  --wc-ink: var(--wc-zwart);
  --wc-paper: var(--wc-wit);
  --wc-muted: var(--wc-grijs-tekst);
  --wc-line: #e6e2e0;

  /* Typografie. Schaal exact uit de Figma-styleguide (desktop 1440px).
     Mobiel schaalt vloeiend mee; de desktopwaarde is het maximum. */
  --wc-font: "Figtree", "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wc-h1: clamp(2.5rem, 5.62vw, 5.0625rem);   /* 81px */
  --wc-h2: clamp(2rem, 3.75vw, 3.375rem);      /* 54px */
  --wc-h3: clamp(1.5rem, 2.22vw, 2rem);        /* 32px */
  --wc-h4: clamp(1.25rem, 1.67vw, 1.5rem);     /* 24px */
  --wc-h5: clamp(1.125rem, 1.39vw, 1.25rem);   /* 20px */
  --wc-h6: 1rem;                               /* 16px */

  --wc-lh-h1: 1;
  --wc-lh-h2: 1;
  --wc-lh-h3: 1.2;
  --wc-lh-h4: 1.2;
  --wc-lh-h5: 1.3;
  --wc-lh-body: 1.5;

  --wc-text-large: 1.25rem;    /* 20px */
  --wc-text-medium: 1.125rem;  /* 18px */
  --wc-text: 1rem;             /* 16px */
  --wc-text-small: 0.875rem;   /* 14px */
  --wc-text-tiny: 0.75rem;     /* 12px */

  --wc-nbr: clamp(2.375rem, 6.8vw, 6.125rem);  /* 38 → 98px */

  /* Grid, marges en gutters uit de styleguide */
  --wc-margin: 1rem;      /* mobiel */
  --wc-gutter: 1rem;
  /* De marge in het ontwerp is 5% van de framebreedte: 72 op een frame van
     1440, 75 op het homeframe van 1500. Een container van 1350 geeft beide
     precies, op 1440 blijft er 1296 over, op 1500 exact de 1350 uit Figma,
     en zet er op nog bredere schermen een bovengrens op. */
  --wc-container: 84.375rem;  /* 1350px = 1500 - 2x75 */

  /* Balk- en logomaat. Alle logoblokken zijn hiervan afgeleid, zodat
     de Figma-verhoudingen (75 / 101 / 198) op elk scherm kloppen. */
  --wc-nav-base: 75px;

  /* Waar de gecentreerde container begint. Op brede schermen is dat
     meer dan de marge, want de container is maximaal 1350 breed. */
  --wc-inset: max(var(--wc-margin), calc((100vw - var(--wc-container)) / 2));
  /* Hoogte van de gekleurde strook boven de locatiekaarten */
  --wc-band-strip-h: clamp(56px, 5vw, 72px);

  /* Ritme. De witruimteschaal die de redactie per sectie kiest, is
     afgeleid van de 75px-module uit het ontwerp: klein is een halve
     module, middel een hele, groot twee. */
  --wc-ruimte-s: clamp(1.5rem, 2.5vw, 2.34375rem);  /*  24 →  37,5 */
  --wc-ruimte-m: clamp(2.5rem, 5vw, 4.6875rem);     /*  40 →  75   */
  --wc-ruimte-l: clamp(4rem, 10vw, 9.375rem);       /*  64 → 150   */
  --wc-section-y: clamp(3rem, 6vw, 5.5rem);
  --wc-radius: 0px;
  --wc-radius-pill: 999px;

  /* Motion */
  --wc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --wc-dur: 0.6s;
}

@media (max-width: 767px) { :root { --wc-nav-base: 56px; } }
@media (min-width: 576px) { :root { --wc-margin: 2rem; --wc-gutter: 1.5rem; } }
@media (min-width: 960px) { :root { --wc-margin: 3.5rem; --wc-gutter: 1.5rem; } }
@media (min-width: 1280px) { :root { --wc-margin: 4.5rem; --wc-gutter: 2rem; } }

/* Sub-merk-accenten: zet .theme--x op een sectie of pagina */
.theme--kinderopvang { --wc-accent: var(--wc-roze); --wc-accent-licht: var(--wc-roze-licht); }
.theme--basisonderwijs { --wc-accent: var(--wc-cyaan); --wc-accent-licht: var(--wc-cyaan-licht); }
.theme--welzijn { --wc-accent: var(--wc-geel); --wc-accent-licht: var(--wc-geel-fel); }
.theme--groen { --wc-accent: var(--wc-groen); --wc-accent-licht: var(--wc-groen-licht); }
body { --wc-accent: var(--wc-cyaan); --wc-accent-licht: var(--wc-cyaan-licht); }

/* --------------------------------------------------------------- basis */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-family: var(--wc-font); }
button, input, select, textarea { font-family: inherit; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--wc-paper);
  color: var(--wc-ink);
  font-family: var(--wc-font);
  font-size: var(--wc-text-medium);
  line-height: var(--wc-lh-body);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration-color: var(--wc-accent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--wc-blauw); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.4em;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--wc-h1); line-height: var(--wc-lh-h1); }
h2 { font-size: var(--wc-h2); line-height: var(--wc-lh-h2); }
h3 { font-size: var(--wc-h3); line-height: var(--wc-lh-h3); }
h4 { font-size: var(--wc-h4); line-height: var(--wc-lh-h4); }
h5 { font-size: var(--wc-h5); line-height: var(--wc-lh-h5); }
h6 { font-size: var(--wc-h6); line-height: var(--wc-lh-body); }
p { margin: 0 0 1em; max-width: 62ch; }
ul, ol { max-width: 62ch; }

.wc-lead { font-size: var(--wc-text-large); line-height: var(--wc-lh-body); }
.wc-eyebrow {
  display: inline-block;
  font-size: var(--wc-text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

/* Cijfers krijgen tabular figures (styleguide: aparte cijferstijl) */
.wc-nbr { font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.02em; }

/* -------------------------------------------------- highlight-blokken */
/* Handelsmerk: gekleurde vlakken achter losse woorden in koppen.        */

.wc-hl {
  display: inline;
  /* Maten uit de Figma-component "Boxed title" (H1 81px): vlak 300x113
     voor het woord "samen", dus 30px links en rechts, 14 boven en 18
     onder het em-vak van de letter. In CSS is het regelvak van Figtree
     zelf al 1,209em hoog en steekt het aan beide zijden 0,1045em buiten
     het em-vak, dus blijft er 14-8,46=5,54px (0,0684em) boven en
     18-8,46=9,54px (0,1178em) onder over. Totaal 1,395em = precies de
     regelafstand hieronder. De onderrand krijgt er nog 0,6px bij, zodat
     vlakken op opeenvolgende regels elkaar met zekerheid raken en er
     geen haarlijn wit tussen valt door afronding. */
  padding: 0.0684em 0.37em 0.1252em;
  margin: 0;
  /* De vlakken zijn bouwstenen: ze raken elkaar. */
  vertical-align: baseline;
  color: var(--wc-zwart);
  background-color: var(--hl);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Kleurreeks zoals in het ontwerp: geel → groen → mintgroen → roze */
.wc-hl--geel { --hl: var(--wc-geel); }
.wc-hl--groen { --hl: var(--wc-groen); }
.wc-hl--groenlicht { --hl: var(--wc-groen-licht); }
.wc-hl--roze { --hl: var(--wc-roze-licht); }
.wc-hl--cyaan { --hl: var(--wc-cyaan-licht); }
.wc-hl--cyaanmedium { --hl: var(--wc-cyaan-medium); }
.wc-hl--rozelicht { --hl: var(--wc-roze-licht); }
.wc-hl--oranje { --hl: var(--wc-oranje); }
.wc-hl--wit { --hl: var(--wc-wit); }

/* Twee vlakken naast elkaar sluiten aan: de spatie ertussen is precies
   0,228em breed, die halen we weg. De marge staat op het vóórgaande vlak,
   niet op het volgende, anders trekt een vlak dat naar een nieuwe regel
   afbreekt zichzelf de marge uit. Volgt er gewone tekst na een vlak, dan
   blijft de spatie gewoon staan. */
.wc-hl:has(+ .wc-hl) { margin-right: -0.228em; }

/* Inrol-animatie: het vlak veegt van links naar rechts in de eigen
   kleur open. De achtergrondkleur zelf blijft transparant zolang de
   veeg loopt, anders zie je het blok al staan. */
@media (prefers-reduced-motion: no-preference) {
  .js .wc-reveal .wc-hl {
    background-color: transparent;
    background-image: linear-gradient(var(--hl), var(--hl));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-size var(--wc-dur) var(--wc-ease);
  }
}

/* ------------------------------------------------------------- layout */

.wc-container {
  width: 100%;
  max-width: calc(var(--wc-container) + 2 * var(--wc-margin));
  margin-inline: auto;
  padding-inline: var(--wc-margin);
}
.wc-container--wide { max-width: 1600px; }

.wc-section { padding-block: var(--wc-section-y); }
.wc-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }

/* ---------------------------------------- witruimte boven en onder een
   sectie, ingesteld in het CMS (Stijling → Ruimte boven/onder).
   Kiest de redactie niets, dan houdt de sectie zijn eigen ontworpen
   ritme. `.plate--section` staat er alleen bij om de sectie-eigen
   padding te overstemmen; elke sectie heeft die klasse. Voor "Andere
   ruimte" schrijft includes/ruimte_stijl een eigen regel. */
@media (min-width: 576px) {
  .plate--section.wc-pt-d--s { padding-top: var(--wc-ruimte-s); }
  .plate--section.wc-pt-d--m { padding-top: var(--wc-ruimte-m); }
  .plate--section.wc-pt-d--l { padding-top: var(--wc-ruimte-l); }
  .plate--section.wc-pb-d--s { padding-bottom: var(--wc-ruimte-s); }
  .plate--section.wc-pb-d--m { padding-bottom: var(--wc-ruimte-m); }
  .plate--section.wc-pb-d--l { padding-bottom: var(--wc-ruimte-l); }
}
@media (max-width: 575.98px) {
  .plate--section.wc-pt-m--s { padding-top: var(--wc-ruimte-s); }
  .plate--section.wc-pt-m--m { padding-top: var(--wc-ruimte-m); }
  .plate--section.wc-pt-m--l { padding-top: var(--wc-ruimte-l); }
  .plate--section.wc-pb-m--s { padding-bottom: var(--wc-ruimte-s); }
  .plate--section.wc-pb-m--m { padding-bottom: var(--wc-ruimte-m); }
  .plate--section.wc-pb-m--l { padding-bottom: var(--wc-ruimte-l); }
}
.wc-section--grijs { background: var(--wc-grijs-licht); }
.wc-section--zwart { background: var(--wc-zwart); color: var(--wc-wit); }
.wc-section--accent { background: var(--wc-accent-licht); }

.wc-grid { display: grid; gap: var(--wc-gutter); }
.wc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.wc-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.wc-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

.wc-split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .wc-split { grid-template-columns: 1fr 1fr; } }
.wc-split--flip > :first-child { order: 2; }

.wc-stack > * + * { margin-top: 1rem; }
.wc-measure { max-width: 46rem; }

/* ------------------------------------------------------------ knoppen */

.wc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 68px;
  padding: 0 29px;
  border: 2px solid var(--wc-zwart);
  border-radius: var(--wc-radius-pill);
  background: var(--wc-zwart);
  color: var(--wc-wit);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--wc-text-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--wc-ease), background-color 0.2s var(--wc-ease), color 0.2s var(--wc-ease);
}
.wc-btn:hover { background: var(--wc-accent); border-color: var(--wc-accent); color: var(--wc-zwart); transform: translateY(-2px); }
.wc-btn--outline { background: transparent; color: var(--wc-zwart); }
.wc-btn--outline:hover { background: var(--wc-zwart); color: var(--wc-wit); border-color: var(--wc-zwart); }
.wc-btn--licht { background: var(--wc-wit); color: var(--wc-zwart); border-color: var(--wc-wit); }
.wc-btn .wc-btn__arrow { transition: transform 0.2s var(--wc-ease); }
.wc-btn:hover .wc-btn__arrow { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .wc-btn, .wc-btn:hover, .wc-btn__arrow { transition: none; transform: none; }
}

/* ---------------------------------------------------------------- logo */
/*
   Twee standen, één set blokken. De blokken staan absoluut in een
   "stage"; --wc-p-west/-amp/-co lopen van 0 (rechte hoek) naar
   1 (rij van drie). De JS zet die waarden op basis van de scrollpositie
   en geeft elk blok een iets andere voortgang: dat is de parallax.

   Maatvoering (rij-stand, intrinsiek):
     west 116 x 44   amp 44 x 44   co 60 x 44
   In de hoek-stand is west -90° gedraaid; hij wordt dan 44 breed en
   116 hoog en hangt onder het &-blok.
*/

.wc-logo {
  /* Figma-verhoudingen: & 75x75, co 101x75, west 75x198 */
  --h-block: var(--wc-nav-base);
  --w-amp: var(--wc-nav-base);
  --w-co: calc(var(--wc-nav-base) * 1.3467);
  --w-west: calc(var(--wc-nav-base) * 2.64);

  --wc-p-west: 1;
  --wc-p-amp: 1;
  --wc-p-co: 1;

  position: relative;
  display: block;
  /* De transform verandert de layout niet; reserveer de breedte van de
     opgevouwen rij, want die is breder dan de hoek-stand. */
  width: calc(var(--w-west) + var(--w-amp) + var(--w-co));
  height: var(--h-block);
  text-decoration: none;
  flex: none;
}

.wc-logo__img { height: var(--h-block); width: auto; }

.wc-logo__stage { position: absolute; inset: 0; display: block; }

.wc-logo__block {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--h-block);
  color: var(--wc-wit);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  transform-origin: 0 0;
  will-change: transform;
}

.wc-logo__block--west {
  width: var(--w-west);
  background: var(--wc-rood);
  /* hoek-stand: gedraaid en onder het &-blok geschoven */
  transform:
    translate(0px, calc((var(--w-west) + var(--h-block)) * (1 - var(--wc-p-west))))
    rotate(calc(-90deg * (1 - var(--wc-p-west))));
}

.wc-logo__block--amp {
  width: var(--w-amp);
  background: var(--wc-blauw);
  transform: translate(calc(var(--w-west) * var(--wc-p-amp)), 0);
}

.wc-logo__block--co {
  width: var(--w-co);
  background: var(--wc-groen-logo);
  transform: translate(
    calc(var(--w-amp) + (var(--w-west) * var(--wc-p-co))), 0);
}

/* In de hoek-stand hangt het logo onder de balk uit; de nav mag dat
   niet afknippen en de knoppen ernaast mogen er niet onder schuiven. */
.wc-nav { overflow: visible; }

@media (prefers-reduced-motion: reduce) {
  .wc-logo__block { transition: none; }
}

/* ---------------------------------------------------------- navigatie */
/* Volle vensterbreedte, geen container: logo vlak linksboven, de twee
   vierkanten vlak rechts. Hoogte 75px zoals in Figma; bij scrollen
   krimpt de balk mee met het logo. */

.wc-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--wc-paper);
  overflow: visible;
}

.wc-nav__bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: var(--wc-nav-h, var(--wc-nav-base));
  transition: height 0.2s linear;
}

.wc-nav__links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0 clamp(1rem, 2.5vw, 2.5rem) 0 auto;
  padding: 0;
}
@media (min-width: 1100px) { .wc-nav__links { display: flex; } }

.wc-nav__links a {
  position: relative;
  font-size: var(--wc-text-medium);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.4rem;
}
.wc-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--wc-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--wc-ease);
}
.wc-nav__links a:hover::after,
.wc-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* De twee vierkanten rechts */
.wc-nav__square {
  flex: none;
  width: var(--wc-nav-h, var(--wc-nav-base));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s var(--wc-ease), color 0.2s var(--wc-ease);
}
.wc-nav__square--menu { background: var(--wc-zwart); color: var(--wc-wit); margin-left: auto; }
.wc-nav__square--search { background: var(--wc-wit); color: var(--wc-zwart); }
@media (max-width: 767px) { .wc-nav__square--search { display: none; } }
.wc-nav__square--menu:hover { background: var(--wc-accent); color: var(--wc-zwart); }
.wc-nav__square--search:hover { background: var(--wc-grijs-licht); }
@media (min-width: 1100px) { .wc-nav__square--menu { margin-left: 0; } }

.wc-nav__panel {
  display: none;
  border-top: 1px solid var(--wc-line);
  background: var(--wc-paper);
  padding-block: 1rem 2.5rem;
}
.wc-nav__panel[data-open="true"] { display: block; }
.wc-nav__panel ul { list-style: none; margin: 0; padding: 0; }
.wc-nav__panel li + li { border-top: 1px solid var(--wc-line); }
.wc-nav__panel li a {
  display: block;
  padding: 0.85rem 0;
  font-size: var(--wc-h4);
  font-weight: 700;
  text-decoration: none;
}
.wc-nav__panel .wc-btn { margin-top: 1.5rem; }

/* --------------------------------------------------------------- hero */
/* Volle vensterbreedte, geen container. Beeld 20:9 (Figma 1500x675)
   met een maximum hoogte. De H1 wordt één regel omhooggetrokken zodat
   de eerste regel over de onderrand van het beeld valt. */

.wc-hero { position: relative; }

.wc-hero__media {
  position: relative;
  width: 100%;
  background: var(--wc-grijs-licht);
  overflow: hidden;
}
.wc-hero__media img,
.wc-hero__media video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 76vh;
  object-fit: cover;
}

/* Onder het beeld: links de intro, rechts de staart van de kop.
   De kolomverdeling volgt het ontwerp: de kop begint op ongeveer een
   derde van de breedte. */
.wc-hero__body {
  /* Boven het beeld stapelen: een video vormt anders een eigen laag en
     dekt de eerste regel van de kop af. */
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  max-width: calc(var(--wc-container) + 2 * var(--wc-margin));
  margin-inline: auto;
  padding-inline: var(--wc-margin);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 768px) {
  .wc-hero__media img,
  .wc-hero__media video { aspect-ratio: 20 / 9; }
}

@media (min-width: 960px) {
  .wc-hero__body {
    /* De kop begint in Figma op 526 van een contentbreedte van 1350,
       oftewel 33,4%. Nu gemeten binnen de container, zodat de tekst op
       brede schermen mee naar het midden schuift. */
    grid-template-columns: calc(33.4% - var(--wc-gutter)) 1fr;
    column-gap: var(--wc-gutter);
    align-items: start;
  }
}

.wc-hero__title {
  margin: 0;
  font-size: var(--wc-h1);
  line-height: 1.395;
  grid-column: 1 / -1;
}
@media (min-width: 960px) {
  .wc-hero__title {
    grid-column: 2;
    grid-row: 1;
    /* Eén regel omhoog, zodat de eerste regel op het beeld valt.
       De +11px corrigeert het verschil tussen de halve regelafstand
       hier en de tekstpositie in Figma. */
    margin-top: calc(-1.395em + 11px);
    margin-left: 0;
    /* In het ontwerp springt de tweede regel 167 van 1500 (11,13%) in
       ten opzichte van de eerste. Een negatieve text-indent met
       bijpassende padding geeft precies dat. */
    /* In Figma springt de tweede regel handmatig in. Dat nabootsen met
       text-indent kost regelbreedte en duwt de kop naar drie regels, dus
       beide regels lijnen links uit. */
  }
}

.wc-hero__intro { padding-top: clamp(1.25rem, 3vw, 2.75rem); }
@media (min-width: 960px) {
  .wc-hero__intro {
    grid-column: 1;
    grid-row: 1;
    max-width: 22rem;
  }
}
.wc-hero__intro .wc-prose { margin-bottom: 1.75rem; }

/* Header zonder beeld: kop gewoon onder de balk */
.wc-hero--plain .wc-hero__body { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.wc-hero--plain .wc-hero__title { margin-top: 0; margin-left: 0; grid-column: 1 / -1; }
.wc-hero--plain .wc-hero__intro { grid-column: 1; grid-row: 2; }

/* Videoknop */
.wc-video-toggle {
  position: absolute;
  right: var(--wc-inset); bottom: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--wc-radius-pill);
  background: rgba(35, 31, 32, 0.7);
  color: var(--wc-wit);
  font-family: inherit;
  font-size: var(--wc-text-tiny);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.wc-video-toggle:hover { background: var(--wc-zwart); }

/* --------------------------------------------------------------- kaart */

.wc-card {
  display: flex;
  flex-direction: column;
  background: var(--wc-paper);
  text-decoration: none;
  height: 100%;
}
.wc-card__media { overflow: hidden; background: var(--wc-grijs-licht); aspect-ratio: 4 / 3; }
.wc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--wc-ease); }
.wc-card:hover .wc-card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .wc-card:hover .wc-card__media img { transform: none; } }
.wc-card__body { padding: 1rem 0 0; }
.wc-card__label {
  display: inline-block;
  padding: 0.25em 0.6em;
  margin-bottom: 0.6rem;
  background: var(--wc-accent-licht);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.wc-card__title { font-size: var(--wc-h4); margin: 0 0 0.35rem; }
.wc-card__meta { color: var(--wc-muted); font-size: var(--wc-text-small); }

/* -------------------------------------------------------------- cijfers */

.wc-stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.wc-stat { padding: clamp(1.25rem, 3vw, 2.25rem); }
.wc-stat:nth-child(4n+1) { background: var(--wc-geel); }
.wc-stat:nth-child(4n+2) { background: var(--wc-groen); }
.wc-stat:nth-child(4n+3) { background: var(--wc-roze-licht); }
.wc-stat:nth-child(4n+4) { background: var(--wc-cyaan-medium); }
.wc-stat__value { font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1; }
.wc-stat__label { font-size: var(--wc-text-small); font-weight: 700; }

/* ------------------------------------------------------------ vacature */

.wc-vacancy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--wc-line);
  text-decoration: none;
}
.wc-vacancy:last-child { border-bottom: 1px solid var(--wc-line); }
.wc-vacancy__title { font-weight: 700; font-size: 1.1rem; }
.wc-vacancy__meta { color: var(--wc-muted); font-size: var(--wc-text-small); }
.wc-vacancy__arrow { flex: none; transition: transform 0.2s var(--wc-ease); }
.wc-vacancy:hover .wc-vacancy__arrow { transform: translateX(4px); }
.wc-tag {
  display: inline-block;
  padding: 0.2em 0.55em;
  background: var(--wc-geel);
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ------------------------------------------------------------- footer */
/* Kleine letters en links in de container; onderin een volle balk met
   het logo in horizontale vorm. */

.wc-footer { background: var(--wc-paper); padding-top: clamp(2rem, 4vw, 3.5rem); }

.wc-footer__top {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
  .wc-footer__top { grid-template-columns: 1fr auto; align-items: start; }
  .wc-footer__meta { text-align: right; }
}
.wc-footer__print,
.wc-footer__meta { font-size: var(--wc-text-tiny); color: var(--wc-muted); }
.wc-footer__print p { margin: 0 0 0.2rem; }
.wc-footer__links { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
@media (min-width: 768px) { .wc-footer__links { justify-content: flex-end; } }

.wc-footer__social { list-style: none; display: flex; gap: 0.5rem; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); padding: 0; }
.wc-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  background: var(--wc-zwart); color: var(--wc-wit);
  font-size: var(--wc-text-small); font-weight: 700; text-decoration: none;
}
.wc-footer__social a:hover { background: var(--wc-accent); color: var(--wc-zwart); }

/* Balk onderin, over de volle breedte */
.wc-footer__bar { background: var(--wc-grijs-licht); }
.wc-footer__bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding-block: 1rem;
}
.wc-footer__logo { text-decoration: none; }
.wc-footer__slot { font-size: var(--wc-text-tiny); color: var(--wc-muted); }

/* Het logo in horizontale vorm */
.wc-logo-rij { display: inline-flex; height: 40px; font-weight: 800; font-size: 1.125rem; line-height: 1; }
.wc-logo-rij__blok {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; color: var(--wc-wit);
}
.wc-logo-rij__blok--west { width: 106px; background: var(--wc-rood); }
.wc-logo-rij__blok--amp { width: 40px; background: var(--wc-blauw); }
.wc-logo-rij__blok--co { width: 54px; background: var(--wc-groen-logo); }

/* ---------------------------------------------------------- animaties */

/* Progressieve verbetering: pas verbergen als JS draait (html.js),
   zodat de inhoud zonder JS gewoon zichtbaar blijft. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--wc-ease), transform 0.7s var(--wc-ease);
  }
  .js [data-animate].is-visible { opacity: 1; transform: none; }
  [data-animate-delay="1"] { transition-delay: 0.08s; }
  [data-animate-delay="2"] { transition-delay: 0.16s; }
  [data-animate-delay="3"] { transition-delay: 0.24s; }
}

/* ------------------------------------------------- toegankelijkheid */

.wc-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--wc-zwart);
  color: var(--wc-wit);
}
.wc-skip:focus { left: 0; }

.wc-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Wide content mag nooit de pagina laten schuiven */
.wc-scroll-x { overflow-x: auto; }

/* ==========================================================================
   Componenten die door de templates worden gebruikt
   ========================================================================== */

/* Redactionele tekst uit de WYSIWYG */
.wc-prose > *:last-child { margin-bottom: 0; }
.wc-prose h2, .wc-prose h3 { margin-top: 1.5em; }
.wc-prose a { font-weight: 600; }
.wc-prose ul, .wc-prose ol { padding-left: 1.25rem; }
.wc-prose li + li { margin-top: 0.35rem; }
.wc-prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--wc-accent);
  font-size: 1.2em;
  font-weight: 600;
}
.wc-prose img { margin-block: 1.5rem; }
.wc-prose table { width: 100%; border-collapse: collapse; }
.wc-prose th, .wc-prose td { padding: 0.6rem; border-bottom: 1px solid var(--wc-line); text-align: left; }

.wc-title { margin-bottom: 1.5rem; }
.wc-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.wc-btn-wrap { margin-block: 1.5rem; }

.wc-split--single { grid-template-columns: 1fr; }
.wc-split--single .wc-stack { max-width: 46rem; }

/* Beeld en video in de contentstroom */
.wc-figure { margin: 2rem 0; }
.wc-figure img { width: 100%; }
.wc-video { margin: 2rem 0; }
.wc-video video { width: 100%; background: var(--wc-zwart); }
.wc-video__embed { position: relative; padding-top: 56.25%; }
.wc-video__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wc-embed { margin: 2rem 0; }

.wc-space { height: clamp(2rem, 5vw, 4rem); }
.wc-space--auto { height: clamp(1rem, 3vw, 2rem); }

/* USP's */
.wc-usp__icon { width: 48px; height: 48px; margin-bottom: 0.75rem; }
.wc-usp h3 { font-size: var(--wc-h4); }

/* Stappen */
.wc-steps__list { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: none; }
.wc-step { border-top: 4px solid var(--wc-accent); padding-top: 1rem; }
.wc-step__nbr { display: block; font-size: 2.5rem; line-height: 1; color: var(--wc-accent); }
.wc-step h3 { font-size: var(--wc-h4); margin-top: 0.25rem; }

/* Kaartvarianten */
.wc-card--cta,
.wc-card--list { padding: 1.5rem; background: var(--wc-grijs-licht); }
.wc-card--cta { transition: background-color 0.2s var(--wc-ease), transform 0.2s var(--wc-ease); }
.wc-card--cta:hover { background: var(--wc-accent-licht); transform: translateY(-3px); }
.wc-card__link { margin-top: auto; padding-top: 1rem; font-weight: 700; font-size: var(--wc-text-small); }
@media (prefers-reduced-motion: reduce) { .wc-card--cta:hover { transform: none; } }

/* Vacatures */
.wc-vacancies { margin-top: 2rem; }
.wc-vacancy__title { display: block; }
.wc-vacancy__meta { display: block; }
.wc-vacancy-aside { align-self: start; padding: 1.5rem; background: var(--wc-grijs-licht); }
.wc-deflist { margin: 0 0 1.5rem; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; }
.wc-deflist dt { font-weight: 700; }
.wc-deflist dd { margin: 0; }

/* Accordeon */
.wc-accordion { margin: 2rem 0; }
.wc-accordion__item { border-top: 1px solid var(--wc-line); }
.wc-accordion__item:last-of-type { border-bottom: 1px solid var(--wc-line); }
.wc-accordion__item summary {
  padding: 1rem 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.wc-accordion__item summary::-webkit-details-marker { display: none; }
.wc-accordion__item summary::after { content: "+"; font-size: 1.4em; line-height: 1; color: var(--wc-accent); }
.wc-accordion__item[open] summary::after { content: "–"; }
.wc-accordion__item > .wc-prose { padding-bottom: 1rem; }

/* Formulieren */
.wc-form input[type="text"],
.wc-form input[type="email"],
.wc-form input[type="tel"],
.wc-form input[type="search"],
.wc-form textarea,
.wc-form select {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 2px solid var(--wc-line);
  border-radius: var(--wc-radius);
  font: inherit;
  background: var(--wc-paper);
  color: var(--wc-ink);
}
.wc-form textarea { min-height: 9rem; resize: vertical; }
.wc-form input:focus, .wc-form textarea:focus, .wc-form select:focus { border-color: var(--wc-accent); }
.wc-form label { display: block; margin-bottom: 0.3rem; font-weight: 600; font-size: var(--wc-text-small); }
.wc-form > * + * { margin-top: 1rem; }

/* Zoeken */
.wc-searchbar { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 2rem; }
.wc-searchbar input {
  flex: 1 1 18rem;
  padding: 0.85rem 1.15rem;
  border: 2px solid var(--wc-zwart);
  border-radius: var(--wc-radius-pill);
  font: inherit;
}

/* Paginering */
.wc-pagination { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2.5rem; }
.wc-pagination__status { color: var(--wc-muted); font-size: var(--wc-text-small); }

/* Slider en kaart (voorlopig eenvoudig) */
.wc-slider { display: flex; gap: var(--wc-gutter); scroll-snap-type: x mandatory; }
.wc-slider > * { flex: 0 0 min(85%, 22rem); scroll-snap-align: start; }
.wc-map__list { list-style: none; margin: 0; padding: 0; }
.wc-map__list li { padding: 0.6rem 0; border-bottom: 1px solid var(--wc-line); }

/* Tekstheader zonder beeld */
.wc-header__title--plain { margin-top: clamp(2.5rem, 7vw, 5rem); }


/* Kop die over beeld valt: alle woorden in een vlak, met wat lucht
   tussen de regels zodat de blokken niet aan elkaar plakken. */
/* Koppen mét gekleurde vlakken krijgen de ruimere regelafstand die de
   vlakken nodig hebben; koppen zonder vlakken houden de styleguide. */
.wc-reveal:has(.wc-hl) { line-height: 1.395; }
.wc-title--solid { line-height: 1.395; }
.wc-header__title { margin-top: -3rem; }
@media (max-width: 720px) { .wc-header__title { margin-top: -1.5rem; } }


/* Ritme op de homepage: om en om een grijze band, zodat de blokken
   van elkaar te onderscheiden zijn zonder extra witruimte. */
.is-home .wc-cta-section:nth-of-type(even) { background: var(--wc-grijs-licht); }
.is-home .wc-usp-section { background: var(--wc-grijs-licht); }


/* Cijferblokken krijgen wat lucht onder de kop */
.wc-stats { margin-top: 2rem; }
.wc-stat__label { margin-top: 0.25rem; }


/* Op smalle schermen zit de locatie-knop in het uitklapmenu, zodat het
   logo en de menuknop de balk niet hoeven te delen. */
@media (max-width: 999px) {
  .wc-nav__actions .wc-btn { display: none; }
}
.wc-nav__panel .wc-btn { margin-top: 1.25rem; }

/* ==========================================================================
   Plate-grid. Plate zet breedtes als data-attributen op de kolom
   (data-plate-col-xs/sm/md/lg). Breakpoints: xs <768, sm <992, md <1200,
   lg ≥1200. Gutters volgen de styleguide (16 / 24 / 32).
   ========================================================================== */

.plate--container,
.plate--container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wc-margin);
}
.plate--container { max-width: calc(var(--wc-container) + 2 * var(--wc-margin)); }

.plate--row {
  display: flex;
  flex-wrap: wrap;
  margin-inline: calc(-0.5 * var(--wc-gutter));
}

.plate--column {
  flex: 0 0 100%;
  max-width: 100%;
  min-width: 0;
  padding-inline: calc(0.5 * var(--wc-gutter));
}

@media (min-width: 0px) {
  .plate--column[data-plate-col-xs="1"] { flex-basis: 8.3333%; max-width: 8.3333%; }
  .plate--column[data-plate-col-xs="2"] { flex-basis: 16.6667%; max-width: 16.6667%; }
  .plate--column[data-plate-col-xs="3"] { flex-basis: 25.0%; max-width: 25.0%; }
  .plate--column[data-plate-col-xs="4"] { flex-basis: 33.3333%; max-width: 33.3333%; }
  .plate--column[data-plate-col-xs="5"] { flex-basis: 41.6667%; max-width: 41.6667%; }
  .plate--column[data-plate-col-xs="6"] { flex-basis: 50.0%; max-width: 50.0%; }
  .plate--column[data-plate-col-xs="7"] { flex-basis: 58.3333%; max-width: 58.3333%; }
  .plate--column[data-plate-col-xs="8"] { flex-basis: 66.6667%; max-width: 66.6667%; }
  .plate--column[data-plate-col-xs="9"] { flex-basis: 75.0%; max-width: 75.0%; }
  .plate--column[data-plate-col-xs="10"] { flex-basis: 83.3333%; max-width: 83.3333%; }
  .plate--column[data-plate-col-xs="11"] { flex-basis: 91.6667%; max-width: 91.6667%; }
  .plate--column[data-plate-col-xs="12"] { flex-basis: 100.0%; max-width: 100.0%; }
}

@media (min-width: 768px) {
  .plate--column[data-plate-col-sm="1"] { flex-basis: 8.3333%; max-width: 8.3333%; }
  .plate--column[data-plate-col-sm="2"] { flex-basis: 16.6667%; max-width: 16.6667%; }
  .plate--column[data-plate-col-sm="3"] { flex-basis: 25.0%; max-width: 25.0%; }
  .plate--column[data-plate-col-sm="4"] { flex-basis: 33.3333%; max-width: 33.3333%; }
  .plate--column[data-plate-col-sm="5"] { flex-basis: 41.6667%; max-width: 41.6667%; }
  .plate--column[data-plate-col-sm="6"] { flex-basis: 50.0%; max-width: 50.0%; }
  .plate--column[data-plate-col-sm="7"] { flex-basis: 58.3333%; max-width: 58.3333%; }
  .plate--column[data-plate-col-sm="8"] { flex-basis: 66.6667%; max-width: 66.6667%; }
  .plate--column[data-plate-col-sm="9"] { flex-basis: 75.0%; max-width: 75.0%; }
  .plate--column[data-plate-col-sm="10"] { flex-basis: 83.3333%; max-width: 83.3333%; }
  .plate--column[data-plate-col-sm="11"] { flex-basis: 91.6667%; max-width: 91.6667%; }
  .plate--column[data-plate-col-sm="12"] { flex-basis: 100.0%; max-width: 100.0%; }
}

@media (min-width: 992px) {
  .plate--column[data-plate-col-md="1"] { flex-basis: 8.3333%; max-width: 8.3333%; }
  .plate--column[data-plate-col-md="2"] { flex-basis: 16.6667%; max-width: 16.6667%; }
  .plate--column[data-plate-col-md="3"] { flex-basis: 25.0%; max-width: 25.0%; }
  .plate--column[data-plate-col-md="4"] { flex-basis: 33.3333%; max-width: 33.3333%; }
  .plate--column[data-plate-col-md="5"] { flex-basis: 41.6667%; max-width: 41.6667%; }
  .plate--column[data-plate-col-md="6"] { flex-basis: 50.0%; max-width: 50.0%; }
  .plate--column[data-plate-col-md="7"] { flex-basis: 58.3333%; max-width: 58.3333%; }
  .plate--column[data-plate-col-md="8"] { flex-basis: 66.6667%; max-width: 66.6667%; }
  .plate--column[data-plate-col-md="9"] { flex-basis: 75.0%; max-width: 75.0%; }
  .plate--column[data-plate-col-md="10"] { flex-basis: 83.3333%; max-width: 83.3333%; }
  .plate--column[data-plate-col-md="11"] { flex-basis: 91.6667%; max-width: 91.6667%; }
  .plate--column[data-plate-col-md="12"] { flex-basis: 100.0%; max-width: 100.0%; }
}

@media (min-width: 1200px) {
  .plate--column[data-plate-col-lg="1"] { flex-basis: 8.3333%; max-width: 8.3333%; }
  .plate--column[data-plate-col-lg="2"] { flex-basis: 16.6667%; max-width: 16.6667%; }
  .plate--column[data-plate-col-lg="3"] { flex-basis: 25.0%; max-width: 25.0%; }
  .plate--column[data-plate-col-lg="4"] { flex-basis: 33.3333%; max-width: 33.3333%; }
  .plate--column[data-plate-col-lg="5"] { flex-basis: 41.6667%; max-width: 41.6667%; }
  .plate--column[data-plate-col-lg="6"] { flex-basis: 50.0%; max-width: 50.0%; }
  .plate--column[data-plate-col-lg="7"] { flex-basis: 58.3333%; max-width: 58.3333%; }
  .plate--column[data-plate-col-lg="8"] { flex-basis: 66.6667%; max-width: 66.6667%; }
  .plate--column[data-plate-col-lg="9"] { flex-basis: 75.0%; max-width: 75.0%; }
  .plate--column[data-plate-col-lg="10"] { flex-basis: 83.3333%; max-width: 83.3333%; }
  .plate--column[data-plate-col-lg="11"] { flex-basis: 91.6667%; max-width: 91.6667%; }
  .plate--column[data-plate-col-lg="12"] { flex-basis: 100.0%; max-width: 100.0%; }
}

/* --------------------------------------------------------------------------
   Vaste indelingen voor de ontworpen banden. De kolombreedtes uit de editor
   zijn hier niet leidend: het ontwerp bepaalt de verhouding, de redactie
   bepaalt de inhoud van de elementen.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  /* Verhalen: grote kaart naast kleine kaart */
  .wc-sec--verhalen .plate--row:nth-of-type(2) > .plate--column:first-child { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .wc-sec--verhalen .plate--row:nth-of-type(2) > .plate--column:last-child { flex: 0 0 41.6667%; max-width: 41.6667%; }

  /* Werken bij en De cijfers: tekst links, lijst of blokken rechts */
  .wc-sec--werken-bij-lijst .plate--row > .plate--column:first-child,
  .wc-sec--cijfers .plate--row > .plate--column:first-child { flex: 0 0 41.6667%; max-width: 41.6667%; }
  .wc-sec--werken-bij-lijst .plate--row > .plate--column:last-child,
  .wc-sec--cijfers .plate--row > .plate--column:last-child { flex: 0 0 58.3333%; max-width: 58.3333%; }
}

/* De cijferblokken: breed, dan twee naast elkaar, dan weer breed */
.wc-sec--cijfers .plate--row > .plate--column:last-child {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  align-content: start;
}
.wc-sec--cijfers .plate--column:last-child > *:nth-child(1),
.wc-sec--cijfers .plate--column:last-child > *:nth-child(4) { grid-column: span 2; }

/* ==========================================================================
   Homepage-onderdelen volgens het Figma-ontwerp
   ========================================================================== */

/* Kleurhulpjes voor de vlakken achter beeld en cijfers */
.wc-vlak--geel { background: var(--wc-geel); }
.wc-vlak--groen { background: var(--wc-groen); }
.wc-vlak--roze { background: var(--wc-roze-licht); }
.wc-vlak--cyaan { background: var(--wc-cyaan-medium); }
.wc-vlak--oranje { background: var(--wc-oranje); }

/* ------------------------------------------------------- pluspuntenlijst */
.wc-plus-lijst,
ul.wc-plus-lijst { list-style: none; margin: 1.5rem 0; padding: 0; }
.wc-plus {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.35rem 0;
  font-size: var(--wc-text);
}
.wc-plus__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  margin-top: 0.15em;
  border-radius: 50%;
  background: var(--wc-zwart);
  color: var(--wc-wit);
}

/* ------------------------------------------------------------ locatieband */
/* Links een vast tekstblok met het gekleurde label erboven, rechts een
   horizontaal schuivende carrousel met locatiekaarten. */

.wc-band { position: relative; padding-block: 0 clamp(2.5rem, 5vw, 4.5rem); }
/* De kaarten beginnen boven aan de sectie, zodat het eerste vak van de
   carrousel meteen een locatie laat zien in plaats van een leeg vlak. */
.wc-band .wc-loc { padding-top: 0; }

/* De strook ligt óver de kaarten heen: zo loopt de kleur van elke kaart
   door tot de bovenrand van de sectie, precies zoals in het ontwerp. */
.wc-band__strip {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  height: var(--wc-band-strip-h);
  padding-left: var(--wc-inset);
  pointer-events: none;
}
.wc-band__strip > * { pointer-events: auto; }
.wc-band__label {
  display: inline-flex;
  align-items: center;
  /* Precies tot waar de eerste kaart begint: de tekstkolom is een derde
     van de container, min de halve gutter die de rij naar links schuift. */
  flex: 0 0 calc(var(--wc-container) / 3 - var(--wc-gutter) / 2);
  /* In het ontwerp springt de labeltekst iets in ten opzichte van het
     gekleurde vlak; de kop eronder staat wél tegen de containerrand. */
  padding-inline: 1.25rem 2.5rem;
  background: var(--wc-accent);
  color: var(--wc-wit);
  font-size: var(--wc-h3);
  font-weight: 700;
  line-height: 1;
}
.theme--kinderopvang .wc-band__label { background: var(--wc-rood-zacht); }
.theme--basisonderwijs .wc-band__label { background: var(--wc-cyaan-diep); }
.theme--welzijn .wc-band__label { background: var(--wc-oranje); }

/* Pijlen rechtsboven, over de lichte band heen */
.wc-band__knoppen {
  position: absolute;
  right: var(--wc-inset);
  top: 0;
  display: flex;
  height: 100%;
}
.wc-band__pijl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 5vw, 72px);
  border: 0;
  background: transparent;
  color: var(--wc-zwart);
  cursor: pointer;
  transition: background-color 0.2s var(--wc-ease), color 0.2s var(--wc-ease);
}
.wc-band__pijl--volgende { background: var(--wc-zwart); color: var(--wc-wit); }
.wc-band__pijl:hover { background: var(--wc-zwart); color: var(--wc-wit); }
.wc-band__pijl[disabled] { opacity: 0.3; cursor: default; }
.wc-band__pijl[disabled]:hover { background: transparent; color: var(--wc-zwart); }
.wc-band__pijl--volgende[disabled]:hover { background: var(--wc-zwart); color: var(--wc-wit); }

/* De carrousel zelf: de eerste kolom blijft staan, de kaarten schuiven. */
.wc-band__inner { position: relative; }
.wc-band__inner .plate--container {
  /* Links uitlijnen met de rest van de pagina; rechts mag de carrousel
     doorlopen tot de vensterrand. */
  max-width: none;
  padding-left: var(--wc-inset);
  padding-right: 0;
}
/* Plate geeft elke rij een negatieve marge van een halve gutter om de
   kolompadding te compenseren. Rechts loopt de baan hier tot de rand,
   dus zou die marge het venster 16px breed schuiven. */
.wc-band__inner .plate--row { margin-right: 0; }

/* De baan schuift op elke schermbreedte; alleen de verhouding met de
   tekstkolom verandert. */
.wc-band__inner .plate--column:nth-child(2) {
  display: flex;
  /* Plate zet kolommen standaard op flex-direction: column; voor de
     carrousel moeten de kaarten juist naast elkaar staan. */
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding-inline: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wc-band__inner .plate--column:nth-child(2)::-webkit-scrollbar { display: none; }
.wc-band__inner .plate--column:nth-child(2) > * {
  flex: 0 0 clamp(15rem, 27vw, 26rem);
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .wc-band__inner .plate--row { flex-wrap: nowrap; }
  /* tekstkolom */
  .wc-band__inner .plate--column:first-child {
    flex: 0 0 calc(var(--wc-container) / 3);
    max-width: calc(var(--wc-container) / 3);
    padding-top: calc(var(--wc-band-strip-h) + clamp(1.5rem, 3vw, 2.75rem));
  }
  .wc-band__inner .plate--column:nth-child(2) {
    flex: 1 1 auto;
    max-width: none;
  }
}
@media (max-width: 767px) {
  /* Op smalle schermen sluit het label om zijn tekst; de vaste breedte
     van de tekstkolom past daar niet naast de rand. */
  .wc-band__label { flex: 0 1 auto; padding-right: 1.5rem; }
  .wc-band__inner .plate--column:first-child { padding-block: calc(var(--wc-band-strip-h) + 1.5rem) 1.5rem; }
  /* op smalle schermen mag de baan tot de rand doorlopen */
  .wc-band__inner .plate--column:nth-child(2) {
    margin-inline: calc(-1 * var(--wc-margin));
    padding-inline: var(--wc-margin);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wc-band__inner .plate--column:nth-child(2) { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ locatiekaart */
/* Foto met daaronder een gekleurd vlak; de kleuren wisselen af tenzij de
   redactie er een kiest. */
.wc-loc {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--wc-grijs-licht);
}
.wc-loc__foto { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--wc-grijs); }
.wc-loc__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--wc-ease); }
.wc-loc:hover .wc-loc__foto img { transform: scale(1.04); }
.wc-loc__body {
  display: block;
  flex: 1 1 auto;
  padding: 1rem clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem);
  text-align: center;
}
.wc-loc__adres { display: block; font-size: var(--wc-text-small); margin-bottom: 0.15rem; }
.wc-loc__naam { display: block; font-size: var(--wc-h4); font-weight: 700; line-height: var(--wc-lh-h4); }
@media (prefers-reduced-motion: reduce) { .wc-loc:hover .wc-loc__foto img { transform: none; } }

/* Afwisselende kleuren in de volgorde van de carrousel */
.wc-band__inner .plate--column:nth-child(2) > *:nth-child(5n+1) .wc-loc { background: var(--wc-roze-licht); }
.wc-band__inner .plate--column:nth-child(2) > *:nth-child(5n+2) .wc-loc { background: var(--wc-grijs-licht); }
.wc-band__inner .plate--column:nth-child(2) > *:nth-child(5n+3) .wc-loc { background: var(--wc-geel); }
.wc-band__inner .plate--column:nth-child(2) > *:nth-child(5n+4) .wc-loc { background: var(--wc-cyaan-licht); }
.wc-band__inner .plate--column:nth-child(2) > *:nth-child(5n+5) .wc-loc { background: var(--wc-groen-licht); }

/* Lege restkolommen van de oude indeling nemen geen ruimte in */
.wc-band__inner .plate--column:nth-child(n+3):not(:has(.wc-loc)) { display: none; }

/* Een eigen keuze uit het CMS gaat voor */
.wc-loc--geel { background: var(--wc-geel) !important; }
.wc-loc--groen { background: var(--wc-groen) !important; }
.wc-loc--groenlicht { background: var(--wc-groen-licht) !important; }
.wc-loc--roze { background: var(--wc-roze-licht) !important; }
.wc-loc--cyaan { background: var(--wc-cyaan-licht) !important; }
.wc-loc--oranje { background: var(--wc-oranje) !important; }
.wc-loc--grijs { background: var(--wc-grijs-licht) !important; }
.wc-loc--wit { background: var(--wc-wit) !important; }

/* -------------------------------------------------------------- beeldblok */
.wc-beeldblok__grid {
  display: grid;
  gap: var(--wc-gutter);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .wc-beeldblok__grid {
    grid-template-columns: calc((100% - 11 * var(--wc-gutter)) / 12 * 7 + 6 * var(--wc-gutter)) 1fr;
    column-gap: var(--wc-gutter);
  }
  .wc-beeldblok__grid--flip .wc-beeldblok__media { order: 2; }
}
/* De twee gekleurde vlakken vormen samen een rechte hoek: de staande
   balk links loopt van de bovenkant van de foto tot aan de liggende
   balk, en die loopt onderlangs door tot onder de staande balk. Zo
   sluiten de lijnen aan in de hoek, hetzelfde motief als het logo. */
.wc-beeldblok {
  --wc-vlak: clamp(2.25rem, 4.9vw, 4.625rem); /* Figma: 74px */
}
.wc-beeldblok__media {
  position: relative;
  margin: 0;
  padding: 0 0 var(--wc-vlak) var(--wc-vlak);
}
.wc-beeldblok__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.wc-beeldblok__vlak { position: absolute; }
.wc-beeldblok__vlak--links {
  left: 0;
  top: 0;
  bottom: var(--wc-vlak);
  width: var(--wc-vlak);
}
.wc-beeldblok__vlak--onder {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--wc-vlak);
}

/* -------------------------------------------------------------- verhalen */
.wc-verhaal { display: block; text-decoration: none; }
.wc-verhaal__foto { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--wc-grijs-licht); }
.wc-verhaal__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--wc-ease); }
.wc-verhaal:hover .wc-verhaal__foto img { transform: scale(1.04); }
.wc-verhaal__body { display: block; padding-top: 1rem; }
.wc-verhaal__meta { display: block; font-size: var(--wc-text-tiny); margin-bottom: 0.4rem; }
.wc-verhaal__titel { display: block; font-size: var(--wc-h4); font-weight: 700; line-height: var(--wc-lh-h4); margin-bottom: 0.4rem; }
.wc-verhaal__tekst { display: block; font-size: var(--wc-text-small); color: var(--wc-muted); }
@media (prefers-reduced-motion: reduce) { .wc-verhaal:hover .wc-verhaal__foto img { transform: none; } }

/* ------------------------------------------------------------- videoband */
/* De kop staat rechts uitgelijnd tegen de containerrand en zakt met zijn
   laatste regel over de video heen: in Figma begint de video precies onder
   de eerste blokrij. Die rij is 1,395em hoog (zie .wc-hl), dus haalt een
   negatieve ondermarge van diezelfde maat de video één regel omhoog,
   ongeacht hoeveel regels de kop telt. */
.wc-videoband { position: relative; padding-block: 0 var(--wc-ruimte-m); }
.wc-videoband__kop { position: relative; z-index: 2; }
.wc-videoband__titel {
  text-align: right;
  font-size: var(--wc-h1);
  line-height: 1.395;
  margin-bottom: -1.395em;
}
.wc-videoband__media { position: relative; }
.wc-videoband__media img,
.wc-videoband__media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.wc-videoband__overlay { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.wc-videoband__overlay .wc-container { pointer-events: auto; }
.wc-videokaart { max-width: 26rem; background: var(--wc-wit); padding: clamp(1.25rem, 2.5vw, 2rem); }
.wc-videokaart__titel { font-size: var(--wc-h4); margin-bottom: 0.6rem; }
.wc-videokaart__link { display: inline-block; margin-top: 0.75rem; font-size: var(--wc-text-small); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.wc-videoband__play {
  position: absolute; left: var(--wc-inset); bottom: 1.25rem;
  width: 56px; height: 56px; border: 0; cursor: pointer;
  background: var(--wc-wit); color: var(--wc-zwart);
  display: inline-flex; align-items: center; justify-content: center;
}
.wc-videoband__play:hover { background: var(--wc-geel); }
.wc-videoband__duur {
  position: absolute; right: var(--wc-inset); bottom: 1.5rem;
  color: var(--wc-wit); font-size: var(--wc-text-small);
  padding: 0.3em 0.7em;
  background: rgba(35, 31, 32, 0.65);
}
/* Op mobiel breekt de kop over meer regels en is er geen ruimte om over
   de video te vallen; dan staat hij er gewoon boven. */
@media (max-width: 767px) {
  .wc-videoband__titel { text-align: left; margin-bottom: 0; }
  .wc-videoband { padding-block: var(--wc-ruimte-s) var(--wc-ruimte-s); }
}

/* ------------------------------------------------------------- vacatures */
.wc-vac {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--wc-line);
  text-decoration: none;
}
.wc-vac:last-of-type { border-bottom: 1px solid var(--wc-line); }
.wc-vac__body { flex: 1 1 auto; min-width: 0; }
.wc-vac__org { display: block; font-size: var(--wc-text-tiny); color: var(--wc-muted); }
.wc-vac__titel { display: block; font-size: var(--wc-h5); font-weight: 700; }
.wc-vac__meta { flex: none; display: flex; align-items: center; gap: 0.6rem; }
.wc-vac__datum { font-size: var(--wc-text-tiny); color: var(--wc-muted); }
.wc-vac__pijl { flex: none; transition: transform 0.2s var(--wc-ease); }
.wc-vac:hover .wc-vac__pijl { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .wc-vac:hover .wc-vac__pijl { transform: none; } }

/* --------------------------------------------------------------- cijfers */
.wc-cijfer {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: clamp(120px, 12vw, 168px);
  padding: clamp(1rem, 1.8vw, 1.5rem);
  background: var(--wc-grijs-licht);
}
.wc-cijfer--geel { background: var(--wc-geel); }
.wc-cijfer--groen { background: var(--wc-groen); }
.wc-cijfer--roze { background: var(--wc-roze-licht); }
.wc-cijfer--cyaan { background: var(--wc-cyaan-medium); }
.wc-cijfer__getal { font-size: var(--wc-nbr); line-height: 0.95; }
.wc-cijfer__label { align-self: flex-end; font-size: var(--wc-text-small); font-weight: 600; }

/* -------------------------------------------------------------- linkrijen */
.wc-linkrij {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0;
  border-top: 1px solid var(--wc-line);
  font-size: var(--wc-h5);
  font-weight: 600;
  text-decoration: none;
}
.wc-linkrij:last-of-type { border-bottom: 1px solid var(--wc-line); }
.wc-linkrij__pijl { transition: transform 0.2s var(--wc-ease); }
.wc-linkrij:hover .wc-linkrij__pijl { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .wc-linkrij:hover .wc-linkrij__pijl { transform: none; } }

/* Plate zet zelf al een .plate--container om de rijen. Staat die binnen
   een eigen container, dan zou de marge dubbel tellen. */
.wc-container .plate--container,
.wc-videoband__overlay .plate--container { padding-inline: 0; max-width: none; }

/* ==========================================================================
   Kleuren die de redactie per sectie of element kiest
   ========================================================================== */
.wc-bg--geel { background: var(--wc-geel); }
.wc-bg--groen { background: var(--wc-groen); }
.wc-bg--groenlicht { background: var(--wc-groen-licht); }
.wc-bg--roze { background: var(--wc-roze-licht); }
.wc-bg--cyaan { background: var(--wc-cyaan-medium); }
.wc-bg--oranje { background: var(--wc-oranje); }
.wc-bg--rood { background: var(--wc-rood); color: var(--wc-wit); }
.wc-bg--blauw { background: var(--wc-blauw); color: var(--wc-wit); }
.wc-bg--zwart { background: var(--wc-zwart); color: var(--wc-wit); }
.wc-bg--grijs { background: var(--wc-grijs-licht); }
.wc-bg--wit { background: var(--wc-wit); }

/* Een gekozen bandkleur overschrijft de kleur van het onderdeel */
.wc-band--geel .wc-band__label { background: var(--wc-oranje); }
.wc-band--geel .wc-band__strip::after,
.wc-band--geel .wc-band--groen .wc-band__label { background: var(--wc-groen); }
.wc-band--groen .wc-band__strip::after,
.wc-band--groen .wc-band--roze .wc-band__label { background: var(--wc-rood-zacht); }
.wc-band--roze .wc-band__strip::after,
.wc-band--roze .wc-band--cyaan .wc-band__label { background: var(--wc-cyaan-diep); }
.wc-band--cyaan .wc-band__strip::after,
.wc-band--cyaan 
/* De gekleurde band achter de kaarten begint waar de kaarten beginnen,
   ook op brede schermen: de inzet van de container meegerekend. */
@media (max-width: 1440px) {
  }

/* Het bandlabel is een kop, maar mag niet de kopstijl van de sectie krijgen. */
h2.wc-band__label { margin: 0; letter-spacing: 0; text-wrap: nowrap; }