.footer {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;

}

.footer-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Abstand zwischen den Logos */
    max-width: 1200px;
    margin: auto;
}
h3,h4 {
    font-family: sans-serif;
    font-weight: 100;
}

.footer-logo {
    flex: 0 0 auto; /* Verhindert, dass die Logos wachsen */
}



.footer-logo.left img {

    margin:0;
    padding:0;
    max-width: 300px; /* Maximalbreite für das erste Logo */
    width: 100%; /* Bild passt sich der Breite an */
}

.footer-logo.right img {
    max-width: 100px; /* Maximalbreite für das rechte Logo */
    width: 100%; /* Bild passt sich der Breite an */
    border-radius: 5px;
}
.footer-logo.right p {
    font-size: 10px !important;
    color: red !important;
    line-height: 1.5 !important;
}
.footer-links {
   
   /* flex-grow: 1; /* Nimmt den verfügbaren Platz ein */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Zentriert den gesamten Inhalt horizontal */
    margin: 0 50px; /* Abstand zu den Logos (Abstand links und rechts) */
    text-align: center; /* Text innerhalb des Blocks zentrieren */
}

.footer-links h3 {
    text-align: center; /* Titel zentriert */
    margin-bottom: 10px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Unterseiten untereinander anordnen */
    align-items: flex-start; /* Links linksbündig */
}

.footer-links li {
   line-height: 1.2 !important;
    margin: 0; /* Abstand zwischen den Links */
    display: flex; /* Kreis und Text in einer Reihe ausrichten */
    align-items: center;
}

.circle {
    width: 5px; /* Kleinere Kreisgröße */
    height: 5px;
    background-color: red; /* Kreisfarbe blau */
    border-radius: 50%;
    margin-right: 10px; /* Abstand zwischen Kreis und Text */
}

.footer-links a {
    color: white;
    text-decoration: none;
    transition: color 0.3s; /* Sanfte Übergänge für Farbänderung */
}

.footer-links a:hover {
    color: #f0a500; /* Textfarbe bei Hover ändern */
}

.footer-contact {
    margin-top: 20px;
    text-align: center; /* Adressen zentrieren */
}

.addresses {
    color: white !important;
    display: flex; /* Adressen nebeneinander anordnen */
    justify-content: space-around; /* Gleichmäßiger Abstand zwischen den Adressen */
    margin-top: 20px;
}
.addresses p {
    color: white !important;
    line-height: 1.3 !important;
    font-size: 12px;

}
.address {
    color: white !important;
    text-align: left; /* Text linksbündig ausrichten */
    margin: 0 20px; /* Abstand zwischen den Adressen */
}

.footer-bottom-logo {
    margin-top: 20px;
}

.footer-bottom-logo img {
    max-width: 80px; /* Logo-Größe anpassen */
}
.social-icons {
    margin-top: 50px; /* Space between phone number and icons */
}

.social-icons a {
    margin-left: 25px; /* Space between icons */
    color: inherit; /* Keeps the icon color the same as text */
    text-decoration: none; /* Removes underline */
    font-size: 1.5em;
}

.social-icons a:hover {
    color: red; /* Change color on hover (example color) */
}


@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; /* Stapeln der Elemente auf kleineren Bildschirmen */
    }

    .footer-logo, .footer-links {
        margin-bottom: 20px;
        text-align: center; /* Zentriert auf kleinen Bildschirmen */
    }

    .addresses {
        flex-direction: column; /* Adressen untereinander anordnen auf kleinen Bildschirmen */
        align-items: center; /* Zentriert auf kleinen Bildschirmen */
    }

    .address {
        margin-right: 0; /* Abstand zwischen den Adressen zurücksetzen */
        margin-bottom: 20px; /* Abstand zwischen den Adressen */
    }
}