#menu {
  position: fixed;   /* Zet het menu vast op het scherm */
  bottom: 0;         /* Plakt het menu strak tegen de onderkant */
  left: 10;           /* Start helemaal aan de linkerkant van het scherm */
  width: 100%;       /* Zorgt dat het menu over de hele breedte loopt */
  z-index: 1000;     /* Zorgt dat het menu altijd BOVENOP alle andere elementen (zoals je foto) ligt */
  
  /* Optionele styling voor de leesbaarheid */
  background-color: #ffffff; /* Geef het een achtergrondkleur zodat de tekst erachter niet stoort */
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* Voegt een subtiele schaduw toe aan de bovenkant */
  padding: 10px 0;   /* Geeft de menu-items wat ademruimte */
}

#msect {
  display: flex;
  flex-basis: 100%;
  align-items: center;
  margin: 0px 0px;
  width:96vw;
}
#msect:before,
#msect:after {
  content: "";
  flex-grow: 1;
  margin: 0px 0px;
}


body {
font-family: Verdana, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;          /* Avoid 'light' weights on dark backgrounds */
  letter-spacing: 0.5px;     /* Gives letters room to breathe */
  word-spacing: 1px;
  line-height: 1.5;          /* Prevents lines from crowding */
  color:black;            /* Soft white/light gray is easier on eyes than pure white */
padding-bottom: 80px; /* HOOGTE VAN JOUW MENU + EXTRA RUIMTE */

}

figcaption {
   display: block;
  width: 100%;
  clear: both;
  font-family: Verdana, system-ui, sans-serif;
  font-size: 12px;           /* Now applies correctly */
  font-weight: 400;          
  letter-spacing: 0.5px;     
  word-spacing: 1px;
  line-height: 1.5;          
  background-color: #e8edc8;
  color:#660c1a ;              /* Red text */
  padding-left: 10px;
  padding-bottom; 10px;

/* DE OPLOSSING VOOR HET UITSTEKEN: */
  padding-left: 10px;
  padding-right: 10px;        /* Voeg ook rechts padding toe voor de balans */
  padding-bottom: 10px; 
  box-sizing: border-box;     /* Dwingt de padding om BINNEN de fotobreedte te blijven */
  width: 100%;                /* Zorgt dat de balk exact de breedte van de foto vult */
}


/* Shared Styles for both classes een and twee */
.een, .twee {
  width: 94%;
  padding: 10px;
  border: 2px solid #000000;
  border-radius: 5px; /* Modern browsers don't need -moz- or -webkit- anymore */
  overflow: auto;
  display: block;
}

/* Unique Styles for .een (Light Theme) */
.een {
  color: #06382e;
  background: linear-gradient(#e8edc8, #c8eaed);
}

/* Unique Styles for .twee (Dark Theme) */
.twee {
  background-color: #212f3d;
  color: #E0E0E0;  
  clear: both;
}

.knop1 {
font-size: 14px; 
background-color:#2d6b1a; 
color:#9fffff; 
padding: 5px 8px; 
border-radius:8px; 
width:120px; 
height:38px;
}
.kleur {
color:#FF0040;
font-weight: bold;
}
.close {
  color: red;
  position:fixed;
  right:20px;
  font-size: 58px;
  font-weight: bold;
  cursor: pointer;
padding: 0px 20px 0px 0px; /* trbl */

}
.close:hover {color: green;}

#floated {
float: right;
padding-left:20px;
display: table;
width:320px;
margin: 0;
}
#floated img {
    display: block;
    width: 100%;
    height: auto;
}


#small { height:150px; width:200px;}

h4 {
  font-size: 16px;
  margin-bottom: 0;
}

@media screen and (max-width: 550px) {
  .knop1 { font-size: 10px;
           width: 76px;
  }
#small { height:auto; max-width:100%;}

/* #floated {
padding-left:5px;
}
*/
#floated {
    float: none;          /* Zet het zweven naar rechts uit */
    margin: 0 auto 20px;  /* 'auto' links en rechts zet de foto exact in het midden */
    padding-left: 0;      /* Verwijdert de zijwaartse padding die op mobiel niet nodig is */
    display: block;       /* Verandert de tabel naar een blok voor betere centrering */
    max-width: 100%;      /* Zorgt dat de foto nooit breder wordt dan het telefoonscherm */
  }

/*.knop1 {
font-size: 12px; 
width:100px; 
height:38px;
}
*/

}
}