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: 0;
  padding: 0;
  font-size: 10pt;
  width: 100%;
  max-width: 585px;
  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;
}

/* gele blokken */
.g4 {
  max-width: 585px;
  background: #ffff99;
  text-align: center;
  padding: 15px 5px;   /* extra ruimte boven/onder */
  border: 1px solid #000;
}

.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;
}

.g9c {
  font-size: 9pt;
  font-style: italic;
  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;
}
table.lineh a {
  line-height: 1.6;
}
.persoon {
  text-align: center;
}
/* geen text-align meer nodig: grid doet dit */
}

.caption {
  margin-top: 4px;
  font-size: 10pt;
  line-height: 1.3;
  text-align: center; /* expliciet centreren van tekst */
}

.namenlijst {
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  max-width: 100%; /* voorkomt horizontaal scrollen */
}

.rij {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr; /* verhouding naam / jaren / link */
  gap: 0.5em;
  padding: 0.2em 0;
  border-bottom: 1px solid #ccc;
}

.kolom.link a {
  word-break: break-word;
  text-decoration: none;
}

@media (max-width: 600px) {
  .rij {
    grid-template-columns: 2fr 1fr; /* eerste regel: naam + jaren */
    grid-template-areas:
      "naam jaren"
      "link link"; /* tweede regel: link */
  }
  .kolom.naam   { grid-area: naam; }
  .kolom.jaren  { grid-area: jaren; }
  .kolom.link   { grid-area: link; }