/* Stil für das Logo-Container */
/* Header-Container */
.container-logo {
    display: flex;
    align-items: center; /* Elemente vertikal zentrieren */
    gap: 80px; /* Abstand zwischen Logo und Bild */
    padding: 10px 20px; /* Etwas Innenabstand */
}

/* Logo */
.container-logo nav img {
    width: 150px; /* Logo-Größe */
    height: auto;
}

/* Bild neben dem Logo */
.header.bild img {
    width: 300px; /* Kleinere Breite für das Bild */
    height: auto;
    margin-top: 30px;
}

/* Stil für die Bilder-Sektion */
.bilder {
    width: 100vw; /* Volle Breite des Viewports */
    display: flex;
    flex-direction: column; /* Bilder untereinander anordnen */
    align-items: center; /* Bilder mittig ausrichten */
}

.bilder img {
    width: 100%; /* Volle Breite */
    height: auto; /* Höhe automatisch anpassen */
    object-fit: cover; /* Bild bleibt proportional */
    display: block;
    max-width: 100%;
}

/* Footer-Styling */
.content-footer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

/* Flexbox für gleichmäßige Verteilung der Links */
.footer {
    width: 80%; /* Breite des Footer-Bereichs */
    display: flex;
    justify-content: space-between; /* Gleichmäßige Verteilung der Links */
    align-items: center;
    text-align: center;
}

/* Links anpassen */
.footer a {
    color: #333; /* Dunkelgrau */
    font-family: Arial, sans-serif;
    font-weight: bold;
    flex: 1; /* Alle Links gleich groß */
    text-align: center; /* Zentrierter Text */
    text-decoration: none;
}
.footer a:hover {
    color: #555; /* Etwas helleres Grau beim Hover-Effekt */
}
/* Allgemeine Schriftart für die gesamte Seite */
body {
    font-family: Arial, sans-serif;
}


@media screen and (max-width: 768px) {
    /* Logo-Container für mobile Ansicht */
    .container-logo {
        margin: 10px 0 0 10px; /* Weniger Abstand */
    }

    .container-logo img {
        width: 120px; /* Kleineres Logo für mobile Ansicht */
    }

    /* Bilder sollen immer die volle Breite füllen */
    .bilder img {
        width: 100vw; /* Volle Breite des Viewports */
        height: auto; /* Höhe bleibt automatisch */
        display: flex;
        display: block;
        max-width: 100%;
    }

}

/* Footer-Styling */
.content-footer {
    width: 100%;
    display: flex;
    flex-direction: column; /* Setzt die Elemente untereinander */
    align-items: center;
    padding: 20px 0;
}

/* Links im Footer zentrieren */
.footer {
    width: 80%;
    display: flex;
    justify-content: space-between; /* Links gleichmäßig verteilen */
    align-items: center;
    text-align: center;
    margin-bottom: 20px; /* Abstand zum Bild */
}

/* Links-Styling */
.footer a {
    color: #333;
    font-family: Arial, sans-serif;
    font-weight: bold;
    flex: 1;
    text-align: center;
    text-decoration: none;
}

/* Footer-Bild unter dem Text, leicht nach links versetzt und kleiner */
.footer.bild {
    width: 50%; /* Verkleinert das Bild auf 50% der Container-Breite */
    margin-left: 20px; /* 20px Abstand von links */
    display: flex;
    justify-content: flex-start; /* Bild bleibt linksbündig */
}

.footer.bild img {
    width: 100%; /* Bild skaliert sich innerhalb des Containers */
    height: auto; /* Höhe bleibt variabel */
}
/* Media Query für mobile Geräte bis 768px Breite */
@media screen and (max-width: 768px) {
    /* Footer untereinander anordnen */
    .footer {
        flex-direction: column; /* Elemente untereinander anordnen */
        text-align: center;
        width: 100%;
    }

    /* Footer-Links mit 14px Schriftgröße */
    .footer a {
        font-size: 16px; /* Kleinere Schriftgröße */
        margin: 2px 0; /* Abstand zwischen den Links */
    }

    /* Mailto-Link dunkelblau */
    .footer a[href^="mailto"] {
        color: #032547; /* Dunkelblau */
        font-weight: bold;
    }
}
/* Media Query für mobile Geräte bis 768px Breite */
@media screen and (max-width: 768px) {
    /* Logo-Container anpassen */
    .container-logo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px; /* Weniger Padding für mehr Platz */
    }

    /* Logo selbst verkleinern */
    .container-logo img {
        width: 80px !important; /* Erzwingt die kleinere Breite */
        height: auto;
    }
}