/*----*/

.roundpic {
    width: 120px; /* Festgelegte Breite des Bildes */
    height: 120px; /* Festgelegte Höhe des Bildes */
    border-radius: 50%; /* Rundet das Bild zu einem Kreis */
    object-fit: cover; /* Füllt das Bild, ohne das Seitenverhältnis zu verzerren */
    overflow: hidden; /* Überflüssige Teile des Bildes abschneiden */
    display: block; /* Block-Element für Zentrierung */
    margin: 0 auto 20px; /* Zentriert das Bild und fügt Abstand nach unten hinzu */
}

.icon-container {
    display: flex; /* Platziert die Icons nebeneinander */
    justify-content: center; /* Zentriert die Icons in der Mitte */
    gap: 20px; /* Abstand zwischen den Icons */
    margin-bottom:1em;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px; /* Breite der Icons */
    height: 60px; /* Höhe der Icons */
    background-color: none; /* Hintergrundfarbe (z.B. Blau für mehr Sichtbarkeit) */
    color: white; /* Farbe der Icons */
    border-radius: 50%; /* Runde Form */
    border-color: #fff;
    border-style: solid;
    border-width: 2px;
    text-decoration: none; /* Keine Unterstreichung */
    transition: background-color 0.3s; /* Weicher Übergang bei Hover */
    overflow: hidden; /* Verhindert Überlappen */
}

.icon:hover {
    background-color: #fff; /* Hintergrundfarbe bei Hover */
    color: #000; /* Schriftfarbe bei Hover */
}

.icon-svg {
    width: 60%; /* Breite der Icons */
    height: auto; /* Höhe automatisch */
    fill: white; /* Weiße Füllfarbe für die Icons */
}