/* Grundstyles für die Bilder */
/* Grundlegende Schriftart-Einstellungen */
body {
    font-family: 'Verdana', sans-serif; /* Setzt Verdana als primäre Schriftart */
	background-color: #2d3c4b;
}

/* Überschriften ebenfalls in Verdana */
h1, h2 {
    font-family: 'Verdana', sans-serif;
	background-color: #52b7c1;
	color: #FFF;
}

h3, h4, h5, h6 {
	font-family: 'Verdana', sans-serif;
	color: #2d3c4b;
}

/* Stilregeln für alle Links */
a {
    color: #52b7c1; /* Setzt die Schriftfarbe auf Türkis */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

/* Hover-Effekte für Links, optional */
a:hover, a:focus {
	color: #2d3c4b;
    text-decoration: none; /* Fügt eine Unterstreichung beim Überfahren mit der Maus hinzu */
}


.bild-container {
    display: flex;
    flex-wrap: wrap;
	width: 100%; /* Jedes Bild nimmt die volle Breite ein */
    height: auto; /* Erhält das Seitenverhältnis */
    margin: 5px; /* Abstand zwischen den Bildern */
}

.bild-container img {
    max-width: 100%; /* Bilder sollten nicht breiter als ihr Container sein */
    height: auto; /* Das Seitenverhältnis beibehalten */
    margin: 5px; /* Abstand zwischen den Bildern */
}

/* Media Queries für das Responsive Design */
@media (max-width: 768px) {
    .bild-container {
        flex-direction: column; /* Ändert die Anordnung auf untereinander */
    }
}

@media (min-width: 769px) {
    .bild-container img {
		flex-direction: column; /* Ändert die Anordnung auf untereinander */
        max-width: 600px; /* Maximale Breite der Bilder auf größeren Bildschirmen */
        max-height: 600px; /* Maximale Höhe der Bilder */
    }
}

.buttons-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.buttons-overlay a {
    display: inline-block;
    position: absolute;
}

.buttons-overlay a.button1 {
    top: 10px;
    left: 20px;
}

.buttons-overlay a.button2 {
    top: 150px; /* Stellen Sie sicher, dass dieser Abstand ausreichend ist */
    left: 120px;
}


#imageOverlay div {
    position: relative;
    width: 80%;
    max-width: 600px;
    margin: 50px auto;
    background-color: #2d3c4b; /* Stellen Sie sicher, dass dies auf den gewünschten dunklen Farbwert gesetzt ist */
    padding: 20px; /* Dies erstellt den "Rahmen" um das Bild */
    box-sizing: border-box; /* Stellt sicher, dass das Padding innerhalb der Breite und Höhe des Div enthalten ist */
}

#overlayImage {
    width: 100%; /* Stellt sicher, dass das Bild die volle Breite des Containers einnimmt */
    height: auto; /* Hält das Seitenverhältnis */
    display: block; /* Verhindert unerwünschte Abstände unter dem Bild */
    background-color: transparent; /* Entfernt jeden Hintergrund vom Bild selbst */
}

#imageOverlay div {
    position: relative;
    width: 80%;
    max-width: 600px;
    margin: 50px auto;
    background-color: #2d3c4b;
    padding: 20px;
}

#imageOverlay button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    border: none;
    background: none;
    color: #333;
    cursor: pointer;
}

#imageOverlay div {
    padding: 0; /* Entfernt das Padding komplett, wenn gewünscht */
    background-color: #2d3c4b; /* Stellen Sie sicher, dass dies korrekt gesetzt ist */
}