/**
 * AI Image Labels – Frontend
 */

.hw-ai-label-wrap {
	position: relative;
	display: flow-root;
	width: 100%;
	height: fit-content;
	max-height: fit-content;
	align-self: flex-start;
	line-height: 0;
	vertical-align: middle;
}

[data-hw-ai-label-host="1"] {
	position: relative;
}

.hw-ai-label-wrap > img:not(.hw-ai-label-img) {
	display: block;
}

.hw-ai-label {
	position: absolute;
	z-index: 20;
	display: block;
	/* Immer gleiche Größe: Basis-Variable, darauf bezogen 4em */
	font-size: var(--hw-fs-base);
	width: 4em;
	max-width: 4em;
	flex: 0 0 auto;
	aspect-ratio: 1 / 1;
	line-height: 0;
	pointer-events: none;
	opacity: 1;
}

/* Bootstrap .row > * setzt width:100% – Label darf das nicht erben */
.row > .hw-ai-label,
[class*="col"] > .hw-ai-label {
	width: 4em !important;
	max-width: 4em !important;
	flex: 0 0 auto;
	font-size: var(--hw-fs-base);
}

.hw-ai-label.hw-ai-label-pos-bottom-right {
	right: 1em;
	bottom: 0;
	left: auto;
	top: auto;
}

.hw-ai-label.hw-ai-label-pos-bottom-left {
	left: 1em;
	bottom: 0;
	right: auto;
	top: auto;
}

.hw-ai-label.hw-ai-label-pos-top-left {
	left: 1em;
	top: 0.5em;
	right: auto;
	bottom: auto;
}

.hw-ai-label.hw-ai-label-pos-top-right {
	right: 1em;
	top: 0.5em;
	left: auto;
	bottom: auto;
}

/* Gegen Seiten-Regeln wie .hw-partial-02 .hw-col-img img { width:57%; position:absolute; … } */
img.hw-ai-label-img {
	display: block !important;
	position: static !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: contain !important;
	background: transparent !important;
	z-index: auto !important;
	aspect-ratio: auto !important;
	transform: none !important;
}

/* Admin-Vorschau in der Mediathek */
.hw-ai-label-admin .hw-ai-label-preview img {
	display: block;
	max-width: 140px;
	height: auto;
	background: #f0f0f1;
	padding: 6px;
	border-radius: 2px;
}

.hw-ai-label-pin-layer {
	box-sizing: border-box;
}

.hw-ai-label-pin-layer-active {
	outline: 1px dashed rgba(10, 33, 113, 0.35);
	outline-offset: -1px;
}

.hw-ai-label-pin-marker {
	position: absolute;
	width: 22px;
	height: 33px;
	margin: 0;
	/*
	 * Mitte des Pin-Icons = gespeicherter Punkt = Label-Mitte im Frontend.
	 * (Spitze etwas darunter – so bleibt Admin und Frontend 1:1 am Bildpunkt.)
	 */
	transform: translate(-50%, -50%);
	pointer-events: none;
	line-height: 0;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.hw-ai-label-pin-marker .hw-ai-label-pin-icon {
	display: block;
	width: 100%;
	height: 100%;
}

.hw-ai-label.hw-ai-label-pos-pin {
	right: auto !important;
	bottom: auto !important;
}