:root {
  --bg: #f4efe6;
  --papier: #fbf8f2;
  --inkt: #2b211d;
  --zacht: #7a6d63;
  --lijn: #ddd2c3;
  --accent: #8a4b36;
  --twijfel: #f6e7c4;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --fell: "IM Fell English", "EB Garamond", Georgia, serif;
  --pen: #3a2c24;
  --kop: 60px; /* hoogte van de kopbalk */
  --typ: "Special Elite", "Courier New", monospace;
  --karton: #fdf9ef;
  /* Onregelmatige afronding: randen die er met de hand getrokken uitzien */
  --schets: 255px 14px 225px 14px / 14px 225px 14px 255px;
  --schets-rond: 52% 47% 50% 45% / 46% 53% 48% 54%;
  --potlood-accent: repeating-linear-gradient(-35deg, rgb(138 75 54 / .7) 0 1.3px, #ecd6ca 1.3px 3.3px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--bg);
  /* Papierkorrel en iets donkerder randen, als een oude prent */
  background-image:
    radial-gradient(ellipse at center, transparent 55%, rgb(120 90 50 / .10) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .12 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  color: var(--inkt);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  overflow: hidden;
}
button { font: inherit; color: inherit; }

/* Kopbalk */
.balk {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--bg);
}
.balk-lijn { position: absolute; left: 0; bottom: -6px; width: 100%; height: 10px; pointer-events: none; overflow: visible; }
.balk-lijn path, .scherm-kader path { fill: none; stroke: var(--pen); stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.scherm-kader { position: fixed; top: var(--kop); left: 0; width: 100%; height: calc(100% - var(--kop)); pointer-events: none; z-index: 4; }
.merk { margin: 0; font-family: var(--fell); font-size: 22px; font-weight: 400; white-space: nowrap; }
.merk span { font-style: italic; color: var(--accent); }
.schakel { margin-right: auto; }

.knop {
  padding: 6px 14px; border: 1.3px solid var(--pen); border-radius: var(--schets); background: var(--papier);
  cursor: pointer; white-space: nowrap; font-family: var(--fell); font-size: 16px;
  box-shadow: 1px 2px 0 rgb(58 44 36 / .18);
}
.knop:hover { border-color: var(--accent); color: var(--accent); }
.knop:active { transform: translate(1px, 1px); box-shadow: none; }
.knop .kort { display: none; }
@media (max-width: 760px) { .knop .lang { display: none; } .knop .kort { display: inline; } }
.knop.rond { width: 38px; height: 38px; padding: 0; font-family: var(--serif); font-size: 19px; border-radius: var(--schets-rond); }

/* Weergaveschakelaar */
.schakel {
  display: inline-flex; gap: 2px; padding: 3px; border: 1.3px solid var(--pen); border-radius: var(--schets);
  background: var(--papier); box-shadow: 1px 2px 0 rgb(58 44 36 / .18);
}
.schakel button { border: 1px solid transparent; background: none; padding: 3px 13px; border-radius: var(--schets); cursor: pointer; font-family: var(--fell); font-size: 16px; color: var(--zacht); }
.schakel button:hover { color: var(--accent); }
.schakel button[aria-pressed="true"] {
  background: var(--potlood-accent); border-color: var(--accent); color: var(--pen);
  text-shadow: 0 0 2px #f6efe2, 0 0 3px #f6efe2;
}

/* Waaier */
.podium { position: fixed; inset: 0; padding: calc(var(--kop) + 22px) 28px 28px; }
#waaier { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
#waaier.slepen { cursor: grabbing; }
.vak { cursor: pointer; }
.vak .vlak { transition: filter .15s; stroke: none; }
.vak:hover .vlak, .vak.lijn .vlak { filter: brightness(1.04) saturate(1.25); }
.vak .rand { fill: none; stroke: var(--pen); stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.vak .rand.dun { stroke-width: .6; opacity: .45; }
.vak .markering { fill: none; stroke: none; pointer-events: none; }
.vak.lijn .markering { stroke: var(--pen); stroke-width: 1.8; }
.vak.gekozen .markering { stroke: var(--accent); stroke-width: 3; }
.vak.leeg .rand { stroke: #a8977f; stroke-dasharray: .5 3.5; stroke-width: 1.1; }
.vak.leeg:hover .vlak { fill: rgb(255 255 255 / .45); }
.vak text { pointer-events: none; }
.als-boom .vak.focus .markering { stroke: var(--accent); stroke-width: 2.4; }
.boom-meer { font-size: 11px; fill: var(--zacht); }
.label-gen { font-family: var(--fell); font-style: italic; font-size: 15px; fill: var(--zacht); }
.titel-waaier { font-family: var(--fell); font-size: 46px; fill: var(--pen); }
.onder-waaier { font-family: var(--serif); font-style: italic; font-size: 19px; fill: var(--zacht); }
.stat-waaier { font-family: var(--serif); font-size: 12px; fill: var(--zacht); letter-spacing: .2em; text-transform: uppercase; }
.sierrand, .kader path, .boom-lijn { fill: none; stroke: var(--pen); stroke-linecap: round; stroke-linejoin: round; }
.sierrand { stroke-width: .8; opacity: .75; }
.kader path { opacity: .8; }
.boom-lijn { stroke-width: 1.1; opacity: .8; }
.titel-boom { font-family: var(--fell); font-size: 34px; fill: var(--pen); }
.onder-boom { font-family: var(--serif); font-style: italic; font-size: 17px; fill: var(--zacht); }
.gaatje { fill: var(--bg); stroke: var(--pen); stroke-width: .9; pointer-events: none; }
.touw { fill: none; stroke: #8a6f55; stroke-width: 1; stroke-linecap: round; pointer-events: none; }

/* Kaart */
.als-kaart .zee-lijn { fill: none; stroke: #7f97a6; opacity: .55; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.als-kaart .zee-wis { fill: none; stroke: var(--bg); vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.als-kaart .land { stroke: none; }
.als-kaart .meer { fill: #e3e8e4; stroke: #6f8fae; stroke-width: 1; vector-effect: non-scaling-stroke; }
.als-kaart .rivier { fill: none; stroke: #6f8fae; stroke-width: 1; opacity: .8; vector-effect: non-scaling-stroke; }
.als-kaart .grens { fill: none; stroke: var(--pen); stroke-width: .8; stroke-dasharray: 5 3 1 3; opacity: .55; vector-effect: non-scaling-stroke; }
.als-kaart .kust { fill: none; stroke: var(--pen); stroke-width: 1.15; stroke-linejoin: round; opacity: .85; vector-effect: non-scaling-stroke; }
.kaart-land { font-family: var(--fell); fill: #6d5f52; letter-spacing: .28em; text-transform: uppercase; opacity: .5; pointer-events: none; }
.kaart-zee { font-family: var(--fell); font-style: italic; fill: #5f7a8c; letter-spacing: .18em; opacity: .8; pointer-events: none; }
.windroos path:first-child { fill: none; stroke: var(--pen); stroke-width: .9; }
.roos-donker { fill: var(--pen); opacity: .8; }
.roos-licht { fill: var(--bg); stroke: var(--pen); stroke-width: .6; }
.als-kaart .schaal { transform: scale(var(--s, 1)); }
.route path { fill: none; stroke-linecap: round; opacity: .8; vector-effect: non-scaling-stroke; }
.route:hover path { opacity: 1; stroke-width: 3; }
.plek { cursor: pointer; }
.plek-stip { stroke: var(--pen); stroke-width: 1; }
.plek-vaag { fill: none; stroke: var(--pen); stroke-width: .9; stroke-dasharray: 2.5 2.5; opacity: .7; }
.plek-naam { font-family: var(--fell); font-size: 13px; fill: var(--pen); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.plek.naam-uit .plek-naam { display: none; }
.plek:hover .plek-stip { stroke-width: 2; }
.plek.gekozen .plek-stip { stroke: var(--accent); stroke-width: 3; }
.plek:hover .plek-naam { display: inline; }
.plek.gekozen .plek-naam { display: inline; fill: var(--accent); }
.als-kaart .later { display: none; }
.tijdbalk {
  position: fixed; top: calc(var(--kop) + 26px); left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: 10px; width: min(560px, calc(100% - 80px));
  padding: 6px 16px 6px 8px; border: 1.3px solid var(--pen); border-radius: var(--schets);
  background: var(--papier); box-shadow: 1px 2px 0 rgb(58 44 36 / .18);
}
.tijdbalk[hidden] { display: none; }
.tijdbalk input { flex: 1; accent-color: var(--accent); }
.tijdbalk .knop.rond { width: 32px; height: 32px; font-size: 13px; flex: none; }
.tijd-label { font-family: var(--fell); font-size: 20px; min-width: 3.2em; text-align: right; }
.legenda i.route-staal { border: 0; height: 3px; background: #b5654e; border-radius: 2px; }
.legenda i.route-staal.sprong { background: repeating-linear-gradient(90deg, #b5654e 0 5px, transparent 5px 9px); }
.legenda i.vaag-staal { border: 1px dashed var(--pen); border-radius: 50%; }

.pad {
  position: fixed; top: calc(var(--kop) + 26px); left: 34px; z-index: 5; max-width: calc(100% - 68px); overflow-x: auto;
  display: flex; align-items: center; gap: 4px; white-space: nowrap;
  padding: 4px 14px 4px 4px; border: 1.3px solid var(--pen); border-radius: var(--schets);
  background: var(--papier); font-size: 15px; box-shadow: 1px 2px 0 rgb(58 44 36 / .18);
}
.pad[hidden] { display: none; }
.pad button { border: 0; background: none; padding: 2px 4px; cursor: pointer; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.pad button.pad-terug {
  width: 30px; height: 30px; border-radius: var(--schets-rond); background: var(--potlood-accent); color: var(--pen);
  border: 1px solid var(--accent); text-shadow: 0 0 2px #f6efe2;
  text-decoration: none; font-size: 17px; margin-right: 4px; padding: 0;
}
.pad-pijl { color: var(--zacht); }
.bewaar { position: fixed; right: 88px; bottom: 36px; z-index: 5; }
.bewaar:disabled { cursor: progress; opacity: .7; }
.zoomknoppen { position: fixed; right: 36px; bottom: 36px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.legenda {
  position: fixed; left: 36px; bottom: 34px; z-index: 5; font-size: 14px; color: var(--zacht);
  display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: calc(100% - 360px);
}
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 16px; height: 14px; border-radius: 2px; display: inline-block; border: 1px solid rgb(58 44 36 / .6); }
.legenda i.potlood { background: repeating-linear-gradient(-35deg, var(--kleur) 0 1.2px, var(--was) 1.2px 3px); }
.legenda i.arc { background: repeating-linear-gradient(50deg, rgb(70 45 25 / .45) 0 1px, transparent 1px 5px), #fbf6ec; }
.legenda i.leeg { border: 1px dotted #a8977f; }
.legenda i.sib { background: #fbf6ec; }

/* Paneel */
/* Zijpaneel in de stijl van een archiefkaart: karton, liniatuur, ponsgaatje en getypte kopjes */
.paneel {
  position: fixed; top: calc(var(--kop) + 2px); right: 0; bottom: 0; width: min(440px, 100%); z-index: 15;
  background-color: var(--karton);
  background-image: repeating-linear-gradient(to bottom, transparent 0 25px, rgb(84 128 180 / .15) 25px 26px);
  background-attachment: local;
  border-left: 1.3px solid rgb(58 44 36 / .45);
  box-shadow: -20px 0 40px rgb(60 40 20 / .10);
  transform: translateX(105%); transition: transform .25s ease;
  overflow-y: auto;
}
.paneel.open { transform: none; }
.sluit {
  position: sticky; top: 10px; float: right; z-index: 2; margin: 10px 12px 0 0; width: 34px; height: 34px;
  border: 1.2px solid var(--pen); border-radius: var(--schets-rond); background: var(--karton);
  font-size: 21px; cursor: pointer; line-height: 1;
}
.sluit:hover { color: var(--accent); border-color: var(--accent); }
.paneel-inhoud { position: relative; padding: 48px 26px 60px; }
/* Ponsgaatje bovenin, zoals bij kaarten in een catalogusbak */
.paneel-inhoud::before {
  content: ""; position: absolute; top: 16px; left: 50%; width: 18px; height: 18px; margin-left: -9px;
  border-radius: 50%; background: var(--bg);
  box-shadow: inset 1px 2px 3px rgb(58 44 36 / .35), 0 0 0 1px rgb(58 44 36 / .18);
}
.kaart-kop { margin: 0 -26px 6px; padding: 0 26px 12px; border-bottom: 1.5px solid rgb(196 70 60 / .6); box-shadow: 0 3px 0 -1.5px rgb(196 70 60 / .35); background: var(--karton); }
.kicker { margin: 0; font-family: var(--typ); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--zacht); }
.paneel h2 { margin: 6px 0 0; font-family: var(--fell); font-size: 32px; font-weight: 400; line-height: 1.15; }
.paneel h3 {
  margin: 26px 0 8px; font-family: var(--typ); font-size: 13.5px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase;
  color: #4a3d33; border-bottom: 1px dashed rgb(58 44 36 / .35); padding-bottom: 3px;
}
.jaren { margin: 2px 0 0; font-size: 19px; color: var(--accent); }
.roepnaam { margin: 2px 0 0; font-style: italic; color: var(--zacht); }
dl.feiten { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 16px 0 0; }
dl.feiten dt { color: var(--zacht); font-family: var(--typ); font-size: 14px; padding-top: 2px; }
dl.feiten dd { margin: 0; }
.twijfel {
  position: relative; margin-top: 20px; padding: 14px 16px 12px; background: #f7e9bf; border-radius: 1px;
  transform: rotate(-.6deg); box-shadow: 1px 3px 6px rgb(60 40 20 / .14);
}
/* Plakbandje: het briefje met twijfels zit op de kaart geplakt */
.twijfel::before {
  content: ""; position: absolute; top: -8px; left: 50%; width: 70px; height: 16px; margin-left: -35px;
  background: rgb(240 232 210 / .75); border: 1px solid rgb(58 44 36 / .08); transform: rotate(2deg);
}
.twijfel h3 { margin: 0 0 4px; border: 0; padding: 0; color: #7a5a1c; }
.twijfel ul, .notities { margin: 0; padding-left: 18px; }
.persoon-link {
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--accent);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 3px; text-align: left;
}
.persoon-link:hover { text-decoration-color: var(--accent); }
.fam-lijst { list-style: none; margin: 0; padding: 0; }
.fam-lijst li { padding: 2px 0; }
.fam-lijst small, .zacht { color: var(--zacht); }
.gezin { margin-bottom: 12px; }
.gezin .fam-lijst { padding-left: 14px; border-left: 2px solid var(--lijn); margin-top: 4px; }
.bronnen { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.bron { display: block; text-decoration: none; color: inherit; font-size: 13px; line-height: 1.3; }
.bron-link {
  grid-column: 1 / -1; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 6px;
  font-size: 14px; color: var(--accent);
}
.bron-link:hover { border-color: var(--accent); }
.bron-tekst { margin: 0; color: var(--inkt); border-style: dashed; }
.bron-tekst:hover { border-color: var(--lijn); }
.bron img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; border: 1px solid var(--lijn); display: block; margin-bottom: 4px; }
.acties { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.acties.boven { margin: 14px 0 4px; }
.reactie .over { margin: 2px 0 0; font-size: 14px; color: var(--zacht); }
/* Menu rechts in de kopbalk */
.menu-houder { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 30; min-width: 190px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--papier); border: 1.3px solid var(--pen); border-radius: var(--schets);
  box-shadow: 2px 3px 0 rgb(58 44 36 / .18), 0 10px 30px rgb(60 40 20 / .14);
}
.menu[hidden] { display: none; }
.menu button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 0; background: none; padding: 8px 12px; border-radius: 6px; cursor: pointer;
  font-family: var(--fell); font-size: 17px; text-align: left; color: var(--pen);
}
.menu button:hover, .menu button:focus-visible { background: var(--bg); color: var(--accent); outline: none; }
.menu button[hidden] { display: none; }

.reactie { padding: 10px 0; border-bottom: 1px solid var(--lijn); }
.reactie p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reactie .meta { font-size: 14px; color: var(--zacht); display: flex; justify-content: space-between; gap: 8px; }
.reactie .meta button { border: 0; background: none; color: var(--zacht); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0 2px; }
.reactie .meta button.gevaar { color: #a3341f; font-weight: 600; }
.reactie-acties { font-size: 13px; white-space: nowrap; }
.reactie-form { display: grid; gap: 8px; margin-top: 12px; }
.reactie-form input, .reactie-form select, .reactie-form textarea, .lijst-filter {
  width: 100%; padding: 8px 10px; border: 1px solid var(--lijn); border-radius: 8px;
  background: #fff; font: inherit; font-size: 16px; color: var(--inkt);
}
.reactie-form textarea { min-height: 96px; resize: vertical; }
.reactie-form .knop { justify-self: start; background: var(--accent); color: #fff; border-color: var(--accent); }
.reactie-form .knop:hover { filter: brightness(1.1); color: #fff; }
.fout { color: #a3341f; font-size: 14px; }

.open-eind { padding: 8px 0; border-bottom: 1px dotted rgb(58 44 36 / .25); }
.open-eind p { margin: 0 0 4px; }
.open-eind dl.feiten { margin-top: 4px; }
.open-eind .notities { margin-top: 4px; }
.open-wie { font-weight: 600; }
.open-eind > .knop.klein { margin-top: 6px; padding: 3px 10px; font-size: 13.5px; }
.open-eind .reactie-form { margin-top: 6px; }
.open-eind summary { position: relative; cursor: pointer; list-style: none; }
.open-eind summary::-webkit-details-marker { display: none; }
.open-eind summary::before { content: '▸'; position: absolute; left: -1em; top: 1px; color: var(--zacht); transition: transform .15s; }
.open-eind[open] summary::before { transform: rotate(90deg); }
.open-eind summary:hover .open-wie { color: var(--accent); }
.open-eind summary .open-wie { display: block; }
.open-eind summary .open-wat { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--zacht); font-size: 15px; }
.open-eind[open] summary .open-wat { display: block; color: inherit; }
.open-eind[open] > :not(summary) { margin-top: 6px; }
details.open-eind { padding-left: 1em; }
details.twijfel summary { cursor: pointer; list-style: none; }
details.twijfel summary::-webkit-details-marker { display: none; }
details.twijfel summary h3 { display: inline; }
details.twijfel summary h3::after { content: ' ▸'; color: var(--zacht); }
details.twijfel[open] summary h3::after { content: ' ▾'; }
details.twijfel[open] summary { margin-bottom: 4px; }
.open-schakel { display: flex; flex-wrap: wrap; margin: 14px 0 4px; }
.open-schakel button { font-size: 15px; padding: 3px 10px; }
.lijst-groep { margin: 14px 0 4px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); }
.teller { font-size: 12px; background: var(--bg); border-radius: 999px; padding: 0 7px; margin-left: 6px; color: var(--zacht); }

@media (max-width: 760px) {
  .merk { display: none; }
  .balk { gap: 8px; padding: 10px 12px; }
  .podium { padding: calc(var(--kop) + 12px) 12px 12px; }
  .pad { top: calc(var(--kop) + 14px); left: 18px; max-width: calc(100% - 36px); }
  .tijdbalk { top: calc(var(--kop) + 14px); width: calc(100% - 36px); }
  .zoomknoppen { right: 22px; bottom: 22px; }
  .bewaar { right: 72px; bottom: 22px; width: 38px; height: 38px; padding: 0; border-radius: var(--schets-rond); }
  .schakel button { padding: 4px 9px; }
  .paneel {
    top: auto; width: 100%; height: 82vh;
    /* iOS: vh telt de werkbalk mee, waardoor de bovenkant (met ×) onder de kopbalk verdween */
    height: min(82dvh, calc(100dvh - var(--kop) - 24px)); border-left: 0; border-top: 1px solid var(--lijn);
    border-radius: 16px 16px 0 0; transform: translateY(105%);
  }
  .paneel-inhoud { padding: 44px 16px 60px; }
  .kaart-kop { margin: 0 -16px 6px; padding: 0 16px 12px; }
  .legenda { display: none; }
}

/* Foto's bij een persoon */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.fotos:not(:empty) { margin-bottom: 10px; }
.foto { display: block; padding: 0; border: 1px solid var(--lijn); border-radius: 4px; background: var(--papier); cursor: zoom-in; overflow: hidden; }
.foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.foto:hover { border-color: var(--accent); }
.foto-los { width: 120px; margin-top: 6px; }
.foto-form img { max-width: 100%; max-height: 220px; justify-self: start; border: 1px solid var(--lijn); border-radius: 4px; }
.foto-form .acties { margin-top: 0; }
.foto-toevoegen [hidden] { display: none; }
.lichtbak {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 56px 64px 24px;
  background: rgb(30 22 18 / .88);
}
.lichtbak figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; min-height: 0; }
.lichtbak img { max-width: 100%; max-height: calc(100dvh - 190px); object-fit: contain; background: var(--papier); padding: 8px; box-shadow: 0 10px 40px rgb(0 0 0 / .4); }
.lichtbak figcaption { width: min(640px, 100%); margin-top: 12px; color: #f4efe6; }
.lichtbak figcaption p { margin: 0 0 4px; font-size: 18px; white-space: pre-wrap; }
.lichtbak .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: #cfc3b5; }
.lichtbak .meta button { border: 0; background: none; color: #cfc3b5; cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0 2px; }
.lichtbak .meta button.gevaar { color: #ff9b84; font-weight: 600; }
.lichtbak .sluit { position: fixed; top: 14px; right: 16px; margin: 0; float: none; }
.blader {
  position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px;
  border: 1.2px solid var(--pen); border-radius: var(--schets-rond); background: var(--karton);
  font-size: 28px; line-height: 1; cursor: pointer;
}
.blader.vorige { left: 12px; }
.blader.volgende { right: 12px; }
@media (max-width: 760px) {
  .lichtbak { padding: 60px 12px 16px; }
  .blader { top: auto; bottom: 16px; transform: none; }
}
.portret {
  float: right; width: 88px; height: 108px; margin: 14px 0 8px 14px; padding: 5px 5px 14px;
  background: #fff; border: 1px solid var(--lijn); box-shadow: 1px 2px 6px rgb(60 40 20 / .18);
  transform: rotate(2deg); cursor: zoom-in;
}
.portret[hidden] { display: none; }
.portret img { display: block; width: 100%; height: 100%; object-fit: cover; }
.portret:hover { border-color: var(--accent); }
.kaart-kop::after { content: ""; display: block; clear: both; }
.portret-label { font-style: italic; }

/* PDF maken */
.pdf-form fieldset { border: 0; padding: 0; margin: 18px 0 0; }
.pdf-form legend { font-family: var(--typ); font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; color: #4a3d33; margin-bottom: 6px; }
.pdf-tak, .pdf-optie { display: flex; align-items: center; gap: 9px; padding: 3px 0; cursor: pointer; }
.pdf-stip { width: 13px; height: 13px; border-radius: 50%; flex: none; }
.pdf-knop { background: var(--accent); color: #fff; border-color: var(--accent); }
.pdf-knop:disabled { opacity: .6; cursor: wait; }