/* 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; }
.cm-wijziging { border: 1px dashed var(--geel); background: #fffaf0; border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.cm-wijziging-kop { font: 700 12px var(--ui); color: #b07d1c; margin: 0 0 4px; }
tr.wacht-op-jou td { background: #fffaf0; }
tr.wacht-op-jou td:first-child { box-shadow: inset 3px 0 0 var(--geel); }
.chips a.chip { text-decoration: none; cursor: pointer; }
.chips a.chip.actief { outline: 2px solid var(--accent); }
.ai-overnemen { display: flex; flex-wrap: wrap; gap: 6px; }
.versie > summary { cursor: pointer; }
.versie-tekst { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: 6px 10px; margin: 6px 0; max-height: 260px; overflow: auto; }
.naar-tekst { font: 13px var(--ui); color: var(--accent-donker); border: 1px solid var(--accent); border-radius: 999px; padding: 5px 12px; text-decoration: none; white-space: nowrap; background: var(--accent-licht); }
.naar-tekst:hover { background: var(--accent); color: #fff; }
.naar-tekst[hidden] { display: none; }
/* pagina Over het boek */
.over-boek { font: 13px var(--ui); color: var(--accent-donker); margin-left: 10px; white-space: nowrap; }
.boek-kop h1 { font: 32px var(--kop); color: #3f3f3f; margin: 0; }
.boek-kop .heb { font-size: 28px; color: var(--heb-kleur); margin-left: 10px; }
.hfst-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; margin: 8px 0 4px; }
.hfst-raster a { text-align: center; padding: 7px 0; border-radius: 8px; background: var(--vlak); text-decoration: none; font: 14px var(--ui); color: var(--tekst); }
.hfst-raster a:hover { background: var(--accent); color: #fff; }
.cm-tekst .noot { font-size: 13px; color: var(--gedempt); }
/* abonnees */
#mijnNotitie textarea { width: 100%; font: 16px/1.5 var(--lees); border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 10px; resize: vertical; }
#mijnNotitie[hidden] { display: none; }
.account-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { .account-twee { grid-template-columns: 1fr; } }
.mijn-tekst { white-space: pre-wrap; font: 15px/1.5 var(--lees); margin: 2px 0 8px; }
.uitleg-stappen li { margin: 4px 0; }
/* vertaalkeuzes: nieuw toegevoegd */
.nieuw-blok { border: 1px solid var(--lijn); border-radius: 12px; padding: 8px 16px 10px; margin: 12px 0 16px; background: var(--vlak); }
.nieuw-blok h3 { font: 18px var(--kop); color: var(--koraal); margin: 4px 0 6px; }
.nieuw-blok ul { list-style: none; padding: 0; margin: 0; }
.nieuw-blok li { padding: 4px 0; border-top: 1px solid #efefef; font-size: 14px; }
.nieuw-blok li:first-child { border-top: 0; }
.nieuw-blok .opmerking { display: inline-block; min-width: 52px; }
.nieuw-begin { color: var(--gedempt); font-size: 13px; }
.boeken-lijst { display: flex; flex-wrap: wrap; gap: 6px; }
.boeken-lijst a { padding: 5px 12px; border-radius: 999px; background: var(--vlak); text-decoration: none; font: 14px var(--ui); color: var(--tekst); }
.boeken-lijst a:hover { background: var(--accent); color: #fff; }
/* eigen versnummer van Septuaginta/Vulgaat als dat afwijkt van het Hebreeuws */
.vindnr { display: inline-block; font: 600 11px var(--ui); color: var(--gedempt); border: 1px solid var(--lijn, #ddd); border-radius: 4px; padding: 0 4px; margin-right: 2px; vertical-align: 1px; white-space: nowrap; }
/* code van een notitie om te kopiëren voor de chat met Claude */
.id-knop { font: 600 11px var(--ui); color: var(--gedempt); background: none; border: 1px dashed var(--lijn); border-radius: 4px; padding: 1px 6px; margin: 0 6px; cursor: copy; vertical-align: middle; white-space: nowrap; }
.id-knop:hover { color: var(--tekst); border-style: solid; }
.id-knop.ok { color: #2e7d32; border-color: #2e7d32; }
td.nowrap { white-space: nowrap; }

/* Hebreeuws Nieuw Testament (Delitzsch): van rechts naar links */
.vt.hebreeuws .zin, .par-vt.delitzsch { direction: rtl; text-align: right; font-family: var(--heb, 'SBL Hebrew', 'Ezra SIL', serif); font-size: 21px; }

/* woordbrug Hebreeuws ↔ Grieks op de woordpagina */
.brug-titel { font: 600 12.5px var(--ui); color: var(--gedempt); margin: 4px 0 6px; }
.chip.brug small { font: 12px var(--ui); color: var(--gedempt); margin-left: 4px; }

/* ---------- leesplek ---------- */
.lezen .lees-kop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.lezen .lees-kop select { max-width: 46vw; }
.lees-nav { display: inline-flex; gap: 4px; }
.lees-vt { position: relative; }
.lees-vt summary { cursor: pointer; font: 600 14px var(--ui); color: var(--accent-donker); list-style: none; padding: 6px 10px; border: 1px solid var(--lijn); border-radius: 8px; background: var(--wit); }
.lees-vt-lijst { position: absolute; z-index: 20; top: 110%; left: 0; min-width: 240px; background: var(--wit); border: 1px solid var(--lijn); border-radius: 10px; padding: 8px 12px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
.lees-vt-lijst label { display: block; padding: 3px 0; font: 15px var(--ui); }
.lees-vt-lijst .opmerking { margin: 6px 0 2px; }
.lees-titel { font: 28px var(--kop); margin: 4px 0 14px; }
.lees-tekst { font: 20px/1.75 var(--lees); max-width: 42em; }
.lees-tekst.rtl, .lv-extra.rtl { direction: rtl; text-align: right; font-family: var(--heb); }
.lv { cursor: pointer; border-radius: 4px; padding: 1px 2px; transition: background .15s; }
.lv:hover { background: var(--accent-licht); }
.lv sup { font: 600 11px var(--ui); color: var(--accent-donker); margin-right: 3px; }
.lv.gekozen { outline: 2px solid var(--accent); }
.lv-extra { display: block; font: 15px/1.5 var(--lees); color: var(--tekst); margin: 2px 0 10px 1.2em; padding-left: 10px; border-left: 2px solid var(--lijn); }
.lv-extra b { font: 600 11px var(--ui); color: var(--gedempt); margin-right: 4px; }
.lk { font: 600 10.5px var(--ui); text-decoration: none; color: var(--accent-donker); border: 1px solid var(--zacht-groen); border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 2px; }
.lk.eigen { color: #a3625f; border-color: var(--zacht-roze); }
.mk-geel { background: #fbe7b8; } .mk-groen { background: #d6e8d4; } .mk-blauw { background: #d4e3f2; } .mk-roze { background: #f6d6d1; }
.lees-voet { margin-top: 22px; font: 14px var(--ui); }
.lees-paneel { position: fixed; z-index: 50; left: 50%; transform: translateX(-50%); bottom: 12px; width: min(560px, calc(100vw - 24px)); background: var(--wit); border: 1px solid var(--lijn); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 12px 16px; }
.lp-kop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.lp-kop .sluit { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--gedempt); }
.lp-kleuren { display: flex; gap: 8px; margin: 8px 0; }
.kleur { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--lijn); cursor: pointer; }
.kleur.aan { border-color: var(--accent-donker); }
.kleur.wis { background: var(--wit); color: var(--gedempt); font-size: 16px; line-height: 1; }
.lees-paneel textarea { width: 100%; }
.j-dag { border-top: 1px solid var(--lijn); padding: 8px 0; }
.j-dag summary { cursor: pointer; font: 600 15px var(--ui); }
.j-tekst { white-space: normal; }
#jTekst { width: 100%; margin-top: 10px; }
@media (max-width: 600px) { .lees-tekst { font-size: 18px; } }

/* leesplek: kiezer bovenin zonder vers, verwijzingen, wolkjes, gekleurde stukjes en kantlijn */
body.lees-modus #kiesVers { display: none; }
nav.menu a.actief { color: var(--accent-donker); text-decoration: underline; text-underline-offset: 6px; }
.lees-tip { margin: -6px 0 12px; }
.lv-t mark.acc { padding: 0 1px; border-radius: 3px; color: inherit; }
.wolk { background: none; border: 0; cursor: pointer; font-size: 14px; padding: 0 2px; vertical-align: 1px; }
button.lk { background: var(--wit); cursor: pointer; font-family: var(--ui); }
.kant-nr { display: none; }
.lees-tekst { position: relative; }
.lees-tekst.met-kantlijn { margin-right: 200px; }
.met-kantlijn .lv-kant { position: absolute; right: -200px; width: 184px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; line-height: 1.3; }
.met-kantlijn .kant-nr { display: inline; font: 600 11px var(--ui); color: var(--gedempt); margin-right: 2px; }
.met-kantlijn .lv-kant .lk { margin-left: 0; }
.lees-balk { position: absolute; z-index: 60; display: flex; gap: 6px; align-items: center; background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 6px 8px; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.balk-knop { font: 600 13px var(--ui); background: var(--vlak); border: 1px solid var(--lijn); border-radius: 8px; padding: 4px 8px; cursor: pointer; text-decoration: none; color: var(--accent-donker); }
.lees-paneel .sluit { position: absolute; top: 6px; right: 10px; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--gedempt); }
.lp-kruis { margin: 6px 0; padding-left: 18px; max-height: 45vh; overflow: auto; }
.lp-kruis li { margin: 4px 0; }
/* versnummer in de leesplek = link naar de studie */
.lv .vnr { font: 600 11px var(--ui); color: var(--accent-donker); text-decoration: none; vertical-align: super; margin-right: 3px; padding: 0 2px; border-radius: 3px; }
.lv .vnr:hover { background: var(--accent-licht); text-decoration: underline; }
.lv { cursor: text; }
.lv:hover { background: none; }
/* kruisverwijzing in de tekst: klein pijltje achter het vers */
.lv .kruis { background: none; border: 0; padding: 0 3px; margin-left: 1px; cursor: pointer; font: 600 12px var(--ui); color: var(--accent-donker); vertical-align: 2px; }
.lv .kruis:hover { background: var(--accent-licht); border-radius: 3px; }

/* eigen aantekeningen in de kantlijn (tekst); op een smal scherm alleen het wolkje */
.kant-eigen { display: none; }
.met-kantlijn .kant-eigen { display: block; width: 100%; text-align: left; background: #fffaf0; border: 1px solid #f1e3c4; border-radius: 6px; padding: 4px 6px; font: 13px/1.35 var(--lees); color: var(--tekst); cursor: pointer; }
.met-kantlijn .kant-eigen mark { padding: 0 2px; border-radius: 3px; font-style: italic; }
.met-kantlijn .lv-kant .wolk[data-notitie] { display: none; }
.met-kantlijn .lv-t .wolk[data-acc] { display: none; }
.met-kantlijn .lv-kant { width: 184px; }

/* kantlijn = journalplek */
.kant-schrijf, .kant-plus, .kant-veld { display: none; }
.met-kantlijn .kant-schrijf { display: block; width: 100%; background: #fffaf0; border: 1px solid #f1e3c4; border-radius: 6px; padding: 4px 6px; font: 14px/1.4 var(--lees); color: var(--tekst); cursor: text; }
.met-kantlijn .kant-plus { display: inline-block; background: none; border: 1px dashed var(--lijn); border-radius: 6px; color: var(--gedempt); width: 26px; height: 22px; line-height: 18px; cursor: pointer; opacity: .35; }
.met-kantlijn .lv-kant:hover .kant-plus, .met-kantlijn .kant-plus:focus { opacity: 1; }
.met-kantlijn .lv:hover .kant-plus { opacity: .8; }
.met-kantlijn .kant-veld { display: block; width: 100%; min-height: 60px; resize: none; overflow: hidden; font: 14px/1.4 var(--lees); border: 1px solid var(--accent); border-radius: 6px; padding: 4px 6px; background: #fffdf7; }
/* versnummer staat altijd in de kantlijn, ook bij alleen een plusje */
.met-kantlijn.kant-schrijven { margin-right: 240px; }
.met-kantlijn.kant-schrijven .lv-kant { right: -240px; width: 224px; }
/* journal: kanttekeningen als sticky notes */
.journal-balk { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.journal-balk .zoekveld { flex: 1 1 220px; }
.stickies { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin: 8px 0 20px; }
.sticky { display: flex; flex-direction: column; gap: 6px; min-height: 150px; padding: 14px 14px 10px; text-decoration: none; color: #4a4336; transform: rotate(var(--draai)); box-shadow: 0 6px 14px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.08); border-radius: 2px 2px 14px 2px; transition: transform .15s, box-shadow .15s; }
.sticky:hover { transform: rotate(0) scale(1.03); box-shadow: 0 10px 22px rgba(0,0,0,.14); }
.sticky-geel { background: #fff3b0; } .sticky-groen { background: #d9f0d3; } .sticky-blauw { background: #d6e7f7; } .sticky-roze { background: #fbd9d3; }
.sticky-ref { font: 600 12.5px var(--ui); color: #6b5f45; }
.sticky-stukje { font: italic 14px/1.35 var(--lees); color: #6b5f45; }
.sticky-tekst { font: 16px/1.45 var(--lees); flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; }
.sticky-datum { font: 11px var(--ui); color: #8d826a; text-align: right; }
/* notitie bij een gemarkeerd stukje: achtergrond in de kleur van de markering */
.met-kantlijn .kant-eigen.kant-geel { background: #fbe7b8; border-color: #efd28c; }
.met-kantlijn .kant-eigen.kant-groen { background: #d6e8d4; border-color: #b5d3b1; }
.met-kantlijn .kant-eigen.kant-blauw { background: #d4e3f2; border-color: #b2cbe6; }
.met-kantlijn .kant-eigen.kant-roze { background: #f6d6d1; border-color: #e9b8b0; }
.met-kantlijn .kant-eigen[class*="kant-"] mark { background: transparent; }
/* selectiebalk: kleuren en meteen schrijven */
.lees-balk { flex-direction: column; align-items: stretch; width: min(320px, calc(100vw - 16px)); }
.balk-kleuren { display: flex; gap: 6px; }
.balk-schrijf { display: flex; gap: 6px; align-items: flex-end; }
.balk-schrijf textarea { flex: 1; resize: vertical; font: 14px/1.4 var(--lees); border: 1px solid var(--lijn); border-radius: 8px; padding: 6px 8px; min-height: 44px; }

/* versnotitie in de kantlijn: achtergrond in de gekozen kleur */
.met-kantlijn .kant-bewerk { display: block; width: 100%; }
.kant-kleuren { display: flex; gap: 5px; margin-bottom: 4px; }
.kant-kleuren .kleur { width: 20px; height: 20px; }
.met-kantlijn .kant-schrijf.kant-geel, .kant-veld.kant-geel { background: #fbe7b8; border-color: #efd28c; }
.met-kantlijn .kant-schrijf.kant-groen, .kant-veld.kant-groen { background: #d6e8d4; border-color: #b5d3b1; }
.met-kantlijn .kant-schrijf.kant-blauw, .kant-veld.kant-blauw { background: #d4e3f2; border-color: #b2cbe6; }
.met-kantlijn .kant-schrijf.kant-roze, .kant-veld.kant-roze { background: #f6d6d1; border-color: #e9b8b0; }

/* kruisje om een kanttekening weg te halen */
.met-kantlijn .kant-schrijf, .met-kantlijn .kant-eigen, .met-kantlijn .kant-bewerk { position: relative; }
.kant-weg { position: absolute; top: 2px; right: 3px; width: 18px; height: 18px; line-height: 16px; text-align: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.85); color: #8a6d5a; font: 600 14px var(--ui); cursor: pointer; opacity: 0; transition: opacity .15s; z-index: 2; }
.kant-schrijf:hover .kant-weg, .kant-eigen:hover .kant-weg, .kant-weg:focus, .kant-weg.zichtbaar { opacity: 1; }
.kant-weg:hover { background: #fff; color: #b0413e; }
@media (hover: none) { .kant-weg { opacity: .7; } }
/* verborgen balkje/paneel echt verbergen (display: flex mag 'hidden' niet overschrijven) */
.lees-balk[hidden], .lees-paneel[hidden] { display: none !important; }
/* vinkje om een kanttekening op te slaan */
.kant-ok { position: absolute; top: 2px; right: 26px; width: 20px; height: 20px; line-height: 18px; text-align: center; border: 0; border-radius: 50%; background: var(--accent-donker); color: #fff; font: 700 13px var(--ui); cursor: pointer; z-index: 2; }
.kant-ok:hover { background: var(--accent); }
/* kantlijn: versnummer links, briefjes ernaast (niet eronder) */
.met-kantlijn .lv-kant { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 5px; row-gap: 4px; align-items: start; }
.met-kantlijn .lv-kant > :not(.kant-nr) { grid-column: 2; }
.met-kantlijn .lv-kant > .kant-nr { grid-column: 1; grid-row: 1; padding-top: 5px; }
.met-kantlijn .lv-kant .kant-plus { justify-self: start; }
/* het gekozen stukje blijft zichtbaar terwijl je in het balkje typt */
::highlight(lees-keuze) { background-color: #cfe0ff; }

.kant-stukje { margin: 0 0 3px; font: italic 13px/1.3 var(--lees); color: #6b5f45; padding-right: 46px; }
/* extra kleuren: oranje, paars, mint, grijs (markering, kantlijn, sticky notes) */
.mk-oranje { background: #fcdcbd; } .mk-paars { background: #e6daf3; } .mk-mint { background: #cdeee8; } .mk-grijs { background: #e4e2de; }
.met-kantlijn .kant-eigen.kant-oranje, .met-kantlijn .kant-schrijf.kant-oranje, .kant-veld.kant-oranje { background: #fcdcbd; border-color: #f0c193; }
.met-kantlijn .kant-eigen.kant-paars, .met-kantlijn .kant-schrijf.kant-paars, .kant-veld.kant-paars { background: #e6daf3; border-color: #cfbde6; }
.met-kantlijn .kant-eigen.kant-mint, .met-kantlijn .kant-schrijf.kant-mint, .kant-veld.kant-mint { background: #cdeee8; border-color: #a8dcd2; }
.met-kantlijn .kant-eigen.kant-grijs, .met-kantlijn .kant-schrijf.kant-grijs, .kant-veld.kant-grijs { background: #e4e2de; border-color: #cfccc5; }
.sticky-oranje { background: #ffe0c2; } .sticky-paars { background: #ebdff7; } .sticky-mint { background: #d3f2ec; } .sticky-grijs { background: #e9e7e3; }
.balk-kleuren { flex-wrap: wrap; } .kant-kleuren { flex-wrap: wrap; gap: 4px; } .kant-kleuren .kleur { width: 18px; height: 18px; }
/* pijltjes naar vorig/volgend hoofdstuk in de leesplek */
.lees-titelrij { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.lees-titelrij .lees-titel { margin: 0; }
.hfst-pijl { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lijn); background: var(--wit); color: var(--accent-donker); font: 600 20px/1 var(--ui); cursor: pointer; }
.hfst-pijl:hover { background: var(--accent-licht); }
.lees-volgende { display: flex; justify-content: space-between; gap: 10px; margin: 28px 0 6px; max-width: 42em; }
/* vinkje in het selectiebalkje */
.balk-ok { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: var(--accent-donker); color: #fff; font: 700 17px var(--ui); cursor: pointer; }
.balk-ok:hover { background: var(--accent); }
/* smal scherm: schrijfvak onder het vers (geen kantlijn) */
.lees-tekst:not(.met-kantlijn) .lv-kant:has(.kant-bewerk) { display: block; margin: 6px 0 10px; }
.lees-tekst:not(.met-kantlijn) .kant-bewerk { display: block; position: relative; max-width: 30em; }
.lees-tekst:not(.met-kantlijn) .kant-veld { display: block; width: 100%; min-height: 60px; resize: none; overflow: hidden; font: 15px/1.4 var(--lees); border: 1px solid var(--accent); border-radius: 6px; padding: 4px 6px; }
/* voorproefje: het gekozen stukje kleurt mee met de gekozen kleur */
::highlight(lees-keuze) { background-color: var(--keuze-kleur, #cfe0ff); }
/* bredere kantlijn (journalplek), smallere tekstkolom */
.met-kantlijn.kant-schrijven { margin-right: 340px; }
.met-kantlijn.kant-schrijven .lv-kant { right: -340px; width: 324px; }

/* lange briefjes alleen inkorten (3 regels) als het krap wordt; klik opent het schrijfvak met alles */
.met-kantlijn .krap .kant-schrijf, .met-kantlijn .krap .kant-eigen { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* meerdere kanttekeningen bij één vers: samengevoegd kaartje */
.kant-groep, .kant-inklap { display: none; }
.met-kantlijn .kant-groep { display: block; width: 100%; text-align: left; background: #fffaf0; border: 1px solid #f1e3c4; border-radius: 6px; padding: 4px 6px; font: 13px/1.35 var(--lees); color: var(--tekst); cursor: pointer; box-shadow: 2px 2px 0 #f1e3c4; }
.met-kantlijn .kant-groep b { font: 600 12px var(--ui); color: var(--accent-donker); }
.met-kantlijn .kant-groep span { color: var(--gedempt); }
.met-kantlijn .kant-inklap { display: inline-block; background: none; border: 0; font: 600 11.5px var(--ui); color: var(--accent-donker); cursor: pointer; padding: 0; }
/* journal als masonry: briefjes van verschillende hoogte in kolommen, zonder gaten */
.stickies { display: block; columns: 210px; column-gap: 18px; }
.sticky { display: inline-flex; width: 100%; min-height: 0; margin: 0 0 18px; break-inside: avoid; }
.sticky-tekst { -webkit-line-clamp: 14; }

/* meer ruimte voor de kantlijn als het scherm breed genoeg is */
@media (min-width: 1250px) {
  .met-kantlijn.kant-schrijven { margin-right: 420px; }
  .met-kantlijn.kant-schrijven .lv-kant { right: -420px; width: 400px; }
}

/* ---------- briefjes met lijstjes ---------- */
.bl { display: block; position: relative; padding-left: 1.1em; text-align: left; }
.bl-punt::before { content: '•'; position: absolute; left: .25em; }
.bl-nr::before { content: attr(data-n); position: absolute; left: 0; font-variant-numeric: tabular-nums; }
.lijst-knoppen { display: inline-flex; gap: 3px; margin-left: 6px; }
.lijst-knoppen button { min-width: 24px; height: 20px; padding: 0 4px; border: 1px solid var(--lijn); border-radius: 5px; background: #fff; font: 600 12px/1 var(--ui); color: var(--gedempt); cursor: pointer; }
.lijst-knoppen button:hover { color: var(--tekst); border-color: var(--accent); }

/* ---------- handletteringquotes ---------- */
.quote { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; margin: 0 0 18px; padding: 18px 12px 14px; break-inside: avoid; text-align: center;
  color: var(--inkt); background: #fffdf8; border: 1px solid #eee6d6; border-radius: 4px; transform: rotate(var(--draai)); line-height: 1; }
.quote > * { max-width: 100%; }
.q-blok { font: 700 40px/0.95 'Amatic SC', var(--ui); letter-spacing: .02em; }
.q-groot { font-size: 58px; }
.q-script { font: 700 32px/1.05 'Dancing Script', cursive; }
.q-hand { font: 500 26px/1.1 Caveat, cursive; }
.q-klein { font: 600 12px/1.5 var(--ui); letter-spacing: .28em; text-transform: uppercase; margin: 2px 0; }
.q-ref { font: 500 17px/1.2 Caveat, cursive; opacity: .75; margin-top: 8px; }
.q-lint { font: 700 24px/1 'Amatic SC', var(--ui); letter-spacing: .06em; text-transform: uppercase; padding: 5px 22px; margin: 4px 0;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 0 100%, 10px 50%); }
.q-hart { position: relative; display: inline-grid; place-items: center; width: 130px; height: 110px; margin: 2px 0; }
.q-hart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.q-hart b { position: relative; color: #fffdf8; font: 700 30px/0.9 'Amatic SC', var(--ui); text-transform: uppercase; max-width: 90px; margin-top: -10px; }
.q-sier { display: block; color: var(--inkt); margin: 3px 0; }
.q-sier svg { display: block; height: 22px; width: auto; margin: 0 auto; }
.q-sier.q-kruis svg { height: 34px; }
.q-sier.q-pijl svg { height: 18px; }
.beheer-quotes { columns: 190px; column-gap: 18px; }
.beheer-quote { break-inside: avoid; margin-bottom: 14px; }
.beheer-quote.uit .quote { opacity: .35; }
.beheer-quote-knoppen { text-align: center; font-size: 13px; margin-top: -8px; }
#quoteVoorbeeld .quote { max-width: 260px; }

/* zachtere kleuren voor markeringen, kanttekeningen en briefjes */
.mk-geel { background: #faefcf; } .mk-oranje { background: #f9e3d0; } .mk-roze { background: #f6e0dc; } .mk-paars { background: #ebe3f3; }
.mk-blauw { background: #dfe8f3; } .mk-mint { background: #dbefea; } .mk-groen { background: #e0ecdd; } .mk-grijs { background: #eae8e4; }
.met-kantlijn .kant-eigen.kant-geel, .met-kantlijn .kant-schrijf.kant-geel, .kant-veld.kant-geel { background: #fbf2d8; border-color: #eedfb4; }
.met-kantlijn .kant-eigen.kant-oranje, .met-kantlijn .kant-schrijf.kant-oranje, .kant-veld.kant-oranje { background: #faeadb; border-color: #ecd0b6; }
.met-kantlijn .kant-eigen.kant-roze, .met-kantlijn .kant-schrijf.kant-roze, .kant-veld.kant-roze { background: #f8e7e3; border-color: #e8cbc5; }
.met-kantlijn .kant-eigen.kant-paars, .met-kantlijn .kant-schrijf.kant-paars, .kant-veld.kant-paars { background: #efe9f5; border-color: #d9cde8; }
.met-kantlijn .kant-eigen.kant-blauw, .met-kantlijn .kant-schrijf.kant-blauw, .kant-veld.kant-blauw { background: #e6edf6; border-color: #cbd8e8; }
.met-kantlijn .kant-eigen.kant-mint, .met-kantlijn .kant-schrijf.kant-mint, .kant-veld.kant-mint { background: #e3f3ef; border-color: #c4e0d8; }
.met-kantlijn .kant-eigen.kant-groen, .met-kantlijn .kant-schrijf.kant-groen, .kant-veld.kant-groen { background: #e7f0e4; border-color: #cbdcc6; }
.met-kantlijn .kant-eigen.kant-grijs, .met-kantlijn .kant-schrijf.kant-grijs, .kant-veld.kant-grijs { background: #efeeeb; border-color: #dad7d1; }
.sticky-geel { background: #fbf1cf; } .sticky-oranje { background: #fbe6d4; } .sticky-roze { background: #f8e2de; } .sticky-paars { background: #ede5f5; }
.sticky-blauw { background: #e1eaf5; } .sticky-mint { background: #ddf1ec; } .sticky-groen { background: #e3eee0; } .sticky-grijs { background: #ecebe7; }
/* vinkje subtieler: licht rondje, groen vinkje */
.balk-ok, .kant-ok { background: rgba(255,255,255,.75) !important; color: var(--accent-donker) !important; border: 1px solid var(--lijn) !important; box-shadow: none !important; }
.balk-ok { width: 28px; height: 28px; font-size: 14px; }
.balk-ok:hover, .kant-ok:hover { background: #fff !important; border-color: var(--accent) !important; }
/* schrijfvak in het selectiebalkje: groter, groeit mee met de tekst */
.lees-balk { width: min(420px, calc(100vw - 16px)); }
.balk-schrijf textarea { min-height: 84px; max-height: 50vh; resize: none; overflow-y: auto; font-size: 15px; }
/* geen kruisje op de briefjes zelf; weghalen kan in het schrijfvak (klik op het briefje) */
.kant-schrijf .kant-weg, .kant-eigen .kant-weg { display: none !important; }
/* inklappen: klein icoontje linksboven, onder het versnummer */
.met-kantlijn .lv-kant > .kant-inklap { grid-column: 1; grid-row: 2; justify-self: center; width: 16px; height: 16px; line-height: 16px; padding: 0; font: 600 12px var(--ui); color: var(--gedempt); border-radius: 4px; }
.met-kantlijn .lv-kant > .kant-inklap:hover { color: var(--accent-donker); background: var(--accent-licht); }
/* kopiëren en delen in het selectiebalkje (rechts) */
.balk-deel { display: inline-flex; gap: 4px; margin-left: auto; }
.balk-deel button { width: 26px; height: 24px; display: grid; place-items: center; padding: 0; border: 1px solid var(--lijn); border-radius: 6px; background: #fff; color: var(--gedempt); cursor: pointer; }
.balk-deel button:hover { color: var(--accent-donker); border-color: var(--accent); }
.lees-balk > .balk-deel { margin-left: 6px; }

/* ---------- quotes kiezen en in de kantlijn plakken ---------- */
.quote-la { position: fixed; top: 0; right: 0; bottom: 0; width: 270px; z-index: 90; overflow-y: auto; background: var(--wit); border-left: 1px solid var(--lijn); box-shadow: -8px 0 24px rgba(0,0,0,.12); padding: 10px 12px 30px; }
.quote-la[hidden] { display: none; }
.la-kop { display: flex; justify-content: space-between; align-items: center; position: sticky; top: -10px; background: var(--wit); padding: 6px 0; z-index: 1; }
.la-dicht { border: 0; background: none; font: 20px var(--ui); color: var(--gedempt); cursor: pointer; }
.la-quote { cursor: grab; margin-bottom: 4px; border-radius: 6px; }
.la-quote .quote { zoom: .62; margin-bottom: 8px; }
.la-quote:hover .quote, .la-quote.aan .quote { box-shadow: 0 0 0 3px var(--accent); }
.la-quote:active { cursor: grabbing; }
.quote-slepen .lv.drop-hier, .quote-kiezen .lv:hover { background: var(--accent-licht); border-radius: 4px; }
.quote-kiezen .lv { cursor: copy; }
.kant-sticker { display: none; }
.met-kantlijn .kant-sticker { display: block; position: relative; cursor: pointer; max-width: 230px; }
.kant-sticker .quote { zoom: .5; margin: 0; }
.sticker-weg { display: none; }
.kant-sticker.kies .sticker-weg { display: inline-block; margin-top: 2px; border: 1px solid var(--lijn); background: #fff; border-radius: 6px; font: 600 11.5px var(--ui); color: #b0413e; padding: 2px 8px; cursor: pointer; }
.sticker-kaart { display: inline-flex; flex-direction: column; width: 100%; break-inside: avoid; margin: 0 0 18px; text-decoration: none; color: inherit; }
.sticker-kaart .quote { margin-bottom: 0; }
.sticker-kaart .sticky-ref { margin-top: 4px; text-align: center; }
.la-maak { border: 1px dashed var(--lijn); border-radius: 8px; padding: 8px; margin: 4px 0 10px; }
.la-maak textarea { width: 100%; resize: vertical; font: 14px/1.35 var(--lees); border: 1px solid var(--lijn); border-radius: 6px; padding: 5px 7px; }
.la-maak-knoppen { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.la-maak-knoppen .knop { font-size: 12px; padding: 3px 9px; }
.la-eigen { margin-top: 4px; }
/* quote-la open: de pagina schuift op zodat de kantlijn zichtbaar blijft */
@media (min-width: 1000px) { body.la-open #inhoud { margin-right: 280px; } }
/* studie: 'Mijn aantekeningen' toont ook de briefjes en quotes uit het lezen */
#mijnNotitie .kant-veld { display: block; width: 100%; min-height: 110px; resize: vertical; font: 15px/1.45 var(--lees); border: 1px solid var(--lijn); border-radius: 8px; padding: 8px 10px; }
.mijn-kleuren { margin-bottom: 6px; align-items: center; }
.mijn-stukjes { display: block; columns: 200px; column-gap: 12px; margin: 10px 0 4px; }
.mijn-stukje { cursor: pointer; transform: none; margin-bottom: 12px; }
.mijn-stukje-veld { width: 100%; font: 14px/1.4 var(--lees); border: 1px solid var(--lijn); border-radius: 6px; padding: 4px 6px; background: rgba(255,255,255,.7); }
.mijn-quotes { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.mijn-quotes .quote { zoom: .55; width: auto; min-width: 200px; }
/* quote groot (lightbox) */
.quote-licht { position: fixed; inset: 0; z-index: 200; background: rgba(40,32,26,.55); display: grid; place-items: center; padding: 16px; animation: licht-in .15s ease-out; }
@keyframes licht-in { from { opacity: 0; } }
.quote-licht-binnen { display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 100%; overflow: auto; }
.quote-licht .quote { zoom: 1.35; width: min(330px, 70vw); transform: none; margin: 0; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.quote-licht-knoppen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.quote-licht-knoppen .knop { background: #fff; }
.quote-licht-knoppen .knop.vol { background: var(--accent-donker); color: #fff; }
.kant-sticker, .sticker-kaart, .mijn-quote { cursor: zoom-in; }
.journal-balk select { font: 13px var(--ui); padding: 6px 10px; border: 1px solid var(--lijn); border-radius: 999px; background: #fff; color: var(--tekst); }
.kant-bewerk > .kant-stukje { margin: 0 0 5px; }
/* journal: briefjes minder op een rijtje — scheef, verschoven, wisselende breedte, soms een plakbandje */
.stickies .sticky { width: var(--breed, 100%); transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--draai)); margin: 4px 0 26px; position: relative; }
.stickies .sticky:nth-child(3n+2) { margin-left: auto; }
.stickies .sticky:nth-child(5n+3) { margin-left: 8%; }
.stickies .sticky:hover { transform: translate(var(--dx, 0), calc(var(--dy, 0px) - 3px)) rotate(0deg) scale(1.03); z-index: 2; }
.stickies .sticky[style*="--tape:1"]::before { content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 20px; transform: translateX(-50%) rotate(-4deg); background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.stickies .sticker-kaart { transform: rotate(-1.5deg); margin: 6px 0 28px; }
.stickies .sticker-kaart:nth-child(2n) { transform: rotate(2deg) translateX(6px); }
.stickies .sticker-kaart .quote { transform: none; }
.stickies { column-gap: 30px; }
.stickies .sticky, .stickies .sticker-kaart { display: flex; }
.stickies .sticky[style*="--tape:1"] { margin-top: 16px; }
/* te veel aantekeningen bij een vers: dat stukje kantlijn scrolt */
.met-kantlijn .lv-kant.scrollt { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent); }
.met-kantlijn .lv-kant.scrollt > .kant-nr { position: sticky; top: 0; }
/* kantlijn schuift als geheel mee met het lezen (--ks wordt bij het scrollen gezet); niet scrollen per vers */
.met-kantlijn .lv-kant { translate: 0 var(--ks, 0px); }
.met-kantlijn .lv-kant.scrollt { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.lees-tekst.met-kantlijn { clip-path: inset(-6px -600px -6px -60px); }
/* quote maken in het selectiebalkje */
.balk-schrijf { flex-wrap: wrap; }
.balk-quote { flex: 1 1 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.balk-quote-kaart .quote { zoom: .75; width: 300px; transform: none; margin: 0; }
.balk-quote-knoppen { display: flex; gap: 6px; }
.balk-quote-knoppen button { border: 1px solid var(--lijn); background: #fff; border-radius: 6px; font: 600 12px var(--ui); color: var(--gedempt); padding: 3px 8px; cursor: pointer; }
.balk-quote-knoppen button:hover { color: var(--tekst); border-color: var(--accent); }
.balk-deel button.aan { background: var(--accent-licht); color: var(--accent-donker); border-color: var(--accent); }
.balk-schrijf textarea[hidden] { display: none; }
/* woordenlijst-pop-up op de leesplek */
.wl-pop { position: absolute; z-index: 120; width: min(320px, calc(100vw - 16px)); background: var(--wit); border: 1px solid var(--lijn); border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 24px rgba(0,0,0,.16); font: 14px/1.45 var(--lees); }
.wl-pop-woord { font: 600 17px var(--lees); }
.wl-pop-bekend { margin: 4px 0; font-size: 13px; color: var(--gedempt); }
.wl-pop-tekst p { margin: 6px 0; }
.wl-pop-meer { display: inline-block; margin-top: 4px; font: 600 12.5px var(--ui); }
.wl-pop-dicht { position: absolute; top: 6px; right: 8px; border: 0; background: none; font: 18px var(--ui); color: var(--gedempt); cursor: pointer; }
.lv-t.vers-mk { border-radius: 3px; padding: 1px 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
/* versiersels hebben eigen klassen (botste met .q-hart = tekst in een hart) */
.q-sier.sier-kruis svg { height: 34px; }
.q-sier.sier-pijl svg { height: 18px; }

/* kantlijn speelser: briefjes iets scheef, wisselende breedte en inspringing, quotes klein en schuin ertussen */
.met-kantlijn .lv-kant > .kant-schrijf, .met-kantlijn .lv-kant > .kant-eigen { width: auto; max-width: 100%; justify-self: start; box-shadow: 1px 2px 0 rgba(0,0,0,.05), 0 3px 8px rgba(0,0,0,.05); rotate: -.8deg; }
.met-kantlijn .lv-kant > :nth-child(3n+2) { rotate: .9deg; margin-left: 14px; }
.met-kantlijn .lv-kant > :nth-child(3n) { rotate: -.4deg; margin-left: 4px; }
.met-kantlijn .lv-kant > :nth-child(4n+1):not(.kant-nr) { margin-left: 22px; }
.met-kantlijn .lv-kant > .kant-sticker { max-width: 150px; rotate: -3deg; margin: -4px 0 0 30px; justify-self: start; }
.met-kantlijn .lv-kant > .kant-sticker:nth-child(odd) { rotate: 2.5deg; justify-self: end; margin: -6px 10px 0 0; }
.kant-sticker .quote { zoom: .42; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.met-kantlijn .lv-kant > .kant-plus { rotate: none; margin-left: 0; }
.met-kantlijn .lv-kant > .kant-bewerk { rotate: none; margin-left: 0; }
.met-kantlijn .lv-kant > .kant-schrijf:hover, .met-kantlijn .lv-kant > .kant-eigen:hover, .met-kantlijn .lv-kant > .kant-sticker:hover { rotate: 0deg; }
.met-kantlijn .lv-kant > .kant-schrijf, .met-kantlijn .lv-kant > .kant-eigen { min-width: 62%; max-width: 92%; }
.met-kantlijn .lv-kant > .kant-sticker { max-width: 200px; }
.kant-sticker .quote { zoom: .55; }
/* kantlijn: briefjes en quotes naast elkaar als ze passen (in plaats van onder elkaar) */
.met-kantlijn .lv-kant { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 6px 8px; padding-left: 20px; }
.met-kantlijn .lv-kant > .kant-nr { position: absolute; left: 0; top: 5px; padding: 0; }
.met-kantlijn .lv-kant > * { grid-column: auto; grid-row: auto; }
.met-kantlijn .lv-kant > .kant-schrijf, .met-kantlijn .lv-kant > .kant-eigen { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; }
.met-kantlijn .lv-kant > :nth-child(3n+2), .met-kantlijn .lv-kant > :nth-child(3n), .met-kantlijn .lv-kant > :nth-child(4n+1):not(.kant-nr) { margin-left: 0; }
.met-kantlijn .lv-kant > :nth-child(odd):not(.kant-nr) { margin-top: 3px; }
.met-kantlijn .lv-kant > .kant-sticker, .met-kantlijn .lv-kant > .kant-sticker:nth-child(odd) { flex: none; max-width: 150px; margin: 0; justify-self: auto; }
.met-kantlijn .lv-kant > .kant-bewerk, .met-kantlijn .lv-kant > .kant-groep { flex: 1 1 100%; }
.met-kantlijn .lv-kant > .kant-plus { flex: none; }
/* iets rechter: minder scheef */
.met-kantlijn .lv-kant > .kant-schrijf, .met-kantlijn .lv-kant > .kant-eigen { rotate: -.3deg; }
.met-kantlijn .lv-kant > :nth-child(3n+2):not(.kant-nr) { rotate: .35deg; }
.met-kantlijn .lv-kant > :nth-child(3n):not(.kant-nr) { rotate: -.15deg; }
.met-kantlijn .lv-kant > .kant-sticker { rotate: -1.2deg; }
.met-kantlijn .lv-kant > .kant-sticker:nth-child(odd) { rotate: 1deg; }
/* wiebelen bij aanwijzen: rustig en langzaam */
.met-kantlijn .lv-kant > .kant-schrijf, .met-kantlijn .lv-kant > .kant-eigen, .met-kantlijn .lv-kant > .kant-sticker { transition: rotate .7s cubic-bezier(.35, 1.5, .5, 1), box-shadow .4s; }
.met-kantlijn .lv-kant > .kant-schrijf:hover, .met-kantlijn .lv-kant > .kant-eigen:hover { rotate: .6deg; }
.met-kantlijn .lv-kant > .kant-sticker:hover { rotate: -2deg; }

/* quotes in kleur: papier en inkt */
.quote { background: var(--papier, #fffdf8); }
.q-hart b { color: var(--papier, #fffdf8); }
.quote-licht-kleuren { display: flex; gap: 6px; background: #fff; padding: 6px 10px; border-radius: 999px; }
.quote-licht-kleuren .kleur { width: 22px; height: 22px; }
.kleur.q-wit { background: #fffdf8; border: 1px solid #ddd; }
/* quotes in de kantlijn iets groter */
.kant-sticker .quote { zoom: .68; }
.met-kantlijn .lv-kant > .kant-sticker, .met-kantlijn .lv-kant > .kant-sticker:nth-child(odd) { max-width: 190px; }
/* eigen aantekeningen in handschrift (Kalam): kantlijn, schrijfvakken, journal, studie */
.kant-schrijf, .kant-eigen, .kant-veld, .balk-schrijf textarea, .sticky-tekst, .sticky-stukje, .mijn-stukje, .mijn-stukje-veld, #mijnNotitie .kant-veld {
  font-family: Kalam, 'Gentium Book Plus', serif !important; }
.met-kantlijn .kant-schrijf, .met-kantlijn .kant-eigen { font-size: 14.5px; line-height: 1.35; }
.kant-eigen mark, .sticky-stukje { font-family: Kalam, serif; }
/* het geciteerde stukje bijbeltekst in een briefje: lettertype van de bijbel, niet schuin */
.kant-eigen mark, .sticky-stukje, .kant-stukje, .mijn-stukje .sticky-stukje { font-family: var(--lees), 'Gentium Book Plus', serif !important; font-style: normal !important; }
/* quotes in de kantlijn nog iets groter */
.kant-sticker .quote { zoom: .82; }
.met-kantlijn .lv-kant > .kant-sticker, .met-kantlijn .lv-kant > .kant-sticker:nth-child(odd) { max-width: 230px; }
/* journal volgt de afspraken van de kantlijn: iets rechter, rustig wiebelen, handschrift, bijbelcitaat recht in bijbelletter */
.stickies .sticky { transition: transform .7s cubic-bezier(.35, 1.5, .5, 1), box-shadow .4s; }
.stickies .sticky:hover { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(calc(var(--draai) * -1 + .3deg)); }
.stickies .sticker-kaart { transform: rotate(-.8deg); transition: transform .7s cubic-bezier(.35, 1.5, .5, 1); }
.stickies .sticker-kaart:nth-child(2n) { transform: rotate(.8deg) translateX(4px); }
.stickies .sticker-kaart:hover { transform: rotate(-1.6deg); }
.sticky-tekst { font-size: 15.5px; line-height: 1.4; }
/* plakbandje alleen bij quotes, niet meer bij briefjes */
.stickies .sticky[style*="--tape:1"]::before { content: none; }
.stickies .sticky[style*="--tape:1"] { margin-top: 4px; }
.stickies .sticker-kaart { position: relative; margin-top: 18px; }
.stickies .sticker-kaart::before { content: ''; position: absolute; top: -9px; left: 50%; z-index: 1; width: 70px; height: 20px; transform: translateX(-50%) rotate(-4deg); background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.stickies .sticker-kaart:nth-child(2n)::before { transform: translateX(-50%) rotate(3deg); }
/* journal: links → rechts lezen (kolommen gevuld in leesvolgorde) */
.stickies.in-rijen { columns: auto; display: flex; gap: 30px; align-items: flex-start; }
.journal-kol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.chip[data-richting] { display: inline-grid; place-items: center; padding: 4px 9px; }
/* links → rechts: rijen, kaartjes in verschillende breedtes, per rij even hoog */
.stickies.in-rijen { columns: auto; display: flex; flex-wrap: wrap; gap: 22px 24px; align-items: stretch; }
.stickies.in-rijen > .sticky, .stickies.in-rijen > .sticker-kaart { flex-grow: 1; flex-shrink: 1; width: auto; max-width: 480px; margin: 0; }
.stickies.in-rijen > .sticker-kaart { margin-top: 10px; }
.stickies.in-rijen > .sticker-kaart .quote { height: 100%; justify-content: center; }
.stickies.in-rijen { margin-bottom: 24px; }
/* leesplek: vertalingen naast elkaar (parallel) */
.lees-naast { display: grid; grid-template-columns: 1fr; }
.lp-kop, .lp-rij { display: grid; grid-template-columns: repeat(var(--kolommen), minmax(0, 1fr)); gap: 18px; }
.lp-kop { position: sticky; top: 0; z-index: 3; background: var(--wit); padding: 6px 0; border-bottom: 1px solid var(--lijn); font: 600 11.5px var(--ui); color: var(--gedempt); }
.lp-rij { padding: 6px 0; border-bottom: 1px dashed #eee6d6; }
.lp-extra { font: 15px/1.6 var(--lees); color: var(--tekst); }
.lp-extra.rtl { direction: rtl; text-align: right; font-family: var(--heb); }
.lees-naast .lv { display: block; }
/* studie: aantekeningen bij stukjes rustig onder elkaar, geen briefjes */
.mijn-stukjes { columns: auto; display: block; margin: 12px 0 4px; }
.mijn-stukje { display: block; margin: 0 0 8px; padding: 4px 0 6px 10px; border-left: 3px solid #efd28c; background: none; box-shadow: none; transform: none; rotate: none; cursor: pointer; }
.mijn-stukje .sticky-stukje { display: inline; color: var(--gedempt); margin-right: 6px; }
.mijn-stukje .sticky-tekst { display: inline; font-size: 15px; }
.mijn-stukje:hover { background: #fbf8f0; }
.mk-rand-geel { border-left-color: #efd28c; } .mk-rand-oranje { border-left-color: #f0c193; } .mk-rand-roze { border-left-color: #e9b8b0; } .mk-rand-paars { border-left-color: #d9cde8; }
.mk-rand-blauw { border-left-color: #b2cbe6; } .mk-rand-mint { border-left-color: #b9e0d6; } .mk-rand-groen { border-left-color: #b5d3b1; } .mk-rand-grijs { border-left-color: #d6d3cd; }
/* kanttekeningen uit: kantlijn weg, tekst weer breed */
body.zonder-kantlijn .lv-kant { display: none !important; }
body.zonder-kantlijn .met-kantlijn.kant-schrijven { margin-right: 0; }
/* kanttekeningen uit: markeringen blijven, maar rustig grijs */
body.zonder-kantlijn .lees-tekst mark.acc, body.zonder-kantlijn .lees-tekst .lv-t.vers-mk { background: #eceae6 !important; }
body.zonder-kantlijn .lees-tekst mark.acc + .wolk, body.zonder-kantlijn .lees-tekst .wolk { display: none; }
/* kanttekeningen uit: de hele breedte voor de tekst (vooral handig bij vertalingen naast elkaar) */
body.zonder-kantlijn .lees-tekst.lees-naast { max-width: none; }
.lees-tekst.lees-naast { max-width: none; }
body.zonder-kantlijn .lees-tekst:not(.lees-naast) { max-width: 42em; margin-left: auto; margin-right: auto; }   /* kanttekeningen uit: smalle kolom, in het midden */
body.zonder-kantlijn .lees-titelrij, body.zonder-kantlijn .lees-tip, body.zonder-kantlijn .lees-volgende { max-width: 42em; margin-left: auto; margin-right: auto; }
.vt-toepassen { margin-top: 10px; width: 100%; }
.vt-toepassen.knop.vol { background: #fff; color: var(--accent-donker); border: 1px solid var(--lijn); }
body.zonder-kantlijn .binnen:has(.lees-naast) :is(.lees-titelrij, .lees-tip, .lees-volgende) { max-width: none; margin-left: 0; margin-right: 0; }   /* naast elkaar: alles links, net als de kolommen */
/* alinea's in briefjes: een beetje witruimte tussen nieuwe regels */
.bp { display: block; margin-bottom: .35em; }
.bp:last-child { margin-bottom: 0; }
.bp-leeg { display: block; height: .3em; }
.bl + .bp, .bp + .bl { margin-top: .2em; }
.lv { transition: outline-color .8s; } .lees-tekst .lv.gekozen { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* paneel (kruisverwijzingen): duidelijk kruisje rechtsboven */
.lees-paneel .paneel-dicht { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f3f0ea; color: var(--gedempt); font: 20px/28px var(--ui); text-align: center; cursor: pointer; transform: none; rotate: none; }
.lees-paneel .paneel-dicht::before, .lees-paneel .paneel-dicht::after { content: none; }
.lees-paneel .paneel-dicht:hover { background: #ebe6dc; color: var(--tekst); }
/* kruisverwijzingen: als popup bij het pijltje */
.lees-paneel.bij-knop { position: fixed; bottom: auto; transform: none; width: min(460px, calc(100vw - 16px)); max-height: 55vh; overflow: auto; }