/* ==========================================================================
   Werken bij Konijnendijk Mode — themastijl
   ========================================================================== */

@font-face { font-family: "REM"; font-weight: 200; font-style: normal; font-display: swap; src: url(../fonts/rem-200.woff2) format("woff2"); }
@font-face { font-family: "REM"; font-weight: 300; font-style: normal; font-display: swap; src: url(../fonts/rem-300.woff2) format("woff2"); }
@font-face { font-family: "REM"; font-weight: 300; font-style: italic; font-display: swap; src: url(../fonts/rem-300-italic.woff2) format("woff2"); }
@font-face { font-family: "REM"; font-weight: 600; font-style: normal; font-display: swap; src: url(../fonts/rem-600.woff2) format("woff2"); }

:root {
  /* Huisstijlkleuren */
  --wit: #FFFFFF;
  --linnen: #F8F4F1;
  --mos: #515B3A;
  --olijf: #85955F;
  --salie: #ABB78F;
  --steen: #D4D6CD;
  --zwart: #000000;

  /* Typografie */
  --font: "REM", system-ui, sans-serif;
  --fs-display: clamp(2.25rem, 1.35rem + 4.4vw, 4.75rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + .45vw, 1.4375rem);
  --fs-lead: clamp(1.25rem, 1.1rem + .75vw, 1.625rem);
  --fs-body: 1.0625rem;
  --fs-small: .9375rem;

  /* Maat */
  --gutter: 20px;
  --max: 1240px;
  --tekst: 62ch;
  --sectie: clamp(64px, 5vw + 40px, 128px);
}
@media (min-width: 768px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--linnen);
  color: var(--zwart);
  font-family: var(--font);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.65;
}
img { display: block; max-width: 100%; height: auto; }
strong, b { font-weight: 600; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--zwart); outline-offset: 3px; }
.op-donker :focus-visible { outline-color: var(--wit); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Typografie: één set stijlen voor de hele site ---------- */
h1, h2, h3 { font-weight: 600; margin: 0; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.015em; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.005em; }
p { margin: 0 0 1em; max-width: var(--tekst); }
.lead { font-size: var(--fs-lead); font-weight: 200; line-height: 1.45; max-width: 34ch; }
.klein { font-size: var(--fs-small); }
.kop-met-tekst > h2 { margin-bottom: .5em; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--breed { max-width: calc(1680px + 2 * var(--gutter)); }
.sectie { padding-block: var(--sectie); }
.sectie--steen { background: var(--steen); }
.sectie--mos { background: var(--mos); color: var(--wit); }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px;
  background: var(--olijf); color: var(--wit);
  font: 600 1.1875rem/1.2 var(--font); text-decoration: none;
  border: 0; cursor: pointer;
  transition: background-color .15s ease;
}
.knop:hover { background: var(--mos); }
.op-donker .knop:hover { background: var(--zwart); }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.tekstlink { font-weight: 600; }

/* ---------- Het kader (het herkenbare element, afgeleid van het logo) ---------- */
.kader { display: inline-flex; flex-direction: column; align-items: stretch; max-width: 100%; }
.kader__titel {
  background: var(--zwart); color: var(--wit);
  padding: .32em .5em .38em;
}
.kader__label {
  background: var(--wit); color: var(--zwart);
  font-size: var(--fs-small); font-weight: 300; letter-spacing: normal;
  padding: .55em 1.05em;
}
@media (prefers-reduced-motion: no-preference) {
  .kader--intro .kader__titel { animation: kader-in .8s cubic-bezier(.2, .75, .2, 1) both .1s; }
  .kader--intro .kader__label { animation: kader-in .6s cubic-bezier(.2, .75, .2, 1) both .55s; }
  @keyframes kader-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}

/* ---------- Header & menu ---------- */
.kop { background: var(--linnen); position: relative; z-index: 20; }
.kop__balk { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 88px; }
.kop__logo { display: block; width: 160px; }
.kop__logo img { width: 100%; }
.menu-knop {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px;
  background: none; border: 0; font: 600 1rem var(--font); color: var(--zwart); cursor: pointer;
}
.menu-knop__streep { width: 22px; height: 2px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: 0; }

/* Mobiel menu */
.nav.is-open {
  display: block; position: fixed; inset: 88px 0 0; background: var(--linnen);
  padding: 24px var(--gutter) 40px; overflow-y: auto;
}
.nav.is-open > ul > li { border-bottom: 1px solid var(--steen); }
.nav.is-open > ul > li > a { display: block; padding: 14px 0; font-size: 1.5rem; font-weight: 600; text-decoration: none; }
.nav.is-open .sub-menu { padding: 0 0 14px; }
.nav.is-open .sub-menu a { display: block; padding: 6px 0; text-decoration: none; }

@media (min-width: 1080px) {
  .kop__balk { min-height: 124px; }
  .kop__logo { width: 220px; }
  .menu-knop { display: none; }
  .nav { display: block; }
  .nav > ul { display: flex; gap: 30px; }
  .nav > ul > li { position: relative; }
  .nav > ul > li > a { display: block; padding: 10px 0; text-decoration: none; font-size: 1rem; }
  .nav > ul > li > a[aria-current], .nav > ul > .current-menu-ancestor > a, .nav > ul > .current-menu-parent > a, .nav > ul > .is-actief > a { font-weight: 600; box-shadow: inset 0 -2px 0 var(--zwart); }
  .nav .sub-menu {
    position: absolute; left: -18px; top: 100%; min-width: 220px; padding: 10px 0;
    background: var(--wit); visibility: hidden; opacity: 0; transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
  }
  .nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; }
  .nav .sub-menu a { display: block; padding: 8px 18px; text-decoration: none; }
  .nav .sub-menu a:hover { background: var(--linnen); }
}

/* ---------- Hero ---------- */
.hero { padding-bottom: var(--sectie); }
.hero__grid { display: grid; }
.hero__foto { margin-inline: calc(var(--gutter) * -1); }
.hero__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero__kader { margin-top: -2.2em; position: relative; font-size: var(--fs-display); }
.hero__kader .kader__label { font-size: var(--fs-small); }
.hero__tekst { padding-top: 28px; }
.hero__tekst .lead { margin-bottom: 28px; }

@media (min-width: 900px) {
  .hero { padding-top: 24px; }
  .hero__grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .hero__foto { grid-column: 5 / -1; grid-row: 1; margin: 0; }
  .hero__foto img { aspect-ratio: 3 / 2; max-height: 82vh; }
  .hero__inhoud { grid-column: 1 / 10; grid-row: 1; align-self: end; z-index: 1; padding-bottom: 8px; }
  .hero__kader { margin: 0 0 40px; }
  .hero__tekst { padding: 0; max-width: 34ch; }
}

/* ---------- Vacaturelijst ---------- */
.vac-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.vac-kop__aantal { font-size: var(--fs-small); margin: 0; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.filter button {
  min-height: 40px; padding: 0 16px;
  background: transparent; color: var(--zwart); border: 1px solid var(--zwart);
  font: 300 var(--fs-small) var(--font); cursor: pointer;
}
.filter button:hover { background: var(--wit); }
.filter button[aria-pressed="true"] { background: var(--zwart); color: var(--wit); font-weight: 600; }

.vac-lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--zwart); }
.vac { border-bottom: 1px solid var(--zwart); }
.vac[hidden] { display: none; }
.vac a {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 20px; gap: 16px; align-items: center;
  padding: 14px 0; text-decoration: none;
}
.vac img { width: 72px; height: 72px; object-fit: cover; }
.vac h3 { font-size: var(--fs-h3); }
.vac__meta { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 4px 0 0; font-size: var(--fs-small); }
.vac__pijl { width: 20px; height: 20px; }
.vac a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }
.vac a:hover { background: var(--wit); }

@media (min-width: 900px) {
  .vac a { grid-template-columns: 104px minmax(0, 1fr) 180px 230px 24px; gap: 28px; padding: 16px 16px 16px 0; }
  .vac img { width: 104px; height: 104px; }
  .vac__tekst, .vac__meta { display: contents; }
  .vac__meta span { font-size: var(--fs-body); }
  .vac-kolommen { display: grid; grid-template-columns: 104px minmax(0, 1fr) 180px 230px 24px; gap: 28px; padding: 0 16px 10px 0; font-size: var(--fs-small); }
  .vac-kolommen span:first-child { grid-column: 2; }
}
@media (max-width: 899px) { .vac-kolommen { display: none; } }

.leeg { padding: 28px 0; border-bottom: 1px solid var(--zwart); margin: 0; max-width: none; }

/* ---------- Quote ---------- */
.quote { display: grid; gap: 32px; }
.quote img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.quote blockquote { margin: 0; }
.quote__tekst { font-size: var(--fs-lead); font-weight: 200; line-height: 1.45; max-width: 30ch; }
.quote__tekst p { max-width: none; }
.quote__kop { font-size: var(--fs-h2); font-weight: 600; line-height: 1.1; letter-spacing: -.015em; margin: 0 0 .6em; max-width: 18ch; }
.quote footer { font-size: var(--fs-small); }
.quote footer strong { font-weight: 600; display: block; font-size: var(--fs-body); }
@media (min-width: 900px) {
  .quote { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
}

/* ---------- Over ons teaser ---------- */
.duo { display: grid; gap: 32px; }
.duo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.afd-lijst { list-style: none; margin: 28px 0 32px; padding: 0; columns: 2; column-gap: 24px; }
.afd-lijst li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--steen); }
.afd-lijst a { text-decoration: none; display: block; }
.afd-lijst a:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
}

/* ---------- Open sollicitatie band ---------- */
.band { display: grid; gap: 20px; }
.band p { max-width: 48ch; }
@media (min-width: 900px) { .band { grid-template-columns: 5fr 7fr; gap: 64px; align-items: baseline; } }
.band > div > p:last-of-type { margin-bottom: 24px; }

/* ---------- Footer ---------- */
.voet { padding-block: 64px 32px; border-top: 1px solid var(--zwart); font-size: var(--fs-small); }
.voet__grid { display: grid; gap: 36px; }
.voet h2 { font-size: var(--fs-body); margin-bottom: .6em; }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { padding: 3px 0; }
.voet a { text-decoration: none; }
.voet a:hover { text-decoration: underline; }
.voet address { font-style: normal; }
.voet__logo { width: 156px; }
.voet__onder { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--steen); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
@media (min-width: 900px) { .voet__grid { grid-template-columns: 4fr 3fr 3fr 2fr; } }

/* ==========================================================================
   Vacaturepagina
   ========================================================================== */
.kruimel { font-size: var(--fs-small); padding-block: 6px 18px; }
.kruimel ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.kruimel li + li::before { content: "/"; margin-right: 6px; }

.vhero__grid { display: grid; }
.vhero__foto { margin-inline: calc(var(--gutter) * -1); }
.vhero__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.vhero__kader { margin-top: -1.4em; position: relative; font-size: clamp(2rem, 1.3rem + 3.6vw, 4rem); }
@media (min-width: 900px) {
  .vhero__grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; }
  .vhero__foto { grid-column: 4 / -1; grid-row: 1; margin: 0; }
  .vhero__foto img { aspect-ratio: 16 / 8; }
  .vhero__kader { grid-column: 1 / 11; grid-row: 1; align-self: end; margin: 0 0 -1.2em; z-index: 1; justify-self: start; }
}

.vac-body { display: grid; gap: 40px; padding-block: 48px var(--sectie); }
@media (min-width: 900px) {
  .vac-body { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px 64px; padding-top: 128px; align-items: start; }
  .vac-intro { grid-column: 1; grid-row: 1; }
  .vac-zij { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .vac-tekst { grid-column: 1; grid-row: 2; }
}

.feiten { background: var(--wit); padding: 24px; }
@media (min-width: 900px) { .feiten { position: sticky; top: 24px; } }
.feiten dl { margin: 0 0 24px; display: grid; gap: 14px; }
.feiten dt { font-size: var(--fs-small); }
.feiten dd { margin: 0; font-weight: 600; }
.feiten .knop { width: 100%; }
.feiten__vraag { font-size: var(--fs-small); margin: 18px 0 0; }

.vac-tekst > section + section { margin-top: 56px; }
.vac-tekst h2 { font-size: var(--fs-h3); margin-bottom: .7em; }
.vac-intro { max-width: 40ch; margin: 0; }
.vac-tekst img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 24px; }

.lijst { list-style: none; margin: 0; padding: 0; max-width: var(--tekst); }
.lijst li { position: relative; padding: 0 0 .55em 22px; }
.lijst li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--olijf); }
.lijst--twee { max-width: none; }
@media (min-width: 640px) { .lijst--twee { columns: 2; column-gap: 32px; } .lijst--twee li { break-inside: avoid; } }

.stappen { list-style: none; margin: 0; padding: 0; counter-reset: stap; max-width: var(--tekst); }
.stappen li { counter-increment: stap; display: grid; grid-template-columns: 40px 1fr; padding: 14px 0; border-top: 1px solid var(--steen); }
.stappen li::before { content: counter(stap); font-weight: 600; }
.stappen strong { font-weight: 600; display: block; }

/* ---------- Formulier ---------- */
.form-intro { margin-bottom: 36px; }
.form-intro h2 { margin-bottom: .4em; }
.form { display: grid; gap: 20px; max-width: 760px; }
.form__rij { display: grid; gap: 20px; }
@media (min-width: 640px) { .form__rij { grid-template-columns: 1fr 1fr; } }
.veld label, .veld .label { display: block; font-weight: 600; font-size: var(--fs-small); margin-bottom: 6px; }
.veld .hint { font-weight: 300; }
.veld input[type="text"], .veld input[type="email"], .veld input[type="tel"], .veld textarea {
  width: 100%; min-height: 52px; padding: 12px 14px;
  background: var(--wit); color: var(--zwart); border: 2px solid var(--wit); border-radius: 0;
  font: 300 1rem/1.4 var(--font);
}
.veld textarea { min-height: 140px; resize: vertical; }
.veld input:focus, .veld textarea:focus { outline: none; border-color: var(--salie); }
.veld [aria-invalid="true"] { border-color: #F2B8A0; }
.veld .fout { display: block; margin-top: 6px; font-size: var(--fs-small); font-weight: 600; color: #FFD9C9; }
.bestand { position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 6px 6px 14px; border: 1px dashed rgba(255, 255, 255, .6); }
.bestand input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.bestand__naam { flex: 1; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bestand__knop { padding: 10px 14px; background: var(--wit); color: var(--mos); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }
.bestand:focus-within { outline: 2px solid var(--wit); outline-offset: 3px; }
.akkoord { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: var(--fs-small); align-items: start; }
.akkoord input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--salie); }
.bedankt { background: var(--wit); color: var(--zwart); padding: 28px; max-width: 760px; }
.bedankt h3 { margin-bottom: .4em; }

/* Vaste sollicitatieknop op mobiel */
.plakknop {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--linnen); border-top: 1px solid var(--zwart);
  transform: translateY(110%); transition: transform .25s cubic-bezier(.2, .75, .2, 1);
}
.plakknop.is-zichtbaar { transform: none; }
.plakknop .knop { width: 100%; }
@media (min-width: 900px) { .plakknop { display: none; } }
@media (prefers-reduced-motion: reduce) { .plakknop, .knop, .nav .sub-menu { transition: none; } html { scroll-behavior: auto; } }
.sectie--direct { padding-top: 0; }
.voet address { margin-top: 20px; }

/* ==========================================================================
   Overige pagina's
   ========================================================================== */

/* Paginakop zonder foto (o.a. Solliciteren, Contact) */
.pkop { padding-block: 24px 0; }
.pkop .kader { font-size: clamp(2rem, 1.3rem + 3.6vw, 4rem); }
.pkop__intro { padding-block: 40px 0; }

/* Intro onder een paginakop */
.intro { padding-block: 48px 0; }
@media (min-width: 900px) { .intro { padding-top: 128px; } }
.intro .lead { max-width: 44ch; }
.intro p:not(.lead) { margin-top: 1.2em; }

.sectie-kop { margin-bottom: 36px; max-width: 46ch; }
.sectie-kop h2 { margin-bottom: .4em; }

/* Tijdlijn (echte volgorde in jaren) */
.tijdlijn { list-style: none; margin: 0; padding: 0; }
.tijdlijn > li { display: grid; gap: 16px; padding: 32px 0; border-top: 1px solid var(--zwart); }
.tijdlijn__jaar { font-size: var(--fs-h2); font-weight: 600; line-height: 1; letter-spacing: -.015em; }
.tijdlijn h3 { margin-bottom: .5em; }
.tijdlijn img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) {
  .tijdlijn > li { grid-template-columns: 2fr 6fr 4fr; gap: 40px; align-items: start; }
}

/* Kernwaarden */
.waarden { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px 32px; }
.waarden li { border-top: 2px solid var(--zwart); padding-top: 16px; }
.waarden h3 { margin-bottom: .35em; }
.waarden p { font-size: var(--fs-small); margin: 0; }
@media (min-width: 640px) { .waarden { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .waarden { grid-template-columns: repeat(5, 1fr); } }

/* Portretten van collega's */
.portretten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
.portretten img, .portretten .portret-leeg { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--steen); }
.portret-leeg { display: grid; place-items: center; font-size: var(--fs-h2); font-weight: 200; }
.portretten strong { display: block; font-weight: 600; margin-top: 10px; }
.portretten span { font-size: var(--fs-small); }
@media (min-width: 640px) { .portretten { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .portretten { grid-template-columns: repeat(6, 1fr); } }

/* Fotostrook (vervangt de slider): veegbaar op mobiel */
.strook { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(var(--gutter), calc((100vw - var(--max)) / 2)) 12px; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); margin: 0; list-style: none; scrollbar-width: thin; }
.strook li { flex: 0 0 78%; scroll-snap-align: start; }
.strook img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) { .strook li { flex-basis: calc((100% - 36px) / 3.4); } }

/* Galerij */
.galerij { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.galerij img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 900px) { .galerij { grid-template-columns: repeat(3, 1fr); gap: 16px; } .galerij li:first-child { grid-column: span 2; grid-row: span 2; } }

/* Vier tekstblokken */
.blokken { display: grid; gap: 40px 64px; }
.blokken > div { border-top: 1px solid var(--zwart); padding-top: 20px; }
.blokken h3 { margin-bottom: .6em; }
@media (min-width: 900px) { .blokken { grid-template-columns: 1fr 1fr; } }

/* Afdelingen- en verhalenoverzicht */
.raster { list-style: none; margin: 0; padding: 0; display: grid; gap: 48px 32px; }
@media (min-width: 640px) { .raster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .raster { grid-template-columns: repeat(3, 1fr); } }
.raster a { text-decoration: none; display: block; }
.raster img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 16px; }
.raster h3 { margin-bottom: .35em; }
.raster a:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.raster p { font-size: var(--fs-small); margin: 0; }
.raster .meta { margin-bottom: 6px; }
.raster li[hidden] { display: none; }
.meta { font-size: var(--fs-small); display: flex; flex-wrap: wrap; gap: 0 14px; }
.meta strong { font-weight: 600; }

.uitgelicht { display: grid; gap: 24px; text-decoration: none; margin-bottom: 64px; }
.uitgelicht img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.uitgelicht h2 { margin: 8px 0 .4em; }
.uitgelicht:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
@media (min-width: 900px) { .uitgelicht { grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; } }

/* Artikel (verhaal) */
.artikel { max-width: 720px; }
.artikel .meta { margin-bottom: 24px; }
.artikel .lead { margin-bottom: 1.4em; }
.artikel p { max-width: none; }
.artikel blockquote { margin: 40px 0; padding: 0; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.artikel figure { margin: 40px 0; }
.artikel figure img { width: 100%; }
.artikel figcaption { font-size: var(--fs-small); margin-top: 8px; }

/* Grote stappen (procedure) */
.stappen--groot li { grid-template-columns: 64px 1fr; padding: 24px 0; border-top-color: var(--zwart); }
.stappen--groot li::before { font-size: var(--fs-h2); line-height: 1; }
.stappen--groot strong { font-size: var(--fs-h3); margin-bottom: .3em; }
.stappen--groot { max-width: 760px; }

/* Veelgestelde vragen */
.vragen { max-width: 820px; border-bottom: 1px solid var(--zwart); }
.vragen details { border-top: 1px solid var(--zwart); }
.vragen summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: center; padding: 18px 0; font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.vragen summary::-webkit-details-marker { display: none; }
.vragen summary::after { content: ""; width: 16px; height: 16px; justify-self: end; background: linear-gradient(currentColor, currentColor) center / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 16px no-repeat; transition: transform .2s ease; }
.vragen details[open] summary::after { transform: rotate(45deg); }
.vragen details > div { padding: 0 40px 20px 0; }
.vragen details > div p:last-child { margin-bottom: 0; }

/* Contact */
.contact { display: grid; gap: 48px; }
@media (min-width: 900px) { .contact { grid-template-columns: 5fr 7fr; gap: 64px; } }
.contact h2 { font-size: var(--fs-h3); margin-bottom: .5em; }
.contact address { font-style: normal; margin-bottom: 32px; }
.tijden { border-collapse: collapse; width: 100%; max-width: 360px; margin-bottom: 32px; }
.tijden th, .tijden td { text-align: left; padding: 8px 0; border-bottom: 1px solid var(--steen); font-weight: 300; }
.tijden td { text-align: right; }
.tijden .vandaag th, .tijden .vandaag td { font-weight: 600; }
.form--licht .veld input[type="text"], .form--licht .veld input[type="email"], .form--licht .veld input[type="tel"], .form--licht .veld textarea { border-color: var(--steen); }
.form--licht .veld input:focus, .form--licht .veld textarea:focus { border-color: var(--zwart); }
.form--licht .veld .fout { color: #9B2C1F; }
.form--licht .veld [aria-invalid="true"] { border-color: #9B2C1F; }
.form--licht .akkoord input { accent-color: var(--mos); }
.form--licht .bedankt { background: var(--steen); }

.placeholder { outline: 1px dashed var(--olijf); outline-offset: 6px; }

.artikel__portret img { max-width: 420px; }
.intro--artikel { padding-bottom: var(--sectie); }
.na-lijst { margin-top: 32px; }

/* ==========================================================================
   WordPress
   ========================================================================== */
.skiplink { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--zwart); color: var(--wit); font-weight: 600; }
.skiplink:focus { top: 12px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Mobiel menu onder de WordPress-beheerbalk */
.admin-bar .nav.is-open { top: calc(88px + 46px); }
@media (min-width: 783px) { .admin-bar .nav.is-open { top: calc(88px + 32px); } }

/* Inhoud uit de editor: dezelfde typografie als de rest van de site */
.inhoud { padding-block: 48px var(--sectie); }
@media (min-width: 900px) { .vhero + .inhoud { padding-top: 128px; } }
.inhoud > * { max-width: var(--tekst); }
.inhoud > * + * { margin-top: 1em; }
.inhoud > :first-child { margin-top: 0; }
.inhoud > p { margin-bottom: 0; }
.inhoud > h2 { margin-top: 1.6em; margin-bottom: .1em; }
.inhoud > h3 { margin-top: 1.4em; }
.inhoud > h2 + *, .inhoud > h3 + * { margin-top: .5em; }
.inhoud > ul:not([class]), .inhoud > ol:not([class]), .inhoud > .wp-block-list { padding-left: 0; list-style: none; }
.inhoud > ul:not([class]) > li, .inhoud > ul.wp-block-list > li { position: relative; padding: 0 0 .45em 22px; }
.inhoud > ul:not([class]) > li::before, .inhoud > ul.wp-block-list > li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--olijf); }
.inhoud > ol.wp-block-list { counter-reset: nr; }
.inhoud > ol.wp-block-list > li { counter-increment: nr; position: relative; padding: 0 0 .45em 32px; }
.inhoud > ol.wp-block-list > li::before { content: counter(nr); position: absolute; left: 0; font-weight: 600; }
.inhoud > .is-style-lead, .inhoud > .lead { font-size: var(--fs-lead); font-weight: 200; line-height: 1.45; max-width: 40ch; }
.inhoud > blockquote, .inhoud > .wp-block-quote { margin: 2em 0; padding: 0; border: 0; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.inhoud > blockquote cite, .inhoud > .wp-block-quote cite { display: block; margin-top: .6em; font-size: var(--fs-small); font-weight: 300; font-style: normal; }
.inhoud > figure { margin: 2em 0; }
.inhoud > figure img { width: 100%; }
.inhoud > figure figcaption { font-size: var(--fs-small); margin-top: 8px; }
.inhoud > .alignwide, .inhoud > .alignfull { max-width: none; }
.inhoud > hr { border: 0; border-top: 1px solid var(--zwart); margin: 2.5em 0; max-width: none; }
.inhoud > table, .inhoud > figure > table { border-collapse: collapse; width: 100%; }
.inhoud > table :is(th, td), .inhoud > figure > table :is(th, td) { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--steen); font-weight: 300; }
.inhoud > table th, .inhoud > figure > table th { font-weight: 600; }

/* Knop-blok in de editor = huisstijlknop */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.wp-block-button__link, .wp-element-button {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border: 0; border-radius: 0;
  background: var(--olijf); color: var(--wit); font: 600 1.1875rem/1.2 var(--font); text-decoration: none;
  transition: background-color .15s ease;
}
.wp-block-button__link:hover { background: var(--mos); color: var(--wit); }
.wp-block-button.is-style-outline > .wp-block-button__link { border: 0; background: transparent; color: var(--zwart); box-shadow: inset 0 0 0 2px var(--zwart); }
.is-style-outline .wp-block-button__link:hover { background: var(--zwart); color: var(--wit); }

/* 404 */
.leeg-pagina { padding-block: 48px var(--sectie); }
.leeg-pagina .lead { margin-bottom: 28px; }

/* Homepage-kop: tekst en knoppen uit de editor */
.hero__tekst > * { margin: 0; }
.hero__tekst > * + * { margin-top: 28px; }
.hero__tekst .is-style-lead, .hero__tekst p:first-child { font-size: var(--fs-lead); font-weight: 200; line-height: 1.45; max-width: 34ch; }
.hero__tekst .wp-block-buttons { align-items: center; gap: 14px 28px; }
.hero__tekst .wp-block-button.is-style-outline > .wp-block-button__link { border: 0; background: none; box-shadow: none; padding: 0; min-height: 0; color: var(--zwart); text-decoration: underline; text-underline-offset: .2em; font-size: 1rem; }
.hero__tekst .is-style-outline .wp-block-button__link:hover { background: none; color: var(--zwart); text-decoration-thickness: 2px; }

/* Vacature: tekst uit de invulvelden */
.vac-tekst .tekst > * { margin: 0 0 1em; max-width: var(--tekst); }
.vac-tekst .tekst > :last-child { margin-bottom: 0; }
.vac-tekst .tekst ul { list-style: none; padding: 0; }
.vac-tekst .tekst ul li { position: relative; padding: 0 0 .55em 22px; }
.vac-tekst .tekst ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--olijf); }
.vac-tekst .tekst ol { padding-left: 1.2em; }
@media (min-width: 640px) { .tekst--twee ul { columns: 2; column-gap: 32px; max-width: none; } .tekst--twee li { break-inside: avoid; } .tekst--twee > ul { max-width: none; } }
.vac__geen-foto { width: 72px; height: 72px; background: var(--steen); }
@media (min-width: 900px) { .vac__geen-foto { width: 104px; height: 104px; } }
.afd-lijst li { padding: 6px 0; }
.beheer-melding { margin: 12px 0 0; padding: 10px 14px; background: var(--salie); font-size: var(--fs-small); max-width: none; }

/* Sollicitatieformulier */
.veld--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-melding { background: #FFE9DF; color: #6B1E10; padding: 14px 16px; font-weight: 600; max-width: 760px; }
.form-melding a { color: inherit; }
.knop[disabled] { opacity: .7; cursor: progress; }
.bedankt { margin-bottom: 0; }

/* Quote zonder foto: alleen de tekst, iets ingesprongen */
@media (min-width: 900px) { .quote:not(:has(img)) { grid-template-columns: 1fr; padding-left: calc(100% / 12); } }

/* Pagina's opgebouwd uit blokken: tekstblokken lijnen uit met de rest, bouwstenen zijn volle breedte */
.inhoud--pagina { padding-bottom: 0; }
.inhoud--pagina > :not(.kd-blok) { margin-left: max(var(--gutter), calc((100% - var(--max)) / 2)); margin-right: var(--gutter); }
.inhoud--pagina > :not(.kd-blok):last-child { margin-bottom: var(--sectie); }
.inhoud > .kd-blok { max-width: none; margin-top: 0; }
.inhoud > .kd-blok + :not(.kd-blok) { margin-top: 64px; }
.inhoud--pagina > .is-style-lead { max-width: 44ch; }
.duo--omgekeerd > :first-child { order: 2; }
@media (min-width: 900px) { .duo--omgekeerd { grid-template-columns: 5fr 7fr; } }
.kop-met-tekst .tekst > * { margin: 0 0 1em; }
.kop-met-tekst .tekst ul { list-style: none; padding: 0; }
.kop-met-tekst .tekst li { position: relative; padding: 0 0 .45em 22px; }
.kop-met-tekst .tekst li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--olijf); }
.kd-blok-leeg { padding: 24px; background: var(--wit); outline: 1px dashed var(--olijf); }
.vragen details > div > * { margin: 0 0 .8em; }

/* Verhalen */
.filter__link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--zwart); font-size: var(--fs-small); text-decoration: none; }
.filter__link:hover { background: var(--wit); }
.filter__link[aria-current] { background: var(--zwart); color: var(--wit); font-weight: 600; }
.inhoud--artikel { padding-top: 48px; }
@media (min-width: 900px) { .inhoud--artikel { padding-top: 128px; } }
.inhoud--artikel > * { max-width: none; }
.inhoud--artikel figure img { width: auto; max-width: 100%; }
.nav-links { display: flex; gap: 16px; margin-top: 48px; }

/* Kaarttitel in een raster zonder eigen sectiekop (correcte kopvolgorde, zelfde uiterlijk) */
.raster .raster__titel { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.005em; margin-bottom: .35em; }
.raster a:hover .raster__titel { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }

/* Fotostrook met pijltjes */
.strook:focus-visible { outline-offset: -2px; }
.strook--natuurlijk li { flex: 0 0 auto; }
.strook--natuurlijk img { height: clamp(240px, 28vw, 420px); width: auto; aspect-ratio: auto; max-width: min(88vw, 640px); object-fit: cover; }
.strook-knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.strook-knoppen[hidden] { display: none; }
.strook-knop { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; background: transparent; color: var(--zwart); border: 1px solid var(--zwart); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.strook-knop svg { width: 20px; height: 20px; }
.strook-knop--vorige svg { transform: rotate(180deg); }
.strook-knop:hover:not(:disabled) { background: var(--zwart); color: var(--wit); }
.strook-knop:disabled { opacity: .3; cursor: default; }

/* Losse tekst gevolgd door een gekleurd vlak (grijsgroen of groene balk): ruimte ertussen */
.inhoud--pagina > :not(.kd-blok) + :is(.kd-blok.sectie--steen, .kd-blok.sectie--mos, .kd-blok:has(> .sectie--steen), .kd-blok:has(> .sectie--mos)) { margin-top: var(--sectie); }