/* AI Image Label – Frontend */

.aiil-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}
.aiil-wrap > img,
.aiil-wrap > picture > img { max-width: 100%; height: auto; }


/* ---- Badge-Container: Größe relativ zur Bildbreite ---- */
.aiil-ui {
	--aiil-gap: 6px;
	--aiil-bg: var(--aiil-dark-bg, rgba(17, 17, 17, .85));
	--aiil-fg: var(--aiil-dark-fg, #fff);
	--aiil-ring: rgba(255, 255, 255, .45);
	--aiil-ring: color-mix(in srgb, var(--aiil-fg) 45%, transparent);
	position: absolute;
	z-index: 3;
	width: clamp(var(--aiil-min, 36px), var(--aiil-pct, 14%), var(--aiil-max, 72px));
	aspect-ratio: 5 / 3;
	line-height: 1;
	font-size: 13px;
	text-align: left;
}
.aiil-ui[data-aiil-tone="light"] {
	--aiil-bg: var(--aiil-light-bg, rgba(255, 255, 255, .85));
	--aiil-fg: var(--aiil-light-fg, #111);
	--aiil-ring: rgba(0, 0, 0, .3);
	--aiil-ring: color-mix(in srgb, var(--aiil-fg) 30%, transparent);
}

[data-aiil-pos="tl"] > .aiil-ui { top: var(--aiil-gap); left: var(--aiil-gap); }
[data-aiil-pos="tr"] > .aiil-ui { top: var(--aiil-gap); right: var(--aiil-gap); }
[data-aiil-pos="bl"] > .aiil-ui { bottom: var(--aiil-gap); left: var(--aiil-gap); }
[data-aiil-pos="br"] > .aiil-ui,
.aiil-wrap:not([data-aiil-pos]) > .aiil-ui { bottom: var(--aiil-gap); right: var(--aiil-gap); }

.aiil-badge {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 12% 14%;
	border-radius: 999px;
	background: var(--aiil-bg);
	color: var(--aiil-fg);
	box-shadow: 0 0 0 1px var(--aiil-ring), 0 2px 6px rgba(0, 0, 0, .25);
	cursor: pointer;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
	outline: none;
}
[data-aiil-pos="tl"] .aiil-badge { transform-origin: top left; }
[data-aiil-pos="tr"] .aiil-badge { transform-origin: top right; }
[data-aiil-pos="bl"] .aiil-badge { transform-origin: bottom left; }
[data-aiil-pos="br"] .aiil-badge { transform-origin: bottom right; }

.aiil-ui:hover .aiil-badge,
.aiil-badge:focus-visible,
.aiil-ui.is-open .aiil-badge { transform: scale(1.14); }
.aiil-ui--static .aiil-badge { cursor: default; }
.aiil-badge:focus-visible { box-shadow: 0 0 0 2px var(--aiil-bg), 0 0 0 4px #2271b1; }

.aiil-svg, .aiil-icon-img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }

/* Funkelnde Sterne */
.aiil-star { transform-box: fill-box; transform-origin: center; }
.aiil-ui:hover .aiil-star.s1,
.aiil-badge:focus-visible .aiil-star.s1,
.aiil-ui.is-open .aiil-star.s1 { animation: aiil-twinkle 1.1s ease-in-out infinite; }
.aiil-ui:hover .aiil-star.s2,
.aiil-badge:focus-visible .aiil-star.s2,
.aiil-ui.is-open .aiil-star.s2 { animation: aiil-twinkle 1.1s ease-in-out .25s infinite; }
.aiil-ui:hover .aiil-star.s3,
.aiil-badge:focus-visible .aiil-star.s3,
.aiil-ui.is-open .aiil-star.s3 { animation: aiil-twinkle 1.1s ease-in-out .5s infinite; }

@keyframes aiil-twinkle {
	0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
	50%      { transform: scale(1.35) rotate(25deg); opacity: .75; }
}

/* ---- Tooltip ---- */
.aiil-tip {
	position: absolute;
	z-index: 4;
	box-sizing: border-box;
	width: max-content;
	max-width: min(240px, 70vw);
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--aiil-bg);
	color: var(--aiil-fg);
	box-shadow: 0 0 0 1px var(--aiil-ring), 0 4px 14px rgba(0, 0, 0, .3);
	font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(var(--aiil-tip-shift, 4px));
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
[data-aiil-pos="tl"] .aiil-tip { top: calc(100% + 8px); left: 0; --aiil-tip-shift: -4px; }
[data-aiil-pos="tr"] .aiil-tip { top: calc(100% + 8px); right: 0; --aiil-tip-shift: -4px; }
[data-aiil-pos="bl"] .aiil-tip { bottom: calc(100% + 8px); left: 0; }
[data-aiil-pos="br"] .aiil-tip,
.aiil-wrap:not([data-aiil-pos]) .aiil-tip { bottom: calc(100% + 8px); right: 0; }

.aiil-ui:not(.aiil-ui--click):not(.aiil-ui--float):hover .aiil-tip,
.aiil-ui:not(.aiil-ui--click):not(.aiil-ui--float):focus-within .aiil-tip,
.aiil-ui.is-open:not(.aiil-ui--float) .aiil-tip {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Sehr kleine Bilder: Tooltip nur per Klick/Fokus, nicht beim Überfahren der ganzen Fläche */
@media (prefers-reduced-motion: reduce) {
	.aiil-badge, .aiil-tip { transition: none; }
	.aiil-star { animation: none !important; }
}

/* Kein Druck-/Kontrast-Problem: im Hochkontrastmodus Rahmen erzwingen */
@media (forced-colors: active) {
	.aiil-badge, .aiil-tip { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
}

/* ---- Schwebender Tooltip (Galerie-Kacheln mit overflow:hidden): hängt beim Öffnen an <body> ---- */
.aiil-tip--float {
	--aiil-bg: var(--aiil-dark-bg, rgba(17, 17, 17, .85));
	--aiil-fg: var(--aiil-dark-fg, #fff);
	--aiil-ring: rgba(255, 255, 255, .45);
	--aiil-ring: color-mix(in srgb, var(--aiil-fg) 45%, transparent);
	position: fixed;
	z-index: 2147483000;
	transform: none;
}
.aiil-tip--float[data-aiil-tone="light"] {
	--aiil-bg: var(--aiil-light-bg, rgba(255, 255, 255, .85));
	--aiil-fg: var(--aiil-light-fg, #111);
	--aiil-ring: rgba(0, 0, 0, .3);
	--aiil-ring: color-mix(in srgb, var(--aiil-fg) 30%, transparent);
}
.aiil-tip--float.is-shown { opacity: 1; visibility: visible; }

/* Elementor-Lightbox: schwebendes Badge über dem Großbild */
.aiil-ui--lb { position: fixed; z-index: 99; }

/* Elementor-Galerie: Badge über dem Overlay der Kachel */
.e-gallery-item > .aiil-ui { z-index: 5; }

/* Vorschau im Medien-Modal */
.aiil-wrap--preview { display: block; width: fit-content; max-width: 100%; margin: 0 auto 16px; }
.aiil-wrap--preview > img { margin: 0 !important; }

/* ---- JS-Overlay: Position per Messung (--js), feste Ecke (--corner) ---- */
.aiil-ui--js, .aiil-ui--corner { position: absolute; z-index: 5; }
.aiil-ui--corner[data-aiil-pos="tl"] { top: var(--aiil-gap); left: var(--aiil-gap); }
.aiil-ui--corner[data-aiil-pos="tr"] { top: var(--aiil-gap); right: var(--aiil-gap); }
.aiil-ui--corner[data-aiil-pos="bl"] { bottom: var(--aiil-gap); left: var(--aiil-gap); }
.aiil-ui--corner[data-aiil-pos="br"] { bottom: var(--aiil-gap); right: var(--aiil-gap); }
.aiil-ui[data-aiil-pos="tl"] .aiil-badge { transform-origin: top left; }
.aiil-ui[data-aiil-pos="tr"] .aiil-badge { transform-origin: top right; }
.aiil-ui[data-aiil-pos="bl"] .aiil-badge { transform-origin: bottom left; }
.aiil-ui[data-aiil-pos="br"] .aiil-badge { transform-origin: bottom right; }