/*
 * ATA KI-Kennzeichnung – Frontend
 *
 * Alle Label liegen in einer eigenen Ebene am Ende des Dokuments und werden
 * per Skript über den Bildern platziert. Dadurch wird die Seitenstruktur nicht
 * angetastet: keine zusätzlichen Elemente um das Bild, keine Änderung an
 * Positionierung oder Layout des Templates (NOVA, .square > .inner, Slick).
 *
 * Größe und Position setzt das Skript in Pixeln direkt am Element. Hier stehen
 * nur die Eigenschaften, die davon unabhängig sind – jeweils mit !important,
 * damit Template-Regeln sie nicht überschreiben.
 */

.ata-ki-layer {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 2147483000;
}

.ata-ki-layer .ata-ki-badge {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: none;
    box-sizing: border-box !important;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    pointer-events: none !important;
    -webkit-user-select: none;
    user-select: none;

    /* Damit das Label auch auf unruhigen Motiven steht. */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

/* Optionaler Textzusatz unter dem Bild. */
.ata-ki-layer .ata-ki-note {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    display: none;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.4;
    color: inherit;
    opacity: 0.75;
    pointer-events: none !important;
}

/*
 * Ohne JavaScript kann kein Label platziert werden. Der Hinweis steckt dann
 * weiterhin im Alternativtext des Bildes, den der Shop serverseitig ausgibt.
 */

/* Im Druck sichtbar halten. */
@media print {
    .ata-ki-layer .ata-ki-badge {
        filter: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}