:root {
	/* Farbpalette: */
	--full-black: #000000;
	--off-black: #202020;
	--dark-grey: #333333;
	--grey: #888888;
	--light-grey: #EEEEEE;
	--off-white: #F8F8F8;
	--full-white: #FFFFFF;

	--logo-yellow: #FFCC40;
	--logo-green: #44AA40;
	--logo-blue: #2066FF;

	--logo-light-yellow: #FFF5D9;
	--logo-light-green: #DAEED9;
	--logo-light-blue: #D2E0FF;

}

html {
	height: 100%;
}

/* Style the header */
header {
	background-color: var(--off-white);
	display: flex;						/* Damit alles in einer Reihe ist */
	justify-content: space-between;		/* Damit die Navigation auch rechts am Rand ist */
	align-items: center;				/* Alles auf einer Höhe */
	padding: 20px;						/* Abstand drum herrum */
	margin-bottom: 50px;
}

/* Style the logo */
.logo img {
	max-width: 100px;
	height: auto;
}

/* Style the navigation */
nav ul {
	list-style: none;					/* Liste ohne Punkte */
	display: flex;						/* Alles in einer Reihe */
}

nav li {
	margin-left: 20px;					/* Abstand zwischen den reitern */
}

/* Eigentliche einzelnen Navigations Reiter */
nav a {
	text-decoration: none;
	color: var(--off-black);
	font-weight: normal;
	font-size: 16px;
}

nav a:hover {
	text-decoration-line: underline;
}

h1 {
	color: var(--off-black);
	font-family: Arial, sans-serif;
	font-size: 32px;
}

h2 {
	color: var(--off-black);
	font-family: Arial, sans-serif;
	font-weight: normal;
	font-size: 18px;
}

h3 {
	color: var(--off-black);
	font-family: Arial, sans-serif;
	font-size: 15px;
	margin-top: 40px;
}

/* Set some basic styles for the body */
body {
	font-family: Arial, sans-serif;
	font-size: 15px;
	line-height: 1;
	color: var(--off-black);
	background-color: var(--light-grey);
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 0;
	height: 100%;
}

#slogan-section{
	background-color: var(--full-white); /* Hintergrundfarbe des Abschnitts */
    text-align: center; /* Text zentrieren */
    padding: 10%; /* Abstand um den Text herum */
}
  
/* CSS für die Boxen */
.box {
	width: 30%; /* Breite der Boxen */
	display: inline-block; /* Anordnung nebeneinander */
	margin: 10px; /* Abstand zwischen den Boxen */
	text-align: center; /* Zentrieren des Inhalts */
}
  
/* CSS für die Bilder */
.box img {
	transition: filter 0.3s ease;
	width: 100%; /* Vollständige Breite der Bilder */
	height: auto; /* Automatische Höhe, um das Bild nicht zu strecken */
}

.box img:hover {
	filter: brightness(0.7);
}

/* CSS für die Anordnung in zwei Reihen */
.row {
	background-color: var(--full-white); /* Hintergrundfarbe des Abschnitts */
    padding: 10%; /* Abstand um den Text herum */
	text-align: center; /* Zentrieren des Inhalts */
}
  
/* CSS für die Boxen in zwei Reihen */
.row .box {
	width: 30%; /* Breite der Boxen */
}
  
.date {
	font-size: 12px;
	font-weight: lighter;
	margin-bottom: 20px;
}

/* Style the section containing the news */
.section-news {
	background-color: var(--light-grey);
	padding: 20px;
}

/* Style the title of the section */
.section-title {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
}

/* Style the news post */
.post {
	background-color: var(--full-white);
	border: 2px solid var(--light-grey);
	padding: 20px;
	margin-bottom: 50px;
	overflow: hidden;
}

.post.expanded {
	max-height: none;
}

/* Style the title of the news post */
.post-title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

/* Style the image within the news post */
.post-image {
	max-height: 200;
	max-width: 350;
	height: 200;
	width: 350;
}

/* Style the content within the news post */
.post-content {
	line-height: normal;
	margin-bottom: 1px;
}

/* Style the "Read more" button */
.read-more-btn {
	background-color: transparent;
	border: none;
	padding: 0;
	font-weight: bold;
	cursor: pointer;
}

/* On hover, underline the "Read more" button */
.read-more-btn:hover {
	text-decoration: underline;
}

.read-more-text {
	display: none;
}

.read-more-text--show {
	display: inline;
}

/*Impressum*/
.impressum {
	background-color: var(--full-white);
	padding: 20px;
	margin-bottom: 50px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.text {
	align-items: normal;
	justify-content: left;
	margin-left: 500px;
	margin-right: 500px;
}

/* Style the footer */
footer {
	position: sticky;
	height: 40px;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	background-color: var(--full-white);
	padding: 20px;
}

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

.left,
.right {
	flex-grow: 1;
	background-color: var(--light-grey);
	padding: 20px;
}

.middle {
	max-width: 960px;
	background-color: var(--light-grey);
	padding: 20px;
	display: flex;
	flex-direction: column;
}

.middle-row {
	flex: auto;
}

/* @media (max-height: 500px) {
	.middle {
		width: 100%;
	}
}

@media (min-height: 501px) {
	.middle {
		max-width: 50%;
	}
} */