/* ==========================================================================
   Collectieregister, huisstijl "museumdepot"
   Palet: gedempt museumgrijs, oud papier, diep kastanje, gedempt goudlijst
   Koppen: Big Shoulders Display. Lopende tekst: Fira Sans.
   Opbouw: vitrine. Hero met objectkaart en herkomstlabel, secties als
   depotplanken in een strak raster.
   Mobiel eerst. Breekpunten op 640px, 900px en 1200px.
   ========================================================================== */

/* 1. Ontwerptokens
   ------------------------------------------------------------------------ */

:root {
  /* oud papier */
  --papier: #f4efe4;
  --papier-warm: #ece4d4;
  --papier-diep: #e0d6c2;
  --papier-wit: #fbf8f1;

  /* museumgrijs */
  --grijs-900: #23262a;
  --grijs-800: #2c2f2d;
  --grijs-700: #3d423f;
  --grijs-600: #545a56;
  --grijs-500: #6d736f;
  --grijs-400: #949a95;
  --grijs-300: #b9bdb7;
  --grijs-200: #d5d7d0;

  /* diep kastanje */
  --kastanje: #6b2f28;
  --kastanje-diep: #4e211c;
  --kastanje-licht: #8c453b;
  --kastanje-waas: rgba(107, 47, 40, 0.08);

  /* gedempt goudlijst */
  --goud: #a98544;
  --goud-licht: #c8a866;
  --goud-bleek: #e3d3ae;
  --goud-waas: rgba(169, 133, 68, 0.14);

  /* rollen */
  --grond: var(--papier);
  --grond-plank: var(--papier-warm);
  --grond-kaart: var(--papier-wit);
  --grond-donker: var(--grijs-800);
  --inkt: var(--grijs-800);
  --inkt-zacht: var(--grijs-600);
  --inkt-licht: var(--papier);
  --lijn: rgba(44, 47, 45, 0.16);
  --lijn-sterk: rgba(44, 47, 45, 0.34);
  --lijn-goud: rgba(169, 133, 68, 0.45);
  --link: var(--kastanje);
  --link-hover: var(--kastanje-diep);

  /* typografie */
  --font-kop: "Big Shoulders Display", "Oswald", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-tekst: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --kop-spatie: 0.02em;
  --label-spatie: 0.18em;

  /* ritme */
  --maat-1: 0.25rem;
  --maat-2: 0.5rem;
  --maat-3: 0.75rem;
  --maat-4: 1rem;
  --maat-5: 1.5rem;
  --maat-6: 2rem;
  --maat-7: 3rem;
  --maat-8: 4rem;
  --maat-9: 6rem;

  --bak: 1180px;
  --bak-smal: 44rem;
  --rand: 1.125rem;

  --radius-0: 0;
  --radius-1: 3px;
  --radius-2: 6px;

  --schaduw-plank: 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 20px -14px rgba(35, 38, 42, 0.55);
  --schaduw-kaart: 0 18px 38px -26px rgba(35, 38, 42, 0.7);
  --schaduw-diep: 0 26px 60px -30px rgba(35, 38, 42, 0.75);

  --overgang: 180ms ease;
  --overgang-traag: 320ms cubic-bezier(0.2, 0.7, 0.3, 1);

  /* motief: depotplank als herhaalbare lijn */
  --plank-lijn: linear-gradient(
    to bottom,
    var(--lijn-goud) 0,
    var(--lijn-goud) 1px,
    transparent 1px,
    transparent 100%
  );
}

/* 2. Basis
   ------------------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background-color: var(--grond);
  background-image:
    radial-gradient(circle at 18% 4%, rgba(169, 133, 68, 0.12), transparent 46%),
    radial-gradient(circle at 92% 0%, rgba(107, 47, 40, 0.09), transparent 42%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect width='120' height='120' fill='none'/%3E%3Cpath d='M0 40h120M0 80h120' stroke='%232c2f2d' stroke-opacity='0.045' stroke-width='1'/%3E%3Cpath d='M40 0v120M80 0v120' stroke='%232c2f2d' stroke-opacity='0.028' stroke-width='1'/%3E%3C/svg%3E");
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: 1.68;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
  font-family: var(--font-kop);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: var(--kop-spatie);
  margin: 0 0 var(--maat-4);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 9.5vw, 4.15rem);
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.9rem, 6vw, 2.7rem);
  text-transform: uppercase;
}

h3 {
  font-size: clamp(1.35rem, 4vw, 1.6rem);
  font-weight: 700;
}

p {
  margin: 0 0 var(--maat-4);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--overgang), text-decoration-color var(--overgang);
}

a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--goud);
}

:focus-visible {
  outline: 3px solid var(--kastanje);
  outline-offset: 3px;
  border-radius: var(--radius-1);
}

strong {
  font-weight: 600;
  color: var(--grijs-900);
}

ul,
ol {
  margin: 0 0 var(--maat-4);
  padding-left: 1.25rem;
}

li {
  margin-bottom: var(--maat-2);
}

hr {
  border: 0;
  height: 1px;
  background: var(--lijn);
  margin: var(--maat-6) 0;
}

/* 3. Hulpstukken
   ------------------------------------------------------------------------ */

.bak {
  width: 100%;
  max-width: var(--bak);
  margin-inline: auto;
  padding-inline: var(--rand);
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--grijs-800);
  color: var(--papier);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-kop);
  font-size: 1.1rem;
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--goud);
}

.skip-link:focus {
  left: 0;
  color: var(--papier);
}

/* objectlabel: het kernmotief, een kaartje met inventarisnummer */
.objectlabel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-tekst);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--grijs-600);
  background: var(--grond-kaart);
  border: 1px solid var(--lijn-goud);
  border-top-style: dashed;
  padding: 0.35rem 0.7rem 0.35rem 1.35rem;
  border-radius: var(--radius-1);
  position: relative;
}

.objectlabel::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--goud);
}

.objectlabel--donker {
  background: rgba(244, 239, 228, 0.08);
  color: var(--goud-licht);
  border-color: rgba(200, 168, 102, 0.5);
}

/* plank: horizontale scheiding tussen secties */
.plank {
  position: relative;
  padding-block: var(--maat-7);
  border-top: 1px solid var(--lijn);
}

.plank::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 3px;
  height: 1px;
  background: var(--lijn-goud);
  opacity: 0.65;
}

.sectiekop {
  max-width: 46rem;
  margin-bottom: var(--maat-6);
}

.sectiekop p {
  color: var(--inkt-zacht);
  font-size: 1.06rem;
}

/* 4. Knoppen
   ------------------------------------------------------------------------ */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-kop);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-1);
  cursor: pointer;
  transition: transform var(--overgang), background-color var(--overgang),
    color var(--overgang), border-color var(--overgang), box-shadow var(--overgang);
}

.knop--primair {
  background: var(--kastanje);
  color: var(--papier-wit);
  box-shadow: inset 0 -2px 0 var(--kastanje-diep);
}

.knop--primair:hover {
  background: var(--kastanje-diep);
  color: var(--papier-wit);
  transform: translateY(-2px);
}

.knop--tweede {
  background: transparent;
  color: var(--grijs-800);
  border-color: var(--lijn-sterk);
  box-shadow: inset 0 -2px 0 var(--goud-waas);
}

.knop--tweede:hover {
  border-color: var(--goud);
  background: var(--goud-waas);
  color: var(--grijs-900);
  transform: translateY(-2px);
}

.knop--licht {
  background: var(--goud-licht);
  color: var(--grijs-900);
}

.knop--licht:hover {
  background: var(--goud-bleek);
  color: var(--grijs-900);
}

.knop--breed {
  width: 100%;
}

/* 5. Header en navigatie
   ------------------------------------------------------------------------ */

.kop {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(244, 239, 228, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--lijn);
  box-shadow: 0 1px 0 var(--lijn-goud);
}

.kop__bak {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--maat-4);
  min-height: 4.25rem;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--grijs-900);
}

.merk__zegel {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: 0 0 auto;
  background: var(--grijs-800);
  color: var(--goud-licht);
  font-family: var(--font-kop);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  border-radius: var(--radius-1);
  border: 1px solid var(--goud);
  box-shadow: inset 0 0 0 2px rgba(244, 239, 228, 0.14);
}

.merk__naam {
  display: block;
  font-family: var(--font-kop);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}

.merk__onder {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--inkt-zacht);
  margin-top: 0.15rem;
}

.navknop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius-1);
  color: var(--grijs-800);
  font-family: var(--font-kop);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
}

.navknop__streep {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--grijs-800);
  position: relative;
}

.navknop__streep::before,
.navknop__streep::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--grijs-800);
}

.navknop__streep::before { top: -6px; }
.navknop__streep::after { top: 6px; }

.hoofdnav {
  display: none;
}

.hoofdnav.is-open {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--papier-wit);
  border-top: 1px solid var(--lijn);
  border-bottom: 2px solid var(--goud);
  box-shadow: var(--schaduw-kaart);
  padding: var(--maat-4) var(--rand) var(--maat-5);
}

.hoofdnav__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.hoofdnav__link {
  display: block;
  padding: 0.6rem 0.2rem;
  font-family: var(--font-kop);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grijs-800);
  border-bottom: 1px solid var(--lijn);
}

.hoofdnav__link:hover {
  color: var(--kastanje);
  padding-left: 0.6rem;
}

.hoofdnav__cta {
  margin-top: var(--maat-4);
}

/* 6. Hero, de vitrine
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  padding-block: var(--maat-7) var(--maat-8);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(224, 214, 194, 0.55), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='64'%3E%3Cpath d='M0 63h200' stroke='%23a98544' stroke-opacity='0.35' stroke-width='2'/%3E%3Cpath d='M0 60h200' stroke='%232c2f2d' stroke-opacity='0.08' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat, repeat;
  background-size: auto, 200px 64px;
  z-index: -1;
}

.hero__inner {
  display: grid;
  gap: var(--maat-6);
}

.hero__titel {
  margin-bottom: var(--maat-4);
}

.hero__titel .accent {
  display: block;
  color: var(--kastanje);
}

.hero__belofte {
  font-size: 1.2rem;
  color: var(--inkt-zacht);
  max-width: 34rem;
}

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-3);
  margin-top: var(--maat-5);
}

.hero__voetnoot {
  margin-top: var(--maat-5);
  font-size: 0.9rem;
  color: var(--inkt-zacht);
  border-left: 2px solid var(--goud);
  padding-left: var(--maat-4);
}

/* objectkaart rechts in de hero */
.objectkaart {
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--kastanje);
  border-radius: var(--radius-2);
  box-shadow: var(--schaduw-kaart);
  padding: var(--maat-5);
  position: relative;
}

.objectkaart::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--lijn-goud);
  border-radius: var(--radius-1);
  pointer-events: none;
}

.objectkaart__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--maat-3);
  border-bottom: 1px solid var(--lijn);
  padding-bottom: var(--maat-3);
  margin-bottom: var(--maat-4);
}

.objectkaart__titel {
  font-family: var(--font-kop);
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.objectkaart__nummer {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--goud);
}

.objectkaart__rij {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 0.4rem var(--maat-3);
  padding: 0.45rem 0;
  border-bottom: 1px dotted var(--lijn);
  font-size: 0.93rem;
}

.objectkaart__rij:last-of-type {
  border-bottom: 0;
}

.objectkaart__veld {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  align-self: center;
}

.objectkaart__waarde {
  color: var(--grijs-900);
}

.objectkaart__voet {
  margin-top: var(--maat-4);
  padding-top: var(--maat-3);
  border-top: 1px solid var(--lijn);
  font-size: 0.85rem;
  color: var(--inkt-zacht);
}

/* 7. Depotplanken: rasters voor secties
   ------------------------------------------------------------------------ */

.raster {
  display: grid;
  gap: var(--maat-4);
}

.plankvak {
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-bottom: 3px solid var(--goud-waas);
  border-radius: var(--radius-1);
  padding: var(--maat-5);
  position: relative;
  transition: transform var(--overgang-traag), box-shadow var(--overgang-traag),
    border-color var(--overgang);
}

.plankvak:hover {
  transform: translateY(-3px);
  border-bottom-color: var(--goud);
  box-shadow: var(--schaduw-plank);
}

.plankvak__nr {
  font-family: var(--font-kop);
  font-size: 1.6rem;
  color: var(--goud);
  line-height: 1;
  display: block;
  margin-bottom: var(--maat-2);
}

.plankvak h3 {
  margin-bottom: var(--maat-2);
}

.plankvak p {
  margin-bottom: 0;
  color: var(--inkt-zacht);
  font-size: 0.97rem;
}

/* probleemsectie op donkere grond */
.donker {
  background: var(--grond-donker);
  background-image:
    linear-gradient(180deg, rgba(169, 133, 68, 0.16), transparent 34%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M0 79.5h160M0 159.5h160' stroke='%23c8a866' stroke-opacity='0.13' stroke-width='1'/%3E%3C/svg%3E");
  color: var(--inkt-licht);
  border-top: 2px solid var(--goud);
  border-bottom: 2px solid var(--goud);
}

.donker h2,
.donker h3 {
  color: var(--papier-wit);
}

.donker p,
.donker li {
  color: rgba(244, 239, 228, 0.88);
}

.donker .sectiekop p {
  color: rgba(244, 239, 228, 0.8);
}

.donker a {
  color: var(--goud-licht);
}

.donker a:hover {
  color: var(--goud-bleek);
}

.donker .plankvak {
  background: rgba(244, 239, 228, 0.05);
  border-color: rgba(200, 168, 102, 0.28);
  border-bottom-color: rgba(200, 168, 102, 0.45);
}

.donker .plankvak p {
  color: rgba(244, 239, 228, 0.84);
}

/* stappen: genummerde reeks als depotgang */
.stappen {
  list-style: none;
  counter-reset: stap;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--maat-4);
}

.stappen li {
  counter-increment: stap;
  position: relative;
  padding: var(--maat-4) var(--maat-4) var(--maat-4) 4rem;
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--kastanje);
  border-radius: var(--radius-1);
  margin: 0;
}

.stappen li::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute;
  left: 1.1rem;
  top: 1rem;
  font-family: var(--font-kop);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--goud);
  line-height: 1;
}

.stappen h3 {
  margin-bottom: var(--maat-2);
}

.stappen p {
  margin-bottom: 0;
  color: var(--inkt-zacht);
}

/* voordelen als streeplijst met haakje */
.baten {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--maat-3);
}

.baten li {
  position: relative;
  padding-left: 2.1rem;
  margin: 0;
}

.baten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 1.1rem;
  height: 0.55rem;
  border-left: 2px solid var(--kastanje);
  border-bottom: 2px solid var(--kastanje);
  transform: rotate(-45deg);
}

/* 8. Vertrouwen
   ------------------------------------------------------------------------ */

.vertrouwen__paar {
  display: grid;
  gap: var(--maat-4);
}

.vertrouwen__kolom {
  background: var(--grond-plank);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-1);
  padding: var(--maat-5);
}

.vertrouwen__kolom h3 {
  margin-top: 0;
}

.vertrouwen__kolom ul {
  margin-bottom: 0;
}

.vertrouwen__paar--tweede {
  margin-top: var(--maat-5);
}

.geschetst {
  border: 1px dashed var(--lijn-sterk);
  border-left: 3px solid var(--goud);
  background: var(--goud-waas);
  padding: var(--maat-5);
  border-radius: var(--radius-1);
  margin-top: var(--maat-5);
}

.geschetst h3 {
  margin-top: 0;
}

.geschetst p:last-child {
  margin-bottom: 0;
}

/* 9. Tarieven
   ------------------------------------------------------------------------ */

.tarieven {
  display: grid;
  gap: var(--maat-4);
}

.tarief {
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--grijs-700);
  border-radius: var(--radius-2);
  padding: var(--maat-5);
  display: flex;
  flex-direction: column;
}

.tarief--uitgelicht {
  border-top-color: var(--kastanje);
  box-shadow: var(--schaduw-kaart);
}

.tarief__naam {
  font-family: var(--font-kop);
  font-size: 1.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--maat-2);
}

.tarief__prijs {
  font-family: var(--font-kop);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--kastanje);
}

.tarief__per {
  font-family: var(--font-tekst);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  display: block;
  margin-top: var(--maat-2);
}

.tarief__lijst {
  list-style: none;
  padding: 0;
  margin: var(--maat-4) 0 var(--maat-5);
  border-top: 1px solid var(--lijn);
}

.tarief__lijst li {
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--lijn);
  font-size: 0.95rem;
  margin: 0;
}

.tarief .knop {
  margin-top: auto;
}

.tarief__noot {
  margin-top: var(--maat-5);
  font-size: 0.9rem;
  color: var(--inkt-zacht);
}

/* 10. Veelgestelde vragen
   ------------------------------------------------------------------------ */

.vraag {
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--goud);
  border-radius: var(--radius-1);
  background: var(--grond-kaart);
  margin-bottom: var(--maat-3);
  overflow: hidden;
}

.vraag > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--maat-4) 3rem var(--maat-4) var(--maat-4);
  font-family: var(--font-kop);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--grijs-900);
  position: relative;
  transition: background-color var(--overgang);
}

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

.vraag > summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 1.45rem;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2px solid var(--kastanje);
  border-bottom: 2px solid var(--kastanje);
  transform: rotate(45deg);
  transition: transform var(--overgang);
}

.vraag[open] > summary::after {
  transform: rotate(-135deg);
}

.vraag > summary:hover {
  background: var(--goud-waas);
}

.vraag__antwoord {
  padding: 0 var(--maat-4) var(--maat-4);
  color: var(--inkt-zacht);
}

.vraag__antwoord p:last-child {
  margin-bottom: 0;
}

/* 11. Artikelkaarten op home en blog
   ------------------------------------------------------------------------ */

.kaarten {
  display: grid;
  gap: var(--maat-5);
}

.kaart {
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--radius-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--overgang-traag), box-shadow var(--overgang-traag);
}

.kaart:hover {
  transform: translateY(-4px);
  box-shadow: var(--schaduw-kaart);
}

.kaart__lijst {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--lijn-goud);
  background: var(--papier-diep);
}

.kaart__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) contrast(1.03);
  transition: transform var(--overgang-traag), filter var(--overgang-traag);
}

.kaart:hover .kaart__foto {
  transform: scale(1.04);
  filter: saturate(0.95);
}

.kaart__body {
  padding: var(--maat-4) var(--maat-4) var(--maat-5);
  display: flex;
  flex-direction: column;
  gap: var(--maat-2);
  flex: 1;
}

.kaart__titel {
  font-size: 1.28rem;
  line-height: 1.16;
  margin: 0;
  text-transform: none;
  letter-spacing: 0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}

.kaart__titel a {
  color: var(--grijs-900);
  text-decoration: none;
}

.kaart__titel a:hover {
  color: var(--kastanje);
  text-decoration: underline;
  text-decoration-color: var(--goud);
}

.kaart__tekst {
  color: var(--inkt-zacht);
  font-size: 0.95rem;
  margin: 0;
}

.kaart__meta {
  margin-top: auto;
  padding-top: var(--maat-3);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grijs-500);
  border-top: 1px dotted var(--lijn);
}

.meerlink {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--maat-5);
  font-family: var(--font-kop);
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kastanje);
  border-bottom: 2px solid var(--goud);
  padding-bottom: 0.15rem;
}

.meerlink:hover {
  color: var(--kastanje-diep);
  border-bottom-color: var(--kastanje);
}

/* 12. Contactformulier
   ------------------------------------------------------------------------ */

.contact__inner {
  display: grid;
  gap: var(--maat-6);
}

.contact__intro p {
  color: var(--inkt-zacht);
}

.contact__alternatief {
  border-left: 2px solid var(--goud);
  padding-left: var(--maat-4);
  font-size: 0.95rem;
}

.formulier {
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-top: 4px solid var(--kastanje);
  border-radius: var(--radius-2);
  padding: var(--maat-5);
  box-shadow: var(--schaduw-kaart);
  display: grid;
  gap: 0.35rem;
}

.formulier label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grijs-600);
  margin-top: var(--maat-3);
}

.formulier input,
.formulier select,
.formulier textarea {
  width: 100%;
  font-family: var(--font-tekst);
  font-size: 1rem;
  color: var(--grijs-900);
  background: var(--papier);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--radius-1);
  padding: 0.7rem 0.8rem;
  transition: border-color var(--overgang), box-shadow var(--overgang),
    background-color var(--overgang);
}

.formulier textarea {
  resize: vertical;
  min-height: 8rem;
}

.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus {
  outline: none;
  background: var(--papier-wit);
  border-color: var(--kastanje);
  box-shadow: 0 0 0 3px var(--kastanje-waas);
}

.formulier button {
  margin-top: var(--maat-5);
}

.formulier__noot {
  font-size: 0.84rem;
  color: var(--inkt-zacht);
  margin: var(--maat-3) 0 0;
}

/* 13. Footer
   ------------------------------------------------------------------------ */

.voet {
  background: var(--grond-donker);
  background-image:
    linear-gradient(180deg, rgba(169, 133, 68, 0.2), transparent 22%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cpath d='M0 69.5h140M0 139.5h140' stroke='%23c8a866' stroke-opacity='0.12' stroke-width='1'/%3E%3C/svg%3E");
  color: rgba(244, 239, 228, 0.86);
  border-top: 3px solid var(--goud);
  margin-top: var(--maat-8);
  padding-top: var(--maat-7);
}

.voet a {
  color: rgba(244, 239, 228, 0.9);
  text-decoration: none;
}

.voet a:hover {
  color: var(--goud-licht);
  text-decoration: underline;
  text-decoration-color: var(--goud);
}

.voet__raster {
  display: grid;
  gap: var(--maat-6);
  padding-bottom: var(--maat-7);
}

.voet__kop {
  font-family: var(--font-kop);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--goud-licht);
  margin: 0 0 var(--maat-4);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(200, 168, 102, 0.35);
}

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

.voet__lijst li {
  margin-bottom: 0.55rem;
}

.voet__merknaam {
  font-family: var(--font-kop);
  font-size: 1.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--papier-wit);
  margin: 0 0 var(--maat-3);
}

.voet__pitch {
  font-size: 0.95rem;
  color: rgba(244, 239, 228, 0.78);
  max-width: 26rem;
}

.voet__contact {
  font-size: 0.95rem;
  margin-top: var(--maat-4);
}

/* netwerkkolom: elke link als objectlabel op een plank */
.netwerk {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.netwerk li {
  margin: 0;
}

.netwerk a {
  display: block;
  padding: 0.6rem 0.75rem 0.6rem 1.6rem;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(244, 239, 228, 0.9);
  background: rgba(244, 239, 228, 0.05);
  border: 1px solid rgba(200, 168, 102, 0.26);
  border-left: 2px solid var(--goud);
  border-radius: var(--radius-1);
  position: relative;
  transition: background-color var(--overgang), border-color var(--overgang),
    transform var(--overgang), color var(--overgang);
}

.netwerk a::before {
  content: "";
  position: absolute;
  left: 0.62rem;
  top: 1.05rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--goud-licht);
}

.netwerk a:hover {
  background: rgba(200, 168, 102, 0.14);
  border-color: var(--goud-licht);
  color: var(--papier-wit);
  transform: translateX(3px);
  text-decoration: none;
}

.voet__balk {
  border-top: 1px solid rgba(200, 168, 102, 0.3);
  padding: var(--maat-4) 0 var(--maat-5);
  font-size: 0.85rem;
  color: rgba(244, 239, 228, 0.72);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* 14. Kruimelpad (generator)
   ------------------------------------------------------------------------ */

.kruimels {
  padding-block: var(--maat-4) 0;
}

.kruimels__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grijs-500);
}

.kruimels__item {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.kruimels__item + .kruimels__item::before {
  content: "/";
  color: var(--goud);
}

.kruimels__item a {
  color: var(--grijs-600);
  text-decoration: none;
}

.kruimels__item a:hover {
  color: var(--kastanje);
  text-decoration: underline;
}

/* 15. Artikelopmaak (generator)
   ------------------------------------------------------------------------ */

.artikel {
  padding-bottom: var(--maat-7);
}

.artikel__inner {
  width: 100%;
  max-width: var(--bak);
  margin-inline: auto;
  padding-inline: var(--rand);
}

.artikel-kop {
  padding-block: var(--maat-5) var(--maat-6);
  border-bottom: 1px solid var(--lijn);
  margin-bottom: var(--maat-6);
  position: relative;
}

.artikel-kop::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 6rem;
  height: 3px;
  background: var(--goud);
}

.artikel-kop__rubriek {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--kastanje);
  background: var(--kastanje-waas);
  border: 1px solid rgba(107, 47, 40, 0.22);
  border-top-style: dashed;
  border-radius: var(--radius-1);
  padding: 0.3rem 0.7rem;
  margin-bottom: var(--maat-4);
}

.artikel-kop__titel {
  font-size: clamp(2.1rem, 7.5vw, 3.6rem);
  text-transform: uppercase;
  margin-bottom: var(--maat-4);
}

.artikel-kop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  font-size: 0.83rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

.artikel-kop__auteur,
.artikel-kop__datum,
.artikel-kop__leestijd {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.artikel-kop__auteur::before,
.artikel-kop__datum::before,
.artikel-kop__leestijd::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--goud);
  flex: 0 0 auto;
}

.artikel-kop__auteur a {
  color: var(--kastanje);
}

.artikel-hero {
  margin: 0 0 var(--maat-6);
}

.artikel-hero__foto {
  width: 100%;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-2);
  box-shadow: var(--schaduw-kaart);
  filter: saturate(0.85);
}

.artikel-hero__credit {
  display: block;
  margin-top: var(--maat-2);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--grijs-500);
}

.artikel-hero__credit a {
  color: var(--grijs-600);
}

.artikel__body {
  max-width: var(--bak-smal);
  font-size: 1.06rem;
}

.artikel__body .chapo {
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--grijs-700);
  border-left: 3px solid var(--kastanje);
  padding-left: var(--maat-4);
  margin-bottom: var(--maat-6);
}

.artikel__body h2 {
  font-size: clamp(1.7rem, 5vw, 2.2rem);
  margin-top: var(--maat-7);
  padding-top: var(--maat-3);
  border-top: 1px solid var(--lijn);
  position: relative;
}

.artikel__body h2::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--goud);
}

.artikel__body h3 {
  margin-top: var(--maat-5);
  color: var(--grijs-900);
}

.artikel__body p {
  margin-bottom: var(--maat-4);
}

.artikel__body ul,
.artikel__body ol {
  padding-left: 1.4rem;
  margin-bottom: var(--maat-5);
}

.artikel__body ul li::marker {
  color: var(--goud);
}

.artikel__body ol li::marker {
  color: var(--kastanje);
  font-weight: 600;
}

.artikel__body li {
  margin-bottom: 0.5rem;
}

.artikel__body a {
  color: var(--link);
  text-decoration-color: var(--goud);
}

.artikel__body strong {
  color: var(--grijs-900);
  font-weight: 600;
}

.artikel__body blockquote {
  margin: var(--maat-6) 0;
  padding: var(--maat-4) var(--maat-5);
  background: var(--grond-plank);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--goud);
  border-radius: var(--radius-1);
  font-size: 1.06rem;
  color: var(--grijs-700);
}

.artikel__body blockquote p:last-child {
  margin-bottom: 0;
}

.artikel__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--maat-5) 0;
  font-size: 0.95rem;
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
}

.artikel__body table caption {
  text-align: left;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
  padding-bottom: var(--maat-2);
}

.artikel__body th,
.artikel__body td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--lijn);
  text-align: left;
  vertical-align: top;
}

.artikel__body th {
  font-family: var(--font-kop);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--papier-warm);
  color: var(--grijs-900);
}

.artikel__body tbody tr:last-child td {
  border-bottom: 0;
}

/* 16. Auteursblok (generator)
   ------------------------------------------------------------------------ */

.auteur-blok {
  max-width: var(--bak-smal);
  margin: var(--maat-7) 0 0;
  padding: var(--maat-5);
  background: var(--grond-plank);
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--kastanje);
  border-radius: var(--radius-2);
  display: grid;
  gap: var(--maat-4);
}

.auteur-blok__foto {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--goud);
  box-shadow: var(--schaduw-plank);
}

.auteur-blok__naam {
  font-family: var(--font-kop);
  font-size: 1.55rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--maat-2);
}

.auteur-blok__bio {
  color: var(--inkt-zacht);
  margin-bottom: var(--maat-3);
}

.auteur-blok__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--maat-3);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.auteur-blok__links a {
  color: var(--kastanje);
  text-decoration: none;
  border-bottom: 1px solid var(--goud);
  padding-bottom: 0.1rem;
}

.auteur-blok__links a:hover {
  color: var(--kastanje-diep);
  border-bottom-color: var(--kastanje);
}

/* 17. Verder lezen (generator)
   ------------------------------------------------------------------------ */

.verder {
  margin-top: var(--maat-8);
  padding-top: var(--maat-6);
  border-top: 1px solid var(--lijn);
  position: relative;
}

.verder::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--lijn-goud);
}

.verder__kop {
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  text-transform: uppercase;
  margin-bottom: var(--maat-5);
}

.verder__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--maat-4);
}

.verder__item {
  margin: 0;
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-bottom: 3px solid var(--goud-waas);
  border-radius: var(--radius-2);
  overflow: hidden;
  transition: transform var(--overgang-traag), border-color var(--overgang),
    box-shadow var(--overgang-traag);
}

.verder__item:hover {
  transform: translateY(-3px);
  border-bottom-color: var(--goud);
  box-shadow: var(--schaduw-plank);
}

.verder__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.verder__foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  filter: saturate(0.78);
  border-bottom: 1px solid var(--lijn-goud);
}

.verder__titel {
  display: block;
  font-family: var(--font-kop);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--grijs-900);
  padding: var(--maat-4) var(--maat-4) var(--maat-2);
}

.verder__link:hover .verder__titel {
  color: var(--kastanje);
}

.verder__meta {
  display: block;
  padding: 0 var(--maat-4) var(--maat-4);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grijs-500);
}

/* 18. Foutpagina (generator)
   ------------------------------------------------------------------------ */

.fout {
  padding-block: var(--maat-8);
}

.fout__inner {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: var(--rand);
  text-align: left;
}

.fout__code {
  display: block;
  font-family: var(--font-kop);
  font-size: clamp(4.5rem, 22vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  color: var(--goud);
  letter-spacing: 0.02em;
}

.fout__titel {
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  text-transform: uppercase;
  margin-top: var(--maat-4);
}

.fout__tekst {
  color: var(--inkt-zacht);
  max-width: 34rem;
}

.fout__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--maat-4);
  margin-top: var(--maat-5);
}

.fout__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-kop);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--kastanje);
  color: var(--papier-wit);
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-1);
  box-shadow: inset 0 -2px 0 var(--kastanje-diep);
  transition: background-color var(--overgang), transform var(--overgang);
}

.fout__knop:hover {
  background: var(--kastanje-diep);
  color: var(--papier-wit);
  transform: translateY(-2px);
}

.fout__link {
  font-size: 0.95rem;
  color: var(--grijs-600);
  border-bottom: 1px solid var(--goud);
  text-decoration: none;
  padding-bottom: 0.1rem;
}

.fout__link:hover {
  color: var(--kastanje);
}

/* 19. Overige paginablokken
   ------------------------------------------------------------------------ */

.pagina {
  padding-block: var(--maat-6) var(--maat-7);
}

.pagina__inleiding {
  max-width: var(--bak-smal);
  font-size: 1.1rem;
  color: var(--inkt-zacht);
}

.prose {
  max-width: var(--bak-smal);
}

.prose h2 {
  margin-top: var(--maat-7);
  padding-top: var(--maat-3);
  border-top: 1px solid var(--lijn);
}

.prose h3 {
  margin-top: var(--maat-5);
}

.prose dl {
  margin: 0 0 var(--maat-5);
}

.prose dt {
  font-weight: 600;
  color: var(--grijs-900);
  margin-top: var(--maat-3);
}

.prose dd {
  margin: 0 0 var(--maat-2);
  color: var(--inkt-zacht);
}

.linklijst {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--maat-5);
}

.linklijst li {
  margin: 0;
  border-bottom: 1px dotted var(--lijn);
}

.linklijst a {
  display: block;
  padding: 0.6rem 0;
  text-decoration: none;
  color: var(--grijs-800);
}

.linklijst a:hover {
  color: var(--kastanje);
  padding-left: 0.4rem;
}

/* 20. Beweging
   ------------------------------------------------------------------------ */

@keyframes lichtstreep {
  0% { transform: translateX(-100%); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes opkomen {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.objectkaart {
  animation: opkomen 520ms ease-out both;
}

.hero__titel .accent {
  position: relative;
  overflow: hidden;
}

.hero__titel .accent::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(200, 168, 102, 0.35),
    transparent
  );
  animation: lichtstreep 4.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

.is-zichtbaar {
  animation: opkomen 480ms ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .kaart:hover,
  .plankvak:hover,
  .verder__item:hover,
  .knop:hover,
  .netwerk a:hover {
    transform: none;
  }
}

/* 21. Breekpunt 640px
   ------------------------------------------------------------------------ */

@media (min-width: 640px) {
  :root {
    --rand: 1.75rem;
  }

  .raster--drie,
  .raster--vier {
    grid-template-columns: repeat(2, 1fr);
  }

  .kaarten {
    grid-template-columns: repeat(2, 1fr);
  }

  .verder__lijst {
    grid-template-columns: repeat(2, 1fr);
  }

  .vertrouwen__paar {
    grid-template-columns: repeat(2, 1fr);
  }

  .voet__raster {
    grid-template-columns: repeat(2, 1fr);
  }

  .voet__balk {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .auteur-blok {
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--maat-5);
  }

  .formulier {
    padding: var(--maat-6);
  }

  .stappen {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 22. Breekpunt 900px
   ------------------------------------------------------------------------ */

@media (min-width: 900px) {
  :root {
    --rand: 2.25rem;
  }

  .navknop {
    display: none;
  }

  .hoofdnav {
    display: block;
  }

  .hoofdnav.is-open {
    position: static;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
  }

  .hoofdnav__lijst {
    flex-direction: row;
    align-items: center;
    gap: var(--maat-5);
  }

  .hoofdnav__link {
    border-bottom: 0;
    padding: 0.35rem 0;
    font-size: 1.08rem;
    position: relative;
  }

  .hoofdnav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0;
    background: var(--goud);
    transition: width var(--overgang);
  }

  .hoofdnav__link:hover {
    padding-left: 0;
  }

  .hoofdnav__link:hover::after,
  .hoofdnav__link:focus-visible::after {
    width: 100%;
  }

  .hoofdnav__cta {
    margin-top: 0;
    margin-left: var(--maat-2);
  }

  .hoofdnav__cta .knop {
    font-size: 1rem;
    padding: 0.6rem 1.1rem;
  }

  .hero__inner {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
    gap: var(--maat-7);
  }

  .hero {
    padding-block: var(--maat-8) var(--maat-9);
  }

  .objectkaart {
    position: sticky;
    top: 6rem;
  }

  .raster--drie {
    grid-template-columns: repeat(3, 1fr);
  }

  .raster--vier {
    grid-template-columns: repeat(2, 1fr);
  }

  .kaarten {
    grid-template-columns: repeat(3, 1fr);
  }

  .verder__lijst {
    grid-template-columns: repeat(3, 1fr);
  }

  .tarieven {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--maat-5);
  }

  .contact__inner {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--maat-7);
    align-items: start;
  }

  .voet__raster {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--maat-7) var(--maat-6);
  }

  .plank {
    padding-block: var(--maat-8);
  }

  .artikel__body {
    font-size: 1.1rem;
  }

  .artikel-kop__titel {
    max-width: 20ch;
  }
}

/* 23. Breekpunt 1200px
   ------------------------------------------------------------------------ */

@media (min-width: 1200px) {
  :root {
    --rand: 2.5rem;
  }

  .raster--vier {
    grid-template-columns: repeat(4, 1fr);
  }

  .voet__raster {
    grid-template-columns: 1.6fr 0.9fr 1fr 1fr 1.3fr;
  }

  .hero__inner {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--maat-8);
  }

  .artikel__inner {
    display: grid;
    grid-template-columns: minmax(0, var(--bak-smal)) 1fr;
    column-gap: var(--maat-8);
  }

  .artikel-kop,
  .artikel-hero,
  .artikel__body,
  .auteur-blok,
  .verder {
    grid-column: 1;
  }

  .verder__lijst {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 24. Afdruk
   ------------------------------------------------------------------------ */

@media print {
  body {
    background: #ffffff;
    color: #000000;
  }

  .kop,
  .voet,
  .hero__acties,
  .formulier,
  .navknop {
    display: none !important;
  }

  .artikel__body {
    max-width: none;
    font-size: 11pt;
  }

  a {
    color: #000000;
    text-decoration: underline;
  }
}

/* 25. Binnenpagina's: auteur, kennisbank, juridisch en overzicht
   Toegevoegd na de homepage. Alleen nieuwe klassen, geen wijziging van
   bestaande regels.
   ------------------------------------------------------------------------ */

.paginakop {
  max-width: 52rem;
  margin-bottom: var(--maat-6);
  padding-bottom: var(--maat-4);
  border-bottom: 1px solid var(--lijn);
  position: relative;
}

.paginakop::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 5.5rem;
  height: 2px;
  background: var(--goud);
}

.paginakop h1 {
  margin-bottom: var(--maat-3);
}

.paginakop .objectlabel {
  margin-bottom: var(--maat-4);
}

.paginakop__staart {
  font-size: 1.12rem;
  color: var(--inkt-zacht);
  margin-bottom: 0;
  max-width: 46rem;
}

.metaregel {
  font-family: var(--font-tekst);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs-500);
  margin-top: var(--maat-5);
  padding-top: var(--maat-3);
  border-top: 1px dotted var(--lijn);
}

/* wegwijzer: kleine inhoudsopgave boven lange juridische teksten */
.wegwijzer {
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--goud);
  border-radius: var(--radius-1);
  padding: var(--maat-4) var(--maat-5);
  margin-bottom: var(--maat-6);
  max-width: var(--bak-smal);
}

.wegwijzer h2 {
  font-size: 1.15rem;
  letter-spacing: var(--label-spatie);
  margin-bottom: var(--maat-3);
  color: var(--grijs-700);
}

.wegwijzer ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
  counter-reset: wegwijzer;
}

.wegwijzer li {
  margin: 0;
  counter-increment: wegwijzer;
  padding-left: 2.2rem;
  position: relative;
  font-size: 0.96rem;
}

.wegwijzer li::before {
  content: counter(wegwijzer, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-kop);
  font-size: 1rem;
  color: var(--goud);
  letter-spacing: 0.04em;
}

.wegwijzer a {
  color: var(--grijs-800);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.wegwijzer a:hover {
  color: var(--kastanje);
  border-bottom-color: var(--goud);
}

/* notitie: uitgelicht kader in lopende tekst, in de vorm van een depotkaartje */
.notitie {
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--kastanje);
  border-radius: var(--radius-1);
  padding: var(--maat-5);
  margin: var(--maat-5) 0;
}

.notitie h3 {
  margin-top: 0;
  margin-bottom: var(--maat-2);
}

.notitie p:last-child,
.notitie ul:last-child {
  margin-bottom: 0;
}

/* tabellen buiten de artikelopmaak */
.tabelwikkel {
  overflow-x: auto;
  margin: var(--maat-5) 0;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-1);
  background: var(--grond-kaart);
}

.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 32rem;
}

.tabel th,
.tabel td {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--lijn);
  vertical-align: top;
}

.tabel th {
  font-family: var(--font-tekst);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--grijs-600);
  background: var(--papier-warm);
  border-bottom-color: var(--lijn-goud);
}

.tabel tbody tr:last-child td {
  border-bottom: 0;
}

/* auteurspagina: portret in lijst, tekst ernaast */
.auteurkop {
  display: grid;
  gap: var(--maat-5);
  align-items: start;
  margin-bottom: var(--maat-6);
}

.auteurkop__portret {
  margin: 0;
  max-width: 17rem;
}

.auteurkop__lijst {
  border: 1px solid var(--lijn-goud);
  border-radius: var(--radius-1);
  padding: 0.5rem;
  background: var(--grond-kaart);
  box-shadow: var(--schaduw-plank);
}

.auteurkop__foto {
  width: 100%;
  border-radius: var(--radius-0);
  filter: saturate(0.85) contrast(1.02);
}

.auteurkop__bijschrift {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grijs-500);
  margin-top: var(--maat-3);
  padding-top: var(--maat-2);
  border-top: 1px dotted var(--lijn);
}

.auteurkop__tekst > p:first-child {
  font-size: 1.14rem;
  color: var(--grijs-700);
}

.auteurkop__tekst p:last-child {
  margin-bottom: 0;
}

/* profiellinks: elke link als objectlabel op een plank */
.profiellinks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--maat-2);
}

.profiellinks li {
  margin: 0;
}

.profiellinks a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--grijs-800);
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--goud-waas);
  border-radius: var(--radius-1);
  padding: 0.65rem 0.9rem;
  transition: border-color var(--overgang), transform var(--overgang),
    background-color var(--overgang);
}

.profiellinks a:hover {
  border-left-color: var(--kastanje);
  background: var(--papier-wit);
  transform: translateX(3px);
  color: var(--kastanje);
}

.profiellinks__net {
  font-family: var(--font-kop);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--goud);
  min-width: 6.5rem;
}

.profiellinks__wat {
  font-size: 0.95rem;
  color: var(--inkt-zacht);
}

.profiellinks a:hover .profiellinks__wat {
  color: var(--kastanje);
}

/* overzichtsplank: gegroepeerde links op de sitemap */
.overzicht {
  display: grid;
  gap: var(--maat-5);
  margin-bottom: var(--maat-6);
}

.overzicht__vak {
  background: var(--grond-kaart);
  border: 1px solid var(--lijn);
  border-bottom: 3px solid var(--goud-waas);
  border-radius: var(--radius-1);
  padding: var(--maat-5);
}

.overzicht__vak h2 {
  font-size: 1.5rem;
  margin-bottom: var(--maat-3);
}

.overzicht__vak .linklijst {
  margin-bottom: 0;
}

.overzicht__uitleg {
  color: var(--inkt-zacht);
  font-size: 0.95rem;
}

/* rubrieksregel onder een artikelkaart in de kennisbank */
.kaart__rubriek {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--label-spatie);
  text-transform: uppercase;
  color: var(--kastanje);
}

.kaart__rubriek::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border: 1px solid var(--goud);
  border-radius: 50%;
}

/* bevestigingspagina */
.bevestiging {
  background: var(--grond-kaart);
  border: 1px solid var(--lijn-goud);
  border-top: 4px solid var(--kastanje);
  border-radius: var(--radius-2);
  padding: var(--maat-5);
  margin-bottom: var(--maat-6);
  max-width: var(--bak-smal);
  box-shadow: var(--schaduw-plank);
}

.bevestiging p:last-child {
  margin-bottom: 0;
}

.bevestiging__zegel {
  font-family: var(--font-kop);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--goud);
  display: block;
  margin-bottom: var(--maat-2);
}

@media (min-width: 640px) {
  .overzicht {
    grid-template-columns: repeat(2, 1fr);
  }

  .profiellinks {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .auteurkop {
    grid-template-columns: 17rem 1fr;
    gap: var(--maat-7);
  }

  .overzicht {
    grid-template-columns: repeat(3, 1fr);
  }

  .paginakop h1 {
    max-width: 22ch;
  }
}

@media (min-width: 1200px) {
  .profiellinks {
    grid-template-columns: repeat(2, 1fr);
  }
}