/* X-Comply — Frontend-Transparenzhinweis (EU AI Act, Art. 50).
   Zurückhaltend, aber lesbar: keine Symbole, kein farbiger Kasten, keine Alarmfarbe — ein korrekt
   gekennzeichneter KI-Inhalt ist kein Fehlerzustand. Die Kennzeichnung trägt die Typografie.
   Wichtig: NICHT blass werden lassen — ein kaum wahrnehmbarer Hinweis gilt nach den Leitlinien zu
   Art. 50 als unzureichend. Farben erben vom Theme und funktionieren hell wie dunkel. */

.xcomply-disclosure {
    display: block;
    margin: 2em 0 0;
    padding: .85em 0 0;
    border-top: 1px solid currentColor;
    /* Feine Linie, ohne die Textfarbe zu verwässern. */
    border-top-color: color-mix(in srgb, currentColor 22%, transparent);
    font-size: .9em;
    line-height: 1.55;
    color: inherit;
}

.xcomply-disclosure__label {
    font-weight: 600;
}

.xcomply-disclosure__label::after {
    content: ": ";
}

/* Rückfall für Browser ohne color-mix: dann lieber eine klar sichtbare Linie als gar keine. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
    .xcomply-disclosure {
        border-top-color: rgba(128, 128, 128, .45);
    }
}

/* Kennzeichnung direkt am KI-Bild. Das Bild wird in einen relativen Rahmen gesetzt, das Label
   liegt sichtbar in der unteren linken Ecke. */
.xcomply-image {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* Reine Textmarke: klein und ruhig, aber mit sicherem Kontrast auf jedem Bildmotiv. */
.xcomply-image__badge {
    position: absolute;
    left: .5em;
    bottom: .5em;
    display: inline-block;
    padding: .18em .5em;
    border-radius: 3px;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: .01em;
    white-space: nowrap;
    pointer-events: none;
}

/* Video: Die Bedienleiste liegt unten und würde das Label verdecken — deshalb nach oben. */
.xcomply-image--video .xcomply-image__badge,
.xcomply-image__badge--video {
    top: .5em;
    bottom: auto;
}

/* Label auf einem Element, das sein KI-Bild als CSS-Hintergrund trägt (vom Skript gesetzt).
   Der Bezugsrahmen entsteht dort per position:relative — hier genügt die Feinlage. */
.xcomply-image__badge--bg {
    left: .75em;
    bottom: .75em;
    z-index: 2;
}

/* Für Screenreader sichtbar, optisch versteckt (WordPress-Konvention). */
.xcomply-image .screen-reader-text,
.xcomply-image__badge .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}