/* =========================================================================
   Eerst Jezelf, stijlblad
   Eén bestand, geen build-tools. Alles begint bij de tokens hieronder.
   Wil je de kleuren of het lettertype wijzigen? Pas alleen :root aan.
   ========================================================================= */

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

:root {
  /* Papier & inkt, de basis van het reisjournaal */
  --papier:        #f6f1e8;
  --papier-warm:   #fffdf7;
  --papier-diep:   #ede5d7;
  --inkt:          #24211c;
  --inkt-zacht:    #5c5347;
  --inkt-licht:    #6d6355;

  /* Spoor & sein, de accenten */
  --rail:          #c6b9a3;
  --groen:         #2e5a4b;
  --groen-licht:   #3f7a66;
  --messing:       #a9773c;
  --messing-licht: #c99a5d;

  /* Accent: standaard messing, per pagina of per groep overschreven */
  --accent:       #a9773c;
  --accent-diep:  #7d5527;

  /* Vlakken */
  --lijn:          #ddd2be;
  --schaduw:       0 1px 2px rgba(90, 62, 30, .05), 0 10px 30px -14px rgba(90, 62, 30, .22);
  --schaduw-zacht: 0 1px 1px rgba(90, 62, 30, .04), 0 4px 14px -8px rgba(90, 62, 30, .16);

  /* Typografie, Fraunces voor koppen (warm, verhalend), Inter voor lopende tekst */
  --serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Ritme */
  --maat:      70rem;   /* brede schil */
  --leesmaat:  36rem;   /* leesbreedte, ca. 68 tekens */
  --ruimte:    clamp(3.5rem, 8vw, 7rem);
  --radius:    8px;
  --radius-klein: 4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:        #171614;
    --papier-warm:   #1f1e1a;
    --papier-diep:   #121110;
    --inkt:          #ece4d6;
    --inkt-zacht:    #aca294;
    --inkt-licht:    #857c70;

    --rail:          #4a443a;
    --groen:         #90c2ad;
    --groen-licht:   #a8d3c0;
    --messing:       #d3a469;
    --messing-licht: #e2ba85;

    --accent:        #d3a469;
    --accent-diep:   #e2ba85;
    --lijn:          #33302a;
    --schaduw:       0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6);
    --schaduw-zacht: 0 1px 1px rgba(0, 0, 0, .25), 0 4px 14px -8px rgba(0, 0, 0, .5);
  }
}

/* --- 2. Reset & basis --------------------------------------------------- */

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

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

body {
  margin: 0;
  background-color: var(--papier);
  /* Papiernerf: fijne ruis plus twee warme lichtvlekken. Alles inline,
     dus geen extra verzoek naar een server. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(201, 154, 93, .16), transparent 70%),
    radial-gradient(ellipse at 12% 30%, rgba(169, 119, 60, .06), transparent 45%),
    radial-gradient(ellipse at 92% 70%, rgba(46, 90, 75, .05), transparent 42%);
  background-attachment: fixed;
  color: var(--inkt);
  font-family: var(--sans);
  font-size: clamp(1.0625rem, .4vw + 1rem, 1.1875rem);
  line-height: 1.75;
  letter-spacing: -.009em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 550;
  font-optical-sizing: auto;
  line-height: 1.14;
  letter-spacing: -.018em;
  margin: 0 0 .6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.35rem, 5.6vw, 3.75rem);
  font-weight: 600;
  letter-spacing: -.028em;
  line-height: 1.06;
}
h2 { font-size: clamp(1.55rem, 3.1vw, 2.05rem); margin-top: 2.3em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.34rem); margin-top: 1.8em; letter-spacing: -.012em; }

p { text-wrap: pretty; }
p, ul, ol { margin: 0 0 1.25em; }
ul, ol { padding-left: 1.3em; }
li { margin-bottom: .5em; }
li::marker { color: var(--accent); }

strong { font-weight: 650; }
em { font-style: italic; }

a {
  color: var(--groen);
  text-decoration-color: color-mix(in srgb, var(--groen) 35%, transparent);
  text-underline-offset: .18em;
  transition: color .18s ease, text-decoration-color .18s ease;
}
a:hover { color: var(--messing); text-decoration-color: currentColor; }

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

hr {
  border: 0;
  border-top: 1px dashed var(--rail);
  margin: 3rem 0;
}

::selection { background: color-mix(in srgb, var(--messing) 30%, transparent); }

/* --- 3. Structuur ------------------------------------------------------- */

.schil {
  width: min(100% - 2.5rem, var(--maat));
  margin-inline: auto;
}

.lees { max-width: var(--leesmaat); margin-inline: auto; }
.lees-ruim { max-width: 44rem; margin-inline: auto; }

.sectie { padding-block: var(--ruimte); }
.artikel-kop + .sectie, main > .sectie:first-child { padding-top: clamp(2rem, 4vw, 3.2rem); }
.sectie--smal { padding-block: calc(var(--ruimte) * .6); }

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--groen);
  color: var(--papier-warm);
  padding: .7rem 1.1rem;
  z-index: 100;
}
.overslaan:focus {
  left: .75rem;
  top: .75rem;
}

/* --- 4. Kop van de site ------------------------------------------------- */

.site-kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--papier) 86%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
}
/* De onderrand van de kop is zelf een stukje spoor */
.site-kop::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background-image: linear-gradient(to right, var(--rail) 50%, transparent 0);
  background-size: 8px 1px;
}

/* Leesvoortgang: een dunne messing lijn bovenaan, als een spoor dat volloopt */
.voortgang {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--voortgang, 0));
  transform-origin: 0 50%;
  background: linear-gradient(to right, var(--groen), var(--messing));
  z-index: 60;
  pointer-events: none;
}

.site-kop__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .85rem;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--inkt);
  text-decoration: none;
}
.merk:hover { color: var(--groen); }
.merk__glyph {
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  color: var(--groen);
}

.nav { display: flex; align-items: center; gap: .2rem; }

.nav a {
  display: inline-block;
  padding: .45rem .7rem;
  font-size: .93rem;
  color: var(--inkt-zacht);
  text-decoration: none;
  border-radius: var(--radius);
}
.nav a:hover { color: var(--inkt); background: var(--papier-diep); }
.nav a[aria-current="page"] {
  color: var(--inkt);
  box-shadow: inset 0 -2px 0 var(--messing);
}

.nav-knop {
  display: none;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  color: var(--inkt);
  font: inherit;
  font-size: .9rem;
  padding: .4rem .7rem;
  cursor: pointer;
}

@media (max-width: 46rem) {
  .nav-knop { display: inline-flex; }
  .nav {
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--papier-warm);
    border-bottom: 1px solid var(--lijn);
    padding: .5rem 1.25rem 1rem;
    box-shadow: var(--schaduw);
  }
  .nav[hidden] { display: none; }
  .nav a { padding: .7rem .2rem; font-size: 1rem; border-bottom: 1px dashed var(--lijn); }
  .nav a:last-child { border-bottom: 0; }
}

/* --- 4b. Beeldvullende kop --------------------------------------------- */

.held {
  position: relative;
  min-height: clamp(30rem, 76vh, 44rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.held--kort { min-height: clamp(20rem, 46vh, 28rem); }
.held--kort h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }

.held__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 45%;
  z-index: -2;
}
.held::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(24, 20, 14, .78) 0%, rgba(24, 20, 14, .42) 42%, rgba(24, 20, 14, .06) 78%, transparent 100%),
    linear-gradient(to right, rgba(24, 20, 14, .5) 0%, rgba(24, 20, 14, .12) 52%, transparent 78%);
}
.held__over {
  padding-block: clamp(2.5rem, 6vw, 5rem);
  max-width: 46rem;
  margin-inline: auto;
  width: min(100% - 2.5rem, var(--maat));
}
.held__over .label { color: #f0d2a6; }
.held__over h1 {
  color: #fdf8ef;
  font-size: clamp(2.3rem, 6vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin-bottom: .5em;
  text-wrap: balance;
}
.held__zin {
  color: rgba(253, 248, 239, .88);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.32rem);
  line-height: 1.5;
  max-width: 34rem;
  margin-bottom: 1.8rem;
}

@media (prefers-reduced-motion: no-preference) {
  .held--kort { min-height: clamp(20rem, 46vh, 28rem); }
.held--kort h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }

.held__beeld { animation: held-adem 26s ease-in-out infinite alternate; }
  @keyframes held-adem {
    from { transform: scale(1.02); }
    to { transform: scale(1.09); }
  }
}

/* Vier cijfers onder de kop */
.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem 2rem;
  padding-block: 1.8rem;
  border-bottom: 1px dashed var(--rail);
}
.cijfers div { text-align: center; }
.cijfers strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}
.cijfers span {
  display: block;
  margin-top: .35rem;
  font-size: .86rem;
  color: var(--inkt-zacht);
}

/* --- Cijferband: doorlopend schuivende cijfers -------------------------- */

.cijferband {
  position: relative;
  overflow: hidden;
  padding-block: 1.6rem;
  border-bottom: 1px dashed var(--rail);
  /* zachte randen zodat de band niet hard afgesneden lijkt */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

.cijferband__spoor {
  display: flex;
  width: max-content;
  animation: cijferschuif 38s linear infinite;
}

.cijferband:hover .cijferband__spoor,
.cijferband:focus-within .cijferband__spoor { animation-play-state: paused; }

.cijferband__rij {
  display: flex;
  flex-shrink: 0;
}

.cijferband__item {
  flex-shrink: 0;
  text-align: center;
  padding-inline: clamp(1.6rem, 4vw, 3.2rem);
  position: relative;
}

.cijferband__item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--rail);
}

.cijferband__item strong {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
}

.cijferband__item span {
  display: block;
  margin-top: .35rem;
  font-size: .86rem;
  white-space: nowrap;
  color: var(--inkt-zacht);
}

@keyframes cijferschuif {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .cijferband { -webkit-mask-image: none; mask-image: none; }
  .cijferband__spoor { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .cijferband__rij[aria-hidden="true"] { display: none; }
  .cijferband__rij { flex-wrap: wrap; justify-content: center; gap: 1rem 0; width: 100%; }
  .cijferband__item::after { display: none; }
}

/* --- Wisselblok: inhoud die vanzelf doorgaat ---------------------------- */

/* Zonder JS staan alle items er gewoon onder elkaar. Zodra JS aanstaat,
   krijgt het blok de klasse wissel--aan en stapelen de items op elkaar. */
.wissel { position: relative; }

/* Drie rijen: eerst de aanhef, dan de wisselende items op elkaar, dan de bolletjes */
.wissel--aan {
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.wissel--aan > .label { grid-row: 1; grid-column: 1; }
.wissel--aan > [data-wissel-item] {
  grid-row: 2;
  grid-column: 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.5rem);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.wissel--aan > [data-wissel-item].actief {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease, transform .5s ease, visibility 0s;
}

.wissel__bolletjes {
  grid-row: 3;
  grid-column: 1;
  display: flex;
  gap: .5rem;
  justify-content: flex-start;
  margin-top: 1.6rem;
}
.wissel__bol {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: currentColor;
  opacity: .28;
  transition: opacity .2s ease, transform .2s ease;
}
.wissel__bol:hover { opacity: .6; }
.wissel__bol[aria-selected="true"] { opacity: 1; transform: scale(1.35); }
.wissel__bol:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Grotere raakvlakken voor vingers, zonder dat de bolletjes groot worden */
.wissel__bol::before {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -18px 0 0 -18px;
}

/* --- Inzicht van vandaag ------------------------------------------------ */

.vandaag {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem 1.6rem;
  align-items: start;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--rail);
  border-left: 4px solid var(--accent);
  border-radius: var(--rond, 10px);
  background: var(--papier-licht, #fff);
  transition: opacity .22s ease, border-color .4s ease;
}
.vandaag.wisselt { opacity: .25; }

.vandaag__nr {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--accent);
  opacity: .55;
}
.vandaag__tekst h3 { margin: .1rem 0 .4rem; }
.vandaag__tekst p { margin: 0 0 1rem; color: var(--inkt-zacht); }
.vandaag__voet {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.2rem;
  align-items: center;
}
.vandaag__knop {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
  color: var(--inkt-zacht);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vandaag__knop:hover { color: var(--accent); }

@media (max-width: 34rem) {
  .vandaag { grid-template-columns: 1fr; }
}

/* --- Vragenband: echte zoekvragen die langsschuiven -------------------- */

.vragenband {
  overflow: hidden;
  padding-block: 1rem;
  border-block: 1px dashed var(--rail);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.vragenband__spoor {
  display: flex;
  width: max-content;
  animation: vragenschuif 62s linear infinite;
}
.vragenband:hover .vragenband__spoor,
.vragenband:focus-within .vragenband__spoor { animation-play-state: paused; }
.vragenband__rij { display: flex; flex-shrink: 0; }
.vragenband a {
  flex-shrink: 0;
  padding-inline: 1.4rem;
  font-size: .95rem;
  white-space: nowrap;
  color: var(--inkt-zacht);
  text-decoration: none;
}
.vragenband a::before { content: "\201C"; opacity: .5; }
.vragenband a::after { content: "\201D\2009\00B7"; opacity: .5; }
.vragenband a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

@keyframes vragenschuif {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .vragenband { -webkit-mask-image: none; mask-image: none; }
  .vragenband__spoor { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .vragenband__rij[aria-hidden="true"] { display: none; }
  .vragenband__rij { flex-wrap: wrap; justify-content: center; gap: .4rem 0; width: 100%; }
  .wissel--aan > [data-wissel-item] { transition: none; }
}

/* --- ACT-zelfcheck ------------------------------------------------------ */

.check { display: grid; gap: 1.6rem; }

.check__vraag {
  border: 0;
  border-top: 1px dashed var(--rail);
  margin: 0;
  padding: 1.4rem 0 0;
}
.check__vraag:first-child { border-top: 0; padding-top: 0; }

.check__stelling {
  padding: 0;
  margin-bottom: .9rem;
  font-size: 1.02rem;
  line-height: 1.5;
  text-wrap: pretty;
}

.check__schaal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.check__optie {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .4rem .9rem;
  border: 1px solid var(--rail);
  border-radius: 999px;
  cursor: pointer;
  font-size: .9rem;
  color: var(--inkt-zacht);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.check__optie:hover { border-color: var(--accent); color: var(--inkt); }
.check__optie:has(input:checked) {
  border-color: var(--accent);
  color: var(--papier);
  background: var(--accent);
}
.check__optie:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.check__optie input { accent-color: var(--accent); }

.check__voet {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  align-items: center;
  padding-top: 1.4rem;
  border-top: 1px dashed var(--rail);
}
.check__voet p { margin: 0; }

.check__uitslag { display: grid; gap: 1.6rem; }
.check__uitslag:focus { outline: none; }

.check__balken { display: grid; gap: .9rem; }

.check__balk {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr auto;
  gap: .5rem 1rem;
  align-items: center;
}
.check__balk-naam { font-size: .95rem; }
.check__balk-spoor {
  height: 10px;
  border-radius: 999px;
  background: var(--rail);
  overflow: hidden;
}
.check__balk-vul {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width .9s cubic-bezier(.22, .8, .3, 1);
}
.check__balk-cijfer {
  font-family: var(--mono);
  font-size: .78rem;
  white-space: nowrap;
  color: var(--inkt-zacht);
}

@media (max-width: 34rem) {
  .check__balk { grid-template-columns: 1fr auto; }
  .check__balk-spoor { grid-column: 1 / -1; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  .check__balk-vul { transition: none; }
}

/* --- Meeloopstand bij een opdracht -------------------------------------- */

.meeloop__start { margin-bottom: 1.2rem; }

.meeloop {
  margin: 0 0 1.2rem;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--accent);
  border-radius: var(--rond, 10px);
  background: var(--papier-licht, #fff);
}

.meeloop__teller {
  margin: 0 0 .6rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.meeloop__stap {
  min-height: 5.5rem;
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
  line-height: 1.6;
}
.meeloop__stap strong { color: var(--inkt); }

.meeloop__spoor {
  height: 4px;
  border-radius: 999px;
  background: var(--rail);
  overflow: hidden;
}
.meeloop__vul {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 1s linear;
}

.meeloop__tijd {
  margin: .5rem 0 1.2rem;
  font-size: .82rem;
  color: var(--inkt-zacht);
}

.meeloop__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1rem;
  align-items: center;
}
.meeloop__knoppen .knop:disabled { opacity: .4; cursor: not-allowed; }

.meeloop__pauze {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  color: var(--inkt-zacht);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.meeloop__pauze:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .meeloop__vul { transition: none; }
}

/* Antwoordveld binnen de meeloopstand */

.meeloop__veldkop {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}

.meeloop__veld {
  display: block;
  width: 100%;
  margin-bottom: .6rem;
  padding: .8rem .9rem;
  border: 1px solid var(--rail);
  border-radius: 8px;
  background: var(--papier);
  font: inherit;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--inkt);
  resize: vertical;
}
.meeloop__veld:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.meeloop__veldvoet {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  align-items: center;
  margin-bottom: 1.2rem;
}

.meeloop__mic {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .35rem .9rem;
  border: 1px solid var(--rail);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .85rem;
  color: var(--inkt-zacht);
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.meeloop__mic::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}
.meeloop__mic:hover { border-color: var(--accent); color: var(--inkt); }
.meeloop__mic.aan {
  border-color: #a8452f;
  color: #a8452f;
}
.meeloop__mic.aan::before {
  opacity: 1;
  animation: mic-klopt 1.4s ease-in-out infinite;
}
@keyframes mic-klopt {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: .4; }
}

.meeloop__uitleg {
  margin: 0;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
}

.meeloop__uitkomst { display: grid; gap: 1rem; margin-bottom: 1.4rem; }
.meeloop__uitkomst > div {
  padding-left: .9rem;
  border-left: 2px solid var(--accent);
}
.meeloop__uitkomst span {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.meeloop__uitkomst p { margin: .25rem 0 0; white-space: pre-wrap; }

@media (prefers-reduced-motion: reduce) {
  .meeloop__mic.aan::before { animation: none; }
}

/* --- Metaforenpagina ---------------------------------------------------- */

.metaforen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.2rem;
  margin-top: 1.4rem;
}

.metafoor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--rail);
  border-left: 3px solid var(--accent);
  border-radius: var(--rond, 10px);
  background: var(--papier-licht, #fff);
  color: inherit;
  text-decoration: none;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.metafoor:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 30px -22px rgba(60, 40, 20, .55);
  transform: translateY(-2px);
}
.metafoor:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.metafoor__mini {
  display: block;
  width: 46px;
  opacity: .85;
  color: var(--accent);
}
.metafoor__mini svg { width: 100%; height: auto; }

.metafoor__nr {
  display: block;
  margin-bottom: .4rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.metafoor__tekst p {
  margin: 0 0 .7rem;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.5;
  text-wrap: pretty;
}
.metafoor__titel {
  display: block;
  font-size: .84rem;
  color: var(--inkt-zacht);
}
.metafoor:hover .metafoor__titel { color: var(--accent); }

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

/* --- Voorlezen ---------------------------------------------------------- */

.voorlees {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  align-items: center;
  margin: 1.4rem 0 2rem;
  padding-top: 1.2rem;
  border-top: 1px dashed var(--rail);
}

.voorlees__knop {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .5rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .92rem;
  color: var(--accent);
  transition: background-color .2s ease, color .2s ease;
}
.voorlees__knop::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent currentColor;
}
.voorlees__knop:hover { background: var(--accent); color: var(--papier); }
.voorlees__knop:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.voorlees__tempo {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--inkt-zacht);
}
.voorlees__tempo input {
  width: 6.5rem;
  accent-color: var(--accent);
}

.voorlees__uitleg {
  flex-basis: 100%;
  margin: 0;
  font-size: .78rem;
  color: var(--inkt-zacht);
}

.voorlees__stem {
  min-height: 40px;
  max-width: 14rem;
  padding: .35rem .7rem;
  border: 1px solid var(--rail);
  border-radius: 999px;
  background: var(--papier);
  font: inherit;
  font-size: .82rem;
  color: var(--inkt-zacht);
  cursor: pointer;
}
.voorlees__stem:hover { border-color: var(--accent); color: var(--inkt); }
.voorlees__stem:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Het stuk dat op dit moment wordt voorgelezen */
.leest {
  position: relative;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 4px;
  box-shadow: 0 0 0 .35rem color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background-color .25s ease, box-shadow .25s ease;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .leest { background: rgba(169, 119, 60, .12); box-shadow: 0 0 0 .35rem rgba(169, 119, 60, .12); }
}

@media (prefers-reduced-motion: reduce) {
  .leest { transition: none; }
}

/* --- Tussenstop: gekleurde onderbreking in een artikel ------------------ */

.tussenstop {
  position: relative;
  margin: clamp(2.6rem, 6vw, 4rem) calc(-1 * clamp(1.2rem, 4vw, 3rem));
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.6rem, 5vw, 3.4rem);
  border-radius: var(--rond, 12px);
  background: var(--accent);
  color: var(--papier);
  overflow: hidden;
}

/* Een zachte lichtval over het vlak, zodat het geen platte kleur is */
.tussenstop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, .16), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgba(0, 0, 0, .22), transparent 55%);
  pointer-events: none;
}

/* Een groot aanhalingsteken als achtergrondvorm */
.tussenstop::after {
  content: "\201C";
  position: absolute;
  top: .4rem;
  right: 1.4rem;
  font-family: var(--serif);
  font-size: clamp(5rem, 12vw, 7.5rem);
  line-height: 1;
  color: var(--papier);
  opacity: .12;
  pointer-events: none;
}

.tussenstop__zin {
  position: relative;
  margin: 0;
  max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.4vw, 1.95rem);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}

.tussenstop__verder {
  position: relative;
  margin: 1.4rem 0 0;
  font-size: .88rem;
}
.tussenstop__verder a {
  color: var(--papier);
  text-decoration: none;
  border-bottom: 1px solid rgba(246, 241, 232, .45);
  padding-bottom: 2px;
}
.tussenstop__verder a:hover { border-bottom-color: var(--papier); }

@media (max-width: 46rem) {
  .tussenstop { margin-inline: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .tussenstop {
      animation: opkomen-scroll linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
  }
}

/* Doorstrepen, overnemen en terugblikken binnen de meeloopstand */

.meeloop__hulp {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  margin: -.2rem 0 1rem;
}

.meeloop__hulpknop {
  min-height: 38px;
  padding: .3rem .85rem;
  border: 1px dashed var(--rail);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  color: var(--inkt-zacht);
  transition: border-color .2s ease, color .2s ease, border-style .2s ease;
}
.meeloop__hulpknop:hover {
  border-style: solid;
  border-color: var(--accent);
  color: var(--accent);
}

.meeloop__streeplijst {
  display: grid;
  gap: .4rem;
  margin-bottom: 1rem;
}

.meeloop__regel {
  width: 100%;
  min-height: 44px;
  padding: .6rem .9rem;
  border: 1px solid var(--rail);
  border-radius: 8px;
  background: var(--papier);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
  color: var(--inkt);
  transition: opacity .2s ease, border-color .2s ease;
}
.meeloop__regel:hover { border-color: var(--accent); }
.meeloop__regel.weg {
  opacity: .45;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}
.meeloop__regel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.meeloop__terugblik {
  margin-bottom: 1.2rem;
  padding: .9rem 1.1rem;
  border-left: 3px solid var(--rail);
  background: var(--papier);
  border-radius: 0 8px 8px 0;
}
.meeloop__terugblik-kop {
  margin: 0 0 .5rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inkt-zacht);
}
.meeloop__terugblik ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .95rem;
  line-height: 1.6;
}
.meeloop__terugblik li.weg {
  opacity: .45;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--accent);
}

/* Verborgen is verborgen, ook als een klasse een display meegeeft */
[hidden] { display: none !important; }

/* --- 5. Het spoor (terugkerend structuurelement) ------------------------ */

/* Horizontale scheiding: gestippeld spoor met stationsmarkering */
.scheiding {
  position: relative;
  height: 1px;
  background-image: linear-gradient(to right, var(--rail) 50%, transparent 0%);
  background-size: 10px 1px;
  background-repeat: repeat-x;
  margin-block: var(--ruimte);
  border: 0;
}
.scheiding::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--papier);
  border: 1px solid var(--rail);
}

/* Verticale puntenlijn met stations */
.puntenlijn {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0 0 0 2.1rem;
  position: relative;
}
.puntenlijn::before {
  content: "";
  position: absolute;
  left: .34rem;
  top: .6rem;
  bottom: .6rem;
  width: 1px;
  background-image: linear-gradient(to bottom, var(--rail) 50%, transparent 0%);
  background-size: 1px 9px;
}
.puntenlijn > li {
  position: relative;
  margin-bottom: 2rem;
}
.puntenlijn > li::before {
  content: "";
  position: absolute;
  left: -1.94rem;
  top: .62rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--papier);
  border: 1.5px solid var(--groen);
}
.puntenlijn > li:last-child { margin-bottom: 0; }
.puntenlijn h3 { margin: 0 0 .35em; }
.puntenlijn p { margin: 0; color: var(--inkt-zacht); }

/* --- 6. Kleine tekstonderdelen ------------------------------------------ */

.label {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.label::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.haak {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.45;
  font-style: italic;
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  margin: 1.4rem 0;
}

.diagram--hoofd {
  margin: 0;
  padding: 1.3rem 1.1rem .9rem;
  align-self: center;
}
.duo--hero > .sectie:first-child { padding-top: 0; }
.diagram--hoofd figcaption { margin-top: .7rem; }

.inleiding {
  font-family: var(--serif);
  font-size: clamp(1.24rem, 1.7vw, 1.48rem);
  line-height: 1.48;
  letter-spacing: -.014em;
  color: var(--inkt-zacht);
  text-wrap: pretty;
}

.motief {
  font-family: var(--serif);
  font-style: italic;
  color: var(--groen);
}

.klein { font-size: .9rem; color: var(--inkt-licht); }

/* Nog in te vullen door de eigenaar. Zoek op "invullen" in de HTML. */
.invullen {
  background: color-mix(in srgb, var(--messing) 16%, transparent);
  border-bottom: 1px dashed var(--messing);
  padding: 0 .2em;
  border-radius: 2px;
}

.signatuur {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--messing);
  margin: 2.2rem 0 0;
  letter-spacing: -.01em;
}

/* --- 7. Lijsten (overzicht van stations) ---------------------------- */

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

.lijst__rij {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  gap: 0 1.4rem;
  align-items: baseline;
  padding: 1.25rem .4rem;
  border-bottom: 1px solid var(--lijn);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius);
  transition: background .2s ease, padding-left .2s ease;
}
/* Stationsmarkering die oplicht bij aanwijzen */
.lijst__rij::before {
  content: "";
  position: absolute;
  left: -.55rem;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  transition: opacity .2s ease;
}
.lijst__rij:hover,
.lijst__rij:focus-visible {
  background: var(--papier-warm);
  padding-left: .9rem;
}
.lijst__rij:hover::before,
.lijst__rij:focus-visible::before { opacity: 1; }

.lijst__nr {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
.lijst__titel {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 550;
  letter-spacing: -.015em;
  margin: 0 0 .25em;
}
.lijst__sub {
  display: block;
  margin: 0;
  font-size: .95rem;
  color: var(--inkt-zacht);
}
.lijst__pijl {
  color: var(--rail);
  font-size: 1.1rem;
  transition: transform .18s ease, color .18s ease;
}
.lijst__rij:hover .lijst__pijl { color: var(--groen); transform: translateX(3px); }

@media (max-width: 34rem) {
  .lijst__rij { grid-template-columns: 1fr auto; }
  .lijst__nr { grid-column: 1 / -1; margin-bottom: .3rem; }
}

/* Groepen op de lessenpagina */
.groep { margin-top: 3.5rem; }
.groep:first-child { margin-top: 2rem; }
.groep[hidden] { display: none; }
.groep__kop {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin: 0 0 .3em;
}
.groep__uitleg {
  margin: 0;
  font-size: .95rem;
  color: var(--inkt-licht);
}
.groep .lijst { margin-top: 1.2rem; }

/* Kop van een gekleurd deel */
.groep__kop-rij {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--accent);
  margin-bottom: 1.6rem;
}
.groep__aantal {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--accent);
  opacity: .35;
  margin: 0;
}

/* Kaarten voor de inzichten, in een dicht raster */
.raster--dicht {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr));
  gap: .9rem;
}
.kaart__beeld {
  display: block;
  background: color-mix(in srgb, var(--accent) 10%, var(--papier));
  border-radius: var(--radius-klein);
  padding: .5rem .6rem;
  margin: -.3rem -.3rem .9rem;
}
.kaart__beeld .mini { display: block; width: 100%; height: auto; }
a.kaart--inzicht:hover .kaart__beeld { background: color-mix(in srgb, var(--accent) 18%, var(--papier)); }

.kaart--inzicht {
  position: relative;
  padding: 1.3rem 1.4rem 2.6rem;
  min-height: 100%;
}
.kaart--inzicht h3 {
  font-size: 1.12rem;
  margin: .5rem 0 .4rem;
}
.kaart--inzicht p {
  font-size: .93rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
  margin: 0;
}
.kaart__nr {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  color: var(--accent);
}
.kaart__pijl {
  position: absolute;
  left: 1.4rem;
  bottom: 1.1rem;
  color: var(--rail);
  transition: transform .18s ease, color .18s ease;
}
.kaart--inzicht:hover .kaart__pijl { color: var(--accent); transform: translateX(4px); }

/* Zoekveld boven het lijst */
.zoek {
  display: flex;
  align-items: center;
  gap: .7rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  background: var(--papier-warm);
  padding: .6rem .9rem;
  max-width: 24rem;
}
.zoek input {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: .98rem;
  color: var(--inkt);
  width: 100%;
}
.zoek input:focus { outline: none; }
.zoek:focus-within { border-color: var(--messing); }
.zoek svg { color: var(--inkt-licht); flex: none; }

/* --- 8. Kaarten --------------------------------------------------------- */

.raster {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.kaart {
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--accent) 7%, var(--papier-warm)), var(--papier-warm) 55%);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--schaduw);
}
.kaart h3 { margin-top: 0; }
.kaart p:last-child { margin-bottom: 0; }

a.kaart { text-decoration: none; color: inherit; display: block; transition: transform .18s ease, border-color .18s ease; }
a.kaart:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--lijn));
  box-shadow: 0 2px 4px rgba(90, 62, 30, .06), 0 16px 36px -18px rgba(90, 62, 30, .35);
}

/* --- 9. De opdracht ----------------------------------------------------- */

.opdracht {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 11%, var(--papier-warm)), var(--papier-warm) 60%);
  border: 1px dashed var(--rail);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  margin: 2.4rem 0;
}
.opdracht > :first-child { margin-top: 0; }
.opdracht > :last-child { margin-bottom: 0; }
.opdracht h3 {
  margin-top: 0;
  font-size: 1.1rem;
}
.opdracht ol { counter-reset: stap; list-style: none; padding-left: 0; }
.opdracht ol > li {
  counter-increment: stap;
  position: relative;
  padding-left: 2.2rem;
  margin-bottom: .8rem;
}
.opdracht ol > li::before {
  content: counter(stap);
  position: absolute;
  left: 0;
  top: .12em;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rail);
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent);
}

/* --- 9a. De test ------------------------------------------------------- */

.test {
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--messing) 7%, var(--papier-warm)), var(--papier-warm) 60%);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--radius) * 1.6);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  box-shadow: var(--schaduw);
  transition: opacity .14s ease;
  min-height: 24rem;
}
.test > :first-child { margin-top: 0; }

.test__teller {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin: 0 0 .7rem;
}
.test__balk {
  height: 3px;
  background: var(--lijn);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 1.8rem;
}
.test__balk span {
  display: block;
  height: 100%;
  background: linear-gradient(to right, var(--groen), var(--messing));
  transition: width .35s ease;
}
.test__vraag {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 1.4rem;
}
.test__opties { display: grid; gap: .7rem; }
.test__optie {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 1.02rem;
  color: var(--inkt);
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.test__optie:hover {
  border-color: var(--messing);
  background: color-mix(in srgb, var(--messing) 7%, var(--papier-warm));
  transform: translateX(3px);
}
.test__letter {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--lijn));
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--rail);
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--accent);
}

/* Modeltekeningen bij de inzichten */
.diagram {
  margin: 2.6rem 0;
  padding: 1.4rem 1.2rem 1rem;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--papier-warm)), var(--papier-warm) 60%);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--radius) * 1.4);
  box-shadow: var(--schaduw-zacht);
}
.diagram svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagram .d-kop {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  fill: var(--inkt);
}
.diagram .d-klein {
  font-family: var(--sans);
  font-size: 13px;
  fill: var(--inkt-zacht);
}
.diagram figcaption {
  margin-top: .9rem;
  font-size: .88rem;
  color: var(--inkt-licht);
  text-align: center;
}

/* --- 9b. Beeld ---------------------------------------------------------- */
/* Openstaande beeldplekken. Vul ze met <img> of verwijder het blok.
   Verhouding staat vast, zodat de pagina niet verspringt als je later
   een foto toevoegt. */

.beeld {
  margin: 2.6rem auto;
}

/* Twee kolommen: beeld naast tekst. Klapt onder elkaar op smalle schermen. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}
.duo .beeld { margin: 0; }
.duo > div > :first-child { margin-top: 0; }
.duo > div > :last-child { margin-bottom: 0; }
@media (max-width: 52rem) {
  .duo { grid-template-columns: 1fr; }
}

/* Hero: tekst links, beeld rechts, beeld iets groter */
.duo--hero { grid-template-columns: 1.05fr .95fr; align-items: center; }
.duo--hero .beeld img { border-radius: calc(var(--radius) * 1.5); }
@media (max-width: 52rem) {
  .duo--hero { grid-template-columns: 1fr; }
  .duo--hero .beeld { order: -1; }
}

/* Twee kolommen waarbij de tekstkaart over het beeld heen valt */
.overlap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
}
.overlap__beeld {
  margin: 0;
  grid-column: 1 / span 7;
  grid-row: 1;
}
.overlap__beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius) * 1.6);
  box-shadow: 0 2px 6px rgba(90, 62, 30, .1), 0 30px 60px -30px rgba(90, 62, 30, .55);
}
.overlap__kaart {
  grid-column: 6 / span 7;
  grid-row: 1;
  z-index: 2;
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--radius) * 1.6);
  padding: clamp(1.5rem, 3vw, 2.6rem);
  box-shadow: 0 2px 6px rgba(90, 62, 30, .08), 0 26px 50px -26px rgba(90, 62, 30, .5);
}
.overlap__kaart h2 { margin-top: .2rem; font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.overlap__kaart p:last-child { margin-bottom: 0; }

/* Spiegelvariant: beeld rechts, kaart links */
.overlap--links .overlap__beeld { grid-column: 6 / span 7; }
.overlap--links .overlap__kaart { grid-column: 1 / span 7; }

@media (max-width: 52rem) {
  .overlap { grid-template-columns: 1fr; }
  .overlap__beeld,
  .overlap--links .overlap__beeld { grid-column: 1; grid-row: 1; }
  .overlap__kaart,
  .overlap--links .overlap__kaart {
    grid-column: 1;
    grid-row: 2;
    margin: -3rem 1rem 0;
  }
}

/* Donkere band: harde onderbreking in het ritme van de pagina */
.band--donker {
  position: relative;
  background: #1c1813;
  color: #f2ebdd;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
.band--donker h2, .band--donker h3 { color: #fdf8ef; }
.band--donker p { color: rgba(242, 235, 221, .82); }
.band--donker .label { color: #e6bd82; }
.band--donker a { color: #e6bd82; }
.band--donker a:hover { color: #fdf8ef; }
.band--donker .knop--rustig {
  color: #fdf8ef;
  border-color: rgba(253, 248, 239, .5);
}
.band--donker .knop--rustig:hover {
  background: rgba(253, 248, 239, .12);
  color: #fdf8ef;
  border-color: #fdf8ef;
}
.band--donker .grote-quote {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4.2vw, 2.9rem);
  line-height: 1.24;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 1.2rem;
  color: #fdf8ef;
}
.band--donker cite {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #cfa46a;
  font-style: normal;
}

.sparren { margin-bottom: 0; }
.sparren .knop { background: #2e5a4b; border-color: #2e5a4b; color: #fdf8ef; }
.sparren .knop:hover { background: #3f7a66; border-color: #3f7a66; color: #fdf8ef; }

/* Beeldband over de volle breedte met een uitspraak erover */
.beeldband {
  position: relative;
  min-height: clamp(20rem, 44vh, 28rem);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
.beeldband img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.beeldband::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(20,17,12,.82), rgba(20,17,12,.45) 60%, rgba(20,17,12,.25));
}
.beeldband__tekst {
  width: min(100% - 2.5rem, 46rem);
  color: #fdf8ef;
  text-align: center;
}
.beeldband__tekst p {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  line-height: 1.28;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-bottom: .8rem;
}
.beeldband__tekst span {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e6bd82;
}

/* De acht delen als gekleurd raster */
.delen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: .9rem;
}
.deel-kaart {
  --accent: var(--messing);
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: calc(var(--radius) * 1.3);
  padding: 1.3rem 1.3rem 1.1rem;
  background: color-mix(in srgb, var(--accent) 13%, var(--papier-warm));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--lijn));
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.deel-kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw); }
.deel-kaart__nr {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.deel-kaart h3 {
  margin: .4rem 0 .3rem;
  font-size: 1.08rem;
  line-height: 1.2;
}
.deel-kaart p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--inkt-zacht);
}
.deel-kaart__mini {
  position: absolute;
  right: -18px;
  bottom: -14px;
  width: 92px;
  opacity: .5;
}

/* Kaart met foto erboven */
.kaart--foto { padding: 0; overflow: hidden; }
.kaart--foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.kaart--foto .kaart__tekst { padding: 1.2rem 1.3rem 1.4rem; }
.kaart--foto h3 { margin: .3rem 0 .35rem; font-size: 1.12rem; }
.kaart--foto p { margin: 0; font-size: .93rem; color: var(--inkt-zacht); }
a.kaart--foto:hover img { transform: none; }

/* Haak: eerste vraag van de test op de homepagina */
.haakvraag {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--groen) 14%, var(--papier-warm)), var(--papier-warm) 62%);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--radius) * 1.6);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--schaduw);
}
.haakvraag h2 { margin: .2rem 0 1.2rem; }
.haakvraag .test__opties { max-width: 44rem; }

/* Smalle strook met een enkele mededeling */
.strook {
  border-block: 1px dashed var(--rail);
  padding-block: .9rem;
  margin-block: 1rem;
}
.strook p {
  margin: 0;
  font-size: .93rem;
  color: var(--inkt-zacht);
  text-align: center;
}
.beeld img {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--lijn);
  box-shadow: var(--schaduw);
}
.beeld figcaption {
  margin-top: .7rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--inkt-licht);
}

.beeld__vlak {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  border: 1px dashed var(--rail);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 14px,
      color-mix(in srgb, var(--rail) 14%, transparent) 14px 15px
    ),
    var(--papier-warm);
}
.beeld__vlak span {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  background: var(--papier-warm);
  padding: .4rem .8rem;
  border: 1px solid var(--lijn);
  border-radius: 99px;
}

.beeld--breed { max-width: none; }
.beeld--sfeer img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.beeld--sfeer.beeld--staand img { aspect-ratio: 4 / 5; }
.beeld--sfeer.beeld--band img { aspect-ratio: 21 / 9; }
.beeld--staand .beeld__vlak { aspect-ratio: 4 / 5; }
.beeld--band .beeld__vlak { aspect-ratio: 21 / 9; }

/* Losse quote, bedoeld om verspreid over de site tussen secties te zetten */
.losse-quote {
  max-width: 40rem;
  margin: 0 auto;
  padding: 2.6rem 1rem;
  text-align: center;
}
.losse-quote p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.6vw, 1.72rem);
  line-height: 1.35;
  letter-spacing: -.02em;
  font-style: italic;
  color: var(--inkt);
  margin: 0 0 .8em;
  text-wrap: balance;
}
.losse-quote footer {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.losse-quote::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1px;
  background: var(--rail);
  margin: 0 auto 1.6rem;
}

/* Twee voorbeelden naast elkaar: op je werk en thuis */
.duo--voorbeelden {
  gap: 1rem;
  margin: 2.4rem 0;
}
.voorbeeld {
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--schaduw-zacht);
}
.voorbeeld p:last-child { margin-bottom: 0; }
.voorbeeld__kop {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .6rem;
}

/* De quote in het artikel krijgt een eigen band */
blockquote.uitgelicht {
  --tint: var(--accent);
  position: relative;
  margin: 3rem 0;
  padding: 1.9rem 1.6rem 1.5rem 2.6rem;
  border-left: 0;
  border-radius: calc(var(--radius) * 1.4);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--tint) 13%, var(--papier-warm)), var(--papier-warm) 65%);
  border: 1px solid var(--lijn);
}
blockquote.uitgelicht::before {
  content: "\201C";
  position: absolute;
  top: .5rem;
  left: .9rem;
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--accent);
  opacity: .45;
}

/* De slotregel sluit de pagina af */
.motief--slot {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px dashed var(--rail);
  font-size: 1.28rem;
  line-height: 1.4;
}

/* Blograster: kaarten van drie, met verrassingen ertussen */
.blograster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
@media (max-width: 62rem) { .blograster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .blograster { grid-template-columns: 1fr; } }

.blogkaart {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--radius) * 1.4);
  overflow: hidden;
  box-shadow: var(--schaduw-zacht);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, border-color .25s ease;
}
.blogkaart:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--lijn));
  box-shadow: 0 3px 8px rgba(90,62,30,.08), 0 26px 44px -24px rgba(90,62,30,.5);
}
.blogkaart__beeld { display: block; overflow: hidden; }
.blogkaart__beeld img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.blogkaart:hover .blogkaart__beeld img { transform: scale(1.05); }
.blogkaart__tekst {
  display: block;
  padding: 1.1rem 1.2rem 1.3rem;
  flex: 1;
}
.blogkaart__chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 99px;
  padding: .28rem .7rem;
  margin-bottom: .7rem;
}
.blogkaart h3 { margin: 0 0 .4rem; font-size: 1.1rem; line-height: 1.22; }
.blogkaart p { margin: 0 0 .9rem; font-size: .92rem; line-height: 1.5; color: var(--inkt-zacht); }
.blogkaart__voet {
  display: block;
  font-size: .78rem;
  color: var(--inkt-licht);
}
.blogkaart[hidden] { display: none; }

/* Verrassingen tussen de kaarten door */
.tussen {
  grid-column: 1 / -1;
  border-radius: calc(var(--radius) * 1.6);
  overflow: hidden;
}
.tussen[hidden] { display: none; }
.tussen--donker {
  background: #1c1813;
  color: #f2ebdd;
  padding: clamp(2rem, 5vw, 3.4rem);
  text-align: center;
}
.tussen--donker .grote-quote {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  line-height: 1.24;
  letter-spacing: -.02em;
  color: #fdf8ef;
  margin: 0 0 .9rem;
  text-wrap: balance;
}
.tussen--donker cite {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #cfa46a;
  font-style: normal;
}
.tussen--donker .knoppen { justify-content: center; }
.tussen--donker .knop--rustig { color: #fdf8ef; border-color: rgba(253,248,239,.5); }
.tussen--donker .knop--rustig:hover { background: rgba(253,248,239,.14); color: #fdf8ef; border-color: #fdf8ef; }

.tussen--beeld {
  position: relative;
  min-height: clamp(15rem, 34vh, 22rem);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.tussen--beeld img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.tussen--beeld::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20,17,12,.8), rgba(20,17,12,.35));
}
.tussen__tekst { text-align: center; padding: 2rem; max-width: 40rem; }
.tussen__tekst p {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.26;
  color: #fdf8ef;
  margin-bottom: .7rem;
  text-wrap: balance;
}
.tussen__tekst span {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e6bd82;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .blogkaart, .tussen {
      animation: opkomen-scroll linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    .blograster > *:nth-child(3n+2) { animation-range: entry 5% entry 45%; }
    .blograster > *:nth-child(3n+3) { animation-range: entry 10% entry 50%; }
    .tussen--beeld img {
      animation: zachte-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* Herkenningsblok bovenaan een artikel */
.herken {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 14%, var(--papier-warm)), var(--papier-warm) 65%);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--radius) * 1.4);
  padding: 1.5rem 1.7rem 1.2rem;
  margin: 2.4rem 0;
}
.herken__kop {
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 .8rem;
}
.herken ul { margin: 0 0 .9rem; padding-left: 0; list-style: none; }
.herken li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: .55rem;
}
.herken li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}
.herken p:last-child { margin-bottom: 0; }

/* Kaartje van de schrijver onder een artikel */
.auteur {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  margin-top: 3rem;
  padding-top: 1.8rem;
  border-top: 1px dashed var(--rail);
}
.auteur__foto {
  flex: none;
  width: 5.5rem;
  height: 6.5rem;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--lijn);
}
.auteur__naam {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 .3rem;
}
.auteur p:last-child { margin-bottom: 0; }
@media (max-width: 34rem) {
  .auteur { flex-direction: column; }
}

/* Bewegend beeld: video die zich gedraagt als een foto */
.beeld video {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--lijn);
  box-shadow: var(--schaduw);
  display: block;
}

/* Rustige beweging op stilstaande beelden */
@media (prefers-reduced-motion: no-preference) {
  .beeld--leven { overflow: hidden; border-radius: var(--radius); }
  .beeld--leven img {
    animation: langzaam-inzoomen 24s ease-in-out infinite alternate;
    transform-origin: 55% 45%;
  }
  @keyframes langzaam-inzoomen {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
  }
}

/* Voorbeeldverhaal bij een inzicht */
.verhaal {
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-left: 3px solid var(--accent);
  border-radius: calc(var(--radius) * 1.3);
  padding: 1.6rem 1.7rem 1.3rem;
  margin: 2.6rem 0;
  box-shadow: var(--schaduw-zacht);
}
.verhaal__kop {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 .9rem;
}
.verhaal p { margin-bottom: .9em; }
.verhaal__meer {
  margin: 1.2rem 0 .6rem;
  border-top: 1px dashed var(--rail);
  padding-top: .9rem;
}
.verhaal__meer summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  list-style: none;
}
.verhaal__meer summary::-webkit-details-marker { display: none; }
.verhaal__meer summary::before { content: "+ "; }
.verhaal__meer[open] summary::before { content: "\2212 "; }
.verhaal__meer summary:hover { color: var(--inkt); }
.verhaal__meer p { margin-top: .9rem; }

/* Leraren en boeken */
.leraren {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.leraar {
  background:
    linear-gradient(168deg, color-mix(in srgb, var(--accent) 8%, var(--papier-warm)), var(--papier-warm) 55%);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--radius) * 1.3);
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: var(--schaduw-zacht);
}
.leraar h3 { margin: 0 0 .5rem; font-size: 1.2rem; }
.leraar p { font-size: .96rem; line-height: 1.6; }
.leraar__bekend {
  color: var(--inkt-licht);
  font-size: .88rem !important;
  border-bottom: 1px solid var(--lijn);
  padding-bottom: .8rem;
}
.leraar__doen {
  background: color-mix(in srgb, var(--accent) 13%, transparent);
  border-radius: var(--radius);
  padding: .8rem 1rem;
  margin-bottom: .9rem;
}
.leraar__doen span {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .35rem;
}
.leraar .klein { margin-bottom: 0; }

/* Kort antwoord bovenaan een inzicht */
.kort {
  background: color-mix(in srgb, var(--accent) 12%, var(--papier-warm));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--lijn));
  border-radius: calc(var(--radius) * 1.4);
  padding: 1.3rem 1.5rem 1.1rem;
  margin: 0 0 2.4rem;
}
.kort__kop {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .6rem;
}
.kort p:last-child { margin-bottom: 0; font-size: 1.02rem; }

/* Wegwijzer boven een overzicht */
.wegwijzer {
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--radius) * 1.4);
  padding: 1.5rem 1.7rem 1.2rem;
  margin-top: 1.8rem;
}
.wegwijzer__kop {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .9rem;
}
.wegwijzer ol { counter-reset: w; list-style: none; padding-left: 0; margin-bottom: .9rem; }
.wegwijzer ol > li {
  counter-increment: w;
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: .55rem;
  font-size: .97rem;
}
.wegwijzer ol > li::before {
  content: counter(w);
  position: absolute;
  left: 0;
  top: .05em;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--accent);
}
.wegwijzer p:last-child { margin-bottom: 0; }

/* --- 10. Quotes --------------------------------------------------------- */

blockquote {
  margin: 2.6rem 0;
  padding: .2rem 0 .2rem 1.5rem;
  border-left: 2px solid var(--messing);
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.44;
  letter-spacing: -.014em;
  font-style: italic;
  color: var(--inkt);
}
blockquote p { margin-bottom: .5em; }
blockquote cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .87rem;
  letter-spacing: .04em;
  color: var(--inkt-licht);
}

.quote-kaart {
  position: relative;
  break-inside: avoid;
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1.9rem 1.7rem 1.5rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--schaduw);
}
/* Hangend aanhalingsteken, zoals in een gezet boek */
.quote-kaart::before {
  content: "\201C";
  position: absolute;
  top: .35rem;
  left: 1.2rem;
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--messing);
  opacity: .22;
}
.quote-kaart p {
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.45;
  letter-spacing: -.012em;
  margin: 0 0 .8em;
}
.quote-kaart footer {
  font-size: .85rem;
  letter-spacing: .03em;
  color: var(--inkt-licht);
}
.quote-kaart--eigen { border-left: 3px solid var(--groen); }
.quote-kaart--eigen p { font-style: italic; }

.kolommen {
  columns: 2;
  column-gap: 1.2rem;
}
@media (max-width: 46rem) { .kolommen { columns: 1; } }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; }
.filter {
  font: inherit;
  font-size: .88rem;
  padding: .4rem .9rem;
  border: 1px solid var(--lijn);
  background: transparent;
  color: var(--inkt-zacht);
  border-radius: 99px;
  cursor: pointer;
  transition: all .18s ease;
}
.filter:hover { border-color: var(--rail); color: var(--inkt); }
.filter[aria-pressed="true"] {
  background: var(--groen);
  border-color: var(--groen);
  color: var(--papier-warm);
}
@media (prefers-color-scheme: dark) {
  .filter[aria-pressed="true"] { color: #171614; }
}

/* --- 11. Knoppen -------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.9rem;
  font: inherit;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .005em;
  padding: .78rem 1.5rem;
  border-radius: 999px;
  border: 1px solid var(--groen);
  background: var(--groen);
  color: var(--papier-warm);
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(36, 33, 28, .12);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.knop:hover {
  background: var(--groen-licht);
  border-color: var(--groen-licht);
  color: var(--papier-warm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 3px 12px -4px rgba(46, 90, 75, .45);
}
@media (prefers-color-scheme: dark) {
  .knop { color: #171614; }
  .knop:hover { color: #171614; }
}

.held .knop--licht,
.knop--licht {
  background: rgba(253, 248, 239, .12);
  border-color: rgba(253, 248, 239, .8);
  color: #fdf8ef;
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.held .knop--licht:hover,
.knop--licht:hover {
  background: rgba(253, 248, 239, .24);
  border-color: #fdf8ef;
  color: #fdf8ef;
}

.knop--rustig {
  background: transparent;
  color: var(--inkt);
  border-color: var(--rail);
}
.knop--rustig:hover { background: var(--papier-warm); color: var(--inkt); border-color: var(--messing); }

.knoppen { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

/* --- 12. Formulier ------------------------------------------------------ */

.veld { margin-bottom: 1.3rem; }
.veld label {
  display: block;
  font-size: .92rem;
  letter-spacing: .02em;
  color: var(--inkt-zacht);
  margin-bottom: .4rem;
}
.veld input,
.veld textarea,
.veld select {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--inkt);
  background: var(--papier-warm);
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: .7rem .85rem;
}
.veld textarea { min-height: 9rem; resize: vertical; line-height: 1.6; }
.veld input:focus, .veld textarea:focus, .veld select:focus {
  outline: none;
  border-color: var(--messing);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--messing) 18%, transparent);
}
.opname {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--groen) 10%, var(--papier-warm)), var(--papier-warm) 62%);
  border: 1px solid var(--lijn);
  border-radius: calc(var(--radius) * 1.5);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: 2.5rem;
}
.opname audio { width: 100%; margin: .6rem 0 1rem; }
.opname__teller {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--accent);
  align-self: center;
}
.opname .knoppen { margin-top: 1.2rem; align-items: center; }

.veld--keuze {
  border: 1px solid var(--lijn);
  border-radius: var(--radius);
  padding: 1rem 1.1rem .9rem;
  background: var(--papier-warm);
}
.veld--keuze legend {
  font-size: .92rem;
  color: var(--inkt-zacht);
  padding: 0 .4rem;
}
.keuze {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
  cursor: pointer;
  color: var(--inkt);
  font-size: 1rem;
}
.keuze:last-child { margin-bottom: 0; }
.keuze input { width: auto; accent-color: var(--groen); }
[data-belvelden][hidden] { display: none; }

.veld__hint { font-size: .85rem; color: var(--inkt-licht); margin: .4rem 0 0; }

.melding {
  margin-top: 1.2rem;
  padding: .9rem 1.1rem;
  border: 1px dashed var(--rail);
  border-radius: var(--radius);
  background: var(--papier-warm);
  font-size: .95rem;
}
.melding[hidden] { display: none; }

/* --- 13. Stationspagina ------------------------------------------------- */

.artikel-kop { padding-block: calc(var(--ruimte) * .8) 0; }
.artikel-kop h1 { margin-bottom: .4em; }

.kruimel {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin-bottom: 1.4rem;
}
.kruimel a { color: var(--inkt-licht); text-decoration: none; }
.kruimel a:hover { color: var(--messing); }

.artikel-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.2rem;
  font-size: .85rem;
  color: var(--inkt-licht);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
  padding-block: .7rem;
  margin-bottom: 2.5rem;
}

.artikel h2 { color: var(--inkt); }
.artikel h2::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  background: var(--accent);
  margin-bottom: .9rem;
}

.doorstap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: var(--ruimte);
  border-top: 1px dashed var(--rail);
  padding-top: 1.6rem;
}
.doorstap a {
  text-decoration: none;
  color: inherit;
  font-family: var(--serif);
  font-size: 1.05rem;
}
.doorstap a:hover { color: var(--groen); }
.doorstap span {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--inkt-licht);
  margin-bottom: .3rem;
}
.doorstap > :last-child { text-align: right; }
@media (max-width: 34rem) {
  .doorstap { grid-template-columns: 1fr; }
  .doorstap > :last-child { text-align: left; }
}

/* --- 14. Voet ----------------------------------------------------------- */

.site-voet {
  position: relative;
  border-top: 1px dashed var(--rail);
  margin-top: var(--ruimte);
  padding-block: 3rem 2.5rem;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--messing) 5%, transparent), transparent 60%),
    color-mix(in srgb, var(--papier-diep) 45%, transparent);
}
/* Stationsmarkering op de naad tussen inhoud en voet */
.site-voet::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -6px;
  width: 11px;
  height: 11px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--papier);
  border: 1px solid var(--rail);
}
.site-voet__binnen {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem 2rem;
}
.site-voet p { margin: 0 0 .4em; font-size: .92rem; color: var(--inkt-zacht); }
.site-voet nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; }
.site-voet nav a { font-size: .92rem; color: var(--inkt-zacht); text-decoration: none; }
.site-voet nav a:hover { color: var(--messing); }

/* --- 15. Beweging (met respect voor voorkeuren) ------------------------- */

.onthul {
  opacity: 0;
  transform: translateY(22px) scale(.985);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
.onthul.zichtbaar { opacity: 1; transform: none; }

/* De pagina komt rustig binnen, alleen als beweging gewenst is */
@media (prefers-reduced-motion: no-preference) {
  .sectie:first-of-type .duo,
  .sectie:first-of-type .lees-ruim {
    animation: opkomen .8s cubic-bezier(.2, .7, .3, 1) both;
  }
  @keyframes opkomen {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
  .beeld img { transition: transform .5s cubic-bezier(.2, .7, .3, 1); }
  a.kaart:hover .beeld img { transform: scale(1.02); }
}
.onthul.zichtbaar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .onthul { opacity: 1; transform: none; }
}

/* --- 15b. Bewegingslaag ------------------------------------------------
   Scroll-gestuurde animaties. Alles staat uit bij voorkeur voor minder
   beweging, en browsers die het niet kennen tonen gewoon de eindstand. */

@media (prefers-reduced-motion: no-preference) {

  @supports (animation-timeline: view()) {

    /* Blokken komen rustig omhoog als ze in beeld schuiven */
    .kaart,
    .leraar,
    .verhaal,
    .opdracht,
    .herken,
    .diagram,
    .beeld,
    .losse-quote,
    .puntenlijn > li,
    .lijst__rij,
    .vandaag,
    .duo:not(.duo--hero),
    .strook,
    blockquote.uitgelicht {
      animation: opkomen-scroll linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }

    /* Koppen in een artikel komen los binnen, dat geeft ritme bij het lezen */
    .artikel h2 {
      animation: opkomen-kop linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    @keyframes opkomen-kop {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }

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

    /* Kaarten in een raster komen na elkaar binnen */
    .raster > *:nth-child(2) { animation-range: entry 4% entry 46%; }
    .raster > *:nth-child(3) { animation-range: entry 8% entry 50%; }
    .raster > *:nth-child(4) { animation-range: entry 12% entry 54%; }
    .raster > *:nth-child(n+5) { animation-range: entry 16% entry 58%; }

    /* Beeld beweegt iets langzamer dan de pagina */
    .beeld--sfeer img,
    .beeld--sfeer video {
      animation: zachte-parallax linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes zachte-parallax {
      from { transform: translateY(14px) scale(1.03); }
      to   { transform: translateY(-14px) scale(1.03); }
    }
    .beeld--leven img { animation: zachte-parallax linear both; }

    /* De kop van een gekleurd deel blijft even hangen */
    .groep__kop-rij {
      position: sticky;
      top: 4rem;
      z-index: 2;
      background: var(--papier);
      padding-top: .9rem;
      box-shadow: 0 10px 18px -14px rgba(90, 62, 30, .5);
    }

    /* De grote titel wordt subtiel kleiner bij het wegscrollen */
    .duo--hero h1 {
      animation: kop-wegvallen linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes kop-wegvallen {
      from { opacity: 1; transform: none; }
      to   { opacity: .35; transform: translateY(-10px) scale(.98); }
    }
  }

  /* Zachte overgang bij aanwijzen, ook zonder scroll-animaties */
  .lijst__rij, .kaart, .leraar, .knop, .test__optie {
    transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease,
                background .22s ease, border-color .22s ease;
  }
  .leraar:hover {
    transform: translateY(-3px);
    box-shadow: var(--schaduw);
  }
}

/* --- 16. Print ---------------------------------------------------------- */

@media print {
  .site-kop, .site-voet, .doorstap, .knoppen, .zoek, .filters { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .opdracht { border: 1px solid #999; }
}