.kern { padding-top: clamp(64px, 6.6vw, 96px); --uit: 460ms cubic-bezier(.3, .7, .2, 1); }
.kern__kopblok { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--goot); align-items: start; }
.kern__kop { margin-top: -0.12em; font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; max-width: 10em; }
.kern__intro .intro { max-width: 34em; }

.pijler { position: relative; min-width: 0; min-height: 0; }
.pijler__kop { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); line-height: 1.2; letter-spacing: -0.02em; }
.pijler__knop { display: inline-block; text-align: left; letter-spacing: inherit; border-radius: 4px; }

.pijler__naam {
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 0.13em;
  text-underline-offset: 0.12em; text-decoration-skip-ink: none; transition: text-decoration-color 200ms ease;
}
.pijler.is-open .pijler__naam { text-decoration-color: var(--geel); }

.kern__doel {
  background: none; color: inherit;
  text-decoration-line: underline; text-decoration-color: var(--geel); text-decoration-thickness: 0.13em;
  text-underline-offset: 0.12em; text-decoration-skip-ink: none;
}
.pijler__tekst { margin-top: 10px; font-size: 1.0625rem; line-height: 1.5; color: var(--tekst); max-width: 30em; }

.pijler__tekst a {
  color: var(--inkt); font-weight: 700; text-decoration: none; padding-bottom: 1px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
    linear-gradient(var(--geel), var(--geel)) 0 92% / 0 0.4em no-repeat;
  transition: background-size 280ms cubic-bezier(.2, .7, .2, 1);
}
.pijler__tekst a:hover, .pijler__tekst a:focus-visible { background-size: 100% 1px, 100% 0.4em; }

.tegels__item { min-width: 0; min-height: 0; }
.tegel {
  position: relative; display: block; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: var(--r-groot); background: var(--vlak-2); color: var(--inkt); text-decoration: none;
}
.tegel__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%);
  transition: transform 700ms cubic-bezier(.2, .7, .2, 1);
}
.tegel:focus-visible { outline: 3px solid var(--inkt); outline-offset: 2px; }
.tegel__labels { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; }
.tegel__naam {
  padding: 8px 14px 9px; border-radius: 8px; background: var(--wit);
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem); line-height: 1.2; letter-spacing: -0.015em;
}
.tegel:hover .tegel__pijl, .tegel:focus-visible .tegel__pijl { transform: translateX(3px); }

@media (min-width: 1024px) {
  .kern__rijen {
    --ha: 560px;
    margin-top: clamp(56px, 5.6vw, 88px); height: var(--ha);
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--goot); row-gap: 10px;
    grid-template-rows: repeat(4, minmax(0, 1fr)); transition: grid-template-rows var(--uit);
  }
  .kern[data-pijler="begrip"] .kern__rijen { grid-template-rows: 2fr 1fr 1fr 1fr; }
  .kern[data-pijler="inspiratie"] .kern__rijen { grid-template-rows: 1fr 2fr 1fr 1fr; }
  .kern[data-pijler="praktijk"] .kern__rijen { grid-template-rows: 1fr 1fr 1.5fr 1.5fr; }
  .pijlers, .tegels { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; min-height: 0; }
  .pijlers { grid-column: 1; }
  .tegels { grid-column: 2; }

  .pijler { overflow: hidden; margin-left: -8px; padding: 14px 0 0 8px; }
  .pijler, .tegels__item { grid-column: 1; }
  .pijler[data-pijler="begrip"] { grid-row: 1; }
  .pijler[data-pijler="inspiratie"] { grid-row: 2; }
  .pijler[data-pijler="praktijk"] { grid-row: 3 / 5; }
  .tegels__item:nth-child(1) { grid-row: 1; }
  .tegels__item:nth-child(2) { grid-row: 2; }
  .tegels__item:nth-child(3) { grid-row: 3; }
  .tegels__item:nth-child(4) { grid-row: 4; }

  .pijlers::before, .pijlers::after {
    content: ""; grid-column: 1; align-self: start; height: 1px; margin: -5.5px calc(-1 * var(--goot)) 0 0; background: var(--lijn); pointer-events: none;
  }
  .pijlers::before { grid-row: 2; }
  .pijlers::after { grid-row: 3; }

  .js .pijler__tekst { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 140ms ease, transform 200ms ease, visibility 0s linear 140ms; }
  .js .pijler.is-open .pijler__tekst {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity 280ms ease 150ms, transform 380ms cubic-bezier(.2, .7, .2, 1) 150ms, visibility 0s;
  }
  .kern[data-pijler] .tegel__foto { transition-duration: 900ms; }
  .kern[data-pijler="begrip"] .tegels__item[data-pijler="begrip"] .tegel__foto,
  .kern[data-pijler="inspiratie"] .tegels__item[data-pijler="inspiratie"] .tegel__foto,
  .kern[data-pijler="praktijk"] .tegels__item[data-pijler="praktijk"] .tegel__foto { transform: scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .kern *, .maat * { transition-delay: 0s !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .kern__rijen { --ha: 640px; }
}

@media (max-width: 1023px) {
  .kern__kopblok { grid-template-columns: minmax(0, 1fr); }
  .kern__intro { margin-top: 22px; }
  .kern__rijen { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(7, auto); }
  .pijlers, .tegels { grid-column: 1; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; }
  .tegels { pointer-events: none; }
  .tegels__item { pointer-events: auto; }
  .pijler, .tegels__item { grid-column: 1; }
  .pijler { padding-top: 22px; border-top: 1px solid var(--lijn); }
  .pijler[data-pijler="begrip"] { grid-row: 1; }
  .pijler[data-pijler="inspiratie"] { grid-row: 3; }
  .pijler[data-pijler="praktijk"] { grid-row: 5; }
  .tegels__item { padding-top: 18px; }
  .tegels__item:nth-child(1) { grid-row: 2; padding-bottom: 32px; }
  .tegels__item:nth-child(2) { grid-row: 4; padding-bottom: 32px; }
  .tegels__item:nth-child(3) { grid-row: 6; }
  .tegels__item:nth-child(4) { grid-row: 7; padding-top: 10px; }
  .tegel { height: auto; aspect-ratio: 2 / 1; }
  .js .pijler:not(.is-open) .pijler__tekst { display: none; }
}
@media (max-width: 599px) {
  .tegel { aspect-ratio: 16 / 10; }
  .tegel__labels { left: 12px; right: 12px; bottom: 12px; }
  .tegel__naam { padding: 7px 12px 8px; font-size: 1.0625rem; }
}

.maat.sectie { padding-top: clamp(72px, 7vw, 112px); }
.maattegel {
  display: flex; flex-direction: column; min-height: clamp(240px, 20vw, 290px); padding: clamp(28px, 3.9vw, 56px);
  border-radius: var(--r-groot); background: var(--vlak); color: var(--inkt); text-decoration: none;
  transition: background-color var(--snel);
}

.maattegel__kop { font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.03em; max-width: 21em; text-wrap: wrap; }
.maattegel__link {
  align-self: flex-end; margin-top: auto; padding: 32px 2px 3px 0;
  display: inline-flex; align-items: center; gap: 12px; font-size: 1.125rem; font-weight: 700; color: var(--inkt);
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat,
    linear-gradient(var(--geel), var(--geel)) 0 100% / 0 0.62em no-repeat;
  transition: background-size 280ms cubic-bezier(.2, .7, .2, 1);
}
.maattegel__link svg { width: 18px; height: 18px; transition: transform 260ms cubic-bezier(.2, .7, .2, 1); }
.maattegel:hover { background: var(--vlak-2); }
.maattegel:hover .maattegel__link, .maattegel:focus-visible .maattegel__link { background-size: 100% 1.5px, 100% 0.62em; }
.maattegel:hover .maattegel__link svg { transform: translateX(4px); }
.maattegel:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; }
@media (max-width: 599px) {
  .maattegel__kop { font-size: clamp(1.75rem, 1.1rem + 3.2vw, 2.25rem); }
  .maattegel__link { align-self: flex-start; padding-top: 28px; }
}