body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 15px;
  font-size: 16px;
  line-height: 1.6;
}

/* ========================= */
/* Specifiek voor map pagina */
/* ==========================*/

.map-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

.hero{
height:60vh;
background-image:url("../images/hero.jpg");
background-size:cover;
background-position:center;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.hero-content{
background:rgba(0,0,0,0.5);
padding:40px;
border-radius:8px;
}

.button{
display:inline-block;
margin-top:15px;
padding:10px 20px;
background:#0077cc;
color:white;
text-decoration:none;
border-radius:5px;
}

.cards{
display:flex;
gap:20px;
margin-top:20px;
}

.card{
background:#f4f4f4;
padding:20px;
border-radius:8px;
flex:1;
}

footer{
background:#222;
color:white;
text-align:center;
padding:20px;
margin-top:40px;
}

/* =============================== */
/* LEGENDA STYLING (ALTijd actief) */
/* =============================== */
.leaflet-control.info.legend {
  background-color: white !important;
  border: 1px solid: #ddd;
  padding: 10px 25px;                     /* binnenruimte rondom tekst voor boven, onder */
  font-size: 18px;
  line-height: 24px;
  color: #333;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.info.legend img {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}

/* ======================= */
/* LEAFLET MOBILE FRIENDLY */
/* ======================= */

.leaflet-popup-content {
  font-size: 25px !important;
}


/* =============================== */
/* Mobiel vriendlijk maken website */
/* =============================== */

@media (max-width:700px){

  body {
    font-size: 17px;   /* was 18px → iets rustiger */
    padding: 12px;     /* iets meer ademruimte */
  }

}

.cards{
flex-direction:column;
}

.header-container{
flex-direction:column;
gap:10px;
}


}