/* Lettertypen: Atkinson Hyperlegible Next en Mono (SIL Open Font License), zelf gehost. */

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/statisch/letters/atkinson-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/statisch/letters/atkinson-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/statisch/letters/atkinson-next-cursief-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url("/statisch/letters/atkinson-next-cursief-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/statisch/letters/atkinson-next-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/statisch/letters/atkinson-next-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   APAcheck.nl: tabjes en markeerstift.
   Wit papier en inkt. Kleur zit alleen in de tabjes (waar iets moet
   gebeuren) en in de markeerstift (wat jij zelf invult).
   ------------------------------------------------------------------ */

:root {
  --papier: #ffffff;
  --tafel: #eceeea;
  --inkt: #1e1e1e;
  --inkt-zacht: #4a4a46;
  --lijn: rgb(30 30 30 / 0.13);
  --lijn-sterk: rgb(30 30 30 / 0.34);

  /* Tabjes: de kleur zegt waar je iets aanpast. */
  --groen: #7fd8a6;
  --roze: #ff9ebb;
  --blauw: #7cc4fa;
  /* Markeerstift: dit vul je zelf in. */
  --stift: #f9e04b;

  --letter: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --schaduw-vel: 0 1px 1px rgb(30 30 30 / 0.05), 0 8px 20px -10px rgb(30 30 30 / 0.22);
  --schaduw-tab: 0 1px 1.5px rgb(30 30 30 / 0.16);
  --uit: cubic-bezier(0.16, 1, 0.3, 1);

  --stift-vorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 24' preserveAspectRatio='none'%3E%3Cpath d='M1.6 6.4C22 4.9 49 3.7 99 4.6l-.9 15.1C70 21.1 36 21.6.5 19.6z' fill='%23f9e04b'/%3E%3C/svg%3E");
  --vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

  --kleur: var(--groen);

  color-scheme: light;
  accent-color: var(--inkt);
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: rgb(30 30 30 / 0.3) transparent;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--tafel);
  color: var(--inkt);
  font: 400 1.0625rem/1.55 var(--letter);
  font-kerning: normal;
  caret-color: var(--inkt);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--stift); color: var(--inkt); }

h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
ul, ol { padding: 0; }

h1 {
  font-size: clamp(1.75rem, 1.15rem + 2.2vw, 2.625rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h2 {
  font-size: 1.3125rem;
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h3 { font-size: 1.1875rem; line-height: 1.3; font-weight: 750; text-wrap: balance; }

p, li, dd { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--lijn-sterk);
  transition: text-decoration-color 160ms, text-decoration-thickness 160ms;
}
a:hover { text-decoration-color: var(--inkt); text-decoration-thickness: 2px; }

code, .mono {
  font-family: var(--mono);
  font-size: 0.9em;
  font-weight: 500;
}

cite { font-style: italic; }

.getal { font-variant-numeric: tabular-nums; }

.klein { font-size: 0.9375rem; line-height: 1.45; color: var(--inkt-zacht); }

.icoon {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  stroke-width: 2;
  vertical-align: -0.16em;
}

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

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

.overslaan {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 20;
  padding: 10px 14px;
  background: var(--inkt);
  color: var(--papier);
  font-weight: 700;
  text-decoration: none;
}
.overslaan:focus { top: 12px; }

/* ------------------------------------------------------------------
   Markeerstift
   ------------------------------------------------------------------ */

mark.invul {
  color: inherit;
  background: var(--stift-vorm) center / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.05em 0.28em;
  margin: 0 -0.1em;
  font-style: inherit;
}

/* Eén streek die zich over een regel trekt. */
.streek {
  position: relative;
  isolation: isolate;
  display: inline;
}
.streek::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.05em -0.3em -0.02em -0.25em;
  background: var(--stift-vorm) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
}
.streek.is-getrokken::before {
  clip-path: inset(0 0 0 0);
  transition: clip-path 900ms var(--uit);
}

/* ------------------------------------------------------------------
   Kop en voet
   ------------------------------------------------------------------ */

.kop {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 32px);
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  min-height: 44px;
}
.merk__teken { width: 28px; height: 28px; }
.merk__nl { font-weight: 500; color: var(--inkt-zacht); }

.voorbeeldlabel {
  margin-left: auto;
  font-size: 0.875rem;
  color: var(--inkt-zacht);
}
.label {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1.5px var(--inkt);
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.5;
  color: var(--inkt);
}

.tafel {
  flex: 1;
  width: 100%;
}

.voet {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  justify-content: space-between;
  padding: 28px clamp(16px, 3vw, 32px) 32px;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--inkt-zacht);
}

/* Cookies in de voet opent de toestemming opnieuw; hij ziet eruit als de links ernaast. */
.voet__knop {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--lijn-sterk);
  transition: text-decoration-color 160ms, text-decoration-thickness 160ms;
}
.voet__knop:hover { text-decoration-color: var(--inkt); text-decoration-thickness: 2px; }

/* ------------------------------------------------------------------
   Toestemming voor Google Analytics
   Een vel dat onderaan op de tafel ligt, met een inktrand omdat het om
   een keuze vraagt. Ja en nee wegen even zwaar: twee tweede knoppen.
   ------------------------------------------------------------------ */

.toestemming {
  position: fixed;
  z-index: 30;
  left: clamp(16px, 3vw, 32px);
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 2.5vw, 28px);
  max-width: 34rem;
  display: grid;
  gap: 10px;
  padding: 20px clamp(18px, 3vw, 24px);
}
.toestemming.vel { box-shadow: inset 0 0 0 1.5px var(--inkt), var(--schaduw-vel); }
.toestemming__kop {
  font-size: 1.1875rem;
  font-weight: 750;
  line-height: 1.3;
  text-wrap: balance;
}
.toestemming__kop:focus { outline: none; }
.toestemming__kop:focus-visible { outline: 2.5px solid var(--inkt); outline-offset: 3px; }
.toestemming__tekst { max-width: 60ch; }
.toestemming .knoppenrij { gap: 10px; margin-top: 4px; }
/* Even breed als er plaats is; op een telefoon nog naast elkaar. */
.toestemming .knop { flex: 1 1 0; min-width: max-content; padding: 0 14px; }

@media (prefers-reduced-motion: no-preference) {
  .toestemming:not([hidden]) { animation: toestemming-in 420ms var(--uit); }
}
@keyframes toestemming-in {
  from { transform: translateY(14px); }
}

/* ------------------------------------------------------------------
   Vellen en tabjes
   ------------------------------------------------------------------ */

.vel {
  background: var(--papier);
  box-shadow: var(--schaduw-vel);
  border-radius: 1px;
}

/* Een tabje: doorschijnende film met een dekkend puntje aan de buitenkant.
   De sterkte zegt hoe zwaar het weegt: vol, film of alleen omlijnd. */
.tab {
  --film: color-mix(in srgb, var(--kleur) 42%, var(--papier));
  --richting: to bottom;
  --punt: 5px;
  display: inline-flex;
  align-items: center;
  color: var(--inkt);
  font: 700 0.8125rem/1 var(--mono);
  letter-spacing: 0.01em;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgb(30 30 30 / 0.16), var(--schaduw-tab);
  text-decoration: none;
}

.tab--vol { background: var(--kleur); }
.tab--film {
  background: linear-gradient(var(--richting), var(--kleur) 0 var(--punt), var(--film) var(--punt));
}
.tab--omlijnd {
  background: linear-gradient(var(--richting), var(--kleur) 0 var(--punt), var(--papier) var(--punt));
  box-shadow: inset 0 0 0 1.5px var(--lijn-sterk), var(--schaduw-tab);
}
.tab--label {
  background: var(--papier);
  font-family: var(--letter);
  font-size: 0.9375rem;
  font-weight: 750;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px var(--lijn-sterk), var(--schaduw-tab);
}

.tab--mini {
  --richting: to right;
  --punt: 4px;
  width: 22px;
  height: 12px;
  border-radius: 0 3px 3px 0;
  vertical-align: -1px;
}
.tab--mini.tab--film,
.tab--mini.tab--omlijnd { --richting: to left; }

/* ------------------------------------------------------------------
   Knoppen, velden, vinkjes
   ------------------------------------------------------------------ */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 3px;
  font: 750 1rem/1.1 var(--letter);
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--uit), background-color 160ms, box-shadow 160ms;
}
.knop:active { transform: translateY(1px); }

.knop--hoofd {
  background: var(--inkt);
  color: var(--papier);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.25), 0 6px 14px -8px rgb(30 30 30 / 0.6);
}
.knop--hoofd:hover { box-shadow: 0 1px 0 rgb(0 0 0 / 0.25), 0 10px 20px -10px rgb(30 30 30 / 0.7); transform: translateY(-1px); }

.knop--tweede {
  background: var(--papier);
  color: var(--inkt);
  box-shadow: inset 0 0 0 1.5px var(--inkt);
}
.knop--tweede:hover { box-shadow: inset 0 0 0 2.5px var(--inkt); }

.knop--tekst {
  min-height: 44px;
  padding: 0 4px;
  background: none;
  color: var(--inkt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--lijn-sterk);
}
.knop--tekst:hover { text-decoration-color: var(--inkt); text-decoration-thickness: 2px; }

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

.knop--kopieer {
  min-height: 38px;
  padding: 0 12px;
  font-size: 0.9375rem;
  background: var(--papier);
  color: var(--inkt);
  box-shadow: inset 0 0 0 1.5px var(--inkt);
}
.knop--kopieer:hover { box-shadow: inset 0 0 0 2.5px var(--inkt); }
.knop--kopieer.is-gekopieerd,
.knop.is-gekopieerd {
  background: var(--inkt);
  color: var(--papier);
  box-shadow: none;
}
.knop--klein { min-height: 32px; padding: 0 10px; font-size: 0.875rem; }

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.veld { display: grid; gap: 6px; }
.veld label { font-weight: 750; }

input[type="email"],
input[type="text"] {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1.5px solid var(--lijn-sterk);
  border-radius: 3px;
  background: var(--papier);
  color: var(--inkt);
  font: inherit;
  transition: border-color 160ms;
}
input[type="email"]:hover { border-color: rgb(30 30 30 / 0.55); }
input[type="email"]:focus-visible { border-color: var(--inkt); }
input[aria-invalid="true"] { border-color: var(--inkt); border-width: 2px; }
::placeholder { color: var(--inkt-zacht); opacity: 1; }

.melding {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 650;
  line-height: 1.45;
}
.melding .icoon { margin-top: 0.2em; }
.melding[hidden] { display: none; }

.vinkje {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  line-height: 1.45;
}
.vinkje input {
  appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0.08em 0 0;
  border: 1.5px solid var(--inkt);
  border-radius: 3px;
  background: var(--papier);
  cursor: pointer;
  transition: background-color 160ms;
}
.vinkje input:checked {
  background: var(--inkt) var(--vink) center / 16px 16px no-repeat;
}
.vinkje input:hover { box-shadow: inset 0 0 0 1px var(--inkt); }

/* ------------------------------------------------------------------
   Uploaden
   ------------------------------------------------------------------ */

.uploaden {
  display: grid;
  gap: 48px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 8px clamp(16px, 3vw, 32px) 24px;
}

.uploaden__begin { display: grid; gap: 20px; align-content: start; }
.uploaden__begin h1 { max-width: 16ch; }
.inleiding { max-width: 60ch; font-size: 1.125rem; }

.inlevervel {
  display: grid;
  gap: 22px;
  padding: clamp(18px, 3vw, 28px);
  margin-top: 8px;
}

/* Wie nog niet is ingelogd: eerst het e-mailadres, met de stappen erboven. */
.inlevervel__begin { display: grid; gap: 10px; }
.inlevervel__begin h2 { font-size: 1.125rem; }
.inlevervel__begin .stappenlijst { max-width: 52ch; }

/* Het formulier om Volledig te starten telt niet mee in de opmaak van het keuzevel. */
.keuzeformulier { display: contents; }

/* Eerdere controles van wie is ingelogd, onder het formulier. */
.eerdere { display: grid; gap: 10px; padding: 18px clamp(18px, 3vw, 28px); }
.eerdere h2 { font-size: 1.125rem; }
.eerdere__lijst { display: grid; gap: 8px; list-style: none; padding: 0; }
.eerdere__lijst li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; min-width: 0; }
.eerdere__lijst code { overflow-wrap: anywhere; }

.neerleggen {
  display: grid;
  gap: 10px;
  padding: 20px;
  border: 1.5px solid var(--lijn-sterk);
  border-radius: 3px;
  background: color-mix(in srgb, var(--tafel) 55%, var(--papier));
  transition: border-color 160ms, background-color 160ms, box-shadow 160ms;
}
.neerleggen.is-erboven {
  border-color: var(--inkt);
  background: var(--papier);
  box-shadow: inset 0 0 0 2px var(--inkt);
}
.neerleggen.is-fout { border-color: var(--inkt); border-width: 2px; }
.neerleggen:has(input:focus-visible) {
  outline: 2.5px solid var(--inkt);
  outline-offset: 3px;
}

.neerleggen__leeg {
  display: flex;
  align-items: center;
  gap: 22px;
}
.neerleggen__zin { font-size: 1.1875rem; font-weight: 750; }
.neerleggen__of {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  color: var(--inkt-zacht);
}
.neerleggen__of .knop { color: var(--inkt); }

.neerleggen__gekozen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}
.neerleggen__gekozen[hidden] { display: none; }
.neerleggen__icoon .icoon { width: 28px; height: 28px; }
.neerleggen__bestand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-family: var(--mono);
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.neerleggen__bestand .klein { font-family: var(--letter); font-weight: 400; }
.neerleggen__gekozen .knop--tekst { margin-left: auto; }

/* Een klein verslag met twee tabjes: wat je straks terugkrijgt. */
.blad {
  position: relative;
  flex: none;
  display: grid;
  align-content: start;
  gap: 5px;
  width: 58px;
  height: 74px;
  padding: 12px 10px;
  background: var(--papier);
  box-shadow: var(--schaduw-vel), inset 0 0 0 1px var(--lijn);
  margin-right: 12px;
}
.blad__regel { height: 3px; background: rgb(30 30 30 / 0.28); border-radius: 1px; }
.blad__regel--kort { width: 60%; }
.blad__tab {
  position: absolute;
  left: 100%;
  top: var(--hoogte);
  width: 14px;
  height: 11px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(to left, var(--kleur) 0 4px, color-mix(in srgb, var(--kleur) 42%, var(--papier)) 4px);
  box-shadow: inset 0 0 0 1px rgb(30 30 30 / 0.16), var(--schaduw-tab);
}

.neerleggen__uitleg { margin: 0; }

.privacyzin {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
}
.privacyzin .icoon { margin-top: 0.2em; color: var(--inkt); }

.uploaden__naast { display: grid; gap: 48px; align-content: start; }

.niveaus { display: grid; gap: 12px; }
.niveaus > p { max-width: 52ch; }

.niveaulijst {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.niveau { position: relative; padding-top: 30px; }
.niveau__tab {
  position: absolute;
  top: 0;
  left: 16px;
  height: 31px;
  padding: 0 14px;
  border-radius: 5px 5px 0 0;
}
.niveau__vel {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
  background: var(--papier);
  box-shadow: var(--schaduw-vel);
}
.niveau__vel > p { max-width: 60ch; }

.feiten { display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.45; }
.feiten > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--lijn);
}
.feiten dt { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; }
.feiten dt .icoon { margin-top: 0.15em; }
.feiten dd { color: var(--inkt-zacht); }

.proef { display: grid; gap: 8px; }
.proef .bevinding { margin-top: 10px; }

@media (min-width: 1040px) {
  .uploaden {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(40px, 5vw, 72px);
    padding-top: 24px;
  }
}

/* ------------------------------------------------------------------
   Werkblad: de strook met het verslag naast de werklijst
   ------------------------------------------------------------------ */

.werkblad {
  --strookbreedte: 62px;
  display: grid;
  grid-template-columns: var(--strookbreedte) minmax(0, 1fr);
  column-gap: 22px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 8px clamp(16px, 3vw, 32px) 32px 12px;
}

.strook {
  position: sticky;
  top: 12px;
  align-self: start;
  height: calc(100dvh - 24px);
  max-height: 1100px;
}

.strook__vel {
  position: absolute;
  inset: 0 14px 0 0;
  background: var(--papier);
  box-shadow: var(--schaduw-vel), inset 0 0 0 1px var(--lijn);
}

.strook__regels {
  position: absolute;
  inset: 10px 0;
  width: 100%;
  height: calc(100% - 20px);
  overflow: visible;
}
.strook__regels line { stroke: rgb(30 30 30 / 0.2); stroke-width: 1.5; }
.strook__regels .r-kop1 { stroke: rgb(30 30 30 / 0.7); stroke-width: 2.5; }
.strook__regels .r-kop2,
.strook__regels .r-titel { stroke: rgb(30 30 30 / 0.5); stroke-width: 2; }

.strook__kop { display: none; }

.strook__tabjes {
  list-style: none;
  position: absolute;
  inset: 10px 0;
}

.strook__tab {
  --richting: to left;
  --punt: 5px;
  position: absolute;
  top: calc(var(--positie) * 1%);
  left: 100%;
  width: 18px;
  height: 13px;
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%) scaleX(var(--rek, 1));
  transform-origin: left center;
  transition: transform 320ms var(--uit), opacity 320ms;
}
.strook__tab::before {
  content: "";
  position: absolute;
  inset: -6px -8px -6px -4px;
}
.strook__tab:hover,
.strook__tab.is-aangewezen { --rek: 1.35; }
.strook__tab.is-actief {
  --rek: 1.45;
  box-shadow: inset 0 0 0 1.5px var(--inkt), var(--schaduw-tab);
}
.strook__tab.is-opgelost {
  --rek: 0.3;
  opacity: 0.55;
}

/* Breder werkblad: ruimte voor een strook met kopjes. */
@media (min-width: 1100px) {
  .werkblad { --strookbreedte: 104px; column-gap: 36px; padding-left: clamp(16px, 3vw, 32px); }
  .strook__kop {
    display: block;
    position: absolute;
    top: calc(10px + (100% - 20px) * var(--positie) / 100);
    left: 0;
    transform: translate(calc(-100% - 8px), -50%);
    font: 700 0.8125rem/1 var(--letter);
    color: var(--inkt-zacht);
    white-space: nowrap;
  }
  .werkblad { padding-left: 64px; }
}

/* Telefoon: de strook ligt dwars bovenaan en blijft staan. */
@media (max-width: 639px) {
  .werkblad {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 16px 32px;
  }
  .strook {
    top: 0;
    z-index: 6;
    height: 52px;
    margin: 0 -16px;
    background: var(--tafel);
    box-shadow: 0 1px 0 var(--lijn);
  }
  .strook__vel {
    inset: 8px 16px 20px;
  }
  .strook__regels { display: none; }
  .strook__kop {
    display: block;
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: calc(10px + (100% - 20px) * var(--positie) / 100);
    width: 2px;
    background: rgb(30 30 30 / 0.55);
    font-size: 0;
    color: transparent;
  }
  .strook__tabjes { inset: 0 10px; }
  .strook__tab {
    --richting: to top;
    top: 100%;
    left: calc(var(--positie) * 1%);
    width: 12px;
    height: 16px;
    border-radius: 0 0 3px 3px;
    transform: translateX(-50%) scaleY(var(--rek, 1));
    transform-origin: center top;
  }
  .werkblad--wachten .strook { display: none; }
}

/* ------------------------------------------------------------------
   Werklijst
   ------------------------------------------------------------------ */

.werklijst {
  display: grid;
  gap: 28px;
  align-content: start;
  min-width: 0;
}

.stand { display: grid; gap: 12px; padding-top: 12px; }
.stand h1 { max-width: 20ch; }
.stand > p { max-width: 64ch; }
.stand__telling {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.telling { display: inline-flex; align-items: center; gap: 8px; }
.stand__wat { color: var(--inkt-zacht); overflow-wrap: anywhere; }
.stand__wat code { color: var(--inkt); }

.eindproduct,
.aanbod {
  display: grid;
  gap: 14px;
  margin-top: 8px;
  padding: 18px 20px;
  background: var(--papier);
  box-shadow: var(--schaduw-vel);
}

/* Sleutel en voortgang */
.legenda {
  display: grid;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.legenda__voortgang { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 1.0625rem; }
.legenda__kop { font-size: 0.9375rem; font-weight: 800; }
.sleutel {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.sleutel li { display: inline-flex; align-items: center; gap: 7px; }
.sleutel__uitleg { display: none; }
.sleutel mark { font-weight: 650; }

/* Half scherm naast Word: de sleutel blijft bovenin staan. */
@media (min-width: 640px) and (max-width: 1099px) {
  .legenda {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: -8px 0 -12px;
    padding: 10px 0;
    background: var(--tafel);
    box-shadow: 0 1px 0 var(--lijn);
  }
  .legenda__kop { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sleutel { gap: 4px 14px; font-size: 0.875rem; }
  .sleutel__lang, .sleutel .sleutel__sterkte { display: none; }
  .legenda__voortgang { order: 2; margin-left: auto; font-size: 0.9375rem; white-space: nowrap; }
  .legenda__woord { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bevinding { scroll-margin-top: 96px; }
}

/* Breed scherm: de sleutel staat rechts in een eigen kolom. */
@media (min-width: 1100px) {
  .werklijst {
    grid-template-columns: minmax(0, 46rem) minmax(0, 17rem);
    column-gap: 44px;
  }
  .werklijst > * { grid-column: 1; }
  .legenda {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: start;
    position: sticky;
    top: 24px;
    gap: 14px;
    padding-top: 20px;
  }
  .sleutel { display: grid; gap: 10px; }
  .sleutel li { align-items: flex-start; }
  .sleutel li .tab, .sleutel li mark { margin-top: 0.2em; flex: none; }
  .sleutel__uitleg { display: inline; color: var(--inkt-zacht); }
  .sleutel__breuk { margin-top: 8px; }
}

.bevindingen { display: grid; gap: 22px; }

.groepskop {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 18px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid var(--inkt);
}
.groepskop h2 { font-size: 1.125rem; }
.groepskop:first-child { margin-top: 0; }
.groepskop__noot { font-size: 0.9375rem; font-weight: 500; color: var(--inkt-zacht); }

/* ------------------------------------------------------------------
   Een bevinding: een vel met een tabje erop
   ------------------------------------------------------------------ */

.bevinding {
  position: relative;
  padding-top: 29px;
  scroll-margin-top: 72px;
}

.bevinding__tab {
  position: absolute;
  top: 0;
  left: 18px;
  height: 30px;
  padding: 0 12px;
  /* Het onderwerp is een label, niets om letterlijk over te nemen: geen Mono. */
  font-family: var(--letter);
  border-radius: 5px 5px 0 0;
  transform-origin: center bottom;
  transition: transform 320ms var(--uit), color 200ms;
}

.bevinding__vel {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 20px clamp(16px, 3vw, 26px) 18px;
  background: var(--papier);
  box-shadow: var(--schaduw-vel);
  transition: box-shadow 200ms, opacity 320ms;
}
.bevinding.is-aangewezen .bevinding__vel {
  box-shadow: var(--schaduw-vel), 0 0 0 2px var(--inkt);
}

.bevinding__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: start;
}

.bevinding__titel { padding-top: 6px; }

.bevinding__titel span {
  background: linear-gradient(var(--inkt), var(--inkt)) no-repeat 0 58% / 0% 2px;
  transition: background-size 480ms var(--uit);
}

.bevinding__meta {
  margin-top: -8px;
  color: var(--inkt-zacht);
  font-size: 0.9375rem;
}
.bevinding__meta strong { color: var(--inkt); }

.bevinding__inhoud { display: grid; gap: 14px; }
.bevinding__inhoud > p { max-width: 65ch; }

.zoek {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--tafel) 60%, var(--papier));
  border-radius: 3px;
}
.zoek__label {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 700;
}
.zoek__tekst {
  min-width: 0;
  padding: 4px 8px;
  background: var(--papier);
  box-shadow: inset 0 0 0 1px var(--lijn);
  border-radius: 2px;
  overflow-wrap: anywhere;
  font-size: 0.9375rem;
}

.versies {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--lijn);
}
.versie {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 4px 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lijn);
}
.versie dt { font-size: 0.875rem; font-weight: 800; padding-top: 0.15em; }
.versie--nu dd { color: var(--inkt-zacht); }
.versie--zo dd { color: var(--inkt); }
.anders {
  background: color-mix(in srgb, var(--kleur) 45%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 var(--inkt);
}

.actie { max-width: 65ch; }

.nagezocht {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.9375rem;
}
.nagezocht > .icoon { margin-top: 0.2em; }
.nagezocht a { display: inline-flex; align-items: center; gap: 4px; }
.nagezocht a .icoon { width: 0.95em; height: 0.95em; }

.ook summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  font-weight: 700;
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
}
.ook summary::-webkit-details-marker { display: none; }
.ook summary .icoon { transition: transform 200ms var(--uit); }
.ook[open] summary .icoon { transform: rotate(180deg); }
.ook ul { list-style: none; display: grid; gap: 8px; margin-top: 6px; }
.ook li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ook .zoek__tekst { flex: 0 1 auto; }

/* De regel onder een bevinding: onze eigen uitleg, dus geen citaat. */
.regel { display: grid; gap: 6px; }
.regel__kop { font-size: 0.8125rem; font-weight: 700; color: var(--inkt); }
.regel__tekst {
  max-width: 65ch;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
}
.regel__bron { font-size: 0.8125rem; color: var(--inkt-zacht); }

.afvinken {
  align-items: center;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  font-weight: 750;
}
.afvinken input { margin: 0; }
.afvinken:hover { box-shadow: inset 0 0 0 1.5px var(--inkt); }

/* Afgevinkt: het tabje gaat plat, de bevinding blijft doorgehaald staan. */
.bevinding.is-opgelost .bevinding__tab { transform: scaleY(0.3); color: transparent; }
.bevinding.is-opgelost .bevinding__vel { opacity: 0.7; box-shadow: 0 0 0 1px var(--lijn); }
.bevinding.is-opgelost .bevinding__titel span { background-size: 100% 2px; }
.bevinding.is-opgelost .bevinding__inhoud { display: none; }
.bevinding.is-opgelost .bevinding__meta { margin-top: -6px; }

/* ------------------------------------------------------------------
   Volledig: de nieuwe bronnenlijst
   ------------------------------------------------------------------ */

.openpunten,
.nieuwe-lijst,
.verder { display: grid; gap: 14px; margin-top: 20px; }
.openpunten > p, .verder > p { max-width: 64ch; }
.openpunten ul { list-style: none; display: grid; gap: 8px; }
.openpunten li {
  padding: 12px 16px;
  background: var(--papier);
  box-shadow: var(--schaduw-vel);
  max-width: 65ch;
}
.verwijzing { display: block; margin-top: 2px; font-size: 0.9375rem; color: var(--inkt-zacht); }

.lijstvel {
  padding: clamp(20px, 4vw, 40px) clamp(18px, 5vw, 48px);
  line-height: 1.9;
}
.lijstvel__kop {
  font-family: var(--letter);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.4;
  margin-bottom: 12px;
}
.vermeldingen { list-style: none; }
.vermeldingen li {
  padding-left: 1.27cm;
  text-indent: -1.27cm;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
   Gratis: wat Volledig er nog bij doet
   ------------------------------------------------------------------ */

.verder { padding-top: 26px; border-top: 1.5px solid var(--inkt); }
.keuzes { display: grid; gap: 18px; margin-top: 6px; }
.keuze { padding-top: 30px; }
.keuze .niveau__vel { gap: 16px; }
.kenmerken { list-style: none; display: grid; gap: 8px; }
.kenmerken li { display: flex; gap: 10px; align-items: flex-start; }
.kenmerken .icoon { margin-top: 0.22em; }

@media (min-width: 760px) {
  .keuzes { grid-template-columns: 1fr 1fr; }
  .keuze .feiten > div { grid-template-columns: 1fr; gap: 2px; }
}

/* ------------------------------------------------------------------
   Kijk in je mail
   ------------------------------------------------------------------ */

.tafel--smal { padding: 8px 16px 24px; }
.bericht {
  display: grid;
  gap: 16px;
  max-width: 36rem;
  margin: clamp(8px, 6vh, 64px) auto 0;
}
.bericht__icoon .icoon { width: 40px; height: 40px; stroke-width: 1.6; }
.adres { overflow-wrap: anywhere; font-weight: 750; }
.bericht__vel { display: grid; gap: 14px; margin-top: 12px; padding: 22px clamp(18px, 4vw, 28px); }
.bericht__vel h2 { font-size: 1.125rem; }
.stappenlijst { display: grid; gap: 6px; padding-left: 1.2em; }

/* ------------------------------------------------------------------
   Wachten
   ------------------------------------------------------------------ */

.wachten {
  display: grid;
  gap: 20px;
  align-content: start;
  max-width: 40rem;
  padding-top: 12px;
}
.wachten__bestand code { overflow-wrap: anywhere; color: var(--inkt-zacht); }

.stappen { list-style: none; display: grid; gap: 4px; margin-top: 8px; }
.stap {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 0;
  color: var(--inkt-zacht);
  font-size: 1.125rem;
}
.stap__teken {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 0.05em;
  border: 1.5px solid var(--lijn-sterk);
  border-radius: 50%;
  color: transparent;
  transition: background-color 300ms, border-color 300ms, color 300ms;
}
.stap__teken .icoon { width: 16px; height: 16px; stroke-width: 3; }
.stap__tekst { display: grid; gap: 2px; }
.stap__duur { font-size: 0.9375rem; color: var(--inkt-zacht); }

.stap.is-klaar { color: var(--inkt); }
.stap.is-klaar .stap__teken { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }
.stap.is-bezig { color: var(--inkt); font-weight: 750; }
.stap.is-bezig .stap__teken { border-color: var(--inkt); border-width: 2px; }
.stap.is-bezig .stap__duur { font-weight: 400; }

/* De markeerstift trekt zich over de stap waar we mee bezig zijn. */
.stap.is-bezig .streek::before { animation: streek 3.2s var(--uit) infinite; }
.werkblad--wachten.is-klaar .streek::before { animation: none; }

@keyframes streek {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  45% { clip-path: inset(0 0 0 0); opacity: 1; }
  80% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

.wachten__tijd { font-weight: 700; font-variant-numeric: tabular-nums; }
.wachten__vel { display: grid; gap: 10px; padding: 20px clamp(18px, 3vw, 26px); }
.wachten__vel h2 { font-size: 1.1875rem; }
.wachten__vel[hidden] { display: none; }
.wachten__klaar .knop { justify-self: start; margin-top: 4px; }
.wachten__noot { margin-top: -4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .stap.is-bezig .streek::before { animation: none; clip-path: inset(0 0 0 0); }
}

@media print {
  .kop, .voet, .strook, .legenda, .afvinken, .knop, .verder, .toestemming { display: none !important; }
  body { background: var(--papier); }
  .werkblad { display: block; }
  .bevinding__vel, .vel { box-shadow: none; border: 1px solid var(--lijn-sterk); }
}

[hidden] { display: none !important; }
.knop:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Telefoon: nu en zo moet het onder elkaar, en kiezen in plaats van slepen. */
@media (max-width: 639px) {
  .versie { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bevinding__kop { display: contents; }
  .bevinding__titel { order: 1; padding-top: 0; }
  .bevinding__meta { order: 2; }
  .afvinken { order: 3; justify-self: start; }
  .bevinding__inhoud { order: 4; }
  .neerleggen { padding: 16px; }
  .neerleggen__leeg .blad,
  .neerleggen__zin,
  .neerleggen__of-woord { display: none; }
  .neerleggen__leeg > div { flex: 1; }
  .neerleggen__of { margin-top: 0; }
  .neerleggen__of .knop { width: 100%; }
}
.alleen-telefoon { display: none; }
@media (max-width: 639px) { .alleen-telefoon { display: inline; } }

/* Gratis: het aanbod van Volledig. Bovenaan, bij de bronnenlijst, in de
   zijkolom en onderaan; nooit tussen de bevindingen. */
.aanbod > p { max-width: 62ch; }
.legenda__aanbod { display: none; }
@media (min-width: 1100px) {
  .legenda__aanbod {
    display: grid;
    gap: 12px;
    margin-top: 12px;
    padding: 16px;
    background: var(--papier);
    box-shadow: var(--schaduw-vel);
    font-size: 0.9375rem;
    line-height: 1.45;
    transition: opacity 320ms var(--uit), transform 320ms var(--uit), visibility 0s 0s;
  }
  .legenda__aanbod .knop { text-align: center; line-height: 1.25; padding: 10px 14px; }
  /* Zolang het aanbod bovenaan in beeld is, hoeft het hier niet ook. */
  .legenda__aanbod.is-weg {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 200ms, transform 200ms, visibility 0s 200ms;
  }
}

.versiekeuze {
  display: grid;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.versiekeuze legend { margin-bottom: 6px; padding: 0; font-weight: 750; }
.keuzerondje {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.keuzerondje input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.12em 0 0;
  accent-color: var(--inkt);
  cursor: pointer;
}
.versiekeuze__upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding-left: 30px;
}
.versiekeuze__upload .klein { overflow-wrap: anywhere; }

/* Vergelijking van Gratis en Volledig. */
.vergelijking {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
}
.vergelijking th,
.vergelijking td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--lijn);
  text-align: left;
  vertical-align: top;
}
.vergelijking thead th {
  padding-top: 0;
  border-bottom: 1.5px solid var(--inkt);
  font-weight: 800;
}
.vergelijking tbody th { font-weight: 400; padding-left: 0; }
.vergelijking td,
.vergelijking thead th:not(:first-child) { width: 5.5rem; text-align: center; }
.vergelijking td .icoon { width: 20px; height: 20px; stroke-width: 2.6; }
.vergelijking__nee { color: var(--inkt-zacht); }
.vergelijking__nee .icoon { stroke-width: 2; }

.keuze__voorbeeld { display: grid; gap: 8px; }
.keuze__kop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-weight: 750;
}
.keuze__kop .label { font-weight: 700; }

/* ------------------------------------------------------------------
   Uitlegpagina: Gratis of Volledig
   ------------------------------------------------------------------ */

.uitleg {
  display: grid;
  gap: 48px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px clamp(16px, 3vw, 32px) 24px;
}
.uitleg__kop { display: grid; gap: 12px; padding-top: 4px; }
.uitleg__kop h1 { max-width: 18ch; }

.uitleg__deel { display: grid; gap: 16px; max-width: 46rem; }
.uitleg__deel > p { max-width: 64ch; }

/* Twee uitslagen naast elkaar */
.naast { display: grid; gap: 12px; margin-top: -16px; }
.naast__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-size: 0.9375rem;
  color: var(--inkt-zacht);
}
.naast__vellen {
  display: grid;
  gap: 24px;
  align-items: start;
}
@media (min-width: 700px) {
  .naast__vellen { grid-template-columns: 1fr 1fr; }
}
.uitslagvel { padding-top: 30px; }
.uitslagvel .niveau__tab { margin: 0; font-size: 0.9375rem; }
.uitslagvel__telling { font-size: 1.125rem; }
.uitslagvel__inhoud {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  column-gap: 26px;
  align-items: stretch;
}

.ministrook {
  position: relative;
  min-height: 260px;
  background: var(--papier);
  box-shadow: var(--schaduw-vel), inset 0 0 0 1px var(--lijn);
}
.ministrook__regels {
  position: absolute;
  inset: 8px 0;
  width: 100%;
  height: calc(100% - 16px);
}
.ministrook__regels line { stroke: rgb(30 30 30 / 0.2); stroke-width: 1.5; }
.ministrook__regels .r-kop1 { stroke: rgb(30 30 30 / 0.7); stroke-width: 2.5; }
.ministrook__regels .r-kop2,
.ministrook__regels .r-titel { stroke: rgb(30 30 30 / 0.5); stroke-width: 2; }
.ministrook__tab {
  --richting: to left;
  --punt: 4px;
  position: absolute;
  top: calc(8px + (100% - 16px) * var(--positie) / 100);
  left: 100%;
  width: 15px;
  height: 11px;
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
}
.tab.is-extra { box-shadow: inset 0 0 0 2.5px var(--inkt), var(--schaduw-tab); }

.plekken {
  list-style: none;
  display: grid;
  gap: 5px;
  align-content: start;
  font-size: 0.875rem;
  line-height: 1.4;
}
.plekken li { display: flex; gap: 10px; align-items: flex-start; }
.plekken li .tab { flex: none; margin-top: 0.25em; }
.plekken li.is-extra { font-weight: 750; }

.minilijst {
  display: grid;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--lijn);
}
.minilijst__kop { font-weight: 750; }
.minilijst .vermeldingen { font-size: 0.9375rem; line-height: 1.7; }
.minilijst .vermeldingen li { padding-left: 1.27cm; text-indent: -1.27cm; }

.naast__sleutel {
  display: block;
  max-width: 72ch;
  line-height: 1.9;
}
.naast__sleutel .tab { margin: 0 2px; }

/* De tabel met tekst in plaats van vinkjes */
.vergelijking--tekst { margin-top: 4px; }
.vergelijking--tekst td,
.vergelijking--tekst thead th:not(:first-child) { width: 36%; text-align: left; }
.vergelijking--tekst td { color: var(--inkt-zacht); }
.vergelijking--tekst tbody th { font-weight: 700; white-space: nowrap; }
.vergelijking--tekst tbody th .icoon { margin-right: 6px; }

/* Voorbeelden: een vel met een tabje, zoals een bevinding */
.voorbeelden {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 28rem), 1fr));
  gap: 22px;
  align-items: start;
}
.uitleg__deel--breed { max-width: none; }
.voorbeeld { position: relative; padding-top: 29px; }
.voorbeeld__tab {
  position: absolute;
  top: 0;
  left: 18px;
  height: 30px;
  padding: 0 12px;
  font-family: var(--letter);
  border-radius: 5px 5px 0 0;
}
.voorbeeld__vel {
  display: grid;
  gap: 12px;
  padding: 18px clamp(16px, 3vw, 24px);
  background: var(--papier);
  box-shadow: var(--schaduw-vel);
}
.voorbeeld__titel { font-size: 1.1875rem; line-height: 1.3; font-weight: 750; text-wrap: balance; }
.voorbeeld__uitleg { max-width: 65ch; }

.uitleg__deel .groepskop { margin-top: 12px; }
.uitleg__deel .groepskop h3 { font-size: 1.125rem; }

.kenmerken--nee li { color: var(--inkt); }
.kenmerken--nee .icoon { color: var(--inkt-zacht); }

/* Vragen */
.vragen { display: grid; border-top: 1.5px solid var(--inkt); }
.vraag { border-bottom: 1px solid var(--lijn); }
.vraag summary {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 48px;
  padding: 12px 0;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary .icoon { margin-top: 0.2em; transition: transform 200ms var(--uit); }
.vraag[open] summary .icoon { transform: rotate(180deg); }
.vraag p { max-width: 64ch; padding: 0 0 16px 30px; }

.uitleg__slot {
  display: grid;
  gap: 12px;
  max-width: 46rem;
  padding: 24px clamp(18px, 4vw, 32px);
}
.uitleg__slot .knop { justify-self: start; }

/* Privacy: dezelfde leesvorm als de uitlegpagina. */
.privacy .stappenlijst { max-width: 64ch; gap: 8px; }
.privacy .feiten { max-width: 64ch; font-size: 1rem; }
.privacy .feiten > div { grid-template-columns: 13rem 1fr; }
@media (max-width: 560px) {
  .privacy .feiten > div { grid-template-columns: 1fr; gap: 2px; }
}

/* De verborgen bestandskeuze toont haar focus op de knop. */
.versiekeuze__upload:has(input:focus-visible) .knop {
  outline: 2.5px solid var(--inkt);
  outline-offset: 3px;
}