/* pcmentor.nl - de huisstijl "de rustige buurman" (2026-09-23).

   Waarom deze vorm: de lezer is de Nederlander die Windows lastig vindt, vaak ouder,
   wil geen jargon en is bang om iets kapot te maken. Alles wat op een softwarebedrijf
   lijkt (strak blauw, kaarten met iconen, donkere modus die vanzelf aanspringt) werkt
   dan tegen. Dus: warm papier, een serif in de koppen zoals in een boek, een grote
   letter met veel lucht, en een kalme petrolkleur voor alles wat klikbaar is.

   Regels die hieruit volgen:
   - ALLEEN LICHT. Geen prefers-color-scheme: een site die op een ander toestel opeens
     zwart is, leest voor deze lezer als "er is iets mis".
   - Lettergrootte is instelbaar met de Aa-knop (data-letter op <html>), niet met een
     browserzoom die de lezer niet kent.
   - Systeemfonts: de serif komt uit de stapel die op Windows Palatino Linotype geeft en
     op Mac Iowan Old Style. Een eigen lettertype hosten is een latere keuze; er wordt
     niets van buiten geladen (de privacyverklaring belooft dat).
   - Niets beweegt uit zichzelf. Hover verandert kleur, geen positie. */

:root {
  --papier: #f5efe4;
  --papier-diep: #ebe3d3;
  --vel: #fffdf8;
  --inkt: #24211c;
  --tekst: #3b3630;
  --gedempt: #6d665b;
  --lijn: #dcd3c2;
  --lijn-zacht: #e9e2d4;

  --accent: #1e5a6e;
  --accent-donker: #164452;
  --accent-zacht: #e2ecef;

  --warm: #8f4f12;          /* 5.6:1 op papier; #b0651c haalde 3.9 en viel als tekst door de contrasteis */
  --gedempt-diep: #5f584d;  /* gedempte tekst op het diepere papier van de voet (5.5:1) */
  --rand: #93866d;          /* rand van invoervelden, knoppen en keuzekaarten. 3.08:1 op papier en
                                3.47:1 op vel, dus WCAG 1.4.11 haalt hij op BEIDE achtergronden; de oude
                                #9c8f77 zakte op papier naar 2.78:1 en daar staat het zoekveld op
                                (gemeten 27-09). --lijn is en blijft alleen decoratie. */
  --warm-zacht: #fbefdc;
  --warm-lijn: #e7c48d;

  --groen: #2f6b3a;
  --groen-zacht: #e6f0e4;
  --rood: #9b3b34;
  --rood-zacht: #f7e6e3;

  --kop: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
  --letter: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --r: 12px;
  --maxw: 68rem;
  --readw: 40rem;
  --lh: 1.65;
  --op-accent: #fff;   /* tekst OP de accentkleur; in het donkere thema is dat juist donker */
}

/* ---------------------------------------------------------------- de thema's (27-09 avond)
   De eigenaar: "je hebt zelf een knop geplaatst voor het vergroten van alleen het lettertype,
   maak hier een fatsoenlijke bay van met ook licht/donker thema en andere dingen die bij
   accessibility horen."

   De regel bovenaan dit bestand blijft staan en wordt hier NIET tegengesproken: er is nog
   steeds geen `prefers-color-scheme`. Een site die op een ander toestel uit zichzelf zwart is
   leest voor deze lezer als "er is iets mis". Donker komt er alleen als hij er zelf om vraagt,
   in de bay, en dat onthoudt zijn browser. Dat is het verschil tussen een verrassing en een
   keuze.

   Alle kleuren staan als variabele, dus een thema is niets meer dan die variabelen opnieuw
   zetten. Waar tekst OP de accentkleur staat, gebruikt de stijl --op-accent: in het donkere
   thema is de accentkleur juist licht, en dan zou wit erop onleesbaar zijn. */
html[data-thema="donker"] {
  --papier: #1b1a17;
  --papier-diep: #131210;
  --vel: #24221e;
  --inkt: #f4eee3;
  --tekst: #ded7ca;
  --gedempt: #aaa294;       /* 7.0:1 op --papier */
  --lijn: #403b34;
  --lijn-zacht: #322e29;

  --accent: #84c9de;        /* 9.4:1 op --papier; de petrol van het lichte thema haalt daar 2.2 */
  --accent-donker: #b0e0ef;
  --accent-zacht: #23343a;
  --op-accent: #15201f;

  --warm: #e8ab63;
  --gedempt-diep: #aaa294;
  --rand: #7d7466;          /* 3.4:1 op --papier, dus randen blijven zichtbaar (WCAG 1.4.11) */
  --warm-zacht: #2b2418;
  --warm-lijn: #6d552f;

  --groen: #82c78d;
  --groen-zacht: #1e2c21;
  --rood: #ef958b;
  --rood-zacht: #2f1f1d;
}
html[data-thema="donker"] img:not([src$=".svg"]) { filter: brightness(.92); }

/* Extra contrast: geen warm papier maar zuiver zwart op wit, dikkere randen, alles onderstreept.
   Voor wie de zachte kleuren te weinig verschil geven. Dit is met opzet lelijker dan de rest. */
html[data-thema="contrast"] {
  --papier: #fff;
  --papier-diep: #fff;
  --vel: #fff;
  --inkt: #000;
  --tekst: #000;
  --gedempt: #1a1a1a;
  --lijn: #000;
  --lijn-zacht: #000;
  --accent: #0b3d8c;
  --accent-donker: #06255a;
  --accent-zacht: #e8eefb;
  --op-accent: #fff;
  --warm: #7a3200;
  --gedempt-diep: #1a1a1a;
  --rand: #000;
  --warm-zacht: #fff;
  --warm-lijn: #000;
  --groen: #05531a;
  --groen-zacht: #fff;
  --rood: #a40000;
  --rood-zacht: #fff;
}
html[data-thema="contrast"] a { text-decoration: underline; text-decoration-thickness: 2px; }
html[data-thema="contrast"] .btn, html[data-thema="contrast"] .kaart,
html[data-thema="contrast"] .checks__lijst a, html[data-thema="contrast"] .momenten__lijst a { border-width: 2px; }

/* De Aa-knop: drie standen. De hele site schaalt mee omdat alles in rem staat. */
html { font-size: 118.75%; -webkit-text-size-adjust: 100%; }   /* 19px basis */
html[data-letter="groot"] { font-size: 131.25%; }              /* 21px */
html[data-letter="extragroot"] { font-size: 150%; }            /* 24px */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--letter);
  font-size: 1rem;
  line-height: var(--lh);
  color: var(--tekst);
  background: var(--papier);
  overflow-wrap: break-word;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .wrap { padding: 0 1.5rem; } }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-donker); }

:where(a, button, input, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4 { font-family: var(--kop); color: var(--inkt); line-height: 1.2; font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.7rem); margin: 0 0 .7rem; }
h2 { font-size: clamp(1.45rem, 1.15rem + 1vw, 1.8rem); margin: 0 0 .5rem; }
h3 { font-size: 1.25rem; margin: 0 0 .35rem; }

.eyebrow { font-family: var(--letter); text-transform: uppercase; letter-spacing: .09em; font-size: .78rem; font-weight: 700; color: var(--warm); margin: 0 0 .5rem; }
.lead { font-size: 1.2rem; color: var(--gedempt); max-width: var(--readw); margin: 0 0 1rem; line-height: 1.55; }
.sub { color: var(--gedempt); margin: -.2rem 0 1.25rem; max-width: var(--readw); }

.visueel-verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: .5rem; background: var(--vel); color: var(--inkt); padding: .5rem .9rem; border-radius: 8px; z-index: 50; }
.skip:focus { left: .5rem; }

.pijl { flex: none; color: var(--accent); }

/* ---------------------------------------------------------------- kop en menu */
header.site {
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
  position: sticky; top: 0; z-index: 20;
}
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-block: .7rem; }

/* Het merk (28-09): een BEELDSCHERM MET EEN EHBO-KRUIS erin, en de naam schreefloos ernaast.
   De eigenaar, na een ronde met vier abstracte tekens: "helaas allemaal niks, grafisch werk is
   niet onze sterkte. pak gewoon een scherm en zet er een kruis in alsin ehbo kruis." Dat is ook
   wat de site doet - hulp bij je computer - en het is leesbaar zonder dat je het hoeft uit te
   leggen; daarvoor stond hier een ring met een stip, en daarvoor een rondje met de letters "PC"
   naast een favicon met een serif-P in kleuren die nergens anders op de site voorkwamen.
   Een EHBO-kruis is een VLAK met een kruis erin en geen lijntekening: het scherm is dus gevuld
   en het kruis uitgespaard, en juist daardoor leest het teken nog op 16 pixels.
   De VORM staat in tools/merk.py en nergens anders; die maakt de kopbalk-SVG (site.json), de
   favicon, de twee png-iconen en de deelkaart, en tools/bouwtest.py meet dat ze niet uit elkaar
   lopen. Hiervoor stond in de sharecard-tool wel dat ze gelijk hoorden te blijven, maar mat
   niets dat na.
   Scherm en kruis pakken --accent en --papier, en niet currentColor of een kleur in de SVG
   zelf: alle drie de thema's geven die twee een eigen waarde (de petrol van het lichte thema
   haalt op donker papier 2.2:1 en wordt daar #84c9de), dus zo klopt het teken in licht, donker
   EN hoog contrast zonder dat er ergens een tweede kleurenlijst ontstaat. Een kleur als
   attribuut in de SVG zetten zou dat breken, en een style-attribuut mag niet (de CSP is
   style-src 'self'). De favicon en de iconen kunnen die truc niet - die lezen geen stylesheet -
   en dragen daarom de lichte waarden hard, uit hetzelfde palet. */
.merk { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--inkt); }
.merk__teken { width: 2.15rem; height: 2.15rem; flex: none; }
.merk__scherm { fill: var(--accent); }
.merk__kruis { fill: var(--papier); }
/* De terugval als site.json geen `merk_teken` heeft (de bouwtest meet die variant). */
.merk__letters {
  display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: var(--accent); color: var(--op-accent); font-family: var(--kop); font-weight: 600; font-size: .95rem; letter-spacing: .02em;
}
.merk__naam { font-family: var(--letter); font-size: 1.32rem; font-weight: 400; color: var(--gedempt); letter-spacing: -.01em; }
.merk__sterk { font-weight: 700; color: var(--inkt); }
.merk:hover .merk__sterk, .merk:hover .merk__naam { color: var(--accent-donker); }

.kop__knoppen { display: flex; align-items: center; gap: .5rem; margin-left: auto; order: 3; }
.mainnav { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .3rem; margin-left: auto; order: 2; }
.mainnav a {
  display: inline-block; padding: .5rem .7rem; border-radius: 8px;
  color: var(--tekst); text-decoration: none; font-size: 1rem; font-weight: 500;
  border-bottom: 2px solid transparent;
}
.mainnav a:hover { background: var(--accent-zacht); color: var(--accent-donker); }
.mainnav a.actief { color: var(--accent-donker); font-weight: 700; border-bottom-color: var(--accent); border-radius: 8px 8px 0 0; }
/* "Start hier" is sinds 27-09 laat de ENIGE plek waar die handeling staat: hij stond ook nog
   als knop in de hero, en dat waren twee keer dezelfde link naar dezelfde pagina. Omdat hij nu
   alleen is, moet hij hier opvallen ("alleen start hier knop opvallend in header of anders op
   de hero"). Daarom een knop tussen de links en geen link tussen de links: wie hem nodig heeft
   zoekt niet, die kijkt. Tekst OP de accentkleur gaat via --op-accent, zodat hij ook in het
   donkere en het contrastthema leesbaar blijft. */
.mainnav a.mainnav__start {
  background: var(--accent); color: var(--op-accent); font-weight: 600;
  border-radius: 999px; padding: .5rem 1.05rem; border-bottom-color: transparent;
}
.mainnav a.mainnav__start:hover { background: var(--accent-donker); color: var(--op-accent); }
.mainnav a.mainnav__start.actief { color: var(--op-accent); border-bottom-color: transparent; border-radius: 999px; }
.letter {
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1;
  padding: .45rem .6rem; cursor: pointer;
  background: var(--vel); color: var(--inkt); border: 1.5px solid var(--lijn); border-radius: 999px;
}
.letter:hover { border-color: var(--accent); color: var(--accent-donker); }
html[data-letter] .letter { border-color: var(--accent); background: var(--accent-zacht); }

.navtoggle { display: none; padding: .5rem .9rem; font: inherit; font-weight: 600;
  background: var(--vel); color: var(--inkt); border: 1.5px solid var(--lijn); border-radius: 999px; cursor: pointer; }

/* ---------------------------------------------------------------- de bay (27-09 avond)
   Een knop in de kopbalk die alles opent wat met lezen te maken heeft: lettergrootte, kleuren,
   beweging en voorlezen. Zonder JavaScript heeft hij geen functie, dus dan staat hij er ook
   niet (.js komt van vroeg.js, voor de eerste paint). */
.bay { position: relative; }
html:not(.js) .bay { display: none; }
.bay__knop { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; font: inherit;
  font-weight: 600; font-size: .95rem; cursor: pointer;
  background: var(--vel); color: var(--inkt); border: 1.5px solid var(--lijn); border-radius: 999px; }
.bay__knop:hover { border-color: var(--accent); color: var(--accent-donker); }
.bay__knop[aria-expanded="true"] { background: var(--accent-zacht); border-color: var(--accent); }
.bay__knop svg { flex: none; }
.bay__woord { display: none; }
@media (min-width: 52rem) { .bay__woord { display: inline; } }
html[data-letter] .bay__knop, html[data-thema] .bay__knop { border-color: var(--accent); background: var(--accent-zacht); }

.bay__paneel { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 40; width: min(22rem, calc(100vw - 2rem));
  background: var(--vel); border: 1.5px solid var(--rand); border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .16); }
.bay__paneel[hidden] { display: none; }
.bay__paneel h2 { font-size: 1.15rem; margin: 0 0 .15rem; }
.bay__uitleg { color: var(--gedempt); font-size: .9rem; margin: 0 0 .9rem; }
.bay__groep { border: 0; padding: 0; margin: 0 0 1rem; min-width: 0; }
.bay__groep legend { padding: 0; font-weight: 700; font-size: .95rem; color: var(--inkt); margin-bottom: .4rem; }
.bay__keuzes { display: flex; flex-wrap: wrap; gap: .4rem; }
.bay__keuzes button { font: inherit; font-size: .95rem; padding: .45rem .75rem; cursor: pointer;
  background: var(--papier); color: var(--inkt); border: 1.5px solid var(--rand); border-radius: 999px; }
.bay__keuzes button:hover { border-color: var(--accent); }
.bay__keuzes button[aria-pressed="true"] { background: var(--accent); color: var(--op-accent); border-color: var(--accent); font-weight: 700; }
.bay__voet { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.bay__voet button { font: inherit; font-size: .95rem; padding: .5rem .9rem; cursor: pointer;
  background: var(--papier); color: var(--inkt); border: 1.5px solid var(--rand); border-radius: 999px; }
.bay__voet button:hover { border-color: var(--accent); color: var(--accent-donker); }
.bay__voet button[aria-pressed="true"] { background: var(--accent); color: var(--op-accent); border-color: var(--accent); }
@media print { .bay { display: none !important; } }

/* De uitweg op de startpagina voor wie niet weet waar hij moet beginnen. */

@media (max-width: 40rem) {
  /* Het menu klapt onder de kopregel; de Aa-knop blijft ALTIJD in de kopregel staan
     (review 23-09: verstopt in het menu bestaat hij voor deze lezer niet). */
  .mainnav { flex-basis: 100%; order: 4; flex-direction: column; align-items: stretch; padding-top: .3rem; }
  .mainnav a { padding: .8rem .6rem; border-bottom: 1px solid var(--lijn-zacht); border-radius: 0; }
  .mainnav a.actief { border-radius: 0; }
  /* Toggle alleen met JS; zonder JS blijft het menu gewoon zichtbaar (fail-soft). */
  .js .navtoggle { display: inline-block; }
  .js .mainnav { display: none; }
  .js .mainnav.open { display: flex; }
}

/* ---------------------------------------------------------------- basisblokken */
main.wrap { padding-block: 1.5rem 3rem; }

.btn {
  display: inline-block; background: var(--accent); color: var(--op-accent); text-decoration: none;
  padding: .75rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: 1rem; border: 2px solid var(--accent);
  font-family: var(--letter); cursor: pointer;
}
.btn:hover { background: var(--accent-donker); border-color: var(--accent-donker); color: var(--op-accent); }
.btn--rustig { background: transparent; color: var(--accent-donker); }
.btn--rustig:hover { background: var(--accent-zacht); color: var(--accent-donker); }

.crumbs { color: var(--gedempt); font-size: .9rem; margin: 0 0 1rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.crumbs li + li::before { content: "\203A"; margin-right: .3rem; color: var(--lijn); }
.crumbs a { color: var(--gedempt); }

.zoekvorm { display: flex; gap: .5rem; margin: 1.25rem 0 0; max-width: 34rem; }
.zoekvorm input {
  flex: 1; min-width: 0; font: inherit; font-size: 1.05rem; padding: .8rem 1rem;
  border: 2px solid var(--rand); border-radius: 999px; background: var(--vel); color: var(--inkt);
}
.zoekvorm input:focus-visible { border-color: var(--accent); outline-offset: 0; }
.zoekvorm button { font: inherit; font-weight: 600; padding: .75rem 1.2rem; border-radius: 999px;
  background: var(--accent); color: var(--op-accent); border: 2px solid var(--accent); cursor: pointer; white-space: nowrap; }
.zoekvorm button:hover { background: var(--accent-donker); }
@media (max-width: 30rem) { .zoekvorm { flex-direction: column; } }

/* ---------------------------------------------------------------- startpagina */
.hero { padding: 1.5rem 0 2.5rem; max-width: 46rem; }
.hero h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.2rem); line-height: 1.12; }
.hero .lead { font-size: 1.25rem; }

section.momenten, section.checks, section.belofte, section.rubrieken { padding: 2.25rem 0; border-top: 1px solid var(--lijn); }

.momenten__lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr)); }
.momenten__lijst a {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.1rem; min-height: 4.2rem;
  background: var(--vel); border: 1.5px solid var(--lijn); border-radius: var(--r);
  color: var(--inkt); text-decoration: none; font-size: 1.08rem; font-weight: 600; line-height: 1.35;
}
.momenten__lijst a:hover { border-color: var(--accent); background: var(--accent-zacht); color: var(--accent-donker); }

.checks__lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); }
/* Precies drie checks: op een breed scherm horen ze naast elkaar, niet twee-en-een. */
@media (min-width: 58rem) { .checks__lijst { grid-template-columns: repeat(3, 1fr); } }
.checks__lijst > li > a, a.checkkaart {
  position: relative; display: flex; flex-direction: column; gap: .3rem; height: 100%;
  padding: 1.25rem 1.25rem 1.4rem; background: var(--vel); border: 1.5px solid var(--lijn); border-radius: 14px;
  color: var(--tekst); text-decoration: none;
}
.checks__lijst > li > a:hover, a.checkkaart:hover { border-color: var(--accent); }
.checkkaart__label { text-transform: uppercase; letter-spacing: .09em; font-size: .75rem; font-weight: 700; color: var(--warm); }
.checkkaart__naam { font-family: var(--kop); font-size: 1.4rem; font-weight: 600; color: var(--inkt); line-height: 1.2; }
.checkkaart__korte { color: var(--gedempt); font-size: .98rem; margin-top: .2rem; }
/* De pijl is een zichtbare ronde knop, geen los pijltje. "Niet iedereen begrijpt klikbare
   cards" (eigenaar 27-09): er moet iets in de kaart zitten dat er als een knop uitziet, en dat
   ding hoort mee te reageren als je de kaart aanwijst of ernaartoe tabt. */
.checkkaart__voet { margin-top: auto; padding-top: 1rem; display: flex; align-items: center;
  justify-content: space-between; gap: .75rem; }
.checkkaart__voet::before { content: "Doe de check"; font-size: .92rem; font-weight: 600; color: var(--accent); }
.checkkaart__voet .pijl {
  flex: none; width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent); background: var(--vel);
  box-sizing: border-box;
}
.checks__lijst > li > a:hover .pijl, .checks__lijst > li > a:focus-visible .pijl,
a.checkkaart:hover .pijl, a.checkkaart:focus-visible .pijl {
  background: var(--accent); color: var(--vel);
}
a.checkkaart { margin: .5rem 0 1.75rem; }

/* Het icoon geeft de kaart een gezicht. Bewust lijnwerk in dezelfde taal als de pijl: een
   gevulde illustratie zou de rust van het papier breken. */
.checkkaart__icoon { color: var(--accent); margin-bottom: .15rem; }
/* Een streep in de accentkleur over de bovenrand: de kaart krijgt een kop in plaats van een
   rand rondom. Dit is de diepte die de eigenaar vroeg, binnen dezelfde stijl. */
/* De accentstreep ligt BINNEN de kaart en wordt door de kaart afgeknipt. Hij stond eerst
   1,5px buiten de rand met zijn eigen afronding, en twee bogen die niet samenvallen geven
   precies het vierkante blokje op de hoek dat de eigenaar zag (27-09). */
.checks__lijst > li > a, a.checkkaart { overflow: hidden; }
.checks__lijst > li > a::before, a.checkkaart::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--warm-lijn);
}
.checks__lijst > li > a:hover::before, .checks__lijst > li > a:focus-visible::before,
a.checkkaart:hover::before, a.checkkaart:focus-visible::before { background: var(--accent); }
[data-beweging="aan"] .checks__lijst > li > a, [data-beweging="aan"] a.checkkaart {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
[data-beweging="aan"] .checks__lijst > li > a:hover, [data-beweging="aan"] a.checkkaart:hover {
  transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}
[data-beweging="aan"] .checks__lijst .pijl { transition: transform .18s ease; }
[data-beweging="aan"] .checks__lijst > li > a:hover .pijl { transform: translateX(4px); }

/* De beloften waren drie stukjes tekst met een streepje erboven; de eigenaar wilde er kaarten
   van (27-09). Zelfde kaarttaal als de checks, zodat de startpagina een ritme krijgt in plaats
   van drie verschillende manieren om een rijtje te tonen. */
.belofte__lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.belofte__lijst li {
  position: relative; overflow: hidden; background: var(--vel); border: 1.5px solid var(--lijn);
  border-radius: 14px; padding: 1.35rem 1.35rem 1.4rem;
}
.belofte__lijst li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--warm-lijn); }
.belofte__lijst h3 { font-size: 1.22rem; margin: 0 0 .4rem; }
.belofte__lijst p { margin: 0; color: var(--gedempt); }
.belofte__cta { margin: 1.6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.belofte__cta-sub { color: var(--gedempt); font-size: .95rem; }
.btn--groot { font-size: 1.05rem; padding: .8rem 1.3rem; gap: .55rem; }
.btn--groot .pijl { width: 1.15rem; height: 1.15rem; }

/* De rubrieken stonden als platte regels met een streepje eronder, en de langere namen liepen
   over twee regels waardoor het aantal ernaast ging zweven (te zien op de foto van de eigenaar,
   27-09). Nu kaarten met een vaste opbouw: naam boven, aantal eronder, knop rechtsonder. */
.rubrieken__lijst { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.rubrieken__lijst a {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .2rem; height: 100%;
  padding: 1.25rem 1.25rem 1.1rem; background: var(--vel); border: 1.5px solid var(--lijn);
  border-radius: 14px; text-decoration: none; color: var(--inkt);
}
.rubrieken__lijst a::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--warm-lijn); }
.rubrieken__lijst a:hover::before, .rubrieken__lijst a:focus-visible::before { background: var(--accent); }
.rubriek__voet { margin-top: auto; padding-top: .9rem; display: flex; justify-content: flex-end; }
.rubriek__voet .pijl {
  flex: none; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: 50%;
  border: 2px solid var(--accent); color: var(--accent); background: var(--vel); box-sizing: border-box;
}
.rubrieken__lijst a:hover .pijl, .rubrieken__lijst a:focus-visible .pijl { background: var(--accent); color: var(--vel); }
[data-beweging="aan"] .rubrieken__lijst a, [data-beweging="aan"] .belofte__lijst li {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
[data-beweging="aan"] .rubrieken__lijst a:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .08); }
.rubrieken__lijst a:hover .rubriek__naam { color: var(--accent-donker); text-decoration: underline; text-underline-offset: 4px; }
/* min-width: 0, anders krimpt de naam niet onder zijn langste woord en steekt de pijl op
   de grootste Aa-stand buiten het scherm (schouw 23-09: "Comfort & toegankelijkheid"). */
.rubriek__naam { font-family: var(--kop); font-size: 1.25rem; font-weight: 600; flex: 1 1 8rem; min-width: 0; }
.rubrieken__lijst a { flex-wrap: wrap; }
.rubriek__tel { color: var(--gedempt); font-size: .9rem; white-space: nowrap; }

/* ---------------------------------------------------------------- rubriek en lijsten */
.cat, .page-doc { max-width: var(--readw); }
/* De check is geen lopende tekst maar een formulier, en stond toch op leesbreedte: een smalle
   kolom met tien antwoorden onder elkaar en een halve pagina wit ernaast (eigenaar 27-09:
   "waarom maak je geen gebruik van de breedte, dit is nu een hele lange scroll"). Het vlak is
   nu breder; de LOPENDE TEKST eromheen houdt zijn leesbreedte, want daar geldt het wel. */
.instrument { max-width: 54rem; }
.instrument > h1, .instrument > .lead, .instrument > .post__meta, .instrument__uitleg { max-width: var(--readw); }
/* De overzichtspagina's (checks, onderwerpen) tonen KAARTEN, geen lopende tekst. Tot 27-09
   erfden die het leesbreedte-plafond van 40rem, waardoor er twee kaarten naast elkaar pasten,
   de derde op een tweede rij viel en de rechterhelft van het scherm leeg bleef. De eigenaar
   noemde dat twee keer. Leesbreedte hoort bij proza; daarom staat hij nu op de tekst zelf en
   niet op het vlak eromheen. */
.overzicht { max-width: none; }
.overzicht > h1, .overzicht > .lead, .overzicht > .sub, .overzicht > p { max-width: var(--readw); }
.cat__kop { margin-bottom: 1.5rem; }
.cat__tel { color: var(--gedempt); font-size: .9rem; margin: -.3rem 0 0; }

.leeslijst { margin-top: 2rem; }
.leeslijst h2 { padding-bottom: .4rem; border-bottom: 2px solid var(--inkt); }

.lijst { list-style: none; padding: 0; margin: 0; }
.lijst > li { border-bottom: 1px solid var(--lijn); }
.lijst > li > a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; align-items: start;
  padding: .95rem 0; text-decoration: none; color: var(--tekst);
}
.lijst__titel { font-family: var(--kop); font-size: 1.22rem; font-weight: 600; color: var(--inkt); line-height: 1.25; }
.lijst__meta { color: var(--gedempt); font-size: .95rem; grid-column: 1; }
.lijst__tijd { color: var(--gedempt); font-size: .85rem; grid-column: 2; grid-row: 1 / span 2; white-space: nowrap; padding-top: .3rem; }
.lijst > li > a:hover .lijst__titel { color: var(--accent-donker); text-decoration: underline; text-underline-offset: 4px; }

.onderwerp { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--lijn); }
.onderwerp h2 a { color: var(--inkt); text-decoration: none; }
.onderwerp h2 a:hover { color: var(--accent-donker); text-decoration: underline; }
.onderwerp > p { color: var(--gedempt); margin: 0 0 .5rem; }
.onderwerp__alle a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; }
.onderwerp__alle a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- artikel */
.post__kop { max-width: 44rem; margin-bottom: 1.5rem; }
.post__meta { color: var(--gedempt); font-size: .92rem; margin: .4rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; align-items: center; }
.post__tools { margin: .8rem 0 0; }
.voorlees {
  font: inherit; font-size: .92rem; font-weight: 600; padding: .45rem .9rem; cursor: pointer;
  background: var(--vel); color: var(--accent-donker); border: 1.5px solid var(--lijn); border-radius: 999px;
}
.voorlees:hover { border-color: var(--accent); }
.voorlees[aria-pressed="true"] { background: var(--accent); color: var(--op-accent); border-color: var(--accent); }

.niveau { display: inline-block; padding: .12rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: var(--accent-zacht); color: var(--accent-donker); }
.niveau--extra { background: var(--groen-zacht); color: var(--groen); }
.niveau--expert { background: var(--warm-zacht); color: var(--warm); }

.post__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 64rem) {
  .post__grid { grid-template-columns: minmax(0, var(--readw)) 15rem; gap: 3.5rem; align-items: start; }
  .post__zij { position: sticky; top: 5rem; }
}
.toc { background: var(--vel); border: 1px solid var(--lijn); border-radius: var(--r); padding: .8rem 1rem; font-size: .92rem; }
.toc summary { font-family: var(--kop); font-size: 1.05rem; font-weight: 600; color: var(--inkt); cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::before { content: "\25B8"; display: inline-block; margin-right: .4rem; color: var(--warm); transition: transform .15s; }
.toc[open] summary::before { transform: rotate(90deg); }
.toc ol { margin: .6rem 0 0; padding-left: 1.3rem; }
.toc li { margin: .3rem 0; }
.toc a { color: var(--tekst); text-decoration: none; }
.toc a:hover { color: var(--accent-donker); text-decoration: underline; }

.prose { font-size: 1.04rem; max-width: var(--readw); }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--lijn); scroll-margin-top: 5rem; }
.prose h3 { margin-top: 1.8rem; scroll-margin-top: 5rem; }

/* Alles wat focus krijgt onder de vaste kopbalk heeft dezelfde vrije ruimte nodig. Zonder deze
   regel sprong de focus naar een vraag die achter de kopbalk hing (gemeten 27-09: op 1440px
   ging de vraag er bij alle tien de stappen volledig achter, en bij de uitslag hing het oordeel
   zelfs boven de bovenrand). De skip-link had hetzelfde gat. */
#inhoud, .vraag legend, #instrument legend, .uitslag h2, .instrument__stap { scroll-margin-top: 5rem; }
.prose h2 + p, .prose h3 + p { margin-top: .5rem; }
.prose h2 + h3 { margin-top: .8rem; }
.prose p { margin-bottom: 0; }
.prose ul { padding-left: 1.3rem; }
.prose ul > li { margin: .45rem 0; padding-left: .2rem; }
.prose ul > li::marker { color: var(--warm); }
.prose li > ul, .prose li > ol { margin-top: .4rem; }
.prose strong { color: var(--inkt); }
.prose em { font-style: italic; }
.prose a { font-weight: 600; }

/* Genummerde stappen: elke stap in de bovenste lijst krijgt een groot cijfer in een
   cirkel, zodat de lezer altijd weet waar hij is als hij tussen scherm en tekst wisselt. */
.prose > ol { list-style: none; padding: 0; counter-reset: stap; }
.prose > ol > li { counter-increment: stap; position: relative; padding-left: 3.3rem; margin: 1.15rem 0; min-height: 2.4rem; }
.prose > ol > li::before {
  content: counter(stap); position: absolute; left: 0; top: -.1rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--accent); color: var(--op-accent); font-family: var(--kop); font-weight: 600; font-size: 1.15rem;
  display: grid; place-items: center;
}
.prose > ol > li > p { margin: 0; }
.prose ol ol, .prose ul ol { list-style: decimal; padding-left: 1.4rem; }
.prose ol ol > li { padding-left: .2rem; margin: .35rem 0; }

.prose code {
  font-family: inherit; font-size: .95em; background: var(--vel); color: var(--inkt);
  border: 1px solid var(--lijn); border-bottom-width: 2px; border-radius: 6px; padding: .05rem .4rem; white-space: nowrap;
}
.prose pre { background: var(--vel); border: 1px solid var(--lijn); border-radius: var(--r); padding: .9rem 1rem; overflow-x: auto; font-size: .92rem; }
.prose pre code { border: 0; padding: 0; white-space: pre; background: transparent; }

.prose blockquote {
  margin: 1.25rem 0; padding: .9rem 1.1rem; border-left: 5px solid var(--warm-lijn);
  background: var(--warm-zacht); color: var(--tekst); border-radius: 0 var(--r) var(--r) 0;
}
.prose blockquote > * + * { margin-top: .6rem; }
.prose blockquote p { margin: 0; }

.prose img, .prose figure { max-width: 100%; }
.prose figure { margin: 1.5rem 0; }
.prose img { height: auto; display: block; border: 1px solid var(--lijn); border-radius: 10px; background: var(--vel); }
.prose figcaption { color: var(--gedempt); font-size: .9rem; margin-top: .4rem; }

.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.prose th, .prose td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.prose th { font-weight: 700; color: var(--inkt); border-bottom: 2px solid var(--inkt); }

.prose hr { border: 0; border-top: 1px solid var(--lijn); margin: 2rem 0; }

.placeholder { display: inline-block; background: repeating-linear-gradient(45deg,
  var(--warm-zacht), var(--warm-zacht) 10px, transparent 10px, transparent 20px);
  border: 1px dashed var(--warm-lijn); color: var(--gedempt); padding: .15rem .5rem;
  border-radius: 6px; font-size: .9rem; white-space: normal; }

/* "Wat je ziet" (27-09): de plek waar een schermafbeelding hoort, met de omschrijving in
   woorden. Leest als een stapkader, niet als een gat. In de preview gestippeld (data-nog),
   zodat de eigenaar ziet waar het beeld nog moet komen. */
.kijk { background: var(--vel); border: 1px solid var(--lijn); border-left: 5px solid var(--warm-lijn);
  border-radius: var(--r); padding: .75rem 1rem; margin: 0 0 1.4rem; max-width: var(--readw); }
.kijk__kop { text-transform: uppercase; letter-spacing: .09em; font-size: .75rem; font-weight: 700;
  color: var(--gedempt); margin: 0 0 .3rem; }
.kijk p { margin: 0; }
.kijk[data-nog] { border-style: dashed; }

.disclosure { background: var(--vel); border: 1px solid var(--lijn); border-left: 5px solid var(--warm-lijn);
  border-radius: var(--r); padding: .75rem 1rem; font-size: .92rem; color: var(--gedempt); margin: 0 0 1.4rem; max-width: var(--readw); }

/* --------------------------------------------------- het affiliate-blok (27-09, 10-10)
   Een kader met een knop, en de vermelding BOVEN die knop in gewone lettergrootte: de lezer
   leest wat de site eraan verdient voor hij klikt. Bewust duidelijk afgezet van de lopende
   tekst, zodat in een oogopslag te zien is dat dit geen alinea uitleg is. Zonder bruikbare link
   in site.json staat er publiek niets; in de preview een gestippeld voorbeeld met de redenen
   erboven en een knop die nergens heen gaat. */
.affiliate { background: var(--vel); border: 1.5px solid var(--rand); border-left: 5px solid var(--warm-lijn);
  border-radius: var(--r); padding: 1.1rem 1.25rem; margin: 0 0 1.6rem; max-width: var(--readw); }
.affiliate__kop { font-weight: 700; font-size: 1.05rem; margin: 0 0 .35rem; }
.affiliate p { margin: 0 0 .6rem; }
.affiliate__knop { margin: .9rem 0 0; }
.affiliate p.affiliate__knop:last-child { margin-bottom: 0; }
.affiliate[data-nog] { border-style: dashed; }
.affiliate__nog { font-weight: 700; color: var(--warm); }
.affiliate__redenen { margin: 0 0 1rem; padding-left: 1.2rem; }
.affiliate__open { color: var(--gedempt); font-style: italic; }
.affiliate__proef { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------- de stappen (27-09, de diepteslag)
   De belofte van deze site is "stap voor stap, wat je ziet en wat je klikt". Tot nu toe was een
   genummerde lijst gewoon een genummerde lijst: hetzelfde grijs als de rest, nummertje ervoor.
   Daarmee las een instructie als lopende tekst en zag de site eruit als een opzetje.
   Nu draagt elke stap een echt nummer in de accentkleur, met een lijn die de stappen verbindt,
   zodat je met je ogen kunt volgen waar je bent. Geen nieuwe kleuren, geen nieuwe vormen: het
   is dezelfde stijl, alleen uitgediept. */
.post__body ol:not(.lijst) { list-style: none; counter-reset: stap; padding: 0; margin: 0 0 1.6rem; position: relative; }
.post__body ol:not(.lijst) > li {
  counter-increment: stap; position: relative; padding: 0 0 1.1rem 3rem; margin: 0;
}
.post__body ol:not(.lijst) > li::before {
  content: counter(stap); position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-zacht); color: var(--accent-donker);
  font-family: var(--kop); font-weight: 700; font-size: 1rem; line-height: 1;
  border: 1.5px solid var(--warm-lijn);
}
/* De lijn tussen twee stappen: hij loopt van het ene nummer naar het volgende en stopt bij de
   laatste, zodat de reeks een zichtbaar begin en einde heeft. */
.post__body ol:not(.lijst) > li:not(:last-child)::after {
  content: ""; position: absolute; left: .97rem; top: 2.1rem; bottom: .2rem;
  border-left: 2px solid var(--lijn);
}
.post__body ol:not(.lijst) > li > p:first-child { margin-top: 0; }
.post__body ol:not(.lijst) ol > li::before { background: var(--vel); }

/* Een genummerde lijst BINNEN een kader of een citaat blijft gewoon een lijst: daar is de
   stappenvorm te zwaar voor. */
.post__body blockquote ol, .post__body .kijk ol, .post__body .affiliate ol {
  list-style: decimal; counter-reset: none; padding-left: 1.3rem;
}
.post__body blockquote ol > li, .post__body .kijk ol > li, .post__body .affiliate ol > li {
  counter-increment: none; padding: 0 0 .3rem; }
.post__body blockquote ol > li::before, .post__body .kijk ol > li::before,
.post__body .affiliate ol > li::before { content: none; }
.post__body blockquote ol > li::after, .post__body .kijk ol > li::after,
.post__body .affiliate ol > li::after { content: none; }

/* De knoppen in de kopbalk (27-09). Hun rand was --lijn en haalde 1,30:1: er was geen zichtbare
   omtrek, en voor deze doelgroep is "ziet eruit als een knop" geen versiering maar de hele
   aanwijzing dat je erop kunt drukken. Nu --rand, die op papier 3,08:1 haalt. */
.letter, .navtoggle, .voorlees { border-color: var(--rand); }

/* ------------------------------------------------- het rapport over de drie checks (27-09)
   De uitkomsten staan in de browser van de bezoeker, nergens anders. Daarom leest dit blok als
   iets van hem: zijn uitslagen, zijn lijst, met een knop om te printen en een om het te wissen. */
.vervolg { margin: 1.5rem 0 0; padding: 1.25rem 1.35rem; background: var(--accent-zacht);
  border: 1.5px solid var(--warm-lijn); border-radius: 14px; }
.vervolg__kop { font-family: var(--kop); font-size: 1.2rem; font-weight: 600; color: var(--inkt); margin: 0 0 .35rem; }
.vervolg p { margin: 0 0 .6rem; }
.vervolg__lijst { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: .5rem; }
.vervolg__lijst a { font-weight: 600; }

.rapport { margin-top: 2.5rem; }
.rapport__aanzet { color: var(--gedempt); max-width: var(--readw); }
.rapport__sub { color: var(--gedempt); max-width: var(--readw); margin-top: -.4rem; }
.rapport__uitslagen { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.rapport__uitslag { display: flex; flex-direction: column; gap: .15rem; padding: 1rem 1.15rem;
  background: var(--vel); border: 1.5px solid var(--lijn); border-left: 6px solid var(--accent); border-radius: 12px; }
.rapport__uitslag--goed { border-left-color: var(--groen); }
.rapport__uitslag--letop { border-left-color: var(--warm); }
.rapport__uitslag--slecht { border-left-color: var(--rood); }
.rapport__naam { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--gedempt); }
.rapport__oordeel { font-family: var(--kop); font-size: 1.22rem; font-weight: 600; color: var(--inkt); line-height: 1.25; }
.rapport__datum { font-size: .85rem; color: var(--gedempt); }
.rapport__punten { counter-reset: rp; list-style: none; padding: 0; margin: 1rem 0 0; }
.rapport__punten > li { counter-increment: rp; position: relative; padding: .9rem 0 .9rem 3rem;
  border-top: 1px solid var(--lijn); display: grid; gap: .15rem; }
.rapport__punten > li::before { content: counter(rp); position: absolute; left: 0; top: .85rem;
  width: 2rem; height: 2rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--accent-zacht); color: var(--accent-donker); border: 1.5px solid var(--warm-lijn);
  font-family: var(--kop); font-weight: 700; font-size: 1rem; }
.rapport__punten span { color: var(--gedempt); }
.rapport__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
/* Een check die je al deed draagt dat op de kaart. */
.checks__lijst a[data-gedaan] .checkkaart__label { color: var(--groen); }
.checks__lijst a[data-gedaan]::before { background: var(--groen); }
@media print { .rapport__knoppen, .vervolg { display: none !important; } }

/* ----------------------------------------------- de aansporing: doe ze alle drie (27-09 avond)
   Staat in de HTML en niet in JavaScript, want tot vandaag las je pas over het rapport NADAT je
   een check had gedaan. Zie samen_blok() in build.py. */
.samen { margin: 1.75rem 0 0; padding: 1.25rem 1.35rem; background: var(--accent-zacht);
  border: 1.5px solid var(--warm-lijn); border-radius: 14px; max-width: var(--readw); }
.samen--kort { margin: 1rem 0 1.5rem; padding: 1rem 1.2rem; }
.samen__kop { font-family: var(--kop); font-size: 1.15rem; font-weight: 600; color: var(--inkt); margin: 0 0 .35rem; }
.samen__tekst { margin: 0; }
.samen__stand { margin: .65rem 0 0; font-weight: 600; color: var(--accent-donker); }
.samen__stand a { font-weight: 600; }
.samen__prive { margin: .65rem 0 0; font-size: .9rem; color: var(--gedempt); }

/* ----------------------------------------------- het blad: het rapport als A4 (27-09 avond)
   De eigenaar vroeg om "een duidelijk a4tje in pdf met uitkomst van de check en adviezen". Dan
   moet het printbeeld ook echt een A4 zijn, en niet de webpagina met de menu's eraf. Er is geen
   pdf-bibliotheek bij te pas: "opslaan als pdf" is een knop in het printvenster van elke
   browser, en dat is meteen de reden dat er niets van de bezoeker naar ons toe hoeft. */
.rapport__blad { display: none; }
@page { size: A4 portrait; margin: 16mm 14mm 18mm; }
@media print {
  .samen, .checks__lijst, .cat__kop .lead, .rapport__sub, .instrument__uitleg,
  .vraag, .voortgang, .voortgang__balk, .instrument__zonder { display: none !important; }
  .rapport__blad { display: block; border-bottom: 2px solid #000; padding-bottom: .5rem; margin-bottom: 1rem; }
  .rapport__blad strong { display: block; font-size: 15pt; }
  .rapport__blad span { font-size: 10pt; }
  .rapport { margin-top: 0; }
  .rapport__uitslagen { display: block; }
  .rapport__uitslag { border: 1px solid #000; border-left-width: 4px; margin-bottom: .5rem;
    padding: .5rem .7rem; break-inside: avoid; background: #fff; }
  .rapport__punten > li, .todo > li { break-inside: avoid; }
  .rapport__punten > li::before { background: #fff; color: #000; border-color: #000; }
  .uitslag, .todo { break-inside: auto; }
}

.verder { margin-top: 3rem; padding-top: 1.5rem; border-top: 2px solid var(--inkt); max-width: var(--readw); }
.verder h2 { margin-bottom: .75rem; }

/* ---------------------------------------------------------------- zoeken */
#search-results { margin-top: 1.5rem; }
.search-empty { color: var(--gedempt); padding: 1rem 0; }
#search-results .lijst__cat { color: var(--warm); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; grid-column: 1; }

/* ---------------------------------------------------------------- de checks (instrumenten) */
.instrument__vlak { background: var(--vel); border: 1.5px solid var(--rand); border-radius: 16px;
  padding: 1.75rem; margin: .5rem 0 2.5rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
@media (min-width: 46rem) { .instrument__vlak { padding: 2.25rem 2.5rem; } }
.instrument__vlak:empty { display: none; }
.instrument__zonder { margin: 0; color: var(--gedempt); }
.instrument__uitleg { margin-top: 1rem; }

.vraag { border: 0; padding: 0; margin: 0; min-width: 0; }
.vraag legend { font-family: var(--kop); font-size: 1.35rem; font-weight: 600; color: var(--inkt); line-height: 1.25; padding: 0; margin-bottom: .35rem; }
.vraag__hint { color: var(--gedempt); font-size: .95rem; margin: 0 0 1.1rem; max-width: var(--readw); }
.vraag legend { max-width: var(--readw); }
/* De kop krijgt na elke stap de focus (voor schermlezers en het toetsenbord), maar een
   kader om een kop die je niet kunt bedienen leest als een fout. */
.vraag legend:focus, .uitslag h2:focus { outline: none; }
.voortgang { color: var(--gedempt); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin: 0 0 .8rem; }
.voortgang__balk { height: 8px; background: var(--lijn-zacht); border-radius: 99px; margin-bottom: 1.4rem; overflow: hidden; }
.voortgang__balk > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
[data-beweging="aan"] .voortgang__balk > span { transition: width .35s cubic-bezier(.22, .61, .36, 1); }

/* Twee kolommen zodra er ruimte is. Vier antwoorden onder elkaar maken van tien vragen een
   scroll van meters; naast elkaar zie je de hele keuze in een oogopslag. Onder 46rem blijft het
   een kolom, want op een telefoon is naast elkaar onleesbaar. */
.keuzes { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 46rem) { .keuzes { grid-template-columns: 1fr 1fr; } }
/* Een antwoord dat over twee regels loopt mag zijn buurman niet kleiner maken. */
.keuze, .keuze span { height: 100%; }
.keuze { position: relative; display: block; }
.keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.keuze span {
  display: block; padding: .85rem 1rem; font-size: 1.05rem; font-weight: 500; line-height: 1.35;
  border: 2px solid var(--rand); border-radius: 10px; background: var(--vel); color: var(--inkt); cursor: pointer;
}
.keuze span:hover { border-color: var(--accent); }
.keuze input:checked + span { border-color: var(--accent); background: var(--accent-zacht); color: var(--accent-donker); font-weight: 600; }
.keuze input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

.instrument__knoppen { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; align-items: center; }
.instrument__fout { color: var(--rood); font-weight: 600; margin: .8rem 0 0; }

.uitslag { border-left: 6px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 1rem 1.2rem; background: var(--accent-zacht); }
.uitslag--goed { border-color: var(--groen); background: var(--groen-zacht); }
.uitslag--letop { border-color: var(--warm); background: var(--warm-zacht); }
.uitslag--slecht { border-color: var(--rood); background: var(--rood-zacht); }
.uitslag h2 { margin: 0 0 .4rem; font-size: 1.5rem; }
.uitslag p { margin: 0; }
.uitslag__label { text-transform: uppercase; letter-spacing: .09em; font-size: .75rem; font-weight: 700; color: var(--gedempt); display: block; margin-bottom: .3rem; }

.todo { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.todo > li { display: grid; grid-template-columns: 2rem 1fr; gap: .4rem .6rem; padding: .9rem 0; border-top: 1px solid var(--lijn); align-items: start; }
.todo > li::before { content: ""; width: 1.4rem; height: 1.4rem; border: 2px solid var(--accent); border-radius: 6px; margin-top: .15rem; background: var(--vel); }
.todo > li.todo--goed::before { border-color: var(--groen); background: var(--groen); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 100%; }
.todo__kop { font-weight: 700; color: var(--inkt); }
.todo__tekst { grid-column: 2; color: var(--tekst); margin: 0; }
.todo__tekst a { font-weight: 600; }
.todo--goed .todo__kop { color: var(--groen); }

.instrument__stap { margin-top: 1.5rem; }
.instrument__stap h3 { font-size: 1.2rem; }
.instrument__stap .prose-klein { color: var(--gedempt); font-size: .95rem; }
.instrument__invoer { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .6rem; }
.instrument__invoer input[type="number"], .instrument__invoer input[type="text"], .instrument__invoer select {
  font: inherit; font-size: 1.05rem; padding: .6rem .8rem; border: 2px solid var(--rand); border-radius: 10px; background: var(--vel); color: var(--inkt); min-width: min(8rem, 100%); max-width: 100%;
}
.instrument__invoer input[type="text"] { flex: 1; min-width: min(14rem, 100%); }
.instrument__invoer input:focus-visible, .instrument__invoer select:focus-visible { border-color: var(--accent); outline-offset: 0; }
.instrument__invoer label { font-weight: 600; color: var(--inkt); }
.instrument__eenheid { color: var(--gedempt); }

.signalen { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.signaal { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: start; padding: .8rem 1rem; border: 2px solid var(--rand); border-radius: 10px; background: var(--vel); cursor: pointer; }
.signaal:hover { border-color: var(--accent); }
.signaal input { width: 1.3rem; height: 1.3rem; margin: .2rem 0 0; accent-color: var(--accent); }
.signaal:has(input:checked) { border-color: var(--accent); background: var(--accent-zacht); }
.signaal__kop { font-weight: 600; color: var(--inkt); }
.signaal__uitleg { color: var(--gedempt); font-size: .92rem; display: block; }

/* ---------------------------------------------------------------- voet */
footer.site { background: var(--papier-diep); border-top: 1px solid var(--lijn); margin-top: 3rem; }
.voet { display: grid; gap: 1.75rem 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); padding-block: 2.25rem 2rem; color: var(--gedempt-diep); font-size: .95rem; }
.voet__over { grid-column: 1 / -1; }
@media (min-width: 52rem) { .voet__over { grid-column: span 1; } }
.voet__over p { margin: .6rem 0 0; }
.voet__belofte { list-style: none; padding: 0; margin: .8rem 0 0; }
.voet__belofte li { padding-left: 1.4rem; position: relative; margin: .3rem 0; }
.voet__belofte li::before { content: "\2713"; position: absolute; left: 0; color: var(--warm); font-weight: 700; }
.voet__kolom h2 { font-family: var(--letter); font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--inkt); margin: 0 0 .6rem; }
.voet__kolom ul { list-style: none; padding: 0; margin: 0; }
.voet__kolom li { margin: .35rem 0; }
.voet__kolom a { color: var(--tekst); text-decoration: none; }
.voet__kolom a:hover { color: var(--accent-donker); text-decoration: underline; }
.voet__noot { grid-column: 1 / -1; margin: .5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--lijn); font-size: .88rem; }

/* ---------------------------------------------------------------- afdrukken */
@media print {
  header.site, footer.site, .post__tools, .post__zij, .verder, .zoekvorm, .skip, .crumbs { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose, .post__kop { max-width: none; }
  .prose > ol > li::before { background: #000; }
  a { color: inherit; text-decoration: underline; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* ================================================================== de bewegingslaag (27-09)
   Wat beweegt moet iets zeggen. Elke regel hieronder hangt aan een handeling van de lezer:
   iets komt in beeld, je wijst iets aan, je krijgt een antwoord. Niets beweegt uit zichzelf.

   Alles zit achter [data-beweging="aan"], en dat kenmerk zet `beweging.js` pas als het draait
   EN de bezoeker niet om minder beweging heeft gevraagd. Zonder script en zonder die voorkeur
   staat de site er dus precies zo bij als voorheen: volledig zichtbaar, zonder overgangen.
   De onthul-stand mag nooit in de CSS als uitgangspunt staan; dan leest iemand met een
   scriptblokkering een lege pagina. */

[data-beweging="aan"] [data-onthul="wacht"] { opacity: 0; transform: translateY(14px); }
[data-beweging="aan"] [data-onthul],
[data-beweging="aan"] [data-onthuld] {
  transition: opacity .5s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
[data-beweging="aan"] [data-onthuld="ja"] { opacity: 1; transform: none; }

/* De ingangen op de startpagina: de kaart komt naar je toe en de pijl wijst vooruit. Dat is
   de enige plek waar de site "hier moet je heen" zegt, dus die mag voelbaar zijn. */
[data-beweging="aan"] .momenten__lijst a { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
[data-beweging="aan"] .momenten__lijst a:hover,
[data-beweging="aan"] .momenten__lijst a:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .09); }
[data-beweging="aan"] .momenten__lijst .pijl { transition: transform .18s ease; }
[data-beweging="aan"] .momenten__lijst a:hover .pijl,
[data-beweging="aan"] .momenten__lijst a:focus-visible .pijl { transform: translateX(4px); }

/* Knoppen geven mee als je ze indrukt. Kleine bevestiging dat de klik is aangekomen; op een
   trage pc is dat het verschil tussen een keer klikken en vijf keer klikken. */
[data-beweging="aan"] .btn { transition: transform .12s ease, background-color .18s ease, border-color .18s ease; }
[data-beweging="aan"] .btn:active { transform: translateY(1px); }

/* De uitkomst van een check verschijnt in plaats van dat hij er ineens staat: je ziet dat er
   iets is gebeurd en waar je moet kijken. */
[data-beweging="aan"] .uitslag { animation: uitkomst .34s cubic-bezier(.22, .61, .36, 1) both; }
[data-beweging="aan"] .instrument__stap { animation: uitkomst .22s ease both; }
@keyframes uitkomst { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Ook de reduce-stand krijgt het laatste woord: als de voorkeur na het laden wisselt, blijft
   er niets hangen en staat alle inhoud gewoon zichtbaar. */
@media (prefers-reduced-motion: reduce) {
  [data-beweging="aan"] [data-onthul="wacht"] { opacity: 1; transform: none; }
  [data-beweging="aan"] .uitslag,
  [data-beweging="aan"] .instrument__stap { animation: none; }
}