/* ==========================================================================
   1. TELEFON-BOX (Crawler-Schutz & Hover-Effekt)
   ========================================================================== */
.j-phone-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;           
    cursor: pointer !important;    
    font-family: sans-serif !important;
    color: #333333 !important;     /* Normalzustand: Dunkelgrau */
    font-weight: 500 !important;   
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;    
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 4px !important;    /* Exakter Abstand nach oben zur E-Mail */
}

/* Das Telefon-Icon */
.j-phone-box i {
    font-size: 16px !important;
    display: inline-block !important;
    color: inherit !important;     /* Übernimmt die Textfarbe */
    background: transparent !important;
    transition: color 0.1s ease;
}

.j-phone-box .j-placeholder {
    display: inline !important;    
    color: inherit !important;
}

.j-phone-box .j-real-number {
    display: none !important;       
}

.j-phone-box .j-fake {
    display: none !important;
}

/* HOVER TELEFON: Macht Text UND Icon blau */
.j-phone-box:hover {
    color: #007bff !important;     /* Wechselt zu Link-Blau */
}
.j-phone-box:hover .j-real-number {
    display: inline !important;    
}
.j-phone-box:hover .j-placeholder {
    display: none !important;      
}


/* ==========================================================================
   2. SOCIAL MEDIA LINKS & E-MAIL HOVER
   ========================================================================== */
.fms-social-container {
    display: block !important;
    margin-top: 4px !important;    /* Exakter Abstand nach oben zur Telefonnummer */
}

.fms-social-link {
    display: block !important;
    color: #000000 !important;    
    text-decoration: none !important;
    margin: 0 !important;         
    padding: 2px 0 !important;    /* Gleicher Abstand wie zwischen den anderen Zeilen */
}

/* HOVER SOCIAL MEDIA: Macht Text UND Icon blau */
.fms-social-link:hover {
    color: #007bff !important;   
}


/* ==========================================================================
   3. E-MAIL ICON HOVER (Zusatz für das bestehende Joomla-HTML)
   ========================================================================== */
/* Findet das Brief-Symbol vor dem E-Mail-Link und färbt es beim Hovern mit blau */
p:has(> a[href*="email_fmskontakt.php"]) em.fa-envelope,
em.fa-envelope:hover,
a[href*="email_fmskontakt.php"]:hover ~ em.fa-envelope {
    transition: color 0.1s ease;
}

/* Erzwingt das Mitfärben des E-Mail-Briefumschlags */
p:hover em.fa-envelope {
    color: #007bff !important;
}