/* Gemeinsame Stile für soziale Medien Icons */
.social-media-container a {
    margin: 0 10px; /* Abstand zwischen Icons */
    display: inline-block; /* Icons horizontal ausrichten */
}

.social-media-container img {
    width: 24px; /* Größe basierend auf Vorlieben anpassen */
    height: auto; /* Seitenverhältnis beibehalten */
    transition: transform 0.3s ease; /* Weiche Skalierung beim Hovern */
}

.social-media-container img:hover {
    transform: scale(1.1); /* Icons beim Hovern leicht vergrößern */
}

/* Spezifische Stile für soziale Medien Icons im Banner */
#social-media-icons-banner {
    position: absolute;
    bottom: 10px; /* Anpassung basierend auf Bannerhöhe */
    right: 10px; /* Unten rechts positionieren */
    z-index: 2; /* Sichtbarkeit gewährleisten */
}

/* Spezifische Stile für soziale Medien Icons im Footer */
#social-media-links {
    text-align: right; /* Icons nach rechts ausrichten */
    padding: 10px 0; /* Etwas Platz oben und unten */
}

/* Stile für den Footer */
.footer {
    display: flex; /* Flexbox verwenden */
    justify-content: space-between; /* Abstand zwischen den Spalten */
    align-items: center; /* Vertikale Ausrichtung */
    background-color: #6200ea; /* Hintergrundfarbe */
    color: white; /* Textfarbe */
    padding: 20px; /* Innenabstand */
    border-radius: 10px; /* Abgerundete Ecken */
    margin-top: 20px; /* Abstand zum vorherigen Inhalt */
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .footer {
        flex-direction: column; /* Spalten untereinander */
        text-align: center; /* Zentrieren des Inhalts */
    }

    #social-media-links {
        text-align: center; /* Icons im Footer zentrieren */
    }
}