/* Hintergrundbild und allgemeine Stile */
body {
	background-image: url('Ocean_Monument.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 0;
	margin: 0;
	height: 100vh;
}
/* Überschrift */
h1{
	text-align: center; /* Zentriert die Überschrift */
}
/* Home-Knopf */
.homeknopf{
	font-size: 30px; /* Größe des Home-Knopfes */
}
/* Container für den Home-Knopf */
.knopfi{
	padding: 20px; /* Innenabstand des Home-Knopf-Containers */
	border-radius: 70px; /* Runde Ecken */
	position: relative;
	display: flex;
	justify-content: center; /* Zentriert den Inhalt horizontal */
}

/* Verweise */
a:link, a:visited, a:hover, a:active {
	color: black; /* Farbe der Links */
	text-decoration: none; /* Entfernt Unterstreichungen */
}
/* Stile für die Slideshow */
.slideshow-container {
	max-width: 1200px; /* Maximale Breite des Slideshow-Containers */
	position: relative; /* Relative Positionierung für die Slideshow */
	margin: auto; /* Zentriert die Slideshow horizontal */
}

/* Verstecke die Slides standardmäßig */
.mySlides {
	display: none;
}

/* Stil für die vorherigen/ nächsten Schaltflächen */
.prev, .next {
	cursor: pointer; /* Maus wechselt beim Überfahren */
	position: absolute; /* Absolute Positionierung für die Schaltflächen */
	top: 50%; /* Position in der Mitte vertikal */
	width: auto;
	margin-top: -22px; /* Zentriert die Schaltflächen vertikal */
	padding: 16px;
	color: white; /* Farbe der Schaltflächen */
	font-weight: bold;
	font-size: 25px;
	transition: 0.6s ease; /* Übergangseffekt */
	border-radius: 0 20px 20px 0; /* Runde Ecken für die rechte Schaltfläche */
	user-select: none; /* Verhindert die Auswahl von Text */
}

/* Positioniere die "nächste" Schaltfläche rechts */
.next {
	right: 0;
	border-radius: 20px 0 0 20px; /* Runde Ecken für die linke Schaltfläche */
}

/* Beim Überfahren, füge einen dunklen Hintergrund mit leichter Transparenz hinzu */
.prev:hover, .next:hover {
	background-color: rgba(255,255,255,0.80);
}

/* Bildtext */
.text {
	color: white;
	font-size: 20px;
	padding: 8px 12px;
	position: relative;
	bottom: 37px;
	width: 100%;
	text-align: center;
}

/* Nummerierung der Bilder */
.numbertext {
	color: white; /* Farbe des Textes */
	font-size: 12px; /* Größe des Textes */
	padding: 8px 12px; /* Innenabstand des Textes */
	position: relative;
	top: 33px; /* Positionierung über dem Bild */
}

/* Die Punkte */
.dot {
	position: relative;
	bottom: 30px; /* Positionierung unter den Bildern */
	cursor: pointer; /* Zeigerzeiger beim Überfahren */
	height: 15px; /* Größe der Punkte */
	width: 15px; /* Größe der Punkte */
	margin: 0 2px; /* Außenabstand zwischen den Punkten */
	background-color: black; /* Farbe der Punkte */
	border-radius: 50%; /* Kreisförmige Form der Punkte */
	display: inline-block;
	transition: background-color 0.3s ease; /* Übergangseffekt */
}
/* Aktive Klasse für aktuelle Slide */
.active, .dot:hover {
	background-color: gray; /* Farbe der aktiven Punkte */
}

/* Fading-Animation für die Slides */
.fade {
	animation-name: fade;
	animation-duration: 2.0s; /* Dauer der Animation */
}
/* Schlüsselbild für die Fading-Animation */
@keyframes fade {
	from {
		opacity: .1 /* Startwert der Deckkraft */
	}
	to {
		opacity: 1 /* Endwert der Deckkraft */
	}
}