/* ==========================================================================
   Heght – huisstijl stylesheet
   Herbouw van heght.nl (Webflow) als schone, statische site.
   Kleuren en typografie 1:1 overgenomen van de live site.
   ========================================================================== */

:root {
  --cream: #f8e9d7;        /* basisachtergrond */
  --cream-light: #fbf1e3;  /* lichtere secties */
  --coral: #ff6e64;        /* accenten, koppen, knoppen */
  --teal: #005b6a;         /* donkere secties, logo */
  --teal-deep: #004652;    /* footer-onderbalk */
  --ink: #000000;          /* bodytekst */
  --white: #ffffff;

  --font-serif: "Baskervville", Georgia, serif;
  --font-sans: "Roboto Flex", Arial, sans-serif;

  --container: 1624px; /* 1534px content + marges, conform origineel */
  --pad: clamp(24px, 2.5vw, 45px);
}

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

html { scroll-behavior: smooth; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--coral);
  line-height: 1.1;
  margin: 0 0 24px;
}

h1 { font-size: clamp(56px, 8vw, 120px); line-height: 0.95; }
h2 { font-size: clamp(34px, 4vw, 48px); line-height: 1.2; }
h3 { font-size: clamp(28px, 3vw, 38px); }
h4 { font-size: 24px; }

p { margin: 0 0 20px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.container-wide { max-width: none; } /* header en onderste footerbalk lopen breder door */

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

/* ---------- Knoppen (schuine Heght-stijl) ---------- */
.button {
  display: inline-block;
  padding: 12px 32px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  color: var(--coral);
  border: 1px solid var(--coral);
  background: transparent;
  transform: skewX(-20deg);
  border-radius: 20px 0; /* vloeiende hoeken linksboven/rechtsonder, conform origineel */
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.button > span { display: inline-block; transform: skewX(20deg); }

.button:hover { background: var(--coral); color: var(--white); }

.button-solid { background: var(--coral); color: var(--white); }
.button-solid:hover { background: #e85c52; border-color: #e85c52; }

/* ---------- Header ---------- */
.site-header {
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-grid {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 176px;
}

.brand img { width: min(350px, 60vw); height: auto; }

.site-nav { margin-left: auto; }

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
}

.site-nav a {
  text-decoration: none;
  font-weight: 700;
  color: var(--teal);
  transition: color .2s ease;
}

.site-nav a:not(.button) { display: inline-block; padding: 8px 15px; }

.header-cta { margin-right: 15px; }

.site-nav a:hover, .site-nav a.is-active { color: var(--coral); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span:not(.sr-only) {
  display: block;
  width: 26px; height: 2px;
  margin: 6px 0;
  background: var(--teal);
  transition: transform .2s ease, opacity .2s ease;
}

/* ---------- Hero met paginatitel over afbeelding ---------- */
.page-hero { position: relative; }

/* Zoals origineel: de banner schuift 64px achter de header, zichtbaar blijft ±636px foto */
.page-hero.section-tight { padding-top: 0; margin-top: -64px; }

.page-hero .container { position: relative; }

.page-hero .hero-media {
  width: 100%;
  aspect-ratio: 1520 / 700;
  max-height: 700px;
  object-fit: cover;
}

.page-hero .hero-title {
  position: absolute;
  left: calc(var(--pad) + 80px);
  bottom: 80px;
  margin: 0;
  color: var(--cream);
  font-size: clamp(56px, 6.6vw, 120px);
  line-height: 0.9;
}

.page-hero .hero-media { position: relative; z-index: 1; }
.page-hero .hero-title { z-index: 2; }

/* Schildjes-vlak op ware grootte, verankerd aan de bannerfoto (geometrie 1:1 van origineel) */
.page-hero.has-decals .container::after {
  content: "";
  position: absolute;
  left: calc(var(--pad) + 1000px);
  top: 300px;
  width: 1315px;
  height: 721px;
  background: url("/assets/img/decals-creme.svg") no-repeat;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* ---------- Secties ---------- */
.section { padding: 96px 0; }
.section-tight { padding: 64px 0; }

/* 50/50 tekst + beeld binnen container */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.split .split-media img { width: 100%; object-fit: cover; }

.split.media-first .split-media { order: -1; }

/* Vierkante sfeerfoto's (480x480 in het origineel) */
.img-square {
  width: min(480px, 100%) !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.split:not(.media-first) .split-media .img-square { margin-left: auto; }

/* Tekstkolom: in het origineel staan de introsecties onder de banner in één
   linkerkolom van 768px, met de knop ónder de tekst in plaats van onder de kop */
.text-column { max-width: 768px; }
.text-column h2 { margin-bottom: 36px; }
.text-column .button { margin-top: 12px; }

/* 404: groot getal boven de titel, alles gecentreerd (conform origineel) */
.notfound { max-width: 900px; text-align: center; }
.notfound-code {
  font-family: var(--font-serif);
  font-size: clamp(72px, 8vw, 120px);
  line-height: 1;
  color: var(--teal);
  margin: 0 0 24px;
}
.notfound h1 { font-size: clamp(34px, 4vw, 48px); margin: 0 0 24px; }
.notfound p { margin-bottom: 24px; }

/* Herofoto homepage: hoger geplaatst en breder dan de kolom, loopt buiten beeld (zoals origineel) */
.home-hero { padding-top: 0; }
.home-hero .split-media img { width: 140%; max-width: none; height: 675px; }

/* Full-bleed variant (teal of coral vlak + foto rand-tot-rand) */
.bleed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.bleed .bleed-media img { width: 100%; height: 100%; object-fit: cover; }

.bleed.media-first .bleed-media { order: -1; }

/* Dienstenblokken (Advies & Structuur): halve vlakken van 680px hoog */
.bleed-service .bleed-media img { height: 680px; }
.bleed-service .bleed-body { padding-top: 64px; padding-bottom: 64px; }

.bleed .bleed-body {
  padding: 96px clamp(24px, 7vw, 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bg-teal { background: var(--teal); color: var(--white); }
.bg-teal p { color: var(--white); }
.bg-teal h2, .bg-teal h3 { color: var(--cream); }
.bg-teal .newsletter h4 { color: var(--coral); }
.bg-coral { background: var(--coral); color: var(--cream); }
.bg-coral h2, .bg-coral h3 { color: var(--cream); }
.bg-coral p { color: var(--white); }
.bg-cream-light { background: var(--cream-light); }

/* Decoratieve schildjes-band (los bandje tussen secties) */
.decal-band {
  height: 120px;
  background: url("/assets/img/bg-spacer.svg") repeat-x left center;
  background-size: auto 100%;
  mix-blend-mode: multiply; /* schildjes zijn crème-op-crème; multiply maakt ze zichtbaar */
}

/* Groot schildjes-vlak achter een herofoto (home) */
.has-decals-side { overflow: hidden; }
.has-decals-side .split > div:first-child { position: relative; z-index: 2; }
.has-decals-side .split-media { position: relative; }
.has-decals-side .split-media img { position: relative; z-index: 1; }
.has-decals-side .split-media::before {
  content: "";
  position: absolute;
  left: -340px; top: 76px;
  width: 1315px; height: 721px;
  background: url("/assets/img/decals-creme.svg") no-repeat;
  mix-blend-mode: multiply;
  z-index: 0;
}

/* ---------- Checklist (home, advies) ---------- */
.checklist {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.checklist li {
  position: relative;
  padding: 8px 0 8px 44px;
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--ink);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 24px; height: 24px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23ff6e64" stroke-width="2.4"><path d="M3 13.5 9 19 21 5"/></svg>') no-repeat center / contain;
}

/* ---------- Aandachtsgebieden (4 kaarten) ---------- */
.focus-section { text-align: center; }

.focus-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  margin: 64px 0 56px;
}

.focus-card img { width: 72px; height: 72px; margin: 0 auto 12px; }

.focus-card .rule {
  width: 52px; height: 2px;
  background: var(--teal);
  margin: 0 auto 28px;
}

.focus-card h4 {
  font-size: clamp(24px, 2vw, 30px);
  margin-bottom: 16px;
}

.focus-card p { max-width: 320px; margin: 0 auto; }

/* ---------- Proces (hoe wij werken) ---------- */
.step-num {
  font-family: var(--font-serif);
  font-size: 72px;
  line-height: 1;
  color: var(--coral);
  margin-bottom: 8px;
}

.bg-coral .step-num, .bg-coral .step h3 { color: var(--cream); }

.step h3 { color: var(--coral); margin-bottom: 20px; }

.steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}

/* ---------- Formulieren ---------- */
.form-panel {
  background: var(--teal);
  color: var(--white);
  padding: 56px clamp(24px, 4vw, 64px);
}

.form-panel h3 { color: var(--cream); }

.form-field { margin-bottom: 22px; }

.form-field label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 600;
  margin-bottom: 8px;
}

.form-field .optional { font-size: 12px; font-weight: 300; }

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  color: var(--white);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 2px;
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: rgba(255, 255, 255, .55); }

.form-field textarea { min-height: 150px; resize: vertical; }

.form-note { font-size: 15px; margin: 4px 0 24px; }

/* honeypot */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Nieuwsbriefformulier (teal secties) */
.newsletter { max-width: 480px; }

.newsletter .newsletter-row {
  display: flex;
  margin: 20px 0 12px;
}

.newsletter input[type="email"] {
  flex: 1;
  padding: 14px 16px;
  font: inherit;
  color: var(--white);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  border-right: 0;
}

.newsletter input[type="email"]::placeholder { color: rgba(255, 255, 255, .55); }

.newsletter button {
  padding: 0 22px;
  border: 0;
  background: var(--coral);
  color: var(--white);
  font-size: 18px;
  cursor: pointer;
}

.newsletter .disclaimer { font-size: 12px; line-height: 1.6; }
.newsletter .disclaimer a { color: var(--white); }

/* ---------- Contact ---------- */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}

.contact-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.contact-list svg { flex: 0 0 20px; margin-top: 5px; stroke: var(--coral); }

.contact-list a { color: var(--ink); }

/* ---------- Legal pagina's ---------- */
.legal { max-width: 900px; }
.legal h1 { font-size: clamp(44px, 5vw, 72px); margin: 64px 0 40px; }
.legal h5 {
  font-size: 22px;
  color: var(--coral);
  margin: 40px 0 12px;
}
.legal ul, .legal ol { margin: 0 0 20px; padding-left: 24px; }
.legal li { margin-bottom: 6px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--teal);
  color: var(--white);
  padding-top: 88px;
}

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.footer-top .brand img { width: 190px; }

.footer-nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.footer-nav a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
}

.footer-nav a:hover { color: var(--coral); }

.footer-top-right {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-social {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  background: var(--coral);
  color: var(--teal-deep);
  text-decoration: none;
  transition: background-color .15s ease;
}

.footer-social:hover,
.footer-social:focus-visible { background: var(--white); }

.footer-social-merk {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

.footer-contact {
  list-style: none;
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  margin: 64px 0 0;
  padding: 0;
}

.footer-contact li { display: flex; align-items: center; gap: 12px; }
.footer-contact svg { stroke: var(--coral); }
.footer-contact a { color: var(--white); }

.footer-payoff {
  margin-top: 72px;
  background: url("/assets/img/footer-payoff.svg") center top no-repeat;
  background-size: 100% auto;
  aspect-ratio: 1813 / 126;
}

/* De payoff-tekst "Generaties van waarde." zit al ín de patroonafbeelding */
.footer-payoff .payoff { display: none; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 14px 0;
  font-size: 12px;
}

.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-bottom p { margin: 0; }

.footer-bottom ul {
  list-style: none;
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.footer-bottom a { color: var(--white); text-decoration: none; font-weight: 600; }
.footer-bottom a:hover { text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .header-grid { min-height: 92px; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    padding: 16px var(--pad) 32px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 18px; }
  .nav-toggle { display: block; margin-left: auto; }
  .header-cta { display: none; }
  .site-nav .header-cta-mobile { display: inline-block; margin-top: 8px; }

  .split, .bleed, .steps-grid { grid-template-columns: 1fr; }
  .split { gap: 40px; }
  .split.media-first .split-media, .bleed.media-first .bleed-media { order: 0; }
  .home-hero { padding-top: 40px; }
  .home-hero .split-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .bleed-service .bleed-media img { height: auto; aspect-ratio: 4 / 3; }
  .focus-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 64px 0; }
  .page-hero.section-tight { margin-top: 0; }
  .page-hero .hero-title { left: calc(var(--pad) + 24px); bottom: 24px; }
}

@media (min-width: 992px) {
  .site-nav .header-cta-mobile { display: none; }
}

@media (max-width: 767px) {
  .focus-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-contact { flex-direction: column; gap: 18px; align-items: flex-start; }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .page-hero .hero-media { aspect-ratio: 4 / 3; }
}

@media (max-width: 479px) {
  h1 { font-size: 48px; }
  .page-hero .hero-title { font-size: 44px; }
}

/* ==========================================================================
   Nieuws – overzicht (kaarten) en detailpagina
   ========================================================================== */

.news-intro h1 { margin-bottom: 24px; }
.news-intro h1:focus { outline: none; }
.news-overview { padding-top: 0; }

/* ---------- Filterbalk: rubrieken ---------- */
.news-filter { margin-top: 48px; }

.news-filter-kop {
  margin: 0 0 16px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
}

.news-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Alle knoppen in dezelfde huisstijlkleur; alleen de actieve is gevuld.
   Het zijn navigatieknoppen — de kleur per rubriek zit op de kaart zelf. */
.news-filter-knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--teal);
  background: var(--white);
  border: 1px solid var(--teal);
  transition: background-color .15s ease, color .15s ease;
}

.news-filter-aantal {
  font-size: 12px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .07);
  color: inherit;
}

.news-filter-knop:hover,
.news-filter-knop:focus-visible {
  background: var(--teal);
  color: var(--cream);
}

.news-filter-knop:hover .news-filter-aantal,
.news-filter-knop:focus-visible .news-filter-aantal,
.news-filter-knop.is-active .news-filter-aantal {
  background: rgba(255, 255, 255, .22);
}

.news-filter-knop.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
  margin: 0 0 56px;
}

.news-card { display: flex; flex-direction: column; }

.news-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.news-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-bottom: 24px;
  overflow: hidden;
  background: var(--teal);
}

.news-card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Rubriek: gekleurd label linksonder op het beeld van de kaart */
.news-rubriek {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  padding: 7px 16px;
  background: var(--rubriek, var(--teal));
  color: var(--cream);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Zonder foto is het vlak zelf teal; een crème haarlijn houdt het label
   ook bij de teal rubriek (Bedrijfsopvolging) leesbaar los van de achtergrond. */
.news-card-media.is-leeg .news-rubriek {
  box-shadow: 0 0 0 1px rgba(248, 233, 215, .45);
}

/* Zonder afbeelding: teal vlak met het schildjespatroon van de huisstijl */
.news-card-media.is-leeg {
  background: var(--teal) url("/assets/img/decals-creme.svg") no-repeat -60px -40px;
  background-size: 150%;
  opacity: .92;
}

.news-meta {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal);
}

.news-meta span { margin: 0 6px; }

.news-card-title {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--coral);
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 14px;
}

.news-card-summary { margin: 0 0 18px; }

.news-card-more {
  margin-top: auto;
  font-weight: 700;
  color: var(--teal);
}

.news-card-more::after { content: " →"; }

.news-card-link:hover .news-card-title { text-decoration: underline; }
.news-card-link:hover .news-card-media { opacity: .85; }
.news-card-media, .news-card-title { transition: opacity .2s ease; }

.news-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.news-theme {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--teal);
  border: 1px solid rgba(0, 91, 106, .35);
  border-radius: 999px;
  padding: 3px 12px;
}

/* Rubriek op de detailpagina: prominent blok boven de titel, klikbaar */
.article-rubriek { margin: 0 0 16px; }

.article-rubriek a {
  display: inline-block;
  padding: 9px 20px;
  background: var(--rubriek, var(--teal));
  color: var(--cream);
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.article-rubriek a:hover,
.article-rubriek a:focus-visible { text-decoration: underline; }

.news-related-meer { margin: 8px 0 0; font-weight: 700; }
.news-related-meer a { color: var(--teal); }
.article-back-scheiding { margin: 0 8px; color: var(--teal); }

/* ---------- Paginering ---------- */
.news-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-pagination a, .news-pagination span {
  display: inline-block;
  min-width: 44px;
  padding: 8px 0;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  color: var(--teal);
  border: 1px solid rgba(0, 91, 106, .35);
}

.news-pagination a:hover { background: rgba(0, 91, 106, .08); }

.news-pagination span[aria-current] {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--cream);
}

/* ---------- Homepage: laatste nieuws ---------- */
.news-home-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.news-home-head h2 { margin: 0; }

/* ---------- Detailpagina ---------- */
.breadcrumb { margin-bottom: 32px; }

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--teal);
}

.breadcrumb li + li::before { content: "/ "; opacity: .6; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li[aria-current] { opacity: .7; }

.article-head h1 { font-size: clamp(38px, 4.6vw, 64px); line-height: 1.05; margin-bottom: 24px; }

.article-lead {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
}

.article-media { margin: 0 0 8px; }

.article-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article-body h2 { font-size: clamp(28px, 2.6vw, 34px); margin: 48px 0 20px; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-size: 26px; margin: 36px 0 16px; }

.article-body ul {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}

.article-body ul li {
  position: relative;
  padding: 4px 0 4px 28px;
}

.article-body ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 15px;
  width: 8px; height: 8px;
  background: var(--coral);
  border-radius: 50%;
}

.article-body a { color: var(--teal); }

.article-back {
  max-width: 768px;
  margin: 48px 0 0;
  font-weight: 700;
}

.article-back a { color: var(--teal); text-decoration: none; }
.article-back a:hover { text-decoration: underline; }

.news-related { padding-bottom: 96px; }
.news-related h2 { margin-bottom: 48px; }

@media (max-width: 991px) {
  .news-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
  .news-filter-knop { font-size: 14px; padding: 8px 14px; }
}

@media (max-width: 767px) {
  .news-grid { grid-template-columns: 1fr; gap: 48px; }
  .article-lead { font-size: 20px; }
}

/* ==========================================================================
   Dossierpagina (/prinsjesdag) – cornerstone met kerncijfers, tijdlijn,
   archief per onderwerp en per jaargang, vragen en begrippen.
   ========================================================================== */

.dossier-head { padding-bottom: 32px; }

.dossier-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 12px;
}

.dossier-head h1 { font-size: clamp(56px, 7vw, 104px); margin-bottom: 24px; }

.dossier-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin: 24px 0 0;
  font-size: 15px;
  color: rgba(0, 0, 0, .62);
}

.dossier-kop { margin-bottom: 48px; }
.dossier-kop h2 { scroll-margin-top: 200px; }

.dossier-inleiding { font-size: 19px; margin-bottom: 0; }

/* ---------- Wegwijzer (ankermenu) ---------- */
.dossier-wegwijzer {
  position: sticky;
  top: 176px;
  z-index: 20;
  background: var(--cream);
  border-top: 1px solid rgba(0, 91, 106, .16);
  border-bottom: 1px solid rgba(0, 91, 106, .16);
  padding: 4px 0;
}

.dossier-wegwijzer ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.dossier-wegwijzer ul::-webkit-scrollbar { display: none; }

.dossier-wegwijzer a {
  display: block;
  white-space: nowrap;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.dossier-wegwijzer a:hover { color: var(--coral); }
.dossier-wegwijzer a.is-active { border-bottom-color: var(--coral); color: var(--coral); }

/* ---------- Aftellen naar Prinsjesdag ---------- */
.dossier-nu { padding-top: 64px; }

.dossier-aftellen {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: center;
  background: var(--teal);
  color: var(--white);
  padding: 48px clamp(28px, 4vw, 64px);
  border-radius: 40px 0;
  margin-bottom: 96px;
}

.dossier-aftellen-cijfer {
  text-align: center;
  border-right: 1px solid rgba(248, 233, 215, .28);
  padding-right: 32px;
}

.dossier-aftellen-groot {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(72px, 9vw, 120px);
  line-height: .9;
  color: var(--coral);
}

.dossier-aftellen-klein {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
}

.dossier-aftellen-tekst h2 { color: var(--cream); margin-bottom: 16px; }
.dossier-aftellen-tekst p { color: var(--white); margin-bottom: 12px; }
.dossier-aftellen-tekst p:last-child { margin-bottom: 0; }
.dossier-aftellen-noot { font-size: 15px; color: rgba(255, 255, 255, .72) !important; }

/* ---------- Stand van zaken ---------- */
.dossier-statuslijst {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dossier-status {
  background: var(--white);
  border-top: 4px solid var(--rubriek, var(--teal));
  padding: 32px 28px;
}

.dossier-status.is-gereed { --rubriek: #2f6b57; }
.dossier-status.is-loopt { --rubriek: #8a6a2f; }
.dossier-status.is-gepland { --rubriek: var(--coral); }

.dossier-status-stand {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--rubriek);
}

.dossier-status h3 { font-size: 26px; margin-bottom: 6px; }

.dossier-status-wanneer {
  font-size: 15px;
  font-weight: 700;
  color: var(--teal);
  margin-bottom: 16px;
}

.dossier-status-link { margin: 20px 0 0; font-weight: 700; }
.dossier-status-link a { color: var(--teal); text-decoration: none; }
.dossier-status-link a:hover { text-decoration: underline; }

/* ---------- Tijdlijn: van plan naar wet ---------- */
.dossier-tijdlijn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
  counter-reset: stap;
}

.dossier-stap {
  position: relative;
  display: flex;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid rgba(0, 91, 106, .22);
}

.dossier-stap::before {
  content: "";
  position: absolute;
  top: -7px; left: 0;
  width: 13px; height: 13px;
  background: var(--coral);
  border-radius: 50%;
}

.dossier-stap-num {
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1;
  color: rgba(0, 91, 106, .32);
}

.dossier-stap-wanneer {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
}

.dossier-stap h3 { font-size: 26px; margin-bottom: 12px; }
.dossier-stap p:last-child { margin-bottom: 0; }

.dossier-noot {
  padding: 24px 28px;
  background: rgba(0, 91, 106, .07);
  border-left: 4px solid var(--teal);
  font-size: 18px;
  margin: 0;
}

/* ---------- Kerncijfers ---------- */
.dossier-tabelblok { margin-bottom: 64px; }
.dossier-tabelblok:last-of-type { margin-bottom: 32px; }
.dossier-tabelblok h3 { font-size: 28px; margin-bottom: 12px; }

.dossier-tabel-uitleg { max-width: 900px; margin-bottom: 24px; }

.dossier-tabel-scroll { overflow-x: auto; }

.dossier-tabel {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 16px;
}

.dossier-tabel th,
.dossier-tabel td {
  text-align: left;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  vertical-align: top;
}

.dossier-tabel thead th {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 2px solid var(--teal);
  white-space: nowrap;
}

.dossier-tabel tbody th {
  font-weight: 400;
  width: 40%;
  color: var(--ink);
}

.dossier-tabel td { font-weight: 700; white-space: nowrap; }

.dossier-tabel .is-accent { background: rgba(255, 110, 100, .1); }
.dossier-tabel thead .is-accent { color: var(--coral); border-bottom-color: var(--coral); }

.dossier-tabel-noot {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0, 0, 0, .58);
  white-space: normal;
}

.dossier-bron { font-size: 14px; color: rgba(0, 0, 0, .58); margin: 0; }

/* ---------- Wat betekent dit voor u ---------- */
.dossier-profielen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dossier-profiel {
  padding: 40px 36px;
  background: var(--cream-light);
  border-radius: 40px 0;
}

.dossier-profiel h3 { font-size: 30px; margin-bottom: 16px; }
.dossier-profiel .checklist { margin-bottom: 0; }
.dossier-profiel .checklist li { font-size: 18px; line-height: 1.5; }
.dossier-profiel-link { margin: 24px 0 0; font-weight: 700; }
.dossier-profiel-link a { color: var(--teal); text-decoration: none; }
.dossier-profiel-link a:hover { text-decoration: underline; }

/* ---------- Artikellijsten (per onderwerp en per jaargang) ---------- */
.dossier-onderwerpen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 56px 64px;
}

.dossier-onderwerp-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}

.dossier-onderwerp-head h3 { font-size: 28px; margin: 0; }

.dossier-onderwerp-aantal {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  background: rgba(0, 91, 106, .1);
  padding: 3px 10px;
  border-radius: 20px 0;
}

.dossier-onderwerp-uitleg { margin-bottom: 20px; }

.dossier-artikelen { list-style: none; margin: 0; padding: 0; }

.dossier-artikel {
  border-top: 1px solid rgba(0, 0, 0, .12);
  padding: 14px 0;
}

.dossier-artikel:last-child { border-bottom: 1px solid rgba(0, 0, 0, .12); }

.dossier-artikel a {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 4px 16px;
  text-decoration: none;
  align-items: baseline;
}

.dossier-artikel time {
  font-size: 14px;
  color: rgba(0, 0, 0, .55);
  white-space: nowrap;
}

.dossier-artikel-titel {
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
}

.dossier-artikel a:hover .dossier-artikel-titel { color: var(--coral); }

.dossier-artikel-samenvatting {
  grid-column: 2;
  margin-top: 6px;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(0, 0, 0, .7);
}

@media (max-width: 700px) {
  .dossier-artikel a { grid-template-columns: 1fr; }
  .dossier-artikel-samenvatting { grid-column: 1; }
  .dossier-artikel-rubriek { margin-left: 0; }
}

.dossier-artikel-rubriek {
  display: inline-block;
  margin: 6px 0 0 146px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--rubriek, var(--teal));
}

/* ---------- Per jaargang ---------- */
.dossier-jaargangen { display: grid; gap: 64px; }

.dossier-jaar {
  background: var(--white);
  padding: 48px clamp(28px, 3.5vw, 56px);
  border-left: 6px solid rgba(0, 91, 106, .3);
}

.dossier-jaar.is-lopend { border-left-color: var(--coral); }

.dossier-jaar-head { margin-bottom: 20px; }

.dossier-jaar-datum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 14px;
  color: rgba(0, 0, 0, .58);
}

.dossier-jaar-merk {
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(0, 91, 106, .1);
}

.dossier-jaar.is-lopend .dossier-jaar-merk { color: var(--white); background: var(--coral); }

.dossier-jaar h3 { font-size: clamp(28px, 3vw, 36px); margin: 0; }

.dossier-jaar-samenvatting { max-width: 1000px; margin-bottom: 32px; }

.dossier-jaar-leeg {
  margin: 0;
  padding: 20px 24px;
  background: var(--cream);
  font-style: italic;
}

.dossier-jaar .dossier-artikelen {
  columns: 2;
  column-gap: 64px;
}

.dossier-jaar .dossier-artikel { break-inside: avoid; }

/* ---------- Veelgestelde vragen ---------- */
.dossier-faq { max-width: 1000px; }

.dossier-vraag {
  border-bottom: 1px solid rgba(0, 0, 0, .14);
}

.dossier-vraag:first-child { border-top: 1px solid rgba(0, 0, 0, .14); }

.dossier-vraag summary {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.2vw, 26px);
  line-height: 1.25;
  color: var(--coral);
}

.dossier-vraag summary::-webkit-details-marker { display: none; }

.dossier-vraag summary::after {
  content: "+";
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  color: var(--teal);
  transition: transform .2s ease;
}

.dossier-vraag[open] summary::after { content: "\2013"; }

.dossier-vraag summary:hover { text-decoration: underline; }

.dossier-antwoord { padding: 0 0 12px; }
.dossier-antwoord p:last-child { margin-bottom: 0; }
.dossier-antwoord a { color: var(--teal); }

/* ---------- Begrippenlijst ---------- */
.dossier-begrippen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 64px;
  margin: 0;
}

.dossier-begrip {
  padding: 20px 0;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

.dossier-begrip dt {
  font-family: var(--font-serif);
  font-size: 22px;
  color: var(--teal);
  margin-bottom: 6px;
}

.dossier-begrip dd { margin: 0; }

/* ---------- Responsief ---------- */
@media (max-width: 1199px) {
  .dossier-statuslijst { grid-template-columns: 1fr; }
  .dossier-tijdlijn { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
  .dossier-wegwijzer { top: 92px; }
  .dossier-aftellen { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .dossier-aftellen-cijfer { border-right: 0; padding-right: 0; padding-bottom: 24px;
    border-bottom: 1px solid rgba(248, 233, 215, .28); }
  .dossier-onderwerpen,
  .dossier-profielen,
  .dossier-begrippen { grid-template-columns: 1fr; }
  .dossier-profielen { gap: 32px; }
  .dossier-jaar .dossier-artikelen { columns: 1; }
}

@media (max-width: 767px) {
  .dossier-tijdlijn { grid-template-columns: 1fr; gap: 40px; }
  .dossier-artikel a { grid-template-columns: 1fr; gap: 2px; }
  .dossier-artikel-rubriek { margin-left: 0; }
  .dossier-jaar { padding-left: 24px; padding-right: 24px; }
}

/* ---------- Verwijzingen naar een dossier (homepage, nieuws, artikel) ---------- */
.home-dossier { padding-bottom: 96px; }

.home-dossier-kaart {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  padding: 48px clamp(28px, 4vw, 64px);
  background: var(--teal);
  color: var(--white);
  border-radius: 40px 0;
  text-decoration: none;
  transition: background-color .2s ease;
}

.home-dossier-kaart:hover { background: var(--teal-deep); }
.home-dossier-kaart h2 { color: var(--cream); margin-bottom: 16px; }
.home-dossier-kaart p { color: rgba(255, 255, 255, .88); margin: 0; max-width: 820px; }
.home-dossier-kaart .button { color: var(--cream); border-color: var(--cream); }
.home-dossier-kaart:hover .button { background: var(--coral); border-color: var(--coral); color: var(--white); }

.home-dossier-label,
.news-dossier-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.home-dossier-label { color: var(--coral); }
.news-dossier-label { color: var(--teal); }

.news-dossier {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  margin-top: 48px;
  padding: 32px clamp(24px, 3vw, 40px);
  background: var(--cream-light);
  border-left: 6px solid var(--coral);
}

.news-dossier h2 { font-size: 32px; margin: 0 0 10px; }
.news-dossier h2 a { text-decoration: none; }
.news-dossier h2 a:hover { text-decoration: underline; }
.news-dossier p { margin: 0; max-width: 780px; }

.article-dossier {
  margin: 20px 0 0;
  padding: 14px 20px;
  background: var(--cream-light);
  border-left: 4px solid var(--coral);
  font-size: 16px;
}

.article-dossier a { color: var(--teal); font-weight: 700; }
.article-dossier-uitleg { color: rgba(0, 0, 0, .6); }

@media (max-width: 767px) {
  .home-dossier-kaart,
  .news-dossier { grid-template-columns: 1fr; gap: 24px; }
  .home-dossier-kaart .button { justify-self: start; }
  .article-dossier-uitleg { display: block; margin-top: 4px; }
}

/* ==========================================================================
   Team — overzichtskaarten (blok "Ons team") en het medewerkerblok dat naast
   een blog of dienst staat. Geen doorklik naar een detailpagina: de kaart is
   het eindpunt, met het e-mailadres als enige actie.
   ========================================================================== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px 48px;
  margin: 64px 0 8px;
}

.team-card { display: flex; flex-direction: column; }

/* Vierkant portret tegen de kolomrand, zoals de sfeerfoto's elders op de site */
.team-portret {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--teal);
}

.team-portret img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

/* Zonder foto: teal vlak met het schildjespatroon en de initialen, net als een
   nieuwskaart zonder afbeelding. Het patroon ligt als aparte laag over het vlak,
   zodat het de hele vierkant vult en de initialen leesbaar blijven. */
.team-portret.is-leeg,
.medewerker-portret.is-leeg {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--teal);
}

.team-portret.is-leeg::before,
.medewerker-portret.is-leeg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/decals-creme.svg") no-repeat center / cover;
  opacity: .2;
}

.team-initialen {
  position: relative;
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  color: var(--cream);
}

.medewerker-portret.is-leeg .team-initialen { font-size: 40px; }

/* Interne voorbeeldpagina: titel een maat kleiner dan de paginatitels met banner,
   die hier zonder bannerfoto anders vier regels vult. */
.team-voorbeeld-kop h1 { font-size: clamp(40px, 4.5vw, 68px); line-height: 1.05; }

.team-naam {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--coral);
  margin: 0 0 6px;
}

.team-functie {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--teal);
}

.team-contact {
  list-style: none;
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 0;
}

.team-contact a {
  color: var(--teal);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 91, 106, .35);
}

.team-contact a:hover,
.team-contact a:focus-visible { border-bottom-color: var(--teal); }

.team-tel { font-variant-numeric: tabular-nums; }

/* LinkedIn: teal vierkantje met "in" in de huisstijl. Staat er een officiële
   /assets/img/linkedin.svg in de site, dan zet team.py die erin en vult het
   vierkantje zich met die afbeelding. */
.team-social { margin: 0; }

.team-linkedin {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--teal);
  color: var(--cream);
  text-decoration: none;
  transition: background-color .15s ease;
}

.team-linkedin:hover,
.team-linkedin:focus-visible { background: var(--coral); }

.team-linkedin img { width: 20px; height: 20px; }

.team-linkedin-merk {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}

/* ---------- Medewerker naast een blog of dienst ---------- */
.medewerker-blok {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 28px;
  align-items: start;
  max-width: 768px;
  margin: 40px 0 0;
  padding: 28px 32px;
  background: var(--cream-light);
  border-left: 6px solid var(--coral);
}

.medewerker-portret {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--teal);
}

.medewerker-portret img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }

.medewerker-rol {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teal);
}

.medewerker-naam {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.2;
  color: var(--coral);
  margin: 0 0 2px;
}

.medewerker-functie {
  margin: 0 0 12px;
  font-size: 15px;
  color: rgba(0, 0, 0, .65);
}

.medewerker-intro { margin: 0 0 14px; }

.medewerker-contact { margin: 0 0 14px; font-size: 15px; }

.medewerker-contact a { color: var(--teal); font-weight: 700; }

.medewerker-scheiding { margin: 0 8px; color: rgba(0, 0, 0, .4); }

.medewerker-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0;
}

.medewerker-acties .team-linkedin { width: 30px; height: 30px; }
.medewerker-acties .team-linkedin-merk { font-size: 14px; }

.medewerker-knop { color: var(--teal); font-weight: 700; font-size: 15px; }

@media (max-width: 991px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 48px 40px; }
}

@media (max-width: 767px) {
  .medewerker-blok {
    grid-template-columns: 110px 1fr;
    gap: 20px;
    padding: 24px;
  }
}

@media (max-width: 479px) {
  .team-grid { grid-template-columns: 1fr; gap: 40px; }
  .medewerker-blok { grid-template-columns: 1fr; }
  .medewerker-portret { width: 120px; }
}