/* algemene pagina */
body {
  background-color: #e5e5e5; /* lichtgrijze achtergrond */
  margin: 0; /* geen buitenruimte */
  padding: 0; /* geen binnenruimte */
  font-family: Arial, sans-serif; /* lettertype */
}

/* container (inhoud van pagina) */
.container {
  max-width: 1000px; /* maximale breedte */
  margin: 90px auto 20px auto; /* boven ruimte voor navbar, horizontaal centreren */
  background: #f7f7f7; /* lichtgrijze achtergrond */
  padding: 20px; /* ruimte binnenin */
  border-radius: 12px; /* afgeronde hoeken */
  box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* schaduw */
}

/* header bovenaan */
header {
  background: linear-gradient(120deg, #8b0000, #b22222); 
  /* kleurverloop rood */
  padding: 12px;
  text-align: center; /* tekst in midden */
  font-size: 18px;
  color: white; /* witte tekst */
}

header h3 {
  font-size: 14px; /* kleinere titel */
  margin-bottom: 10px;
}

/* navigatiebalk */
ul {
  list-style-type: none; /* geen bolletjes */
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000; /* zwart */
  box-shadow: 0 2px 10px rgba(0,0,0,1); /* schaduw */
  position: fixed; /* blijft bovenaan */
  top: 0;
  width: 100%; /* volle breedte */
}

ul li {
  float: left; /* naast elkaar */
}

ul li a {
  display: block; /* hele knop klikbaar */
  color: white;
  text-align: center;
  padding: 14px 16px; /* ruimte in knop */
  text-decoration: none; /* geen streep onder tekst */
  background-color: #000000; /* standaard zwart */
  transition: background-color 0.3s; /* animatie */
}

/* hover effect */
ul li a:hover {
  background-color: #ff0000; /* rood bij hover */
}

/* actieve pagina */
ul li a.active {
  background-color: #000000; /* blijft zwart */
}

/* zorgt dat padding en border meetellen in breedte */
* {
  box-sizing: border-box;
}

/* grid layout voor kaarten */
.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
  /* automatische kolommen */
  gap: 15px; /* ruimte tussen vakken */
}

/* kaart (vakje) */
.column {
  background: white;
  border-radius: 12px; /* afgeronde hoeken */
  overflow: hidden;
  box-shadow: 0 5px 12px rgba(0,0,0,0.08);
  border: 1px solid #ccc;
}

/* afbeelding in kaart */
.column img {
  width: 100%;
  height: 150px;
  object-fit: cover; /* netjes bijsnijden */
}

/* tekst in kaart */
.column-content {
  padding: 12px;
}

.column p {
  margin: 10px 15px;
}

/* knop */
.knop {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 15px;
  background: #000000; /* zwart */
  color: white;
  border-radius: 6px;
  text-decoration: none;
}

/* knop hover */
.knop:hover {
  background: #a94442; /* rood/bruin */
}

/* titels */
h1 {
  font-size: 30px;
  margin-left: 20px;
}

h2 {
  text-align: center;
  font-size: 18px;
}

h4 {
  font-size: 18px;
  margin-left: 15px;
}

/* footer */
footer {
  background-color: white;
  padding: 10px;
  text-align: center;
}

/* formulier */
form {
  border-radius: 8px;
  background-color: #eeeeee;
  padding: 15px;
  margin: 30px;
}

label {
  display: block; /* label op nieuwe regel */
}

/* tekstvelden en dropdown */
input[type=text], select {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* radio/checkbox groep */
.form-group {
  display: flex; /* naast elkaar */
  align-items: center;
  gap: 10px; /* ruimte ertussen */
  margin: 6px 0;
}

/* verzend knop */
input[type=submit] {
  width: 100%;
  background-color: #000000; /* zwart */
  color: white;
  padding: 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer; /* handje */
}

/* hover submit */
input[type=submit]:hover {
  background-color: #a94442;
}