/* GEGENEREERD door huisstijl/galerij-blad.py -- niet met de hand bewerken. */
body {
  margin: 0;
  background-color: var(--kleur-grond);
  color: var(--kleur-inkt);
  font-family: var(--letter-tekst);
  font-size: var(--tekst-m);
  line-height: var(--regel-tekst);
}
.wrap { max-width: var(--maat-pagina); margin: 0 auto; padding: var(--ruimte-5) var(--ruimte-4) var(--ruimte-8); }
h1 { font-family: var(--letter-display); font-size: var(--tekst-3xl); line-height: var(--regel-strak); letter-spacing: var(--spatiering-kop); margin: 0 0 var(--ruimte-3); }
h2 { font-family: var(--letter-display); font-size: var(--tekst-xl); line-height: var(--regel-strak); margin: 0 0 var(--ruimte-2); }
.intro { color: var(--kleur-inkt-gedempt); max-width: var(--maat-tekst); margin: 0 0 var(--ruimte-6); }
.intro a, .kaart a { color: var(--kleur-accent-tekst); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--ruimte-5); }
.kaart { background-color: var(--kleur-vlak-1); border: 1px solid var(--kleur-rand); border-radius: var(--radius-l); padding: var(--ruimte-5); }
.kaart p { margin: 0 0 var(--ruimte-2); font-size: var(--tekst-s); color: var(--kleur-inkt-gedempt); }
.kaart .links { display: flex; flex-wrap: wrap; gap: var(--ruimte-3); margin: var(--ruimte-3) 0; }
.kaart .links a { font-weight: var(--gewicht-halfvet); }
/* Een voorbeeld toont de bovenste ~1100 px van de pagina op halve schaal: het iframe is
   twee keer zo groot als zijn kader en wordt geschaald; het kader knipt. Geen lazy
   loading: zonder JavaScript zou een lui iframe leeg blijven tot er gescrold wordt. */
.kaart .voorbeeld { position: relative; overflow: hidden; aspect-ratio: 16 / 11; margin-top: var(--ruimte-3); border: 1px solid var(--kleur-rand); border-radius: var(--radius-m); background-color: var(--kleur-grond); }
.kaart .voorbeeld iframe { position: absolute; inset: 0; width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: 0 0; }
.kaart .voorbeeld span { position: absolute; right: var(--ruimte-2); bottom: var(--ruimte-2); font-size: var(--tekst-xs); color: var(--kleur-inkt-gedempt); background-color: var(--kleur-vlak-2); padding: 0.1rem 0.5rem; border-radius: var(--radius-rond); }
.voet { margin-top: var(--ruimte-7); padding-top: var(--ruimte-4); border-top: 1px solid var(--kleur-rand); font-size: var(--tekst-s); color: var(--kleur-inkt-gedempt); }
.voet a { color: var(--kleur-accent-tekst); }