/* ==========================================================================
   Spuitlogboek, huisstijl Akkerland
   Palet: kleigrijs (papier en inkt), tarwegoud (accent), gewasgroen
   (bevestiging), spuitblauw (interactie en links).
   Opbouw: perceelkaart. Brede horizontale banden als akkerstroken,
   perceelcontouren en spuitspoorlijnen als decoratie.
   Koppen in Oswald, lopende tekst in PT Sans. Mobiel eerst.
   ========================================================================== */

/* 1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* kleigrijs */
  --klei-50: #f6f3ea;
  --klei-100: #ece7d9;
  --klei-200: #ddd6c2;
  --klei-300: #c4bca4;
  --klei-400: #a49a80;
  --klei-500: #857c66;
  --klei-600: #665f4e;
  --klei-700: #4b463a;
  --klei-800: #332f27;
  --klei-900: #201e19;

  /* tarwegoud */
  --tarwe-100: #f9edc9;
  --tarwe-200: #f2d98d;
  --tarwe-300: #edc75e;
  --tarwe-500: #d8a51f;
  --tarwe-700: #8f6a0d;

  /* gewasgroen */
  --gewas-100: #dcebd2;
  --gewas-300: #8fbb74;
  --gewas-500: #4a7c3a;
  --gewas-700: #2c4c22;

  /* spuitblauw */
  --spuit-100: #d7eaf2;
  --spuit-300: #6fb6cf;
  --spuit-500: #1d6f8e;
  --spuit-700: #0e4a61;

  /* rollen */
  --papier: var(--klei-50);
  --papier-diep: var(--klei-100);
  --inkt: var(--klei-900);
  --inkt-zacht: var(--klei-700);
  --inkt-licht: var(--klei-600);
  --lijn: var(--klei-200);
  --lijn-sterk: var(--klei-300);
  --accent: var(--tarwe-500);
  --accent-tekst: var(--tarwe-700);
  --link: var(--spuit-700);
  --link-hover: var(--spuit-500);
  --groen: var(--gewas-500);
  --groen-diep: var(--gewas-700);

  /* typografie */
  --kop: "Oswald", "Helvetica Neue", Arial, sans-serif;
  --tekst: "PT Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --schaal-1: 0.8125rem;
  --schaal-2: 0.9375rem;
  --schaal-3: 1.0625rem;
  --schaal-4: 1.25rem;
  --schaal-5: 1.5rem;
  --schaal-6: 1.9rem;
  --schaal-7: 2.4rem;
  --schaal-8: 3rem;

  /* ritme */
  --strook: 1.15rem;
  --strook-2: 2rem;
  --strook-3: 3rem;
  --strook-4: 4.5rem;
  --breedte: 1220px;
  --smal: 720px;
  --rand: 3px;
  --ronding: 4px;
  --schaduw: 0 1px 0 var(--lijn-sterk), 0 10px 26px rgba(32, 30, 25, 0.08);
  --schaduw-diep: 0 2px 0 var(--klei-400), 0 18px 40px rgba(32, 30, 25, 0.16);

  /* motief: spuitsporen en perceelcontouren */
  --spuitspoor: repeating-linear-gradient(
    90deg,
    rgba(133, 124, 102, 0.32) 0 1px,
    transparent 1px 26px
  );
  --spuitspoor-licht: repeating-linear-gradient(
    90deg,
    rgba(246, 243, 234, 0.22) 0 1px,
    transparent 1px 26px
  );
  --perceelcontour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='190' viewBox='0 0 260 190'%3E%3Cg fill='none' stroke='%23857c66' stroke-width='1.3'%3E%3Cpath d='M10 16 L128 6 L250 30 L244 100 L102 114 L14 92 Z'/%3E%3Cpath d='M14 92 L102 114 L94 182 L20 174 Z'/%3E%3Cpath d='M102 114 L244 100 L250 178 L94 182 Z'/%3E%3C/g%3E%3C/svg%3E");
  --perceelcontour-licht: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='190' viewBox='0 0 260 190'%3E%3Cg fill='none' stroke='%23f6f3ea' stroke-width='1.3'%3E%3Cpath d='M10 16 L128 6 L250 30 L244 100 L102 114 L14 92 Z'/%3E%3Cpath d='M14 92 L102 114 L94 182 L20 174 Z'/%3E%3Cpath d='M102 114 L244 100 L250 178 L94 182 Z'/%3E%3C/g%3E%3C/svg%3E");
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--papier);
  background-image: var(--perceelcontour);
  background-repeat: repeat;
  background-size: 520px auto;
  color: var(--inkt);
  font-family: var(--tekst);
  font-size: var(--schaal-3);
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--papier);
  opacity: 0.9;
  z-index: -2;
  pointer-events: none;
}

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

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

h1 { font-size: var(--schaal-7); }
h2 { font-size: var(--schaal-6); }
h3 { font-size: var(--schaal-4); font-weight: 500; }

p { margin: 0 0 var(--strook); }

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.18s ease, background-color 0.18s ease;
}

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

strong { font-weight: 700; color: var(--klei-800); }

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

.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--klei-900);
  color: var(--klei-50);
  font-family: var(--kop);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
  color: var(--tarwe-300);
}

/* 3. Stroken en banden (perceelkaart-opbouw)
   -------------------------------------------------------------------------- */

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

.band {
  position: relative;
  padding-block: var(--strook-3);
  border-top: var(--rand) solid var(--klei-900);
}

.band + .band { border-top-color: var(--lijn-sterk); }

.band::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 10px;
  background-image: var(--spuitspoor);
  opacity: 0.55;
  pointer-events: none;
}

.band--klei { background: var(--klei-100); }
.band--tarwe { background: linear-gradient(180deg, var(--tarwe-100), var(--klei-50)); }
.band--gewas { background: var(--gewas-100); }

.band--donker {
  background: var(--klei-900);
  color: var(--klei-100);
  border-top-color: var(--tarwe-500);
}

.band--donker::before { background-image: var(--spuitspoor-licht); opacity: 0.5; }
.band--donker h2,
.band--donker h3 { color: var(--klei-50); }
.band--donker a { color: var(--spuit-300); }
.band--donker a:hover { color: var(--tarwe-300); }
.band--donker strong { color: var(--tarwe-200); }

.perceellabel {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--kop);
  font-size: var(--schaal-1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-tekst);
  margin: 0 0 0.85rem;
}

.perceellabel::before {
  content: "";
  width: 34px;
  height: 0;
  border-top: 2px solid var(--accent);
}

.band--donker .perceellabel { color: var(--tarwe-300); }
.band--donker .perceellabel::before { border-top-color: var(--tarwe-300); }

.leidzin {
  font-size: var(--schaal-4);
  color: var(--inkt-zacht);
  max-width: 62ch;
}

.band--donker .leidzin { color: var(--klei-200); }

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--kop);
  font-size: var(--schaal-2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: 2px solid var(--klei-900);
  border-radius: var(--ronding);
  background: var(--klei-50);
  color: var(--klei-900);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.knop:hover { transform: translateY(-2px); box-shadow: var(--schaduw-diep); color: var(--klei-900); }
.knop:active { transform: translateY(0); }

.knop--primair {
  background: var(--tarwe-500);
  border-color: var(--klei-900);
  color: var(--klei-900);
  box-shadow: 4px 4px 0 var(--klei-900);
}

.knop--primair:hover { background: var(--tarwe-300); box-shadow: 6px 6px 0 var(--klei-900); }

.knop--blauw {
  background: var(--spuit-700);
  border-color: var(--spuit-700);
  color: var(--klei-50);
}

.knop--blauw:hover { background: var(--spuit-500); border-color: var(--spuit-500); color: #fff; }

.knop--rand { background: transparent; }
.knop--rand:hover { background: var(--klei-200); }

.band--donker .knop--rand { border-color: var(--klei-300); color: var(--klei-50); }
.band--donker .knop--rand:hover { background: var(--klei-800); color: var(--tarwe-200); }

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

.site-kop {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--klei-900);
  color: var(--klei-50);
  border-bottom: var(--rand) solid var(--tarwe-500);
}

.site-kop__inner {
  width: min(100% - 2rem, var(--breedte));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 68px;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--klei-50);
}

.merk__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid var(--tarwe-500);
  border-radius: var(--ronding);
  background: linear-gradient(160deg, var(--klei-800), var(--klei-900));
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: var(--tarwe-300);
}

.merk__naam {
  font-family: var(--kop);
  font-weight: 600;
  font-size: 1.28rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.merk__claim {
  display: block;
  font-family: var(--tekst);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--klei-300);
  margin-top: 0.2rem;
}

.menuknop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 2px solid var(--klei-600);
  border-radius: var(--ronding);
  color: var(--klei-50);
  font-family: var(--kop);
  font-size: var(--schaal-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
}

.menuknop__streep {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--tarwe-300);
  box-shadow: 0 6px 0 var(--tarwe-300), 0 -6px 0 var(--tarwe-300);
}

.menuknop[aria-expanded="true"] { border-color: var(--tarwe-500); }

.menuknop[hidden] { display: none; }

.hoofdnav[data-mobiel="gesloten"] { display: none; }

.hoofdnav {
  width: 100%;
  order: 3;
  border-top: 1px solid var(--klei-700);
  padding-block: 0.75rem 1rem;
}

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

.hoofdnav__link {
  display: block;
  font-family: var(--kop);
  font-size: var(--schaal-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--klei-100);
  padding: 0.6rem 0.4rem;
  border-left: 3px solid transparent;
}

.hoofdnav__link:hover,
.hoofdnav__link:focus-visible {
  color: var(--tarwe-300);
  border-left-color: var(--tarwe-500);
  background: rgba(216, 165, 31, 0.08);
}

.hoofdnav__cta { margin-top: 0.6rem; }

/* 6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(178deg, var(--klei-900) 0%, var(--klei-800) 62%, var(--klei-700) 100%);
  color: var(--klei-50);
  padding-block: var(--strook-3) var(--strook-4);
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--perceelcontour-licht);
  background-size: 420px auto;
  opacity: 0.14;
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, var(--breedte));
  margin-inline: auto;
  display: grid;
  gap: var(--strook-2);
}

.hero h1 {
  color: var(--klei-50);
  font-size: clamp(2.1rem, 7vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.005em;
}

.hero h1 em {
  font-style: normal;
  color: var(--tarwe-300);
  border-bottom: 4px solid var(--gewas-500);
}

.hero__belofte {
  font-size: var(--schaal-4);
  color: var(--klei-200);
  max-width: 54ch;
}

.hero__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: var(--strook-2);
}

.hero__voet {
  margin-top: var(--strook-2);
  font-size: var(--schaal-2);
  color: var(--klei-300);
  border-top: 1px dashed var(--klei-600);
  padding-top: 0.9rem;
}

.perceelkaart {
  position: relative;
  background: var(--klei-50);
  color: var(--inkt);
  border: var(--rand) solid var(--klei-900);
  border-radius: var(--ronding);
  box-shadow: 10px 10px 0 rgba(216, 165, 31, 0.85);
  padding: 1.3rem;
}

.perceelkaart__kop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 2px solid var(--klei-900);
  padding-bottom: 0.6rem;
  margin-bottom: 1rem;
}

.perceelkaart__titel {
  font-family: var(--kop);
  font-size: var(--schaal-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.perceelkaart__tijd {
  font-family: var(--kop);
  font-size: var(--schaal-1);
  letter-spacing: 0.12em;
  color: var(--accent-tekst);
  text-transform: uppercase;
}

.veldenlijst { margin: 0; }

.veldenlijst div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px dotted var(--lijn-sterk);
}

.veldenlijst dt {
  font-family: var(--kop);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--schaal-1);
  color: var(--inkt-licht);
}

.veldenlijst dd {
  margin: 0;
  font-size: var(--schaal-2);
  color: var(--klei-800);
  text-align: right;
}

.perceelkaart__voet {
  margin: 1rem 0 0;
  font-size: var(--schaal-1);
  color: var(--inkt-licht);
}

/* 7. Inhoudsblokken
   -------------------------------------------------------------------------- */

.duo { display: grid; gap: var(--strook-2); }

.kaartlijst {
  list-style: none;
  margin: var(--strook-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--strook);
}

.knelpunt {
  background: var(--klei-50);
  border: 1px solid var(--lijn-sterk);
  border-left: 6px solid var(--gewas-500);
  border-radius: var(--ronding);
  padding: 1.1rem 1.2rem;
}

.knelpunt h3 { margin-bottom: 0.35rem; font-family: var(--kop); font-size: var(--schaal-3); text-transform: uppercase; letter-spacing: 0.06em; }
.knelpunt p { margin: 0; color: var(--inkt-zacht); font-size: var(--schaal-2); }

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

.stap {
  counter-increment: stap;
  position: relative;
  padding: 1.1rem 1.2rem 1.1rem 3.6rem;
  background: rgba(246, 243, 234, 0.06);
  border: 1px solid var(--klei-700);
  border-radius: var(--ronding);
}

.stap::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-family: var(--kop);
  font-size: var(--schaal-4);
  font-weight: 700;
  color: var(--tarwe-300);
}

.stap h3 { margin-bottom: 0.3rem; font-size: var(--schaal-3); }
.stap p { margin: 0; font-size: var(--schaal-2); }

.functies {
  display: grid;
  gap: 1px;
  margin-top: var(--strook-2);
  background: var(--lijn-sterk);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--ronding);
  overflow: hidden;
}

.functie {
  background: var(--klei-50);
  padding: 1.25rem;
  transition: background-color 0.18s ease;
}

.functie:hover { background: var(--tarwe-100); }

.functie h3 {
  font-size: var(--schaal-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}

.functie h3::before {
  content: "";
  display: block;
  width: 26px;
  border-top: 3px solid var(--spuit-500);
  margin-bottom: 0.55rem;
}

.functie p { margin: 0; font-size: var(--schaal-2); color: var(--inkt-zacht); }

.voordelen {
  list-style: none;
  margin: var(--strook-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--strook);
}

.voordeel {
  display: grid;
  gap: 0.3rem;
  padding-left: 1.6rem;
  position: relative;
}

.voordeel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 10px;
  height: 10px;
  background: var(--gewas-500);
  transform: rotate(45deg);
}

.voordeel b {
  font-family: var(--kop);
  font-weight: 600;
  font-size: var(--schaal-3);
  letter-spacing: 0.03em;
}

.voordeel span { color: var(--inkt-zacht); font-size: var(--schaal-2); }

/* Vertrouwen */
.vertrouwen__raster { display: grid; gap: var(--strook-2); margin-top: var(--strook-2); }

.vertrouwen__kolom {
  border-top: 3px solid var(--tarwe-500);
  padding-top: 0.9rem;
}

.vertrouwen__kolom h3 { font-size: var(--schaal-3); text-transform: uppercase; letter-spacing: 0.06em; }
.vertrouwen__kolom p:last-child { margin-bottom: 0; }

.eerlijk {
  list-style: none;
  margin: 0 0 var(--strook);
  padding: 0;
  font-size: var(--schaal-2);
}

.eerlijk li { padding: 0.3rem 0 0.3rem 1.5rem; position: relative; }
.eerlijk li::before {
  position: absolute;
  left: 0;
  font-family: var(--kop);
  font-weight: 700;
}
.eerlijk li[data-wel]::before { content: "+"; color: var(--gewas-300); }
.eerlijk li[data-niet]::before { content: "x"; color: var(--tarwe-300); }

.praktijk {
  margin-top: var(--strook-2);
  background: rgba(246, 243, 234, 0.07);
  border: 1px dashed var(--klei-500);
  border-radius: var(--ronding);
  padding: 1.25rem;
}

.praktijk h3 { font-size: var(--schaal-4); }
.praktijk p:last-child { margin-bottom: 0; }
.praktijk__label {
  display: inline-block;
  font-family: var(--kop);
  font-size: var(--schaal-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--klei-900);
  background: var(--tarwe-300);
  padding: 0.15rem 0.6rem;
  border-radius: 2px;
  margin-bottom: 0.7rem;
}

/* 8. Tarieven
   -------------------------------------------------------------------------- */

.tarieven {
  display: grid;
  gap: var(--strook-2);
  margin-top: var(--strook-2);
}

.tarief {
  display: flex;
  flex-direction: column;
  background: var(--klei-50);
  border: var(--rand) solid var(--klei-900);
  border-radius: var(--ronding);
  padding: 1.4rem;
  position: relative;
}

.tarief--uitgelicht {
  box-shadow: 8px 8px 0 var(--gewas-500);
}

.tarief__vlag {
  position: absolute;
  top: -0.9rem;
  left: 1.2rem;
  background: var(--gewas-500);
  color: var(--klei-50);
  font-family: var(--kop);
  font-size: var(--schaal-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.7rem;
  border-radius: 2px;
}

.tarief__naam {
  font-family: var(--kop);
  font-size: var(--schaal-5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.2rem;
}

.tarief__prijs {
  font-family: var(--kop);
  font-size: var(--schaal-8);
  font-weight: 700;
  line-height: 1;
  color: var(--klei-900);
  margin: 0.3rem 0 0.1rem;
}

.tarief__prijs sup { font-size: 1.1rem; top: -1.2rem; margin-right: 0.15rem; }
.tarief__periode { font-size: var(--schaal-1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--inkt-licht); }

.tarief__voor { font-size: var(--schaal-2); color: var(--inkt-zacht); margin: 0.8rem 0 0.6rem; }

.tarief__lijst {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0.9rem 0 0;
  border-top: 1px dotted var(--lijn-sterk);
  font-size: var(--schaal-2);
  display: grid;
  gap: 0.45rem;
}

.tarief__lijst li { padding-left: 1.3rem; position: relative; }
.tarief__lijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 12px;
  border-top: 2px solid var(--spuit-500);
}

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

.tarieven__voet { margin-top: var(--strook-2); font-size: var(--schaal-2); color: var(--inkt-zacht); }

/* 9. Vragen
   -------------------------------------------------------------------------- */

.vragen { margin-top: var(--strook-2); display: grid; gap: 0.6rem; }

.vraag {
  background: var(--klei-50);
  border: 1px solid var(--lijn-sterk);
  border-left: 5px solid var(--klei-900);
  border-radius: var(--ronding);
  padding: 0.2rem 1rem;
}

.vraag[open] { border-left-color: var(--tarwe-500); background: #fff; }

.vraag summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--kop);
  font-size: var(--schaal-3);
  letter-spacing: 0.02em;
  padding: 0.85rem 2rem 0.85rem 0;
  position: relative;
}

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

.vraag summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 0.7rem;
  font-size: 1.5rem;
  color: var(--accent-tekst);
  transition: transform 0.2s ease;
}

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

.vraag p {
  margin: 0 0 0.9rem;
  font-size: var(--schaal-2);
  color: var(--inkt-zacht);
  max-width: 72ch;
}

/* 10. Artikelkaarten
   -------------------------------------------------------------------------- */

.artikelkaarten {
  list-style: none;
  margin: var(--strook-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--strook-2);
}

.artikelkaart {
  display: flex;
  flex-direction: column;
  background: var(--klei-50);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--ronding);
  overflow: hidden;
  box-shadow: var(--schaduw);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.artikelkaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); }

.artikelkaart__foto {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-bottom: 3px solid var(--klei-900);
}

.artikelkaart__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; }

.artikelkaart__rubriek {
  font-family: var(--kop);
  font-size: var(--schaal-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-tekst);
}

.artikelkaart__titel {
  font-size: var(--schaal-4);
  margin: 0;
  line-height: 1.22;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.artikelkaart__titel a { color: var(--klei-900); text-decoration: none; }
.artikelkaart__titel a:hover { color: var(--link); text-decoration: underline; }
.artikelkaart__tekst { margin: 0; font-size: var(--schaal-2); color: var(--inkt-zacht); }
.artikelkaart__datum { font-size: var(--schaal-1); color: var(--inkt-licht); letter-spacing: 0.04em; margin-top: auto; padding-top: 0.2rem; }

.sectievoet { margin-top: var(--strook-2); }

/* 11. Contact en formulier
   -------------------------------------------------------------------------- */

.contact__raster { display: grid; gap: var(--strook-2); margin-top: var(--strook-2); }

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

.contact__mail {
  font-family: var(--kop);
  letter-spacing: 0.04em;
  font-size: var(--schaal-3);
}

.formulier {
  background: var(--klei-50);
  border: var(--rand) solid var(--klei-900);
  border-radius: var(--ronding);
  padding: 1.4rem;
  box-shadow: 10px 10px 0 var(--spuit-700);
  display: grid;
  gap: 0.35rem;
}

.formulier label {
  font-family: var(--kop);
  font-size: var(--schaal-2);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--klei-800);
  margin-top: 0.7rem;
}

.formulier input,
.formulier select,
.formulier textarea {
  font-family: var(--tekst);
  font-size: var(--schaal-3);
  color: var(--inkt);
  background: #fff;
  border: 2px solid var(--klei-400);
  border-radius: var(--ronding);
  padding: 0.65rem 0.75rem;
  width: 100%;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.formulier input:hover,
.formulier select:hover,
.formulier textarea:hover { border-color: var(--klei-600); }

.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus {
  border-color: var(--spuit-500);
  box-shadow: 0 0 0 3px var(--spuit-100);
  outline: none;
}

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

.formulier .knop { margin-top: 1.2rem; width: 100%; }

.formulier__kleine { font-size: var(--schaal-1); color: var(--inkt-licht); margin: 0.9rem 0 0; }

/* 12. Footer
   -------------------------------------------------------------------------- */

.site-voet {
  background: var(--klei-900);
  color: var(--klei-200);
  border-top: var(--rand) solid var(--tarwe-500);
  padding-block: var(--strook-3) var(--strook-2);
  position: relative;
}

.site-voet::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 12px;
  background-image: var(--spuitspoor-licht);
  opacity: 0.45;
}

.voet__raster {
  width: min(100% - 2rem, var(--breedte));
  margin-inline: auto;
  display: grid;
  gap: var(--strook-2);
}

.voet__kop {
  font-family: var(--kop);
  font-size: var(--schaal-2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tarwe-300);
  margin: 0 0 0.8rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--klei-700);
}

.voet__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: var(--schaal-2); }
.voet__lijst a { color: var(--klei-200); text-decoration: none; }
.voet__lijst a:hover { color: var(--tarwe-300); text-decoration: underline; }

.voet__merk p { font-size: var(--schaal-2); color: var(--klei-300); max-width: 34ch; }
.voet__merk .merk { margin-bottom: 0.9rem; }
.voet__contact { font-family: var(--kop); letter-spacing: 0.04em; }
.voet__contact a { color: var(--spuit-300); }

.voet__netwerk .voet__kop { color: var(--gewas-300); border-bottom-color: var(--gewas-700); }

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

.netwerklink {
  display: block;
  position: relative;
  padding: 0.6rem 0.75rem 0.6rem 1.5rem;
  background: rgba(246, 243, 234, 0.05);
  border: 1px solid var(--klei-700);
  border-radius: var(--ronding);
  color: var(--klei-100);
  font-size: var(--schaal-2);
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.netwerklink::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 1.05rem;
  width: 8px;
  height: 8px;
  background: var(--gewas-300);
  transform: rotate(45deg);
}

.netwerklink:hover {
  background: rgba(143, 187, 116, 0.14);
  border-color: var(--gewas-300);
  color: #fff;
  transform: translateX(3px);
}

.voet__balk {
  width: min(100% - 2rem, var(--breedte));
  margin: var(--strook-2) auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--klei-700);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  font-size: var(--schaal-1);
  color: var(--klei-400);
}

.voet__balk a { color: var(--klei-300); }

/* 13. Generatorklassen: artikel, kruimels, auteur, verder, fout
   -------------------------------------------------------------------------- */

.kruimels {
  background: var(--klei-100);
  border-bottom: 1px solid var(--lijn-sterk);
  padding-block: 0.7rem;
}

.kruimels__lijst {
  width: min(100% - 2rem, var(--breedte));
  margin-inline: auto;
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--schaal-1);
  color: var(--inkt-licht);
}

.kruimels__item + .kruimels__item::before { content: "/"; margin-right: 0.4rem; color: var(--klei-400); }
.kruimels__item a { color: var(--inkt-zacht); text-decoration: none; }
.kruimels__item a:hover { color: var(--link); text-decoration: underline; }

.artikel { padding-block: var(--strook-3) var(--strook-4); }
.artikel__inner { width: min(100% - 2rem, var(--breedte)); margin-inline: auto; }
.artikel__body { max-width: var(--smal); margin-inline: auto; }

.artikel-kop { max-width: var(--smal); margin: 0 auto var(--strook-2); }

.artikel-kop__rubriek {
  display: inline-block;
  font-family: var(--kop);
  font-size: var(--schaal-1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--klei-900);
  background: var(--tarwe-300);
  padding: 0.2rem 0.7rem;
  border-radius: 2px;
  margin-bottom: 0.9rem;
}

.artikel-kop__titel { font-size: clamp(1.9rem, 5.5vw, 2.9rem); font-weight: 700; margin-bottom: 0.9rem; }

.artikel-kop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  font-size: var(--schaal-1);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--kop);
  color: var(--inkt-licht);
  border-top: 2px solid var(--klei-900);
  border-bottom: 1px solid var(--lijn-sterk);
  padding-block: 0.6rem;
}

.artikel-kop__auteur { color: var(--accent-tekst); }
.artikel-kop__datum, .artikel-kop__leestijd { color: var(--inkt-licht); }

.artikel-hero { max-width: var(--breedte); margin: 0 auto var(--strook-2); }

.artikel-hero__foto {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  border: var(--rand) solid var(--klei-900);
  border-radius: var(--ronding);
}

.artikel-hero__credit {
  display: block;
  font-size: var(--schaal-1);
  color: var(--inkt-licht);
  margin-top: 0.5rem;
  text-align: right;
}

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

.chapo {
  font-size: var(--schaal-4);
  line-height: 1.55;
  color: var(--klei-800);
  border-left: 5px solid var(--tarwe-500);
  padding-left: 1rem;
  margin-bottom: var(--strook-2);
}

.artikel__body h2 {
  font-size: var(--schaal-5);
  margin-top: var(--strook-2);
  padding-top: 0.8rem;
  border-top: 2px solid var(--klei-900);
}

.artikel__body h3 { font-size: var(--schaal-4); margin-top: var(--strook); color: var(--klei-800); }
.artikel__body p { margin-bottom: var(--strook); }
.artikel__body ul, .artikel__body ol { margin: 0 0 var(--strook); padding-left: 1.3rem; }
.artikel__body li { margin-bottom: 0.4rem; }
.artikel__body ul { list-style: none; padding-left: 0; }
.artikel__body ul li { position: relative; padding-left: 1.5rem; }
.artikel__body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 9px;
  height: 9px;
  background: var(--gewas-500);
  transform: rotate(45deg);
}
.artikel__body ol { list-style: decimal; }
.artikel__body ol li::marker { font-family: var(--kop); color: var(--accent-tekst); font-weight: 600; }

.artikel__body a { color: var(--link); }
.artikel__body a:hover { color: var(--link-hover); }
.artikel__body strong { color: var(--klei-900); }

.artikel__body blockquote {
  margin: var(--strook-2) 0;
  padding: 1rem 1.2rem;
  background: var(--klei-100);
  border-left: 6px solid var(--spuit-500);
  border-radius: 0 var(--ronding) var(--ronding) 0;
  font-size: var(--schaal-3);
  color: var(--klei-800);
}

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

.artikel__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--strook-2);
  font-size: var(--schaal-2);
  display: block;
  overflow-x: auto;
}

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

.artikel__body th {
  background: var(--klei-900);
  color: var(--klei-50);
  font-family: var(--kop);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--schaal-1);
}

.artikel__body tbody tr:nth-child(even) { background: var(--klei-100); }

.auteur-blok {
  max-width: var(--smal);
  margin: var(--strook-3) auto 0;
  display: grid;
  gap: 1rem;
  background: var(--klei-100);
  border: 1px solid var(--lijn-sterk);
  border-top: 4px solid var(--tarwe-500);
  border-radius: var(--ronding);
  padding: 1.3rem;
}

.auteur-blok__foto {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--klei-900);
}

.auteur-blok__naam { font-family: var(--kop); font-size: var(--schaal-4); margin: 0 0 0.35rem; }
.auteur-blok__bio { margin: 0 0 0.6rem; font-size: var(--schaal-2); color: var(--inkt-zacht); }
.auteur-blok__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: var(--schaal-2); }

.verder { background: var(--klei-100); border-top: var(--rand) solid var(--klei-900); padding-block: var(--strook-3); }
.verder__kop {
  width: min(100% - 2rem, var(--breedte));
  margin: 0 auto var(--strook-2);
  font-size: var(--schaal-5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.verder__lijst {
  width: min(100% - 2rem, var(--breedte));
  margin-inline: auto;
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--strook-2);
}

.verder__item {
  background: var(--klei-50);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--ronding);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.verder__item:hover { transform: translateY(-3px); box-shadow: var(--schaduw-diep); }
.verder__link { display: block; text-decoration: none; color: inherit; }
.verder__foto { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 3px solid var(--klei-900); }
.verder__titel { font-family: var(--kop); font-size: var(--schaal-3); margin: 0.9rem 1rem 0.4rem; color: var(--klei-900); }
.verder__link:hover .verder__titel { color: var(--link); }
.verder__meta { display: block; margin: 0 1rem 1rem; font-size: var(--schaal-1); color: var(--inkt-licht); letter-spacing: 0.05em; text-transform: uppercase; }

.fout { padding-block: var(--strook-4); background: var(--klei-900); color: var(--klei-100); }
.fout__inner { width: min(100% - 2rem, var(--smal)); margin-inline: auto; text-align: center; }
.fout__code { font-family: var(--kop); font-size: clamp(3.5rem, 18vw, 7rem); font-weight: 700; color: var(--tarwe-300); line-height: 1; margin: 0; }
.fout__titel { color: var(--klei-50); font-size: var(--schaal-6); }
.fout__tekst { color: var(--klei-300); }
.fout__acties { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: var(--strook-2); }
.fout__knop { text-decoration: none; }
.fout__link { color: var(--spuit-300); }

/* 14. Breekpunten
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  :root { --strook-3: 3.75rem; --strook-4: 5.5rem; }

  .hero__acties .knop { min-width: 220px; }
  .kaartlijst { grid-template-columns: repeat(2, 1fr); }
  .functies { grid-template-columns: repeat(2, 1fr); }
  .voordelen { grid-template-columns: repeat(2, 1fr); gap: var(--strook-2); }
  .tarieven { grid-template-columns: repeat(2, 1fr); }
  .artikelkaarten { grid-template-columns: repeat(2, 1fr); }
  .verder__lijst { grid-template-columns: repeat(2, 1fr); }
  .voet__raster { grid-template-columns: repeat(2, 1fr); }
  .auteur-blok { grid-template-columns: auto 1fr; align-items: start; }
  .formulier { padding: 1.8rem; }
}

@media (min-width: 900px) {
  body { font-size: 1.075rem; }

  .site-kop__inner { min-height: 76px; }
  .menuknop { display: none; }

  .hoofdnav,
  .hoofdnav[data-mobiel="gesloten"] {
    display: flex;
    width: auto;
    order: 0;
    border-top: 0;
    padding-block: 0;
    align-items: center;
  }

  .hoofdnav__lijst { flex-direction: row; align-items: center; gap: 0.4rem; }

  .hoofdnav__link {
    border-left: 0;
    border-bottom: 3px solid transparent;
    padding: 0.45rem 0.7rem;
  }

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

  .hoofdnav__cta { margin: 0 0 0 0.8rem; }
  .hoofdnav__cta .knop { padding: 0.6rem 1.1rem; }

  .hero__inner { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: var(--strook-3); }
  .hero { padding-block: var(--strook-4); }

  .duo { grid-template-columns: 0.9fr 1.1fr; align-items: start; gap: var(--strook-3); }
  .stappen { grid-template-columns: repeat(2, 1fr); }
  .functies { grid-template-columns: repeat(3, 1fr); }
  .tarieven { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
  .artikelkaarten { grid-template-columns: repeat(3, 1fr); }
  .verder__lijst { grid-template-columns: repeat(3, 1fr); }
  .vertrouwen__raster { grid-template-columns: repeat(3, 1fr); }
  .contact__raster { grid-template-columns: 0.85fr 1.15fr; gap: var(--strook-3); }
  .voet__raster { grid-template-columns: 1.3fr 0.8fr 1fr 0.9fr 1.35fr; gap: var(--strook-2); }
  .formulier { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem 1.1rem; }
  .formulier label[for="bericht"],
  .formulier textarea,
  .formulier .knop,
  .formulier__kleine,
  .formulier .verborgen { grid-column: 1 / -1; }
  .kaartlijst { grid-template-columns: repeat(2, 1fr); gap: var(--strook-2); }
}

@media (min-width: 1200px) {
  :root { --strook-3: 4.5rem; --strook-4: 6.5rem; }

  .band { padding-block: var(--strook-3); }
  .hero h1 { font-size: 3.6rem; }
  .perceelkaart { padding: 1.8rem; }
  .voordelen { grid-template-columns: repeat(2, 1fr); gap: var(--strook-2) var(--strook-3); }
}

/* 15. Beweging
   -------------------------------------------------------------------------- */

@keyframes spoor {
  from { background-position-x: 0; }
  to { background-position-x: 26px; }
}

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

.band::before,
.site-voet::before { animation: spoor 5s linear infinite; }

.perceelkaart { animation: opkomen 0.6s ease both; }

[data-onthul] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-onthul="zichtbaar"] { opacity: 1; transform: none; }

@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;
  }
  [data-onthul] { opacity: 1; transform: none; }
  .knop:hover,
  .artikelkaart:hover,
  .verder__item:hover,
  .netwerklink:hover { transform: none; }
}

/* 16. Printen
   -------------------------------------------------------------------------- */

@media print {
  body { background: #fff; color: #000; }
  .site-kop, .site-voet, .hero__acties, .formulier { display: none; }
  .artikel__body a::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* 17. Pagina's naast de home: auteur, blog, juridisch, sitemap, bedankt
   -------------------------------------------------------------------------- */

.paginakop {
  position: relative;
  background: var(--klei-900);
  color: var(--klei-100);
  border-bottom: var(--rand) solid var(--tarwe-500);
  padding-block: var(--strook-3);
  background-image: var(--perceelcontour-licht);
  background-size: 420px auto;
}

.paginakop::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 10px;
  background-image: var(--spuitspoor-licht);
  opacity: 0.5;
  pointer-events: none;
}

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

.paginakop h1 { color: var(--klei-50); max-width: 26ch; }
.paginakop .perceellabel { color: var(--tarwe-300); }
.paginakop .perceellabel::before { border-top-color: var(--tarwe-300); }
.paginakop p { color: var(--klei-200); }
.paginakop a { color: var(--spuit-300); }
.paginakop a:hover { color: var(--tarwe-300); }

.paginakop__intro {
  font-size: var(--schaal-4);
  max-width: 64ch;
  color: var(--klei-200);
}

.paginakop__slot { margin-bottom: 0; }

.laatstbij {
  font-family: var(--kop);
  font-size: var(--schaal-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin: 0 0 var(--strook-2);
}

.paginakop .laatstbij { color: var(--klei-300); margin-bottom: var(--strook); }

/* Lopende tekst op de juridische pagina's */

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

.tekstkolom h2 {
  font-size: var(--schaal-5);
  margin-top: var(--strook-2);
  scroll-margin-top: 92px;
}

.tekstkolom h2:first-child { margin-top: 0; }

.tekstkolom h3 {
  font-size: var(--schaal-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--strook);
  margin-bottom: 0.4rem;
}

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

.tekstkolom ol {
  margin: 0 0 var(--strook);
  padding-left: 1.4rem;
  color: var(--inkt-zacht);
}

.tekstkolom ul {
  list-style: none;
  margin: 0 0 var(--strook);
  padding-left: 1.5rem;
  color: var(--inkt-zacht);
}

.tekstkolom li { margin-bottom: 0.4rem; }
.tekstkolom ul li { position: relative; }

.tekstkolom ul li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.62rem;
  width: 8px;
  height: 8px;
  background: var(--gewas-500);
  transform: rotate(45deg);
}

.tekstkolom > :last-child { margin-bottom: 0; }

.inhoudsopgave {
  max-width: var(--smal);
  background: var(--klei-100);
  border: 1px solid var(--lijn-sterk);
  border-left: 6px solid var(--spuit-500);
  border-radius: var(--ronding);
  padding: 1.1rem 1.2rem;
  margin: 0 0 var(--strook-2);
}

.inhoudsopgave__kop {
  font-family: var(--kop);
  font-size: var(--schaal-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.inhoudsopgave__lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
  font-size: var(--schaal-2);
}

/* Auteurspagina */

.auteurkaart {
  display: grid;
  gap: var(--strook);
  align-items: start;
  margin-top: var(--strook-2);
}

.auteurkaart__portret {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--ronding);
  border: var(--rand) solid var(--tarwe-500);
  box-shadow: 8px 8px 0 rgba(216, 165, 31, 0.2);
}

.auteurkaart__tekst > p:last-of-type { margin-bottom: 0; }

.profiellinks {
  list-style: none;
  margin: var(--strook) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.profiellink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--kop);
  font-size: var(--schaal-2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.45rem 0.95rem;
  border: 2px solid var(--klei-600);
  border-radius: var(--ronding);
  background: rgba(246, 243, 234, 0.05);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.paginakop .profiellink { color: var(--klei-50); }

.paginakop .profiellink:hover {
  background: var(--tarwe-500);
  border-color: var(--tarwe-500);
  color: var(--klei-900);
}

.profiellink::before {
  content: "";
  width: 8px;
  height: 8px;
  background: currentColor;
  transform: rotate(45deg);
}

/* Index van alle artikelen */

.artikelindex {
  list-style: none;
  margin: var(--strook-2) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--lijn-sterk);
  border: 1px solid var(--lijn-sterk);
  border-radius: var(--ronding);
  overflow: hidden;
}

.artikelindex__item { background: var(--klei-50); }

.artikelindex__link {
  display: grid;
  gap: 0.3rem;
  padding: 1rem 1.2rem;
  text-decoration: none;
  color: var(--klei-900);
  transition: background-color 0.18s ease;
}

.artikelindex__link:hover { background: var(--tarwe-100); color: var(--klei-900); }

.artikelindex__rubriek {
  font-family: var(--kop);
  font-size: var(--schaal-1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-tekst);
}

.artikelindex__titel {
  font-family: var(--kop);
  font-size: var(--schaal-4);
  font-weight: 500;
  line-height: 1.22;
  text-wrap: pretty;
}

.artikelindex__link:hover .artikelindex__titel { color: var(--link); }

.artikelindex__meta {
  font-size: var(--schaal-1);
  color: var(--inkt-licht);
  letter-spacing: 0.04em;
}

/* Colofon: gegevensregels */

.gegevens {
  max-width: var(--smal);
  margin: 0 0 var(--strook-2);
  border-top: 1px solid var(--lijn-sterk);
}

.gegevens > div {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--lijn-sterk);
}

.gegevens dt {
  font-family: var(--kop);
  font-size: var(--schaal-1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--inkt-licht);
}

.gegevens dd { margin: 0; color: var(--inkt); }

/* Sitemap */

.sitemapraster {
  display: grid;
  gap: var(--strook-2);
  margin-top: var(--strook-2);
}

.sitemapgroep {
  border-top: 3px solid var(--tarwe-500);
  padding-top: 0.9rem;
}

.sitemapgroep h2 {
  font-size: var(--schaal-4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.8rem;
}

.sitemaplijst {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: var(--schaal-2);
}

.sitemaplijst a { text-decoration: none; font-weight: 700; }
.sitemaplijst a:hover { text-decoration: underline; }

.sitemaplijst__uitleg {
  display: block;
  color: var(--inkt-licht);
  font-size: var(--schaal-1);
}

/* Bevestiging op de bedanktpagina en de knoppenrij onder een sectie */

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

.bevestiging__zegel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--kop);
  font-size: var(--schaal-2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--gewas-500);
  color: var(--klei-50);
  padding: 0.35rem 0.9rem;
  border-radius: 2px;
  margin-bottom: 0.9rem;
}

.bevestiging__zegel::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--tarwe-300);
  transform: rotate(45deg);
}

.paginacta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: var(--strook-2);
}

@media (min-width: 640px) {
  .auteurkaart { grid-template-columns: 168px 1fr; gap: var(--strook-2); }
  .auteurkaart__portret { width: 168px; height: 168px; }
  .gegevens > div { grid-template-columns: 14rem 1fr; gap: 1rem; align-items: baseline; }
  .inhoudsopgave__lijst { grid-template-columns: repeat(2, 1fr); }
  .sitemapraster { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .paginakop { padding-block: var(--strook-3); }
  .auteurkaart { grid-template-columns: 220px 1fr; gap: var(--strook-3); }
  .auteurkaart__portret { width: 220px; height: 220px; }
  .artikelindex__titel { font-size: var(--schaal-5); }
  .sitemapraster { grid-template-columns: repeat(3, 1fr); }
}

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