/* ==========================================================================
   Bijlesrapport, huisstijl "Studiekamer"
   Marineblauw, papierwit, potloodgrijs, oranje markeerstift.
   Opbouw als schoolschrift: gelinieerd papier, schriftmarges, potloodstrepen.
   Michroma voor koppen, Roboto voor lopende tekst. Mobiel eerst.
   ========================================================================== */

:root {
  /* Palet */
  --marine: #10233f;
  --marine-diep: #0a1729;
  --marine-zacht: #1c3557;
  --marine-mist: #24395b;
  --papier: #fbf8f1;
  --papier-warm: #f4eee1;
  --papier-rand: #e6ddc9;
  --potlood: #4d5563;
  --potlood-licht: #7b8494;
  --marker: #f97316;
  --marker-diep: #c2500a;
  --marker-was: rgba(249, 115, 22, 0.28);
  --marge-lijn: #d9736a;
  --liniaal: rgba(16, 35, 63, 0.10);
  --liniaal-donker: rgba(251, 248, 241, 0.09);

  /* Typografie */
  --font-kop: "Michroma", "Trebuchet MS", "Arial Black", sans-serif;
  --font-tekst: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --regel: 32px;

  /* Ruimte */
  --marge-links: 2.25rem;
  --breed: 1180px;
  --smal: 720px;
  --pad-blok: 3.25rem;

  /* Vorm */
  --radius: 3px;
  --radius-groot: 6px;
  --schaduw: 0 1px 0 var(--papier-rand), 0 10px 26px rgba(16, 35, 63, 0.09);
  --schaduw-diep: 0 18px 44px rgba(10, 23, 41, 0.22);
  --overgang: 180ms ease;
}

/* Gelinieerd papier als data-URI, gebruikt in hero en accentvlakken */
:root {
  --papierlijnen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='32'%3E%3Cpath d='M0 31.5H40' stroke='%2310233f' stroke-opacity='0.12' stroke-width='1'/%3E%3C/svg%3E");
  --potloodstreep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6'%3E%3Cpath d='M0 4.2C18 1.6 34 5.2 52 3.4 71 1.5 88 5 120 2.2' fill='none' stroke='%234d5563' stroke-opacity='0.55' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --markerveeg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='14'%3E%3Cpath d='M2 9C40 4 66 11 104 6c18-2 34 1 54-2' fill='none' stroke='%23f97316' stroke-opacity='0.75' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
}

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

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

body.thema-schrift {
  margin: 0;
  background-color: var(--papier);
  background-image: var(--papierlijnen);
  background-position: 0 0.5rem;
  color: var(--marine);
  font-family: var(--font-tekst);
  font-size: 1rem;
  line-height: var(--regel);
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-kop);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--marine);
  margin: 0 0 0.75rem;
}

h1 { font-size: clamp(1.5rem, 5.6vw, 2.6rem); line-height: 1.22; }
h2 { font-size: clamp(1.15rem, 3.4vw, 1.6rem); }
h3 { font-size: clamp(1rem, 2.4vw, 1.15rem); }

p { margin: 0 0 1rem; }

a { color: var(--marine); text-decoration-color: var(--marker); text-underline-offset: 4px; }
a:hover { color: var(--marker-diep); }

strong { font-weight: 700; }

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

::selection { background: var(--marker-was); color: var(--marine); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--marine);
  color: var(--papier);
  padding: 0.75rem 1.25rem;
  font-family: var(--font-kop);
  font-size: 0.7rem;
  text-decoration: none;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

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

/* --------------------------------------------------------------------------
   Bouwstenen: schriftmarge, potloodstreep, markeerstift
   -------------------------------------------------------------------------- */

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

.marker {
  background-image: linear-gradient(var(--marker-was), var(--marker-was));
  background-repeat: no-repeat;
  background-position: 0 78%;
  background-size: 100% 0.55em;
  padding: 0 0.15em;
}

.potloodstreep {
  border: 0;
  height: 6px;
  margin: 2.5rem 0;
  background-image: var(--potloodstreep);
  background-repeat: repeat-x;
  opacity: 0.7;
}

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-kop);
  font-size: 0.68rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  padding: 0.95rem 1.4rem;
  border-radius: var(--radius);
  text-decoration: none;
  border: 2px solid var(--marine);
  cursor: pointer;
  transition: transform var(--overgang), background-color var(--overgang), color var(--overgang), box-shadow var(--overgang);
}
.knop--vol { background: var(--marine); color: var(--papier); box-shadow: 4px 4px 0 var(--marker); }
.knop--vol:hover { background: var(--marine-diep); color: var(--papier); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--marker); }
.knop--lijn { background: transparent; color: var(--marine); }
.knop--lijn:hover { background: var(--marker-was); color: var(--marine); transform: translate(-2px, -2px); }
.knop--marker { background: var(--marker); border-color: var(--marker); color: #26150a; }
.knop--marker:hover { background: var(--marker-diep); border-color: var(--marker-diep); color: var(--papier); }

/* --------------------------------------------------------------------------
   Kop van de site
   -------------------------------------------------------------------------- */

.kopbalk {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--marine);
  color: var(--papier);
  border-bottom: 3px solid var(--marker);
  background-image: linear-gradient(90deg, transparent 0 calc(var(--marge-links) - 2px), var(--marge-lijn) calc(var(--marge-links) - 2px) calc(var(--marge-links) - 1px), transparent calc(var(--marge-links) - 1px));
}

.kopbalk__inner {
  width: min(100% - 2rem, var(--breed));
  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.65rem; text-decoration: none; color: var(--papier); }
.merk__vak {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: var(--marker);
  color: var(--marine-diep);
  font-family: var(--font-kop);
  font-size: 0.62rem;
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 rgba(251, 248, 241, 0.22);
}
.merk__naam { font-family: var(--font-kop); font-size: 0.82rem; letter-spacing: -0.02em; }
.merk:hover .merk__vak { transform: rotate(-3deg); }
.merk__vak { transition: transform var(--overgang); }

.hoofdnav { display: none; }
.hoofdnav__lijst { list-style: none; display: flex; align-items: center; gap: 1.4rem; margin: 0; padding: 0; }
.hoofdnav__link {
  color: var(--papier);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--overgang), color var(--overgang);
}
.hoofdnav__link:hover, .hoofdnav__link:focus-visible { color: var(--papier); border-bottom-color: var(--marker); }

.menuknop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 2px solid rgba(251, 248, 241, 0.4);
  color: var(--papier);
  font-family: var(--font-kop);
  font-size: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.menuknop__streep { display: block; width: 18px; height: 2px; background: var(--marker); box-shadow: 0 5px 0 var(--marker), 0 -5px 0 var(--marker); }

.mobielmenu {
  display: block;
  background: var(--marine-diep);
  border-top: 1px solid rgba(251, 248, 241, 0.14);
}
.mobielmenu[hidden] { display: none; }
.mobielmenu__lijst { list-style: none; margin: 0; padding: 0.5rem 1rem 1.25rem; }
.mobielmenu__lijst li { border-bottom: 1px dashed rgba(251, 248, 241, 0.18); }
.mobielmenu__lijst a { display: block; padding: 0.85rem 0.25rem; color: var(--papier); text-decoration: none; font-size: 1rem; }
.mobielmenu__lijst a:hover { color: var(--marker); }
.mobielmenu .knop { margin: 1rem 0.25rem 0; width: calc(100% - 0.5rem); }

/* --------------------------------------------------------------------------
   Hoofdstukken: elke sectie is een bladzijde uit het schrift
   -------------------------------------------------------------------------- */

.blad { display: block; }

.hoofdstuk {
  position: relative;
  padding: var(--pad-blok) 0;
  border-bottom: 1px solid var(--papier-rand);
}
.hoofdstuk__inner {
  width: min(100% - 2rem, var(--breed));
  margin-inline: auto;
  padding-left: var(--marge-links);
  position: relative;
}
.hoofdstuk__inner::before {
  content: "";
  position: absolute;
  left: calc(var(--marge-links) - 1.15rem);
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  background: var(--marge-lijn);
  opacity: 0.55;
}
.hoofdstuk__nummer {
  font-family: var(--font-kop);
  font-size: 0.58rem;
  color: var(--potlood-licht);
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 0.6rem;
}
.hoofdstuk__kop { margin-bottom: 0.5rem; }
.hoofdstuk__intro { max-width: 62ch; color: var(--potlood); }
.hoofdstuk--donker {
  background: var(--marine);
  color: var(--papier);
  background-image: linear-gradient(rgba(251, 248, 241, 0.045) 1px, transparent 1px);
  background-size: 100% var(--regel);
  border-bottom-color: var(--marine-diep);
}
.hoofdstuk--donker h2, .hoofdstuk--donker h3 { color: var(--papier); }
.hoofdstuk--donker .hoofdstuk__intro { color: #c9d4e4; }
.hoofdstuk--donker .hoofdstuk__nummer { color: var(--marker); }
.hoofdstuk--donker a { color: var(--papier); }
.hoofdstuk--warm { background: var(--papier-warm); }

/* --------------------------------------------------------------------------
   1. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--papier);
  background-image: var(--papierlijnen);
  background-position: 0 0.5rem;
  border-bottom: 3px solid var(--marine);
  padding: 2.5rem 0 3rem;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  left: 1.1rem;
  background: var(--marge-lijn);
  opacity: 0.5;
}
.hero__inner {
  width: min(100% - 2rem, var(--breed));
  margin-inline: auto;
  padding-left: var(--marge-links);
  display: grid;
  gap: 2rem;
}
.hero__rubriek {
  font-family: var(--font-kop);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--marker-diep);
  display: inline-block;
  border: 1px solid var(--marker);
  border-radius: var(--radius);
  padding: 0.4rem 0.6rem;
  margin-bottom: 1.1rem;
}
.hero__titel { margin-bottom: 1rem; }
.hero__belofte { font-size: 1.1rem; color: var(--potlood); max-width: 46ch; }
.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero__voetnoot { margin-top: 1.25rem; font-size: 0.85rem; color: var(--potlood-licht); }

.rapportkaart {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-left: 6px solid var(--marker);
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw);
  padding: 1.25rem 1.25rem 1.5rem;
  position: relative;
}
.rapportkaart::after {
  content: "";
  position: absolute;
  inset: auto 1.25rem 0.6rem 1.25rem;
  height: 6px;
  background-image: var(--potloodstreep);
  background-repeat: repeat-x;
  opacity: 0.5;
}
.rapportkaart__hoofd { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--marine); padding-bottom: 0.6rem; margin-bottom: 0.85rem; }
.rapportkaart__titel { font-family: var(--font-kop); font-size: 0.66rem; }
.rapportkaart__maand { font-size: 0.8rem; color: var(--potlood-licht); }
.rapportkaart__regels { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.rapportkaart__regels li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  padding: 0.45rem 0;
  border-bottom: 1px dashed var(--papier-rand);
}
.rapportkaart__regels li span:last-child { color: var(--potlood); text-align: right; }
.rapportkaart__stempel {
  display: inline-block;
  font-family: var(--font-kop);
  font-size: 0.55rem;
  color: var(--marine);
  background: var(--marker-was);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   2. Probleem
   -------------------------------------------------------------------------- */

.probleemlijst { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.probleemlijst li {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1rem 2.6rem;
  position: relative;
  box-shadow: 0 2px 0 var(--papier-rand);
}
.probleemlijst li::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.35rem;
  width: 10px;
  height: 10px;
  border: 2px solid var(--marge-lijn);
  border-radius: 2px;
}
.probleemlijst strong { display: block; font-family: var(--font-kop); font-size: 0.7rem; margin-bottom: 0.35rem; }

/* --------------------------------------------------------------------------
   3. Oplossing, stappen
   -------------------------------------------------------------------------- */

.stappen { list-style: none; counter-reset: stap; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.stappen li {
  counter-increment: stap;
  position: relative;
  padding-left: 3.25rem;
}
.stappen li::before {
  content: counter(stap, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  font-family: var(--font-kop);
  font-size: 0.62rem;
  color: var(--marine);
  background: var(--marker);
  border-radius: 50%;
}
.stappen h3 { margin-bottom: 0.3rem; }
.stappen p { color: var(--potlood); margin-bottom: 0; }
.hoofdstuk--donker .stappen p { color: #c9d4e4; }
.hoofdstuk--donker .stappen li::before { background: var(--marker); color: var(--marine-diep); }

/* --------------------------------------------------------------------------
   4. Functionaliteiten
   -------------------------------------------------------------------------- */

.functies { display: grid; gap: 1rem; margin-top: 2rem; }
.functie {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-top: 4px solid var(--marine);
  border-radius: var(--radius);
  padding: 1.2rem 1.15rem;
  transition: transform var(--overgang), box-shadow var(--overgang), border-top-color var(--overgang);
}
.functie:hover { transform: translateY(-3px); box-shadow: var(--schaduw); border-top-color: var(--marker); }
.functie__nummer { font-family: var(--font-kop); font-size: 0.55rem; color: var(--potlood-licht); display: block; margin-bottom: 0.6rem; }
.functie h3 { margin-bottom: 0.4rem; }
.functie p { color: var(--potlood); margin-bottom: 0; font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   5. Voordelen
   -------------------------------------------------------------------------- */

.voordelen { display: grid; gap: 1.1rem; margin-top: 2rem; list-style: none; padding: 0; }
.voordelen li {
  padding: 1rem 1.1rem 1rem 1.1rem;
  border-left: 4px solid var(--marker);
  background: rgba(251, 248, 241, 0.06);
}
.voordelen h3 { margin-bottom: 0.3rem; }
.voordelen p { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   6. Vertrouwen
   -------------------------------------------------------------------------- */

.vertrouwen { display: grid; gap: 1.15rem; margin-top: 2rem; }
.vertrouwen__blok {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius);
  padding: 1.2rem 1.2rem;
  position: relative;
  background-image: linear-gradient(var(--liniaal) 1px, transparent 1px);
  background-size: 100% var(--regel);
  background-position: 0 1.55rem;
}
.vertrouwen__blok h3 { margin-bottom: 0.45rem; }
.vertrouwen__blok p:last-child { margin-bottom: 0; }
.voorbeeldblok {
  margin-top: 2rem;
  border: 2px dashed var(--marge-lijn);
  border-radius: var(--radius-groot);
  padding: 1.3rem 1.2rem;
  background: var(--papier-warm);
}
.voorbeeldblok__label {
  font-family: var(--font-kop);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--marker-diep);
  display: block;
  margin-bottom: 0.6rem;
}

/* --------------------------------------------------------------------------
   7. Tarieven
   -------------------------------------------------------------------------- */

.tarieven { display: grid; gap: 1.25rem; margin-top: 2rem; }
.tarief {
  background: #fff;
  border: 2px solid var(--marine);
  border-radius: var(--radius-groot);
  padding: 1.4rem 1.3rem 1.6rem;
  display: flex;
  flex-direction: column;
}
.tarief--uitgelicht { box-shadow: 8px 8px 0 var(--marker); }
.tarief__naam { font-family: var(--font-kop); font-size: 0.78rem; margin-bottom: 0.4rem; }
.tarief__prijs { font-family: var(--font-kop); font-size: 1.5rem; line-height: 1.2; margin: 0.4rem 0 0.2rem; }
.tarief__prijs span { font-family: var(--font-tekst); font-size: 0.85rem; color: var(--potlood-licht); }
.tarief__voor { color: var(--potlood); font-size: 0.92rem; }
.tarief__lijst { list-style: none; margin: 1rem 0 1.5rem; padding: 0; flex: 1 1 auto; }
.tarief__lijst li { position: relative; padding: 0.35rem 0 0.35rem 1.5rem; font-size: 0.94rem; border-bottom: 1px dashed var(--papier-rand); }
.tarief__lijst li::before { content: ""; position: absolute; left: 0; top: 0.95rem; width: 10px; height: 2px; background: var(--marker); }
.tarief .knop { width: 100%; }
.tarief__label {
  align-self: flex-start;
  font-family: var(--font-kop);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  background: var(--marker);
  color: var(--marine-diep);
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius);
  margin-bottom: 0.7rem;
}
.tarieven__voet { margin-top: 1.5rem; font-size: 0.9rem; color: var(--potlood); }

/* --------------------------------------------------------------------------
   8. Veelgestelde vragen
   -------------------------------------------------------------------------- */

.vragen { margin-top: 2rem; max-width: var(--smal); }
.vraag {
  border-bottom: 1px solid var(--papier-rand);
  padding: 0.35rem 0;
}
.vraag > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.85rem 2.5rem 0.85rem 0;
  position: relative;
  font-family: var(--font-kop);
  font-size: 0.72rem;
  line-height: 1.55;
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 1.35rem;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--marker);
  border-bottom: 2px solid var(--marker);
  transform: rotate(45deg);
  transition: transform var(--overgang);
}
.vraag[open] > summary::after { transform: rotate(-135deg); }
.vraag > summary:hover { color: var(--marker-diep); }
.vraag__antwoord { padding: 0 0 1rem; color: var(--potlood); max-width: 66ch; }
.vraag__antwoord p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Artikelkaarten
   -------------------------------------------------------------------------- */

.kaarten { display: grid; gap: 1.4rem; margin-top: 2rem; }
.kaart {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius-groot);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--overgang), box-shadow var(--overgang);
}
.kaart:hover { transform: translateY(-4px); box-shadow: var(--schaduw); }
.kaart__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--papier-warm); }
.kaart__body { padding: 1.1rem 1.15rem 1.35rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1 1 auto; }
.kaart__rubriek {
  font-family: var(--font-kop);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: var(--marker-diep);
}
.kaart__titel {
  font-family: var(--font-kop);
  font-size: 0.72rem;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
}
.kaart__titel a { text-decoration: none; }
.kaart__titel a:hover { text-decoration: underline; }
.kaart__tekst { color: var(--potlood); font-size: 0.93rem; margin: 0; }
.kaart__meta { font-size: 0.82rem; color: var(--potlood-licht); margin-top: auto; }
.kaarten__meer { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   10. Contact en formulier
   -------------------------------------------------------------------------- */

.contactraster { display: grid; gap: 2rem; margin-top: 2rem; }
.contact__inleiding p { color: #c9d4e4; }
.contact__alternatief { font-size: 0.92rem; }

.formulier {
  background: var(--papier);
  color: var(--marine);
  border-radius: var(--radius-groot);
  padding: 1.4rem 1.25rem 1.6rem;
  border: 2px solid var(--marine-diep);
  box-shadow: 8px 8px 0 var(--marker);
  background-image: linear-gradient(var(--liniaal) 1px, transparent 1px);
  background-size: 100% var(--regel);
  background-position: 0 1.8rem;
}
.formulier label {
  display: block;
  font-family: var(--font-kop);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  margin: 1rem 0 0.4rem;
  color: var(--marine);
}
.formulier input,
.formulier select,
.formulier textarea {
  width: 100%;
  font-family: var(--font-tekst);
  font-size: 1rem;
  color: var(--marine);
  background: #fff;
  border: 1px solid var(--potlood-licht);
  border-bottom: 2px solid var(--marine);
  border-radius: var(--radius);
  padding: 0.7rem 0.75rem;
  transition: border-color var(--overgang), box-shadow var(--overgang);
}
.formulier input:hover,
.formulier select:hover,
.formulier textarea:hover { border-color: var(--marine); }
.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus {
  outline: none;
  border-color: var(--marker);
  box-shadow: 0 0 0 3px var(--marker-was);
}
.formulier textarea { resize: vertical; min-height: 8rem; }
.formulier button { margin-top: 1.5rem; width: 100%; }
.formulier__kleine-letters { font-size: 0.82rem; color: var(--potlood); margin: 1rem 0 0; }
.formulier__kleine-letters a { color: var(--marine); }

/* --------------------------------------------------------------------------
   Voettekst
   -------------------------------------------------------------------------- */

.voet {
  background: var(--marine-diep);
  color: #dbe3ee;
  border-top: 4px solid var(--marker);
  padding: 2.75rem 0 1.5rem;
  background-image: linear-gradient(var(--liniaal-donker) 1px, transparent 1px);
  background-size: 100% var(--regel);
}
.voet__raster {
  width: min(100% - 2rem, var(--breed));
  margin-inline: auto;
  display: grid;
  gap: 2rem;
}
.voet__kop {
  font-family: var(--font-kop);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--marker);
  margin: 0 0 0.9rem;
}
.voet__lijst { list-style: none; margin: 0; padding: 0; }
.voet__lijst li { margin-bottom: 0.55rem; line-height: 1.5; overflow-wrap: break-word; text-wrap: pretty; }
.voet__lijst a, .voet p a { color: #dbe3ee; text-decoration: none; border-bottom: 1px solid transparent; }
.voet__lijst a:hover, .voet p a:hover { color: #fff; border-bottom-color: var(--marker); }
.voet p { color: #b9c4d4; font-size: 0.93rem; }
.voet__merk { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; }

.netwerk__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.netwerk__lijst li { margin: 0; }
.netwerk__lijst a {
  display: block;
  padding: 0.6rem 0.7rem 0.6rem 1.6rem;
  border: 1px solid rgba(251, 248, 241, 0.16);
  border-left: 3px solid var(--marge-lijn);
  border-radius: var(--radius);
  color: #dbe3ee;
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.5;
  position: relative;
  transition: background-color var(--overgang), border-left-color var(--overgang), transform var(--overgang);
}
.netwerk__lijst a::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 1.05rem;
  width: 8px;
  height: 2px;
  background: var(--marker);
}
.netwerk__lijst a:hover {
  background: rgba(249, 115, 22, 0.12);
  border-left-color: var(--marker);
  transform: translateX(3px);
  color: #fff;
}

.voet__balk {
  width: min(100% - 2rem, var(--breed));
  margin: 2.25rem auto 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(251, 248, 241, 0.16);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #a9b6c8;
}
.voet__balk a { color: #dbe3ee; }

/* --------------------------------------------------------------------------
   Kruimelpad
   -------------------------------------------------------------------------- */

.kruimels {
  width: min(100% - 2rem, var(--breed));
  margin: 1.25rem auto 0;
  padding-left: var(--marge-links);
  font-size: 0.85rem;
  color: var(--potlood-licht);
}
.kruimels__lijst { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; }
.kruimels__item { display: inline-flex; align-items: center; gap: 0.5rem; }
.kruimels__item + .kruimels__item::before { content: "/"; color: var(--marge-lijn); }
.kruimels__item a { color: var(--potlood); text-decoration: none; }
.kruimels__item a:hover { color: var(--marker-diep); text-decoration: underline; }

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

.artikel { padding: 1.5rem 0 3rem; }
.artikel__inner {
  width: min(100% - 2rem, var(--breed));
  margin-inline: auto;
  padding-left: var(--marge-links);
  position: relative;
}
.artikel__inner::before {
  content: "";
  position: absolute;
  left: calc(var(--marge-links) - 1.15rem);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--marge-lijn);
  opacity: 0.45;
}

.artikel-kop { max-width: var(--smal); margin-bottom: 1.75rem; }
.artikel-kop__rubriek {
  display: inline-block;
  font-family: var(--font-kop);
  font-size: 0.54rem;
  letter-spacing: 0.09em;
  color: var(--marker-diep);
  border: 1px solid var(--marker);
  border-radius: var(--radius);
  padding: 0.35rem 0.55rem;
  margin-bottom: 1rem;
}
.artikel-kop__titel { font-size: clamp(1.35rem, 4.6vw, 2.1rem); margin-bottom: 1rem; }
.artikel-kop__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  font-size: 0.85rem;
  color: var(--potlood-licht);
  padding-top: 0.75rem;
  border-top: 1px solid var(--papier-rand);
}
.artikel-kop__auteur { color: var(--potlood); font-weight: 500; }
.artikel-kop__datum, .artikel-kop__leestijd { color: var(--potlood-licht); }

.artikel-hero { margin: 0 0 2rem; }
.artikel-hero__foto {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-groot);
  border: 1px solid var(--papier-rand);
  box-shadow: var(--schaduw);
}
.artikel-hero__credit { display: block; margin-top: 0.6rem; font-size: 0.78rem; color: var(--potlood-licht); }
.artikel-hero__credit a { color: var(--potlood); }

.artikel__body { max-width: 68ch; font-size: 1.03rem; }
.artikel__body .chapo {
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--marine);
  border-left: 4px solid var(--marker);
  padding: 0.35rem 0 0.35rem 1rem;
  margin-bottom: 2rem;
}
.artikel__body h2 {
  margin: 2.5rem 0 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--marine);
}
.artikel__body h3 { margin: 1.9rem 0 0.6rem; color: var(--marine-mist); }
.artikel__body p { color: #23334c; }
.artikel__body ul, .artikel__body ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.artikel__body ul { list-style: none; padding-left: 1.5rem; }
.artikel__body ul li { position: relative; margin-bottom: 0.55rem; }
.artikel__body ul li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.85rem;
  width: 9px;
  height: 2px;
  background: var(--marker);
}
.artikel__body ol li { margin-bottom: 0.55rem; padding-left: 0.25rem; }
.artikel__body ol li::marker { font-family: var(--font-kop); font-size: 0.7rem; color: var(--marker-diep); }
.artikel__body a { color: var(--marine); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--marker-was); }
.artikel__body a:hover { text-decoration-color: var(--marker); color: var(--marker-diep); }
.artikel__body strong { font-weight: 700; color: var(--marine); }
.artikel__body blockquote {
  margin: 1.75rem 0;
  padding: 1.1rem 1.2rem;
  background: var(--papier-warm);
  border-left: 5px solid var(--marge-lijn);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.05rem;
  color: var(--marine);
}
.artikel__body blockquote p:last-child { margin-bottom: 0; }
.artikel__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.94rem;
  background: #fff;
  border: 1px solid var(--papier-rand);
}
.artikel__body table caption { caption-side: bottom; padding-top: 0.6rem; font-size: 0.82rem; color: var(--potlood-licht); text-align: left; }
.artikel__body th, .artikel__body td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--papier-rand); text-align: left; vertical-align: top; }
.artikel__body th { font-family: var(--font-kop); font-size: 0.58rem; letter-spacing: 0.05em; background: var(--marine); color: var(--papier); }
.artikel__body tbody tr:nth-child(even) { background: var(--papier-warm); }

/* Auteursblok */
.auteur-blok {
  margin: 3rem 0 0;
  padding: 1.4rem 1.25rem;
  background: var(--papier-warm);
  border: 1px solid var(--papier-rand);
  border-left: 5px solid var(--marker);
  border-radius: var(--radius-groot);
  display: grid;
  gap: 1rem;
  max-width: 68ch;
}
.auteur-blok__foto { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--papier); box-shadow: 0 0 0 2px var(--marine); }
.auteur-blok__naam { font-family: var(--font-kop); font-size: 0.74rem; margin: 0 0 0.4rem; }
.auteur-blok__bio { color: var(--potlood); font-size: 0.95rem; margin: 0 0 0.7rem; }
.auteur-blok__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-size: 0.88rem; }
.auteur-blok__links a { color: var(--marine); }

/* Verder lezen */
.verder { margin: 3rem 0 0; }
.verder__kop { font-size: clamp(1rem, 3vw, 1.25rem); padding-bottom: 0.5rem; border-bottom: 2px solid var(--marine); margin-bottom: 1.4rem; }
.verder__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.verder__item {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-radius: var(--radius-groot);
  overflow: hidden;
  transition: transform var(--overgang), box-shadow var(--overgang);
}
.verder__item:hover { transform: translateY(-3px); box-shadow: var(--schaduw); }
.verder__link { display: block; text-decoration: none; color: inherit; }
.verder__foto { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.verder__titel { font-family: var(--font-kop); font-size: 0.72rem; line-height: 1.5; margin: 0; padding: 0.9rem 1rem 0.3rem; }
.verder__meta { display: block; padding: 0 1rem 1.1rem; font-size: 0.8rem; color: var(--potlood-licht); }
.verder__link:hover .verder__titel { color: var(--marker-diep); }

/* Foutpagina */
.fout { padding: 4rem 0 5rem; }
.fout__inner {
  width: min(100% - 2rem, var(--smal));
  margin-inline: auto;
  text-align: center;
}
.fout__code { font-family: var(--font-kop); font-size: clamp(3rem, 16vw, 6rem); color: var(--marker); line-height: 1; margin: 0 0 1rem; }
.fout__titel { margin-bottom: 0.8rem; }
.fout__tekst { color: var(--potlood); max-width: 50ch; margin-inline: auto; }
.fout__acties { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin-top: 1.75rem; }
.fout__knop { text-decoration: none; }
.fout__link { color: var(--marine); font-size: 0.95rem; }

/* Algemene tekstpagina's */
.tekstblad { padding: 2rem 0 3.5rem; }
.tekstblad__inner {
  width: min(100% - 2rem, var(--breed));
  margin-inline: auto;
  padding-left: var(--marge-links);
  position: relative;
}
.tekstblad__inner::before {
  content: "";
  position: absolute;
  left: calc(var(--marge-links) - 1.15rem);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--marge-lijn);
  opacity: 0.45;
}
.tekstblad__body { max-width: 68ch; }
.tekstblad__body h2 { margin: 2.4rem 0 0.8rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--marine); }
.tekstblad__body h3 { margin: 1.8rem 0 0.5rem; }
.tekstblad__body ul li { margin-bottom: 0.5rem; }
.tekstblad__body dl { margin: 1.25rem 0; }
.tekstblad__body dt { font-family: var(--font-kop); font-size: 0.62rem; margin-top: 1rem; }
.tekstblad__body dd { margin: 0.25rem 0 0; color: var(--potlood); }

/* --------------------------------------------------------------------------
   Beweging
   -------------------------------------------------------------------------- */

@keyframes veeg-in {
  from { background-size: 0 0.55em; }
  to { background-size: 100% 0.55em; }
}
@keyframes potlood-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.hero__titel .marker { animation: veeg-in 900ms 220ms ease-out both; }
.hero__rubriek { animation: potlood-in 500ms ease-out both; }
.rapportkaart { animation: potlood-in 620ms 120ms ease-out both; }

/* --------------------------------------------------------------------------
   Breekpunten
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  :root { --marge-links: 3rem; --pad-blok: 4rem; }
  .hero { padding: 3.25rem 0 4rem; }
  .hero__knoppen .knop { min-width: 13rem; }
  .probleemlijst { grid-template-columns: repeat(2, 1fr); }
  .functies { grid-template-columns: repeat(2, 1fr); }
  .voordelen { grid-template-columns: repeat(2, 1fr); }
  .kaarten { grid-template-columns: repeat(2, 1fr); }
  .verder__lijst { grid-template-columns: repeat(2, 1fr); }
  .vertrouwen { grid-template-columns: repeat(2, 1fr); }
  .auteur-blok { grid-template-columns: 84px 1fr; align-items: start; }
  .voet__raster { grid-template-columns: repeat(2, 1fr); }
  .formulier { padding: 1.75rem 1.6rem 2rem; }
  .formulier button { width: auto; min-width: 15rem; }
}

@media (min-width: 900px) {
  :root { --marge-links: 4.5rem; --pad-blok: 5rem; }
  body.thema-schrift { font-size: 1.03rem; }
  .menuknop { display: none; }
  .mobielmenu { display: none !important; }
  .hoofdnav { display: block; }
  .kopbalk__inner { min-height: 76px; }
  .hero__inner { grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 3rem; }
  .hero::before { left: 2.2rem; }
  .hoofdstuk__nummer { position: absolute; left: -0.2rem; top: 0.35rem; writing-mode: vertical-rl; transform: rotate(180deg); margin: 0; }
  .artikel__inner, .tekstblad__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
  .functies { 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: stretch; }
  .contactraster { grid-template-columns: 0.9fr 1.1fr; align-items: start; gap: 3rem; }
  .voet__raster { grid-template-columns: 1.3fr 0.8fr 1fr 1fr 1.4fr; gap: 2.5rem; }
  .probleemlijst { grid-template-columns: repeat(3, 1fr); }
  .stappen { grid-template-columns: repeat(2, 1fr); gap: 2rem 2.5rem; }
  .vertrouwen { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1200px) {
  :root { --marge-links: 5.5rem; }
  h1 { font-size: 2.85rem; }
  .hero__inner { gap: 4rem; }
  .artikel__body { font-size: 1.06rem; }
  .hoofdstuk__intro { font-size: 1.05rem; }
  .stappen { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .voordelen { grid-template-columns: repeat(4, 1fr); }
}

@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;
  }
  .kaart:hover, .functie:hover, .verder__item:hover, .knop--vol:hover, .knop--lijn:hover, .netwerk__lijst a:hover { transform: none; }
}

@media print {
  .kopbalk, .voet, .mobielmenu, .skip-link { display: none !important; }
  body.thema-schrift { background: #fff; color: #000; }
  .artikel__inner::before, .tekstblad__inner::before { display: none; }
}

/* ==========================================================================
   Losse pagina's: auteur, blog, juridische teksten, sitemap, bedankt
   Dezelfde schriftlogica: marge links, potloodstrepen, markeerstift als accent.
   ========================================================================== */

.paginakop {
  position: relative;
  background: var(--papier);
  background-image: var(--papierlijnen);
  background-position: 0 0.5rem;
  border-bottom: 3px solid var(--marine);
  padding: 2.25rem 0 2.5rem;
}
.paginakop__inner {
  width: min(100% - 2rem, var(--breed));
  margin-inline: auto;
  padding-left: var(--marge-links);
  position: relative;
}
.paginakop__inner::before {
  content: "";
  position: absolute;
  left: calc(var(--marge-links) - 1.15rem);
  top: 0.2rem;
  bottom: 0.2rem;
  width: 2px;
  background: var(--marge-lijn);
  opacity: 0.55;
}
.paginakop__rubriek {
  display: inline-block;
  font-family: var(--font-kop);
  font-size: 0.55rem;
  letter-spacing: 0.09em;
  color: var(--marker-diep);
  border-bottom: 2px solid var(--marker);
  padding-bottom: 0.35rem;
  margin-bottom: 1.1rem;
}
.paginakop__titel { max-width: 24ch; }
.paginakop__intro { max-width: 64ch; color: var(--potlood); }
.paginakop__intro:last-child { margin-bottom: 0; }
.paginakop__datum {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--potlood);
  border: 1px dashed var(--marge-lijn);
  border-radius: var(--radius);
  padding: 0.35rem 0.65rem;
}

/* Auteurskaart bovenaan de auteurspagina */
.auteurkaart {
  display: grid;
  gap: 1.35rem;
  margin-top: 2rem;
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-left: 5px solid var(--marker);
  border-radius: var(--radius-groot);
  padding: 1.35rem 1.25rem 1.5rem;
  box-shadow: var(--schaduw);
}
.auteurkaart__foto {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: var(--radius-groot);
  border: 3px solid var(--papier);
  box-shadow: 0 0 0 2px var(--marine);
}
.auteurkaart__naam { font-size: 0.86rem; margin-bottom: 0.35rem; }
.auteurkaart__rol {
  display: block;
  font-family: var(--font-kop);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--marker-diep);
  margin-bottom: 0.85rem;
}
.auteurkaart p { color: var(--potlood); }
.auteurkaart p:last-of-type { margin-bottom: 0; }

.profiellijst {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.profiellijst a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--marine);
  border-radius: var(--radius);
  padding: 0.5rem 0.8rem;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--marine);
  transition: background-color var(--overgang), transform var(--overgang), box-shadow var(--overgang);
}
.profiellijst a::before {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--marker);
  border-radius: 2px;
}
.profiellijst a:hover {
  background: var(--marker-was);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--marker);
}

/* Lijst met artikelen, als regels in een schrift */
.artikellijst { list-style: none; margin: 2rem 0 0; padding: 0; }
.artikellijst li {
  position: relative;
  padding: 1rem 0 1rem 2.4rem;
  border-bottom: 1px dashed var(--papier-rand);
}
.artikellijst li::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 1.6rem;
  width: 14px;
  height: 2px;
  background: var(--marker);
}
.artikellijst__rubriek {
  display: block;
  font-family: var(--font-kop);
  font-size: 0.52rem;
  letter-spacing: 0.08em;
  color: var(--marker-diep);
  margin-bottom: 0.4rem;
}
.artikellijst__titel {
  font-family: var(--font-kop);
  font-size: 0.7rem;
  line-height: 1.6;
  margin: 0 0 0.45rem;
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
}
.artikellijst__titel a { text-decoration: none; }
.artikellijst__titel a:hover { text-decoration: underline; }
.artikellijst__tekst { color: var(--potlood); font-size: 0.94rem; margin: 0 0 0.35rem; }
.artikellijst__datum { font-size: 0.82rem; color: var(--potlood-licht); }

/* Inhoudsopgave boven een juridische tekst */
.inhoud {
  margin: 0 0 2.25rem;
  max-width: 68ch;
  background: var(--papier-warm);
  border: 1px solid var(--papier-rand);
  border-left: 4px solid var(--marge-lijn);
  border-radius: var(--radius-groot);
  padding: 1.1rem 1.2rem 1.25rem;
}
.inhoud__kop {
  font-family: var(--font-kop);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  margin: 0 0 0.75rem;
}
.inhoud__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.inhoud__lijst a { color: var(--marine); font-size: 0.93rem; }

/* Los notitieblok binnen een tekstpagina */
.notitie {
  margin: 1.75rem 0;
  max-width: 68ch;
  padding: 1.05rem 1.15rem;
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-left: 5px solid var(--marker);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notitie__label {
  display: block;
  font-family: var(--font-kop);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--marker-diep);
  margin-bottom: 0.5rem;
}
.notitie p:last-child { margin-bottom: 0; }

/* Extra opmaak binnen de tekstpagina's */
.tekstblad__body p { color: #23334c; }
.tekstblad__body a { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--marker-was); }
.tekstblad__body a:hover { text-decoration-color: var(--marker); color: var(--marker-diep); }
.tekstblad__body ul { list-style: none; padding-left: 1.5rem; margin: 0 0 1.25rem; }
.tekstblad__body ul li { position: relative; }
.tekstblad__body ul li::before {
  content: "";
  position: absolute;
  left: -1.15rem;
  top: 0.85rem;
  width: 9px;
  height: 2px;
  background: var(--marker);
}
.tekstblad__body ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.tekstblad__body ol li { margin-bottom: 0.5rem; }
.tekstblad__body ol li::marker { font-family: var(--font-kop); font-size: 0.7rem; color: var(--marker-diep); }
.tekstblad__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.94rem;
  background: #fff;
  border: 1px solid var(--papier-rand);
}
.tekstblad__body th, .tekstblad__body td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--papier-rand);
  text-align: left;
  vertical-align: top;
}
.tekstblad__body th { font-family: var(--font-kop); font-size: 0.58rem; letter-spacing: 0.05em; background: var(--marine); color: var(--papier); }
.tekstblad__body tbody tr:nth-child(even) { background: var(--papier-warm); }
.tekstblad__body table caption { caption-side: bottom; padding-top: 0.6rem; font-size: 0.82rem; color: var(--potlood-licht); text-align: left; }

.tabelrol { overflow-x: auto; margin: 1.75rem 0; max-width: 68ch; }

/* Sitemap */
.sitemapraster { display: grid; gap: 1.25rem; margin-top: 2rem; }
.sitemapgroep {
  background: #fff;
  border: 1px solid var(--papier-rand);
  border-top: 4px solid var(--marine);
  border-radius: var(--radius);
  padding: 1.15rem 1.15rem 1.35rem;
  background-image: linear-gradient(var(--liniaal) 1px, transparent 1px);
  background-size: 100% var(--regel);
  background-position: 0 2.55rem;
}
.sitemapgroep__kop { font-family: var(--font-kop); font-size: 0.66rem; margin-bottom: 0.8rem; }
.sitemaplijst { list-style: none; margin: 0; padding: 0; }
.sitemaplijst li { position: relative; padding: 0.35rem 0 0.5rem 1.35rem; }
.sitemaplijst li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1rem;
  width: 8px;
  height: 2px;
  background: var(--marker);
}
.sitemaplijst a { color: var(--marine); font-size: 0.95rem; overflow-wrap: break-word; text-wrap: pretty; }
.sitemaplijst small { display: block; color: var(--potlood); font-size: 0.82rem; line-height: 1.5; }

/* Bedanktpagina */
.bedankt__acties { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.85rem; }

@media (min-width: 640px) {
  .paginakop { padding: 3rem 0 3.25rem; }
  .auteurkaart { grid-template-columns: 132px 1fr; align-items: start; }
  .inhoud__lijst { grid-template-columns: repeat(2, 1fr); }
  .sitemapraster { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .auteurkaart { grid-template-columns: 168px 1fr; gap: 2rem; padding: 1.8rem 1.75rem; }
  .auteurkaart__foto { width: 168px; height: 168px; }
  .sitemapraster { grid-template-columns: repeat(3, 1fr); }
  .paginakop__intro { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .profiellijst a:hover { transform: none; }
}

@media print {
  .paginakop__inner::before { display: none; }
}

.auteurkaart__tekst { min-width: 0; }