/* KONTAKT-INFO */

/* Container für das Symbol und den Link */
#kontakt-info div {
    display: flex; /* Flexbox aktivieren, damit Symbol und Link in einer Reihe sind */
    align-items: center; /* Vertikale Ausrichtung der Elemente */
    /* transition: color 0.3s ease; /* Sanfter Übergang der Farbe beim Hover */
}

/* Farbe für die Font Awesome-Symbole (Telefon & E-Mail) */
#kontakt-info .fa-phone-alt,
#kontakt-info .fa-envelope {
    color: #E8EAED; /* Normale Farbe für Symbole (blau) */
    /* transition: color 0.3s ease; /* Sanfter Übergang der Farbe beim Hover */
    margin-right: 8px; /* Abstand zwischen Symbol und Text */
}

/* Farbe für den Link (Telefon & E-Mail) */
#kontakt-info a {
    color: #E8EAED; /* Normale Farbe für den Link (orange) */
    text-decoration: none; /* Entfernt die Unterstreichung des Links */
    /* transition: color 0.3s ease; /* Sanfter Übergang der Farbe beim Hover */
}

/* Hover-Effekt auf dem gesamten Container (Symbol + Link) */
#kontakt-info div:hover .fa-phone-alt,
#kontakt-info div:hover .fa-envelope,
#kontakt-info div:hover a {
    color: #FFC726; /* Farbe für Symbole und Links im Hover-Zustand (helles Orange) */
}