/* Arial Schriftart einbinden */
@font-face {
	font-family: Arial, sans-serif;
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: Arial, sans-serif;
	background-color: white;
	text-align: center;
}

.main-images {
	display: flex; /* Flexbox-Container */
	flex-direction: column; /* Stapelt die Elemente vertikal */
	justify-content: center; /* Zentriert die Elemente vertikal */
	align-items: center; /* Zentriert die Elemente horizontal */
	height: 100vh; /* Höhe des Containers entspricht der Höhe des Viewports */
	margin: 0; /* Entfernt den Standardabstand */
}
	.main-images img:first-of-type {
		width: 20%; /* Setzt die Breite des Bildes auf 20% seiner ursprünglichen Größe */
	}

	.main-images img {
		margin-bottom: 10px; /* Fügt einen Abstand zwischen den Bildern hinzu */
	}

footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: center;
}


/* ==================== Modal Window CSS ===================== */

/* main css for background */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.2);
}

/* outer modal window css */
.modal-content {
	background-color: #fefefe;
	margin-top: 5%; /* Positioniert das Fenster 15% von oben */
	margin-left: 10%;
	/*margin: 15% auto;*/
	padding: 20px;
	border: 10px solid #888; /* Dunkelgrauer Rahmen */
	width: 80%;
	max-height: 80vh;
	overflow-y: auto;
	flex-grow: 1;
	text-align: left; /* Links ausgerichtet */
}

	.modal-content p {
		margin-left: 10px; /* 20px Abstand zum linken Rand */
		margin-right: 20px; /* 20px Abstand zum rechten Rand */
	}
	
	.modal-content button {
		display: inline-block; /* Block-Element für Größenanpassung */
		border: 2px solid #333; /* 2px Rahmen */
		padding: 10px 20px; /* Innenabstand */
		text-align: center; /* Text zentrieren */
		cursor: pointer; /* Cursor-Stil ändern, um Klickbarkeit anzuzeigen */
		background-color: transparent; /* Hintergrundfarbe transparent */
		color: #333; /* Textfarbe */
		font-size: 16px; /* Schriftgröße */
		margin: 20px 20px 0 20px; /* Gleichmäßiger Abstand von allen Seiten */
	}

		.modal-content button:hover {
			background-color: #ddd; /* Hintergrundfarbe beim Überfahren mit der Maus */
		}

/* modal windows headline css */

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.modal-header h2,
	.modal-header span {
		flex: 1;
		margin-left: 20px; /* 20px Abstand zum linken Rand */
		margin-top: 0px;
		margin-bottom: 0px;
	}


/* modal window upper right x-symbol to close window*/
.close {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
	text-align: right;
}

	.close:hover,
	.close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	}