/* Familiearchief Klerks & Persoon — "Het groene kabinet".
   Cream + diepgroen editorial palet; Newsreader (serif) + Instrument Sans (sans),
   zelf-gehost (geen externe requests). */

/* Zelf-gehoste fonts (latin subset). */
@font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('vendor/fonts/newsreader-italic-400.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:500;font-display:swap;src:url('vendor/fonts/newsreader-italic-500.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/newsreader-400.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('vendor/fonts/newsreader-500.woff2') format('woff2');}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/newsreader-600.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('vendor/fonts/instrumentsans-400.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('vendor/fonts/instrumentsans-500.woff2') format('woff2');}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('vendor/fonts/instrumentsans-600.woff2') format('woff2');}

:root {
  /* Kernpalet */
  --groen-900: #31402D;   /* banden, kop, voet, actieve states */
  --groen-700: #44573F;   /* accenten, kickers, links */
  --goud-700:  #8A6D3B;   /* accent lijn Persoon */
  --cream-50:  #FBF9F3;   --cream-100: #F6F2E9;   --cream-200: #EFEADC;   --cream-300: #EEE8D8;
  --groen-chip: #E7EBDF;  --goud-chip: #F0E6D6;
  --ink-900: #2A2721;     --ink-700: #55503F;     --ink-500: #7A7466;     --ink-400: #A39C8B;
  --lijn-300: #C9C2B2;    --lijn-200: #DBD4C3;    --lijn-100: #E7E1D2;
  --op-groen: #C9CFBE;    --op-groen-subtiel: #A9B49E;   /* tekst op groen */
  /* Compat-aliassen: bestaande componenten kleuren automatisch mee. */
  --ink: var(--ink-900);  --muted: var(--ink-500);  --zacht-muted: var(--ink-400);
  --bg: var(--cream-100); --surface: var(--cream-50);
  --line: var(--lijn-100); --line-zacht: var(--lijn-200);
  --accent: var(--groen-700); --accent-diep: var(--groen-900);
  --accent-zacht: var(--groen-chip); --accent-rand: var(--lijn-300);
  --klei: var(--goud-700);   --klei-zacht: var(--goud-chip);
  --goud: var(--goud-700);   --goud-zacht: var(--goud-chip);
  --terracotta: var(--goud-700); --terracotta-zacht: var(--goud-chip);
  --teal: var(--groen-700);  --teal-zacht: var(--groen-chip);
  --schaduw: 0 4px 14px rgba(60,50,30,.10), 0 1px 2px rgba(60,50,30,.06);
  --schaduw-hover: 0 8px 24px rgba(60,50,30,.14);
  --schaduw-groen: 0 10px 28px rgba(0,0,0,.35);
  --radius: 0;            --radius-s: 0;          /* bewust hoekig */
  --radius-foto: 10px;    --radius-pill: 99px;
  --sans: 'Instrument Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: 'Newsreader', "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-diep); }
img { max-width: 100%; }

/* ---------- Kop / navigatie (Groene kabinet) ---------- */
.kop { background: var(--groen-900); color: var(--cream-200);
  position: sticky; top: 0; z-index: 20; transition: transform .28s ease; }
.kop.verborgen { transform: translateY(-100%); }
.kop-binnen { max-width: 77.5rem; margin: 0 auto; padding: 22px 40px 0; }
.kop-boven { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.merk { display: flex; align-items: center; gap: .7rem; color: var(--cream-200); }
.merk-wapen { height: 48px; width: auto; flex: none; display: block; }
.merk:hover { color: #fff; }
.merk-naam { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: .01em; }
.merk-label { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .18em;
  color: var(--op-groen-subtiel); }
.kop-acties { display: flex; align-items: center; gap: 12px; }
.inlog-pill { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--sans); font-size: 13px;
  color: var(--cream-200); border: 1px solid rgba(239,234,220,.4); border-radius: var(--radius-pill); padding: 6px 16px; }
.inlog-pill:hover { background: rgba(239,234,220,.12); color: #fff; }
.inlog-pill .ico { width: .95em; height: .95em; }
.taalwissel { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 12px; font-weight: 600;
  border: 1px solid rgba(239,234,220,.4); border-radius: var(--radius-pill); overflow: hidden; }
.taalwissel a { color: var(--op-groen); padding: 5px 11px; letter-spacing: .03em; }
.taalwissel a:hover { color: #fff; }
.taalwissel a.actief { background: var(--cream-200); color: var(--groen-900); }
.hamburger { display: none; background: none; border: none; color: var(--cream-200); cursor: pointer; padding: 2px; }
.hamburger svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.menu-sluit { display: none; }   /* alleen zichtbaar als het mobiele menu open is */
.kop-menu { display: flex; align-items: center; gap: 36px; margin-top: 20px;
  padding: 15px 0 17px; border-top: 1px solid rgba(239,234,220,.14); }
.kop-menu a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px;
  color: var(--op-groen); }
.kop-menu a:hover { color: var(--cream-200); }
.kop-menu a .ico { width: 17px; height: 17px; opacity: .72; stroke-width: 1.7; }
.kop-menu .kop-menu-login { display: none; }
@media (max-width: 900px) {
  .kop-binnen { padding: 14px 20px; }
  .merk-naam { font-size: 20px; white-space: nowrap; }
  .merk-wapen { height: 38px; }
  .merk-label { display: none; }        /* op mobiel geen 'FAMILIEARCHIEF'-label */
  .inlog-pill { display: none; }         /* login/uitloggen zit in het hamburgermenu */
  .hamburger { display: inline-flex; }
  .kop-menu { position: fixed; inset: 0; z-index: 30; flex-direction: column; align-items: stretch;
    gap: 0; margin: 0; padding: 0; background: var(--groen-900); overflow-y: auto;
    transform: translateX(100%); transition: transform .22s ease; visibility: hidden; }
  .kop.menu-open .kop-menu { transform: none; visibility: visible; }
  .kop-menu::before { content: attr(data-titel); display: flex; align-items: center; min-height: 50px;
    padding: 0 20px; font-family: var(--serif); font-size: 18px; color: var(--cream-200);
    border-bottom: 1px solid rgba(239,234,220,.14); }
  .kop-menu a { justify-content: flex-start; padding: 12px 20px; font-family: var(--serif); font-size: 18px;
    color: var(--cream-200); border-bottom: 1px solid rgba(239,234,220,.1); }
  .kop-menu a .ico { width: 18px; height: 18px; opacity: .8; }
  .kop-menu .kop-menu-login { display: inline-flex; margin-top: 0; }
  .menu-sluit { position: fixed; top: 14px; right: 18px; z-index: 31; display: none; background: none;
    border: none; color: var(--cream-200); font-size: 30px; line-height: 1; cursor: pointer; }
  .kop.menu-open .menu-sluit { display: block; }
  body.menu-op { overflow: hidden; }
}
.ico { width: 1.05em; height: 1.05em; stroke: currentColor; fill: none; stroke-width: 1.9;
       stroke-linecap: round; stroke-linejoin: round; flex: none; }
/* Echt (gevuld) hartje als PNG i.p.v. lijntekening */
.hart-png { width: 1.05em; height: 1.05em; object-fit: contain; vertical-align: -.14em; flex: none; }
h2 .hart-png { width: 1em; height: 1em; }
.hart-avatar { background: var(--groen-chip); border-color: transparent; }
.paar-plus.groot { font-size: 1.6rem; color: var(--groen-700); font-weight: 400; }

/* ---------- Layout ---------- */
main { max-width: 77.5rem; margin: 0 auto; padding: 2.4rem 40px 1rem; }
main.smal { max-width: 60rem; }
/* Homepage: volle breedte zodat de gekleurde banden edge-to-edge lopen. */
main.vol { max-width: none; margin: 0; padding: 0; }
.band { width: 100%; }
.band-in { max-width: 77.5rem; margin: 0 auto; padding: 56px 40px; }
@media (max-width: 700px) { .band-in { padding: 40px 20px; } }
.terug { color: var(--muted); font-weight: 600; font-size: .9rem;
         display: inline-flex; align-items: center; gap: .35rem; margin-bottom: 1rem; }
.terug:hover { color: var(--accent); }

h1 { font-family: var(--serif); font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem); line-height: 1.08;
     letter-spacing: -.005em; font-weight: 400; margin: 0 0 .3rem; }
h2 { font-family: var(--serif); font-size: 1.55rem; font-weight: 500; letter-spacing: 0;
     margin: 2rem 0 .8rem; display: flex; align-items: center; gap: .5rem; }
h2 .ico { color: var(--groen-700); }

/* Gedeelde paginakop (kicker + grote serif H1 + intro) */
.pagina-kop { margin-bottom: 2.2rem; }
.pagina-kop .kicker { margin-bottom: 12px; }
.pagina-kop h1 { margin: 0 0 .4rem; }
.pagina-kop .intro { font-family: var(--serif); font-size: 20px; line-height: 1.5;
     color: var(--ink-700); max-width: 44rem; margin: 0; }
.pagina-kop.midden { text-align: center; }
.pagina-kop.midden .intro { margin-left: auto; margin-right: auto; }
/* Sectiekoppen elk een eigen aardse tint, voor rustige variatie op binnenpagina's.
   (stamlijn/foto/register blijven salie; onder .tak volgen ze de tak-kleur.) */
h2 .ico-kalender { color: var(--goud); }
h2 .ico-gezin, h2 .ico-personen { color: var(--teal); }
h2 .ico-boek { color: var(--terracotta); }
h2 .ico-document, h2 .ico-scan, h2 .ico-boom { color: var(--klei); }
h2 .ico-kaart { color: var(--teal); }

/* ---------- Levensverhaal + horizontale levenslijn ---------- */
.levensverhaal { font-size: 1.1rem; line-height: 1.7; color: var(--ink); max-width: 46rem;
  margin: 1.3rem 0 .2rem; }
.levenslijn-wrap { position: relative; }
.levenslijn { display: flex; overflow-x: auto; padding: 1.5rem 0 .6rem;
  scrollbar-width: none; -ms-overflow-style: none; }
.levenslijn::-webkit-scrollbar { display: none; }
.levenslijn.scrollbaar { cursor: grab; }
.levenslijn.sleept { cursor: grabbing; user-select: none; }
/* Pijltjes aan de uiteinden van de horizontale tijdlijn. */
.levenslijn-pijl { position: absolute; top: 2.2rem; transform: translateY(-50%);
  z-index: 3; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--accent-rand); background: rgba(251,250,244,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--accent-diep); font: 700 1.5rem/1 var(--serif); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding-bottom: .2rem;
  box-shadow: 0 2px 10px rgba(44,46,38,.12); transition: background .15s, box-shadow .15s; }
.levenslijn-pijl:hover { background: var(--surface); box-shadow: 0 3px 14px rgba(44,46,38,.18); }
.levenslijn-pijl.links { left: -.4rem; }
.levenslijn-pijl.rechts { right: -.4rem; }
.levenslijn-pijl[hidden] { display: none; }
.moment { flex: 1 0 145px; min-width: 145px; position: relative; padding: 1.8rem .55rem 0; text-align: center; }
.moment::before { content: ""; position: absolute; top: 10px; left: 0; right: 0; height: 2px; background: var(--accent-rand); }
.moment::after { content: ""; position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
  width: 15px; height: 15px; border-radius: 50%; background: var(--accent);
  border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--accent-rand); }
.moment:first-child::before { left: 50%; }
.moment:last-child::before { right: 50%; }
.moment-jaar { display: block; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.moment-wat { display: block; font-weight: 600; font-size: .92rem; }
.moment-detail { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; margin-top: .12rem; }
.moment.huwelijk::after   { background: var(--terracotta); box-shadow: 0 0 0 2px var(--terracotta-zacht); }
.moment.kind::after       { background: var(--teal);       box-shadow: 0 0 0 2px var(--teal-zacht); }
.moment.mijlpaal::after   { background: var(--goud);       box-shadow: 0 0 0 2px var(--goud-zacht); }
.moment.overlijden::after { background: var(--ink);        box-shadow: 0 0 0 2px var(--line); }
@media (max-width: 700px) {
  .levenslijn { flex-direction: column; overflow-x: visible; padding: .6rem 0; }
  .moment { flex: none; min-width: 0; text-align: left; padding: .15rem 0 1.1rem 2rem; }
  .moment::before { top: 0; bottom: 0; left: 9px; right: auto; width: 2px; height: auto; }
  .moment:first-child::before { top: 11px; left: 9px; }
  .moment:last-child::before { left: 9px; right: auto; bottom: auto; height: 12px; }
  .moment::after { top: 4px; left: 10px; transform: translateX(-50%); }
  .moment-jaar { display: inline-block; margin-right: .5rem; }
  .moment-wat { display: inline; }
  .levenslijn-pijl { display: none; }
  .levenslijn.scrollbaar { cursor: default; }
}
/* ---------- Verhalende geschiedenis-pagina ---------- */
.geschiedenis { max-width: 760px; margin: 0 auto; }
.sier-krul { display: flex; justify-content: center; margin: 2.6rem 0 1rem; color: var(--goud-700); }
.sier-krul svg { width: 220px; height: auto; }
.geschiedenis .wapen { display: block; margin: .5rem auto 1.2rem; width: 280px; max-width: 62%; height: auto; }
.geschiedenis .gesch-kicker { display: block; text-align: center; margin-bottom: 14px; }
.geschiedenis h1 { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.geschiedenis h2 { margin: 2.6rem 0 .6rem; font-size: 30px; }
.geschiedenis p { font-family: var(--serif); font-size: 20px; line-height: 1.65; color: var(--ink-700); }
.geschiedenis a { color: var(--groen-700); text-decoration: underline;
  text-decoration-color: #B9C2AE; text-underline-offset: 2px; }
.geschiedenis a:hover { color: var(--groen-900); text-decoration-color: var(--groen-700); }
.geschiedenis .inleiding { font-family: var(--serif); font-style: italic; color: var(--ink-700);
  font-size: 21px; line-height: 1.6; text-align: center; max-width: 640px; margin: 1.2rem auto 0;
  padding-bottom: 2.2rem; border-bottom: 1px solid var(--lijn-200); }
/* "Uit het register": naam-evolutie-blok in de geschiedenis (groene band, crème vakjes). */
.naam-register-blok { background: var(--groen-900); color: var(--cream-200); padding: 38px 40px; margin: 2.6rem 0; }
.naam-register-blok .naam-kicker { display: block; color: var(--op-groen-subtiel); margin-bottom: 12px; }
.naam-titel { font-family: var(--serif); font-weight: 500; font-size: 30px; color: var(--cream-200);
  margin: 0 0 14px; display: block; text-align: left; }
.naam-titel em { font-style: italic; }
/* Scoped, zodat '.geschiedenis p' (donkere tekst) de lichte ondertitel niet overschrijft. */
.geschiedenis .naam-uitleg { font-family: var(--serif); font-size: 18px; line-height: 1.5;
  color: var(--op-groen); margin: 0 0 26px; max-width: 42rem; }
.naam-reeks { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.naam-vak { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--cream-200); color: var(--groen-900); padding: 12px 16px; min-width: 82px; }
.naam-spelling { font-family: var(--serif); font-weight: 600; font-size: 19px; }
.naam-jaar { font-family: var(--sans); font-size: 13px; color: var(--goud-700); }
.reeks-pijl { color: var(--op-groen-subtiel); font-size: 17px; flex: none; align-self: center; }
@media (max-width: 560px) {
  .naam-register-blok { padding: 28px 22px; }
  .naam-titel { font-size: 26px; }
  /* Op mobiel niet lelijk afbreken: één rij die horizontaal schuift, gelijke vakjes. */
  .naam-reeks { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; margin: 0 -22px;
    padding-left: 22px; padding-right: 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .naam-reeks::-webkit-scrollbar { display: none; }
  .naam-vak { min-width: 76px; flex: none; }
  .reeks-pijl { flex: none; }
}

.geschiedenis .slot { font-family: var(--serif); font-style: italic; color: var(--ink-500);
  font-size: 21px; line-height: 1.6; text-align: center; max-width: 38rem; margin: 2.2rem auto;
  padding-top: 1.4rem; border-top: 1px solid var(--lijn-200); }
.geschiedenis .verhaalfoto { margin: 1.9rem 0; }
.geschiedenis .verhaalfoto a { display: block; position: relative; }
.geschiedenis .verhaalfoto img { display: block; width: 100%; height: auto; cursor: zoom-in;
  border-radius: 10px; box-shadow: 0 3px 16px rgba(44,46,38,.16); }
.geschiedenis .verhaalfoto figcaption { margin-top: .55rem; font-size: .92rem; font-style: italic;
  color: var(--muted); text-align: center; }
.geschiedenis .verhaalfoto figcaption .cred { font-style: normal; color: var(--zacht-muted); }
.geschiedenis .verhaalfoto.duo { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.geschiedenis .verhaalfoto.duo a { flex: 1 1 45%; }
.geschiedenis .verhaalfoto.duo figcaption { flex-basis: 100%; margin-top: .35rem; }
@media (max-width: 480px) { .geschiedenis .verhaalfoto.duo a { flex-basis: 100%; } }
/* Compacte verhaalfoto: halve breedte, gecentreerd (voor hoge/lange foto's). */
.geschiedenis .verhaalfoto.klein a { max-width: 50%; margin-inline: auto; }
.geschiedenis .verhaalfoto.klein figcaption { text-align: center; }
@media (max-width: 560px) { .geschiedenis .verhaalfoto.klein a { max-width: 75%; } }
/* Duo met even hoge foto's: de breedte schaalt mee met de verhouding, zodat de
   hoogte gelijk wordt (zonder bijsnijden). flex-grow per foto = breedte/hoogte. */
.geschiedenis .verhaalfoto.duo.gelijk { align-items: flex-start; }
.geschiedenis .verhaalfoto.duo.gelijk a { flex-basis: 0; }
/* Vast kader (verhouding per foto via inline aspect-ratio) zodat de z/w- en
   kleurversie exact dezelfde ruimte innemen en het wisselen niet verspringt. */
.geschiedenis .verhaalfoto.duo.gelijk img { object-fit: cover; height: auto; }
@media (max-width: 480px) { .geschiedenis .verhaalfoto.duo.gelijk a { flex-basis: 100%; } }

.dun { color: var(--muted); font-weight: 400; }
.ondertitel { font-family: var(--serif); color: var(--ink-700); font-size: 20px; line-height: 1.5;
  margin: 0 0 1.8rem; max-width: 44rem; }

/* ================= Homepage (Groene kabinet) ================= */
.kicker { display: inline-block; font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; }
.kicker.op-groen { color: var(--op-groen-subtiel); }
.kicker.groen { color: var(--groen-700); }

/* Hero */
.hero-band { background: var(--groen-900); color: var(--cream-200); }
.hero-band .band-in { padding-top: 60px; padding-bottom: 64px; }
.hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: 72px; align-items: center; }
.hero-tekst .kicker { margin-bottom: 16px; }
.hero-titel { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 1.4rem + 3vw, 3.5rem);
  line-height: 1.06; letter-spacing: -.005em; color: var(--cream-200); margin: 0 0 18px; }
.hero-titel .cursief { font-style: italic; display: block; }
.hero-intro { font-family: var(--serif); font-size: 20px; line-height: 1.55; color: var(--op-groen);
  max-width: 34rem; margin: 0 0 28px; }
.hero-knoppen { display: flex; gap: 14px; flex-wrap: wrap; }
.knop-primair, .knop-secundair { font-family: var(--sans); font-size: 14px; font-weight: 500;
  padding: 13px 24px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.knop-primair { background: var(--cream-200); color: var(--groen-900); }
.knop-primair:hover { background: #fff; color: var(--groen-900); }
.knop-secundair { border: 1px solid rgba(239, 234, 220, .4); color: var(--cream-200); }
.knop-secundair:hover { background: rgba(239, 234, 220, .1); color: #fff; }
.hero-portret { margin: 0; }
.hero-portret .passe-partout { background: var(--cream-200); padding: 14px;
  border: 1px solid rgba(42, 39, 33, .35); box-shadow: var(--schaduw-groen); }
.hero-portret .passe-partout img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover;
  border: 1px solid var(--lijn-300); }
.hero-portret figcaption { font-family: var(--serif); font-style: italic; font-size: 15px;
  color: var(--op-groen-subtiel); margin-top: 12px; text-align: center; }

/* Cream banden */
.band-cream { background: var(--cream-100); }
.band-strak { padding-top: 0; }
.band-strak .band-in { padding-top: 0; }

/* Geschiedenis + Op deze dag */
.gesch-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 64px; align-items: start; }
.gesch-blok { display: grid; grid-template-columns: 170px 1fr; gap: 44px; align-items: center; }
.gesch-wapen { width: 170px; height: auto; }
.sectiekop { font-family: var(--serif); font-weight: 500; font-size: 30px; color: var(--ink-900);
  margin: 0 0 14px; display: block; }
.gesch-tekst p { font-family: var(--serif); font-size: 21px; line-height: 1.55; color: var(--ink-700);
  margin: 0 0 18px; max-width: 36rem; }
.tekstlink { font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--groen-700);
  text-decoration: underline; text-underline-offset: 4px; display: inline-flex; gap: .35rem; align-items: center; }
.tekstlink span { transition: transform .15s ease; }
.tekstlink:hover { color: var(--groen-900); }
.tekstlink:hover span { transform: translateX(3px); }
.opdezedag { border-left: 1px solid var(--lijn-200); padding-left: 40px; }
.odd-kop { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .2rem; flex-wrap: wrap; }
.odd-datum { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--ink-400); }
.odd-lijst { list-style: none; margin: 14px 0 0; padding: 0; }
.odd-lijst li { display: grid; grid-template-columns: 52px 1fr; gap: .4rem; padding: 14px 0;
  border-top: 1px solid var(--lijn-100); }
.odd-jaar { font-family: var(--sans); font-weight: 500; font-size: 19px; color: var(--groen-700); }
.odd-mid { display: flex; flex-direction: column; gap: 2px; }
.odd-mid a { font-family: var(--serif); font-size: 19px; color: var(--ink-700);
  text-decoration: underline; text-decoration-color: var(--lijn-300); text-underline-offset: 3px; }
.odd-mid a:hover { color: var(--groen-700); }
.odd-wat { font-family: var(--sans); font-size: 13px; color: var(--ink-500); }

/* Verder kijken */
.verder-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.verder-kaart { background: var(--cream-300); padding: 22px 20px; display: flex; flex-direction: column;
  gap: 8px; color: var(--ink-900); transition: background .15s ease, color .15s ease; }
.verder-kaart:hover { background: var(--groen-900); color: var(--cream-200); }
.verder-titel { font-family: var(--serif); font-weight: 500; font-size: 21px; }
.verder-uitleg { font-family: var(--sans); font-size: 13px; opacity: .75; line-height: 1.45; }

/* Bandkop (foto's / documenten) */
.band-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: 22px; flex-wrap: wrap; }
.band-kop h2 { font-family: var(--serif); font-weight: 500; font-size: 28px; margin: 0; display: block; }
.band-link { font-family: var(--sans); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.band-link-donker { color: var(--groen-700); }
.fotoband .band-kop h2 { color: var(--cream-200); }
.fotoband .band-link { color: var(--op-groen-subtiel); }
.fotoband .band-link:hover { color: var(--cream-200); }

/* Fotoband + mozaïek (in kleur) */
.fotoband { background: var(--groen-900); }
.fotoband .band-in { padding-top: 48px; padding-bottom: 48px; }
.foto-mozaiek { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px;
  gap: 10px; grid-auto-flow: dense; }
.mozaiek-tegel { display: block; overflow: hidden; border-radius: var(--radius-foto); }
.mozaiek-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s ease; }
.mozaiek-tegel:hover img { opacity: .85; }
.m-breed { grid-column: span 2; }
.m-hoog { grid-row: span 2; }
.m-groot { grid-column: span 2; grid-row: span 2; }

/* Documentenplank */
.doc-plank { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.doc-plank-item { display: block; border: 1px solid var(--lijn-200); background: var(--cream-50); }
.doc-plank-item img { display: block; width: auto; object-fit: cover; }

/* Statistiek-kaarten (behouden voor andere pagina's) */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 1.4rem 0; }
.stat { background: var(--surface); border: 1px solid var(--line); padding: 1.1rem 1.2rem; box-shadow: var(--schaduw); }
.stat .getal { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.stat .label { color: var(--muted); font-size: .85rem; margin-top: .35rem; display: flex; align-items: center; gap: .4rem; }
.stat .label .ico { color: var(--accent); }
h2 a.titel-link { color: inherit; text-decoration: none; }
h2 a.titel-link:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-portret { max-width: 280px; }
  .gesch-grid { grid-template-columns: 1fr; gap: 40px; }
  .opdezedag { border-left: none; border-top: 1px solid var(--lijn-200); padding-left: 0; padding-top: 32px; }
  .verder-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .gesch-blok { grid-template-columns: 1fr; gap: 24px; }
  .gesch-wapen { width: 120px; }
  .verder-grid { grid-template-columns: 1fr; }
  .foto-mozaiek { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; }
}

/* ---------- Fotogalerij (startpagina) ---------- */
.galerij { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.galerij-tegel { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-foto);
  overflow: hidden; border: 1px solid var(--line); box-shadow: var(--schaduw);
  transition: transform .12s ease, box-shadow .12s ease; }
.galerij-tegel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hover); }
.galerij-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Documenttegels: lichte papierachtergrond + bovenkant van de akte in beeld. */
.galerij-tegel.doc { background: #fbfaf6; }
.galerij-tegel.doc img { object-position: top center; }
.galerij-bij { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .5rem .35rem;
  font-size: .72rem; color: #fff; line-height: 1.2;
  background: linear-gradient(transparent, rgba(10, 14, 20, .82));
  opacity: 0; transition: opacity .15s ease; }
.galerij-tegel:hover .galerij-bij { opacity: 1; }

/* ---------- Overzicht (foto's / documenten): tabs, tijdlijn, lijst ---------- */
/* Paginakop met weergave-schakelaar rechts (foto's / documenten) */
.overzicht-kop { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.overzicht-kop .pagina-kop { margin-bottom: 0; }
.overzicht-tabs { display: inline-flex; gap: 0; margin: 0; border: 1px solid var(--lijn-300); flex: none; }
.ov-tab { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--sans);
  font-weight: 500; font-size: .9rem; color: var(--ink-500); background: transparent;
  border: none; border-radius: 0; padding: .55rem 1rem; cursor: pointer; }
.ov-tab + .ov-tab { border-left: 1px solid var(--lijn-300); }
.ov-tab:hover { color: var(--ink-900); }
.ov-tab.actief { background: var(--groen-900); color: var(--cream-200); }
.ov-tab .ico { width: 1em; height: 1em; }

.ov-view.tijdlijn { position: relative; padding-left: 1.8rem; border-left: 1px solid var(--lijn-300);
  margin-left: .4rem; }
.tl-jaar { position: relative; display: grid; grid-template-columns: 120px 1fr; gap: 2.6rem;
  align-items: start; margin-bottom: 2.2rem; }
.tl-label { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; color: var(--groen-700);
  font-size: 2rem; line-height: 1; margin: 0; }
.tl-aantal { font-family: var(--sans); font-size: 13px; color: var(--ink-400); margin-top: .35rem; }
.tl-label::before { content: ""; position: absolute; left: calc(-1.8rem - 6px); top: .3em;
  width: 11px; height: 11px; border-radius: 50%; background: var(--groen-700);
  border: 2px solid var(--cream-100); box-shadow: 0 0 0 1px var(--lijn-300); }
.tl-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
@media (max-width: 600px) {
  .tl-jaar { grid-template-columns: 1fr; gap: .6rem; }
  .tl-kop { display: flex; align-items: baseline; gap: .6rem; }
  .tl-label { font-size: 1.6rem; }
  .tl-aantal { margin-top: 0; }
}
/* Document-tijdlijn: kleine thumbnails, met de transcriptie-knop eronder.
   Bij het openen wordt het vakje breder, zodat de tekst goed leesbaar is. */
.tl-grid-doc { display: flex; flex-wrap: wrap; gap: 1rem; }
.tl-doc { display: flex; flex-direction: column; gap: .5rem; width: 170px; }
.tl-doc .galerij-tegel { width: 170px; }
.tl-doc-titel { margin: 0; font-size: .84rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.tl-doc:has(.tl-transcriptie[open]) { width: min(680px, 100%); }
.tl-transcriptie summary { font-size: .82rem; font-weight: 600; }

.ov-lijst { display: flex; flex-direction: column; gap: .6rem; }
.ov-rij { display: flex; gap: 1rem; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schaduw);
  padding: .6rem .8rem; }
.ov-lijst { gap: 0; }
.ov-rij { border-radius: 0; border: none; box-shadow: none; border-bottom: 1px solid var(--lijn-100);
  background: transparent; padding: 18px 0; gap: 24px; }
.ov-rij:hover { background: #F3EEE1; }
.ov-thumb { flex: none; display: block; width: 88px; height: 88px; border-radius: var(--radius-foto);
  overflow: hidden; border: 1px solid var(--line); }
.ov-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.ov-titel { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 .2rem; }
.ov-meta { color: var(--ink-500); font-size: 14px; margin: 0; }
.ov-meta a { color: var(--groen-700); }

/* ---------- Chips / badges ---------- */
.chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 600;
        background: var(--line-zacht); color: var(--muted); padding: .2rem .6rem; border-radius: 999px;
        font-variant-numeric: tabular-nums; white-space: nowrap; }
.chip.accent { background: var(--accent-zacht); color: var(--accent-diep); }
.chip.stamlijn { background: var(--accent-zacht); color: var(--accent-diep); }

/* ---------- Persoonskop ---------- */
.persoon-kop { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.avatar { width: 64px; height: 64px; border-radius: 18px; flex: none; display: grid; place-items: center;
          background: var(--accent-zacht); color: var(--accent-diep); font-weight: 800; font-size: 1.5rem;
          letter-spacing: -.02em; border: 1px solid var(--accent-rand); }
.persoon-kop .rij { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
.avatar.foto { padding: 0; overflow: hidden; background: var(--line-zacht); }
.avatar.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Pasfoto in de kop van de persoonspagina groter tonen. */
.persoon-kop .avatar.foto { width: 108px; height: 108px; border-radius: 26px; }
@media (max-width: 700px) { .persoon-kop .avatar.foto { width: 88px; height: 88px; border-radius: 22px; } }

/* Fotogalerij op de persoonspagina */
.fotos { display: flex; flex-wrap: wrap; gap: 1rem; }
.fotos figure.foto { margin: 0; width: 160px; }
.fotos figure.foto a { display: block; border-radius: var(--radius-s); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--schaduw); line-height: 0;
  transition: transform .12s ease, box-shadow .12s ease; }
.fotos figure.foto a:hover { transform: scale(1.02); box-shadow: var(--schaduw-hover); }
.fotos figure.foto img { width: 100%; height: 200px; object-fit: cover; display: block; cursor: zoom-in; }
.fotos figcaption { color: var(--muted); font-size: .82rem; margin-top: .45rem; }
/* Foto met een toelichting: iets breder vakje + notitie eronder. */
.fotos figure.heeft-toelichting { width: 340px; }
.foto-toelichting { display: flex; gap: .4rem; margin: .45rem 0 0; font-size: .82rem;
  line-height: 1.45; color: var(--ink); background: var(--accent-zacht);
  border: 1px solid var(--accent-rand); border-radius: var(--radius-s); padding: .5rem .6rem; }
.foto-toelichting .ico { color: var(--accent); flex: none; margin-top: .15rem; }
.foto-toelichting-tekst { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.foto-toelichting-tekst p { margin: 0; }

/* ---------- Kaarten & feiten ---------- */
.kaart { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
         padding: 1.1rem 1.3rem; box-shadow: var(--schaduw); margin: .8rem 0; }
dl.feiten { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.4rem; margin: 0; }
dl.feiten dt { color: var(--muted); font-size: .92rem; }
dl.feiten dd { margin: 0; }
.afgeschermd { background: var(--accent-zacht); border: 1px solid var(--accent-rand);
               padding: 1.1rem 1.3rem; border-radius: var(--radius); color: #5c5e4f;
               display: flex; gap: .8rem; align-items: flex-start; }
.afgeschermd .ico { color: var(--accent); width: 22px; height: 22px; margin-top: .1rem; }

/* ---------- Tijdlijn (levensloop & stamlijn) ---------- */
.tijdlijn { list-style: none; margin: .4rem 0; padding: 0 0 0 1.4rem;
            border-left: 2px solid var(--line); }
.tijdlijn li { position: relative; padding: .15rem 0 1rem; }
.tijdlijn li:last-child { padding-bottom: 0; }
.tijdlijn li::before { content: ""; position: absolute; left: -1.4rem; top: .5rem;
  transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--accent); }
.tijdlijn .wat { font-weight: 600; }
.tijdlijn .detail { color: var(--muted); }

/* Stamlijn: nodes als kaarten op een lijn */
.stamlijn { list-style: none; margin: 1rem 0; padding: 0 0 0 1.6rem;
            border-left: 2px solid var(--line); }
.stamlijn li { position: relative; margin-bottom: 1rem; }
.stamlijn li::before { content: ""; position: absolute; left: -1.6rem; top: 1.15rem;
  transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 0 0 2px var(--accent-rand); }
.stamlijn .node { display: flex; align-items: center; gap: .9rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1.1rem;
  box-shadow: var(--schaduw); color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.stamlijn .node:hover { transform: translateX(3px); box-shadow: var(--schaduw-hover); border-color: var(--accent-rand); }
.stamlijn .naam { font-weight: 700; }
.stamlijn a.stamnaam { color: var(--ink); text-decoration: none; }
.stamlijn a.stamnaam:hover { color: var(--accent-diep); text-decoration: underline; }
.stamlijn .jaren { color: var(--muted); font-variant-numeric: tabular-nums; }
.stamlijn .gen { margin-left: auto; }

/* Uitklapbare node (partner + kinderen) */
.stamnode > summary { list-style: none; cursor: pointer; }
.stamnode > summary::-webkit-details-marker { display: none; }
.stamnode > summary .chev { margin-left: .4rem; color: var(--zacht-muted); transition: transform .18s ease; }
.stamnode[open] > summary .chev { transform: rotate(180deg); }
.stamnode[open] > summary .node { border-color: var(--accent-rand); }
.uitklap { margin: .5rem 0 0 .6rem; padding: .9rem 1.1rem; background: var(--line-zacht);
  border: 1px solid var(--line); border-radius: var(--radius-s); }
.uitklap .gezin-blok + .gezin-blok { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.uitklap .partner { font-weight: 600; margin: 0 0 .2rem; }
.uitklap .kop-klein { font-weight: 600; font-size: .85rem; color: var(--muted); margin: .6rem 0 .2rem; }
.uitklap .paginalink { margin: .7rem 0 0; }
.zet-voort { color: var(--accent-diep); font-size: .78rem; font-weight: 600; }
/* Stamlijnkind: alleen een sterretje + vette naam (geen label) */
.stamkind { font-weight: 700; }
.stamkind .jaren { font-weight: 400; }
.ster-merk { color: var(--accent-diep); margin-right: .2rem; }
.ster-merk .ico { fill: currentColor; stroke: none; vertical-align: -.12em; }

/* Mini-avatar (portret of initialen) bij partner en kinderen in de uitklap */
.avatar.mini { flex: none; }
.met-avatar { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.met-avatar:hover span { text-decoration: underline; }
.uitklap .partner { display: flex; align-items: center; gap: .4rem; }
.uitklap .kinderen li { align-items: center; }

/* Twee stamlijnen naast elkaar (desktop), elk met eigen identiteitskleur.
   Door de accent-variabelen per tak te herdefiniëren kleuren avatars, stippen,
   de lijn, chips en links automatisch mee. */
.stamlijnen-naast { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem 2.5rem; align-items: start; }
.tak > h2 { margin-top: .3rem; color: var(--accent-diep);
  border-bottom-color: var(--accent-rand); }
.tak .stamlijn { border-left-color: var(--accent-rand); }
.tak-klerks {
  --accent: #44573F; --accent-diep: #31402D; --accent-zacht: #E7EBDF; --accent-rand: #B7C2AC;
}
.tak-persoon {
  --accent: #8A6D3B; --accent-diep: #6E5529; --accent-zacht: #F0E6D6; --accent-rand: #D9C4A0;
}

/* Samenkomst: donkergroene band met alléén het paar; de kinderen staan eronder op crème.
   Layout: [naam + jaartallen] [portret] × [portret] [naam + jaartallen], gecentreerd. */
.samenkomst { margin: 3rem auto 0; }
.samenkomst-band { background: var(--groen-900); color: var(--cream-200); padding: 52px 40px; text-align: center; }
.hart-svg { display: inline-flex; align-items: center; }
.samen-kicker { display: inline-flex; align-items: center; gap: .5rem; color: var(--op-groen-subtiel); margin-bottom: 2.4rem; }
.samen-kicker .ico { color: var(--cream-200); fill: currentColor; stroke: none; width: 1.15em; height: 1.15em; }
.samen-paar { display: flex; align-items: center; justify-content: center; gap: 1.8rem; flex-wrap: wrap; }
.samen-persoon { display: flex; align-items: center; gap: 1.2rem; text-decoration: none; color: var(--cream-200); }
.samen-persoon.links { text-align: right; }
.samen-persoon.rechts { text-align: left; }
.samen-tekst { display: flex; flex-direction: column; gap: .35rem; }
.samen-naam { font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.1; }
.samen-persoon:hover .samen-naam { text-decoration: underline; text-underline-offset: 3px; }
.samen-meta { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--op-groen); }
.samen-portret .avatar { border: 3px solid var(--cream-200); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.samen-x { font-family: var(--serif); font-size: 20px; color: var(--cream-200); white-space: nowrap;
  border: 1px solid rgba(239,234,220,.34); padding: .55rem .95rem; }
@media (max-width: 720px) {
  .samen-paar { flex-direction: column; gap: 1.2rem; }
  .samen-persoon.links, .samen-persoon.rechts { text-align: center; flex-direction: column; }
  .samen-x { order: 0; }
}

/* Kinderen (broers/zussen, zelfde generatie) naast elkaar. */
.kinderen-rij { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .6rem; }
.kind-kaart { display: flex; align-items: center; gap: .6rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s); padding: .55rem .65rem;
  box-shadow: var(--schaduw); color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.kind-kaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hover); border-color: var(--accent-rand); }
.kind-tekst { min-width: 0; display: flex; flex-direction: column; }
.kind-kaart .naam { font-weight: 600; font-size: .9rem; line-height: 1.2; }
.kind-kaart .jaren { font-size: .8rem; }
.samenkomst-band > h2 { justify-content: center; text-align: center; border-bottom: none; color: var(--cream-200); margin-top: 0; }
.paar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem; max-width: 52rem; margin-inline: auto; }
.paar > .tak { flex: 1 1 260px; max-width: 380px; }
.paarvak { display: block; }
.paar .node { display: flex; align-items: center; gap: .9rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
  box-shadow: var(--schaduw); color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.paarvak:hover .node { transform: translateY(-2px); box-shadow: var(--schaduw-hover); border-color: var(--accent-rand); }
.paar .node .chip.gen { margin-left: auto; }
.paar-x { color: var(--muted); font-weight: 700; font-size: 1.2rem; text-align: center; line-height: 1.2; flex: 0 0 auto; }
.paar-x small { font-weight: 500; font-size: .8rem; }
.tak-samen {
  --accent: #8a7f63; --accent-diep: #6a6049; --accent-zacht: #efece1; --accent-rand: #ddd6c3;
  max-width: 68rem; margin: 1.2rem auto 0;
}
.samen .stamlijn { border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, #6f8465, #b0824a) 1; }

/* ---------- Koppel-kaart (man + echtgenote(s) + kinderen) ---------- */
.koppel-node { }
.koppel-node > summary,
.koppel-los { list-style: none; cursor: pointer; display: block; text-decoration: none; color: var(--ink); }
.koppel-node > summary::-webkit-details-marker { display: none; }
.koppel { background: var(--cream-50); border: 1px solid var(--lijn-200); border-radius: var(--radius);
  padding: 1.05rem 1.15rem;
  transition: box-shadow .12s ease, border-color .12s ease; }
.koppel-node > summary:hover .koppel,
.koppel-los:hover .koppel { box-shadow: var(--schaduw); border-color: var(--accent-rand); }
.koppel-node[open] > summary .koppel { border-color: var(--accent-rand); }
.koppel-hoofd { display: flex; align-items: center; gap: .55rem; }
.koppel-avatars { display: flex; align-items: center; gap: .45rem; flex: none; }
/* Fotovakjes ietsje groter dan de initiaal-vakjes: een gevuld initiaal-blokje oogt
   optisch groter dan een foto met achtergrond, dus zo lijken ze even groot. */
.koppel-avatars .avatar.foto { width: 64px !important; height: 64px !important; }
.paar-plus { display: inline-flex; align-items: center; justify-content: center; flex: none;
  color: var(--ink-400); font-weight: 400; line-height: 1; }
.koppel-avatars .paar-plus, .kind-koppel-avatars .paar-plus { font-size: 1.25rem; width: 1rem; }
.paar-amp { color: var(--muted); font-weight: 400; font-size: 1rem; line-height: 1; }
.kind-koppel-avatars .paar-amp { font-size: .85rem; }
.koppel-meta { margin-left: auto; display: flex; align-items: center; gap: .5rem; flex: none; }
.koppel-meta .chip { background: transparent; border: none; color: var(--ink-400); font-family: var(--sans);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: 0; white-space: nowrap; }
.koppel-meta .chev { color: var(--zacht-muted); display: inline-flex; transition: transform .18s ease; }
.koppel-node[open] > summary .chev { transform: rotate(180deg); }
.koppel-namen { margin-top: .7rem; display: flex; flex-direction: column; gap: .2rem; }
.koppel-persoon { font-family: var(--serif); font-size: 22px; line-height: 1.25; color: var(--ink-900); }
.koppel-persoon .naam { font-weight: 500; }
.koppel-persoon a.naam { color: var(--ink-900); text-decoration: none; }
.koppel-persoon a.naam:hover { color: var(--accent-diep); text-decoration: underline; }
.koppel-persoon .jaren { font-style: italic; font-size: 17px; color: var(--ink-500); }
.koppel-persoon .onbekend { font-weight: 400; color: var(--muted); font-style: italic; }
.koppel-kinderen { margin-top: .85rem; padding-top: .75rem; border-top: 1px solid var(--lijn-100);
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.kinderen-label { font-family: var(--sans); font-size: 13px; color: var(--ink-500); margin-right: .3rem; }
.koppel-node[open] .koppel-kinderen { display: none; }
.kind-mini { display: inline-flex; border-radius: 9px; transition: transform .1s ease; }
.kind-mini:hover { transform: translateY(-2px); }
.kind-mini .avatar { box-shadow: 0 0 0 1px var(--line); }

/* Voortzetter van de lijn (het kind met het sterretje): gouden randje. */
.kind-mini.is-stam .avatar { box-shadow: 0 0 0 2px var(--goud); }
.uitklap .kinderen .stamkind .avatar { box-shadow: 0 0 0 2px var(--goud); }

/* Kinderen van het middelpunt: kind + partner(s), als koppel-kaarten in 2 kolommen
   (zelfde stijl als de hoofdkaarten: foto's naast elkaar, namen ernaast). */
.kind-koppel-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.kind-koppel { display: flex; align-items: center; gap: .7rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .85rem;
  box-shadow: var(--schaduw); color: var(--ink); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.kind-koppel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hover); border-color: var(--accent-rand); }
.kind-koppel-avatars { display: flex; align-items: center; gap: .3rem; flex: none; }
.kind-koppel-avatars .hart-png.klein { width: 15px; height: 15px; }
.kind-koppel-tekst { min-width: 0; display: flex; flex-direction: column; }
.kind-koppel .naam { font-weight: 700; font-size: .95rem; line-height: 1.3; }
.kind-koppel .amp { color: var(--muted); font-weight: 400; }
@media (max-width: 560px) { .kind-koppel-rij { grid-template-columns: 1fr; } }

/* ---------- Vergrootweergave (lightbox) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(12, 16, 24, .9);
  backdrop-filter: blur(4px); display: grid; place-items: center; padding: 1.5rem;
  overflow-y: auto; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem;
  max-width: 100%; max-height: 100%; }
/* De afbeelding past altijd volledig in beeld, ook met bijschrift + doorklik-knop
   eronder (belangrijk voor documenten op een breed, laag scherm). */
.lightbox img { max-width: 100%; max-height: min(85vh, calc(100vh - 11rem)); object-fit: contain;
  border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.lightbox figcaption { color: #e7e9ee; font-size: .92rem; text-align: center; max-width: 42rem; }
.lightbox .hint { color: var(--zacht-muted); font-size: .82rem; }
.lb-sluit { position: fixed; top: 1rem; right: 1.1rem; z-index: 102; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .38); background: rgba(20, 24, 31, .62); color: #fff; font-size: 1.7rem;
  line-height: 1; cursor: pointer; display: grid; place-items: center;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.lb-sluit:hover { background: rgba(20, 24, 31, .88); }
figure.scan img { cursor: zoom-in; }
.lb-ai { position: absolute; top: .5rem; right: .5rem; z-index: 4; margin: 0; cursor: pointer;
  font-family: var(--sans); font-weight: 600; font-size: .78rem; color: #fff;
  background: rgba(20, 24, 31, .70); border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-pill); padding: .3rem .75rem;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lb-ai:hover { background: rgba(20, 24, 31, .9); }
.lb-link { align-self: center; margin-top: .5rem; font-weight: 700; font-size: .9rem;
  color: #fff; background: var(--accent); border: 1px solid #fff;
  border-radius: 999px; padding: .4rem 1rem; text-decoration: none; }
.lb-link:hover { background: var(--accent-diep); color: #fff; }
/* Bladeren door meerpagina-documenten in de vergroting */
.lb-nav { position: fixed; top: 50%; transform: translateY(-50%); z-index: 101;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; font-size: 2rem; line-height: 1;
  display: grid; place-items: center; }
.lb-nav:hover { background: rgba(255, 255, 255, .32); }
.lb-nav:disabled { opacity: .25; cursor: default; }
.lb-prev { left: 1rem; }
.lb-next { right: 1rem; }
.lb-pag { align-self: center; margin-top: .1rem; color: #e7e9ee; font-size: .82rem;
  font-variant-numeric: tabular-nums; letter-spacing: .05em; }
@media (max-width: 560px) { .lb-nav { width: 44px; height: 44px; font-size: 1.6rem; }
  .lb-prev { left: .3rem; } .lb-next { right: .3rem; } }

/* Documentviewer: transcriptiepaneel naast de ingezoomde pagina */
.lb-inhoud { display: flex; align-items: flex-start; justify-content: center;
  gap: 1.2rem; max-width: 100%; max-height: 100%; }
.lb-beeld { flex: 0 1 auto; min-width: 0; position: relative; }
.lb-tr { flex: 0 1 30rem; align-self: stretch; overflow-y: auto;
  max-height: min(85vh, calc(100vh - 6rem));
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px; padding: 1rem 1.1rem; color: #eef0f4; }
.lb-tr[hidden] { display: none; }
.lb-tr-kop { display: flex; align-items: center; justify-content: space-between;
  gap: .8rem; margin-bottom: .55rem; }
.lb-tr-titel { font-weight: 700; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .09em; color: var(--zacht-muted); }
.lb-tr-paginatitel { font-weight: 700; font-size: 1.02rem; line-height: 1.3;
  color: #fff; margin: .1rem 0 .7rem; padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18); }
.lb-tr-paginatitel[hidden] { display: none; }
/* Toelichting (uitleg) boven het verbatim transcript: warm getint vakje met een
   gouden zijkant, duidelijk onderscheiden van de transcriptie eronder. */
.lb-tr-toel { background: rgba(214, 188, 110, .16); border: 1px solid rgba(214, 188, 110, .32);
  border-left: 3px solid var(--goud); border-radius: 8px; padding: .6rem .8rem;
  margin: 0 0 .85rem; }
.lb-tr-toel[hidden] { display: none; }
.lb-tr-toel-kop { display: block; font-weight: 700; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .09em; color: #d9c98a; margin-bottom: .3rem; }
.lb-tr-toel-tekst { display: block; white-space: pre-line; font-size: .86rem; line-height: 1.55;
  color: #f1ecdd; }
.lb-tr-tekst { white-space: pre-wrap; font-size: .9rem; line-height: 1.6; }
@media (max-width: 820px) {
  .lb-inhoud { flex-direction: column; align-items: center; gap: .7rem; }
  .lb-tr { flex: none; width: 100%; max-width: 46rem; max-height: 42vh; }
  .lightbox:has(.lb-tr:not([hidden])) img { max-height: 45vh; }
}

/* "AI"-knopje: wissel op de foto tussen origineel en AI-verbeterde versie */
.ai-knop { position: absolute; top: .4rem; right: .4rem; z-index: 3; cursor: pointer;
  background: rgba(20, 24, 31, .70); color: #fff; font-family: var(--sans); font-size: .72rem;
  font-weight: 600; letter-spacing: .02em; padding: .22rem .6rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ai-knop:hover { background: rgba(20, 24, 31, .9); }
.fotos figure.foto a, .ov-thumb { position: relative; }
.ai-tag { font-size: .72rem; font-weight: 600; color: var(--accent-diep);
  background: var(--accent-zacht); padding: .05rem .45rem; border-radius: 999px; margin-left: .35rem; }

/* ---------- Lijsten ---------- */
ul.lijst { list-style: none; padding: 0; margin: .3rem 0; }
ul.lijst li { padding: .28rem 0; display: flex; align-items: baseline; gap: .5rem; }
ul.lijst .nr { color: var(--zacht-muted); font-variant-numeric: tabular-nums; min-width: 1.4rem; }
.jaren { color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
.kinderen li::marker { content: ""; }

/* ---------- Scan / bron ---------- */
figure.scan { margin: .4rem 0 0; }
figure.scan a { display: inline-block; border-radius: var(--radius-s); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--schaduw); line-height: 0;
  transition: transform .12s ease, box-shadow .12s ease; }
figure.scan a:hover { transform: scale(1.01); box-shadow: var(--schaduw-hover); }
figure.scan img { width: 240px; display: block; }

/* Documenten */
.kaart.document { background: transparent; border: none; border-bottom: 1px solid var(--lijn-100);
  border-radius: 0; box-shadow: none; padding: 0 0 40px; margin-bottom: 40px; }
.document .doc-rij { display: grid; grid-template-columns: 170px 1fr; gap: 32px; align-items: start; }
.doc-thumb { margin: 0; flex: none; }
.doc-thumb a { display: block; background: var(--cream-200); padding: 8px; border: 1px solid var(--lijn-200);
  box-shadow: var(--schaduw); border-radius: 0; line-height: 0; }
.doc-thumb img { width: 100%; height: 200px; object-fit: cover; object-position: top center;
  display: block; cursor: zoom-in; }
.doc-info { min-width: 0; }
.doc-info p strong { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.doc-info p a { color: var(--groen-700); }
.doc-download { display: inline-flex; align-items: center; gap: .35rem; font-size: 13px;
  font-weight: 500; color: var(--groen-700); text-decoration: none; padding: .5rem .9rem;
  border: 1px solid var(--op-groen-subtiel); border-radius: 0; background: transparent; }
.doc-download:hover { background: var(--groen-900); color: var(--cream-200); border-color: var(--groen-900); }
.tl-download { margin-top: .35rem; font-size: .8rem; padding: .28rem .55rem;
  align-self: flex-start; white-space: nowrap; }
@media (max-width: 560px) { .document .doc-rij { grid-template-columns: 120px 1fr; gap: 18px; } }
/* Meerpagina-documenten: badge op de eerste pagina + strook met de overige pagina's */
.doc-thumb a, .galerij-tegel.doc { position: relative; }
.pag-badge { position: absolute; top: .3rem; right: .3rem; z-index: 2;
  background: rgba(20, 24, 31, .82); color: #fff; font-size: .66rem; font-weight: 700;
  letter-spacing: .03em; padding: .1rem .34rem; border-radius: 5px; line-height: 1.3; }
.doc-paginas { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.doc-paginas .doc-pag { position: relative; display: block; width: 66px; line-height: 0;
  border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden;
  box-shadow: var(--schaduw); }
.doc-paginas .doc-pag img { width: 100%; height: 86px; object-fit: cover;
  object-position: top center; display: block; cursor: zoom-in; }
.doc-paginas .pag-nr { position: absolute; bottom: 0; right: 0; z-index: 2;
  background: rgba(20, 24, 31, .82); color: #fff; font-size: .62rem; font-weight: 700;
  padding: .05rem .3rem; border-top-left-radius: 5px; }
.transcriptie summary { cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  width: fit-content; list-style: none; font-weight: 700; font-size: .88rem; color: #fff;
  background: var(--terracotta); border-radius: 999px; padding: .42rem .95rem;
  box-shadow: 0 2px 8px rgba(189, 115, 87, .30); transition: background .15s, box-shadow .15s; }
.transcriptie summary::-webkit-details-marker { display: none; }
.transcriptie summary::after { content: "\25B8"; font-size: .72em; transition: transform .18s ease; }
.transcriptie[open] summary::after { transform: rotate(90deg); }
.transcriptie summary:hover { background: #a5614a; box-shadow: 0 3px 12px rgba(189, 115, 87, .42); }
.transcriptie-tekst { white-space: pre-wrap; margin-top: .5rem; padding: .8rem 1rem;
  background: var(--line-zacht); border: 1px solid var(--line); border-radius: var(--radius-s);
  font-size: .9rem; line-height: 1.5; }
/* Taal-schakelaar boven de transcriptie: groen segmented-control, duidelijk
   onderscheiden van de terracotta "Transcriptie tonen"-knop erboven. */
.transcriptie-switch { display: inline-flex; gap: 3px; margin: .7rem 0 .35rem; padding: 3px;
  background: var(--accent-zacht); border: 1px solid var(--accent-rand); border-radius: 9px; }
.transcriptie-switch .ts-knop { border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 700; color: var(--accent-diep);
  padding: .32rem .95rem; border-radius: 7px; transition: background .12s, color .12s; }
.transcriptie-switch .ts-knop:hover { background: #fff; }
.transcriptie-switch .ts-knop.actief { background: var(--accent); color: #fff;
  box-shadow: 0 1px 3px rgba(44, 46, 38, .18); }
figure.scan figcaption { color: var(--muted); font-size: .85rem; margin-top: .5rem; }

/* ---------- Register ---------- */
.register-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.alfabet-nav { display: flex; flex-wrap: wrap; gap: 6px; max-width: 360px; }
.alfabet-nav a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--lijn-300); color: var(--groen-700); font-family: var(--sans); font-size: 13px; font-weight: 500; }
.alfabet-nav a:hover { background: var(--groen-900); color: var(--cream-200); border-color: var(--groen-900); }
.register-sectie { margin-top: 2.2rem; }
.register-letter { position: static; background: transparent; color: var(--groen-700); font-family: var(--serif);
  font-style: italic; font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: 0;
  padding: 0 0 .35rem; margin: 0 0 .7rem; border-bottom: 2px solid var(--groen-700);
  display: flex; align-items: baseline; gap: .6rem; }
.register-aantal { font-family: var(--sans); font-style: normal; font-size: 13px; font-weight: 500; color: var(--ink-400); }
.kolommen { columns: 2; column-gap: 64px; margin-top: .5rem; }
.kolommen li { break-inside: avoid; }
.register-namen li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 9px 0; border-bottom: 1px solid var(--lijn-100); }
.register-namen a { font-family: var(--serif); font-size: 19px; color: var(--ink-900); }
.register-namen a:hover { color: var(--groen-700); }
.register-namen .jaren { font-family: var(--sans); font-size: 14px; color: var(--ink-400); white-space: nowrap; }
@media (max-width: 560px) { .kolommen { columns: 1; } }

/* ---------- Zoeken ---------- */
.zoekbox { position: relative; margin: 1rem 0; }
.zoekbox .ico { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--zacht-muted); width: 20px; height: 20px; pointer-events: none; }
#zoekveld { width: 100%; font-size: 1.05rem; font-family: inherit; color: var(--ink);
  padding: .85rem 1rem .85rem 2.8rem; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--schaduw); }
#zoekveld:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-zacht); }
#zoekresultaten li { padding: .1rem 0; }
#zoekresultaten a { display: flex; align-items: baseline; gap: .5rem; padding: .55rem .8rem;
  border-radius: 10px; color: var(--ink); width: 100%; }
#zoekresultaten a:hover { background: var(--accent-zacht); }
.tel { color: var(--muted); font-size: .9rem; }

/* ---------- Kaart & tijdlijn ---------- */
#kaart { position: relative; z-index: 0; height: 68vh; min-height: 420px;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--schaduw);
  background: var(--line-zacht); }
.kaart-balk { display: flex; align-items: center; gap: 1rem; margin: 1rem 0 .6rem; }
.kaart-balk input[type="range"] { flex: 1; accent-color: var(--accent); height: 6px; }
/* Mobiel: afspeelknop + tijdbalk direct boven de kaart; legenda eronder,
   zodat de bediening en de kaart samen in beeld staan. */
@media (max-width: 700px) {
  .kaart-blok { display: flex; flex-direction: column; }
  .kaart-balk { order: 1; flex-wrap: wrap; margin: .3rem 0 .5rem; }
  #reis-tekst { order: 2; }
  #kaart { order: 3; height: 58vh; min-height: 320px; }
  .kaart-opties { order: 4; margin-top: .9rem; }
  .kaart-blok > .tel { order: 5; }
}
.jaar-label { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; min-width: 3.6rem; text-align: right; }
.speelknop { display: inline-flex; align-items: center; gap: .4rem; font-family: inherit;
  font-weight: 600; font-size: .95rem; color: #fff; background: var(--accent);
  border: none; border-radius: 10px; padding: .55rem .9rem; cursor: pointer; white-space: nowrap; }
.speelknop:hover { background: var(--accent-diep); }
.speelknop .pauze { display: none; }
.speelknop.speelt .play { display: none; }
.speelknop.speelt .pauze { display: inline-flex; align-items: center; gap: .4rem; }
.kaart-opties { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start;
  margin-bottom: .6rem; color: var(--muted); font-size: .9rem; }
.soort-legenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; }
.soort-legenda .schakel.soort { font-size: .9rem; }
.soort-legenda .stip { width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 1px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.tak-legenda { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: center; }
.tak-legenda .tak-item { display: inline-flex; align-items: center; gap: .3rem; }
.tak-legenda .tak-item svg { display: block; }
/* Kaartmarkers als klein SVG-icoon (cirkel = Klerks, driehoek = Persoon), zonder Leaflet-kader. */
.kaart-icon { background: transparent; border: 0; }
.kaart-icon svg { display: block; overflow: visible; }
.kaart-schakels { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.legenda { display: inline-flex; align-items: center; gap: .5rem; }
.legenda .stip { width: 12px; height: 12px; border-radius: 50%; display: inline-block;
  border: 1px solid #fff; box-shadow: 0 0 0 1px var(--line); margin-left: .6rem; }
.legenda .stip:first-child { margin-left: 0; }
.stip-klerks { background: #6f8465; }
.stip-persoon { background: #b0824a; }
.schakel { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.schakel input { accent-color: var(--accent); }
.reisknop { display: inline-flex; align-items: center; gap: .4rem; font-family: inherit;
  font-weight: 600; font-size: .9rem; color: var(--accent-diep); background: var(--accent-zacht);
  border: 1px solid var(--accent-rand); border-radius: 10px; padding: .45rem .8rem; cursor: pointer; }
.reisknop:hover { background: var(--accent-zacht); }
.reisknop.actief { background: var(--accent); color: #fff; border-color: var(--accent); }
.reis-tekst { margin: 0 0 .6rem; padding: .6rem .9rem; border-radius: var(--radius-s);
  background: var(--accent-zacht); border: 1px solid var(--accent-rand); color: #5c5e4f; font-size: .92rem; }
.leaflet-container { font: inherit; border-radius: var(--radius); }

/* ---------- Naam-evolutie ---------- */
.naam-evolutie-blok { margin-top: 2.4rem; }
.naam-evolutie { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.naam-stap { display: inline-flex; flex-direction: column; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s);
  box-shadow: var(--schaduw); padding: .5rem .9rem; color: var(--ink); text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.naam-stap:hover { transform: translateY(-2px); box-shadow: var(--schaduw-hover); border-color: var(--accent-rand); }
.naam-spelling { font-weight: 700; letter-spacing: -.01em; }
.naam-pijl { color: var(--zacht-muted); font-weight: 700; }

/* ---------- Grafische stamboom ---------- */
.boom-tabs { display: flex; gap: .5rem; margin: .5rem 0 1rem; }
.boom-tab { font-family: inherit; font-weight: 600; font-size: .9rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .45rem .8rem; cursor: pointer; }
.boom-tab:hover { color: var(--ink); }
.boom-tab.actief { background: var(--accent); color: #fff; border-color: var(--accent); }
.boom-hint { color: var(--zacht-muted); font-size: .82rem; align-self: center; margin-left: auto; }

.boom-canvas { position: relative; height: min(78vh, 860px); overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg);
  box-shadow: var(--schaduw); cursor: grab; touch-action: none; }
.boom-canvas.grabbing { cursor: grabbing; }
/* Volledig scherm: het canvas vult het hele venster. */
.boom-canvas.volledig { position: fixed; inset: 0; width: 100vw; height: 100vh;
  z-index: 2000; border-radius: 0; border: 0; }
body.boom-vol-open { overflow: hidden; }
.boom-pan { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.boom { display: inline-block; }
.boom-knoppen { position: absolute; top: .6rem; right: .6rem; z-index: 5;
  display: flex; flex-direction: column; gap: .35rem; }
.boom-knoppen button { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  background: #fff; box-shadow: var(--schaduw); color: var(--ink); font-size: 1.15rem; font-weight: 600;
  cursor: pointer; display: grid; place-items: center; padding: 0; }
.boom-knoppen button:hover { background: var(--line-zacht); }

.boom ul { position: relative; padding-top: 22px; white-space: nowrap; margin: 0;
  text-align: center; display: flex; justify-content: center; }
.boom li { display: inline-block; vertical-align: top; list-style: none; position: relative;
  padding: 22px 8px 0; white-space: normal; }
/* verbindingslijnen tussen ouders en kinderen */
.boom li::before, .boom li::after { content: ""; position: absolute; top: 0; right: 50%;
  border-top: 2px solid var(--line); width: 50%; height: 22px; }
.boom li::after { right: auto; left: 50%; border-left: 2px solid var(--line); }
.boom li:only-child::before, .boom li:only-child::after { display: none; }
.boom li:first-child::before, .boom li:last-child::after { border: 0 none; }
.boom li:last-child::before { border-right: 2px solid var(--line); border-radius: 0 6px 0 0; }
.boom li:first-child::after { border-radius: 6px 0 0 0; }
.boom ul ul::before { content: ""; position: absolute; top: 0; left: 50%;
  border-left: 2px solid var(--line); width: 0; height: 22px; }
.boom li.dicht > ul { display: none; }

.boom-kaart { position: relative; display: inline-block; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--schaduw);
  padding: .5rem .6rem; }
.boom-paar { display: flex; align-items: center; gap: .4rem; }
.boom-x { color: var(--zacht-muted); font-weight: 700; }
.boom-persoon { display: flex; align-items: center; gap: .5rem; color: var(--ink);
  text-decoration: none; padding: .1rem .2rem; border-radius: 8px; }
.boom-persoon:hover { background: var(--line-zacht); }
.boom-naam { font-weight: 600; font-size: .82rem; line-height: 1.2; text-align: left; }
.boom-naam .jaren { font-weight: 400; font-size: .75rem; }
.boom-toggle { position: absolute; left: 50%; bottom: -11px; transform: translateX(-50%);
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--accent-rand);
  background: #fff; color: var(--accent-diep); font-weight: 700; line-height: 1; cursor: pointer;
  z-index: 1; display: grid; place-items: center; padding: 0; }
.boom-toggle:hover { background: var(--accent-zacht); }
.boom li.dicht > .boom-kaart::after { content: ""; position: absolute; left: 50%; bottom: -22px;
  transform: translateX(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent-rand); }

/* Nog-onbewezen voorouders (in onderzoek): gestreepte kaders en verbindingslijnen. */
.boom-kaart.hypothese { border-style: dashed; border-color: var(--zacht-muted);
  background: var(--line-zacht); box-shadow: none; }
.boom-persoon.hypothese { color: var(--muted); cursor: default; }
.boom-persoon.hypothese:hover { background: transparent; }
.boom-kaart.hypothese .avatar.leeg { background: transparent; color: var(--muted);
  border: 1.5px dashed var(--zacht-muted); }
.boom ul.kinderen-hypothese::before { border-left-style: dashed; border-left-color: var(--zacht-muted); }

/* Uitklapveld 'in onderzoek' boven de stamlijn: gestreepte tijdlijn-kaartjes. */
.onderzoek-blok { width: 100%; margin: 0 0 1.1rem; background: var(--surface);
  border: 1.5px dashed var(--zacht-muted); border-radius: var(--radius); overflow: hidden; }
.onderzoek-blok > summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: .6rem; padding: .85rem 1.1rem; font-weight: 600; color: var(--muted); }
.onderzoek-blok > summary::-webkit-details-marker { display: none; }
.onderzoek-blok > summary .ico { color: var(--zacht-muted); flex: none; }
.onderzoek-titel { flex: 1 1 auto; min-width: 0; }
.onderzoek-blok > summary::after { content: "\25B8"; flex: none; color: var(--zacht-muted);
  transition: transform .18s ease; }
.onderzoek-blok[open] > summary::after { transform: rotate(90deg); }
.chip-onderzoek { flex: none; white-space: nowrap; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .07em; background: var(--line-zacht); color: var(--muted);
  border: 1px dashed var(--zacht-muted); padding: .16rem .6rem; border-radius: 999px; font-weight: 700; }
.onderzoek-inhoud { padding: .2rem 1.1rem 1.2rem; }
.onderzoek-uitleg { color: var(--muted); font-size: .9rem; line-height: 1.55; margin: 0 0 1.1rem; }
.onderzoek-tijdlijn { list-style: none; margin: 0; padding: 0 0 0 1.3rem; position: relative; }
.onderzoek-tijdlijn::before { content: ""; position: absolute; left: .32rem; top: .6rem; bottom: 1.6rem;
  border-left: 2px dashed var(--zacht-muted); }
.onderzoek-kaart { position: relative; display: flex; gap: .75rem; align-items: flex-start;
  border: 1.5px dashed var(--zacht-muted); border-radius: var(--radius-s); background: var(--surface);
  padding: .6rem .8rem; margin: 0 0 .9rem; }
.onderzoek-kaart::before { content: ""; position: absolute; left: -1.12rem; top: 1.1rem; width: .66rem;
  height: .66rem; border-radius: 50%; background: var(--surface); border: 2px dashed var(--zacht-muted); }
.onderzoek-avatar { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid;
  place-items: center; border: 1.5px dashed var(--zacht-muted); color: var(--muted); font-weight: 700; }
.onderzoek-tekst { min-width: 0; }
.onderzoek-naam { font-weight: 600; color: var(--ink); margin: 0; }
.onderzoek-naam .jaren { font-weight: 400; color: var(--muted); font-size: .82rem; }
.onderzoek-partner { margin: .1rem 0 0; color: var(--muted); font-size: .84rem; }
.onderzoek-toel { color: var(--muted); font-size: .85rem; line-height: 1.5; margin: .35rem 0 0; }
.onderzoek-zekerheid { display: inline-block; margin-top: .45rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--zacht-muted); font-weight: 700; }
.onderzoek-naar { border-style: solid; border-color: var(--accent-rand); }
.onderzoek-naar .onderzoek-avatar { border-style: solid; border-color: var(--accent-rand); color: var(--accent-diep); }
.onderzoek-naar a { color: var(--accent-diep); font-weight: 700; text-decoration: none; }
.onderzoek-naar a:hover { text-decoration: underline; }

/* ---------- Voettekst ---------- */
footer { margin-top: 3.5rem; background: var(--groen-900); color: var(--op-groen-subtiel);
  font-family: var(--sans); font-size: 13px; }
.voet-in { max-width: 77.5rem; margin: 0 auto; padding: 24px 40px;
  display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
footer .ico { width: 16px; height: 16px; flex: none; opacity: .8; }
footer p { margin: 0; display: inline-flex; align-items: center; gap: .45rem; }
footer .voet-vragen { color: var(--op-groen-subtiel); }
footer a { color: var(--op-groen); text-decoration: underline; text-underline-offset: 2px; }
footer a:hover { color: var(--cream-200); }

@media (max-width: 40rem) {
  .kolommen { columns: 1; }
  main { padding: 1.6rem 20px; }
  .voet-in { padding: 20px; }
  .samenkomst-band { padding: 28px 20px; }
  .geschiedenis .wapen { width: 200px; }
}