.content {
    display: flex; /* Aktiviert Flexbox für das Layout */
    justify-content: space-between; /* Verteilt den Inhalt gleichmäßig mit Abstand zwischen den Elementen */
    padding: 0;
    padding-bottom: 20px; /* Fügt Abstand zum unteren Rand hinzu */
}

.content .image-section {
    flex: 1; /* Weist dem Bildbereich den gleichen flexiblen Platz wie dem Info-Bereich zu */
    padding: 20px; /* Fügt Innenabstand zum Bild hinzu */
    max-width: 400px; /* Begrenzung der maximalen Breite des Bildbereichs */
    display: flex; /* Aktiviert Flexbox für das Bild-Layout */
    flex-direction: column; /* Anordnung der Bild-Elemente in einer Spalte */
    gap: 10px; /* Abstand zwischen den Elementen innerhalb des Bildbereichs */
    overflow: hidden; /* Verhindert das Überlaufen des Bildes */
    align-items: flex-start; /* Bild oben ausrichten */
    margin-top: 20px; /* Abstand nach oben */
}

.nav {
    font-size: 18px; /* Schriftgröße der Navigation */
    text-align: center; /* Optional, falls Text auch innerhalb der Links zentriert werden soll */
    margin-top: 10px; /* Abstand nach oben */
    display: flex; /* Aktiviert Flexbox für die Navigation */
    justify-content: center; /* Zentriert die Navigation horizontal */
    width: 100%; /* Nutzt die gesamte Breite des übergeordneten Elements */
}

.nav a {
    text-decoration: none; /* Entfernt Unterstreichung der Links */
    color: black; /* Setzt die Textfarbe auf Schwarz */
    font-weight: bold; /* Macht den Text fett */
    margin-left: 25px; /* Fügt Abstand links von den Links hinzu */
    margin-right: 25px; /* Fügt Abstand rechts von den Links hinzu */
}

.nav .links {
    display: flex; /* Aktiviert Flexbox für die Links */
    justify-content: center; /* Zentriert die Links innerhalb des Containers */
    gap: 5px; /* Fügt einen Abstand zwischen den Links hinzu */
}

.content .info-section {
    flex: 1; /* Weist dem Info-Bereich den gleichen flexiblen Platz wie dem Bild-Bereich zu */
    font-size: 25px; /* Schriftgröße im Info-Bereich */
}

.info-section strong {
    font-size: 28px; /* Größere Schriftgröße für hervorgehobenen Text */
}

.info-section {
    margin: 25px; /* Abstand um den Info-Bereich */
    margin-top: 0px; /* Kein Abstand oben im Info-Bereich */
}

.info-section .subtitle {
    font-size: medium; /* Mittlere Schriftgröße für die Untertitel */
    font-style: italic; /* Kursivschrift für die Untertitel */
}

.footer {
    display: flex; /* Aktiviert Flexbox für den Footer */
    justify-content: space-between; /* Verteilt die Inhalte gleichmäßig im Footer */
    font-size: 20px; /* Schriftgröße im Footer */
    margin-top: 20px; /* Abstand oben im Footer */
}

.footer a {
    text-decoration: none; /* Entfernt Unterstreichung der Links im Footer */
}

        /* Bild-Stile */
.zoomable-image {
    width: 100%; /* Bild nimmt die gesamte Breite des Containers ein */
    height: 300px; /* Setzt die Höhe des Bildes */
    cursor: zoom-in; /* Zeigt einen Zoom-in Cursor an */
    transition: transform 0.3s ease; /* Sanfte Übergangsanimation beim Zoomen */
    object-fit: contain; /* Bild wird skaliert, ohne das Aspect Ratio zu verzerren */
    object-position: top; /* Bild oben im Container ausrichten */
}

/* Lightbox-Stile */
.lightbox {
    display: none; /* Lightbox standardmäßig ausgeblendet */
    position: fixed; /* Lightbox bleibt immer an der gleichen Stelle, auch bei Scrollen */
    top: 0;
    left: 0;
    width: 100%; /* Lightbox nimmt die gesamte Breite des Bildschirms ein */
    height: 100%; /* Lightbox nimmt die gesamte Höhe des Bildschirms ein */
    background: rgba(0, 0, 0, 0.9); /* Dunklerer Hintergrund mit Transparenz */
    justify-content: center; /* Zentriert den Inhalt der Lightbox */
    align-items: center; /* Zentriert den Inhalt vertikal */
    z-index: 1000; /* Stellt sicher, dass die Lightbox über allen anderen Inhalten liegt */
    flex-direction: column; /* Bild und Beschriftung untereinander anordnen */
}

.lightbox img {
    max-width: 90%; /* Bild kann maximal 90% der Breite einnehmen */
    max-height: 80%; /* Bild kann maximal 80% der Höhe einnehmen */
}

.lightbox .caption {
    color: #fff; /* Setzt die Schriftfarbe der Bildunterschrift auf Weiß */
    font-size: 20px; /* Schriftgröße der Bildunterschrift */
    margin-top: 15px; /* Abstand nach oben zur Bildunterschrift */
    text-align: center; /* Zentriert die Bildunterschrift */
}

.lightbox-close {
    position: absolute; /* Positioniert den Schließen-Button absolut innerhalb der Lightbox */
    top: 20px; /* Abstand vom oberen Rand */
    right: 20px; /* Abstand vom rechten Rand */
    font-size: 30px; /* Schriftgröße des Schließen-Buttons */
    color: #fff; /* Weiße Farbe für den Schließen-Button */
    cursor: pointer; /* Zeigt einen Zeiger-Cursor an, wenn über den Button gefahren wird */
    background: none; /* Kein Hintergrund für den Schließen-Button */
    border: none; /* Keine Umrandung für den Schließen-Button */
}

.container_title {
    display: flex; /* Aktiviert Flexbox für den Container */
    justify-content: space-between; /* Verwendet den gesamten verfügbaren Platz zwischen den Elementen */
    align-items: center; /* Zentriert beide Elemente vertikal im Container */
    width: 100%; /* Container nimmt die volle Breite des Eltern-Elements ein */
    height: 100px; /* Setzt eine Höhe für den Container */
}

.subtitle {
    margin-left: auto; /* Verschiebt das rechte Element nach rechts */
    text-align: right; /* Richtet den Text innerhalb des rechten Elements nach rechts aus */
}