/* =========================
   BODY - BASIS
   Geldt voor alle schermen
========================= */
body {
  position: relative;   /* de positie blijft op zijn plek, en dient als referentie voor andere elementen */
  color: white;
  font-size: 100%;                 /* basis lettergrootte 16px */
  margin: 0;                       /* haalt standaard witruimte rond de pagina weg */
  font-family: Georgia, "Times New Roman", serif;   /* standaard lettertype */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.0);      /* 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;
  font-size: 350%;
}
h2 {    /* Alle tekst h2 hebben deze opmaak */
  font-weight: normal; /* of 400 */
  text-align: left;
  font-size: 200%;
}
h3 {   /* Alle tekst h3 hebben deze opmaak */
  font-weight: normal; /* of 400 */
  text-align: left;
  font-size: 130%;
}
small {                               /* Maakt (deel van) tekst één stap kleiner */
  padding: 10px;                      /* ruimte in tekstvak */
  font-size: 0.65em;                  /* maakt tekstgrootte 65% van standaardgrootte */
}
p {
  padding: 10px;                      /* ruimte in tekstvak */
}
ul {
  padding-left: 30px;
}

/* =========================
   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: 10px 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: 25px;                         /* ruimte 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 white;           /* 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: white;                      /* witte tekst */
  text-decoration: none;             /* geen onderstreping */
  text-align: center;                /* tekst centreren */
  font-size: 140%;                   /* grootte menuletters tov standaard */
}
.hoofdmenu a.active {
  color: #b8dcff;                    /* link van actieve pagina andere kleur tekst */
}
.hoofdmenu a:hover {                 /* kleur van de link als je er met de muis overheen gaat */
  color: #99ccff;
}

.menu-toggle {                       /* is het hamburgermenu */
  display: none;                     /* standaard verborgen */
  margin: 0 auto;                    /* midden zetten */
  padding: 10px 14px;                /* ruimte in knop */
  border: 1px solid white;           /* witte rand */
  border-radius: 10px;               /* afgeronde hoeken */
  color: white;                      /* 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 */
  background: rgba(0, 0, 0, 0.0);    /* lila doorschijnende achtergrond */
  border-radius: 10px;               /* afgeronde hoeken */
  max-width: 80%;
  margin: 30px auto 20px;
}

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

/* =========================
   slideshows bestelpagina
============================ */

/* Vak met info over bewerken */
.subvak2 .slideshow-item {
  width: 100%;
  margin-top: 0px;
}

/* slideshow staand in vak met info over bewerken */
.subvak2 .slideshow-staand {
  width: 80%;
  max-width: 260px;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
}

/* slideshow liggend in vak met info over bewerken */
.subvak2 .slideshow-liggend {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 2;
  margin: 20px auto;
  overflow: hidden;
  background: transparent;
}

/* Opmaak slideshows in infovak */
.subvak2 .slideshow-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}


/* =========================
   slideshow
========================= */
/* Ruimte voor de hele slideshow-sectie */
.slideshow-section {
  display: flex;
  flex-wrap: wrap;         /* zorgt dat blokken op nieuwe regel kunnen gaan */
  justify-content: center; /* centreren van de blokken */
  gap: 20px;               /* ruimte tussen de blokken */
  max-width: 1200px;       /* maximale breedte van de hele sectie */
  margin: 20px auto;       /* 20px van boven, en horizontaal centreren */
}

/* Elke slideshow-item (één blok) */
.slideshow-item {
  width: 100%;             /* mobiel: 100% breed = onder elkaar */
  text-align: center;      /* tekst en slideshow centreren */
}

/* Korte tekst boven elk blok */
.slideshow-text {
  margin: 0 0 10px 0;      /* geen ruimte boven, 10px onder, geen ruimte links/rechts */
  font-size: 1.5em;        /* grote tekst van slideshow 1,5x standaard */
}

/* slideshow-container: voor zowel bestel als tarief */
.slideshow {
  width: 100%;            /* breedte van het vierkant */
             /* height: 400px; - hoogte = breedte = vierkant */
  overflow: hidden;        /* foto niet groter als vierkant */
  margin: 0 auto;          /* centreren horizontaal */
  background-color: transparent; /* doorzichtig achtergrond (geen kleur) */
}

/* slideshow-container: vierkant (onzichtbaar), maar doorzichtig achtergrond */
.slideshow4x {
  width: 400px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0 auto;
  background-color: transparent;
}

/* De afbeelding in de slideshow: hele foto binnen het vierkant */
.slideshow-img {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* heel de foto binnen het vierkant, geen uitsnede */
  display: block;
}

/* Tablet en groter: 2 naast elkaar */
/* Hier betekenen: 974px of breder = 2 items per regel */
@media (min-width: 974px) {
  .slideshow-item {
    width: calc(50% - 10px); /* 50% van de breedte, minus half de gap (20px/2 = 10px) */
  }
}




/* =========================
   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%;
  border: solid 0px white;          /* rand */
  border-radius: 10px;              /* afgeronde hoeken */
  margin-top: 20px;
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.35);
}

.afbeelding2 img{                   /* niet in gebruik? */
  width: 80%;
  border: solid 1px white;          /* rand */
  border-radius: 10px;              /* afgeronde hoeken */
  margin-top: 20px;
  padding: 20%;
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.35);
}

.social {
  display: flex;                     /* gebruikt flex voor verdeling */
  justify-content: center;
  gap: 20px;                         /* 10px ruimte tussen vakjes */
}

.afb-social img{                    /* icoontjes socials in footer */
  width: 100%;
  max-width: 50px;
  border-radius: 10px;              /* afgeronde hoeken */
  margin-top: 20px;
  box-shadow: 4px 8px 12px rgba(0, 0, 0, 0.35);
}


/* =========================
   POP-UP-VAKKEN
   Een vak is óf een pop-up óf een link
========================= */

.popup-vak {
  position: relative;               /* nodig om de pop-up hieraan vast te maken */
  flex: 1;                          /* dezelfde breedte als de linkvakken */
  min-width: 0;                     /* voorkomt dat het vak te breed wordt */
  cursor: pointer;                  /* toont een handje */
}

.popup-vak input {
  display: none;                    /* checkbox onzichtbaar maken */
}

.popup-vak .vak {
  width: 100%;                      /* gebruikt dezelfde breedte als het pop-up-vak */
  cursor: pointer;                  /* toont een handje */
}

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

.popup-tekst {
  display: none;                    /* pop-up standaard verbergen */
  position: absolute;               /* pop-up zweeft onder het vak */
  top: calc(100% + 8px);             /* plaats de pop-up onder het vak */
  left: 0;                          /* begint aan de linkerkant van het vak */
  width: 100%;                      /* net zo breed als het vak */
  box-sizing: border-box;           /* rand en padding tellen mee binnen de breedte */
  height: auto;                     /* hoogte wordt bepaald door de tekst */
  padding: 8px 12px;                /* ruimte rondom de tekst */
  background: rgba(140, 170, 190, 0.8);  /* donkere achtergrond */
  border: 3px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  color: white;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 1.0); /* schaduw om letters voor leesbaarheid (rechts-onder-spreiding) */
  z-index: 30;                      /* boven andere onderdelen */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.popup-vak input:checked ~ .popup-tekst {
  display: block;                   /* pop-up tonen na aanklikken */
}


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

.vakken-1 > .subvak1,
.vakken-1 > .subvak2,
.vakken-1-2 > .subvak1,
.vakken-1-2 > .subvak2,
.vakken-2-1 > .subvak1,
.vakken-2-1 > .subvak2 {
  width: 100%;
  margin-bottom: 20px;
  text-align: left;
  background: rgba(0, 0, 0, 0.0);               /* achtergrond voor afmeting (kan later) doorzichtig */
}

/* =========================
   MOBIEL
   Tot en met 767px
========================= */
@media screen and (max-width: 767px) {
  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: 10px;
    margin-top: 15px;
    padding: 12px;
  }

  .hoofdmenu.open ul {
    display: flex;
  }

  .hoofdmenu a {
    padding: 8px;
    font-size: 22px;
  }
}

/* =========================
   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 */
  }

  .vakken-1,
  .vakken-1-2,
  .vakken-2-1 {
    display: flex;
    gap: 20px;
    align-items: flex-start;
  }

  .vakken-1 > .subvak1,
  .vakken-1 > .subvak2 {
    flex: 1 1 0;
    min-width: 0;        /* voorkomt dat flex-item breder blijft door brede inhoud */
    margin-bottom: 0;
  }

  .vakken-1-2 > .subvak1 {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
  }

  .vakken-1-2 > .subvak2 {
    flex: 2 1 0;
    min-width: 0;
    margin-bottom: 0;
  }

  .vakken-2-1 > .subvak1 {
    flex: 2 1 0;
    min-width: 0;
    margin-bottom: 0;
  }

  .vakken-2-1 > .subvak2 {
    flex: 1 1 0;
    min-width: 0;
    margin-bottom: 0;
  }
}
/* =========================
   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 */
  }
}