/* Huisstijl hetwoord.nu: Gilda Display (koppen), Courier Prime (tekst), groen #84A59D, koraal #F28482, geel #F6BD60, roze #F5CAC3 */
:root {
  --tekst: #5A5A5A; --gedempt: #9B9B9B; --lijn: #e6e6e6; --vlak: #fbfbfa; --wit: #fff;
  --accent: #84A59D; --accent-donker: #5f8279; --accent-licht: #eef4f2; --heb-kleur: #3f6b62;
  --koraal: #F28482; --geel: #F6BD60; --roze: #F5CAC3; --zacht-groen: #BDD1CC; --zacht-roze: #E0AAA9;
  --verloop: linear-gradient(104deg, #BDD1CC 0%, #E0AAA9 100%);
  --heb: 'Noto Serif Hebrew', 'SBL Hebrew', 'Ezra SIL', serif;
  --kop: 'Gilda Display', Georgia, serif;
  --lees: 'Gilda Display', Georgia, serif;
  --ui: 'Courier Prime', 'Courier New', monospace;
}
* { box-sizing: border-box; }
html { background: var(--wit); }
body { margin: 0; color: var(--tekst); font: 15px/1.6 var(--ui); background: var(--wit); }
/* kleurband zoals op hetwoord.nu, met de ronde punt onderaan */
/* onderkant loopt van beide kanten naar een punt in het midden, zoals op hetwoord.nu */
.band { position: relative; height: 70px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V58C80 60 58 68 50 100C42 68 20 60 0 58Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H100V58C80 60 58 68 50 100C42 68 20 60 0 58Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; background:
  radial-gradient(60% 140% at 12% 0%, #F28482 0%, transparent 60%),
  radial-gradient(50% 160% at 45% 100%, #F6BD60 0%, transparent 65%),
  radial-gradient(55% 150% at 82% 10%, #84A59D 0%, transparent 70%),
  linear-gradient(90deg, #f5cac3, #f7c77a 45%, #a9c1ba 75%, #f5cac3); }

a { color: var(--accent-donker); text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--heb-kleur); }
button, select, input { font: inherit; color: inherit; }
.heb { font-family: var(--heb); direction: rtl; unicode-bidi: isolate; }

/* kopbalk */
.kop { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--lijn); padding: 10px 20px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.merk { text-decoration: none; color: var(--tekst); display: flex; gap: 10px; align-items: baseline; }
.logo { font: 26px/1 var(--kop); letter-spacing: 1.5px; background: linear-gradient(90deg, #e98c8a, #f0a15f 45%, #d9b25d 60%, #84A59D);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.merk-sub { font: 17px var(--kop); color: var(--accent); }
.kiezer { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: 12px; }
.menu { margin-left: auto; }
.kiezer select { border: 1px solid var(--lijn); border-radius: 999px; padding: 5px 12px; background: var(--wit); cursor: pointer; max-width: 46vw; }
.kiezer select:focus-visible, .pijl:focus-visible, .pil:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pijl { border: 1px solid var(--lijn); background: var(--wit); border-radius: 999px; width: 34px; height: 32px; cursor: pointer; font-size: 18px; line-height: 1; }
.pijl:hover:not(:disabled), .kiezer select:hover { border-color: var(--accent); }
.kiezer select { font-family: var(--ui); font-size: 14px; }
.pijl:disabled { opacity: .35; cursor: default; }

main { max-width: 1280px; margin: 0 auto; padding: 22px 20px 40px; }
.laden { color: var(--gedempt); }
.raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 980px) { .raster { grid-template-columns: minmax(0, 1fr); } }

.kaart { border: 1px solid var(--lijn); border-radius: 12px; background: var(--wit); margin-bottom: 18px; overflow: hidden; }
.kaart > h2, .kaart-kop { margin: 0; padding: 9px 16px; font: 17px var(--kop); letter-spacing: .2px; color: var(--accent-donker);
  background: var(--vlak); border-bottom: 1px solid var(--lijn); display: flex; align-items: center; gap: 10px; }
.kaart-kop .rechts { margin-left: auto; font: 13px var(--ui); color: var(--gedempt); display: flex; gap: 12px; flex-wrap: wrap; }
.kaart-kop label { cursor: pointer; display: flex; gap: 4px; align-items: center; }
.binnen { padding: 14px 16px; }

h1 { font: 400 30px/1.2 var(--kop); margin: 0 0 10px; }
h1 .klein { font: 400 15px var(--ui); color: var(--gedempt); margin-left: 8px; }

/* vertalingen */
.vt { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 4px 14px; padding: 7px 0; border-top: 1px solid var(--lijn); }
.vt:first-of-type { border-top: 0; }
.vt .naam { font: 600 12.5px var(--ui); color: var(--gedempt); padding-top: 4px; }
.vt .zin { font: 19px/1.5 var(--lees); }
.vt.hw .zin { color: #3f3f3f; font-size: 21px; }
.vt.hw .naam { color: var(--koraal); }
.vt .leeg { color: var(--gedempt); font-style: italic; font-size: 15px; }
@media (max-width: 560px) { .vt { grid-template-columns: minmax(0, 1fr); } }

/* interlineair */
.inter { direction: rtl; display: flex; flex-wrap: wrap; gap: 14px 10px; padding: 6px 0 4px; }
.woord { direction: ltr; text-align: center; cursor: pointer; padding: 7px 8px 6px; border-radius: 10px; border: 1px solid transparent;
  min-width: 70px; max-width: 260px; background: none; font: inherit; color: inherit; }
.woord:hover { background: var(--vlak); border-color: var(--lijn); }
.woord.gekozen { border-color: var(--geel); background: #fef6e7; }
.woord .nr { font-size: 11px; color: var(--gedempt); }
.woord .h { font: 600 29px/1.45 var(--heb); direction: rtl; color: var(--heb-kleur); white-space: nowrap; }
.woord .h .vv { color: var(--koraal); }
.woord .h .na { color: var(--gedempt); font-weight: 400; }
.woord .tr { font-size: 13px; font-style: italic; }
.woord .nl { font: 16px/1.3 var(--lees); margin-top: 2px; color: #3f3f3f; }
.woord .nl.geen { color: #c4c4c4; }
.woord .mo { font-size: 11.5px; color: var(--accent-donker); margin-top: 3px; }
.woord.ketiv .h { text-decoration: underline dotted var(--gedempt); }
body.geen-tr .woord .tr, body.geen-mo .woord .mo, body.geen-nr .woord .nr, body.geen-nl .woord .nl { display: none; }

/* woordstudie */
.studie-kop { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.studie-kop .groot { font: 600 38px/1.3 var(--heb); color: var(--heb-kleur); }
.studie-kop .tr { font-style: italic; font-size: 17px; }
.delen { margin: 10px 0 4px; border-top: 1px solid var(--lijn); }
.deel { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--lijn); }
.deel .h { font: 600 24px var(--heb); direction: rtl; text-align: right; color: var(--heb-kleur); }
.termen { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.term { border: 1px solid #d5e2de; background: var(--wit); color: var(--accent-donker); border-radius: 999px; padding: 1px 9px; font-size: 13px; text-decoration: none; }
.term:hover { background: var(--accent-licht); border-color: var(--accent); }
.term.soort { background: var(--accent-licht); font-weight: 700; }
.gegevens { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; margin: 12px 0 2px; font-size: 14.5px; }
.gegevens dt { color: var(--gedempt); }
.gegevens dd { margin: 0; }
.knop { display: inline-flex; gap: 6px; align-items: center; border: 1px solid var(--accent); color: var(--accent-donker); background: var(--wit);
  border-radius: 33px; padding: 6px 18px; font: 14px var(--ui); text-decoration: none; cursor: pointer; }
.knop:hover { background: var(--accent-licht); }
.knop.vol { background: var(--verloop); color: #fff; border: 0; padding: 9px 22px; }
.knop.vol:hover { filter: brightness(.95); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--lijn); border-radius: 999px; padding: 2px 10px; font-size: 14px; background: var(--wit); }
.chip b { color: var(--accent-donker); font-weight: 600; margin-left: 4px; }

/* tabbladen */
.tabs { display: flex; border-bottom: 1px solid var(--lijn); background: var(--vlak); overflow-x: auto; }
.tab { border: 0; background: none; padding: 11px 15px; font: 16px var(--kop); color: var(--gedempt); cursor: pointer; border-bottom: 3px solid transparent; white-space: nowrap; }
.tab:hover { color: var(--tekst); }
.tab.aan { color: var(--koraal); border-bottom-color: var(--koraal); background: var(--wit); }
.tabinhoud { padding: 14px 16px; }
.bron-regel { font-size: 14px; color: var(--gedempt); margin: 0 0 10px; }
.samenvatting { font: 14.5px/1.65 var(--ui); }
.samenvatting h4 { font: 17px var(--kop); color: var(--accent-donker); text-transform: none !important; letter-spacing: 0 !important; margin: 12px 0 3px; text-transform: uppercase; letter-spacing: .5px; }
.samenvatting p { margin: .2em 0 .6em; }
.opmerking { font-size: 13px; color: var(--gedempt); margin-top: 10px; }
.linklijst { display: flex; flex-direction: column; gap: 8px; }
.linklijst a { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--lijn); border-radius: 10px; padding: 9px 12px; text-decoration: none; }
.linklijst a:hover { border-color: var(--accent); background: var(--accent-licht); }
.linklijst small { color: var(--gedempt); }
.hoofdstuk-lijst { font: 17px/1.6 var(--lees); max-height: 70vh; overflow: auto; }
.hoofdstuk-lijst a { text-decoration: none; color: inherit; display: block; padding: 3px 6px; border-radius: 6px; }
.hoofdstuk-lijst a:hover { background: var(--vlak); }
.hoofdstuk-lijst a.hier { background: var(--accent-licht); }
.hoofdstuk-lijst sup { color: var(--accent-donker); font: 600 11px var(--ui); margin-right: 4px; }

/* lemma- en grammaticapagina */
.terug { font-size: 14px; display: inline-block; margin-bottom: 10px; }
.lemma-kop { display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.lemma-kop .groot { font: 600 52px/1.2 var(--heb); color: var(--heb-kleur); }
.lemma-kop .tr { font: italic 20px var(--ui); }
.lemma-kop .def { font-size: 17px; }
.tabel { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tabel th { text-align: left; font: 600 12px var(--ui); color: var(--gedempt); text-transform: uppercase; letter-spacing: .5px; padding: 6px 8px; border-bottom: 1px solid var(--lijn); }
.tabel td { padding: 6px 8px; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.tabel td.heb { font-size: 20px; color: var(--heb-kleur); text-align: right; white-space: nowrap; }
.artikel { font: 14.5px/1.65 var(--ui); }
.artikel .heb { font-size: 1.15em; color: var(--heb-kleur); }
.artikel .betekenis { margin: 4px 0 4px 14px; }
.artikel .nr { font-weight: 700; color: var(--accent-donker); margin-right: 4px; }
.artikel a.ref { white-space: nowrap; }
.artikel .vreemd { font-style: italic; color: var(--gedempt); }
.artikel p { margin: .3em 0; }
.plaatsen { columns: 2 320px; column-gap: 24px; font-size: 14.5px; }
.plaatsen > div { break-inside: avoid; padding: 3px 0; border-bottom: 1px solid #f0f0f0; display: flex; gap: 8px; align-items: baseline; }
.plaatsen .ref { min-width: 88px; }
.plaatsen .heb { font-size: 18px; color: var(--heb-kleur); }
.plaatsen .mo { color: var(--gedempt); font-size: 12.5px; }
.gram-lijst { columns: 3 220px; column-gap: 24px; }
.gram-lijst h3 { font: 700 12px var(--ui); color: var(--koraal) !important; text-transform: uppercase; letter-spacing: .6px; color: var(--gedempt); margin: 14px 0 4px; break-after: avoid; }
.gram-lijst a { display: block; padding: 2px 0; }
.gram-lijst a.hier { font-weight: 700; }
.uitleg { font: 15.5px/1.75 var(--ui); max-width: 72ch; }
.voorbeeld { background: #fff; border: 1px solid var(--roze); border-radius: 10px; padding: 10px 14px; font: 15px var(--ui); margin: 12px 0; }
.voorbeeld .heb { font-size: 22px; color: var(--heb-kleur); }

.voet { max-width: 1280px; margin: 10px auto 30px; padding: 14px 20px 0; border-top: 1px solid var(--lijn); color: var(--gedempt); font-size: 12.5px; }
.voet a { color: var(--gedempt); }
@media (max-width: 560px) {
  .kop { padding: 8px 12px; }
  .kiezer { margin-left: 0; width: 100%; }
  .kiezer select { flex: 1 1 auto; min-width: 0; }
  main { padding: 16px 12px 30px; }
  .woord .h { font-size: 25px; }
  .woord { min-width: 60px; }
  .deel { grid-template-columns: 64px minmax(0, 1fr); }
  .gegevens { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .gegevens dt { margin-top: 6px; }
}

/* interlineair per woorddeel (grondvormen + woordsoort) */
.woord .nr .tel { color: var(--koraal); }
.woord .gr { font: 17px/1.5 var(--heb); direction: rtl; color: #4a6fa5; white-space: nowrap; }
.woord .gr .hoofd { color: #3b5f99; }
.woord .gr .vv { color: #7aa0c9; }
.woord .plus { color: var(--gedempt); font-family: var(--ui); font-size: 12px; margin: 0 1px; }
.woord .mo { white-space: normal; line-height: 1.35; }
.woord .mo span { direction: ltr; unicode-bidi: isolate; }
.woord .mo span:hover { background: #fdf0c9; border-radius: 3px; }
.woord .bt { font-size: 12px; color: #a0668f; margin-top: 2px; margin-inline: auto; line-height: 1.25; }
.woord .en { font-size: 10.5px; color: #b9a3b3; font-style: italic; margin-inline: auto; line-height: 1.2; }
body.geen-gr .woord .gr, body.geen-bt .woord .bt, body.geen-en .woord .en { display: none; }
.deel .grond { margin-top: 5px; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.deel .grond .heb { font-size: 19px; color: #3b5f99; }
.tellingen { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }

/* aantekeningen onder elkaar */
.aant + .aant { border-top: 1px solid var(--lijn); margin-top: 14px; padding-top: 12px; }
.aant h3 { font: 19px var(--kop); color: var(--koraal); margin: 0 0 6px; }
.aant .bron-klein { font: italic 13px var(--ui); color: var(--gedempt); margin-left: 6px; }

.artikel .kopje { color: var(--gedempt); font-style: italic; }
details.engels { margin-top: 10px; border-top: 1px dashed var(--lijn); padding-top: 6px; color: var(--gedempt); }
details.engels summary { cursor: pointer; font-size: 13px; }
.woordenboek { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 4px; }
.woordenboek .chip a { font-size: 12px; margin-left: 6px; text-decoration: none; }
.woordenboek .chip a:hover { text-decoration: underline; }

/* luidspreker */
.spreek { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 2px 3px; border-radius: 6px; line-height: 0; vertical-align: middle; }
.spreek:hover { color: var(--koraal); background: #fdf0ef; }
.spreek.bezig { color: var(--koraal); animation: puls 1s ease-in-out infinite; }
@keyframes puls { 50% { opacity: .45; } }
.woord .nr .spreek { margin-inline-start: 2px; padding: 0 2px; }
.woord .nr .spreek svg { width: 13px; height: 13px; }
.studie-kop .spreek svg { width: 22px; height: 22px; }
.vers-kop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: space-between; }
.vers-knoppen { display: flex; gap: 8px; align-items: center; }
.vers-knoppen .spreek svg { width: 22px; height: 22px; }
#melding { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 150%); max-width: min(560px, calc(100vw - 32px)); background: #fff;
  border: 1px solid var(--roze); border-left: 4px solid var(--koraal); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.12);
  padding: 12px 40px 12px 14px; font-size: 14px; transition: transform .25s; z-index: 20; }
#melding.zichtbaar { transform: translate(-50%, 0); }
#melding .sluit { position: absolute; right: 8px; top: 6px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--gedempt); }

/* parallel lezen */
.par-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.par-nav .spreek svg { width: 24px; height: 24px; }
.parallel { display: flex; flex-direction: column; }
.par-rij { display: grid; grid-template-columns: 34px minmax(0, 1.1fr) repeat(var(--kolommen), minmax(0, 1fr)); gap: 16px; padding: 10px 6px; border-top: 1px solid var(--lijn); border-radius: 6px; }
.par-rij.hier { background: #fef6e7; }
.par-nr { font: 700 13px var(--ui); color: var(--koraal); text-decoration: none; padding-top: 6px; }
.par-heb { font-size: 23px; line-height: 1.75; color: var(--heb-kleur); text-align: right; }
.par-vt { font: 17px/1.55 var(--lees); }
.par-vt.hw { color: #3f3f3f; }
.par-vt.sv, .par-vt.nbg51 { color: var(--tekst); font-size: 16px; }
.par-vt .leeg { color: #ccc; }
@media (max-width: 760px) {
  .par-rij { grid-template-columns: 28px minmax(0, 1fr); }
  .par-rij > .par-vt { grid-column: 2; }
}

/* menu en inloggen */
.menu { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.menu a { text-decoration: none; }
.menu .ik { color: var(--koraal); }
.menu .stil, .linkknop { color: var(--gedempt); }
.linkknop { border: 0; background: none; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.kaart.smal { max-width: 460px; margin: 20px auto; }
.formulier .veld, .bw .veld { display: block; margin: 10px 0; font-size: 14px; color: var(--gedempt); }
.formulier input, .bw input, .bw textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px; font: 15px var(--ui); color: var(--tekst); }
.formulier input:focus, .bw input:focus, .bw textarea:focus, .bw-tekst:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.fout { color: #c0392b; font-size: 14px; }

/* commentaar */
.cm { border-left: 3px solid transparent; padding: 2px 0 2px 10px; margin: 8px 0; }
.cm.st-voorstel { border-left-color: var(--geel); background: #fffaf0; }
.cm.st-concept { border-left-color: var(--accent); background: #f5f9f8; }
.cm-tekst { font: 14.5px/1.65 var(--ui); }
.cm-tekst p { margin: .3em 0 .6em; }
.cm-tekst .heb { font-size: 1.15em; color: var(--heb-kleur); }
.cm-voet { display: flex; gap: 10px; align-items: center; margin: 4px 0; }
.badge { display: inline-block; font: 700 11px var(--ui); letter-spacing: .3px; border-radius: 999px; padding: 1px 8px; background: #eee; color: var(--tekst); }
.badge.st-voorstel, .chip.st-voorstel b { background: #fdeccd; color: #8a5a00; }
.badge.st-concept { background: var(--accent-licht); color: var(--accent-donker); }
.badge.st-klaar { background: #e3f1e9; color: #2e6b47; }
.badge.st-weg { background: #f3e1e1; color: #8a3b3b; }
.woord-commentaar { margin-top: 14px; border-top: 1px solid var(--lijn); padding-top: 10px; }
.woord-commentaar h4 { font: 18px var(--kop); color: var(--koraal); margin: 0 0 4px; }
.tabel.werk td.kort { font-size: 13px; color: var(--gedempt); }
.afspraak h3 { font: 20px var(--kop); color: var(--accent-donker); margin: 16px 0 4px; }

/* bewerker */
#bewerker { width: min(1100px, calc(100vw - 24px)); max-height: calc(100vh - 24px); border: 0; border-radius: 14px; padding: 0; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
#bewerker::backdrop { background: rgba(60, 60, 60, .35); }
.bw { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.bw-kop { display: flex; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--lijn); }
.bw-kop h2 { font: 22px var(--kop); margin: 0; }
.bw-kop .sluit { margin-left: auto; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--gedempt); }
.bw-raster { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; padding: 14px 18px; overflow: auto; }
@media (max-width: 860px) { .bw-raster { grid-template-columns: minmax(0, 1fr); } }
.werkbalk { display: flex; gap: 4px; margin-bottom: 6px; }
.werkbalk button { border: 1px solid var(--lijn); background: #fff; border-radius: 6px; min-width: 32px; height: 30px; cursor: pointer; }
.werkbalk button:hover { border-color: var(--accent); }
.bw-tekst { min-height: 200px; border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 14px; font: 15px/1.65 var(--ui); background: #fff; }
.bw-tekst .heb, .ai-voorstel .heb { font-family: var(--heb); color: var(--heb-kleur); font-size: 1.15em; }
.bw-bron { margin-top: 10px; border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 12px; background: var(--vlak); font-size: 13.5px; }
.bw-bron summary { cursor: pointer; color: var(--accent-donker); }
.gesprek { border-top: 1px dashed var(--lijn); margin-top: 8px; padding-top: 6px; }
.gesprek .sel { font-style: italic; color: var(--koraal); }
.gesprek p { margin: 3px 0; }
.bw-ai { border-left: 1px solid var(--lijn); padding-left: 16px; }
@media (max-width: 860px) { .bw-ai { border-left: 0; padding-left: 0; border-top: 1px solid var(--lijn); padding-top: 12px; } }
.bw-ai h3 { font: 19px var(--kop); color: var(--koraal); margin: 0 0 8px; }
.ai-snel { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-snel .knop { font-size: 12.5px; padding: 3px 10px; }
.bw-ai textarea { margin-bottom: 6px; }
.ai-antwoord { margin-top: 10px; }
.ai-voorstel { border: 1px solid var(--roze); border-radius: 10px; padding: 8px 12px; background: #fffafa; font: 14.5px/1.6 var(--ui); }
.bw-voet { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--lijn); }
.bw-voet #bwMelding { margin-right: auto; }
.knop.stil { border-color: var(--lijn); color: var(--gedempt); }

/* woordenlijst */
a.wl { color: inherit; text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }
a.wl:hover { color: var(--accent-donker); }
.zoekveld { width: 100%; max-width: 420px; padding: 8px 14px; border: 1px solid var(--lijn); border-radius: 999px; font: 15px var(--ui); margin: 6px 0 10px; }
.zoekveld:focus { outline: 2px solid var(--accent); }
.wl-groep h3 { font: 21px var(--kop); color: var(--accent-donker); margin: 18px 0 6px; }
.wl-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.wl-item { border: 1px solid var(--lijn); border-radius: 10px; padding: 10px 12px; }
.wl-item.st-voorstel { border-left: 3px solid var(--geel); }
.wl-item.st-concept { border-left: 3px solid var(--accent); }
.wl-item:target { box-shadow: 0 0 0 2px var(--geel); }
.wl-kop { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.wl-woord { font: 19px var(--kop); color: var(--koraal); font-weight: 400; }
.wl-kop .heb { font-size: 18px; color: var(--heb-kleur); }
.wl-pijl { color: var(--gedempt); }
.wl-bekend { font-weight: 700; }
.wl-hint { font-size: 14px; background: #fef6e7; border-radius: 8px; padding: 6px 10px; }
.bw-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* klikbare aantallen en verwijzingen */
a.chip { text-decoration: none; color: inherit; }
a.chip:hover { border-color: var(--accent); background: var(--accent-licht); }
.woord .nr a.tel { color: var(--koraal); text-decoration: none; }
.woord .nr a.tel:hover { text-decoration: underline; }
a.vref { white-space: nowrap; }
.vp-lijst { display: flex; flex-direction: column; }
.vp-rij { display: grid; grid-template-columns: 96px auto minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 14.5px; }
.vp-rij .heb { font-size: 19px; color: var(--heb-kleur); }
.vp-rij .mo { color: var(--gedempt); font-size: 12px; margin-left: 4px; }
.vp-zin { font: 16px/1.5 var(--lees); }
.vp-zin mark { background: #fdeccd; padding: 0 2px; border-radius: 3px; }
@media (max-width: 640px) { .vp-rij { grid-template-columns: 80px minmax(0, 1fr); } .vp-rij .vp-zin { grid-column: 1 / -1; } }

/* potlood en eigen woordvertalingen */
.woord .nl { position: relative; }
.woord .nl.eigen { color: var(--accent-donker); text-decoration: underline dotted var(--accent); }
.potlood { border: 0; background: none; cursor: pointer; color: var(--gedempt); font-size: 13px; padding: 0 3px; margin-inline-start: 3px; border-radius: 4px; opacity: .45; }
.woord:hover .potlood, .potlood:focus-visible { opacity: 1; }
.potlood:hover { color: var(--koraal); background: #fdf0ef; }
.bw-glos { padding: 14px 18px; overflow: auto; }
.bw-glos h3 { font: 18px var(--kop); color: var(--accent-donker); margin: 14px 0 6px; }
.groot-heb { font-size: 28px; color: var(--heb-kleur); }
.plekken { display: flex; flex-direction: column; max-height: 38vh; overflow: auto; border: 1px solid var(--lijn); border-radius: 10px; }
.plek { display: grid; grid-template-columns: 22px 90px auto minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 10px; border-bottom: 1px solid #f2f2f2; cursor: pointer; font-size: 14px; }
.plek:hover { background: var(--vlak); }
.plek .heb { font-size: 18px; color: var(--heb-kleur); }
.plek .mo { color: var(--gedempt); font-size: 12px; }
.plek .vp-zin { font-size: 14px; }

.potlood.groot { font-size: 17px; opacity: .7; padding: 2px 6px; }
.cm:hover .potlood.groot, .wl-item:hover .potlood.groot { opacity: 1; }
.cm-tekst table { border-collapse: collapse; width: 100%; margin: 8px 0; font-size: 14px; }
.cm-tekst th, .cm-tekst td { border-bottom: 1px solid var(--lijn); padding: 5px 8px; text-align: left; vertical-align: top; }
.cm-tekst th { color: var(--gedempt); font-weight: 700; }

/* vinkjes, keuzerondjes en schuifjes in de huisstijl (geen browserblauw) */
input[type="radio"], input[type="range"], progress { accent-color: var(--accent); }
/* eigen vinkje: wit op groen (de browser koos zelf zwart) */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0 3px 0 0; flex: 0 0 auto;
  border: 1.5px solid var(--accent); border-radius: 4px; background: #fff; display: inline-grid; place-content: center; cursor: pointer; vertical-align: -3px; }
input[type="checkbox"]::before { content: ''; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
input[type="checkbox"]:checked { background: var(--accent); }
input[type="checkbox"]:checked::before { opacity: 1; }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--koraal); outline-offset: 1px; }

.wl-groep h3 { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.wl-groep h3 .linkknop { font: 13px var(--ui); }
.wl-filters { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 14px; margin: 4px 0 8px; }
.wl-filters label { display: flex; gap: 4px; align-items: center; cursor: pointer; }
.wl-kop .wl-kies { margin-right: 4px; }
.wl-let { font-size: 13px; color: #8a5a00; background: #fdf3de; border-radius: 6px; padding: 3px 8px; margin: 6px 0 0; }
.wl-balk { position: sticky; bottom: 12px; z-index: 6; display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap;
  max-width: 1240px; margin: 0 auto; background: #fff; border: 1px solid var(--lijn); border-radius: 999px; padding: 8px 10px 8px 20px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.wl-balk #wlTel { margin-right: auto; font-weight: 700; color: var(--accent-donker); }
.wl-balk[hidden] { display: none; }

/* woordenlijst in de opbouw van Sofeer */
.wl-raster { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .wl-raster { grid-template-columns: minmax(0, 1fr); } }
.wl-zij { position: sticky; top: 64px; }
@media (max-width: 860px) { .wl-zij { position: static; } }
.wl-zij select { width: 100%; padding: 7px 10px; border: 1px solid var(--lijn); border-radius: 8px; font: 14px var(--ui); background: #fff; }
.wl-zij .zoekveld { max-width: none; }
.wl-letters { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 8px; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); padding: 5px 0; }
.wl-letters button { border: 0; background: none; font: 14px var(--ui); color: var(--accent-donker); cursor: pointer; padding: 1px 4px; border-radius: 4px; text-decoration: underline; }
.wl-letters button.aan { background: var(--accent); color: #fff; text-decoration: none; }
.wl-kopregel { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; }
.wl-index { list-style: none; margin: 4px 0 8px; padding: 0; max-height: calc(100vh - 380px); min-height: 200px; overflow: auto; font-size: 14.5px; }
.wl-index li { display: flex; gap: 6px; align-items: baseline; padding: 2px 4px; border-radius: 4px; }
.wl-index li.hier { background: var(--accent-licht); font-weight: 700; }
.wl-index li.st-voorstel a { color: #8a5a00; }
.wl-index li .opmerking { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wl-pagina h1 { margin: 0; }
.wl-titel { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 10px; }
.wl-titel .heb { font-size: 30px; color: var(--heb-kleur); }
.wl-gegevens { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 12px; font-size: 14.5px; margin: 0 0 12px; }
.wl-gegevens dt { color: var(--gedempt); }
.wl-gegevens dd { margin: 0; }
.wl-uitleg { font-size: 15px; }
.wl-komt { font-size: 14px; line-height: 1.7; }
.wl-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

.wl-klemtoon { font: 20px var(--kop); color: var(--tekst); }
.wl-klemtoon u { text-decoration-color: var(--koraal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.wl-komt-kop { display: block; font-weight: 700; margin-bottom: 4px; }
.wl-boeken { display: flex; flex-wrap: wrap; gap: 5px; }
.wl-boeken a { border: 1px solid var(--lijn); border-radius: 999px; padding: 1px 10px; font-size: 13px; text-decoration: none; color: var(--tekst); }
.wl-boeken a:hover { border-color: var(--accent); background: var(--accent-licht); }
.wl-boeken b { color: var(--accent-donker); margin-left: 3px; }

.pager { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.pager a, .pager span { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 14px; padding: 0 6px; text-decoration: none; }
.pager a { border: 1px solid var(--lijn); color: var(--accent-donker); }
.pager a:hover { border-color: var(--accent); background: var(--accent-licht); }
.pager .pg-hier { background: var(--accent); color: #fff; font-weight: 700; }
.pager .pg-gat { color: var(--gedempt); }

/* vindplaatsen per boek en hoofdstuk */
.vp-boek { border: 1px solid var(--lijn); border-radius: 10px; margin: 6px 0; }
.vp-boek > summary { cursor: pointer; padding: 8px 12px; font: 18px var(--kop); color: var(--accent-donker); list-style: none; display: flex; gap: 10px; align-items: baseline; }
.vp-boek > summary::before { content: '›'; transition: transform .15s; display: inline-block; color: var(--gedempt); }
.vp-boek[open] > summary::before { transform: rotate(90deg); }
.vp-boek > summary b { font: 700 13px var(--ui); color: var(--koraal); }
.vp-hfst { margin: 0 12px 6px 28px; border-top: 1px solid #f0f0f0; }
.vp-hfst > summary { cursor: pointer; padding: 5px 0; font-size: 14px; color: var(--tekst); }
.vp-hfst .vp-lijst { padding: 0 0 6px; }
a.vandale { font-weight: 700; color: var(--tekst); text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }
a.vandale::after { content: ' ↗'; font-weight: 400; font-size: 12px; color: var(--accent-donker); }
a.vandale:hover { color: var(--accent-donker); }

.vp-hfst-alles { margin: 0 12px 4px 28px; font-size: 13px; }

/* keuzelijsten in de huisstijl (Chrome/Edge; andere browsers tonen de gewone lijst) */
@supports (appearance: base-select) {
  .kiezer select, .kiezer select::picker(select), .wl-zij select, .wl-zij select::picker(select) { appearance: base-select; }
  .kiezer select, .wl-zij select { display: inline-flex; align-items: center; gap: 8px; }
  .kiezer select::picker-icon, .wl-zij select::picker-icon { color: var(--accent); font-size: 11px; transition: rotate .15s; }
  .kiezer select:open::picker-icon, .wl-zij select:open::picker-icon { rotate: 180deg; }
  .kiezer select::picker(select), .wl-zij select::picker(select) {
    border: 1px solid var(--lijn); border-radius: 14px; background: var(--wit); padding: 6px; margin-top: 6px;
    box-shadow: 0 10px 30px rgb(0 0 0 / .08); max-height: min(70vh, 520px); scrollbar-width: thin; scrollbar-color: var(--zacht-groen) transparent;
  }
  .kiezer option, .wl-zij option { padding: 5px 14px; border-radius: 8px; font: 14px var(--ui); color: var(--tekst); cursor: pointer; }
  .kiezer option::checkmark, .wl-zij option::checkmark { display: none; }
  .kiezer option:hover, .kiezer option:focus-visible, .wl-zij option:hover, .wl-zij option:focus-visible { background: var(--accent-licht); color: var(--heb-kleur); outline: none; }
  .kiezer option:checked, .wl-zij option:checked { background: var(--accent); color: #fff; }
  /* hoofdstukken en verzen als raster van nummers */
  #kiesHfst:open::picker(select), #kiesVers:open::picker(select) { display: grid; grid-template-columns: repeat(6, 44px); gap: 3px; }
  #kiesHfst option, #kiesVers option { padding: 5px 0; text-align: center; justify-content: center; }
}

/* andere vertalingen, standaard ingeklapt */
.andere-vt { border-top: 1px solid var(--lijn); margin-top: 4px; }
.andere-vt > summary { cursor: pointer; list-style: none; padding: 7px 0 3px; font: 600 12.5px var(--ui); color: var(--gedempt); }
.andere-vt > summary::before { content: '›'; display: inline-block; margin-right: 8px; transition: transform .15s; }
.andere-vt[open] > summary::before { transform: rotate(90deg); }
.andere-vt > summary:hover { color: var(--accent-donker); }
.andere-vt .vt:first-of-type { border-top: 0; }

/* kruisverwijzingen */
.kruis-rij { padding: 6px 0; border-top: 1px solid #f0f0f0; font-size: 13.5px; line-height: 1.45; }
.kruis-rij:first-child { border-top: 0; }
.kruis-rij .ref { font-weight: 700; white-space: nowrap; margin-right: 6px; }
.kruis-tekst { color: var(--tekst); font: 15px/1.45 var(--lees); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.label-hw { font: 700 11px var(--ui); color: var(--koraal); }

/* mobiel: logo en menu scrollen weg, de kiezer (boek/hoofdstuk/vers) blijft bovenaan hangen; interlineaire kop onder elkaar */
@media (max-width: 560px) {
  .kop { top: calc(-1 * var(--verberg, 0px)); }
  .merk { order: 1; } .menu { order: 2; width: 100%; } .kiezer { order: 3; }
  .kaart-kop { flex-wrap: wrap; }
  .kaart-kop .rechts { margin-left: 0; width: 100%; gap: 4px 12px; }
  .inter { gap: 10px 4px; }
  .woord { padding: 6px 4px 5px; }
  .kruis-tekst { font-size: 14.5px; }
}
@media (max-width: 560px) {
  .menu, .menu #wie { flex-wrap: wrap; gap: 4px 12px; }
  .menu #wie { display: contents; }
}
@media (max-width: 560px) { .knop { white-space: normal; max-width: 100%; text-align: center; padding-left: 12px; padding-right: 12px; font-size: 13px; } .knop.hfst { white-space: nowrap; } }
/* kop van vindplaatsen: transcriptie, Het Woord, betekenis */
.vp-tr { font: italic 20px var(--lees); color: var(--gedempt); }
.vp-hw { font: 24px var(--lees); color: #3f3f3f; }
.vp-hw::before { content: '· '; color: var(--gedempt); }
.vp-def { font: 15px var(--ui); color: var(--gedempt); }
.vp-def::before { content: '— '; }
/* volgende keuzelijst laten oplichten als de browser hem niet zelf mag openen */
@keyframes wijs { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30%, 70% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 45%, transparent); border-color: var(--accent); } }
.kiezer select.wijs { animation: wijs 1.4s ease 2; }
/* brede schermen: kiezer begint precies boven de tekst (zelfde linkerrand als de kaarten), logo in de marge */
@media (min-width: 1720px) {
  .kop { padding-left: calc((100% - 1280px) / 2 + 20px); padding-right: calc((100% - 1280px) / 2 + 20px); }
  .merk { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
  .kiezer { margin-left: 0; }
}
@media (max-width: 560px) { .menu { margin-left: 0; } }
/* plekken bij het potloodje: de zin altijd over de volle breedte onder de verwijzing */
.plek .vp-zin { grid-column: 2 / -1; }
@media (max-width: 560px) {
  .plek { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 2px 8px; }
  .plek .mo { grid-column: 2 / -1; }
}
#studie { scroll-margin-top: 76px; }
@media (max-width: 560px) { #studie { scroll-margin-top: 64px; } }
.raster .kaart:has(#inter) { scroll-margin-top: 76px; }
@media (max-width: 560px) { .raster .kaart:has(#inter) { scroll-margin-top: 64px; } }
.woord .gr { margin-top: 6px; }
/* pijltjes links en rechts in het midden van het interlineaire vak, op de rand van de kaart */
.kaart:has(.inter-vak) { overflow: visible; }
.kaart:has(.inter-vak) > .kaart-kop { border-radius: 11px 11px 0 0; }
.inter-vak { position: relative; padding-left: 30px; padding-right: 30px; }
.vers-pijl { position: absolute; top: 50%; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--lijn); background: var(--wit); color: var(--accent-donker); text-decoration: none; }
.vers-pijl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vers-pijl:hover { border-color: var(--accent); background: var(--accent-licht); }
.vers-pijl.links { left: -18px; } .vers-pijl.rechts { right: -18px; }
@media (max-width: 560px) { .inter-vak { padding-left: 18px; padding-right: 18px; } .vers-pijl { width: 24px; height: 24px; margin-top: -12px; } .vers-pijl svg { width: 12px; height: 12px; } .vers-pijl.links { left: -11px; } .vers-pijl.rechts { right: -11px; } }
/* eigen keuzevenster voor hoofdstuk en vers (onder de kiezer) */
.kiezer { position: relative; }
.kies-paneel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; width: min(360px, calc(100vw - 24px));
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; box-shadow: 0 12px 34px rgb(0 0 0 / .1); padding: 10px; }
.kp-kop { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gedempt); padding: 2px 4px 8px; }
.kp-kop b { color: var(--tekst); font: 17px var(--kop); }
.kp-sluit, .kp-terug { border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1; color: var(--gedempt); padding: 0 4px; }
.kp-sluit { margin-left: auto; }
.kp-sluit:hover, .kp-terug:hover { color: var(--accent-donker); }
.kp-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; max-height: min(60vh, 420px); overflow: auto; }
.kp-raster button { border: 1px solid transparent; background: var(--vlak); border-radius: 8px; padding: 7px 0; font: 14px var(--ui); color: var(--tekst); cursor: pointer; }
.kp-raster button:hover, .kp-raster button:focus-visible { background: var(--accent); color: #fff; outline: none; }
button.vers-pijl { cursor: pointer; padding: 0; font: inherit; }

/* Nieuwe Testament: Grieks, van links naar rechts */
body.nt .heb { direction: ltr; font-family: 'Gentium Book Plus', 'Noto Serif', Georgia, serif; }
body.nt .inter { direction: ltr; }
body.nt .woord .h { font-family: 'Gentium Book Plus', 'Noto Serif', Georgia, serif; font-weight: 400; font-size: 26px; }
body.nt .woord .gr { font-family: 'Gentium Book Plus', Georgia, serif; direction: ltr; }
body.nt .par-heb { text-align: left; }
.vt.grieks .zin { font-family: 'Gentium Book Plus', Georgia, serif; }
.vt.latijn .zin { font-style: normal; }
.vt.engels .zin { font-size: 16px; color: var(--gedempt); }
/* opmaak in vertaalnotities en afspraken: kopjes, lijsten, links */
.werkbalk { flex-wrap: wrap; }
.werkbalk button { font: 13px var(--ui); padding: 0 6px; }
.cm-tekst h4, .bw-tekst h4 { font: 18px var(--kop); color: var(--accent-donker); margin: 14px 0 4px; }
.cm-tekst ul, .cm-tekst ol, .bw-tekst ul, .bw-tekst ol { padding-left: 1.4em; margin: 6px 0; }
.cm-tekst li, .bw-tekst li { margin: 2px 0; }
.bw-tekst a { color: var(--accent-donker); text-decoration: underline; }
.vt.claude .zin { font-size: 17px; }
.claude-label { display: inline-block; font: 11px var(--ui); color: var(--koraal); margin-left: 6px; }
.kolgroep { display: inline-flex; gap: 8px; align-items: center; padding: 2px 8px; border: 1px solid var(--lijn); border-radius: 999px; }
.kolnaam { color: var(--tekst); }
/* menu Informatie met submenu */
.submenu { position: relative; }
.submenu > summary { cursor: pointer; list-style: none; color: var(--accent-donker); }
.submenu > summary::after { content: ' ▾'; font-size: 11px; }
.submenu-lijst { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; display: flex; flex-direction: column; min-width: 250px;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .08); padding: 6px; }
.submenu-lijst a { padding: 7px 10px; border-radius: 8px; }
.submenu-lijst a:hover { background: var(--accent-licht); }
@media (max-width: 560px) { .submenu-lijst { right: auto; left: 0; } }
/* bronnenpagina */
.smal-breed { max-width: 860px; margin: 0 auto; }
dl.bronnen { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 6px 18px; margin: 6px 0 18px; }
dl.bronnen dt { font-weight: 700; color: var(--tekst); }
dl.bronnen dd { margin: 0; }
@media (max-width: 640px) { dl.bronnen { grid-template-columns: minmax(0, 1fr); } dl.bronnen dd { margin-bottom: 8px; } }
/* pagina Vertaalkeuzes: drie inklapbare secties */
.vk-sectie { border-top: 1px solid var(--lijn); }
.vk-sectie:first-of-type { border-top: 0; }
.vk-sectie > summary { cursor: pointer; list-style: none; padding: 12px 0; font: 22px var(--kop); color: var(--koraal); display: flex; gap: 10px; align-items: baseline; }
.vk-sectie > summary::before { content: '›'; color: var(--gedempt); transition: transform .15s; display: inline-block; }
.vk-sectie[open] > summary::before { transform: rotate(90deg); }
.vk-sectie > summary b { font: 700 13px var(--ui); color: var(--gedempt); }
.vk-inhoud { padding-bottom: 12px; }
.vk-notitie { padding: 4px 12px 8px; }
.vk-notitie > .ref { font-weight: 700; }
.vk-sorteer { font-size: 13px; }
.vk-sorteer .actief { color: var(--accent-donker); font-weight: 700; text-decoration: underline; }
.vp-hfst > summary .heb { font-size: 18px; color: var(--heb-kleur); }
.niet-vrij { display: inline-block; font: 11px var(--ui); color: var(--koraal); margin-left: 6px; }
/* beheer: vrijgave en API-sleutels */
.vrij-deel { border: 1px solid var(--lijn); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.vrij-deel legend { font: 16px var(--kop); color: var(--accent-donker); padding: 0 6px; }
.vrij-boek { display: inline-flex; gap: 6px; align-items: center; min-width: 170px; cursor: pointer; }
tr.uit td { color: var(--gedempt); text-decoration: line-through; }
.let-op { background: #fef6e7; border: 1px solid var(--geel); border-radius: 10px; padding: 10px 14px; }
code { font: 13px var(--ui); background: var(--vlak); padding: 1px 4px; border-radius: 4px; word-break: break-all; }
dl.bronnen dd p { margin: 6px 0; }
.woordlink { color: var(--accent-donker); text-decoration: underline dotted var(--accent); text-underline-offset: 3px; }
.woordlink:hover { color: var(--accent-donker); }
#vkZoek { width: min(420px, 100%); padding: 7px 12px; border: 1px solid var(--lijn); border-radius: 999px; font: 14px var(--ui); margin: 0 12px 6px 0; }
.wl-notitie-kop { font: 18px var(--kop); color: var(--koraal); margin: 14px 0 4px; }
/* API-uitleg op de beheerpagina */
.api-uitleg { border: 1px solid var(--lijn); border-radius: 12px; padding: 10px 16px; margin: 10px 0 16px; background: var(--vlak); }
.api-uitleg > summary { cursor: pointer; font: 18px var(--kop); color: var(--accent-donker); }
.api-uitleg h4 { font: 20px var(--kop); margin: 12px 0 4px; }
.api-uitleg h5 { font: 700 14px var(--ui); margin: 14px 0 4px; color: var(--tekst); }
.api-uitleg pre { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 12px; overflow-x: auto; font: 12.5px/1.5 var(--ui); white-space: pre; }
.api-tabel td, .api-tabel th { text-align: left; vertical-align: top; }