/* Familiebanden — een familiealbum dat beweegt. Bladeren op warm papier, kijken in het donker.
   Herkenning van de banden zit in de omlijsting (camcorder-datumstempel, VCR-letters), niet óver het beeld. */
:root {
  --papier:#f3ede2; --papier2:#ebe3d4; --kaart:#fbf8f1; --inkt:#1f1b16; --zacht:#6b6052; --lijn:#ddd3c1;
  --roest:#8a3f1d; --oranje:#c2541d; --stempel:#ffb43a; --groen:#56723f; --groen-osd:#7fd36b;
  --schaduw:0 1px 2px rgba(40,25,5,.06), 0 14px 34px -18px rgba(40,25,5,.35);
  --r:14px;
}
:root[data-theme="dark"] {
  --papier:#0e0c0a; --papier2:#171411; --kaart:#1a1612; --inkt:#efe7d9; --zacht:#a99c89; --lijn:#2c261f;
  --roest:#e08a5a; --oranje:#e5793f; --groen:#8fae78;
  --schaduw:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -18px rgba(0,0,0,.8);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html, body { overflow-x:clip; }
body { margin:0; background:var(--papier); color:var(--inkt); font:17px/1.55 "Source Sans 3", system-ui, sans-serif; transition:background .4s, color .4s; }
body::before { /* korrel op het papier, onder de inhoud */
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
main, .kop, .voet { position:relative; z-index:1; }
a { color:inherit; text-decoration:none; }
img, video { display:block; max-width:100%; }
.serif { font-family:Fraunces, Georgia, serif; font-weight:300; }
.osd { font-family:VT323, ui-monospace, monospace; letter-spacing:.07em; }
.meta { color:var(--zacht); font-size:15px; }
.wrap { max-width:1280px; margin:0 auto; padding:0 24px; }
@media (max-width:600px) { .wrap { padding:0 16px; } }
.verborgen { display:none !important; }

/* kop */
.kop { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--papier) 86%, transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--lijn); }
.kop .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; height:62px; }
.merk { font-family:Fraunces, Georgia, serif; font-weight:300; font-size:26px; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; }
.merk i { width:10px; height:10px; border-radius:50%; background:var(--oranje); box-shadow:0 0 0 3px color-mix(in srgb, var(--oranje) 25%, transparent); }
.nav { display:flex; gap:2px; }
.nav a { padding:8px 14px; border-radius:999px; font-weight:600; font-size:15px; color:var(--zacht); }
.nav a:hover { color:var(--inkt); }
.nav a.act { background:var(--inkt); color:var(--papier); }
@media (max-width:640px) { .merk { font-size:21px; } .nav { overflow-x:auto; scrollbar-width:none; } .nav a { padding:7px 9px; font-size:14px; white-space:nowrap; } .kop .wrap { gap:8px; } }

/* stempels: de camcorder */
.stempel { position:absolute; z-index:2; font-family:VT323, monospace; color:var(--stempel); letter-spacing:.08em;
  text-shadow:0 0 6px rgba(255,150,30,.55), 1px 1px 0 rgba(0,0,0,.65); pointer-events:none; }

/* hero */
.hero { position:relative; overflow:hidden; background:#0b0907; margin:22px 0 0; border-radius:22px; height:min(78vh, 720px); min-height:440px; box-shadow:var(--schaduw); }
.hero video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; }
.hero video.zicht { opacity:1; }
.hero .tekst { position:absolute; inset:auto 0 0 0; z-index:3; padding:56px 56px 50px; color:#f6efe2;
  background:linear-gradient(0deg, rgba(14,9,4,.82), rgba(14,9,4,.4) 60%, transparent); }
.hero h1 { font-family:Fraunces, Georgia, serif; font-weight:300; font-size:clamp(2.2rem, 6.4vw, 5.4rem); line-height:1; margin:0 0 16px; letter-spacing:-.02em; }
.hero p { margin:0; font-size:18px; opacity:.92; }
.hero .play { position:absolute; z-index:3; top:24px; left:28px; font-size:28px; color:#fff; display:flex; align-items:center; gap:10px; text-shadow:0 1px 2px rgba(0,0,0,.7); }
.hero .play svg { width:16px; height:18px; }
.hero .datum { top:24px; right:28px; font-size:30px; }
.hero .hero-label { position:absolute; right:30px; bottom:52px; font-size:20px; color:#fff; background:rgba(0,0,0,.45); padding:1px 10px; border-radius:6px; }
.hero .hero-label.op { color:var(--groen-osd); }
.hero .knoppen { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
@media (max-width:600px) {
  .hero { border-radius:16px; height:auto; min-height:0; aspect-ratio:3/4; }
  .hero .tekst { padding:26px 20px 22px; background:linear-gradient(0deg, rgba(14,9,4,.85), rgba(14,9,4,.3) 45%, transparent 60%); }
  .hero h1 { font-size:2.1rem; } .hero p { font-size:16px; }
  .hero .datum { font-size:22px; right:16px; top:18px; } .hero .play { font-size:22px; left:16px; top:18px; }
  .hero .hero-label { position:static; display:inline-block; margin-top:14px; font-size:17px; }
}

.knop { display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:999px; font:inherit; font-weight:600; font-size:16px; border:1px solid currentColor; background:transparent; color:inherit; cursor:pointer; }
.knop.vol { background:#f6efe2; color:#1f1b16; border-color:#f6efe2; }
.knop.donker { background:var(--inkt); color:var(--papier); border-color:var(--inkt); }
.knop.klein { padding:8px 14px; font-size:14px; }
.knop svg { width:13px; height:14px; }

.lint { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:18px 0 0; padding:14px 20px; border-radius:var(--r); background:var(--papier2); border:1px solid var(--lijn); font-size:15px; color:var(--zacht); }
.lint .balk { flex:1; min-width:140px; height:5px; border-radius:4px; background:var(--lijn); overflow:hidden; }
.lint .balk span { display:block; height:100%; background:linear-gradient(90deg, var(--oranje), var(--stempel)); }

/* jaren */
.jaren { display:flex; gap:4px; flex-wrap:wrap; margin:40px 0 0; }
.jaren a { font-family:Fraunces, Georgia, serif; font-size:22px; padding:4px 14px; border-radius:999px; color:var(--zacht); }
.jaren a:hover { color:var(--roest); background:var(--papier2); }
.jaar { margin-top:34px; scroll-margin-top:70px; }
.jaar-kop { position:sticky; top:62px; z-index:5; display:flex; align-items:center; gap:20px; padding:12px 0; margin-bottom:12px;
  background:linear-gradient(180deg, var(--papier) 75%, transparent); }
.jaar-kop .jaartal { font-family:Fraunces, Georgia, serif; font-weight:300; font-size:clamp(3.6rem, 9vw, 6.4rem); line-height:.95; color:var(--roest); letter-spacing:-.02em; }
.jaar-kop .lijn { flex:1; height:1px; background:var(--lijn); }
@media (max-width:600px) { .jaar-kop .meta { display:none; } }

/* kaarten */
.raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(250px, 100%), 1fr)); grid-auto-flow:dense; gap:18px; }
.kaart { background:var(--kaart); border:1px solid var(--lijn); border-radius:var(--r); overflow:hidden; box-shadow:var(--schaduw); display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s; }
.kaart:hover { transform:translateY(-3px); box-shadow:0 22px 40px -22px rgba(40,25,5,.55); }
.kaart.groot { grid-column:span 2; grid-row:span 2; }
@media (max-width:560px) { .kaart.groot { grid-column:auto; grid-row:auto; } }
.kaart .beeld { position:relative; overflow:hidden; background:#000; aspect-ratio:4/3; }
.kaart.groot .beeld { flex:1; aspect-ratio:auto; min-height:260px; }
.kaart .beeld img, .kaart .beeld video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.kaart .beeld video { opacity:0; transition:opacity .4s; }
.kaart .beeld video.speelt { opacity:1; }
.kaart .beeld::after { content:""; position:absolute; inset:0; pointer-events:none; transition:opacity .4s;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(10,5,0,.35) 100%); }
.kaart:hover .beeld::after { opacity:0; }
.kaart .links { left:12px; bottom:9px; font-size:19px; }
.kaart .rechts { position:absolute; z-index:2; right:12px; bottom:9px; font-size:17px; color:#fff; text-shadow:0 1px 2px #000; }
.kaart .rechts b { font-weight:400; opacity:.85; } .kaart .rechts b.op { color:var(--groen-osd); opacity:1; }
.kaart .lijf { padding:14px 16px 16px; display:flex; flex-direction:column; gap:3px; }
.kaart h3 { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:19px; line-height:1.2; margin:0; }
.kaart.groot h3 { font-size:28px; font-weight:300; }
.kaart .tekst { margin:6px 0 0; color:var(--zacht); font-size:15px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.slot { font-family:"Source Sans 3", sans-serif; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--roest); border:1px solid currentColor; border-radius:999px; padding:0 7px; vertical-align:3px; }

/* fragment: kijken in het donker */
.speler { position:relative; margin:22px auto 0; max-width:calc(76vh * 4 / 3); border-radius:16px; overflow:hidden; background:#000; box-shadow:0 30px 80px -30px rgba(0,0,0,.9); }
.speler video { width:100%; aspect-ratio:4/3; object-fit:contain; background:#000; }
.vcr { position:absolute; top:14px; right:14px; z-index:3; display:flex; gap:4px; padding:4px; border-radius:10px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
.vcr button { font-family:VT323, monospace; font-size:19px; letter-spacing:.08em; color:#d8d0c2; background:transparent; border:0; padding:2px 10px; border-radius:6px; cursor:pointer; }
.vcr button[aria-pressed="true"] { background:#f3ede2; color:#14110e; }
.vcr button[data-v="verbeterd"][aria-pressed="true"] { background:var(--groen-osd); color:#0d1a08; }
.vcr button:disabled { opacity:.5; cursor:not-allowed; }
.melding { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:44px; color:#fff; text-shadow:0 2px 8px #000; opacity:0; transition:opacity .3s; pointer-events:none; z-index:2; }
.melding.zicht { opacity:1; }
.volgende { position:absolute; right:18px; bottom:64px; z-index:3; display:flex; flex-direction:column; gap:6px; padding:16px 18px; border-radius:12px; background:rgba(14,12,10,.85); color:#f3ede2; max-width:300px; }
.volgende .serif { font-size:22px; }
.volgende .knop { padding:6px 12px; font-size:14px; align-self:flex-start; }
.frag-tekst { max-width:760px; margin:34px auto 0; }
.frag-tekst h1 { font-family:Fraunces, Georgia, serif; font-weight:300; font-size:clamp(2.2rem, 5vw, 3.4rem); line-height:1.05; margin:14px 0 14px; letter-spacing:-.015em; }
.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; padding:5px 12px; border-radius:999px; background:var(--papier2); border:1px solid var(--lijn); font-size:14px; font-weight:600; color:var(--zacht); }
.beschrijving { font-size:19px; line-height:1.6; white-space:pre-line; margin:0 0 16px; }
.leeg { color:var(--zacht); font-style:italic; }
.vak { background:var(--kaart); border:1px solid var(--lijn); border-radius:var(--r); padding:18px 20px; margin-top:22px; }
.vak summary { cursor:pointer; font-weight:600; }
.buren { display:flex; justify-content:space-between; gap:16px; max-width:1000px; margin:56px auto 0; padding-top:22px; border-top:1px solid var(--lijn); }
.buren a { display:flex; gap:14px; align-items:center; max-width:48%; }
.buren a.na { text-align:right; margin-left:auto; }
.buren img { width:150px; aspect-ratio:4/3; object-fit:cover; border-radius:8px; flex:0 0 auto; }
.buren .serif { font-size:21px; display:block; line-height:1.2; }
@media (max-width:600px) { .buren img { width:84px; } .buren .serif { font-size:17px; } }

/* bewerken */
.bewerk { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px 16px; margin-top:12px; }
.bewerk label { display:flex; flex-direction:column; gap:5px; font-size:14px; font-weight:600; color:var(--zacht); }
.bewerk .breed { grid-column:1 / -1; }
.bewerk input, .bewerk textarea { font:inherit; font-size:16px; color:var(--inkt); background:var(--papier); border:1px solid var(--lijn); border-radius:10px; padding:9px 12px; font-weight:400; }
.bewerk textarea { min-height:100px; resize:vertical; }
.bewerk input:focus, .bewerk textarea:focus { outline:2px solid color-mix(in srgb, var(--oranje) 50%, transparent); border-color:var(--oranje); }
.bewerk .vink { flex-direction:row; align-items:center; gap:10px; color:var(--inkt); font-weight:400; }
.bewerk .vink input { width:20px; height:20px; accent-color:var(--oranje); }
.bewerk .acties { grid-column:1 / -1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.bewerk .acties [data-hist] { margin-left:auto; }
@media (max-width:600px) { .bewerk { grid-template-columns:1fr; } }
.historie { font-size:14px; color:var(--zacht); margin:0; padding-left:18px; }
.sectie { margin:44px 0 0; }
.sectie > header { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.sectie h2 { font-family:Fraunces, Georgia, serif; font-weight:300; font-size:clamp(2rem, 4vw, 2.8rem); margin:0; }
.filters { display:flex; gap:4px; flex-wrap:wrap; }
.filters a { padding:7px 14px; border-radius:999px; font-weight:600; font-size:14px; color:var(--zacht); border:1px solid var(--lijn); }
.filters a.act { background:var(--inkt); color:var(--papier); border-color:var(--inkt); }
.beheer-rij { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:24px; padding:22px 0; border-top:1px solid var(--lijn); }
.beheer-rij img { border-radius:10px; aspect-ratio:4/3; object-fit:cover; width:100%; margin-bottom:6px; }
@media (max-width:700px) { .beheer-rij { grid-template-columns:1fr; } .beheer-rij img { max-width:260px; } }

.voet { margin-top:100px; padding-block:26px 56px; border-top:1px solid var(--lijn); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }

/* hoofdstukken binnen een gebeurtenis (secundair) */
.hoofdstukken { list-style:none; display:flex; gap:10px; overflow-x:auto; padding:14px 2px 6px; margin:0 auto; max-width:calc(76vh * 4 / 3); scroll-snap-type:x proximity; }
.hoofdstukken li { flex:0 0 168px; scroll-snap-align:start; }
.hoofdstukken button { width:100%; text-align:left; background:transparent; border:0; padding:0; color:inherit; font:inherit; cursor:pointer; position:relative; display:flex; flex-direction:column; gap:4px; opacity:.72; }
.hoofdstukken button:hover, .hoofdstukken button.act { opacity:1; }
.hoofdstukken img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; outline:2px solid transparent; outline-offset:2px; }
.hoofdstukken button.act img { outline-color:var(--stempel); }
.hoofdstukken .osd { position:absolute; top:4px; left:8px; font-size:18px; color:var(--stempel); text-shadow:0 1px 2px #000; }
.hoofdstukken b { font-weight:600; font-size:14px; line-height:1.25; }
.hoofdstukken .meta { font-size:13px; }
.dit-fragment { margin:0 0 10px; }
.bewerk select { font:inherit; font-size:16px; color:var(--inkt); background:var(--papier); border:1px solid var(--lijn); border-radius:10px; padding:9px 12px; }
.frag-lijst { margin-top:14px; }
.frag-lijst summary { cursor:pointer; font-weight:600; }
.frag-rij { display:grid; grid-template-columns:120px minmax(0,1fr); gap:16px; padding:14px 0; border-top:1px dashed var(--lijn); }
.frag-rij img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }

/* hoofdstukken op de tijdlijn (sectie onder het jaartal) */
.hoofdstuk { margin:10px 0 38px; }
.hoofdstuk > header { border-left:3px solid var(--oranje); padding:2px 0 2px 16px; margin-bottom:16px; }
.hoofdstuk > header h2 { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:clamp(1.6rem, 3.4vw, 2.2rem); margin:0; letter-spacing:-.01em; }
.hoofdstuk > header .meta { margin:4px 0 0; }
.hoofdstuk-tekst { margin:8px 0 0; max-width:70ch; color:var(--zacht); }
.raster.los { margin-bottom:24px; }
.splits-balk { display:flex; gap:12px; align-items:center; max-width:calc(76vh * 4 / 3); margin:10px auto 0; }
.hoofdstuk-osd { position:absolute; left:16px; bottom:58px; z-index:2; font-size:19px; color:#fff; text-shadow:0 1px 3px #000; pointer-events:none; max-width:70%; }
.herkomst { font-family:VT323, monospace; font-size:17px; letter-spacing:.05em; color:var(--stempel); }
/* beheer: boom */
.boom-rij { border-top:1px solid var(--lijn); }
.boom-rij > summary { display:flex; gap:14px; align-items:center; padding:10px 0; cursor:pointer; list-style:none; }
.boom-rij > summary::-webkit-details-marker { display:none; }
.boom-rij > summary img, .boom-rij > summary .geen-beeld { width:96px; aspect-ratio:4/3; object-fit:cover; border-radius:6px; flex:0 0 auto; background:var(--papier2); }
.boom-rij > summary > span { display:flex; flex-direction:column; }
.boom-rij.d0 > summary b { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:24px; }
.boom-rij.d1 > summary b { font-size:18px; }
.boom-rij .rij-lijf { padding-left:28px; border-left:2px solid var(--lijn); margin-left:46px; }
.boom-rij.d2 > summary img, .boom-rij.d3 > summary img { width:72px; }
.rij-acties { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:6px 0 10px; }
.rij-acties select { font:inherit; font-size:14px; padding:6px 10px; border-radius:8px; border:1px solid var(--lijn); background:var(--papier); color:var(--inkt); max-width:420px; }
.rij-bewerk summary { cursor:pointer; padding:4px 0; }
.los-kop { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:22px; margin:34px 0 6px; }

/* correcties onder de speler en in Beheer */
.correctie { max-width:calc(76vh * 4 / 3); margin:12px auto 0; }
.correctie textarea { width:100%; font:inherit; font-size:16px; color:var(--inkt); background:var(--papier2); border:1px solid var(--lijn); border-radius:12px; padding:10px 12px; resize:vertical; }
.correctie textarea:focus { outline:2px solid color-mix(in srgb, var(--oranje) 50%, transparent); border-color:var(--oranje); }
.correctie-acties { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.beheer-tabs { margin-bottom:18px; }
.corr-rij { border-top:1px solid var(--lijn); padding:14px 0; }
.corr-rij p { margin:4px 0; }
.corr-tekst { font-family:Fraunces, Georgia, serif; font-size:19px; }
.voorstel { background:var(--papier2); border-radius:10px; padding:8px 12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
table.wijz { width:100%; border-collapse:collapse; font-size:15px; }
table.wijz th, table.wijz td { text-align:left; vertical-align:top; padding:8px; border-bottom:1px solid var(--lijn); }

/* personen, families, inloggen (20-10) */
.filterbalk { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:18px 0 6px; }
.filterbalk .chip.act { background:var(--inkt); color:var(--papier); border-color:var(--inkt); }
.filterbalk select, .gezicht input, form.ww input { font:inherit; font-size:15px; padding:7px 12px; border-radius:10px; border:1px solid var(--lijn); background:var(--kaart); color:var(--inkt); }
.slot-melding { margin:6px 0 0; }
.inlog { max-width:420px; margin:12vh auto 18vh; display:flex; flex-direction:column; gap:12px; }
.inlog .osd { font-size:22px; color:var(--oranje); }
.inlog h1 { font-family:Fraunces, Georgia, serif; font-weight:300; font-size:44px; margin:0; }
.inlog form { display:flex; gap:10px; flex-wrap:wrap; }
.inlog input { flex:1; min-width:0; font:inherit; padding:12px 16px; border-radius:999px; border:1px solid var(--lijn); background:var(--kaart); color:var(--inkt); }
.als-balk { position:sticky; top:62px; z-index:19; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; padding:8px 16px; background:var(--oranje); color:#fff; font-weight:600; }
.als-balk .knop { color:#fff; }
.gezichten { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap:16px; margin:14px 0 24px; }
.gezicht { background:var(--kaart); border:1px solid var(--lijn); border-radius:var(--r); padding:12px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--schaduw); }
.gezicht .fotos { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.gezicht .fotos img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:#000; }
.gezicht .acties { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.groep-foto { position:relative; }
.groep-foto button { position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.65); color:#fff; cursor:pointer; line-height:1; }
.klein-groepen summary { cursor:pointer; margin:10px 0; }
form.ww { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.mensen { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; margin:10px 0 26px; }
.mens { display:flex; flex-direction:column; gap:4px; }
.mens img, .mens .geen-beeld { width:100%; aspect-ratio:1; object-fit:cover; border-radius:50%; background:var(--papier2); border:3px solid var(--kaart); box-shadow:var(--schaduw); }
.mens b { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:18px; margin-top:6px; }
.sectie header.persoon-kop { display:flex; gap:20px; align-items:center; justify-content:flex-start; margin-bottom:10px; text-align:left; }
.persoon-kop img { width:120px; height:120px; border-radius:50%; object-fit:cover; box-shadow:var(--schaduw); }
.persoon-kop h2 { margin:0; }
.downloads a { text-decoration:underline; text-underline-offset:3px; }
@media (max-width:600px) { .persoon-kop img { width:84px; height:84px; } .inlog h1 { font-size:34px; } }
.naamveld { position:relative; }
.naamveld input { width:100%; }
.suggesties { position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:5; background:var(--kaart); border:1px solid var(--lijn); border-radius:12px; box-shadow:var(--schaduw); overflow:hidden; }
.suggesties button { display:flex; gap:10px; align-items:center; width:100%; padding:8px 10px; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
.suggesties button:hover, .suggesties button.act { background:var(--papier2); }
.suggesties img, .suggesties .geen-beeld { width:36px; height:36px; border-radius:50%; object-fit:cover; flex:none; background:var(--papier2); }
.suggesties b { display:block; font-weight:600; }
.bestaat { margin:-2px 0 0; color:var(--groen); }
.gezicht { position:relative; }
.weg-x { position:absolute; top:-10px; right:-10px; z-index:3; width:34px; height:34px; border-radius:50%; border:1px solid var(--lijn); background:var(--kaart); color:var(--zacht); font-size:20px; line-height:1; cursor:pointer; box-shadow:var(--schaduw); }
.weg-x:hover { background:var(--oranje); color:#fff; border-color:var(--oranje); }
.gezicht.weg-bezig { opacity:.3; transition:opacity .2s; }
.weg-kaart .fotos img { filter:grayscale(.6); }
.vraag { background:var(--kaart); border:1px solid var(--lijn); border-radius:var(--r); padding:14px; margin:12px 0 18px; box-shadow:var(--schaduw); }
.vraag header { display:flex; gap:14px; align-items:center; margin-bottom:10px; }
.vraag header img { width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; }
.vraag h3 { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:22px; margin:0 0 2px; }
.vraag-tegels { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap:10px; margin-bottom:10px; }
.vraag-tegel { position:relative; display:block; border-radius:10px; padding:4px; border:2px solid transparent; cursor:pointer; background:var(--papier2); }
.vraag-tegel:has(input:checked) { border-color:var(--groen); }
.vraag-tegel input { position:absolute; top:8px; left:8px; width:22px; height:22px; z-index:2; accent-color:var(--groen); }
.vraag-tegel .fotos { display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; }
.vraag-tegel img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
.vraag-tegel:not(:has(input:checked)) img { opacity:.55; }
.vraag .acties { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.wie { margin:14px 0 6px; padding:12px 14px; border:1px dashed var(--lijn); border-radius:12px; }
.wie-kop { margin:0 0 8px; font-weight:600; } .wie-kop span { font-weight:400; }
.wie .chips { align-items:center; }
.wie-chip { color:var(--inkt); gap:6px; }
.wie-chip button { border:0; background:none; color:var(--zacht); cursor:pointer; font-size:16px; line-height:1; padding:0 0 0 2px; }
.wie .naamveld { min-width:220px; flex:1; max-width:340px; }
.wie .naamveld input { font:inherit; font-size:15px; padding:6px 12px; border-radius:999px; border:1px solid var(--lijn); background:var(--kaart); color:var(--inkt); }
.voorstel-chip { cursor:pointer; border-style:dashed; font:inherit; font-size:14px; font-weight:600; }
.voorstel-chip:hover { background:var(--groen); color:#fff; border-color:var(--groen); }
.geen-beeld.plus { display:grid; place-items:center; font-weight:600; color:var(--zacht); }
.takken .chips { align-items:center; }
.tak { cursor:pointer; font:inherit; font-size:14px; font-weight:600; }
.tak.act { background:var(--groen); color:#fff; border-color:var(--groen); }
.nieuwe-tak, .takken .jaar { font:inherit; font-size:14px; padding:5px 10px; border-radius:999px; border:1px solid var(--lijn); background:var(--kaart); color:var(--inkt); width:130px; }
.takken .jaar { width:80px; }
.bewerk-aan { margin-left:auto; }
.bewerk-paneel { margin:16px 0; padding:16px; border:1px solid var(--lijn); border-radius:var(--r); background:var(--papier2); }
.bewerk-paneel h3 { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:20px; margin:18px 0 4px; }
.bewerk-paneel h3:first-child { margin-top:0; }
.bewerk-paneel .bewerk input, .bewerk-paneel .bewerk textarea, .bewerk-paneel .bewerk select { background:var(--kaart); color:var(--inkt); }
.bewerk-knop { position:absolute; top:10px; right:10px; z-index:3; font-size:13px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--kaart); color:var(--inkt); border:1px solid var(--lijn); box-shadow:var(--schaduw); cursor:pointer; opacity:0; transition:opacity .2s; }
.kaart { position:relative; }
.kaart:hover .bewerk-knop, .kaart:focus-within .bewerk-knop, .bewerk-knop:focus { opacity:1; }
.hoofdstuk h2 .bewerk-knop { position:static; opacity:1; vertical-align:middle; box-shadow:none; font-family:"Source Sans 3", system-ui, sans-serif; }
.bewerk-dialoog { width:min(760px, calc(100vw - 32px)); max-height:calc(100vh - 48px); border:1px solid var(--lijn); border-radius:var(--r); background:var(--papier); color:var(--inkt); padding:20px; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.bewerk-dialoog::backdrop { background:rgba(20,15,10,.45); }
.bewerk-dialoog > header { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.bewerk-dialoog h2 { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:24px; margin:0; }

/* --- navigatie: niveau, kruimelpad, band (20-10) --- */
.niveau { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--zacht); }
.pad { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:18px 0 0; font-size:15px; color:var(--zacht); }
.pad a { color:var(--zacht); border-bottom:1px solid transparent; } .pad a:hover { color:var(--inkt); border-color:currentColor; }
.pad-sep { opacity:.6; } .pad-nu { color:var(--inkt); font-weight:600; } .pad-nu:empty { display:none; }
.pad-nu:empty + .pad-sep, .pad-sep:has(+ .pad-nu:empty) { display:none; }
.ico { width:1.1em; height:.8em; vertical-align:-.08em; flex:none; }
.band-label { display:inline-flex; align-items:center; gap:6px; color:inherit; border-bottom:1px solid transparent; } .band-label:hover { border-color:currentColor; }
.band-regel { display:inline-flex; gap:6px; align-items:center; font-size:13px; }
.herkomst-regel { margin-top:4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.niveau-kop { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:14px 0 22px; }
.niveau-kop h1 { font-family:Fraunces, Georgia, serif; font-weight:300; font-size:clamp(2rem, 4.5vw, 3rem); line-height:1.05; margin:4px 0 8px; letter-spacing:-.015em; }
.banden-regel { display:flex; gap:14px; flex-wrap:wrap; }
.hoofdstuk header h2 a { color:inherit; }
.banden-lijst { display:flex; flex-direction:column; gap:10px; }
.band-rij { display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--kaart); border:1px solid var(--lijn); border-radius:var(--r); box-shadow:var(--schaduw); }
.band-rij .ico { width:34px; height:26px; color:var(--roest); }
.band-titel { display:flex; flex-direction:column; } .band-titel b { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:20px; }
.band-inhoud { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:8px; }
.band-inhoud a { display:flex; gap:14px; align-items:center; padding:8px; border-radius:12px; } .band-inhoud a:hover { background:var(--papier2); }
.band-inhoud img { width:120px; aspect-ratio:4/3; object-fit:cover; border-radius:8px; flex:none; }
.band-inhoud .osd { color:var(--roest); font-size:17px; } .band-inhoud b { display:block; font-family:Fraunces, Georgia, serif; font-weight:400; font-size:19px; }
.band-pagina .bewerk-paneel { margin-top:0; }
/* --- speler: eigen bediening over alleen deze gebeurtenis --- */
.speler:focus { outline:2px solid var(--oranje); outline-offset:3px; }
.groot-play { position:absolute; inset:0; margin:auto; width:92px; height:92px; border-radius:50%; border:0; background:rgba(14,12,10,.7); color:#f3ede2; display:grid; place-items:center; cursor:pointer; z-index:2; transition:opacity .2s; }
.groot-play svg { width:30px; height:34px; margin-left:5px; }
.speler.speelt .groot-play { opacity:0; pointer-events:none; }
.bediening { position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:12px; padding:34px 14px 12px; background:linear-gradient(to top, rgba(0,0,0,.75), transparent); color:#f3ede2; }
.balk-play, .balk-vol { border:0; background:transparent; color:inherit; cursor:pointer; padding:4px; display:grid; place-items:center; }
.balk-play svg { width:14px; height:16px; } .balk-vol { font-size:18px; }
.balk-tijd { font-size:18px; white-space:nowrap; }
.tijdbalk { position:relative; flex:1; height:22px; cursor:pointer; touch-action:none; }
.tijdbalk::before { content:""; position:absolute; left:0; right:0; top:9px; height:4px; border-radius:2px; background:rgba(255,255,255,.3); }
.tijd-vol { position:absolute; left:0; top:9px; height:4px; border-radius:2px; background:var(--stempel); pointer-events:none; }
.tijd-vol::after { content:""; position:absolute; right:-7px; top:-5px; width:14px; height:14px; border-radius:50%; background:var(--stempel); box-shadow:0 0 0 3px rgba(0,0,0,.35); }
.tijdbalk .tik { position:absolute; top:7px; width:2px; height:8px; background:rgba(255,255,255,.85); pointer-events:none; }
.tijdbalk:focus { outline:none; } .tijdbalk:focus::before { background:rgba(255,255,255,.5); }
@media (max-width:600px) { .bediening { gap:8px; padding:26px 10px 10px; } .balk-tijd { font-size:15px; } .groot-play { width:68px; height:68px; } }

/* --- review 20-10 --- */
.pad-rij { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.pad-rij .pad { margin-top:14px; } .pad-rij .bewerk-aan { margin:14px 0 0; }
.geb-kop { max-width:760px; margin:18px auto 0; text-align:center; }
.geb-kop h1 { font-family:Fraunces, Georgia, serif; font-weight:300; font-size:clamp(2rem, 4.5vw, 3rem); line-height:1.05; margin:6px 0 6px; letter-spacing:-.015em; }
.geb-kop .meta { margin:0; }
.fragmenten { max-width:calc(76vh * 4 / 3); margin:16px auto 0; position:relative; }
.fragmenten h2 { margin:0 0 2px; }
.fragmenten::after { content:""; position:absolute; right:0; top:28px; bottom:6px; width:40px; background:linear-gradient(to right, transparent, var(--papier)); pointer-events:none; }
.hoofdstukken { padding-top:6px; }
.frag-tekst { margin-top:26px; }
.frag-tekst .beschrijving { margin-top:0; }
.downloads { margin-top:14px; } .downloads summary { list-style:none; display:inline-flex; cursor:pointer; } .downloads summary::-webkit-details-marker { display:none; }
.downloads[open] summary { margin-bottom:8px; }
.jaar-kop { background:var(--papier); }
.hoofdstuk.los header h2 { font-size:22px; }
.initialen { display:grid; place-items:center; font-family:Fraunces, Georgia, serif; font-size:34px; color:var(--roest); }
@media (max-width:600px) { .pad { font-size:14px; } .geb-kop { text-align:left; } }

/* --- Laurens 20-10 (tweede ronde) --- */
.speler-rij { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin-top:22px; }
.speler-rij .speler { margin-top:0; width:calc(76vh * 4 / 3); max-width:100%; }
.zij-pijl { display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--zacht); text-align:center; max-width:160px; margin:0 auto; }
.zij-pijl span { font-family:Fraunces, Georgia, serif; font-size:56px; line-height:1; }
.zij-pijl small { font-size:13px; line-height:1.25; }
.zij-pijl:hover { color:var(--inkt); }
.zij-pijl.leeg { visibility:hidden; }
@media (max-width:1000px) { .speler-rij { display:block; } .speler-rij .speler { width:auto; margin:22px auto 0; } .zij-pijl { display:none; } }
.frag-osd { position:absolute; left:16px; top:16px; z-index:3; font-size:22px; color:#f3ede2; padding:4px 12px; border-radius:8px; background:rgba(0,0,0,.6); opacity:0; transition:opacity .3s; pointer-events:none; }
.frag-osd.zicht { opacity:1; }
.bewerk-rij { margin:14px 0 0; }
.bewerk-paneel form.bewerk .acties button[type=submit] { display:none; }  /* één knop onderaan het paneel */
.paneel-voet { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:18px 0 0; }
.band-rij .band-jaar { font-size:26px; color:var(--roest); min-width:76px; }
.band-pagina .bewerk select { font:inherit; padding:8px 10px; border-radius:10px; border:1px solid var(--lijn); background:var(--kaart); color:var(--inkt); }

/* --- derde ronde 20-10 --- */
.filterbalk { flex-direction:column; align-items:stretch; gap:8px; padding:14px 16px; margin:22px 0 10px; background:var(--kaart); border:1px solid var(--lijn); border-radius:var(--r); box-shadow:var(--schaduw); }
.fgroep { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.fgroep .niveau { min-width:64px; }
.fchip { display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 6px; border-radius:999px; border:1px solid var(--lijn); background:var(--papier); font-size:14px; font-weight:600; color:var(--inkt); transition:background .15s, border-color .15s; }
.fchip:not(.pers) { padding-left:12px; }
.fchip img, .fchip i { width:26px; height:26px; border-radius:50%; object-fit:cover; background:var(--papier2); display:grid; place-items:center; font:600 13px "Source Sans 3", sans-serif; font-style:normal; color:var(--roest); }
.fchip:hover { border-color:var(--inkt); }
.fchip.act { background:var(--inkt); color:var(--papier); border-color:var(--inkt); }
.fchip.act img { box-shadow:0 0 0 2px var(--papier); }
.fstand { justify-content:space-between; border-top:1px solid var(--lijn); padding-top:8px; margin-top:2px; }
/* bandpagina: uitvouwen naar fragmenten */
.band-inhoud summary { list-style:none; display:flex; gap:14px; align-items:center; padding:8px; border-radius:12px; cursor:pointer; }
.band-inhoud summary::-webkit-details-marker { display:none; }
.band-inhoud summary:hover { background:var(--papier2); }
.band-inhoud summary > span:nth-child(2) { flex:1; }
.band-inhoud .pijl { font-family:Fraunces, Georgia, serif; font-size:30px; color:var(--zacht); transition:transform .2s; }
.band-inhoud details[open] .pijl { transform:rotate(90deg); }
.band-fragmenten { list-style:none; margin:0 0 10px 142px; padding:0 0 0 14px; border-left:2px solid var(--lijn); }
.band-fragmenten a { display:flex; gap:12px; align-items:baseline; padding:5px 8px; border-radius:8px; }
.band-fragmenten a:hover { background:var(--papier2); }
.band-fragmenten .osd { color:var(--roest); min-width:110px; }
@media (max-width:600px) { .band-fragmenten { margin-left:0; } .band-inhoud summary img { width:84px; } }
/* speler boven de vouw */
.speler-rij .speler { width:min(calc(76vh * 4 / 3), calc((100vh - 250px) * 4 / 3)); }
.zij-pijl img { width:120px; aspect-ratio:4/3; object-fit:cover; border-radius:8px; opacity:.85; }
.zij-pijl:hover img { opacity:1; }
@media (min-width:1001px) { .buren { display:none; } }
.geb-kop h1 { font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin:4px 0 2px; }
.geb-kop { margin-top:10px; }
.pad { margin-top:12px; }
/* introkaart */
.intro-osd { position:absolute; left:0; right:0; bottom:70px; z-index:3; display:flex; flex-direction:column; align-items:flex-start; gap:2px; padding:16px 22px; color:#f3ede2; background:linear-gradient(to right, rgba(0,0,0,.72), transparent 80%); opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s; pointer-events:none; }
.intro-osd.zicht { opacity:1; transform:none; }
.intro-osd .niveau { color:#d8d0c2; }
.intro-osd b { font-size:clamp(1.4rem, 3vw, 2.2rem); line-height:1.1; }
.intro-osd .osd { font-size:19px; color:var(--stempel); }
.intro-osd [data-intro-frag] { font-size:15px; color:#d8d0c2; }
.volgende b[data-tel] { font-family:Fraunces, Georgia, serif; font-size:22px; color:var(--stempel); }
/* bioscoop: hele pagina fullscreen, alleen de speler */
body.bioscoop .kop, body.bioscoop .voet, body.bioscoop #als-balk, body.bioscoop #app > *:not(.speler-rij), body.bioscoop .zij-pijl { display:none !important; }
body.bioscoop { background:#000; }
body.bioscoop #app { max-width:none; padding:0; }
body.bioscoop .speler-rij { display:block; margin:0; }
body.bioscoop .speler-rij .speler { width:100vw; max-width:none; height:100vh; margin:0; border-radius:0; display:flex; align-items:center; }
body.bioscoop .speler video { width:100%; height:100vh; aspect-ratio:auto; }
.balk-wie { border:1px solid rgba(255,255,255,.5); background:transparent; color:inherit; font:inherit; font-size:13px; font-weight:600; padding:3px 10px; border-radius:999px; cursor:pointer; }
.balk-wie:hover { background:rgba(255,255,255,.15); }
.wie-osd { position:absolute; right:12px; bottom:70px; z-index:5; width:min(460px, calc(100% - 24px)); padding:8px 10px; border-radius:12px; background:rgba(14,12,10,.9); color:#f3ede2; backdrop-filter:blur(6px); display:flex; align-items:flex-start; gap:8px; }
.wie-osd .wie-kop { display:none; }
.wie-osd .wie .chips { gap:5px; }
.wie-osd .wie-chip { padding:3px 9px; font-size:13px; }
.wie-osd .wie .naamveld { min-width:150px; max-width:220px; }
.wie-osd .wie .naamveld input { padding:4px 10px; font-size:14px; }
.wie-osd .suggesties { top:auto; bottom:calc(100% + 4px); max-height:260px; overflow:auto; }
.wie-osd .suggesties button { padding:6px 8px; } .wie-osd .suggesties img, .wie-osd .suggesties .geen-beeld { width:30px; height:30px; }
.wie-osd .voorstel-chip { font-size:12px; padding:3px 8px; }
.wie-osd .knop.klein { padding:4px 10px; font-size:13px; }
.wie-osd .wie { margin:0; padding:0; border:0; }
.wie-osd .wie-chip { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#f3ede2; }
.wie-osd .wie .naamveld input { background:rgba(255,255,255,.1); color:#f3ede2; border-color:rgba(255,255,255,.3); }
.wie-osd .suggesties { background:#1a1612; border-color:#3a322c; color:#efe7d9; } .wie-osd .suggesties button:hover, .wie-osd .suggesties button.act { background:#2a241e; }
.wie-osd .voorstel-chip { color:#f3ede2; border-color:rgba(255,255,255,.4); }
.wie-osd .knop { align-self:flex-start; color:#f3ede2; flex:none; }

/* --- vierde ronde 20-10 --- */
.familie-blok { margin:8px 0 26px; }
.familie-kop { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:10px 0 6px; border-bottom:1px solid var(--lijn); margin-bottom:14px; }
.familie-kop h3 { font-family:Fraunces, Georgia, serif; font-weight:300; font-size:clamp(1.6rem, 3.4vw, 2.2rem); margin:0; color:var(--roest); }
.familie-kop:hover h3 { text-decoration:underline; text-underline-offset:4px; }
.leeg-filter { margin:30px 0; }
.balk-knop { border:0; background:transparent; color:inherit; font-family:Fraunces, Georgia, serif; font-size:26px; line-height:1; padding:0 6px; cursor:pointer; text-decoration:none; }
.balk-knop.uit { opacity:.3; }
.balk-knop:hover { color:var(--stempel); }
.bevries { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:2; display:none; pointer-events:none; }
.bevries.zicht { display:block; }
.speler.rust .vcr, .speler.rust .balk-wie, .speler.rust .bediening, .speler.rust .intro-osd, .speler.rust .frag-osd { opacity:0 !important; transition:opacity .5s; }
.speler.rust { cursor:none; }
.speler .vcr, .speler .balk-wie { transition:opacity .3s; }
.sectie .uitleg-kop { margin-top:-6px; }
.sectie > header.niveau-kop { margin-bottom:6px; }
.beheer-tabs { margin-bottom:18px; }
@media (max-width:600px) { .balk-knop { font-size:22px; padding:0 3px; } }
.mens { position:relative; }
.mens .gok { position:absolute; right:8%; top:0; width:26px; height:26px; border-radius:50%; background:var(--stempel); color:#1f1b16; font:600 15px "Source Sans 3", sans-serif; font-style:normal; display:grid; place-items:center; box-shadow:var(--schaduw); }

/* --- vijfde ronde 20-10: gezichten per persoon, profielfoto, stamboom --- */
.bewerk-dialoog form.bewerk .acties button[type=submit] { display:none; }
.persoon-gezichten { border:1px solid var(--lijn); border-radius:var(--r); background:var(--kaart); margin:10px 0; box-shadow:var(--schaduw); }
.persoon-gezichten summary { list-style:none; display:flex; align-items:center; gap:14px; padding:12px 16px; cursor:pointer; }
.persoon-gezichten summary::-webkit-details-marker { display:none; }
.persoon-gezichten summary img, .persoon-gezichten summary .geen-beeld { width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; }
.persoon-gezichten summary > span:nth-child(2) { flex:1; display:flex; flex-direction:column; }
.persoon-gezichten summary b { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:20px; }
.persoon-gezichten .pijl { font-family:Fraunces, Georgia, serif; font-size:30px; color:var(--zacht); transition:transform .2s; }
.persoon-gezichten[open] .pijl { transform:rotate(90deg); }
.kandidaten { padding:0 16px 14px; }
.kandidaat.gekoppeld { border-color:var(--groen); }
.foto-knop { position:relative; border:0; padding:0; background:none; cursor:pointer; border-radius:8px; overflow:hidden; }
.foto-knop img { display:block; width:100%; aspect-ratio:1; object-fit:cover; }
.foto-knop .ster { position:absolute; right:4px; bottom:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); color:var(--stempel); font-size:14px; display:grid; place-items:center; opacity:0; transition:opacity .15s; }
.foto-knop:hover .ster, .foto-knop:focus .ster { opacity:1; }
.foto-rooster { display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:8px; max-height:60vh; overflow:auto; }
.foto-knop.gek { outline:3px solid var(--groen); }
.generatie { margin:6px 0 18px; }
.generatie-rij { display:flex; flex-wrap:wrap; gap:22px 34px; align-items:flex-start; margin-top:8px; }
.stel { display:flex; gap:10px; align-items:flex-start; position:relative; padding-top:0; }
.stel .mens { width:140px; }
.stel.paar { padding:10px; border:1px dashed var(--lijn); border-radius:16px; }
.hartje { align-self:center; color:var(--roest); font-size:22px; }
.ouders-van { position:absolute; top:-18px; left:12px; font-size:12px; }
.rel-soort, .rel-wie { font:inherit; font-size:13px; padding:4px 8px; border-radius:999px; border:1px solid var(--lijn); background:var(--kaart); color:var(--inkt); }
.relaties .wie-chip { font-size:13px; }
.gekoppeld-strip { margin:0 0 10px; } .gekoppeld-strip summary { cursor:pointer; }
.gekoppeld-strip .gezichten { grid-template-columns:repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.wie-osd .suggesties { min-width:260px; width:max-content; max-width:min(380px, calc(100vw - 40px)); }
.wie-osd .suggesties b { white-space:nowrap; }

/* --- zesde ronde 20-10: Wat?-overlay, pen bij fragmenttitel --- */
.wat-osd { position:absolute; right:12px; bottom:70px; z-index:5; width:min(560px, calc(100% - 24px)); max-height:calc(100% - 90px); overflow:auto; padding:12px 14px; border-radius:12px; background:rgba(14,12,10,.92); color:#f3ede2; backdrop-filter:blur(6px); }
.wat-osd .bewerk { margin-top:0; gap:8px 12px; }
.wat-osd .bewerk label { color:#d8d0c2; font-size:13px; }
.wat-osd .bewerk input, .wat-osd .bewerk textarea, .wat-osd .bewerk select, .wat-osd .correctie textarea { background:rgba(255,255,255,.1); color:#f3ede2; border-color:rgba(255,255,255,.3); font-size:14px; padding:6px 10px; }
.wat-osd .bewerk textarea { min-height:70px; }
.wat-osd .bewerk .acties button[type=submit], .wat-osd .bewerk [data-hist], .wat-osd .historie { display:none; }
.wat-osd .correctie { margin-top:8px; } .wat-osd .correctie-acties { margin-top:6px; }
.wat-osd .paneel-voet { margin-top:10px; } .wat-osd .knop { color:#f3ede2; }
.wat-osd a.meta { color:#d8d0c2; }
.hoofdstukken li { position:relative; }
.ftitel-rij { display:flex; align-items:baseline; gap:6px; }
.pen { font-size:12px; color:var(--zacht); cursor:pointer; opacity:.7; } .pen:hover, .pen:focus { opacity:1; color:var(--oranje); }
.ftitel-invoer { font:inherit; font-weight:600; width:100%; padding:2px 6px; border-radius:6px; border:1px solid var(--lijn); background:var(--kaart); color:var(--inkt); }
.bewerk select { font:inherit; padding:8px 10px; border-radius:10px; border:1px solid var(--lijn); background:var(--kaart); color:var(--inkt); }

/* --- zevende ronde 20-10 --- */
.wat-osd .knop.donker, .lijst-osd .knop.donker { background:#f3ede2; color:#14110e; border-color:#f3ede2; }
.wat-osd .bewerk label.vink, .wat-osd .bewerk [name=verborgen], .wat-osd .bewerk [name=poster_scene] { display:none; }
.zij-pijl em { font-style:normal; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--oranje); display:inline-flex; gap:4px; align-items:center; }
.zij-pijl.wissel img { outline:2px solid var(--oranje); outline-offset:2px; }
.wissel-label { color:var(--stempel); }
.balk-knop.hart.aan { color:#ff6b6b; } .balk-knop.hart { font-size:22px; } .balk-knop.plus { font-size:24px; }
.lijst-osd .chips { margin:6px 0 10px; } .lijst-osd .fchip { background:rgba(255,255,255,.1); color:#f3ede2; border-color:rgba(255,255,255,.3); } .lijst-osd .fchip.act { background:#f3ede2; color:#14110e; }
.lijst-osd .correctie input { font:inherit; font-size:14px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#f3ede2; }
.lijst-items { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-direction:column; gap:8px; }
.lijst-item { display:flex; align-items:center; gap:10px; }
.lijst-item a { display:flex; gap:14px; align-items:center; padding:8px; border-radius:12px; flex:1; } .lijst-item a:hover { background:var(--papier2); }
.lijst-item img { width:120px; aspect-ratio:4/3; object-fit:cover; border-radius:8px; flex:none; }
.lijst-item b { display:block; font-family:Fraunces, Georgia, serif; font-weight:400; font-size:19px; }
#melding-balk { position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); z-index:60; padding:10px 18px; border-radius:999px; background:var(--inkt); color:var(--papier); font-weight:600; opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; max-width:min(680px, calc(100vw - 32px)); }
#melding-balk.zicht { opacity:1; transform:translate(-50%, 0); }
#melding-balk.fout { background:var(--roest); color:#fff; }

/* --- achtste ronde 20-10: gezinnen --- */
.gezin-knoppen { display:flex; flex-wrap:wrap; gap:12px; margin:4px 0 26px; }
.gezin-knop { display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:999px; background:var(--kaart); border:1px solid var(--lijn); box-shadow:var(--schaduw); transition:transform .2s, box-shadow .2s; }
.gezin-knop:hover { transform:translateY(-2px); }
.gezin-knop .gezichtjes { display:flex; } .gezin-knop .gezichtjes img, .gezin-knop .gezichtjes i { width:34px; height:34px; border-radius:50%; object-fit:cover; border:2px solid var(--kaart); margin-right:-10px; background:var(--papier2); display:grid; place-items:center; font-style:normal; font-weight:600; color:var(--roest); }
.gezin-knop b { font-family:Fraunces, Georgia, serif; font-weight:400; font-size:19px; margin-left:10px; }
.gezin-knop .meta { font-size:13px; }
.gezin-veld { width:150px; }

/* --- negende ronde 21-10 --- */
.takken td { vertical-align:top; padding-top:12px; }
.takken .relaties { flex-direction:column; align-items:flex-start; gap:6px; }
.takken .relaties .wie-chip { white-space:nowrap; }
.gezinnen-rij { display:flex; flex-wrap:wrap; gap:10px; }
.gezin-blok { display:flex; flex-direction:column; gap:8px; padding:8px; border:1.5px solid var(--lijn); border-radius:18px; background:var(--papier); transition:border-color .2s, background .2s; }
.gezin-blok .gezin-naam { display:inline-block; align-self:stretch; text-align:center; padding:6px 14px; border-radius:12px; background:var(--papier2); font-family:Fraunces, Georgia, serif; font-size:18px; color:var(--inkt); }
.gezin-blok .gezin-naam:hover { background:var(--inkt); color:var(--papier); }
.gezin-blok .gezin-naam.stil { background:transparent; color:var(--zacht); font-family:"Source Sans 3", sans-serif; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.gezin-blok .leden { display:flex; flex-wrap:wrap; gap:6px; padding:0 2px; }
.gezin-blok.act { border-color:var(--groen); background:color-mix(in srgb, var(--groen) 10%, var(--papier)); }
.gezin-blok.act .gezin-naam { background:var(--groen); color:#fff; }
.gezin-blok.act .fchip:not(.act) { border-color:var(--groen); background:color-mix(in srgb, var(--groen) 18%, var(--papier)); }
.lijst-item .lijst-nr { color:var(--roest); font-size:20px; min-width:28px; text-align:right; }
.lijst-item a > span { display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.lijst-knoppen { display:flex; gap:4px; flex:none; } .lijst-knoppen .knop { padding:4px 9px; }
.band-rij.uitklap { display:block; padding:0; }
.band-rij.uitklap summary { list-style:none; display:flex; align-items:center; gap:14px; padding:14px 16px; cursor:pointer; }
.band-rij.uitklap summary::-webkit-details-marker { display:none; }
.band-rij.uitklap > summary .band-titel { flex:1; }
.band-rij.uitklap > summary .pijl { font-family:Fraunces, Georgia, serif; font-size:30px; color:var(--zacht); transition:transform .2s; }
.band-rij.uitklap[open] > summary .pijl { transform:rotate(90deg); }
.band-inhoud-wrap { padding:0 16px 14px 16px; border-top:1px solid var(--lijn); }
.band-inhoud-wrap .band-inhoud { margin-top:6px; }

/* --- mobiel (Laurens 21-10, iPhone-screenshot): bediening in twee rijen, menu past --- */
@media (max-width:700px) {
  /* rij 1: tijdbalk + tijd; rij 2: ‹ ▶ › links, ♡ + Wie? Wat? ⛶ rechts; « » weg (Daarvoor/Daarna staan onderaan) */
  .bediening { flex-wrap:wrap; gap:8px 10px; padding:22px 10px 10px; }
  .bediening .tijdbalk { order:-2; flex:1 1 auto; height:20px; }
  .bediening .balk-tijd { order:-1; font-size:13px; flex:0 0 auto; }
  .bediening .balk-knop.hart { margin-left:auto; }
  .bediening a.balk-knop, .bediening span.balk-knop.uit { display:none; }
  .bediening .balk-knop { font-size:24px; padding:0 8px; }
  .bediening .balk-play { padding:2px; }
  .bediening .balk-wie { font-size:12px; padding:3px 9px; }
  .bediening .balk-vol { font-size:17px; padding:2px 4px; }
  .bediening .balk-knop.hart { font-size:21px; } .bediening .balk-knop.plus { font-size:22px; }
  .hoofdstukken li { flex:0 0 112px; } .hoofdstukken b { font-size:13px; } .hoofdstukken .meta { font-size:12px; }
  .wie-osd, .wat-osd { right:6px; left:6px; width:auto; bottom:96px; }
  .pad { font-size:13px; gap:4px 6px; }
  .nav { -webkit-overflow-scrolling:touch; mask-image:linear-gradient(to right, #000 85%, transparent); padding-right:16px; }
  .nav a { padding:6px 8px; font-size:13px; }
  .kop .wrap { height:56px; }
  .merk { font-size:19px; }
  .geb-kop h1 { font-size:1.6rem; }
  .intro-osd { bottom:94px; padding:10px 14px; } .intro-osd b { font-size:1.2rem; }
  .groot-play { width:60px; height:60px; }
  .frag-osd { font-size:16px; top:10px; left:10px; }
  .speler .vcr { top:8px; right:8px; } .vcr button { font-size:15px; padding:1px 7px; }
}
@media (max-width:420px) { .nav a[data-nav="status"] { display:none; } }
.speler video { touch-action:pan-y; }