/* ============================================================
   Rijinstructeur — Fase 1A
   Eigen design system. Mobile first, licht en donker.
   Arabisch is de taal van de schil (RTL); Nederlands is de taal
   van de leerstof en staat altijd LTR.
   ============================================================ */

:root {
  --navy:        #14356b;
  --navy-zacht:  #1d4a91;
  --accent:      #2f7de1;
  --accent-licht:#e8f0fd;

  --goed:        #0f7a4d;
  --goed-zacht:  #e6f5ee;
  --fout:        #c0392b;
  --fout-zacht:  #fdeceb;
  --let-op:      #9a6409;
  --let-op-zacht:#fdf4e3;

  --bg:          #f4f6f9;
  --vlak:        #ffffff;
  --vlak-2:      #fafbfc;
  --rand:        #e3e7ee;
  --rand-sterk:  #cdd4e0;
  --ink:         #16202e;
  --ink-2:       #4a5769;
  --ink-3:       #77839a;

  --r-s: 8px;
  --r-m: 14px;
  --r-l: 20px;
  --schaduw:   0 1px 2px rgba(16,32,58,.06), 0 4px 16px rgba(16,32,58,.06);
  --schaduw-2: 0 2px 6px rgba(16,32,58,.08), 0 12px 32px rgba(16,32,58,.10);

  --hero-van:   #14356b;
  --hero-tot:   #1d4a91;

  --ar: "Noto Naskh Arabic", "Segoe UI", "Tahoma", system-ui, sans-serif;
  --nl: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;

  --kop-h: 62px;
  --nav-h: 66px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --navy:        #6fa2f0;
    --navy-zacht:  #4d86dc;
    --accent:      #5c9bf0;
    --accent-licht:#16233a;

    --goed:        #4ac48c;
    --goed-zacht:  #12281f;
    --fout:        #ef8079;
    --fout-zacht:  #2c1817;
    --let-op:      #e0ab4f;
    --let-op-zacht:#2a2214;

    --bg:          #0e1117;
    --vlak:        #161a22;
    --vlak-2:      #1b202a;
    --rand:        #272e3a;
    --rand-sterk:  #38414f;
    --ink:         #e8ecf2;
    --ink-2:       #aeb8c7;
    --ink-3:       #7f8a9c;

    --hero-van:    #16305c;
    --hero-tot:    #1f4680;
    --schaduw:   0 1px 2px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.3);
    --schaduw-2: 0 2px 6px rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.4);
  }
}
:root[data-thema="donker"] {
  --navy:#6fa2f0; --navy-zacht:#4d86dc; --accent:#5c9bf0; --accent-licht:#16233a;
  --goed:#4ac48c; --goed-zacht:#12281f; --fout:#ef8079; --fout-zacht:#2c1817;
  --let-op:#e0ab4f; --let-op-zacht:#2a2214;
  --bg:#0e1117; --vlak:#161a22; --vlak-2:#1b202a; --rand:#272e3a;
  --rand-sterk:#38414f; --ink:#e8ecf2; --ink-2:#aeb8c7; --ink-3:#7f8a9c;
  --hero-van:#16305c; --hero-tot:#1f4680;
  --schaduw:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
  --schaduw-2:0 2px 6px rgba(0,0,0,.45),0 12px 32px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; overflow-x: hidden; max-width: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--ar);
  font-size: 16px; line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.nl { font-family: var(--nl); direction: ltr; text-align: left; unicode-bidi: isolate; }
.ar { font-family: var(--ar); direction: rtl; text-align: right; unicode-bidi: isolate; }

button, input, select { font: inherit; color: inherit; }
svg { flex: none; }
.knop svg { width: 18px; height: 18px; }
.knop.klein svg { width: 16px; height: 16px; }
a { color: var(--accent); }
a.knop { text-decoration: none; }
.onderbalk a { text-decoration: none; }

/* ── laadscherm ─────────────────────────────────────────────── */
.laden-scherm { min-height: 100dvh; display: grid; place-items: center; }
.spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--rand); border-top-color: var(--accent);
  animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }

/* ── layout ─────────────────────────────────────────────────── */
.kop {
  position: sticky; top: 0; z-index: 30;
  height: var(--kop-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--vlak);
  border-bottom: 1px solid var(--rand);
}
.kop .merk {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: -.01em; color: var(--ink);
}
.kop .merk .logo {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--hero-van); display: grid; place-items: center;
}
.kop .merk .logo svg { width: 18px; height: 18px; }
.kop .merk .naam { font-size: 15px; }
.kop .merk .sub { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.kop .rek { flex: 1; }

.icoonknop {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--rand); border-radius: 10px;
  background: var(--vlak); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.icoonknop:hover { background: var(--vlak-2); border-color: var(--rand-sterk); }
.icoonknop svg { width: 18px; height: 18px; }

main { padding: 18px 16px calc(var(--nav-h) + 28px); max-width: 980px; margin: 0 auto; }
main > * { min-width: 0; }
.kaart, .hero, .pakket { max-width: 100%; overflow-wrap: anywhere; }

@media (min-width: 900px) {
  main { padding-bottom: 40px; }
}

/* ── onderbalk (mobiel) ─────────────────────────────────────── */
.onderbalk {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--vlak); border-top: 1px solid var(--rand);
}
.onderbalk a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; text-decoration: none; color: var(--ink-3);
  font-size: 11px; font-weight: 600;
}
.onderbalk a svg { width: 21px; height: 21px; }
.onderbalk a.actief { color: var(--accent); }
@media (min-width: 900px) {
  .onderbalk { position: sticky; top: var(--kop-h); height: auto;
    display: flex; justify-content: center; gap: 4px; border-top: 0;
    border-bottom: 1px solid var(--rand); padding: 8px 16px; }
  .onderbalk a { flex-direction: row; gap: 7px; padding: 8px 14px;
    border-radius: 10px; font-size: 13.5px; }
  .onderbalk a.actief { background: var(--accent-licht); }
}

/* ── bouwstenen ─────────────────────────────────────────────── */
.kaart {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--r-m); box-shadow: var(--schaduw);
}
.kaart + .kaart { margin-top: 14px; }
.kaart-body { padding: 18px; }

.sectiekop {
  display: flex; align-items: baseline; gap: 10px;
  margin: 26px 2px 12px;
}
.sectiekop h2 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.sectiekop .telling { font-size: 13px; color: var(--ink-3); font-weight: 600; }
@media (max-width: 480px) { .sectiekop .telling.nl { display: none; } }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px;
  border: 1px solid var(--rand-sterk); border-radius: 11px;
  background: var(--vlak); color: var(--ink);
  font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
  transition: transform .08s, background .15s, border-color .15s;
}
.knop:active { transform: translateY(1px); }
.knop:hover  { background: var(--vlak-2); }
.knop.prim {
  background: var(--hero-van); border-color: var(--hero-van); color: #fff;
}
.knop.prim:hover { background: var(--hero-tot); border-color: var(--hero-tot); }
.knop.breed { width: 100%; }
.knop.klein { min-height: 38px; padding: 0 14px; font-size: 13.5px; border-radius: 9px; }
.knop:disabled { opacity: .5; cursor: not-allowed; }

.balk { height: 8px; border-radius: 99px; background: var(--rand); overflow: hidden; }
.balk > i { display: block; height: 100%; border-radius: 99px;
  background: var(--accent); transition: width .5s ease; }
.balk.goed > i { background: var(--goed); }
.balk.dun { height: 6px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11.5px; font-weight: 700;
  background: var(--vlak-2); border: 1px solid var(--rand); color: var(--ink-2);
}
.chip.goed  { background: var(--goed-zacht);  border-color: transparent; color: var(--goed); }
.chip.fout  { background: var(--fout-zacht);  border-color: transparent; color: var(--fout); }
.chip.letop { background: var(--let-op-zacht); border-color: transparent; color: var(--let-op); }
.chip.info  { background: var(--accent-licht); border-color: transparent; color: var(--accent); }

/* ── dashboard ──────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--hero-van) 0%, var(--hero-tot) 100%);
  color: #fff; border-radius: var(--r-l); padding: 22px;
  box-shadow: var(--schaduw-2);
}

.hero .fase { font-size: 12.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; opacity: .78; }
.hero h1 { margin: 4px 0 16px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.hero .ring-rij { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero .ring-rij > * { min-width: 0; }

.ring { width: 96px; height: 96px; flex: none; position: relative; }
.ring svg { transform: rotate(-90deg); }
.ring .waarde {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
}
.hero .cijfers { display: flex; gap: 18px; flex-wrap: wrap; flex: 1 1 210px; min-width: 0; }
.hero .cijfers div b { display: block; font-size: 19px; font-weight: 800; }
.hero .cijfers div span { font-size: 12px; opacity: .8; font-weight: 600; }

.snelrij { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
@media (min-width: 620px) { .snelrij { grid-template-columns: repeat(4, 1fr); } }
.snelkaart {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 13px; border-radius: var(--r-m);
  background: var(--vlak); border: 1px solid var(--rand);
  cursor: pointer; text-align: start; transition: border-color .15s, transform .08s;
}
.snelkaart:hover { border-color: var(--accent); }
.snelkaart:active { transform: translateY(1px); }
.snelkaart svg { width: 19px; height: 19px; color: var(--accent); }
.snelkaart b { font-size: 13.5px; }
.snelkaart span { font-size: 11.5px; color: var(--ink-3); }

/* ── pakketten ──────────────────────────────────────────────── */
.pakketrooster { display: grid; gap: 12px; }
@media (min-width: 640px) { .pakketrooster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pakketrooster { grid-template-columns: repeat(3, 1fr); } }

.pakket {
  display: flex; flex-direction: column; gap: 11px;
  padding: 16px; border-radius: var(--r-m);
  background: var(--vlak); border: 1px solid var(--rand); box-shadow: var(--schaduw);
}
.pakket .rij1 { display: flex; align-items: center; gap: 10px; }
.pakket .nr {
  width: 38px; height: 38px; flex: none; border-radius: 10px;
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
  background: var(--accent-licht); color: var(--accent);
}
.pakket.klaar .nr { background: var(--goed-zacht); color: var(--goed); }
.pakket .titel { font-weight: 800; font-size: 15.5px; }
.pakket .meta { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.pakket .voortgangtekst {
  display: flex; justify-content: space-between; font-size: 12.5px;
  color: var(--ink-2); font-weight: 700;
}

/* ── trainer ────────────────────────────────────────────────── */
.trainerkop { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.trainerkop .tel { font-size: 13.5px; font-weight: 800; color: var(--ink-2); }
.trainerkop .rek { flex: 1; }

.vraagkaart { padding: 20px; }
.vraagnr {
  font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px;
}
.vraagtekst {
  font-size: 17.5px; line-height: 1.55; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: 4px;
}

.vraagbeeld {
  margin: 14px 0 2px; display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
}
.vraagbeeld img {
  max-width: 100%; max-height: 210px; border-radius: var(--r-s);
  background: #fff; padding: 6px; border: 1px solid var(--rand);
}
@media (min-width: 760px) {
  .vraagblok { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; }
  .vraagbeeld { margin: 0; max-width: 300px; }
  .vraagbeeld img { max-height: 260px; }
}

.opties { display: grid; gap: 10px; margin-top: 18px; }
.optie {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  direction: ltr; padding: 14px 15px; text-align: left;
  border: 1.5px solid var(--rand); border-radius: 12px;
  background: var(--vlak); cursor: pointer;
  transition: border-color .15s, background .15s, transform .08s;
}
.optie:hover:not(:disabled) { border-color: var(--accent); background: var(--vlak-2); }
.optie:active:not(:disabled) { transform: translateY(1px); }
.optie .letter {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  display: grid; place-items: center; font-weight: 800; font-size: 13.5px;
  background: var(--vlak-2); border: 1px solid var(--rand); color: var(--ink-2);
}
.optie .tekst { flex: 1; font-size: 15px; line-height: 1.5; }
.optie .merkje { width: 22px; height: 22px; flex: none; }

.optie.juist {
  border-color: var(--goed); background: var(--goed-zacht);
}
.optie.juist .letter { background: var(--goed); border-color: var(--goed); color: #fff; }
.optie.onjuist {
  border-color: var(--fout); background: var(--fout-zacht);
}
.optie.onjuist .letter { background: var(--fout); border-color: var(--fout); color: #fff; }
.optie:disabled { cursor: default; }
.optie.flauw { opacity: .55; }

.uitslag {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 14px 16px; border-radius: 12px;
  font-weight: 800; font-size: 15.5px;
}
.uitslag.goed { background: var(--goed-zacht); color: var(--goed); }
.uitslag.fout { background: var(--fout-zacht); color: var(--fout); }
.uitslag svg { width: 22px; height: 22px; flex: none; }

.uitleg {
  margin-top: 12px; padding: 16px;
  border-radius: 12px; background: var(--vlak-2); border: 1px solid var(--rand);
}
.uitleg h4 {
  margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.uitleg p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.uitleg p:last-child { margin-bottom: 0; }
.uitleg.leeg { text-align: center; color: var(--ink-3); font-size: 13.5px; }

.herkomst-added {
  background: var(--let-op-zacht); color: var(--let-op);
  padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0; text-transform: none;
}
.herkomst-source {
  background: var(--goed-zacht); color: var(--goed);
  padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800;
  letter-spacing: 0; text-transform: none;
}

.bronregel {
  margin-top: 12px; font-size: 11.5px; color: var(--ink-3);
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}

.volgendebalk {
  position: sticky; bottom: calc(var(--nav-h) + 8px); z-index: 20;
  margin-top: 16px;
}
@media (min-width: 900px) { .volgendebalk { bottom: 16px; } }

/* ── resultaat ──────────────────────────────────────────────── */
.score {
  text-align: center; padding: 26px 18px;
}
.score .getal { font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.score .onder { margin-top: 8px; font-size: 14px; color: var(--ink-2); font-weight: 700; }
.score .balkrij { max-width: 340px; margin: 18px auto 0; }

/* ── lijsten ────────────────────────────────────────────────── */
.rijlijst { display: grid; gap: 10px; }
.rij {
  display: flex; align-items: center; gap: 12px; padding: 14px 15px;
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--r-m); cursor: pointer;
}
.rij:hover { border-color: var(--accent); }
.rij .nr {
  min-width: 42px; height: 30px; padding: 0 8px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 800; font-size: 12.5px;
  background: var(--vlak-2); border: 1px solid var(--rand); color: var(--ink-2);
}
.rij .tekst { flex: 1; font-size: 14px; line-height: 1.45; }

.leeg {
  text-align: center; padding: 48px 20px; color: var(--ink-3);
}
.leeg .ico { font-size: 34px; margin-bottom: 10px; opacity: .6; }
.leeg p { margin: 0; font-size: 14.5px; }

/* ── inloggen ───────────────────────────────────────────────── */
.inlog { min-height: 100dvh; display: grid; place-items: center; padding: 22px; }
.inlogdoos { width: 100%; max-width: 400px; }
.inlogdoos .merkgroot {
  text-align: center; margin-bottom: 22px;
}
.inlogdoos .merkgroot .logo {
  width: 56px; height: 56px; border-radius: 15px; margin: 0 auto 12px;
  background: var(--hero-van); display: grid; place-items: center;
}
.inlogdoos .merkgroot .logo svg { width: 32px; height: 32px; }
.inlogdoos .merkgroot h1 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.inlogdoos .merkgroot p { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-3); }

.veld { margin-bottom: 13px; }
.veld label {
  display: block; font-size: 12.5px; font-weight: 800; margin-bottom: 6px;
  color: var(--ink-2);
}
.veld input {
  width: 100%; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--rand); border-radius: 11px;
  background: var(--vlak); outline: none;
  transition: border-color .15s;
}
.veld input:focus { border-color: var(--accent); }
.veld.nl input { direction: ltr; text-align: left; }

.melding {
  padding: 11px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  margin-bottom: 13px;
}
.melding.fout { background: var(--fout-zacht); color: var(--fout); }
.melding.info { background: var(--accent-licht); color: var(--accent); }

.wissel { text-align: center; margin-top: 16px; font-size: 13.5px; color: var(--ink-2); }
.wissel button {
  background: none; border: 0; color: var(--accent); font-weight: 800; cursor: pointer;
  padding: 0; font-size: inherit;
}

/* ── taalbalk ───────────────────────────────────────────────── */
.taalbalk {
  direction: ltr;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 0 0 14px; padding: 5px;
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: 999px; width: fit-content; margin-inline: auto;
}
.taalknop {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; min-height: 40px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: var(--ink-2); font-weight: 800; font-size: 14px;
  transition: background .15s, color .15s;
}
.taalknop:hover { background: var(--vlak-2); color: var(--ink); }
.taalknop.actief { background: var(--accent); color: #fff; }
.taalknop .vlag { font-size: 16px; line-height: 1; }
.taalscheiding { color: var(--rand-sterk); font-weight: 700; }

/* ── studie-indeling: vraag + vaste woordenlijst ─────────────── */
.studie { direction: ltr; display: grid; gap: 14px; }
.studie-hoofd { direction: rtl; min-width: 0; }
@media (min-width: 1000px) {
  .studie { grid-template-columns: minmax(0, 1fr) 280px; gap: 18px;
            align-items: start; }
  .woordkaart { position: sticky; top: 74px; }
}

.woordkaart {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--r-m); padding: 15px 16px; align-self: start;
}
.woordkop {
  direction: ltr;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid var(--rand);
  font-size: 13.5px; font-weight: 800;
}
.woordkop .ico { font-size: 15px; }
.woordkop .nl { color: var(--ink); }
.woordkop .ar { color: var(--ink-3); font-size: 13px; font-weight: 700; }

.woordlijst { list-style: none; margin: 0; padding: 0; }
.woordlijst { direction: ltr; }
.woordlijst li {
  display: grid; gap: 2px;
  padding: 9px 0; border-bottom: 1px dashed var(--rand);
}
.woordlijst li:last-child { border-bottom: 0; }
.woordlijst .term {
  font-weight: 800; font-size: 14px; min-width: 0;
  overflow-wrap: anywhere;
}
.woordlijst .bet {
  font-size: 14px; font-weight: 700; color: var(--accent); min-width: 0;
}
.woordleeg { direction: rtl; margin-top: 10px; font-size: 13px; color: var(--ink-3); }

/* nog niet vertaald — nooit een verzonnen vertaling */
.nogniet {
  margin-top: 10px; padding: 9px 12px; border-radius: 10px;
  background: var(--accent-licht); color: var(--accent);
  font-size: 13px; font-weight: 700;
}
.uitleg .nogniet { margin-top: 8px; }

/* een Arabische optie leest van rechts naar links, de letter blijft links */
.optie.arabisch .tekst { text-align: right; }

.luidspreker {
  border: 1px solid var(--rand); background: var(--vlak-2); cursor: pointer;
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  flex: none;
}
.luidspreker svg { width: 15px; height: 15px; }

.scherm-overlay { position: fixed; inset: 0; z-index: 55; }

/* ── instellingen ───────────────────────────────────────────── */
.instelrij {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 0; border-bottom: 1px solid var(--rand);
}
.instelrij:last-child { border-bottom: 0; }
.instelrij .tekst { flex: 1; }
.instelrij .tekst b { display: block; font-size: 14.5px; }
.instelrij .tekst span { font-size: 12.5px; color: var(--ink-3); }

.segment { display: inline-flex; border: 1px solid var(--rand); border-radius: 10px;
  overflow: hidden; }
.segment button {
  border: 0; background: var(--vlak); padding: 9px 13px; font-size: 13px;
  font-weight: 700; cursor: pointer; color: var(--ink-2);
}
.segment button.actief { background: var(--accent-licht); color: var(--accent); }

/* ── klein ──────────────────────────────────────────────────── */
.stil { color: var(--ink-3); font-size: 13px; }
.rek { flex: 1; }
.rij-tussen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mt8  { margin-top: 8px; }  .mt14 { margin-top: 14px; }
.mt20 { margin-top: 20px; } .mb8  { margin-bottom: 8px; }
.verborgen { display: none !important; }