/* Gedeelde stijl van de oefeningen: zelfde huisstijl als Taalmaterialen per leerjaar (bijleren.eu) */
:root{
  color-scheme:light;
  --ground:#faf6ee; --paper:#ffffff; --ink:#2f2a22; --muted:#756a58; --line:#e8ddc8; --line-soft:#f1e9da;
  --accent:#946B29; --accent-dark:#74531f; --accent-soft:#f3e9d6;
  --ok:#4CAF50; --ok-soft:#d6f0d6; --wrong:#d9663f; --wrong-soft:#f7d9d2;
  --display:"Fredoka","Nunito","Avenir Next",sans-serif;
  --body:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--ink);font:16px/1.5 var(--body);margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:20px 16px 64px;display:grid;gap:20px}
header{display:grid;gap:8px}
.eyebrow{font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{font:700 clamp(30px,4vw,44px)/1.05 var(--display);margin:0}
h2{font:700 22px/1.15 var(--display);margin:0}
.lede{max-width:70ch;color:var(--muted);margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{border:0;background:var(--accent);color:#fff;border-radius:12px;padding:10px 18px;font:600 16px/1.2 var(--display);box-shadow:0 1px 2px rgba(47,42,34,.15)}
.btn:hover{background:var(--accent-dark)}
.btn:disabled{opacity:.5;cursor:default}
.tool{border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:9px 14px;font:600 15px/1.2 var(--display);color:var(--ink);box-shadow:0 1px 2px rgba(47,42,34,.06);text-decoration:none;display:inline-flex;gap:6px;align-items:center}
.tool:hover{background:var(--accent-soft)}
.tool[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:12px;padding:3px;background:var(--paper);gap:2px}
.seg button{border:0;background:transparent;border-radius:9px;padding:7px 12px;font:700 14px/1.2 var(--body);color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 3px rgba(47,42,34,.07);padding:16px}
.field{font:700 20px/1.2 var(--body);padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;min-width:0;flex:1 1 280px;max-width:560px}
.hint{font:600 14px/1.4 var(--body);color:var(--muted);margin:0}
.lbl{font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.msg{font:700 15px/1.4 var(--body);color:var(--muted);margin:0}
.msg.fout{color:var(--wrong)}

/* navigatie tussen de pagina's */
.sitenav{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-bottom:6px;border-bottom:1px solid var(--line)}
.sitenav a{font:700 14px/1.2 var(--body);color:var(--muted);text-decoration:none;padding:7px 11px;border-radius:10px}
.sitenav a:hover{background:var(--accent-soft);color:var(--ink)}
.sitenav a[aria-current="page"]{background:var(--accent);color:#fff}
.sitenav .home{font:700 16px/1 var(--display);color:var(--accent);margin-right:6px}

/* klanktegels in de kleuren van de klankblokjes van woordenschat.be */
.kt{display:inline-grid;place-items:center;min-width:1.9em;height:2.1em;padding:0 .35em;border-radius:.4em;border:2px solid var(--k);color:#1f2a37;background:var(--f);font:700 1em/1 var(--display);box-shadow:inset 0 -.12em 0 rgba(0,0,0,.12)}
.kt.mk{--f:#4fc3f7;--k:#0288d1} .kt.kk{--f:#8bc34a;--k:#558b2f} .kt.lk{--f:#fdd835;--k:#f57f17}
.kt.tk{--f:#ff7043;--k:#bf360c} .kt.dk{--f:#fafafa;--k:#9e9e9e} .kt.df{--f:#ef9a9a;--k:#c62828}
.kleurcode{display:flex;flex-wrap:wrap;gap:6px 14px;font:600 13px/1.3 var(--body);color:var(--muted)}
.kleurcode span{display:inline-flex;gap:6px;align-items:center}
.kleurcode .kt{font-size:12px;height:1.8em}
.speaking{box-shadow:0 0 0 4px var(--accent-soft),0 0 0 6px var(--accent)!important}