/**
 * .diff - KI-Bildkennzeichnung
 *
 * Der Wrapper soll sich moeglichst unsichtbar verhalten: er uebernimmt nur die
 * Positionierung, alle Bildregeln des Themes greifen als Nachfahren-Selektoren
 * weiterhin auf das <img>.
 */

.diff-ai-image {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.diff-ai-image__badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;

    border-radius: 999px;
    background: rgba(17, 17, 17, 0.72);
    color: #fff;

    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;

    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/**
 * Das Info-Icon liegt bewusst im CSS und nicht im Markup:
 * - Elementor filtert Bild-HTML durch wp_kses_post(), das <svg> entfernt.
 * - Ein leeres <span> als Icon-Traeger wird von der Output-Pipeline entsorgt.
 * Als ::before bleibt nichts uebrig, was jemand wegfiltern koennte. Per Mask
 * folgt das Icon ausserdem der Textfarbe des Badges.
 */
.diff-ai-image__badge::before {
    content: "";
    flex: 0 0 auto;
    width: 1.18em;
    height: 1.18em;
    display: block;

    background-color: currentColor;

    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 4.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM14.25 17.5h-4.5V16H11v-3.75H9.75v-1.5H13V16h1.25v1.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2Zm0 4.75a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM14.25 17.5h-4.5V16H11v-3.75H9.75v-1.5H13V16h1.25v1.5Z'/%3E%3C/svg%3E");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.diff-ai-image__label {
    display: block;
}

/* Sehr kleine Bilder (Icons, Logos): Hinweis wuerde das Motiv zudecken. */
@media (max-width: 480px) {
    .diff-ai-image__badge {
        right: 4px;
        bottom: 4px;
        padding: 2px 6px;
        font-size: 10px;
    }
}

@media (prefers-contrast: more) {
    .diff-ai-image__badge {
        background: #111;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}