:root {
  --inkt: #14213d;
  --papier: #fbf7f0;
  --wit: #ffffff;
  --koraal: #e76f51;
  --zee: #2a9d8f;
  --zee-licht: #d8efec;
  --zon: #f4a261;
  --zon-licht: #fdf0e3;
  --grijs: #5c6378;
  --rand: #e7e0d4;
  --goed: #2a9d8f;
  --fout: #d1495b;
  /* Donkere varianten voor tekst en knoppen (contrast minstens 4,5:1); de merkkleuren hierboven blijven voor vlakken en lijnen */
  --koraal-knop: #c4512f;   /* wit erop: 4,6:1 */
  --zee-knop: #1f7a6f;      /* wit erop: 5,3:1 */
  --koraal-tekst: #b2472c;  /* op papier: 5,0:1 */
  --zee-tekst: #1f6f66;     /* op wit: 5,9:1 */
  --zon-tekst: #8a4f17;     /* op zon-licht: 6,4:1 */
  --fout-tekst: #b3261e;
  --geel-licht: #fff1b8;    /* gemarkeerd woord of alinea */
  --goed-licht: #e4f4f1;
  --fout-licht: #fbe6e9;
  --gekozen: #f4f1ea;
  --grijs-zacht: #6e6757;   /* bijschriften en bronnen */
  --vlak-donker: #14213d;   /* donkere kaarten (pauze, woordhulp, morgen) */
  --vlak-tekst: #fbf7f0;
  --focus: #1f6f66;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Nunito', system-ui, sans-serif; background: var(--papier); color: var(--inkt); font-size: 17px; line-height: 1.6; }
h1, h2, h3, .serif { font-family: 'Newsreader', Georgia, serif; letter-spacing: -.01em; line-height: 1.15; }
a { color: inherit; }
img { max-width: 100%; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }

/* Navigatie */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: 'Newsreader', Georgia, serif; font-weight: 800; font-size: 1.35rem; text-decoration: none; }
.logo-merk { width: 36px; height: 36px; display: grid; place-items: center; color: #14213d; }
.logo-merk .merk-logo { width: 36px; height: 36px; }
.nav-links { display: flex; gap: 18px; align-items: center; font-weight: 700; font-size: .95rem; }
.nav-links a { text-decoration: none; }
.nav-links .verberg-mobiel { display: none; }
@media (min-width: 760px) { .nav-links .verberg-mobiel { display: inline; } }

/* Knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 14px; font-weight: 800; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.knop:hover { transform: translateY(-1px); }
.knop-koraal { background: var(--koraal-knop); color: #fff; box-shadow: 0 4px 0 #973a20; }
.knop-zee { background: var(--zee-knop); color: #fff; box-shadow: 0 4px 0 #165a52; }
.knop-rand { border-color: var(--inkt); color: var(--inkt); background: transparent; }
.knop-licht { background: var(--wit); color: var(--inkt); }
.knop:disabled { opacity: .5; cursor: default; transform: none; }

/* Secties */
.sectie { padding: 64px 0; }
.sectie-titel { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: 14px; }
.intro { color: var(--grijs); max-width: 640px; font-size: 1.08rem; }
.label { display: inline-block; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--koraal-tekst); margin-bottom: 10px; }

.raster-3 { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 760px) { .raster-3 { grid-template-columns: repeat(3, 1fr); } }
.raster-2 { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 28px; }
@media (min-width: 760px) { .raster-2 { grid-template-columns: repeat(2, 1fr); } }

.kaart { background: var(--wit); border: 1.5px solid var(--rand); border-radius: 18px; padding: 24px; }
.kaart h3 { font-size: 1.25rem; margin-bottom: 8px; }
.kaart p { color: var(--grijs); }

.cijfer { font-family: 'Newsreader', Georgia, serif; font-weight: 800; font-size: clamp(2.6rem, 7vw, 3.6rem); line-height: 1; color: var(--koraal); }
.bron { font-size: .78rem; color: var(--grijs); margin-top: 8px; }
.bron a { color: var(--grijs); }

/* Formulier */
.formulier { display: grid; gap: 12px; max-width: 520px; }
.formulier label { font-weight: 700; font-size: .9rem; display: block; margin-bottom: 4px; }
.formulier input, .formulier select, .formulier textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--rand); border-radius: 12px; background: var(--wit); color: var(--inkt); }
.formulier input:focus, .formulier select:focus, .formulier textarea:focus { border-color: var(--zee); }

.voet { padding: 36px 0 48px; border-top: 1px solid var(--rand); font-size: .88rem; color: var(--grijs); }
.voet a { color: var(--grijs); }

/* Opzet-schakelaar (alleen in de conceptfase) */
.concept-balk { background: var(--inkt); color: var(--papier); font-size: .82rem; padding: 8px 0; }
.concept-balk .wrap { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.concept-balk a { color: var(--papier); font-weight: 700; }
.concept-balk a[aria-current] { color: var(--zon); text-decoration: none; }

/* ── Toegankelijkheid (gedeeld door site, demo, app en portaal) ── */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Zichtbare focusrand voor toetsenbord en schakelaar (op donkere vlakken geel, zie demo.html) */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Koppen die na een schermwissel de focus krijgen (tabindex=-1) hoeven geen rand */
:is(h1, h2, h3, .stap-label)[tabindex="-1"]:focus { outline: none; }
/* Minder beweging: als het apparaat dat vraagt, of met de leesinstelling "Rustig scherm" (html.rustig) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  #confetti, .deeltje, .bubbel, .goudflits { display: none !important; }
}
html.rustig *, html.rustig *::before, html.rustig *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html.rustig #confetti, html.rustig .deeltje, html.rustig .bubbel, html.rustig .goudflits { display: none !important; }

/* ── Leesinstellingen: achtergrond (alleen in de leerling-app en demo, via html[data-thema]) ── */
html[data-thema="wit"] { --papier: #ffffff; }
html[data-thema="geel"] { --papier: #fdf6d8; --wit: #fffbea; --rand: #e6dcb8; --zon-licht: #fbe7c8; } /* zon-licht iets sterker: moeilijke woorden blijven zichtbaar */
html[data-thema="donker"] {
  color-scheme: dark;
  --papier: #14213d; --wit: #1d2c4f; --inkt: #f3eee5; --grijs: #c3c9d8; --rand: #3a4d80;
  --zon-licht: #2a3550; --zee-licht: #1d3d44;
  --koraal-tekst: #f6a58d; --zee-tekst: #8fe0d4; --zon-tekst: #f8c98f; --fout-tekst: #ffaaa3;
  --geel-licht: #5b4a10; --goed-licht: #1d3d44; --fout-licht: #4a2232; --gekozen: #2b3b62; --grijs-zacht: #b9c0d0;
  --vlak-donker: #0b1428; --vlak-tekst: #f3eee5; --focus: #f4d35e;
}