/* Lege stoelen in de klas — opmaak herbouwd na verlies van de originele build */
:root{ --paars:#9da3d1; --inkt:#2f1f41; }
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; padding:2rem 1rem; min-height:100vh;
  background:var(--paars); color:#fff;
  font-family:'Archia','Archia Regular',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:1rem; line-height:1.65;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }

/* zijmenu links, vast */
.merk-zij{ display:block; padding:0 0 1.1rem; }
.merk-zij img{ width:9rem; height:auto; }
.toc{ display:flex; flex-direction:column; gap:.1rem; }
.toc a{
  display:flex; gap:.55rem; align-items:baseline; text-decoration:none; color:rgba(255,255,255,.8);
  font-size:.8rem; line-height:1.3; padding:.4rem .5rem; border-radius:5px;
  border-left:2px solid transparent; overflow-wrap:anywhere;
}
.toc a:hover{ color:#fff; background:rgba(255,255,255,.12); }
.toc a.active{ color:#fff; border-left-color:#fff; font-weight:600; background:rgba(255,255,255,.10); }
.toc a .n{ flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums; opacity:.75; }
.toc a em{ font-style:normal; }

/* kop: alleen de klassenfoto, groot */
figure.kop-figuur{ margin:0 0 2.5rem; }
figure.kop-figuur .beeldvlak{ position:relative; line-height:0; }
figure.kop-figuur .beeldvlak::after{
  content:""; position:absolute; inset:0; background:var(--paars);
  opacity:.15; pointer-events:none;
}
figure.kop-figuur img{ width:100%; height:auto; display:block; background:#fff; }
figure.kop-figuur .beeldvlak a{ display:block; line-height:0; cursor:zoom-in; }
figure.kop-figuur figcaption{
  max-width:64rem; margin:.7rem auto 0; font-size:.82rem; line-height:1.5; opacity:.9;
}

/* tekst */
main{ margin-top:2rem; max-width:64rem; margin-left:auto; margin-right:auto; }
h1,h2,h3{ font-family:'Doumbar','Archia',Georgia,serif; font-weight:400; line-height:1.1; }
h1{ font-size:2.25rem; margin:0 0 .5rem; }
h2{ font-size:2.25rem; margin:0 0 .5rem; }
h3{ font-size:1.4rem; margin:2rem 0 .4rem; }
p{ margin:0 0 2rem; }
p.kort{ margin-bottom:1rem; }
ul.lijst{ margin:0 0 2rem; padding-left:1.1rem; }
ul.lijst li{ margin-bottom:.4rem; }
.bijschrift{ font-size:.82rem; opacity:.85; margin:.5rem 0 2rem; }
.kader{
  border:1px solid rgba(255,255,255,.55); border-radius:.25rem;
  padding:1.1rem 1.25rem; margin:0 0 2rem; background:rgba(255,255,255,.08);
}
.kader p:last-child{ margin-bottom:0; }
blockquote{
  margin:0 0 2rem; padding-left:1.1rem; border-left:3px solid rgba(255,255,255,.6);
  font-size:1.05rem;
}
blockquote .bron{ display:block; margin-top:.6rem; font-size:.85rem; opacity:.85; }
.cijfers{ display:grid; grid-template-columns:1fr; gap:1rem; margin:0 0 2rem; }
.cijfer{ border-top:2px solid rgba(255,255,255,.6); padding-top:.6rem; }
.cijfer b{ font-family:'Doumbar','Archia',Georgia,serif; font-size:2rem; display:block; line-height:1; }
.cijfer span{ font-size:.9rem; }
/* voettekst met colofon, breder dan de tekstkolom */
footer{ margin:4rem auto 0; }
.voet{
  max-width:82rem; margin:0 auto; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.45); font-size:.85rem; line-height:1.5;
}
.voet-titel{ margin:0 0 1.5rem; font-size:.95rem; }
.voet-credits{ display:grid; grid-template-columns:1fr; gap:.9rem 2.5rem; margin-bottom:2rem; }
.voet-credits span{
  display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  opacity:.75; margin-bottom:.1rem;
}
.voet-steun{ margin:0 0 1.75rem; }
.voet-kop{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; opacity:.75; margin:0 0 .9rem; }
.fondsen{ display:flex; flex-wrap:wrap; align-items:center; gap:1.5rem 2.5rem; }
.fondsen img{ height:2.6rem; width:auto; }
.fondsen .logo-tegel{
  display:inline-flex; align-items:center; background:#fff;
  border-radius:var(--ronding); padding:.5rem .75rem;
}
.fondsen .logo-tegel img{ height:2.1rem; display:block; }
.fondsen span{ font-weight:600; font-size:1rem; }
.voet-slot{ margin:0; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.25); }
@media (min-width:640px){ .voet-credits{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .voet-credits{ grid-template-columns:repeat(3,1fr); } }

@media (min-width:768px){
  .nav ul{ flex-direction:row; align-items:center; }
  .nav li.merk{ margin-right:3rem; margin-bottom:0; }
  .cijfers{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1024px){
  .nav ul{ font-size:1rem; }
}

/* colofon */
dl.colofon{ margin:0 0 2rem; }
dl.colofon dt{ font-weight:600; font-size:.82rem; letter-spacing:.04em;
  text-transform:uppercase; opacity:.9; margin-top:.9rem; }
dl.colofon dd{ margin:0; }

/* beeld in de lopende tekst */
figure.beeld{ margin:0 0 2rem; }
figure.beeld img{ width:100%; height:auto; background:#fff; }
figure.beeld.smal img{ max-width:260px; }
figure.beeld figcaption{ margin-top:.55rem; font-size:.82rem; line-height:1.5; opacity:.9; }
.vid{
  position:relative; aspect-ratio:16/9; background:rgba(47,31,65,.25);
  border-radius:var(--ronding); border:var(--rand); overflow:hidden;
}
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* losse foto's: kleiner, bijschrift eronder in klein corps, klik voor groot */
figure.beeld.klein{ max-width:21rem; }
figure.beeld.klein.duo-klein{ max-width:34rem; }
figure.beeld.klein figcaption{ font-size:.72rem; line-height:1.45; }
figure.beeld.klein a{ display:block; line-height:0; cursor:zoom-in; }


/* zijmenu vast op breed scherm */
@media (min-width:1000px){
  body{ padding-left:16rem; }
  .zijbalk{
    position:fixed; left:1.25rem; top:2rem; width:13rem;
    max-height:calc(100vh - 4rem); overflow-y:auto; z-index:15;
  }
}
@media (max-width:999px){
  .zijbalk{ margin-bottom:2rem; }
  .toc{ flex-direction:row; flex-wrap:wrap; }
  .toc a{ font-size:.78rem; }
  .merk-zij img{ width:11rem; }
}

/* slider */
.slider{ position:relative; }
.track{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  border-radius:4px; scrollbar-width:none; background:#fff;
}
.track::-webkit-scrollbar{ display:none; }
.track img{ flex:0 0 100%; scroll-snap-align:center; width:100%; aspect-ratio:3/2; object-fit:cover; display:block; }
.slider .nav{
  position:absolute; top:50%; transform:translateY(-50%); width:2.4rem; height:2.4rem;
  border-radius:100px; border:0; background:rgba(47,31,65,.62); color:#fff; font-size:1.4rem;
  line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.slider .nav:hover{ background:rgba(47,31,65,.9); }
.slider .nav.prev{ left:.6rem; }
.slider .nav.next{ right:.6rem; }
.dots{ display:flex; gap:.4rem; justify-content:center; margin-top:.7rem; }
.dots button{ width:.5rem; height:.5rem; border-radius:100px; border:0;
  background:rgba(255,255,255,.45); cursor:pointer; padding:0; }
.dots button[aria-current="true"]{ background:#fff; }

/* boekblok */
.boek{ display:grid; grid-template-columns:1fr; gap:1.25rem 1.75rem; margin:0 0 2rem;
  border:1px solid rgba(255,255,255,.4); border-radius:4px; padding:1.25rem; background:rgba(255,255,255,.08); }
.boek img{ width:100%; max-width:180px; height:auto; }
.boek h3{ margin-top:0; }
.boek p:last-child{ margin-bottom:0; }
@media (min-width:640px){ .boek{ grid-template-columns:180px 1fr; align-items:start; } }

/* secties onder elkaar */
.sectie{ padding-top:2.5rem; margin-bottom:1rem; scroll-margin-top:1.5rem; }
.sectie + .sectie{ border-top:1px solid rgba(255,255,255,.28); }
.sectie h2 .n{
  display:inline-block; margin-right:.7rem; opacity:.65;
  font-variant-numeric:tabular-nums;
}
.sectie h2{ margin-bottom:1.2rem; }

/* persoon met portret */
.persoon{ display:grid; grid-template-columns:1fr; gap:1rem 1.5rem; align-items:start; }
.persoon img{
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  border:var(--rand); background:#fff;
}
.persoon p:last-child{ margin-bottom:0; }

/* teamraster: wie zijn wij */
.team{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1.6rem 1.2rem; margin:1.4rem 0 .4rem;
}
.persoonkaart{ display:flex; flex-direction:column; align-items:flex-start; }
.persoonkaart img{
  width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:var(--rand); background:#fff; margin-bottom:.55rem;
}
.persoonkaart .porg{
  font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  opacity:.8; line-height:1.3;
}
.persoonkaart .pnaam{
  font-family:'Doumbar','Archia',Georgia,serif; font-size:1.05rem; line-height:1.25;
  margin:.1rem 0 .15rem;
}
.persoonkaart .prol{ font-size:.78rem; line-height:1.45; opacity:.9; }

@media (min-width:640px){ .persoon{ grid-template-columns:120px 1fr; } }

/* twee beelden naast elkaar */
.duo{ display:grid; grid-template-columns:1fr; gap:.6rem; }
.duo img{ width:100%; height:auto; background:#fff; }
@media (min-width:640px){ .duo{ grid-template-columns:1fr 1fr; } }

/* persknipsels naast elkaar */
.press-clips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; margin:1.5rem 0 .3rem; }
.press-clips figure{ margin:0; }
.press-clips a{ display:block; cursor:zoom-in; }
.press-clips img{ width:100%; height:auto; border-radius:4px; display:block; background:#fff; }
.press-clips figcaption{ font-size:.72rem; margin-top:.4rem; line-height:1.45; opacity:.9; }
.press-clips a.play{ position:relative; }
.press-clips a.play::after{
  content:"\25B6"; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%);
  width:2.7rem; height:2.7rem; display:flex; align-items:center; justify-content:center;
  background:rgba(47,31,65,.92); color:#fff; border-radius:50%; font-size:1rem;
  box-shadow:0 2px 9px rgba(0,0,0,.35);
}

/* perslijst */
ul.press{ list-style:none; margin:1.5rem 0 0; padding:0; }
ul.press li{ padding:.8rem 0; border-top:1px solid rgba(255,255,255,.3); display:flex; flex-direction:column; gap:.15rem; }
ul.press li:first-child{ border-top:0; }
ul.press .src{ font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.8; }
ul.press a{ font-size:1.02rem; text-decoration:none; line-height:1.35; }
ul.press a:hover{ text-decoration:underline; text-underline-offset:3px; }

/* taalkeuze: toon alleen de gekozen taal */
body [lang]{ display:none; }
html[data-lang="nl"] span[lang="nl"],
html[data-lang="de"] span[lang="de"],
html[data-lang="en"] span[lang="en"]{ display:inline; }
html[data-lang="nl"] div[lang="nl"],
html[data-lang="de"] div[lang="de"],
html[data-lang="en"] div[lang="en"]{ display:block; }

.lang{
  display:inline-flex; margin:0 0 1.1rem; border:1px solid rgba(255,255,255,.55);
  border-radius:100px; overflow:hidden;
}
.lang button{
  appearance:none; border:0; background:transparent; color:rgba(255,255,255,.85);
  font-family:inherit; font-weight:600; font-size:.74rem; letter-spacing:.05em;
  padding:.4rem .75rem; cursor:pointer; min-height:34px;
}
.lang button[aria-pressed="true"]{ background:#fff; color:#2f1f41; }
.lang button:focus-visible{ outline:2px solid #fff; outline-offset:2px; }


/* ---- afgeronde hoeken en een fijn wit kader op alle vlakken ---- */
:root{ --rand:1px solid rgba(255,255,255,.55); --ronding:6px; }

figure.kop-figuur .beeldvlak,
figure.beeld img,
.duo img,
.press-clips img,
.boek img,
.track,
figure.stem img{
  border-radius:var(--ronding);
  border:var(--rand);
  overflow:hidden;
}
figure.kop-figuur .beeldvlak::after{ border-radius:var(--ronding); }
.track img{ border:0; border-radius:0; }
.kader{ border-radius:var(--ronding); }
.boek{ border-radius:var(--ronding); }
figure.stem figcaption{
  border:var(--rand); border-radius:var(--ronding);
  padding:1.1rem 1.25rem; background:rgba(255,255,255,.07);
}

/* ---- stemmen: portret en tekst, om en om links en rechts ---- */
.slider.stemmen .track{ background:transparent; border:0; border-radius:0; overflow-x:auto; }
figure.stem{
  flex:0 0 100%; scroll-snap-align:center; margin:0;
  display:grid; gap:1rem 1.75rem; align-items:start; padding:0 .25rem 2.6rem;
}
figure.stem img{
  width:100%; max-width:200px; height:auto; aspect-ratio:3/4; object-fit:cover; background:#fff;
}
figure.stem figcaption b{
  display:block; font-family:'Doumbar','Archia',Georgia,serif; font-weight:400;
  font-size:1.35rem; line-height:1.2; margin-bottom:.4rem;
}
figure.stem .stem-meta{
  display:block; font-size:.78rem; line-height:1.5; opacity:.85; margin-bottom:.9rem;
}
figure.stem blockquote{
  margin:0; border-left:3px solid rgba(255,255,255,.6); padding-left:1.1rem; font-size:1.02rem;
}
.slider.stemmen .nav{ top:auto; bottom:0; transform:none; }
.slider.stemmen .nav.prev{ left:auto; right:3.4rem; }
.slider.stemmen .nav.next{ right:0; }

@media (min-width:760px){
  figure.stem.links{  grid-template-columns:200px minmax(0,34rem); justify-content:start; }
  figure.stem.rechts{ grid-template-columns:minmax(0,34rem) 200px; justify-content:end; }
  figure.stem.rechts img{ grid-column:2; grid-row:1; }
  figure.stem.rechts figcaption{ grid-column:1; grid-row:1; text-align:right; }
  figure.stem.rechts blockquote{
    border-left:0; border-right:3px solid rgba(255,255,255,.6);
    padding-left:0; padding-right:1.1rem;
  }
  figure.stem.geen-foto.links{  grid-template-columns:minmax(0,40rem); }
  figure.stem.geen-foto.rechts{ grid-template-columns:minmax(0,40rem); justify-content:end; }
  .slider.stemmen .nav{ top:45%; bottom:auto; transform:translateY(-50%); }
  .slider.stemmen .nav.prev{ left:-.4rem; right:auto; }
  .slider.stemmen .nav.next{ right:-.4rem; }
}

/* panelen van de tentoonstelling */
.slider.panelen .track{ background:transparent; border:0; border-radius:0; align-items:center; }
.slider.panelen a{
  flex:0 0 100%; scroll-snap-align:center; display:flex; align-items:center; justify-content:center;
  padding:0 .25rem 2.6rem; cursor:zoom-in;
}
.slider.panelen .track img{
  flex:none; width:auto; max-width:100%; height:auto; max-height:72vh;
  aspect-ratio:auto; object-fit:contain;
  border-radius:var(--ronding); border:var(--rand); background:#fff;
}
.slider.panelen .nav{ top:45%; transform:translateY(-50%); }
.pswp__img{ border-radius:0; }