html {height: 100%}

body {height: 100%;
      margin: 0;
      background-color: #FFF;
      font-size: 62.5%}


.title-container {
    max-width: 1038px;      /* maximale breedte */
    width: 100%;            /* past zich altijd aan */
    padding: 0 2em;         /* marge links en rechts */
    margin: 0 auto;         /* centreert container */
    box-sizing: border-box;
    text-align: center;
  }

h1 {
    margin: 0;
    font-weight: bold;
    white-space: nowrap;     /* voorkom dat tekst breekt */
    display: inline-block;   /* belangrijk voor breedte berekening */
  }

/* Breekpunt voor schermen <900px */
@media (max-width: 900px) {
.title-container {
    display: none;
  }
}


h4 {font-family: Arial, sans-serif;
    font-size: 1.8em;
    font-weight: bold;
    font-style: normal;
    padding-top: 1em;
    padding-bottom: 0.8em}

h2 {font-family: Arial, sans-serif;
    font-size: 1.7em;
    font-weight: bold;
    font-style: normal;
    padding-bottom: 0.8em}


.box-E8F8AA {width: 100%;
             padding: 3em 0 1.2em 0;
             background-color: #E8F8AA}

.box-FFF {width: 100%;
          padding: 3em 0 1.2em 0;
          background-color: #FFF}

.content-box {width: 100%;
              max-width: 1038px;
              margin: auto}


.content {padding: 0 1em 0 1em;
          font-family: Arial, sans-serif;
          font-size: 1.9em;
          line-height: 160%;
          color: #16333C}

.content a{color: #449DBC;
           font-style: italic;
           font-weight: bold;
           text-decoration: none}

.content a:hover{color: #449DBC;
                 font-style: italic;
                 font-weight: bold;
                 text-decoration: underline}


.box-1400 {display: flex;
           flex-wrap: wrap;   /* zorgt dat ze onder elkaar kunnen */
           gap: 20px;
           max-width: 1420px;
           margin: auto}

.image-block {flex: 1 1 500px;
              max-width: 500px}

.image-block img {width: 100%;
                  height: auto;
                  display: block}

.text-block {flex: 1 1 900px;
             max-width: 900px;
             display: flex;
             flex-direction: column;
             justify-content: center; /* verticale centrering van de inhoud */
             background-color: #E8F8AA;
             box-sizing: border-box}

/* Breekpunt voor schermen <1420px */
@media (max-width: 1420px) {
  .image-block {
    max-width: 600px;
    width: 100%;
    margin: auto;
  }
  
  .text-block {
    max-width: 1038px;
    width: 100%; 
    margin: auto;
    padding-top: 3em;
    padding-bottom: 3em;
  }
}


   form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    input, textarea, button {
      padding: 10px;
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      width: 90%;
    }
    button {
      background: #000;
      color: #fff;
      border: none;
      cursor: pointer;
      font-weight: bold;
    }
    button:hover {
      background: #028F02;
    }


.table-container {
  width: 100%;
  overflow-x: auto; /* horizontaal scrollen indien nodig */
}

.afwisselende-tabel {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  table-layout: auto; /* automatisch kolombreedte */
}

.afwisselende-tabel td {
  padding: 10px;
  text-align: left;
}

/* Afwisselende achtergrond per rij */
.afwisselende-tabel tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.afwisselende-tabel tr:nth-child(even) {
  background-color: #e0e0e0;
}

/* Hover effect */
.afwisselende-tabel tr:hover {
  background-color: #d1e7ff;
}

/* Responsive stacked cards */
@media (max-width: 600px) {
  .afwisselende-tabel, 
  .afwisselende-tabel tbody, 
  .afwisselende-tabel tr, 
  .afwisselende-tabel td {
    display: block;
    width: 100%;
  }

  .afwisselende-tabel tr {
    margin-bottom: 10px; /* ruimte tussen kaartjes */
    border-radius: 6px;
    overflow: hidden;
  }

  .afwisselende-tabel td {
    padding: 10px;
    display: block;
  }
}