/* ===========================================================================
   Edities — stijl voor wetenschappelijke edities van vroegmoderne teksten
   =========================================================================== */

:root {
  --papier: #fbfaf7;
  --inkt: #1f1b16;
  --inkt-zacht: #5b5348;
  --lijn: #e3ddd0;
  --lijn-sterk: #cfc7b6;
  --accent: #7a5a2f;
  --accent-zacht: #f0e7d8;
  --rubriek: #a12a1e;
  --gutter: 3.2rem;
  --leesbreedte: 42rem;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #17150f;
    --inkt: #ece5d6;
    --inkt-zacht: #a89e8a;
    --lijn: #322d22;
    --lijn-sterk: #4a4334;
    --accent: #d0a866;
    --accent-zacht: #2a2416;
    --rubriek: #e0857a;
  }
}
:root[data-thema="dark"] {
  --papier: #17150f; --inkt: #ece5d6; --inkt-zacht: #a89e8a;
  --lijn: #322d22; --lijn-sterk: #4a4334; --accent: #d0a866; --accent-zacht: #2a2416;
  --rubriek: #e0857a;
}
:root[data-thema="light"] {
  --papier: #fbfaf7; --inkt: #1f1b16; --inkt-zacht: #5b5348;
  --lijn: #e3ddd0; --lijn-sterk: #cfc7b6; --accent: #7a5a2f; --accent-zacht: #f0e7d8;
  --rubriek: #a12a1e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.wrap { max-width: 60rem; margin: 0 auto; padding: 2rem 1.25rem 6rem; }

/* ---- Sitehoofd ---------------------------------------------------------- */
.sitehoofd {
  border-bottom: 1px solid var(--lijn);
  background: color-mix(in srgb, var(--papier) 88%, var(--accent));
}
.sitehoofd .binnen {
  max-width: 60rem; margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.sitehoofd .merk { font-weight: 600; font-size: 1.15rem; letter-spacing: .01em; }
.sitehoofd .merk a { color: inherit; text-decoration: none; }
.sitehoofd nav a { color: var(--inkt-zacht); text-decoration: none; margin-left: 1.1rem; font-family: var(--sans); font-size: .95rem; }
.sitehoofd nav a:hover { color: var(--accent); }
.thema-knop {
  font-family: var(--sans); font-size: .85rem; background: none; cursor: pointer;
  border: 1px solid var(--lijn-sterk); color: var(--inkt-zacht); border-radius: 999px; padding: .2rem .7rem; margin-left: 1.1rem;
}

/* ---- Editiehoofd -------------------------------------------------------- */
.editie-kop h1 { font-size: 1.9rem; line-height: 1.15; margin: 0 0 .3rem; }
.editie-sub { color: var(--inkt-zacht); font-family: var(--sans); font-size: .95rem; margin: 0 0 1.5rem; }
.editie-sub span { margin-right: 1rem; }
.editie-sub .editie-bron { display: block; margin-top: .3rem; font-style: italic; }

/* ---- Werkbalk ----------------------------------------------------------- */
.werkbalk {
  position: sticky; top: 2.25rem; z-index: 20;   /* onder de sticky tabbalk (≈2.25rem hoog) */
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--lijn); border-radius: 10px;
  padding: .55rem .9rem; margin: 0 0 2rem;
  font-family: var(--sans); font-size: .88rem;
}
.wb-boven { display: flex; align-items: center; gap: 1rem; justify-content: space-between; }
.wb-boven .wb-zoek { flex: 1 1 auto; max-width: 30rem; }
.wb-uitklap {
  flex: none; display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 1px solid var(--lijn-sterk); color: var(--inkt-zacht);
  border-radius: 999px; padding: .3rem .8rem; cursor: pointer; font-family: var(--sans); font-size: .85rem;
}
.wb-uitklap:hover { border-color: var(--accent); color: var(--accent); }
.wb-caret { transition: transform .15s; font-size: .7em; }
.wb-uitklap.open .wb-caret { transform: rotate(180deg); }
.wb-instellingen {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--lijn);
}
.wb-instellingen[hidden] { display: none; }
.wb-groep { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.wb-kop { color: var(--inkt-zacht); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
.wb-opt, .wb-app { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; user-select: none; }
.wb-app .wb-stip { width: .7rem; height: .7rem; border-radius: 50%; background: var(--kleur); display: inline-block; }
.werkbalk input[type=checkbox] { accent-color: var(--accent); }
.wb-knoppen { display: flex; gap: .5rem; flex: none; }

/* ---- Inhoudsopgave (uitklap in de werkbalk) ---------------------------- */
.wb-inhoud {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--lijn);
  max-height: 22rem; overflow-y: auto;
}
.wb-inhoud[hidden] { display: none; }
.inhoud-lijst { list-style: none; margin: 0; padding: 0; }
.inhoud-lijst li { margin: 0; }
.inhoud-lijst a {
  display: block; text-decoration: none; color: var(--inkt);
  padding: .28rem .4rem; border-radius: 5px; line-height: 1.35;
}
.inhoud-lijst a:hover { background: var(--accent-zacht); color: var(--accent); }
.inhoud-lijst .inh-niv-1 > a { font-weight: 600; }
.inhoud-lijst .inh-niv-2 > a { padding-left: 1.3rem; }
.inhoud-lijst .inh-niv-3 > a { padding-left: 2.4rem; font-size: .95em; color: var(--inkt-zacht); }
.tekstkop.spring-actief, .db.spring-actief {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 4px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: background .2s ease;
}

/* ---- Dagen-navigator ---------------------------------------------------- */
.wb-dagen {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--lijn);
  max-height: 22rem; overflow-y: auto;
}
.wb-dagen[hidden] { display: none; }
.dagen-lijst { list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 1.5rem; }
.dagen-lijst li { break-inside: avoid; }
.dagen-lijst a {
  display: block; text-decoration: none; color: var(--inkt);
  padding: .24rem .4rem; border-radius: 5px; line-height: 1.3; font-size: .96em;
}
.dagen-lijst a:hover { background: var(--accent-zacht); color: var(--accent); }

/* Dagtekening in de lopende tekst: een ingetogen dateline. */
.db {
  display: block; margin: 1.4rem 0 .5rem;
  font-family: var(--sans); font-size: .82rem; letter-spacing: .02em;
  color: var(--inkt-zacht); text-transform: uppercase;
}
.db-diamant { color: var(--accent); font-size: .8em; }
.db-stijl {
  text-transform: none; letter-spacing: 0; font-style: italic;
  color: var(--accent); font-size: .92em;
  padding: 0 .25rem; border: 1px solid var(--lijn-sterk); border-radius: 4px; margin-left: .2rem;
}
.geen-dagmark .db { display: none; }

/* ---- Afbeeldingen in de editie ----------------------------------------- */
/* Figuren blijven binnen de hoofdtekstkolom (witruimte tot de noten intact).
   Normaal: bescheiden; {breed}: volledige kolombreedte. Klik = lightbox. */
.editie-figuur { margin: 1.6rem auto; text-align: center; cursor: zoom-in; max-width: 27rem; }
.editie-figuur.breed { max-width: 100%; }
.editie-figuur img {
  max-width: 100%; height: auto; border-radius: 4px;
  border: 1px solid var(--lijn); background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.editie-figuur figcaption {
  font-family: var(--sans); font-size: .82rem; color: var(--inkt-zacht);
  margin-top: .5rem; line-height: 1.4; text-align: left;
}
.editie-figuur .fig-nr { font-weight: 600; color: var(--inkt); }

/* ---- Pagina's en weergavemodus ----------------------------------------- */
.modus-bladeren .pagina { display: none; }
.modus-bladeren .pagina.actief { display: block; }
/* Paginascheiding: stippellijn alleen onder de tekstkolom, niet door de noten */
.modus-doorlopend .pagina + .pagina { margin-top: 2rem; }
.modus-doorlopend .pagina + .pagina .tekst { border-top: 1px dashed var(--lijn); padding-top: 1.5rem; }

.pager {
  position: sticky; top: 5.3rem; z-index: 15;   /* onder tabbalk + werkbalk */
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 0 0 1.5rem; padding: .5rem; font-family: var(--sans); font-size: .9rem;
  background: color-mix(in srgb, var(--papier) 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--lijn); border-radius: 10px;
}
.pager[hidden] { display: none; }
.pager button {
  border: 1px solid var(--lijn-sterk); background: var(--papier); color: var(--inkt);
  border-radius: 6px; padding: .3rem .8rem; cursor: pointer; font-family: var(--sans); font-size: .9rem;
}
.pager button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.pager button:disabled { opacity: .4; cursor: default; }
.pager select { font-family: var(--sans); padding: .2rem .3rem; background: var(--papier); color: var(--inkt); border: 1px solid var(--lijn-sterk); border-radius: 5px; }
.wb-opt input[type="radio"] { accent-color: var(--accent); }

/* ---- Zoeken ------------------------------------------------------------- */
.wb-zoek { flex: 1 1 16rem; }
.zoekveld {
  font-family: var(--sans); font-size: .9rem; padding: .3rem .55rem; min-width: 10rem; flex: 1 1 auto;
  border: 1px solid var(--lijn-sterk); border-radius: 6px; background: var(--papier); color: var(--inkt);
}
.zoek-status { color: var(--inkt-zacht); font-size: .82rem; min-width: 4.5rem; }
.zoek-knop {
  border: 1px solid var(--lijn-sterk); background: var(--papier); color: var(--inkt);
  border-radius: 6px; padding: .2rem .6rem; cursor: pointer; font-family: var(--sans); line-height: 1;
}
.zoek-knop:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.zoek-knop:disabled { opacity: .4; cursor: default; }
mark.zoektreffer { background: color-mix(in srgb, #f6c944 60%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
mark.zoektreffer.actief { background: #f2a13a; box-shadow: 0 0 0 2px #f2a13a; }

/* ---- Kantlijnnoten (sidenotes) ----------------------------------------- */
.wrap-ruim { max-width: 74rem; }
.kant-links, .kant-rechts { display: none; }
.kantnoten-aan { position: relative; }         /* positioneringscontext voor de margekolommen */
.kantnoten-aan .apparaten { display: none; }
.kantnoten-aan .tekst { max-width: 34rem; }
.kantnoten-aan .tekst .pb { display: none; }   /* paginamarkering staat nu in de marge */
.kantnoten-aan > .kant-links,
.kantnoten-aan > .kant-rechts { display: block; position: absolute; top: 0; width: 12rem; }
.kantnoten-aan .kant-links { left: 0; }
.kantnoten-aan .kant-rechts { right: 0; }
/* Laag voor de paginanummers: spant de volledige editiebreedte, kinderen
   plaatsen zichzelf in de gutter naast de tekstkolom. */
.kant-nrs { display: none; }
.kantnoten-aan > .kant-nrs { display: block; position: absolute; top: 0; left: 0; right: 0; height: 0; pointer-events: none; }
.kantnoot {
  position: absolute; width: 12rem; font-family: var(--sans); font-size: .76rem; line-height: 1.4;
  color: var(--inkt-zacht); border-top: 2px solid var(--kleur); padding: .25rem 0 0;
}
.kant-links .kantnoot { left: 0; }
.kant-rechts .kantnoot { right: 0; }
.pagina-nr {
  position: absolute; top: 0;
  /* Net rechts van de gecentreerde tekstkolom (halve breedte = 17rem). */
  left: calc(50% + 17rem + .75rem);
  transform: translateY(-50%);        /* verticaal gecentreerd op de stippellijn */
  font-family: var(--sans); font-size: .72rem; letter-spacing: .03em; color: var(--accent);
  white-space: nowrap; pointer-events: auto;
}
/* Kort dashed streepje dat de scheidingslijn doortrekt naar het nummer. */
.pagina-nr::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: .55rem;
  border-top: 1px dashed var(--lijn);
}
.pagina-nr.klikbaar { cursor: pointer; }
.pagina-nr.klikbaar:hover { color: var(--accent); text-decoration: underline; }
.geen-editiemark .pagina-nr { display: none; }
.kantnoot .kn-lemma { font-weight: 600; color: var(--inkt); }
.kantnoot .kn-lemma::after { content: " |"; color: var(--inkt-zacht); font-weight: 400; }
.kantnoot .lemma { border-bottom: none; cursor: default; background: none; } /* geneste lemma's niet interactief in de marge */
.kantnoot.actief { background: color-mix(in srgb, var(--kleur) 14%, transparent); border-radius: 0 0 4px 4px; }

/* Inklapbare kantnoten: grote noten tonen standaard ~3 regels zodat ze op
   ooghoogte van hun markering blijven staan. Klik op de noot (of op de
   verwijzing in de tekst) toont/verbergt de rest. */
.kantnoot:not(.uitgeklapt) { max-height: calc(1.4em * 3 + .45rem); overflow: hidden; }
.kantnoot.inklapbaar { cursor: pointer; }
.kantnoot.inklapbaar:not(.uitgeklapt)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--papier));
  pointer-events: none;
}
.kantnoot .kn-meer { display: none; }
.kantnoot.inklapbaar .kn-meer {
  display: inline-block; position: absolute; right: 0; bottom: 0;
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  color: var(--kleur); background: var(--papier); padding: 0 0 0 .45rem;
}
.kantnoot.inklapbaar.uitgeklapt .kn-meer { position: static; display: block; margin-top: .25rem; }
.kantnoot.markeer { background: color-mix(in srgb, var(--kleur) 16%, transparent); border-radius: 0 0 4px 4px; }

/* ---- Tekst met regelnummering ------------------------------------------ */
.tekst { max-width: var(--leesbreedte); margin: 0 auto; }
.alinea { margin: 0 0 1.15rem; }
.tekstkop { color: var(--inkt); margin: 2rem 0 .8rem; line-height: 1.2; }
.tekstkop.kop-1 { font-size: 1.7rem; }
.tekstkop.kop-2 { font-size: 1.3rem; }
.tekstkop.kop-3 { font-size: 1.05rem; font-variant: small-caps; letter-spacing: .04em; color: var(--inkt-zacht); }

/* ---- Lijsten en tabellen in de editie ---------------------------------- */
.ed-lijst { margin: 0 0 1.15rem; padding-left: 1.6rem; }
.geen-regelnr .ed-lijst { padding-left: calc(var(--gutter) + 1rem); }
.ed-lijst li { margin: .15rem 0; padding-left: .2rem; }
.ed-lijst li::marker { color: var(--inkt-zacht); }

.ed-tabel-omhulsel { margin: 0 0 1.15rem; overflow-x: auto; }
.geen-regelnr .ed-tabel-omhulsel { padding-left: var(--gutter); }
.ed-tabel {
  border-collapse: collapse; width: auto; min-width: 60%;
  font-size: .96em; line-height: 1.4;
}
.ed-tabel th, .ed-tabel td {
  border: 1px solid var(--lijn); padding: .32rem .7rem; text-align: left; vertical-align: top;
}
.ed-tabel th { background: color-mix(in srgb, var(--papier) 85%, var(--accent)); font-weight: 600; }
.ed-tabel tr:nth-child(even) td { background: color-mix(in srgb, var(--papier) 60%, var(--lijn)); }

.tregel { display: grid; grid-template-columns: var(--gutter) 1fr; column-gap: .4rem; align-items: baseline; }
.tregel .rnr {
  font-family: var(--sans); font-size: .72rem; color: var(--inkt-zacht);
  text-align: right; padding-right: .5rem; user-select: none;
  border-right: 1px solid var(--lijn); -webkit-user-select: none;
}
.tregel .rtekst { padding-left: .1rem; }
.geen-regelnr .tregel { grid-template-columns: 1fr; }
.geen-regelnr .rnr { display: none; }

/* ---- Lemma's (geen markeringstekens; subtiele onderstreping + hover) ----- */
.lemma {
  border-bottom: 1px dotted color-mix(in srgb, var(--kleur) 70%, transparent);
  cursor: pointer; outline: none;
}
.lemma:hover, .lemma:focus { background: color-mix(in srgb, var(--kleur) 14%, transparent); border-radius: 2px; }
/* Omvattende noot (bevat een geneste noot): dubbele onderstreping i.p.v. tint,
   zodat het geneste woord zijn eigen enkele stippellijn behoudt */
.lemma.heeft-nest {
  border-bottom: 3px double color-mix(in srgb, var(--kleur) 70%, transparent);
}
/* "Markeer geannoteerde woorden" uit: onderstreping weg, hover blijft werken */
.geen-markering .lemma { border-bottom: none; }
.geen-markering .lemma:hover, .geen-markering .lemma:focus { background: color-mix(in srgb, var(--kleur) 14%, transparent); }
/* Per-apparaat verbergen wordt per code via een JS-stijlblok gezet */

/* ---- Editeursingrepen & typografie -------------------------------------- */
.sc { font-variant: small-caps; letter-spacing: .02em; }
.ed-add { color: var(--inkt-zacht); }
.ed-unc { }
.unc-teken { font-family: var(--sans); font-size: .7em; color: var(--inkt-zacht); vertical-align: super; }
.ed-ex { font-style: italic; }
.geen-afkorting .ed-ex { font-style: normal; }
/* Opgeloste (aangevulde) letters: in de editie cursief, zonder ronde haken */
.ed-ab { font-style: italic; }
.geen-afkorting .ed-ab { font-style: normal; }
/* Overige brontypografie */
.ed-ul { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.ed-sp { letter-spacing: 0.22em; }
.ed-rood { color: var(--rubriek); }
.ed-init {
  float: left; font-family: var(--serif); color: var(--rubriek);
  font-size: 3.1em; line-height: .82; padding: .05em .1em 0 0;
}
/* Interlineaire toevoeging: boven de regel geschreven -> klein, verhoogd, met
   invoegteken ‸ dat de plaats van inlassing markeert. */
.ed-itl { font-size: .8em; vertical-align: .38em; color: var(--accent); }
.ed-itl::before { content: "‸"; font-size: .85em; vertical-align: -.1em; margin-right: .04em; }
/* Marginale toevoeging: in de marge geschreven -> als een klein inzetje in de
   tekststroom, met een marge-merkteken. */
.ed-marg {
  font-family: var(--sans); font-size: .8em; color: var(--inkt-zacht);
  border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  padding: 0 .3rem; margin: 0 .1rem;
}
.ed-marg::before { content: "marge "; font-size: .85em; letter-spacing: .04em; color: var(--accent); }
.ed-gap { font-family: var(--sans); font-size: .8em; color: var(--inkt-zacht); }
.ed-del { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--inkt) 55%, transparent); color: var(--inkt-zacht); }

/* ---- Pagina-/foliomarkering --------------------------------------------- */
.pb {
  font-family: var(--sans); font-size: .72rem; color: var(--accent);
  cursor: pointer; padding: 0 .3rem; white-space: nowrap; user-select: none;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 4px;
  background: var(--accent-zacht); vertical-align: baseline; line-height: 1;
}
.pb:hover { background: color-mix(in srgb, var(--accent) 25%, var(--papier)); }
.geen-editiemark .pb { display: none; }

/* ---- Apparaten onderaan ------------------------------------------------- */
.apparaten { max-width: var(--leesbreedte); margin: 3rem auto 0; }
.apparaat { border-top: 2px solid var(--kleur); padding-top: .6rem; margin-top: 2rem; }
.apparaat-kop {
  font-family: var(--sans); font-size: .95rem; font-weight: 600; color: var(--kleur);
  margin: 0 0 .6rem; display: flex; align-items: baseline; gap: .6rem;
}
.apparaat-soort {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--inkt-zacht); border: 1px solid var(--lijn-sterk); border-radius: 999px; padding: .05rem .5rem;
}
.nootlijst { list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.nootlijst li { margin: 0 0 .55rem; line-height: 1.5; }
.nootlijst .nr-terug {
  font-family: var(--sans); font-size: .72rem; color: var(--inkt-zacht);
  text-decoration: none; border: 1px solid var(--lijn); border-radius: 4px;
  padding: 0 .3rem; margin-right: .3rem;
}
.nootlijst .nr-terug:hover { border-color: var(--kleur); color: var(--kleur); }
.noot-lemma { font-weight: 600; }
.l-scheid { color: var(--inkt-zacht); font-weight: 400; }
.nootlijst li.markeer { background: color-mix(in srgb, var(--kleur) 16%, transparent); border-radius: 4px; }

/* Per-apparaat verbergen (JS zet klasse verberg-app-<code> op de root) */
[class*="verberg-app-"] .verberg-marker { }

/* ---- Popover ------------------------------------------------------------ */
.noot-popover {
  position: absolute; z-index: 50; max-width: 22rem;
  background: var(--papier); color: var(--inkt);
  border: 1px solid var(--lijn-sterk); border-left: 3px solid var(--kleur);
  border-radius: 8px; padding: .6rem .75rem; box-shadow: 0 8px 28px rgba(0,0,0,.18);
  font-size: .95rem; line-height: 1.45;
}
.pop-label { display: block; font-family: var(--sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.pop-lemma { font-weight: 600; }
.pop-lemma::after { content: " |"; color: var(--inkt-zacht); }
.pop-inhoud { display: block; margin-top: .15rem; }

/* ---- Lightbox ----------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.8);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.lb-binnen { position: relative; max-width: 92vw; max-height: 90vh; }
.lb-binnen img { max-width: 92vw; max-height: 82vh; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5); background: #fff; }
.lb-sluit {
  position: absolute; top: -1rem; right: -1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: none; background: #fff; color: #000; font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.lb-bijschrift { color: #fff; text-align: center; font-family: var(--sans); font-size: .85rem; margin-top: .6rem; }

/* ---- Foutmelding -------------------------------------------------------- */
.fout { font-family: var(--sans); font-size: .95rem; background: var(--accent-zacht); border: 1px solid var(--lijn-sterk); border-radius: 8px; padding: 1rem; }
.fout code { background: color-mix(in srgb, var(--inkt) 8%, transparent); padding: .1rem .35rem; border-radius: 4px; }

/* ---- Landingspagina ----------------------------------------------------- */
.hero { padding: 2.5rem 0 1.5rem; border-bottom: 1px solid var(--lijn); margin-bottom: 2rem; }
.hero h1 { font-size: 2.3rem; margin: 0 0 .5rem; line-height: 1.1; }
.hero p { color: var(--inkt-zacht); max-width: 40rem; margin: 0; }
.kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1.2rem; margin-top: 1.5rem; }
.kaart {
  border: 1px solid var(--lijn); border-radius: 12px; padding: 1.2rem 1.3rem;
  text-decoration: none; color: inherit; background: color-mix(in srgb, var(--papier) 94%, var(--accent));
  transition: border-color .15s, transform .15s;
}
.kaart:hover { border-color: var(--accent); transform: translateY(-2px); }
.kaart h2 { font-size: 1.25rem; margin: 0 0 .3rem; }
.kaart .k-meta { font-family: var(--sans); font-size: .82rem; color: var(--inkt-zacht); margin: 0 0 .6rem; }
.kaart .k-tag { display: inline-block; font-family: var(--sans); font-size: .72rem; border: 1px solid var(--lijn-sterk); border-radius: 999px; padding: .05rem .55rem; color: var(--inkt-zacht); }
.kaart p { margin: .5rem 0 0; font-size: .98rem; }

/* ---- Editor / werkbank -------------------------------------------------- */
.editor-body { overflow: hidden; height: 100vh; display: flex; flex-direction: column; }
.ed-werkbank { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.ed-balk {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem 1rem; border-bottom: 1px solid var(--lijn);
  background: color-mix(in srgb, var(--papier) 90%, var(--accent)); font-family: var(--sans);
}
.ed-balk-links { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ed-knop {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  font-family: var(--sans); font-size: .85rem; color: var(--inkt);
  border: 1px solid var(--lijn-sterk); background: var(--papier); border-radius: 7px; padding: .3rem .7rem;
}
.ed-knop:hover { border-color: var(--accent); color: var(--accent); }
.ed-scheiding { width: 1px; height: 1.4rem; background: var(--lijn-sterk); }
.ed-status { font-size: .82rem; color: var(--inkt-zacht); }
.ed-status.goed { color: #0f766e; }
.ed-status.waarschuwing { color: var(--rubriek); }
.ed-status.fout { color: var(--rubriek); font-weight: 600; }

.ed-panelen { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.ed-bron, .ed-voorbeeld { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.ed-bron { border-right: 1px solid var(--lijn); position: relative; }
.ed-paneelkop {
  display: flex; align-items: center; justify-content: space-between;
  padding: .35rem .8rem; font-family: var(--sans); font-size: .78rem; color: var(--inkt-zacht);
  text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--lijn);
  background: color-mix(in srgb, var(--papier) 96%, var(--inkt));
}
.ed-paneelkop code { text-transform: none; letter-spacing: 0; }
.ed-mini {
  font-family: var(--sans); font-size: .75rem; cursor: pointer; color: var(--inkt-zacht);
  background: none; border: 1px solid var(--lijn-sterk); border-radius: 999px; padding: .1rem .6rem;
}
.ed-mini:hover { border-color: var(--accent); color: var(--accent); }
#ed-invoer {
  flex: 1 1 auto; width: 100%; resize: none; border: none; outline: none;
  padding: 1rem 1.1rem; background: var(--papier); color: var(--inkt);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  font-size: .9rem; line-height: 1.55; tab-size: 2;
}
#ed-preview { flex: 1 1 auto; width: 100%; border: none; background: var(--papier); }

.ed-legenda {
  position: absolute; right: .6rem; top: 2.4rem; width: min(24rem, 80%); z-index: 5;
  max-height: 70%; overflow-y: auto;
  background: var(--papier); border: 1px solid var(--lijn-sterk); border-radius: 10px;
  box-shadow: 0 8px 30px rgba(0,0,0,.18); padding: .5rem .7rem; font-family: var(--sans);
}
.ed-legenda[hidden] { display: none; }
.ed-legenda table { border-collapse: collapse; width: 100%; font-size: .8rem; }
.ed-legenda th { text-align: left; font-weight: 600; padding: .2rem .5rem .2rem 0; white-space: nowrap; vertical-align: top; }
.ed-legenda td { padding: .2rem 0; }
.ed-legenda code { font-size: .92em; color: var(--accent); }
.ed-legenda-meer { margin: .5rem 0 0; font-size: .8rem; }

.ed-rapport {
  border-top: 1px solid var(--lijn); background: color-mix(in srgb, var(--papier) 92%, var(--rubriek));
  font-family: var(--sans); font-size: .82rem; padding: .4rem 1rem; max-height: 9rem; overflow-y: auto;
}
.ed-rapport[hidden] { display: none; }
.ed-rapport summary { cursor: pointer; color: var(--rubriek); font-weight: 600; }
.ed-rapport ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.ed-rapport li { margin: .15rem 0; }
.ed-mis-code { color: var(--inkt-zacht); }
.sitehoofd nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }
.ed-tip { font-size: .72rem; color: var(--inkt-zacht); text-transform: none; letter-spacing: 0; font-style: italic; }
.ed-knop.primair { background: var(--accent); color: #fff; border-color: var(--accent); }
.ed-knop.primair:hover { filter: brightness(1.08); color: #fff; }

/* Modaal: nieuwe noot */
.ed-modaal {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.4); padding: 1rem;
}
.ed-modaal[hidden] { display: none; }
.ed-modaal-kaart {
  background: var(--papier); color: var(--inkt); border: 1px solid var(--lijn-sterk);
  border-radius: 12px; box-shadow: 0 16px 50px rgba(0,0,0,.3);
  width: min(30rem, 100%); padding: 1.3rem 1.4rem; font-family: var(--sans);
}
.ed-modaal-kaart h3 { margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.3rem; }
.nf-lemma { margin: 0 0 1rem; font-size: .9rem; color: var(--inkt-zacht); }
.nf-lemma span { color: var(--accent); font-weight: 600; }
.nf-veld { display: block; font-size: .8rem; color: var(--inkt-zacht); margin: 0 0 .9rem; text-transform: uppercase; letter-spacing: .04em; }
.nf-veld select, .nf-veld textarea {
  display: block; width: 100%; margin-top: .3rem; font-family: inherit; font-size: .95rem;
  color: var(--inkt); background: color-mix(in srgb, var(--papier) 96%, var(--inkt));
  border: 1px solid var(--lijn-sterk); border-radius: 7px; padding: .45rem .6rem; text-transform: none; letter-spacing: 0;
}
.nf-veld textarea { resize: vertical; line-height: 1.5; font-family: var(--serif); }
.nf-hint { font-size: .76rem; color: var(--inkt-zacht); margin: 0 0 1rem; }
.nf-hint kbd { font-family: ui-monospace, monospace; font-size: .9em; background: color-mix(in srgb, var(--inkt) 10%, transparent); padding: .05rem .3rem; border-radius: 4px; }
.nf-hint code { font-family: ui-monospace, monospace; font-size: .9em; color: var(--accent); }
.nf-knoppen { display: flex; justify-content: flex-end; gap: .6rem; }

@media (max-width: 760px) {
  .editor-body { overflow: auto; height: auto; }
  .ed-panelen { grid-template-columns: 1fr; }
  .ed-bron { border-right: none; border-bottom: 1px solid var(--lijn); }
  #ed-invoer { min-height: 40vh; }
  #ed-preview { min-height: 50vh; }
}

/* ---- Editie-secties (inleiding / verantwoording / tabs) ----------------- */
.tabs {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: .3rem; flex-wrap: nowrap; overflow-x: auto;
  border-bottom: 1px solid var(--lijn); margin: 1.5rem 0 2rem; font-family: var(--sans);
  background: color-mix(in srgb, var(--papier) 94%, transparent); backdrop-filter: blur(6px);
  scrollbar-width: thin;
}
.tabs button { flex: none; white-space: nowrap; }
.tabs button {
  background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
  font-size: .95rem; color: var(--inkt-zacht); padding: .5rem .8rem; margin-bottom: -1px;
}
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.paneel { display: none; }
.paneel.actief { display: block; }
.prozasectie { max-width: var(--leesbreedte); }
.prozasectie h2 { font-size: 1.5rem; margin: 1.8rem 0 .6rem; }
.prozasectie h3 { font-size: 1.15rem; margin: 1.4rem 0 .4rem; }
.prozasectie p { margin: 0 0 1rem; }

/* ---- Register van namen & plaatsen ------------------------------------ */
/* De ankers in de tekst zijn onzichtbaar tot een register-verwijzing ze oplicht. */
.register-anker { /* geen visuele markering in de lopende tekst */ }
.register-anker.reg-actief {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
  transition: background .2s ease;
}
.reg-uitleg { color: var(--inkt-zacht); max-width: var(--leesbreedte); }
.reg-groep { margin: 1.6rem 0; }
.reg-groep h2 { font-size: 1.3rem; margin: 0 0 .6rem; }
.register-lijst { margin: 0; }
.register-lijst dt {
  font-weight: 600;
  margin: .7rem 0 .1rem;
}
.register-lijst dt .reg-var {
  font-weight: 400;
  font-style: italic;
  color: var(--inkt-zacht);
}
.register-lijst dd {
  margin: 0 0 .2rem;
  padding-left: 1rem;
  font-size: .95em;
}
.register-lijst dd .reg-link { color: var(--accent); text-decoration: none; }
.register-lijst dd .reg-link:hover { text-decoration: underline; }
.register-lijst dd .reg-sep { color: var(--lijn); margin: 0 .35rem; }

@media print {
  .werkbalk, .sitehoofd, .tabs, .thema-knop, .pager { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .paneel { display: block !important; }
  .modus-bladeren .pagina { display: block !important; } /* print altijd alles */
}