/* 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-label > svg .cls-1 {
    fill: #fff!important;
  }

.ail-label > svg .cls-2 {
    fill: #000!important;
 }

.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); }

/*
 * Slider-Kompatibilität: slippry
 *
 * slippry gibt seinen Bildern die Breite über Kind-Selektoren (.sy-slide > img,
 * .sy-slide > a > img). Der eingeschobene Wrapper unterbricht diese Kette: das Bild
 * verliert width:100% und fällt auf seine Eigenbreite zurück, während der Slider seine
 * Höhe weiter aus der vollen Breite ableitet – Bild und Label sitzen dann versetzt im
 * Slider und darunter klafft eine Lücke.
 *
 * Deshalb übernimmt der Wrapper hier die Rolle des Bildes: er füllt die Slide und reicht
 * die Breite an das Bild durch. Die Selektoren sind spezifischer als die von slippry und
 * greifen damit unabhängig von der Reihenfolge der Stylesheets.
 */
.sy-slide > .ail-wrap,
.sy-slide > a > .ail-wrap {
    display: block;
    width: 100%;
    height: 100%;
}

.sy-slide .ail-wrap > img,
.sy-slide .ail-wrap > picture,
.sy-slide .ail-wrap > picture > img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 1200px) {
    .active .img_slide .ail-wrap {
        width: calc(50% - 1rem)!important;
    }
    .active .img_slide .ail-wrap img {
        width: 100%!important;
    }
}

.video_thumb,
.video_thumb .ail-wrap {
    inset: 0;
    position: absolute;
}

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