img {
  border-radius: 25px;
}

.navigatie a:hover {
  color: #0d7873 !important;
}

.navbar-toggler {
  width: 50px;
  height: 50px;
  margin: 15px 0px 15px 5px;
}

hr.rood {
  border-top: 1px solid #d35056;
}

hr.groen {
  border-top: 1px solid #0d7873;
}

#snel a {
  position: relative;
  color: #000;
  text-decoration: none;
}

#snel a:hover {
  color: #000;
}

#snel a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #d35056;
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

#snel a:hover::before {
  transform: scaleX(1);
}

@media only screen and (max-width: 600px) {
  body {
    margin-left: 15px;
    margin-right: 15px;
  }
}

#nb a.btn {
  color: #0d7873 !important;
  background-color: #ffffff !important;
  border: none !important;
}

#nb a:hover {
  color: #0d7873 !important;
  background-color: #fff8e2 !important;
  border: none !important;
}

.artikel {
  background-color: #f5f5f5;
  padding: 25px;
  margin-bottom: 25px;
}

.schaduw {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

body {
  font-weight: 425;
  /* iets vetter dan normaal (400) */
}

.even-hoogte {
  display: flex;
  align-items: stretch;
}

.even-hoogte > div {
  display: flex;
  flex-direction: column;
}

.even-hoogte > div > .artikel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.fixed-box {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 175px;
  height: 75px;
  background-color: rgba(0, 0, 0, 0.25);
  color: white;
  padding: 10px;
  border: 1px solid gray;
  border-radius: 15px;
  z-index: -1;
}

@media only screen and (max-width: 600px) {
  .container {
    padding: 0px;
  }
}

.navbar-nav .nav-item .nav-link.active {
  background-color: #0d7873;
  color: white !important;
  border-radius: 5px;
  padding: 0px 20px 2px 20px;
  margin-top: 7px;
}

.image-container img {
  width: 500px;
  /* Set your desired width */
  height: auto;
  /* Set your desired height */
  object-fit: cover;
  /* Ensures images cover the given size without distortion */
  border-radius: 0px;
}

.artikel {
  background-color: #f5f5f5;
  padding: 25px;
  margin-bottom: 25px;
}

.soort {
  color: #fff;
  background-color: #d35056;
  padding: 10px 15px 5px 15px;
  margin: 0px 0px 25px 0px;
}

.top {
  background-color: #d35056;
  color: #fff;
  padding: 10px;
  margin-top: -15px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
}

.breed {
  background-color: #0d7873;
  color: #fff;
  padding: 10px;
  margin-top: -15px;
  margin-bottom: 5px;
  margin-right: auto;
  margin-left: auto;
}

#trash img {
  border-radius: 0px;
}

#tuur img {
  border-radius: 0px;
}

#zoek img {
  border-radius: 0px;
}

#pat img {
  border-radius: 0px;
}

#bak img {
  border-radius: 0px;
}

.fotos {
  color: #fff;
  background-color: #d35056;
  padding: 10px 15px 5px 15px;
  margin-bottom: 25px;
}

#magazine img {
  margin-right: 25px;
  margin-bottom: 15px;
  border-radius: 0px;
}

.hoofding {
  padding: 15px;
  margin-bottom: 50px;
  background-color: #ebf0dc;
  color: #d35056;
}

.inline-item {
  display: inline-block;
  vertical-align: middle;
}

#linken img {
  border-radius: 0px;
}

.groter {
  color: #696969;
  font-size: 1.1em;
  font-weight: bold;
}

.navbar-nav .nav-item .nav-link.active {
  background-color: #0d7873;
  color: white !important;
  border-radius: 5px;
  padding: 0px 20px 2px 20px;
  margin-top: 7px;
}

.omtrek {
  background-color: #f5f5f5;
  padding: 15px 25px 25px 25px;
}

.kop {
  color: #fff;
  background-color: #d35056;
  padding: 10px 15px 5px 15px;
  margin-top: 25px;
  margin-bottom: 25px;
}

.linkrood a:hover {
  color: #d35056 !important;
}

#oudheid img {
  margin: 0px;
}

.omtrek {
  background-color: #f5f5f5;
  padding: 15px 25px 25px 25px;
}

.linkrood a:hover {
  color: #38b1d3 !important;
}

.titel {
  color: #fff;
  background-color: #d35056;
  padding: 10px 15px 5px 15px;
  margin: 50px 15px 25px 0px;
}

.titelgroen {
  color: #fff;
  background-color: #0d7873;
  padding: 10px 15px 5px 15px;
  margin: 50px 15px 25px 0px;
}

/*inschrijving bbq25*/

input.grotebox {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

input.grotecircel {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.warning {
  color: red;
  display: none;
}

/*info bbq25*/

input.grotebox {
  width: 20px;
  height: 20px;
  margin-left: 10px;
}

input.grotecircel {
  width: 18px;
  height: 18px;
  margin-right: 10px;
}

.warning {
  color: red;
  display: none;
}

.randje {
  border-right: 1px solid #d35056;
}

/*kalender*/

.kalender-container {
  width: 100%;
  overflow-x: auto;
}

table.kalender {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  /* 💡 Zorgt dat kolommen gelijkmatig worden verdeeld */
}

.kalender {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-family: Arial, sans-serif;
  border: 1px solid #ddd;
  /* Voeg een rand toe aan de hele tabel */
}

.kalender td {
  /* Verwijder de algemene rand, en voeg alleen de interne randen toe */
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 7px;
  text-align: left;
  vertical-align: top;
  height: 75px;
}

/* Zorg dat de td relative is, zodat kinderen absoluut gepositioneerd kunnen worden */
.kalender td {
  position: relative;
  /* Belangrijk: Maak de cel de positioneringscontext */
  /* ... rest van je td stijlen ... */
}

/* Stijl voor het icoon dat de huidige dag markeert */
.kalender td .vandaag-icoon {
  position: absolute;
  /* Haal het icoon uit de normale documentstroom */
  top: 5px;
  /* Plaats het 5px van de bovenkant van de cel */
  right: 5px;
  /* Plaats het 5px van de rechterkant van de cel */
  height: 20px;
  /* Behoud de aspect ratio */
  z-index: 10;
  /* Zorgt ervoor dat het icoon boven andere inhoud ligt */
  /* Optioneel: Voor de visuele uitlijning */
  /* transform: translate(-50%, -50%); */
  /* left: 50%; */
  /* top: 50%; */
}

/* De linker rand voor de eerste kolom van elke rij */
.kalender th:first-child,
.kalender td:first-child {
  border-left: 1px solid #ddd;
}

/* De bovenste rand voor de thead (kolomkoppen) */
.kalender th {
  background-color: #0d7873;
  color: floralwhite;
  font-weight: bold;
  padding: 7px;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;

  /* Voeg een bovenrand toe aan de th */
}

/* Voor de laatste rij, zorg ervoor dat de onderrand zichtbaar is */
.kalender tbody tr:last-child td {
  border-bottom: 1px solid #ddd;
}

table.kalender td:hover {
  background-color: #eef;
}

/* Stijl voor dagen met een activiteit */
.kalender td.heeft-activiteit {
  background-color: #f7e7d3;
  /* Een lichte, rustige blauwe achtergrond */
}

/* Stijl voor de huidige dag */
.kalender td.vandaag {
  background-color: #fffacd;
  /* Lichte gele achtergrond */
}

/* DEZE MOET HIER KOMEN - NA DE ANDERE TWEE */
/* Specifieke stijl als een dag VANDAAG is EN een activiteit heeft */
.kalender td.vandaag.heeft-activiteit {
  background-color: #ffcc66;
  /* Bijv. een iets donkerder gele achtergrond */
}

/* Aanpassingen voor de .activiteit div die je gebruikt */
.activiteit {
  margin-top: 5px;
  color: #0d7873;
  font-size: 0.9em;
  background-color: #ffffff;
  padding: 3px;
  border-radius: 5px;
  text-align: left;
  overflow: hidden;
  white-space: normal;
  width: 100%;
  /* text-overflow: ellipsis; */
}

.kalender .activiteitenlijst {
  list-style: none;
  /* Verwijdert de opsommingstekens */
  padding: 0;
  /* BELANGRIJK: Verwijdert de standaard linker padding van de <ul> */
  margin: 5px 0 0 0;
  /* Pas de margin aan indien nodig, de laatste 0 is de linker margin */
  text-align: left;
  font-size: 0.9em;
}

.kalender .activiteitenlijst li.activiteit {
  margin-bottom: 3px;
  background-color: #ffffff;
  color: #0d7873;
  padding: 3px 5px;
  /* De 5px hier is de padding RECHTS en LINKS van de activiteit tekst */
  border-radius: 3px;
  overflow: hidden;
  white-space: wrap;
}

/* Stijl voor speciale activiteiten */
.kalender .activiteitenlijst li.speciaal-activiteit {
  background-color: #d35056;
  color: #ffffff;
}

/* 🔽 Responsieve aanpassingen */
@media screen and (max-width: 768px) {
  table.kalender th,
  table.kalender td {
    font-size: 0.8em;
    padding: 6px;
  }

  .activiteit {
    font-size: 0.75em;
  }

  .kalender h2 {
    font-size: 1.1em;
  }
}

@media screen and (max-width: 500px) {
  table.kalender th,
  table.kalender td {
    font-size: 0.7em;
    padding: 4px;
  }

  .activiteit {
    font-size: 0.65em;
  }
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: 2em;
  }
}