/* KI-Bildkennzeichnung für Divi 5 */

.kibk-host { position: relative !important; }

.kibk-label {
    position: absolute !important;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
    width: var(--kibk-label-desktop, 118px);
    height: 30px;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    appearance: none;
    -webkit-appearance: none;
    transition: transform .15s ease;
}

.kibk-label:hover { transform: scale(1.04); }
.kibk-label:focus-visible { outline: 2px solid #1c5aa6 !important; outline-offset: 3px; }
.kibk-label img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kibk-label-fallback {
    display: none;
    background: #111;
    color: #fff;
    font: 700 11px/1 Arial, sans-serif;
    letter-spacing: .02em;
    padding: 7px 10px;
    border-radius: 4px;
    white-space: nowrap;
}
.kibk-label.kibk-fallback img { display: none; }
.kibk-label.kibk-fallback .kibk-label-fallback { display: inline-block; }

.kibk-info {
    position: absolute !important;
    right: 10px;
    bottom: 50px;
    z-index: 10000;
    width: min(310px, calc(100% - 20px));
    box-sizing: border-box;
    padding: 14px 16px;
    background: rgba(255,255,255,.98);
    color: #222;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,.28);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
}
.kibk-info strong { display: block; margin: 0 0 6px; color: #111; font-size: 13px; font-weight: 700; }
.kibk-host.kibk-open .kibk-info { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }

/* Divi Gallery hover only on galleries where plugin found classified images. */
.et_pb_gallery .et_pb_gallery_image { position: relative; overflow: hidden; }
.et_pb_gallery .et_pb_gallery_image img { display: block; transition: transform .28s ease, filter .28s ease; }
.et_pb_gallery .et_overlay::before { display: none !important; content: none !important; }
.et_pb_gallery .et_overlay { background: rgba(0,0,0,0) !important; border: 0 !important; opacity: 1 !important; transition: background .28s ease !important; }
.et_pb_gallery .et_pb_gallery_item:hover .et_overlay { background: rgba(0,0,0,var(--kibk-hover-darkness,.10)) !important; }
.et_pb_gallery .et_pb_gallery_item:hover .et_pb_gallery_image img { transform: scale(var(--kibk-hover-zoom,1.025)); }

/* Lightbox: fixed to body and positioned against visible image area by JS. */
.kibk-lightbox-label {
    position: fixed !important;
    z-index: 2147483646 !important;
    width: calc(var(--kibk-label-desktop, 118px) + 14px);
    height: 31px;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    outline: 0;
    background: transparent !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    appearance: none;
    -webkit-appearance: none;
    transition: transform .15s ease;
}
.kibk-lightbox-label:hover { transform: scale(1.04); }
.kibk-lightbox-label:focus-visible { outline: 2px solid #fff !important; outline-offset: 3px; }
.kibk-lightbox-label img { width: 100%; height: 100%; object-fit: contain; display: block; }
.kibk-lightbox-label.kibk-fallback img { display: none; }
.kibk-lightbox-label.kibk-fallback .kibk-label-fallback { display: inline-block; }

.kibk-lightbox-info {
    position: fixed !important;
    z-index: 2147483647 !important;
    width: 320px;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
    padding: 14px 16px;
    background: rgba(255,255,255,.98);
    color: #222;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 8px;
    box-shadow: 0 5px 22px rgba(0,0,0,.40);
    font-family: inherit;
    font-size: 12px;
    line-height: 1.5;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    pointer-events: none;
}
.kibk-lightbox-info strong { display:block; margin:0 0 6px; color:#111; font-size:13px; font-weight:700; }
.kibk-lightbox-info.kibk-open { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }

@media (max-width: 980px) {
    .kibk-label { right: 7px; bottom: 7px; width: var(--kibk-label-tablet,108px); height: 28px; }
    .kibk-info { right: 7px; bottom: 45px; width: calc(100% - 14px); }
    .kibk-lightbox-label { width: calc(var(--kibk-label-tablet,108px) + 7px); height: 28px; }
}

@media (max-width: 480px) {
    .kibk-label { right: 6px; bottom: 6px; width: var(--kibk-label-mobile,98px); height: 25px; }
    .kibk-info { right:6px; bottom:41px; width:calc(100% - 12px); padding:11px 12px; font-size:11px; }
    .kibk-info strong { font-size:12px; }
    .kibk-lightbox-label { width: calc(var(--kibk-label-mobile,98px) + 7px); height:25px; }
    .kibk-lightbox-info { padding:11px 12px; font-size:11px; }
    .kibk-lightbox-info strong { font-size:12px; }
}