/*
* Badges werden nativ in die bestehende DOM eingefügt. Bekannte
* WPCarSync-Inhalte (Fahrzeug/Modell/Angebot/...) bekommen Badge + Anker
* bereits serverseitig direkt im Template (siehe DXIM\AILabeling::badge()/
* anchor_class()) — diese Klassen werden nur noch von JS für manuell
* gekennzeichnete Stellen (wpcs_custom_ai_label(_scope), Zusatz-Selektoren)
* sowie für die Lightbox-Anzeige dynamisch vergeben.
*/
.wpcs-ai-anchor {
position: relative;
/*
* Eigener Stacking-Context, sonst konkurriert das Badge (z-index) nicht
* zuverlässig gegen Overlay-Links wie ".full_link"-Kartenmuster ("ganze
* Karte klickbar"), die selbst oft position:absolute + z-index nutzen.
* position:relative OHNE eigenes z-index erzeugt KEINEN neuen Stacking-
* Context — das Badge würde dann in einem viel höher liegenden Context
* verglichen, wo z-index-Werte nicht mehr zuverlässig gewinnen.
*/
z-index: 1;
}
/*
* Nur für die (Nicht-Swiper-)Lightbox verwendet (siehe wrapImageTightly() im
* JS): schrumpft sich per display:inline-block auf die tatsächliche
* gerenderte Größe des eingewickelten ![]()
, statt (wie überall sonst) den
* nächsten bestehenden Container als Anker zu nehmen — der ist in der
* Lightbox meist deutlich größer als das Bild selbst (Buttons/Counter).
* line-height:0 vermeidet den sonst üblichen kleinen Leerraum unter
* inline-block-Bildern durch die Grundlinien-Ausrichtung.
*/
.wpcs-ai-img-wrap {
display: inline-block;
line-height: 0;
}
.wpcs-ai-badge {
position: absolute;
z-index: 999;
pointer-events: auto;
/*
* iOS Safari synthetisiert aus einem Tap nur dann zuverlässig ein
* echtes "click"-Event auf einem nicht-nativen Element (hier ein
* ), wenn dieses entweder cursor:pointer hat oder ein natives
* interaktives Element ist.
*/
cursor: pointer;
background: var(--wpcs-ai-badge-bg, #000000);
color: var(--wpcs-ai-badge-color, #ffffff);
font-size: 11px;
line-height: 1;
font-weight: 600;
letter-spacing: 0.02em;
padding: 3px 6px;
border-radius: var(--wpcs-ai-badge-radius, 3px);
-webkit-user-select: none;
user-select: none;
}
.wpcs-ai-badge--top-left { top: 6px; left: 6px; }
.wpcs-ai-badge--top-right { top: 6px; right: 6px; }
.wpcs-ai-badge--bottom-left { bottom: 6px; left: 6px; }
.wpcs-ai-badge--bottom-right { bottom: 6px; right: 6px; }
/*
* Tooltip wird NICHT als ::after relativ zum Badge positioniert, weil viele
* Bilder in Slidern (Swiper/Slick) stecken, deren Container `overflow:hidden`
* gesetzt haben — das würde ein absolut positioniertes Tooltip immer
* abschneiden. Stattdessen hängt das JS ein einzelnes, wiederverwendetes
* Tooltip-Element direkt an und positioniert es per position:fixed
* anhand der tatsächlichen Bildschirmkoordinaten des gehoverten Badges.
*/
.wpcs-ai-tooltip {
position: fixed;
top: -9999px;
left: -9999px;
background: #111111;
color: #ffffff;
padding: 6px 10px;
border-radius: 4px;
width: max-content;
max-width: 260px;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
text-align: left;
white-space: normal;
pointer-events: none;
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity .15s ease, transform .15s ease;
/* Muss über dem Lightbox-Overlay liegen (.wpcs-lightbox: z-index 9999999). */
z-index: 9999999999;
}
.wpcs-ai-tooltip[data-placement="bottom"] {
transform: translateY(-4px);
}
.wpcs-ai-tooltip.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}