body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.6;
	background: #d4be8c; /* Achtergrondkleur */
}

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px; /* Verlaagde padding voor kleinere bovenbalk */
	background: rgb(139, 17, 42); /* Kleur menu/knoppen */
}

.logo-container {
	display: flex;
	align-items: center;
}

.logo-container img {
	max-width: 100px;
	height: auto;
}

.branding {
	margin-left: 15px;
}

.branding h1 {
	margin: 0;
	font-size: 1.5rem;
	color: white; /* Witte tekst */
}

.branding p {
	display: none; /* Verbergt de ondertitel */
}

nav {
	display: flex;
	align-items: center;
	position: relative;
}

nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 10px;
}

nav ul li {
	background: rgb(139, 17, 42); /* Kleur knoppen */
	padding: 10px 20px;
	border-radius: 5px;
	font-size: 1em;
}

nav ul li a {
	text-decoration: none;
	color: white; /* Witte tekst op knoppen */
	font-weight: bold;
}

nav ul li:hover {
	background: rgb(119, 14, 36); /* Donkerdere variant */
}

.hamburger {
	display: none;
	flex-direction: column;
	cursor: pointer;
	gap: 5px;
}

.hamburger div {
	width: 25px;
	height: 3px;
	background-color: white;
}

.menu {
	display: flex;
}

main {
	padding: 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.inleiding {
	margin-bottom: 20px;
	background: #dcd5c5; /* Zelfde kleur als nieuwsblokken */
	padding: 15px;
	border-radius: 5px;
	display: grid;
	grid-template-columns: 2fr 1fr; /* 2:1 verhouding */
	gap: 15px;
	align-items: start;
}

.inleiding .tekst {
	grid-column: 1 / 2;
}

.inleiding .afbeelding {
	grid-column: 2 / 3;
}

.inleiding img {
	max-width: 100%;
	border-radius: 5px;
	display: block;
}

.nieuwsberichten {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 kolommen */
	gap: 20px;
}

.nieuwsbericht {
	background: #dcd5c5; /* Kleur nieuwsblokken */
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.nieuwsbericht h2 a {
	color: #399B9C; /* Kleur titel links */
	text-decoration: none;
	font-weight: bold;
	transition: color 0.3s ease; /* Alleen de tekstkleur verandert bij hover */
}

.nieuwsbericht h2 a:hover {
	color: rgb(139, 17, 42); /* Donkerrood (kleur van bovenbalk) bij hover */
}

footer {
	background: rgb(173, 120, 42); /* Kleur footer */
	color: white;
	text-align: center;
	padding: 20px;
	margin-top: 20px;
}

@media (max-width: 768px) {
	nav ul {
		display: none;
		flex-direction: column;
		gap: 10px;
		background: rgb(139, 17, 42); /* Zelfde kleur als knoppen */
		padding: 10px 0;
		position: absolute;
		left: -100px; /* was 0 */
		top: 100%;
		width: 100%;
		text-align: left;
	}

	nav ul li {
		width:70px;
	}

	nav ul.active {
		display: flex;
	}

	.hamburger {
		display: flex;
	}

	.inleiding {
		grid-template-columns: 1fr; /* Enkelvoudige kolom bij smalle schermen */
	}

	.inleiding .afbeelding {
		display: none; /* Verberg afbeelding bij smalle schermen */
	}

	.nieuwsberichten {
		grid-template-columns: 1fr; /* Enkelvoudige kolom bij smalle schermen */
	}
}