/* AI Label – Frontend */

.ail-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
    line-height: 0;
}

/*
 * Container-Ebene für die Mindestbreiten-Abfrage. Sie liegt bewusst NICHT auf .ail-wrap:
 * container-type erzeugt inline-size-Containment, wodurch der Inhalt nicht mehr zur
 * Breite beiträgt – ein shrink-to-fit-Wrapper fiele damit auf 0 zusammen. Dieser Layer
 * bekommt seine Größe dagegen vom Wrapper und darf sie behalten.
 */
.ail-guard {
    position: absolute;
    inset: 0;
    container-type: inline-size;
    pointer-events: none;
}

/* Fallback für Themes, die Bilder als Blockelement mit width:100% ausgeben. */
.ail-wrap--block {
    display: block;
}

.ail-wrap > img,
.ail-wrap > picture {
    max-width: 100%;
}

.ail-label {
    position: absolute;
    z-index: 2;
    width: var(--ail-w, 140px);
    max-width: calc(100% - 2 * var(--ail-x, 12px));
    opacity: var(--ail-op, 1);
    line-height: 0;
    pointer-events: none;
}

.ail-label > svg {
    display: block;
    width: 100%;
    height: auto;
}

.ail-pos--bottom-left  { left:  var(--ail-x, 12px); bottom: var(--ail-y, 12px); }
.ail-pos--bottom-right { right: var(--ail-x, 12px); bottom: var(--ail-y, 12px); }
.ail-pos--top-left     { left:  var(--ail-x, 12px); top:    var(--ail-y, 12px); }
.ail-pos--top-right    { right: var(--ail-x, 12px); top:    var(--ail-y, 12px); }

/* Die Kennzeichnung gehört auch auf den Ausdruck. */
@media print {
    .ail-label {
        opacity: 1;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}