/* ==========================================================================
   Verenigingsdienst, thema "clubbord"
   Palet: verenigingsrood, shirtwit, grasgroen, houten bar bruin.
   Opbouw: mobiel eerst, daarna 640px, 900px en 1200px.
   ========================================================================== */

:root {
  /* Clubkleuren */
  --rood: #c8102e;
  --rood-diep: #8f0b20;
  --rood-zacht: #fbe9ec;
  --groen: #1e7a3c;
  --groen-diep: #0f3b21;
  --groen-zacht: #e6f2e9;
  --hout: #6b4423;
  --hout-licht: #efe1cf;
  --hout-lijn: #d9c3a5;
  --shirt: #ffffff;
  --papier: #faf7f1;
  --papier-diep: #f2ece1;
  --inkt: #1c1a17;
  --inkt-zacht: #554e44;
  --kalk: rgba(255, 255, 255, 0.82);

  /* Typografie */
  --kop-font: "Righteous", "Trebuchet MS", "Arial Black", sans-serif;
  --tekst-font: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  --tekst-maat: 1.0625rem;
  --regelhoogte: 1.68;

  /* Ritme en vorm */
  --ruimte-xs: 0.4rem;
  --ruimte-s: 0.75rem;
  --ruimte-m: 1.25rem;
  --ruimte-l: 2rem;
  --ruimte-xl: 3.25rem;
  --ruimte-xxl: 4.5rem;
  --rand: 3px;
  --rond: 6px;
  --rond-groot: 14px;
  --breedte: 1180px;
  --leesbreedte: 46rem;

  /* Schaduw als "gepind op het clubbord" */
  --schaduw-plat: 0 2px 0 rgba(28, 26, 23, 0.16);
  --schaduw-blok: 6px 6px 0 rgba(28, 26, 23, 0.14);
  --schaduw-hoog: 10px 10px 0 rgba(28, 26, 23, 0.18);

  /* Motief: clubvaantjes aan een houten koord */
  --vaantjes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='28' viewBox='0 0 72 28'%3E%3Cpath d='M0 3h72' stroke='%236b4423' stroke-width='3'/%3E%3Cpath d='M4 4h28L18 26z' fill='%23c8102e'/%3E%3Cpath d='M40 4h28L54 26z' fill='%231e7a3c'/%3E%3C/svg%3E");
  --veldlijn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='2'%3E%3Ccircle cx='80' cy='80' r='34'/%3E%3Cpath d='M0 80h160M80 0v160'/%3E%3C/g%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--papier);
  background-image:
    linear-gradient(180deg, rgba(107, 68, 35, 0.07), rgba(107, 68, 35, 0) 340px),
    repeating-linear-gradient(90deg, rgba(107, 68, 35, 0.045) 0 1px, transparent 1px 34px);
  color: var(--inkt);
  font-family: var(--tekst-font);
  font-size: var(--tekst-maat);
  line-height: var(--regelhoogte);
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--kop-font);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  margin: 0 0 var(--ruimte-s);
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 7.4vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 4.6vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 3.2vw, 1.45rem); }

p { margin: 0 0 var(--ruimte-m); }

a {
  color: var(--rood-diep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 0.16s ease, background-color 0.16s ease;
}

a:hover { color: var(--groen); }

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

strong { font-weight: 700; }

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

::selection { background: var(--rood); color: var(--shirt); }

.omhulsel {
  width: min(100% - 2rem, var(--breedte));
  margin-inline: auto;
}

.verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Skiplink */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -6rem;
  z-index: 60;
  background: var(--rood);
  color: var(--shirt);
  font-family: var(--kop-font);
  padding: 0.7rem 1.2rem;
  border: var(--rand) solid var(--shirt);
  border-radius: var(--rond);
  box-shadow: var(--schaduw-blok);
  text-decoration: none;
  transition: top 0.18s ease;
}

.skip-link:focus { top: 0.75rem; color: var(--shirt); }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--kop-font);
  font-size: 1rem;
  letter-spacing: 0.02em;
  padding: 0.85rem 1.4rem;
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond);
  text-decoration: none;
  cursor: pointer;
  background: var(--shirt);
  color: var(--inkt);
  box-shadow: var(--schaduw-plat);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.16s ease;
}

.knop:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(28, 26, 23, 0.22);
  color: var(--inkt);
}

.knop:active { transform: translate(0, 0); box-shadow: var(--schaduw-plat); }

.knop--primair { background: var(--rood); color: var(--shirt); border-color: var(--rood-diep); }
.knop--primair:hover { background: var(--rood-diep); color: var(--shirt); }

.knop--veld { background: var(--groen); color: var(--shirt); border-color: var(--groen-diep); }
.knop--veld:hover { background: var(--groen-diep); color: var(--shirt); }

.knop--kalk { background: transparent; color: var(--shirt); border-color: var(--shirt); }
.knop--kalk:hover { background: var(--shirt); color: var(--groen-diep); }

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

/* --------------------------------------------------------------------------
   Header: de clubbalk
   -------------------------------------------------------------------------- */

.clubbalk {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--shirt);
  border-bottom: var(--rand) solid var(--inkt);
  box-shadow: 0 3px 0 rgba(200, 16, 46, 0.85);
}

.clubbalk__inner {
  display: flex;
  align-items: center;
  gap: var(--ruimte-s);
  padding-block: 0.7rem;
}

.merk {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--inkt);
  margin-right: auto;
}

.merk__schild {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--rood);
  color: var(--shirt);
  font-family: var(--kop-font);
  font-size: 1.05rem;
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond) var(--rond) 45% 45%;
  box-shadow: var(--schaduw-plat);
}

.merk__naam {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.2rem;
  line-height: 1.05;
}

.merk__sub {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--hout);
}

.menuknop {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--kop-font);
  font-size: 0.95rem;
  background: var(--groen);
  color: var(--shirt);
  border: var(--rand) solid var(--groen-diep);
  border-radius: var(--rond);
  padding: 0.55rem 0.9rem;
  cursor: pointer;
}

.menuknop[hidden] { display: none; }

.menuknop__streep {
  display: block;
  width: 1.1rem;
  height: 3px;
  background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}

.hoofdnav { width: 100%; }

.hoofdnav[hidden] { display: none; }

.hoofdnav__lijst {
  list-style: none;
  margin: 0;
  padding: var(--ruimte-s) 0 var(--ruimte-m);
  display: grid;
  gap: 0.35rem;
  border-top: 2px dashed var(--hout-lijn);
}

.hoofdnav__link {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.05rem;
  color: var(--inkt);
  text-decoration: none;
  padding: 0.6rem 0.7rem;
  border-left: 5px solid var(--hout-licht);
  border-radius: 0 var(--rond) var(--rond) 0;
}

.hoofdnav__link:hover,
.hoofdnav__link:focus-visible {
  background: var(--rood-zacht);
  border-left-color: var(--rood);
  color: var(--rood-diep);
}

.hoofdnav .knop { margin-top: var(--ruimte-xs); }

/* --------------------------------------------------------------------------
   Secties als roosterblokken
   -------------------------------------------------------------------------- */

.blok {
  position: relative;
  margin-block: var(--ruimte-xl);
}

.blok__kaart {
  background: var(--shirt);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-blok);
  overflow: hidden;
}

.blok__balk {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  padding: 0.7rem 1.1rem;
  background: var(--rood);
  color: var(--shirt);
  border-bottom: var(--rand) solid var(--inkt);
}

.blok--groen .blok__balk { background: var(--groen); }
.blok--hout .blok__balk { background: var(--hout); }
.blok--diep .blok__balk { background: var(--groen-diep); }

.blok__nummer {
  font-family: var(--kop-font);
  font-size: 0.95rem;
  background: var(--shirt);
  color: var(--inkt);
  border-radius: 50%;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  flex: none;
}

.blok__label {
  font-family: var(--kop-font);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.blok__body { padding: var(--ruimte-m) 1.1rem var(--ruimte-l); }

.blok__intro {
  max-width: var(--leesbreedte);
  color: var(--inkt-zacht);
  font-size: 1.05rem;
}

.vaantjes {
  height: 28px;
  background-image: var(--vaantjes);
  background-repeat: repeat-x;
  background-position: left top;
  margin-block: var(--ruimte-l);
}

/* --------------------------------------------------------------------------
   Hero: het veld met wedstrijdschema
   -------------------------------------------------------------------------- */

.veld {
  background-color: var(--groen-diep);
  background-image: var(--veldlijn), linear-gradient(160deg, #14512c 0%, var(--groen-diep) 62%);
  background-size: 160px 160px, auto;
  color: var(--shirt);
  border-bottom: var(--rand) solid var(--inkt);
  padding-block: var(--ruimte-xl);
  position: relative;
}

.veld::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  background: repeating-linear-gradient(90deg, var(--rood) 0 42px, var(--shirt) 42px 84px);
  opacity: 0.9;
}

.veld__inner { display: grid; gap: var(--ruimte-l); }

.veld__rubriek {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--kop-font);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--rood);
  color: var(--shirt);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 2px solid var(--kalk);
  margin-bottom: var(--ruimte-m);
}

.veld__kop { color: var(--shirt); }

.veld__kop em {
  font-style: normal;
  color: #ffd7dd;
  text-decoration: underline;
  text-decoration-color: var(--rood);
  text-decoration-thickness: 6px;
  text-underline-offset: 4px;
}

.veld__belofte {
  font-size: 1.2rem;
  max-width: 34rem;
  color: #eef6f0;
}

.veld__acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-s); }

.veld__voetnoot {
  margin-top: var(--ruimte-m);
  font-size: 0.92rem;
  color: #cfe3d6;
}

.schema {
  background: var(--shirt);
  color: var(--inkt);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-hoog);
  overflow: hidden;
}

.schema__kop {
  background: var(--hout);
  color: var(--shirt);
  padding: 0.75rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--kop-font);
  letter-spacing: 0.04em;
}

.schema__badge {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--shirt);
  color: var(--hout);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

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

.schema__rij {
  display: grid;
  grid-template-columns: 4.2rem 1fr auto;
  gap: 0.5rem 0.75rem;
  align-items: center;
  padding: 0.7rem 1rem;
  border-bottom: 2px dashed var(--hout-lijn);
}

.schema__rij:last-child { border-bottom: 0; }

.schema__dag {
  font-family: var(--kop-font);
  font-size: 0.9rem;
  color: var(--hout);
  text-transform: uppercase;
}

.schema__dienst { font-size: 0.95rem; line-height: 1.35; }
.schema__dienst span { display: block; color: var(--inkt-zacht); font-size: 0.85rem; }

.schema__status {
  font-family: var(--kop-font);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 2px solid currentColor;
  white-space: nowrap;
}

.schema__status--bezet { color: var(--groen); }
.schema__status--ruil { color: var(--hout); }
.schema__status--open { color: var(--rood-diep); }

.schema__voet {
  background: var(--groen-zacht);
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  border-top: var(--rand) solid var(--inkt);
}

/* --------------------------------------------------------------------------
   Probleem, stappen, functies, voordelen
   -------------------------------------------------------------------------- */

.pijnlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ruimte-s); }

.pijnlijst li {
  background: var(--rood-zacht);
  border-left: 6px solid var(--rood);
  border-radius: 0 var(--rond) var(--rond) 0;
  padding: 0.75rem 0.9rem;
}

.pijnlijst strong { color: var(--rood-diep); }

.stappen {
  list-style: none;
  counter-reset: stap;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--ruimte-m);
}

.stap {
  counter-increment: stap;
  position: relative;
  background: var(--papier);
  border: 2px solid var(--hout-lijn);
  border-radius: var(--rond);
  padding: 1.1rem 1rem 1rem 3.4rem;
}

.stap::before {
  content: counter(stap);
  position: absolute;
  left: 0.85rem;
  top: 0.95rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  background: var(--groen);
  color: var(--shirt);
  font-family: var(--kop-font);
  border-radius: 50%;
  border: 2px solid var(--inkt);
}

.stap h3 { margin-bottom: 0.35rem; }
.stap p { margin-bottom: 0; }

.rooster { display: grid; gap: var(--ruimte-m); }

.functie {
  background: var(--papier);
  border: 2px solid var(--hout-lijn);
  border-top: 6px solid var(--groen);
  border-radius: var(--rond);
  padding: 1rem;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.functie:nth-child(2n) { border-top-color: var(--rood); }
.functie:nth-child(3n) { border-top-color: var(--hout); }
.functie:hover { transform: translateY(-3px); border-color: var(--inkt); }
.functie h3 { margin-bottom: 0.3rem; }
.functie p { margin-bottom: 0; font-size: 0.98rem; color: var(--inkt-zacht); }

.voordelen { display: grid; gap: var(--ruimte-m); }

.voordeel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: start;
  background: var(--groen-zacht);
  border-radius: var(--rond);
  padding: 1rem;
  border: 2px solid #c9e2d1;
}

.voordeel__vaan {
  width: 1.6rem;
  height: 2rem;
  background: var(--groen);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  flex: none;
}

.voordeel:nth-child(2n) { background: var(--rood-zacht); border-color: #f0cdd4; }
.voordeel:nth-child(2n) .voordeel__vaan { background: var(--rood); }
.voordeel:nth-child(3n) { background: var(--hout-licht); border-color: var(--hout-lijn); }
.voordeel:nth-child(3n) .voordeel__vaan { background: var(--hout); }
.voordeel h3 { margin-bottom: 0.25rem; }
.voordeel p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Vertrouwen
   -------------------------------------------------------------------------- */

.eerlijk { display: grid; gap: var(--ruimte-m); }

.eerlijk__kolom {
  background: var(--papier);
  border: 2px solid var(--hout-lijn);
  border-radius: var(--rond);
  padding: 1rem;
}

.eerlijk__kolom h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: 3px solid var(--hout-licht);
}

.eerlijk__kolom ul { margin: 0.8rem 0 0; padding-left: 1.15rem; }
.eerlijk__kolom li { margin-bottom: 0.45rem; }

.eerlijk--wel { border-top: 6px solid var(--groen); }
.eerlijk--niet { border-top: 6px solid var(--rood); }

.praktijk {
  margin-top: var(--ruimte-m);
  background: var(--hout-licht);
  border: 2px dashed var(--hout);
  border-radius: var(--rond);
  padding: 1rem;
}

.praktijk__label {
  display: inline-block;
  font-family: var(--kop-font);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--hout);
  color: var(--shirt);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------------------
   Tarieven
   -------------------------------------------------------------------------- */

.tarieven { display: grid; gap: var(--ruimte-m); }

.tarief {
  display: flex;
  flex-direction: column;
  background: var(--shirt);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-plat);
  overflow: hidden;
}

.tarief__kop {
  background: var(--hout-licht);
  border-bottom: 2px solid var(--hout-lijn);
  padding: 0.9rem 1rem;
}

.tarief__naam { font-family: var(--kop-font); font-size: 1.35rem; }

.tarief__prijs {
  font-family: var(--kop-font);
  font-size: 2.4rem;
  color: var(--rood-diep);
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin-top: 0.3rem;
}

.tarief__prijs small {
  font-family: var(--tekst-font);
  font-size: 0.92rem;
  color: var(--inkt-zacht);
}

.tarief__lijst { list-style: none; margin: 0; padding: 1rem; display: grid; gap: 0.5rem; flex: 1; }

.tarief__lijst li { position: relative; padding-left: 1.5rem; }

.tarief__lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.7rem;
  height: 0.9rem;
  background: var(--groen);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
}

.tarief__actie { padding: 0 1rem 1.1rem; }

.tarief--uitgelicht { border-color: var(--rood); box-shadow: var(--schaduw-hoog); }
.tarief--uitgelicht .tarief__kop { background: var(--rood); color: var(--shirt); border-bottom-color: var(--rood-diep); }
.tarief--uitgelicht .tarief__prijs { color: var(--shirt); }
.tarief--uitgelicht .tarief__prijs small { color: #ffd7dd; }

.tarief__tip {
  display: inline-block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--kop-font);
  background: var(--shirt);
  color: var(--rood-diep);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.35rem;
}

.tarieven__noot { margin-top: var(--ruimte-m); font-size: 0.95rem; color: var(--inkt-zacht); }

/* --------------------------------------------------------------------------
   Vragen
   -------------------------------------------------------------------------- */

.vragen { display: grid; gap: 0.65rem; }

.vraag {
  background: var(--papier);
  border: 2px solid var(--hout-lijn);
  border-radius: var(--rond);
  overflow: hidden;
}

.vraag[open] { border-color: var(--groen); background: var(--shirt); }

.vraag__kop {
  cursor: pointer;
  list-style: none;
  font-family: var(--kop-font);
  font-size: 1.05rem;
  padding: 0.85rem 2.6rem 0.85rem 1rem;
  position: relative;
}

.vraag__kop::-webkit-details-marker { display: none; }

.vraag__kop::after {
  content: "+";
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--rood);
  transition: transform 0.2s ease;
}

.vraag[open] .vraag__kop::after { content: "-"; color: var(--groen); }

.vraag__kop:hover { background: var(--rood-zacht); }

.vraag__antwoord { padding: 0 1rem 1rem; border-top: 2px dashed var(--hout-lijn); }
.vraag__antwoord p { margin: 0.85rem 0 0; }

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

.kaarten { display: grid; gap: var(--ruimte-m); }

.kaart {
  display: flex;
  flex-direction: column;
  background: var(--shirt);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  overflow: hidden;
  box-shadow: var(--schaduw-plat);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.kaart:hover { transform: translate(-3px, -3px); box-shadow: var(--schaduw-blok); }

.kaart__foto { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; border-bottom: var(--rand) solid var(--inkt); }

.kaart__body { padding: 0.9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }

.kaart__label {
  align-self: flex-start;
  font-family: var(--kop-font);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: var(--groen);
  color: var(--shirt);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}

.kaart__titel {
  font-size: 1.12rem;
  margin: 0;
  line-height: 1.28;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.kaart__titel a { color: var(--inkt); text-decoration: none; }
.kaart__titel a:hover { color: var(--rood-diep); text-decoration: underline; }
.kaart__tekst { margin: 0; font-size: 0.97rem; color: var(--inkt-zacht); }
.kaart__meta { margin-top: auto; font-size: 0.85rem; color: var(--hout); letter-spacing: 0.03em; }

.meerlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: var(--ruimte-m);
  font-family: var(--kop-font);
}

/* --------------------------------------------------------------------------
   Contact en formulier
   -------------------------------------------------------------------------- */

.contactvak { display: grid; gap: var(--ruimte-l); }

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

.contactvak__wijzer {
  background: var(--groen-zacht);
  border-left: 6px solid var(--groen);
  border-radius: 0 var(--rond) var(--rond) 0;
  padding: 0.85rem 1rem;
  font-size: 0.97rem;
}

.formulier {
  background: var(--papier);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-blok);
  padding: 1.1rem;
  display: grid;
  gap: 0.35rem;
}

.formulier label {
  font-family: var(--kop-font);
  font-size: 0.95rem;
  margin-top: 0.6rem;
}

.formulier input,
.formulier select,
.formulier textarea {
  font-family: var(--tekst-font);
  font-size: 1rem;
  color: var(--inkt);
  background: var(--shirt);
  border: 2px solid var(--hout-lijn);
  border-radius: var(--rond);
  padding: 0.65rem 0.7rem;
  width: 100%;
}

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

.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus {
  border-color: var(--groen);
  outline: 3px solid rgba(30, 122, 60, 0.35);
  outline-offset: 1px;
}

.formulier .knop { margin-top: var(--ruimte-m); }

.formulier__klein { font-size: 0.87rem; color: var(--inkt-zacht); margin: 0.7rem 0 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.voetbord {
  margin-top: var(--ruimte-xl);
  background: var(--groen-diep);
  background-image: var(--veldlijn);
  background-size: 200px 200px;
  color: #eaf2ec;
  border-top: var(--rand) solid var(--inkt);
}

.voetbord::before {
  content: "";
  display: block;
  height: 28px;
  background-image: var(--vaantjes);
  background-repeat: repeat-x;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25));
}

.voetbord a { color: #ffffff; text-decoration-color: rgba(255, 255, 255, 0.45); }
.voetbord a:hover { color: #ffd7dd; }

.voetbord__grid { display: grid; gap: var(--ruimte-l); padding-block: var(--ruimte-xl) var(--ruimte-l); }

.voetkolom__kop {
  font-family: var(--kop-font);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shirt);
  padding-bottom: 0.5rem;
  margin-bottom: 0.8rem;
  border-bottom: 3px solid var(--rood);
}

.voetlijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.voetlijst a { text-decoration: none; overflow-wrap: break-word; hyphens: auto; }
.voetlijst a:hover { text-decoration: underline; }

.voetbord__merk { max-width: 24rem; }
.voetbord__merk p { color: #d6e5da; }

.voetcontact {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--rond);
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  font-family: var(--kop-font);
  font-size: 0.95rem;
}

.netwerk {
  background: rgba(0, 0, 0, 0.22);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--rond-groot);
  padding: 1rem;
}

.netwerk .voetkolom__kop { border-bottom-color: var(--hout-licht); }

.netwerk__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }

.netwerk__lijst a {
  display: block;
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.4;
  padding: 0.55rem 0.7rem 0.55rem 1.6rem;
  border-radius: var(--rond);
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  transition: background-color 0.16s ease, transform 0.16s ease;
}

.netwerk__lijst a::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.75rem;
  width: 0.6rem;
  height: 0.8rem;
  background: var(--rood);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

.netwerk__lijst li:nth-child(2n) a::before { background: var(--hout-licht); }
.netwerk__lijst li:nth-child(3n) a::before { background: #8ed19f; }

.netwerk__lijst a:hover { background: rgba(255, 255, 255, 0.16); transform: translateX(3px); }

.voetbalk {
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  padding-block: var(--ruimte-m);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #cfe0d5;
}

/* --------------------------------------------------------------------------
   Artikelopmaak van de generator
   -------------------------------------------------------------------------- */

.kruimels { padding-block: var(--ruimte-m) 0; }

.kruimels__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  font-size: 0.87rem;
  color: var(--inkt-zacht);
}

.kruimels__item { display: flex; align-items: center; gap: 0.6rem; }

.kruimels__item + .kruimels__item::before {
  content: "";
  width: 0.45rem;
  height: 0.6rem;
  background: var(--hout);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
  flex: none;
}

.kruimels__item a { color: var(--hout); text-decoration: none; }
.kruimels__item a:hover { color: var(--rood-diep); text-decoration: underline; }

.artikel { padding-block: var(--ruimte-m) var(--ruimte-xl); }

.artikel__inner { width: min(100% - 2rem, 52rem); margin-inline: auto; }

.artikel-kop {
  background: var(--shirt);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-blok);
  padding: 1.2rem 1.1rem;
  margin-bottom: var(--ruimte-l);
}

.artikel-kop__rubriek {
  display: inline-block;
  font-family: var(--kop-font);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--rood);
  color: var(--shirt);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.7rem;
}

.artikel-kop__titel { margin-bottom: 0.7rem; }

.artikel-kop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.9rem;
  color: var(--inkt-zacht);
  border-top: 2px dashed var(--hout-lijn);
  padding-top: 0.7rem;
}

.artikel-kop__auteur { font-weight: 600; color: var(--hout); }
.artikel-kop__datum::before,
.artikel-kop__leestijd::before { content: ""; }
.artikel-kop__leestijd { color: var(--groen); font-weight: 600; }

.artikel-hero { margin-bottom: var(--ruimte-l); }

.artikel-hero__foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-blok);
}

.artikel-hero__credit {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--inkt-zacht);
}

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

.artikel__body { font-size: 1.09rem; }

.artikel__body .chapo {
  font-size: 1.18rem;
  line-height: 1.55;
  color: var(--inkt);
  background: var(--hout-licht);
  border-left: 6px solid var(--hout);
  border-radius: 0 var(--rond) var(--rond) 0;
  padding: 0.95rem 1rem;
}

.artikel__body h2 {
  margin-top: var(--ruimte-l);
  padding-bottom: 0.4rem;
  border-bottom: 4px solid var(--rood);
}

.artikel__body h3 { margin-top: var(--ruimte-m); color: var(--groen); }

.artikel__body p { margin-bottom: var(--ruimte-m); }

.artikel__body ul,
.artikel__body ol { margin: 0 0 var(--ruimte-m); padding-left: 1.4rem; }

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

.artikel__body ul { list-style: none; padding-left: 1.6rem; }

.artikel__body ul li { position: relative; }

.artikel__body ul li::before {
  content: "";
  position: absolute;
  left: -1.2rem;
  top: 0.55rem;
  width: 0.6rem;
  height: 0.8rem;
  background: var(--groen);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

.artikel__body ol li::marker { font-family: var(--kop-font); color: var(--rood-diep); }

.artikel__body blockquote {
  margin: 0 0 var(--ruimte-m);
  padding: 1rem 1.1rem;
  background: var(--groen-zacht);
  border: 2px solid #c9e2d1;
  border-left: 6px solid var(--groen);
  border-radius: 0 var(--rond) var(--rond) 0;
  font-size: 1.08rem;
}

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

.artikel__body a { color: var(--rood-diep); }
.artikel__body a:hover { color: var(--groen-diep); background: var(--rood-zacht); }

.artikel__body strong { color: var(--inkt); font-weight: 700; }

.artikel__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--ruimte-m);
  font-size: 0.97rem;
  background: var(--shirt);
  border: 2px solid var(--inkt);
  border-radius: var(--rond);
  overflow: hidden;
  display: block;
  overflow-x: auto;
}

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

.artikel__body table th {
  background: var(--hout);
  color: var(--shirt);
  font-family: var(--kop-font);
  font-weight: 400;
  letter-spacing: 0.03em;
}

.artikel__body table tr:nth-child(2n) td { background: var(--papier-diep); }

/* Auteursblok */

.auteur-blok {
  margin-top: var(--ruimte-xl);
  display: grid;
  gap: var(--ruimte-m);
  background: var(--hout-licht);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  padding: 1.2rem 1.1rem;
  box-shadow: var(--schaduw-blok);
}

.auteur-blok__foto {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: var(--rand) solid var(--shirt);
  box-shadow: var(--schaduw-plat);
}

.auteur-blok__naam { font-family: var(--kop-font); font-size: 1.25rem; margin-bottom: 0.35rem; }
.auteur-blok__bio { margin-bottom: 0.8rem; color: var(--inkt); }

.auteur-blok__links { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }

.auteur-blok__links a {
  display: inline-block;
  background: var(--shirt);
  border: 2px solid var(--hout);
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--hout);
}

.auteur-blok__links a:hover { background: var(--hout); color: var(--shirt); }

/* Verder lezen */

.verder { margin-top: var(--ruimte-xl); }

.verder__kop {
  font-family: var(--kop-font);
  font-size: 1.4rem;
  display: inline-block;
  background: var(--groen);
  color: var(--shirt);
  padding: 0.4rem 0.9rem;
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond);
  margin-bottom: var(--ruimte-m);
}

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

.verder__item {
  background: var(--shirt);
  border: 2px solid var(--inkt);
  border-radius: var(--rond-groot);
  overflow: hidden;
  box-shadow: var(--schaduw-plat);
  transition: transform 0.16s ease;
}

.verder__item:hover { transform: translateY(-3px); }

.verder__link { display: block; text-decoration: none; color: var(--inkt); }

.verder__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 2px solid var(--inkt); }

.verder__titel {
  display: block;
  font-family: var(--kop-font);
  font-size: 1.02rem;
  line-height: 1.3;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
  padding: 0.8rem 0.9rem 0.3rem;
}

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

.verder__meta { display: block; padding: 0 0.9rem 0.9rem; font-size: 0.85rem; color: var(--hout); }

/* Foutpagina */

.fout {
  background-color: var(--groen-diep);
  background-image: var(--veldlijn);
  background-size: 180px 180px;
  color: var(--shirt);
  padding-block: var(--ruimte-xxl);
  min-height: 60vh;
  display: grid;
  place-items: center;
}

.fout__inner { width: min(100% - 2rem, 40rem); text-align: center; }

.fout__code {
  font-family: var(--kop-font);
  font-size: clamp(3.5rem, 18vw, 7rem);
  line-height: 1;
  color: var(--shirt);
  text-shadow: 6px 6px 0 var(--rood);
}

.fout__titel { color: var(--shirt); margin-top: var(--ruimte-s); }
.fout__tekst { color: #d8e8dd; max-width: 32rem; margin-inline: auto; }

.fout__acties { display: flex; flex-wrap: wrap; gap: var(--ruimte-s); justify-content: center; margin-top: var(--ruimte-m); }

.fout__knop {
  display: inline-flex;
  align-items: center;
  font-family: var(--kop-font);
  background: var(--rood);
  color: var(--shirt);
  border: var(--rand) solid var(--shirt);
  border-radius: var(--rond);
  padding: 0.8rem 1.3rem;
  text-decoration: none;
}

.fout__knop:hover { background: var(--shirt); color: var(--rood-diep); }

.fout__link { color: var(--shirt); font-size: 0.95rem; align-self: center; }

/* --------------------------------------------------------------------------
   Losse pagina's (auteur, blog, juridisch)
   -------------------------------------------------------------------------- */

.pagina { padding-block: var(--ruimte-l) var(--ruimte-xl); }

.pagina__kop {
  background: var(--shirt);
  border: var(--rand) solid var(--inkt);
  border-left: 10px solid var(--rood);
  border-radius: var(--rond-groot);
  padding: 1.2rem 1.1rem;
  box-shadow: var(--schaduw-blok);
  margin-bottom: var(--ruimte-l);
}

.pagina__kop p { margin-bottom: 0; color: var(--inkt-zacht); max-width: var(--leesbreedte); }

.prosa { max-width: var(--leesbreedte); }
.prosa h2 { margin-top: var(--ruimte-l); padding-bottom: 0.35rem; border-bottom: 4px solid var(--groen); }
.prosa h3 { margin-top: var(--ruimte-m); color: var(--hout); }
.prosa ul, .prosa ol { padding-left: 1.4rem; margin-bottom: var(--ruimte-m); }
.prosa li { margin-bottom: 0.45rem; }

.gegevenslijst {
  display: grid;
  gap: 0.2rem 1rem;
  background: var(--shirt);
  border: 2px solid var(--hout-lijn);
  border-radius: var(--rond);
  padding: 1rem;
  margin-bottom: var(--ruimte-m);
}

.gegevenslijst dt { font-family: var(--kop-font); color: var(--hout); }
.gegevenslijst dd { margin: 0 0 0.6rem; }

/* --------------------------------------------------------------------------
   Breekpunt 640px
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  :root { --tekst-maat: 1.09rem; }

  .blok__body { padding: var(--ruimte-l) 1.6rem var(--ruimte-xl); }
  .blok__balk { padding: 0.8rem 1.6rem; }

  .rooster { grid-template-columns: repeat(2, 1fr); }
  .kaarten { grid-template-columns: repeat(2, 1fr); }
  .verder__lijst { grid-template-columns: repeat(2, 1fr); }
  .voordelen { grid-template-columns: repeat(2, 1fr); }
  .eerlijk { grid-template-columns: repeat(2, 1fr); }
  .stappen { grid-template-columns: repeat(2, 1fr); }
  .gegevenslijst { grid-template-columns: 12rem 1fr; }
  .gegevenslijst dt { margin-bottom: 0.6rem; }

  .formulier { padding: 1.6rem; }

  .auteur-blok { grid-template-columns: auto 1fr; align-items: start; padding: 1.6rem; }

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

/* --------------------------------------------------------------------------
   Breekpunt 900px
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
  .clubbalk__inner { padding-block: 0.85rem; }

  .menuknop { display: none; }

  .hoofdnav { width: auto; }
  .hoofdnav[hidden] { display: block; }

  .hoofdnav__lijst {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    border-top: 0;
    padding: 0;
  }

  .hoofdnav__link {
    border-left: 0;
    border-bottom: 4px solid transparent;
    border-radius: var(--rond) var(--rond) 0 0;
    font-size: 1rem;
    padding: 0.45rem 0.7rem;
  }

  .hoofdnav__link:hover,
  .hoofdnav__link:focus-visible { background: transparent; border-bottom-color: var(--rood); }

  .hoofdnav .knop { margin: 0 0 0 0.6rem; padding: 0.6rem 1.05rem; }

  .veld { padding-block: var(--ruimte-xxl); }
  .veld__inner { grid-template-columns: 1.15fr 0.85fr; gap: var(--ruimte-xl); align-items: center; }

  .rooster { grid-template-columns: repeat(3, 1fr); }
  .kaarten { grid-template-columns: repeat(3, 1fr); }
  .verder__lijst { grid-template-columns: repeat(3, 1fr); }
  .tarieven { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .tarief--uitgelicht { transform: translateY(-0.75rem); }

  .contactvak { grid-template-columns: 0.9fr 1.1fr; gap: var(--ruimte-xl); align-items: start; }

  .voetbord__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .netwerk { grid-column: 1 / -1; }
  .netwerk__lijst { grid-template-columns: repeat(2, 1fr); }

  .artikel__inner { width: min(100% - 3rem, 52rem); }
  .artikel__body { font-size: 1.12rem; }
}

/* --------------------------------------------------------------------------
   Breekpunt 1200px
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  .omhulsel { width: min(100% - 3rem, var(--breedte)); }

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

  .voetbord__grid { grid-template-columns: 1.5fr 0.9fr 1fr 1fr 1.4fr; }
  .netwerk { grid-column: auto; }
  .netwerk__lijst { grid-template-columns: 1fr; }

  .veld__kop { font-size: 3.6rem; }
}

/* --------------------------------------------------------------------------
   Animatie, ingetogen
   -------------------------------------------------------------------------- */

@keyframes vaanwapper {
  0%, 100% { transform: rotate(-1.5deg); }
  50% { transform: rotate(1.5deg); }
}

@keyframes fluitsignaal {
  0% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0.45); }
  70% { box-shadow: 0 0 0 12px rgba(200, 16, 46, 0); }
  100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
}

.veld__rubriek { animation: vaanwapper 5s ease-in-out infinite; transform-origin: left center; }

.schema__status--open { animation: fluitsignaal 3.2s ease-out infinite; }

@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;
  }

  .knop:hover,
  .kaart:hover,
  .functie:hover,
  .verder__item:hover,
  .netwerk__lijst a:hover { transform: none; }
}

@media print {
  .clubbalk, .voetbord, .veld__acties, .formulier { display: none; }
  body { background: #ffffff; color: #000000; }
  .blok__kaart, .artikel-kop { box-shadow: none; border-color: #000000; }
}

/* ==========================================================================
   Aanvulling: auteurspagina, blogoverzicht, sitemap, bedanktpagina
   en de losse elementen van de juridische pagina's.
   ========================================================================== */

/* Rubriekstrook boven de paginakop -------------------------------------- */

.pagina__rubriek {
  font-family: var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.8rem;
  color: var(--rood-diep);
  margin-bottom: 0.35rem;
}

/* Datumregel op de juridische pagina's ---------------------------------- */

.juridischmeta {
  display: inline-block;
  background: var(--groen-zacht);
  border-left: 5px solid var(--groen);
  border-radius: 0 var(--rond) var(--rond) 0;
  padding: 0.4rem 0.8rem;
  font-size: 0.92rem;
  color: var(--groen-diep);
  margin-bottom: var(--ruimte-m);
}

/* Tabellen binnen lopende tekst op losse pagina's ----------------------- */

.prosa table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--ruimte-m);
  font-size: 0.98rem;
}

.prosa table th,
.prosa table td {
  border: 2px solid var(--hout-lijn);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.prosa table th {
  font-family: var(--kop-font);
  background: var(--hout-licht);
  color: var(--hout);
}

/* Auteurskaart ----------------------------------------------------------- */

.auteurkaart {
  display: grid;
  gap: var(--ruimte-m);
  background: var(--shirt);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-blok);
  padding: 1.2rem 1.1rem;
  margin-bottom: var(--ruimte-l);
  position: relative;
  overflow: hidden;
}

.auteurkaart::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8px;
  background: linear-gradient(90deg, var(--rood) 0 33%, var(--shirt) 33% 66%, var(--groen) 66% 100%);
}

.auteurkaart__foto {
  width: 8.5rem;
  height: 8.5rem;
  object-fit: cover;
  border: var(--rand) solid var(--rood);
  border-radius: 50%;
  box-shadow: var(--schaduw-plat);
  background: var(--papier-diep);
}

.auteurkaart__naam {
  font-family: var(--kop-font);
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--rood-diep);
  margin-bottom: 0.2rem;
}

.auteurkaart__rol {
  font-weight: 600;
  color: var(--hout);
  margin-bottom: var(--ruimte-s);
}

.auteurkaart__tekst p:last-of-type { margin-bottom: var(--ruimte-s); }

/* Profiellinks van de auteur -------------------------------------------- */

.profiellinks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.profiellink {
  display: inline-block;
  font-family: var(--kop-font);
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--inkt);
  background: var(--papier-diep);
  border: 2px solid var(--inkt);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.profiellink:hover,
.profiellink:focus-visible {
  background: var(--rood);
  border-color: var(--rood);
  color: var(--shirt);
  transform: translateY(-2px);
}

/* Blok met de artikelenlijst --------------------------------------------- */

.artikelblok { margin-top: var(--ruimte-xl); }

.artikelblok__kop {
  display: inline-block;
  background: var(--rood);
  color: var(--shirt);
  font-size: clamp(1.35rem, 4.5vw, 1.9rem);
  border-radius: var(--rond);
  padding: 0.45rem 0.9rem;
  box-shadow: var(--schaduw-plat);
  margin-bottom: var(--ruimte-s);
}

.artikelblok__intro {
  max-width: var(--leesbreedte);
  color: var(--inkt-zacht);
  margin-bottom: var(--ruimte-m);
}

.artikelindex {
  list-style: none;
  counter-reset: dienst;
  padding: 0;
  margin: 0 0 var(--ruimte-m);
  display: grid;
  gap: 0.7rem;
}

.artikelindex__item {
  position: relative;
  background: var(--shirt);
  border: 2px solid var(--hout-lijn);
  border-left: 8px solid var(--groen);
  border-radius: var(--rond);
  padding: 0.75rem 0.9rem;
  transition: border-left-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.artikelindex__item:nth-child(2n) { border-left-color: var(--rood); }
.artikelindex__item:nth-child(3n) { border-left-color: var(--hout); }

.artikelindex__item:hover {
  transform: translateX(3px);
  box-shadow: var(--schaduw-plat);
}

.artikelindex__label {
  font-family: var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.72rem;
  color: var(--hout);
  margin-bottom: 0.2rem;
}

.artikelindex__link {
  font-family: var(--kop-font);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--inkt);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}

.artikelindex__link:hover,
.artikelindex__link:focus-visible {
  color: var(--rood-diep);
  border-bottom-color: var(--rood);
}

/* Sluitregel onder het blogoverzicht ------------------------------------- */

.blogvoet {
  max-width: var(--leesbreedte);
  margin-top: var(--ruimte-l);
  padding: 0.9rem 1rem;
  background: var(--hout-licht);
  border: 2px dashed var(--hout);
  border-radius: var(--rond);
  color: var(--inkt);
}

/* Sitemap ---------------------------------------------------------------- */

.sitemapgrid {
  display: grid;
  gap: var(--ruimte-m);
}

.sitemapgroep {
  background: var(--shirt);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-blok);
  padding: 1.1rem 1rem 1.2rem;
}

.sitemapgroep__kop {
  font-size: 1.3rem;
  color: var(--rood-diep);
  border-bottom: 4px solid var(--groen);
  padding-bottom: 0.35rem;
  margin-bottom: var(--ruimte-s);
}

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

.sitemaplijst li {
  padding: 0.4rem 0 0.4rem 1.5rem;
  border-bottom: 1px solid var(--hout-lijn);
  position: relative;
}

.sitemaplijst li:last-child { border-bottom: 0; }

.sitemaplijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 0.7rem;
  height: 0.7rem;
  background: var(--groen);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.sitemaplijst li:nth-child(2n)::before { background: var(--rood); }

.sitemaplijst a {
  color: var(--inkt);
  text-decoration: none;
  border-bottom: 2px solid var(--hout-lijn);
}

.sitemaplijst a:hover,
.sitemaplijst a:focus-visible {
  color: var(--rood-diep);
  border-bottom-color: var(--rood);
}

.sitemaplijst--artikelen a { font-family: var(--kop-font); }

.sitemaplijst__label {
  display: inline-block;
  font-size: 0.72rem;
  font-family: var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--hout);
  background: var(--hout-licht);
  border-radius: var(--rond);
  padding: 0.1rem 0.45rem;
  margin-left: 0.3rem;
  white-space: nowrap;
}

.sitemapvoet {
  max-width: var(--leesbreedte);
  margin-top: var(--ruimte-l);
  color: var(--inkt-zacht);
}

/* Bedanktpagina ----------------------------------------------------------- */

.bevestiging {
  background: var(--groen-diep);
  color: var(--shirt);
  border: var(--rand) solid var(--inkt);
  border-radius: var(--rond-groot);
  box-shadow: var(--schaduw-hoog);
  padding: 1.5rem 1.2rem;
  margin-bottom: var(--ruimte-l);
  background-image: var(--vaantjes);
  background-repeat: repeat-x;
  background-position: top left;
  padding-top: 3rem;
}

.bevestiging__vaan {
  display: inline-block;
  font-family: var(--kop-font);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  background: var(--rood);
  color: var(--shirt);
  border-radius: var(--rond);
  padding: 0.25rem 0.7rem;
  margin-bottom: var(--ruimte-s);
}

.bevestiging__kop {
  color: var(--shirt);
  font-size: clamp(1.9rem, 7vw, 3rem);
  line-height: 1.06;
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.28);
  margin-bottom: var(--ruimte-s);
}

.bevestiging__tekst {
  max-width: var(--leesbreedte);
  color: #e4f1e8;
}

.bevestiging__tekst strong { color: var(--shirt); }

.bevestiging__acties {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-s);
  margin-top: var(--ruimte-m);
  margin-bottom: 0;
}

/* Breekpunten voor de aanvullende onderdelen ----------------------------- */

@media (min-width: 640px) {
  .auteurkaart { grid-template-columns: auto 1fr; align-items: start; padding: 1.6rem; }
  .auteurkaart__foto { width: 10rem; height: 10rem; }
  .artikelindex { grid-template-columns: repeat(2, 1fr); }
  .sitemapgrid { grid-template-columns: repeat(2, 1fr); }
  .bevestiging { padding: 3.2rem 1.8rem 1.8rem; }
}

@media (min-width: 900px) {
  .sitemapgroep--breed { grid-column: 1 / -1; }
  .sitemaplijst--artikelen { columns: 2; column-gap: var(--ruimte-l); }
  .sitemaplijst--artikelen li { break-inside: avoid; }
  .artikelblok__kop { font-size: 2rem; }
}

@media (min-width: 1200px) {
  .artikelindex { grid-template-columns: repeat(3, 1fr); }
  .auteurkaart__foto { width: 11.5rem; height: 11.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .profiellink:hover,
  .artikelindex__item:hover { transform: none; }
}