/*
 * Social-Media-Links im Footer.
 * Die vorhandene äußere Footer-Struktur und ihre Ausrichtung bleiben erhalten.
 */

#footer .socialmedia.leona-socialmedia {
    width: auto;
    max-width: 100%;
}

/*
 * Die innere Gruppe übernimmt die Anordnung der Symbole.
 * Die äußere .socialmedia behält ihre vorhandenen Layout-Klassen.
 */
#footer .leona-socialmedia__links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    max-width: 100%;
    vertical-align: middle;
}

/*
 * Einheitliche anklickbare Fläche für jeden Kanal.
 */
#footer .leona-socialmedia__links > a {
    display: inline-flex;
    flex: 0 0 50px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/*
 * Bilder innerhalb der Link-Fläche zentrieren.
 * Unterschiedliche Seitenverhältnisse bleiben erhalten.
 */
#footer .leona-socialmedia__links > a > img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

/*
 * Sichtbare Hervorhebung bei Tastaturbedienung.
 */
#footer .leona-socialmedia__links > a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}