/* ---------------------------------------------------------------
   Familie Stamboom — opmaak
   Kleuren: warm papier met diepgroen accent. Licht én donker.
--------------------------------------------------------------- */

:root {
  --papier:      #f5f0e6;
  --kaart:       #fffdf8;
  --kaart-2:     #faf6ee;
  --inkt:        #2b2621;
  --inkt-zacht:  #6d6357;
  --lijn:        #ded3c1;
  --lijn-sterk:  #c9bca6;
  --accent:      #2f5d50;
  --accent-licht:#e3ece8;
  --accent-tekst:#ffffff;
  --man:         #3a6ea5;
  --vrouw:       #a4506b;
  --schaduw:     0 1px 2px rgba(43,38,33,.06), 0 8px 24px rgba(43,38,33,.06);
  --rond:        12px;
  --serif:       "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:      #171613;
    --kaart:       #211f1a;
    --kaart-2:     #26241e;
    --inkt:        #ece5d8;
    --inkt-zacht:  #a49a89;
    --lijn:        #38342c;
    --lijn-sterk:  #4b4539;
    --accent:      #7fb8a4;
    --accent-licht:#25332e;
    --accent-tekst:#12211c;
    --man:         #7ba7d7;
    --vrouw:       #d391aa;
    --schaduw:     0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }

/* ---------- Kop ---------- */

.kop {
  background: var(--kaart);
  border-bottom: 1px solid var(--lijn);
  position: sticky; top: 0; z-index: 50;
}
.kop-binnen {
  max-width: 1180px; margin: 0 auto; padding: .6rem 1rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.merk { display: flex; align-items: center; gap: .6rem; color: var(--inkt); }
.merk:hover { text-decoration: none; }
.merk-icoon { width: 30px; height: 30px; color: var(--accent); flex: none; }
.merk-tekst strong { font-family: var(--serif); font-size: 1.15rem; display: block; }
.merk-tekst small { color: var(--inkt-zacht); font-size: .78rem; display: block; }

.nav { display: flex; gap: .2rem; margin-left: auto; flex-wrap: wrap; }
.nav a {
  padding: .35rem .7rem; border-radius: 999px; color: var(--inkt-zacht);
  font-size: .9rem;
}
.nav a:hover { background: var(--accent-licht); color: var(--accent); text-decoration: none; }
.nav a.actief { background: var(--accent); color: var(--accent-tekst); }

.zoekbalk { position: relative; flex: 1 1 220px; max-width: 320px; }
.zoekbalk input {
  width: 100%; padding: .45rem .8rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--lijn-sterk); border-radius: 999px;
  background: var(--papier); color: var(--inkt);
}
.zoekbalk input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.suggesties {
  position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 60;
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond);
  box-shadow: var(--schaduw); overflow: hidden; max-height: 60vh; overflow-y: auto;
}
.suggesties a { display: block; padding: .5rem .8rem; color: var(--inkt); font-size: .9rem; }
.suggesties a:hover { background: var(--accent-licht); text-decoration: none; }
.suggesties a small { color: var(--inkt-zacht); display: block; font-size: .78rem; }
.suggesties .leeg { padding: .6rem .8rem; color: var(--inkt-zacht); font-size: .9rem; }

/* ---------- Inhoud ---------- */

.inhoud { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1rem 4rem; }
.laden { color: var(--inkt-zacht); }

.kruimels { font-size: .85rem; color: var(--inkt-zacht); margin-bottom: .8rem; }
.kruimels a { color: var(--inkt-zacht); }

.kaart {
  background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: var(--rond); box-shadow: var(--schaduw);
  padding: 1.2rem;
}

.raster { display: grid; gap: 1rem; }
.raster.twee { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.raster.drie { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---------- Startpagina ---------- */

.held { text-align: center; padding: 2rem 1rem 1.4rem; }
.held h1 { font-size: 2.4rem; margin-bottom: .2rem; }
.held p { color: var(--inkt-zacht); max-width: 46ch; margin: 0 auto; }

.cijfers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: .8rem; margin: 1.6rem 0; }
.cijfer { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond); padding: .9rem; text-align: center; }
.cijfer b { display: block; font-family: var(--serif); font-size: 1.7rem; line-height: 1.1; }
.cijfer span { font-size: .8rem; color: var(--inkt-zacht); }

/* ---------- Persoonskaartjes ---------- */

.pkaart {
  display: flex; gap: .7rem; align-items: center;
  background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: var(--rond); padding: .6rem .7rem; color: var(--inkt);
}
.pkaart:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--schaduw); }
.pkaart .naam { display: block; font-weight: 600; font-family: var(--serif); font-size: 1rem; }
.pkaart .jaren { display: block; font-size: .82rem; color: var(--inkt-zacht); }

.avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  font-family: var(--serif); font-size: .95rem; color: #fff;
  background: var(--inkt-zacht);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.groot { width: 120px; height: 120px; font-size: 2.2rem; }
.avatar.m { background: var(--man); }
.avatar.v { background: var(--vrouw); }

/* ---------- Personenlijst ---------- */

.lijst-kop { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.letters { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: 1.2rem; }
.letters a, .letterknop {
  padding: .15rem .5rem; border-radius: 6px; background: var(--kaart);
  border: 1px solid var(--lijn); font-size: .85rem;
  font-family: inherit; color: var(--accent); cursor: pointer;
}
.letterknop:hover { border-color: var(--accent); background: var(--accent-licht); }
.groepkop { font-family: var(--serif); font-size: 1.4rem; color: var(--accent); margin: 1.6rem 0 .6rem; border-bottom: 1px solid var(--lijn); padding-bottom: .2rem; }

/* ---------- Persoonspagina ---------- */

.persoon-kop { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.4rem; }
.persoon-kop .titel h1 { margin-bottom: .1rem; }
.persoon-kop .titel .sub { color: var(--inkt-zacht); font-size: 1rem; }
.knoppen { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
.knop {
  display: inline-block; padding: .35rem .8rem; border-radius: 999px;
  border: 1px solid var(--lijn-sterk); font-size: .85rem; color: var(--inkt);
  background: var(--kaart);
}
.knop:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.knop.primair { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }

.feiten { list-style: none; margin: 0; padding: 0; }
.feiten li { display: flex; gap: .6rem; padding: .35rem 0; border-bottom: 1px dashed var(--lijn); font-size: .95rem; }
.feiten li:last-child { border-bottom: 0; }
.feiten .label { flex: 0 0 8.5rem; color: var(--inkt-zacht); font-size: .85rem; padding-top: .1rem; }

.blok { margin-top: 1.4rem; }
.blok > h2 { display: flex; align-items: center; gap: .6rem; }
.blok > h2::after { content: ""; flex: 1; height: 1px; background: var(--lijn); }

.gezinsblok { border-left: 3px solid var(--accent-licht); padding-left: .9rem; margin-bottom: 1.2rem; }
.gezinsblok .huwelijk { font-size: .88rem; color: var(--inkt-zacht); margin: .2rem 0 .6rem; }

.notitie { white-space: pre-wrap; background: var(--kaart-2); border-left: 3px solid var(--lijn-sterk); padding: .7rem .9rem; border-radius: 0 8px 8px 0; }
.bronnen { font-size: .88rem; color: var(--inkt-zacht); padding-left: 1.1rem; }

.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.foto { background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond); overflow: hidden; }
.foto img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; cursor: zoom-in; }
.foto figcaption { padding: .45rem .6rem; font-size: .8rem; color: var(--inkt-zacht); }

.lichtbak {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 1.5rem;
}
.lichtbak figure { margin: 0; max-width: calc(100% - 8rem); text-align: center; }
.lichtbak img { max-width: 100%; max-height: 84vh; border-radius: 6px; }
.lichtbak figcaption { color: #eee; margin-top: .8rem; font-size: .9rem; white-space: pre-wrap; }
.lbknop, .lbsluit {
  border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  border-radius: 50%; line-height: 1; flex: none;
}
.lbknop { width: 3rem; height: 3rem; font-size: 2rem; }
.lbknop:hover, .lbsluit:hover { background: rgba(255,255,255,.28); }
.lbsluit { position: absolute; top: 1rem; right: 1rem; width: 2.4rem; height: 2.4rem; font-size: 1.4rem; }

/* ---------- brandpunt kiezen ---------- */

.avatar.klikbaar { cursor: zoom-in; }
.brandvak { position: relative; display: inline-block; max-width: 100%; margin: .5rem 0; cursor: crosshair; }
.brandvak img { display: block; max-width: 100%; max-height: 46vh; border-radius: 8px; }
.brandpin {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.55);
  pointer-events: none;
}
.brandvoorbeeld { display: flex; align-items: center; gap: .8rem; margin: .6rem 0 .2rem; }

/* ---------- Stamboom: voorouders (horizontaal, wortel links) ---------- */

.boomvak { overflow: auto; padding: 1rem; background: var(--kaart-2); border: 1px solid var(--lijn); border-radius: var(--rond); }

.tak { display: flex; align-items: center; }
.tak > .knoop { position: relative; flex: none; }
.tak.heeft-ouders > .knoop { margin-right: 34px; }
.tak.heeft-ouders > .knoop::after {
  content: ""; position: absolute; left: 100%; top: 50%;
  width: 34px; border-top: 1px solid var(--lijn-sterk);
}
.ouders { display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.ouders > .tak { position: relative; padding-left: 34px; }
.ouders > .tak::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 34px; border-top: 1px solid var(--lijn-sterk);
}
.ouders > .tak:not(:only-child)::after {
  content: ""; position: absolute; left: 0; border-left: 1px solid var(--lijn-sterk);
}
.ouders > .tak:not(:only-child):first-child::after { top: 50%; bottom: -.5rem; }
.ouders > .tak:not(:only-child):last-child::after  { top: -.5rem; bottom: 50%; }

.knoop {
  display: flex; align-items: center; gap: .5rem;
  background: var(--kaart); border: 1px solid var(--lijn);
  border-left: 3px solid var(--lijn-sterk);
  border-radius: 8px; padding: .4rem .6rem; min-width: 170px;
  color: var(--inkt); font-size: .85rem; line-height: 1.25;
}
.knoop:hover { border-color: var(--accent); text-decoration: none; }
.knoop.m { border-left-color: var(--man); }
.knoop.v { border-left-color: var(--vrouw); }
.knoop.jij { outline: 2px solid var(--accent); }
.knoop .kn { font-weight: 600; display: block; }
.knoop .kj { color: var(--inkt-zacht); font-size: .78rem; }
.knoop.leeg { color: var(--inkt-zacht); font-style: italic; border-style: dashed; }

/* ---------- Stamboom: nakomelingen (verticaal) ---------- */

.dtak { display: flex; flex-direction: column; align-items: center; position: relative; }
.dknoop { display: flex; align-items: center; gap: .4rem; }
.dknoop .maal { color: var(--inkt-zacht); font-size: .9rem; }
.dkinderen { display: flex; gap: 1.2rem; padding-top: 34px; position: relative; }
.dkinderen::before {
  content: ""; position: absolute; top: 0; left: 50%; height: 17px;
  border-left: 1px solid var(--lijn-sterk);
}
.dkinderen > .dtak::before {
  content: ""; position: absolute; top: -17px; left: 50%; height: 17px;
  border-left: 1px solid var(--lijn-sterk);
}
.dkinderen > .dtak:not(:only-child)::after {
  content: ""; position: absolute; top: -17px; border-top: 1px solid var(--lijn-sterk);
}
.dkinderen > .dtak:not(:only-child):first-child::after { left: 50%; right: -.6rem; }
.dkinderen > .dtak:not(:only-child):last-child::after  { left: -.6rem; right: 50%; }
.dkinderen > .dtak:not(:only-child):not(:first-child):not(:last-child)::after { left: -.6rem; right: -.6rem; }

/* ---------- Overig ---------- */

.tabs { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.melding { background: var(--accent-licht); border: 1px solid var(--lijn); border-radius: var(--rond); padding: .8rem 1rem; font-size: .9rem; }
.stil { color: var(--inkt-zacht); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; }
pre { background: var(--kaart-2); border: 1px solid var(--lijn); border-radius: 8px; padding: .9rem; overflow-x: auto; }
code:not(pre code) { background: var(--kaart-2); padding: .1em .35em; border-radius: 4px; }

/* ---------- inloggen ---------- */

.inlogvak { display: flex; align-items: center; gap: .5rem; }
.inlogvak .wie { font-size: .82rem; color: var(--inkt-zacht); }
.knop.klein { padding: .25rem .65rem; font-size: .8rem; }

.inlogbak {
  position: fixed; inset: 0; z-index: 300; background: rgba(20,16,12,.55);
  display: grid; place-items: center; padding: 1.5rem;
}
.inlogkaart {
  background: var(--kaart); border: 1px solid var(--lijn); border-radius: var(--rond);
  box-shadow: var(--schaduw); padding: 1.4rem; width: min(28rem, 100%);
}
.inlogkaart h2 { margin-bottom: .2rem; }
.inlogkaart label { display: block; margin-top: .9rem; font-size: .85rem; color: var(--inkt-zacht); }
.inlogkaart input {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .7rem;
  font: inherit; border: 1px solid var(--lijn-sterk); border-radius: 8px;
  background: var(--papier); color: var(--inkt);
}
.inlogkaart .knoppen { margin-top: 1.1rem; }
.inlogfout {
  margin-top: .9rem; padding: .5rem .7rem; border-radius: 8px; font-size: .85rem;
  background: #fdecea; color: #8a2318; border: 1px solid #f3c3bd;
}
@media (prefers-color-scheme: dark) {
  .inlogfout { background: #3a1c18; color: #f0b4ab; border-color: #5c2b23; }
}

.melding.afgeschermd { margin-top: .8rem; }

/* ---------- foto toevoegen ---------- */

.uploadvak {
  margin-top: 1.2rem; padding: 1rem; border: 1px dashed var(--lijn-sterk);
  border-radius: var(--rond); background: var(--kaart-2);
}
.uploadvak h3 { margin-bottom: .3rem; }
.uploadvak p { margin: 0 0 .8rem; font-size: .85rem; }
.uploadrij { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.uploadrij input[type="text"] {
  flex: 1 1 14rem; padding: .45rem .7rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--lijn-sterk); border-radius: 8px;
  background: var(--papier); color: var(--inkt);
}
.uploadrij input[name="jaar"] { flex: 0 0 5.5rem; }
.uploadstatus { font-size: .85rem; }
.uploadstatus.fout { color: #b3261e; }
@media (prefers-color-scheme: dark) { .uploadstatus.fout { color: #f0b4ab; } }

/* ---------- beheerpagina ---------- */

.beheerform {
  margin-top: 1rem; padding: 1rem; border: 1px solid var(--lijn);
  border-radius: var(--rond); background: var(--kaart);
}
.beheerform h3 { margin-bottom: .6rem; }
.beheerform label { display: block; margin-bottom: .7rem; font-size: .85rem; color: var(--inkt-zacht); }
.beheerform input[type="text"],
.beheerform input[type="password"] {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .7rem;
  font: inherit; border: 1px solid var(--lijn-sterk); border-radius: 8px;
  background: var(--papier); color: var(--inkt);
}
.beheerform .uploadrij input[type="text"],
.beheerform .uploadrij input[type="password"] { margin-top: 0; }
.beheerform p { margin: 0 0 .8rem; }

label.vink {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 0 1rem .2rem 0; font-size: .85rem; color: var(--inkt);
}

.beheertabel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.beheertabel td { padding: .6rem .5rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
.beheertabel tr:last-child td { border-bottom: 0; }
.beheertabel .rechts { text-align: right; white-space: nowrap; }
.knop.gevaar { color: #b3261e; border-color: #e7b4ae; }
.knop.gevaar:hover { background: #fdecea; color: #8a2318; }
@media (prefers-color-scheme: dark) {
  .knop.gevaar { color: #f0b4ab; border-color: #5c2b23; }
  .knop.gevaar:hover { background: #3a1c18; color: #ffd0c8; }
}

.melding.waarschuwing { background: #fff4e0; border-color: #e8cfa0; color: #6b4a10; }
.melding.goed { background: #e6f3ea; border-color: #b8ddc4; color: #245b34; }
@media (prefers-color-scheme: dark) {
  .melding.waarschuwing { background: #3a2f16; border-color: #5c4a20; color: #f0dcae; }
  .melding.goed { background: #1c3325; border-color: #2f5540; color: #b7dcc4; }
}
.feiten .goed { color: #245b34; }
.feiten .fout, .fout { color: #b3261e; }
@media (prefers-color-scheme: dark) {
  .feiten .goed { color: #8fc9a4; }
  .feiten .fout, .fout { color: #f0b4ab; }
}
.formstatus { display: inline-block; margin-left: .6rem; font-size: .85rem; }

.bewerkrij { display: flex; gap: .8rem; flex-wrap: wrap; }
.bewerkrij label { flex: 1 1 12rem; }
.bewerkform textarea {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .7rem;
  font: inherit; font-size: .9rem; line-height: 1.5; resize: vertical;
  border: 1px solid var(--lijn-sterk); border-radius: 8px;
  background: var(--papier); color: var(--inkt);
}
.bewerkform select {
  display: block; width: 100%; margin-top: .25rem; padding: .5rem .7rem;
  font: inherit; border: 1px solid var(--lijn-sterk); border-radius: 8px;
  background: var(--papier); color: var(--inkt);
}
.bijgewerkt { margin-top: 1.6rem; font-size: .8rem; }

.uitklap {
  margin-top: 1rem; border: 1px solid var(--lijn); border-radius: var(--rond);
  background: var(--kaart); padding: .8rem 1rem;
}
.uitklap summary { cursor: pointer; font-family: var(--serif); font-size: 1.05rem; }
.uitklap pre { margin-top: .8rem; }
.inlogvak .wie { color: var(--inkt-zacht); text-decoration: none; }
.inlogvak .wie:hover { color: var(--accent); text-decoration: underline; }

/* ---------- media ---------- */

.mediaraster {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem;
}
.mediakaart {
  margin: 0; background: var(--kaart); border: 1px solid var(--lijn);
  border-radius: var(--rond); overflow: hidden; display: flex; flex-direction: column;
}
.mediakaart img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; cursor: zoom-in; }
.mediakaart figcaption { padding: .6rem .7rem; font-size: .85rem; line-height: 1.4; }
.mediakaart figcaption .knop { margin-top: .5rem; }

.tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.tag {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  background: var(--accent-licht); color: var(--accent);
  font-size: .75rem; border: 1px solid transparent; cursor: pointer;
}
.tag:hover { text-decoration: none; border-color: var(--accent); }
.tagkeuze { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .9rem; }
.tagkeuze .tag { background: var(--kaart-2); color: var(--inkt-zacht); }
.tagkeuze .tag:hover { background: var(--accent-licht); color: var(--accent); }

.slotje { display: block; margin-top: .4rem; font-size: .75rem; }

/* ---------- personen kiezen ---------- */

.personenkiezer { margin-bottom: 1rem; }
.kiezerzoek {
  width: 100%; padding: .5rem .7rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--lijn-sterk); border-radius: 8px;
  background: var(--papier); color: var(--inkt);
}
.gekozenlijst { display: flex; flex-wrap: wrap; gap: .35rem; margin: .6rem 0; }
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .15rem .3rem .15rem .6rem; border-radius: 999px;
  background: var(--accent-licht); color: var(--accent); font-size: .8rem;
}
.chip button {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 0 .2rem;
}
.chip button:hover { color: #b3261e; }
.kiezerlijst {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--lijn); border-radius: 8px; background: var(--kaart);
}
.kiezerlijst p { margin: 0; padding: .7rem; font-size: .85rem; }
.kiezerregel {
  display: block; width: 100%; text-align: left; padding: .45rem .7rem;
  border: 0; border-bottom: 1px solid var(--lijn); background: none;
  font: inherit; font-size: .88rem; color: var(--inkt); cursor: pointer;
}
.kiezerregel:last-child { border-bottom: 0; }
.kiezerregel:hover { background: var(--accent-licht); color: var(--accent); }

/* Een foto waarvan het bestand uit de mediamap verdwenen is. */
.mediakaart { position: relative; }
.ontbreektmelding { display: none; }
.mediakaart.ontbreekt img { display: none; }
.mediakaart.ontbreekt .ontbreektmelding {
  display: block; padding: 2.2rem .8rem; text-align: center;
  background: var(--kaart-2); border-bottom: 1px solid var(--lijn);
  color: #b3261e; font-size: .85rem;
}
@media (prefers-color-scheme: dark) {
  .mediakaart.ontbreekt .ontbreektmelding { color: #f0b4ab; }
}
.foto.isportret { outline: 2px solid var(--accent); outline-offset: -2px; }
.portretmerk {
  display: inline-block; margin-top: .4rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--accent); color: var(--accent-tekst); font-size: .72rem;
}
.letters a.actief { background: var(--accent); color: var(--accent-tekst); border-color: var(--accent); }

.inlogkaart.breed { width: min(44rem, 100%); max-height: 88vh; overflow-y: auto; }
.inlogkaart .voorbeeld {
  display: block; max-height: 220px; margin: .8rem auto; border-radius: 8px;
}
.inlogkaart select, .uploadvak select {
  width: 100%; margin-top: .25rem; padding: .4rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--lijn-sterk); border-radius: 8px;
  background: var(--papier); color: var(--inkt);
}
.uploadvak label { display: block; margin-bottom: .8rem; font-size: .85rem; color: var(--inkt-zacht); }

.voet { border-top: 1px solid var(--lijn); padding: 1.2rem; text-align: center; color: var(--inkt-zacht); font-size: .82rem; }

@media (max-width: 640px) {
  .kop-binnen { padding: .5rem .7rem; }
  .nav { order: 3; width: 100%; margin-left: 0; }
  .zoekbalk { max-width: none; }
  .held h1 { font-size: 1.8rem; }
  .feiten .label { flex-basis: 6.5rem; }
}