/* Taalkamer — richting F (Taalkamer met Spreekuur).
   Regel: mandarijn (--spreek) alleen voor het spreekmoment. Nergens anders. */
@font-face{font-family:Lexend;font-weight:400;font-display:swap;src:url(fonts/lexend-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Lexend;font-weight:400;font-display:swap;src:url(fonts/lexend-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Lexend;font-weight:600;font-display:swap;src:url(fonts/lexend-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Lexend;font-weight:600;font-display:swap;src:url(fonts/lexend-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
@font-face{font-family:Lexend;font-weight:700;font-display:swap;src:url(fonts/lexend-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(fonts/nunito-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:400;font-display:swap;src:url(fonts/noto-sans-arabic-arabic-400-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Arabic";font-weight:600;font-display:swap;src:url(fonts/noto-sans-arabic-arabic-600-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Ethiopic";font-weight:400;font-display:swap;src:url(fonts/noto-sans-ethiopic-ethiopic-400-normal.woff2) format("woff2")}
@font-face{font-family:"Noto Sans Ethiopic";font-weight:600;font-display:swap;src:url(fonts/noto-sans-ethiopic-ethiopic-600-normal.woff2) format("woff2")}

:root{
  --mos:#2F5D50; --mos-donker:#244A40; --blad:#8DB596; --linnen:#F7F3EC; --kaart:#FFFFFF;
  --schors:#3B2F27; --schors-zacht:#6A5B50; --lijn:#E3DACB; --spreek:#F2763A; --spreek-inkt:#2A1A10;
  --goed:#2F7D5B; --fout:#A33B2A;
  --f-tekst:Lexend,"Noto Sans Arabic","Noto Sans Ethiopic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-merk:Nunito,Lexend,system-ui,sans-serif;
  --r:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--linnen);color:var(--schors);font-family:var(--f-tekst);font-size:17px;line-height:1.55}
a{color:var(--mos)}
:focus-visible{outline:3px solid var(--blad);outline-offset:2px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[lang=ar],[lang=fa]{font-family:"Noto Sans Arabic",var(--f-tekst);line-height:1.8}
[lang=ti],[lang=am]{font-family:"Noto Sans Ethiopic",var(--f-tekst)}

.top{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:10px max(16px,env(safe-area-inset-left)) 10px max(16px,env(safe-area-inset-right));background:var(--kaart);border-bottom:1px solid var(--lijn)}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--mos);font-family:var(--f-merk);font-size:22px}
nav{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;font-size:15px}
nav a{text-decoration:none;font-weight:600}
.inline{display:inline}
.link{background:none;border:0;padding:0;color:var(--mos);font:inherit;text-decoration:underline;cursor:pointer;text-align:start}
main{padding:20px max(16px,env(safe-area-inset-left)) 40px max(16px,env(safe-area-inset-right));max-width:1100px;margin:0 auto}
.voet{font-size:13px;color:var(--schors-zacht);text-align:center;padding:16px}
.flash{background:var(--blad);color:#1E2B26;padding:10px 16px;text-align:center}

.kaart{background:var(--kaart);border-radius:var(--r);padding:22px;box-shadow:0 1px 0 rgba(59,47,39,.06)}
.smal{max-width:560px;margin:0 auto}
.breed{max-width:1100px;margin:0 auto}
h1{font-family:var(--f-merk);font-size:28px;line-height:1.2;margin:0 0 12px;color:var(--mos);text-wrap:balance}
h2{font-size:20px;margin:28px 0 10px}
.sub{color:var(--schors-zacht);margin:0 0 16px}
.label{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--schors-zacht);margin:0 0 6px}
.klein{font-size:14px;color:var(--schors-zacht)}
.hint{font-weight:400;color:var(--schors-zacht);font-size:14px}

/* Tweetalig: Nederlands boven, steuntaal eronder */
.bi{display:inline-flex;flex-direction:column;gap:2px}
.bi .st,.st{display:block;font-size:.82em;color:var(--schors-zacht);font-weight:400}
h1 .bi .st{font-family:var(--f-tekst);font-size:16px}
.st-alle{color:var(--schors-zacht)}

.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 20px;border-radius:999px;border:2px solid var(--mos);background:var(--mos);color:#fff;font:600 16px/1.2 var(--f-tekst);text-decoration:none;cursor:pointer;text-align:center}
.knop .bi .st{color:inherit;opacity:.85}
.knop.zacht{background:#fff;color:var(--mos)}
.knop.groot{width:100%;min-height:60px;font-size:18px;margin-top:16px}
.knop.klein{min-height:36px;padding:6px 14px;font-size:14px}
.knop.spreek{background:var(--spreek);border-color:var(--spreek);color:var(--spreek-inkt)}
.knop:disabled{opacity:.5;cursor:default}
.rij{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.stapel{display:grid;gap:12px}
input,select,textarea{font:inherit;padding:12px 14px;border:2px solid var(--lijn);border-radius:12px;background:#fff;color:var(--schors);width:100%}
input.pin,input.code{font-size:26px;letter-spacing:.3em;text-align:center}
label{font-weight:600}
fieldset{border:0;padding:0;margin:0}
legend{font-weight:600;margin-bottom:8px}
.fout{background:#F8E3DE;color:var(--fout);padding:10px 14px;border-radius:12px}

.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.taal{min-height:64px;border-radius:16px;border:2px solid var(--lijn);background:#fff;font:600 20px var(--f-tekst);color:var(--schors);cursor:pointer}
.taal:hover{border-color:var(--mos)}
.avatars{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.avatar{position:relative;display:flex;justify-content:center;padding:8px;border:2px solid var(--lijn);border-radius:16px;cursor:pointer}
.avatar input,.plaatje input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.avatar:has(input:focus-visible),.plaatje:has(input:focus-visible){outline:3px solid var(--blad);outline-offset:2px}
.avatar:has(input:checked){border-color:var(--mos);background:#EEF4F0}
.codekaart{background:var(--linnen);border:2px dashed var(--mos);border-radius:16px;padding:14px;margin-bottom:16px;text-align:center}
.grotecode{font:800 34px/1.1 var(--f-merk);letter-spacing:.12em;color:var(--mos);margin:6px 0}
.beloftes{padding-left:20px;display:grid;gap:10px}

.keuzes{display:grid;gap:8px}
.keuze{display:flex;gap:10px;align-items:center;padding:12px 14px;border:2px solid var(--lijn);border-radius:14px;font-weight:400;cursor:pointer}
.keuze:has(input:checked){border-color:var(--mos);background:#EEF4F0}
.plaatjes{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin-top:8px}
.plaatje{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px;border:2px solid var(--lijn);border-radius:14px;font-weight:400;text-align:center;cursor:pointer}
.plaatje:has(input:checked){border-color:var(--mos);background:#EEF4F0}
.pict{font-size:30px;line-height:1}
.vraag{border-top:1px solid var(--lijn);padding-top:14px}
.voorbeeldletters,.leeszin{font-size:22px}

/* Spreekuur */
.spreekuur{max-width:560px;margin:0 auto;background:var(--kaart);border-radius:24px;padding:22px}
.spreekuur .kop{display:flex;gap:12px;align-items:center}
.spreekuur .kop h1{margin:0}
.streak{margin-left:auto;font:800 22px var(--f-merk);color:var(--mos);white-space:nowrap}
.balk{display:flex;gap:6px;margin:18px 0 8px}
.balk i{flex:1;height:8px;border-radius:4px;background:var(--lijn)}
.balk i.af{background:var(--mos)} .balk i.nu{background:var(--blad)}
.thema{font-size:15px;color:var(--schors-zacht)}
.stappen{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}
.stappen a{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--linnen);text-decoration:none;color:var(--schors)}
.stappen .nr{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;font-weight:700;flex:none}
.stappen .af .nr{background:var(--mos);color:#fff}
.stappen .nu a{outline:2px solid var(--mos)}
.stappen .spreek.nu a{outline-color:var(--spreek)}
.stappen .spreek .nr{border:2px solid var(--spreek)}
.stappen .wat{flex:1}
.stappen .duur{font-size:13px;color:var(--schors-zacht)}

.flitskaarten{list-style:none;padding:0;display:grid;gap:12px}
.flits{border:2px solid var(--lijn);border-radius:16px;padding:14px;display:grid;gap:8px}
.flits.gedaan{opacity:.5}
.flits .woord{font-size:24px;font-weight:600;margin:0;display:flex;gap:10px;align-items:center}
.duim{display:flex;gap:8px;flex-wrap:wrap}

.artikel p{font-size:19px;line-height:1.7}
.woordhulp{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.woordhulp div{background:var(--linnen);padding:8px 12px;border-radius:12px}
.woordhulp dt{font-weight:600} .woordhulp dd{margin:0;color:var(--schors-zacht)}
audio{width:100%;margin:8px 0}
.uitslag{font-size:22px;font-weight:600}

/* Gesprek */
.situatie{background:var(--linnen);border-radius:16px;padding:14px}
.situatie p{margin:4px 0}
.mededeling{font-size:14px;color:var(--schors-zacht);margin:12px 0}
.kies-modus{display:grid;gap:8px}
.chat{display:grid;gap:8px;margin:16px 0}
.bel{max-width:85%;padding:10px 14px;border-radius:18px;line-height:1.45}
.bel.tegenspeler{background:var(--linnen);justify-self:start;border-bottom-left-radius:6px}
.bel.leerder{background:#FDE7DC;justify-self:end;border-bottom-right-radius:6px}
.invoer{display:flex;gap:8px}
.invoer input{flex:1}
.stem-status{display:flex;gap:10px;align-items:center;padding:12px;border-radius:16px;background:#FDE7DC;margin:12px 0}
.golf{display:inline-flex;gap:4px;align-items:center;height:28px}
.golf i{width:5px;height:10px;border-radius:3px;background:var(--spreek);animation:golf 1s ease-in-out infinite}
.golf i:nth-child(2){animation-delay:.1s}.golf i:nth-child(3){animation-delay:.2s}.golf i:nth-child(4){animation-delay:.3s}.golf i:nth-child(5){animation-delay:.4s}
@keyframes golf{50%{height:26px}}
@media (prefers-reduced-motion:reduce){.golf i{animation:none;height:18px}}
.feedback{background:var(--linnen);border-radius:16px;padding:16px;display:grid;gap:8px;margin-top:12px}
.feedback h2{margin:0}
.scores{display:grid;gap:6px}
.scores div{display:flex;justify-content:space-between;gap:8px}
.hulp ul{padding-left:18px}

.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.tegel{display:flex;flex-direction:column;gap:6px;background:var(--kaart);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--schors);border:2px solid transparent}
.tegel:hover{border-color:var(--blad)}
.tegel .titel{font-weight:700;font-size:18px}
.tegel.dicht{opacity:.45}
.tegel .tekst{color:var(--schors-zacht);font-size:15px}
.woordenlijst{list-style:none;padding:0;display:grid;gap:6px}
.woordenlijst li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--lijn)}
.woordenlijst .st{grid-column:1}
.sterren{grid-row:1/3;grid-column:2;color:var(--mos);letter-spacing:2px;align-self:center}
.route{display:grid;gap:0;margin:12px 0 20px;border-left:4px solid var(--lijn);padding-left:16px}
.halte{position:relative;padding:8px 0}
.halte .stip{position:absolute;left:-26px;top:12px;width:16px;height:16px;border-radius:50%;background:var(--lijn);border:3px solid var(--linnen)}
.halte.af .stip{background:var(--mos)} .halte.nu .stip{background:var(--spreek)}
.cijfers{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:0}
.cijfers div{background:var(--linnen);border-radius:12px;padding:10px}
.cijfers dt{font-size:13px;color:var(--schors-zacht)} .cijfers dd{margin:0;font-weight:700;font-size:20px}
.cijfers.klein dd{font-size:15px}
.antwoord{background:var(--linnen);border-radius:16px;padding:14px;margin-top:12px;white-space:normal}
.klaar{text-align:center}
.streak-groot{font:800 72px/1 var(--f-merk);color:var(--mos);margin:8px 0}

/* Medewerkers */
.tabelwrap{overflow-x:auto;background:var(--kaart);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--lijn);vertical-align:middle}
th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--schors-zacht)}
.num{text-align:right;font-variant-numeric:tabular-nums}
td form select{width:auto;padding:6px 8px}
.pil{font-size:11px;background:var(--blad);color:#1E2B26;border-radius:999px;padding:2px 8px}
.mini{vertical-align:middle}
.meter{display:inline-block;width:80px;height:8px;border-radius:4px;background:linear-gradient(90deg,var(--mos) var(--p),var(--lijn) var(--p));vertical-align:middle}
.fasenbalk{list-style:none;padding:0;display:grid;gap:8px;max-width:560px}
.fasenbalk li{display:grid;grid-template-columns:200px 1fr 40px;gap:10px;align-items:center}
.fasenbalk .meter{width:100%}
.formrij{background:var(--kaart);padding:12px;border-radius:var(--r);margin:10px 0}
.formrij label{display:grid;gap:4px;font-size:14px}
.formrij input,.formrij select{width:auto;min-width:140px}
.qr{width:168px;height:168px;background:#fff}
.qr svg{width:100%;height:100%}
.uitnodiging code{font-size:12px;word-break:break-all}
.redactie{margin:12px 0}
.redactie.live{border-left:6px solid var(--goed)} .redactie.afgewezen{opacity:.6}
.woordraster{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;list-style:none;padding:0}
.woordraster li{background:var(--kaart);padding:10px;border-radius:12px;font-size:18px}
@media print{.top,.voet,.noprint{display:none}body{background:#fff}.lesbrief .artikel p{font-size:15px}}
@media (max-width:520px){h1{font-size:24px}.fasenbalk li{grid-template-columns:1fr 1fr 40px}.avatars{grid-template-columns:repeat(4,1fr)}}