/* Leesgemak: tekst groter, extra contrast, beweging uit, rustiger lezen. Gekozen door de bezoeker zelf. */
html.tekst-groter { font-size: 112.5%; }
html.tekst-grootst { font-size: 125%; }

html.hoog-contrast { --inkt-zacht: #17231e; --op-luik-zacht: #ffffff; --op-terra-zacht: #ffffff; --blad: #eef6dc; }
html.hoog-contrast body { color: #0c140f; }
html.hoog-contrast .zacht, html.hoog-contrast .muted, html.hoog-contrast figcaption { color: #0c140f !important; }
html.hoog-contrast .op-luik, html.hoog-contrast .voet, html.hoog-contrast .keuzehulp { background-color: #064a24; }
html.hoog-contrast a { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
html.hoog-contrast .knop, html.hoog-contrast .keuze { outline: 2px solid currentColor; outline-offset: -2px; }
html.hoog-contrast :focus-visible { outline: 4px solid #000 !important; box-shadow: 0 0 0 7px #fff !important; }

html.rustig-lezen body { letter-spacing: 0.02em; word-spacing: 0.08em; line-height: 1.8; }
html.rustig-lezen p, html.rustig-lezen li { max-width: 62ch; }

html.geen-beweging *, html.geen-beweging *::before, html.geen-beweging *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.geen-beweging .voortgang { display: none; }

/* De knop en het paneel */
.leesgemak-knop {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.9rem; padding: 0.5rem 0.95rem;
  border-radius: 999px; border: 2px solid var(--luik); background: #fff; color: var(--luik);
  font: 700 0.98rem var(--font-body); cursor: pointer; margin-left: 0.5rem;
}
.leesgemak-knop:hover { background: var(--blad-zacht); }
.leesgemak-knop__aa { font-family: var(--font-display); font-size: 1.1rem; line-height: 1; letter-spacing: -0.03em; }
.leesgemak {
  position: fixed; z-index: 70; top: calc(var(--kop-hoogte, 5.25rem) + 0.5rem); right: max(var(--gutter), calc((100vw - var(--breed)) / 2));
  width: min(22rem, calc(100vw - 2 * var(--gutter)));
  background: #fff; color: var(--inkt); border-radius: var(--r-paneel); padding: 1.25rem;
  box-shadow: 0 2px 4px rgb(7 60 30 / 0.12), 0 24px 50px -20px rgb(7 60 30 / 0.5); border: 1px solid rgb(11 110 55 / 0.15);
}
.leesgemak[hidden] { display: none; }
.leesgemak h2 { font-size: var(--step-1); margin-bottom: 0.25rem; }
.leesgemak > p { color: var(--inkt-zacht); font-size: 0.95rem; margin-bottom: 1rem; }
.leesgemak fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.leesgemak legend { font-weight: 700; margin-bottom: 0.5rem; }
.leesgemak__maten { display: flex; gap: 0.4rem; }
.leesgemak__maten button {
  flex: 1; min-height: 3rem; border-radius: 10px; border: 2px solid rgb(11 110 55 / 0.25); background: var(--kalk); color: var(--inkt);
  font-family: var(--font-display); font-weight: 700; cursor: pointer;
}
.leesgemak__maten button:nth-child(2) { font-size: 1.15rem; }
.leesgemak__maten button:nth-child(3) { font-size: 1.35rem; }
.leesgemak__maten button[aria-pressed="true"] { background: var(--luik); border-color: var(--luik); color: var(--op-luik); }
.leesgemak__schakel {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 0.75rem 0; border: 0; border-top: 1px solid rgb(11 110 55 / 0.15); background: none; cursor: pointer;
  font: 700 1rem var(--font-body); color: var(--inkt); text-align: left;
}
.leesgemak__schakel span.schuif { flex: none; width: 2.9rem; height: 1.6rem; border-radius: 999px; background: #c9d3cc; position: relative; transition: background-color 0.2s; }
.leesgemak__schakel span.schuif::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; transition: transform 0.2s var(--uit); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.leesgemak__schakel[aria-checked="true"] span.schuif { background: var(--luik); }
.leesgemak__schakel[aria-checked="true"] span.schuif::after { transform: translateX(1.3rem); }
.leesgemak__klaar { margin-top: 0.75rem; width: 100%; justify-content: center; }
@media (max-width: 64rem) {
  .leesgemak-knop { margin-left: auto; margin-right: 0.5rem; padding-inline: 0.75rem; }
  .leesgemak-knop__woord { display: none; }
}

/* De menubalk houdt een vaste lettergrootte, zodat hij op één regel blijft; de inhoud wordt wel groter */
html.tekst-groter .kop, html.tekst-grootst .kop { font-size: 16px; }
html.tekst-groter .kop .menu a, html.tekst-grootst .kop .menu a { font-size: 16px; }
html.tekst-groter .kop .knop, html.tekst-grootst .kop .knop, html.tekst-groter .leesgemak-knop, html.tekst-grootst .leesgemak-knop, html.tekst-groter .menu-knop, html.tekst-grootst .menu-knop { font-size: 16px; }