body {
  width: auto;
  background: #ffffff;
  font-family: Arial, Helvetica, Swiss;
  font-size: 16pt;
  line-height: 1.5;
}

input,
textarea {
  font-size: 14px;
  padding: 4px;
  width: 100%;
  box-sizing: border-box;
}

form {
  max-width: 100%;
}

a:link {
  color: #0000ff;
}
a:visited {
  color: #0000ff;
}
a:hover {
  background: #00ffff;
  color: #bb0000;
}

/* responsive aanpassingen */
table {
  border-spacing: 0px;
  padding: 0px;
  font-size: 10pt;
  width: 100%;
  max-width: 585px; /* behoud max-breedte */
  margin: 0 auto;
}

img {
  max-width: 100%;
  height: auto;
}

/* bestaande klassen */
table.l {
  left: 0;
  width: 295px;
  text-align: left;
}

table.r {
  width: 295px;
  text-align: right;
}

h1 {
  font-size: 180%;
  color: #007700;
  text-align: center;
}
h2 {
  font-size: 130%;
  color: #bb0000;
  background: #ffff99;
  text-align: center;
}

h3 {
  font-size: 130%;
  color: #007700;
}

h4 {
  font-size: 115%;
  color: #97553d;
  font-style: italic;
}

.wi {
  background: #ffffff;
  text-align: center;
}

.gr {
  background: #bbbbbb;
  text-align: center;
}

.g2 {
  background: #ffff99;
  font-size: 8pt;
}

.g3 {
  background: #ffff99;
}

.g4 {
  background: #ffff99;
  text-align: center;
}

.g4 span, 
.g4 h1, 
.g4 h2, 
.g4 .g16 { 
  display: block;
  text-align: center;
}

.g6 {
  background: #cccccc;
}

.g7 {
  background: #cccccc;
  text-align: center;
}

.z7 {
  font-size: 7pt;
}

.z8 {
  font-size: 8pt;
}

.z8v {
  font-size: 8pt;
  font-weight: bold;
}

.z8c {
  font-size: 8pt;
  font-style: italic;
}

.z9 {
  font-size: 9pt;
}

.z9v {
  font-size: 9pt;
  font-weight: bold;
}

.z9c {
  font-size: 9pt;
  font-style: italic;
}

.z10 {
  font-size: 10pt;
}

.z10v {
  font-size: 10pt;
  font-weight: bold;
}

.z10c {
  font-size: 10pt;
  font-style: italic;
}

.z10vc {
  font-size: 10pt;
  font-weight: bold;
  font-style: italic;
}

.z12v {
  font-size: 12pt;
  font-weight: bold;
}

.z12vc {
  font-size: 12pt;
  font-weight: bold;
  font-style: italic;
}

.z14 {
  font-size: 14pt;
}

.z14v {
  font-size: 14pt;
  font-weight: bold;
}

.z14vc {
  font-size: 14pt;
  font-weight: bold;
  font-style: italic;
}

.z16 {
  font-size: 16pt;
}

.z16v {
  font-size: 16pt;
  font-weight: bold;
}

.r8 {
  font-size: 8pt;
  color: #bb0000;
}

.r8v {
  font-size: 8pt;
  font-weight: bold;
  color: #bb0000;
}

.r8c {
  font-size: 8pt;
  font-style: italic;
  color: #bb0000;
}

.r9 {
  font-size: 9pt;
  color: #bb0000;
}

.r9c {
  font-size: 9pt;
  font-style: italic;
  color: #bb0000;
}

.r10 {
  font-size: 10pt;
  color: #bb0000;
}

.r10v {
  font-weight: bold;
  color: #bb0000;
}

.r10c {
  font-style: italic;
  color: #bb0000;
}

.r10vc {
  font-weight: bold;
  font-style: italic;
  color: #bb0000;
}

.r12 {
  font-size: 12pt;
  color: #bb0000;
}

.r12v {
  font-size: 12pt;
  font-weight: bold;
  color: #bb0000;
}

.r12vc {
  font-size: 12pt;
  font-weight: bold;
  font-style: italic;
  color: #bb0000;
}

.r18v {
  font-size: 18pt;
  font-weight: bold;
  color: #bb0000;
}

.b8v {
  font-size: 8pt;
  font-weight: bold;
  color: #0000ff;
}

.b10 {
  font-size: 10pt;
  color: #0000ff;
}

.b10v {
  font-weight: bold;
  color: #0000ff;
}

.b18v {
  font-size: 18pt;
  font-weight: bold;
  color: #0000ff;
}

.g8 {
  font-size: 8pt;
  color: #007700;
}

.g10 {
  font-size: 10pt;
  color: #007700;
}

.g12vc {
  font-size: 12pt;
  font-weight: bold;
  font-style: italic;
  color: #007700;
}

.g14 {
  font-size: 14pt;
  color: #007700;
}

.g16 {
  font-size: 16pt;
  color: #007700;
}

.g18v {
  font-size: 18pt;
  font-weight: bold;
  color: #007700;
}

/* media query voor mobiel */
@media (max-width: 700px) {
  table,
  td {
    display: block;
    width: 100% !important;
  }
  body {
    font-size: 14pt;
  }
  h2,
  h3,
  h4 {
    font-size: 110%;
  }
}
/* Navigatie: meer regelafstand */
table.nav a {
  line-height: 1.8;
  background: #ccff00;
}
table.lineh a {
  line-height: 1.6;
}
.galerij {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 kolommen */
  gap: 8px;                              /* ruimte tussen de foto’s */
  justify-items: center;                 /* centreren van de plaatjes in hun vak */
}

.galerij img {
  max-width: 100%;
  height: auto;
  border: 1px solid #000;
}

/* op kleinere schermen: 3 kolommen */
@media (max-width: 768px) {
  .galerij {
    grid-template-columns: repeat(3, 1fr);
  }
}
.persoon {
  text-align: center;
}

.caption {
  margin-top: 4px;
  font-size: 10pt;
  line-height: 1.3;
}