/* =========================
   BODY - BASIS
   Geldt voor alle schermen
========================= */
body {
  position: relative;   /* de positie blijft op zijn plek, en dient als referentie voor andere elementen */
  color: #009900;
  font-size: 100%;                 /* basis lettergrootte 16px */
  margin: 0;                       /* haalt standaard witruimte rond de pagina weg */
  font-family: "Comic Sans MS", "Times New Roman", serif;   /* standaard lettertype */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);      /* schaduw om letters voor leesbaarheid (rechts-onder-spreiding) */
}
  /* =========================
     VASTE ACHTERGRONDLAAG
     Werkt op alle schermen, ook iOS/iPadOS
  ========================= */
.achtergrond-laag {
    position: fixed;               /* blijft op dezelfde plek, ook bij scrollen */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;                     /* top:0; right:0; bottom:0; left:0; */
    background-image: url("achtergrond.jpg");/* achtergrondfoto */
    /* locatie: ../img/achtergrond.jpg, of alleen achtergrond.jpg met foto in map css */
    background-position: top center;/* achtergrond blijft boven en gecentreerd */
    background-size: cover;        /* afbeelding bedekt hele scherm (viewport) */
    background-repeat: no-repeat;  /* afbeelding wordt niet herhaald */
    z-index: -1;                   /* ligt achter alle andere inhoud */
  }

/* =========================
   ALGEMENE TEKST
========================= */
h1 {    /* Alle koppen h1 hebben deze opmaak */
  font-weight: normal; /* of 400 */
  text-align: center;
  margin-bottom: 0px;
  font-size: 350%;
}
h2 {    /* Alle koppen h2 hebben deze opmaak */
  font-weight: normal; /* of 400 */
  text-align: center;
  margin-top: 0px;
  font-size: 200%;
}
h3 {    /* Alle tekst h3 hebben deze opmaak */
  font-weight: normal; /* of 400 */
  text-align: left;
  text-align: center;
  font-size: 200%;
}
h4 {   /* Alle tekst h4 hebben deze opmaak */
  font-weight: normal; /* of 400 */
  text-align: left;
  text-align: center;
  font-size: 115%;
}
small {                               /* Maakt (deel van) tekst één stap kleiner */
  font-size: 0.75em;                  /* maakt tekstgrootte 65% van standaardgrootte */
  text-align: left;
  text-align: center;
}
p {
  padding: 10px;                      /* ruimte in tekstvak */
}
ul {
  padding-left: 30px;
}
a {
  color: #009900;                     /* kleur van de linkjes in de tekst */
}

/* =========================
   TEKSTVAK (los)
========================= */

.tekstvak0 {                     /* Tekstvak index+bestel */
  width: fit-content;            /* breedte alleen zo breed als nodig */
  margin: 0 auto;                /* midden op de pagina (li + re evenveel ruimte) */
  padding: 0px 5%;             /* ruimte in het vak */
/* De tekst wordt aangepast aan de inhoud, maar door de padding 5% is aan beide zijde ruimte */
/* Omdat de langste tekst minder breed is bij grote vensters wordt hij daar niet breder dan de foto's */
}
.tekstvak {                      /* tekstvak tarief+prijs */
  width: fit-content;            /* breedte alleen zo breed als nodig */
  margin: 0 auto;                /* midden op de pagina (li + re evenveel ruimte) */
  padding: 10px 15%;             /* ruimte in het vak */
/* De tekst wordt aangepast aan de inhoud, maar door de padding 15% is aan beide zijde ruimte */
}

.foot {
  display: flex;                    /* Plaatst onderdelen naast elkaar */
  justify-content: center;          /* menu in het midden */
  gap: 30%;                         /* 10px ruimte tussen vakjes */
}
.lege-ruimte {
  height: 30vh;                     /* zorgt dat de lege ruimte 30% van het scherm is */
}
.ruimte100 {
  margin-top: 100px;                     /* toevoegen extra lege ruimte */
}
.ruimte50 {
  margin-top: 50px;                     /* toevoegen extra lege ruimte */
}
.ruimte35 {
  margin-top: 35px;                     /* toevoegen extra lege ruimte */
}
.ruimte20 {
  margin-top: 20px;                     /* toevoegen extra lege ruimte */
}
.ruimte15 {
  margin-top: 15px;                     /* toevoegen extra lege ruimte */
}
/* =========================
   MENU - BASIS
   Tablet en groter: gewoon menu
   Mobiel: wordt later aangepast
========================= */
.hoofdmenu {
  text-align: center;                /* menu in het midden */
  padding: 10px 10px;                /* ruimte rondom menu (h x b) */
}

.hoofdmenu ul {                      /* opmaak van het totale menu */
  display: flex;                     /* zet links naast elkaar */
  justify-content: center;           /* zet links in het midden */
  gap: 10px 2px;                     /* ruimte hoogte + tussen links muv uitklapmenu hamburger */
  width: fit-content;                /* breedte alleen zo breed als nodig */
  margin: 0 auto;                    /* midden op de pagina (li + re evenveel ruimte) */
  padding: 0;                        /* ruimte in menuvak */
  border: solid 1px #009900;           /* rand rond menu */
  border-radius: 10px;               /* afgeronde hoeken */
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.5);  /* schaduw rond menu */
}

.hoofdmenu li {
  list-style: none;                  /* bolletjes weghalen */
}

.hoofdmenu a {                       /* inhoud (linkjes) van het menu */
  display: block;                    /* hele knop wordt klikbaar */
  padding: 10px 14px;                /* ruimte in elke knop */
  color: #009900;                      /* witte tekst */
  text-decoration: none;             /* geen onderstreping */
  text-align: center;                /* tekst centreren */
  font-size: 90%;                   /* grootte menuletters tov standaard */
}
.hoofdmenu a.active {
  color: #004400;                    /* link van actieve pagina andere kleur tekst */
}
.hoofdmenu a:hover {                 /* kleur van de link als je er met de muis overheen gaat */
  color: #006600;
}

.menu-toggle {                       /* is het hamburgermenu */
  display: none;                     /* standaard verborgen */
  margin: 0 auto;                    /* midden zetten */
  padding: 10px 14px;                /* ruimte in knop */
  border: 1px solid #009900;           /* witte rand */
  border-radius: 10px;               /* afgeronde hoeken */
  color: #009900;                      /* witte tekst */
  font-size: 18px;                   /* lettergrootte knop */
  cursor: pointer;                   /* handje bij hover */
}

/* =========================
   PAGINA-INDELING - BASIS
   Mobiel eerst: alles onder elkaar
========================= */
/* =========================
   INFOVAK
   Foto + tekst
========================= */
.info-vak {
  padding: 0 0 0 0;                 /* ruimte in vak */
  margin: auto;
  align-items: center;
}

.info-vak img {                      /* Dit wordt (nog) niet gebruikt */
  width: 80%;
  max-width: 350px;                  /* foto even breed als vak */
  display: block;                    /* voorkomt kleine witruimte onder img */
  align-items: center;
  margin: 0 auto;                    /* ruimte foto */
}

/* =========================
   HOOFDVAKKEN - BASIS
========================= */
.wrapper {                           /* is basis voor wedstrijdvakken */
  margin: 0px 0;                     /* ruimte boven en onder ieder wedstrijdvak */
  padding: 7px 10px;                 /* ruimte in het vak */
  background: rgba(0, 0, 0, 0.0);    /* lichtgroene testachtergrond */
  border-radius: 10px;               /* afgeronde hoeken */
}

.linkvak {                           /* Los vak met link */
  width: 90%;
  margin: 0 auto 20px;                /* Ruimte buiten element (Bo=0-Li+Re=auto (=center) On=5px) */
  min-height: 30px;                  /* ruimte in hoofdvak */
  max-width: 400px
}

.linkvak1 {                           /* Los vak met link */
  width: 80%;
  margin: 0 auto 20px;                /* Ruimte buiten element (Bo=0-Li+Re=auto (=center) On=5px) */
  min-height: 30px;                  /* ruimte in hoofdvak */
  max-width: 400px
}

.boven {                             /* datum + plaats wedstrijd */
  min-height: 30px;                  /* ruimte in hoofdvak */
  margin: 0 auto 0px;                /* ruimte onder breed hoofdvak + gecentreerd */
}

.onder {                             /* vak met meer wedstrijdnummer */
  display: flex;                     /* gebruikt flex voor verdeling */
                 /* "flex-direction: row;"  vakjes naast elkaar */
  gap: 5px;                          /* 5px ruimte tussen vakjes */
  font-size: 80%;                    /* iets kleinere tekst overal t.o.v. boven */
  margin: 0 auto;
}
.vak {                               /* losse vakjes wedstrijdnummer */
  flex: 1;                           /* gelijke verdeling als ze naast elkaar staan */
  min-height: 30px;                  /* minimale hoogte (kan ook padding 10px zijn, maar dan wordt hij ook groter) */
}
.linkvak,                            /* Los vak met link */
.boven,
.vak {                               /* losse vakjes wedstrijdnummer */
  display: flex;                     /* maakt van het vak een flex-container (voor verdeling) */
  justify-content: center;           /* centreert de inhoud horizontaal */
  align-items: center;               /* centreert de inhoud verticaal */
  text-align: center;                /* zorgt ervoor dat tekst zelf ook netjes in het midden staat */
  box-shadow: 4px 8px 10px rgba(0, 0, 0, 0.35);
  background: rgba(0, 0, 0, 0.2);    /* donkere doorschijnende achtergrond */
  border-radius: 5px;                /* afgeronde hoeken */
}

.bloklink {
  color: inherit;                  /* inherit betekent hetzelfde als het vak */
  text-decoration: none;
}

.bloklink:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.verborgen {                      /* hiermee kan een deel tijdelijk verborgen worden */
  display: none;
}

.afbeelding1 img{
  width: 100%;
  max-width: 600px;
  margin-top: 20px;
}

.afbeelding2 img{
  width: 60%;
  max-width: 300px;
  margin-top: 20px;
}


/* =========================
   TWEE VAKKEN
   Mobiel: onder elkaar
   Is basis voor alles als er geen uitzondering hieronder geldt
========================= */
.vakken-1 {
  display: block;
  width: 90%;
  max-width: 1050px;
  margin: 0 auto 20px;
}


/* =========================
   MOBIEL
   Tot en met 1080px
========================= */
@media screen and (max-width: 1080px) {
  body {
    font-size: 80%;
  }

  .menu-toggle {
    display: block;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.5);
  }

  .hoofdmenu ul {
    display: none;
    flex-direction: column;
    gap: 0px;               /* Ruimte tussen linkjes hamburgermenu */
    margin-top: 10px;       /* Ruimte tussen hamburger en uitklapmenu */
    padding: 10px;          /* Ruimte binnen hamburgermenu zelf*/
  }

  .hoofdmenu.open ul {
    display: flex;
  }

  .hoofdmenu a {
    padding: 8px;           /* Ruimte om linkjes hamburgermenu */
    font-size: 18px;        /* lettergroote linkjes hamburgermenu */
  }
}

/* =========================
   TABLET
   Vanaf 768px (geldt dus ook voor grotere schermen)
   Links inhoud, rechts infovak
========================= */
@media screen and (min-width: 768px) {
  body {
    font-size: 100%;                 /* normale basisgrootte */
  }


}
/* =========================
   BUREAUBLAD / LAPTOP
   Vanaf 992px (geldt dus ook voor desktop)
========================= */
@media screen and (min-width: 992px) {
  body {
    font-size: 110%;                 /* iets grotere tekst */
  }


/* =========================
   GROOT DESKTOP
   Vanaf 1200px
========================= */
@media screen and (min-width: 1200px) {
  body {
    font-size: 120%;                 /* grootste lettergrootte */
  }
}