/* Block Styles: Kontakt Icons für Paragrafen */

/* GEMEINSAME BASIS-STYLES */
.is-style-mail-icon,
.is-style-phone-icon,
.is-style-info-icon {
    display: flex !important;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    min-height: 2.5rem;
}

/* --- MAIL & TELEFON STYLE (Mit Kreis/Hintergrund & Hover) --- */

.is-style-mail-icon,
.is-style-phone-icon {
    padding-left: 3.5rem !important;
    /* Platz für den Kreis */
}

/* Der Kreis (nur für Mail/Phone) */
.is-style-mail-icon::before,
.is-style-phone-icon::before {
    content: '' !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    background-color: rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}

/* Das Icon (für Mail/Phone) */
.is-style-mail-icon::after,
.is-style-phone-icon::after {
    content: '' !important;
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    background-color: var(--wp--preset--color--primary, #8E354A);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.3s ease !important;
}

/* Kontrast auf Beere (für Mail/Phone) */
.has-primary-background-color .is-style-mail-icon::before,
.has-primary-background-color .is-style-phone-icon::before {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.has-primary-background-color .is-style-mail-icon::after,
.has-primary-background-color .is-style-phone-icon::after {
    background-color: var(--wp--preset--color--polar-white) !important;
}

/* Hover auf Beere (für Mail/Phone) */
.is-style-mail-icon:hover::before,
.is-style-phone-icon:hover::before {
    background-color: var(--wp--preset--color--accent-dark) !important;
    transform: translateY(-50%) scale(1.05);
}

.is-style-mail-icon:hover::after,
.is-style-phone-icon:hover::after {
    background-color: var(--wp--preset--color--polar-white) !important;
}


/* --- INFO ICON STYLE (Schlicht, Koralle, Kein Kreis, Kein Hover) --- */

.is-style-info-icon {
    padding-left: 0 !important;
    align-items: flex-start !important;
    /* Top-aligned */
    gap: 0.75rem !important;
    /* Entspricht gap-3 (0.75rem / 12px) */
}

.is-style-info-icon::before {
    content: '' !important;
    display: flex;
    flex-shrink: 0;
    /* Nicht stauchen */
    width: 1.25rem;
    /* h-5 (1.25rem / 20px) */
    height: 1.25rem;
    margin-top: 0.25rem;
    /* Entspricht etwa mt-1 */
    background-color: var(--wp--preset--color--accent-dark, #e57373);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;

    /* Info Maske direkt hier für Info-Style */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z'%3E%3C/path%3E%3C/svg%3E");
}

.is-style-info-icon::after {
    display: none !important;
    /* Icon auf der rechten Seite ausblenden */
}

/* Kontrast auf Beere (für Info) -> Weiß */
.has-primary-background-color .is-style-info-icon::before {
    background-color: var(--wp--preset--color--polar-white) !important;
}


/* MASKEN-URLS */
.is-style-mail-icon::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z'%3E%3C/path%3E%3C/svg%3E");
}

.is-style-phone-icon::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'%3E%3C/path%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='black'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z'%3E%3C/path%3E%3C/svg%3E");
}

/* Global für alle Links in diesen Icons */
.is-style-mail-icon a,
.is-style-phone-icon a,
.is-style-info-icon a {
    text-decoration: none !important;
    color: inherit !important;
    font-weight: 700;
}