/**
 * WEBA KI-Bildkennzeichnung
 *
 * Die offiziellen EU-Icons liegen lokal unter assets/images/.
 */

.weba-ai-image-wrapper,
.weba-ai-image-host {
	position: relative;
}


/* Nur statische Background-Container benötigen einen neuen Positionierungskontext. */
.weba-ai-background-host--position-context {
	position: relative;
}

.weba-ai-image-wrapper {
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

.weba-ai-image-wrapper--block {
	display: block;
}

.weba-ai-image-wrapper > img,
.weba-ai-image-wrapper > picture,
.weba-ai-image-wrapper > a,
.weba-ai-image-wrapper > figure {
	max-width: 100%;
}

.weba-ai-image-wrapper > img {
	display: block;
}

.weba-ai-image-badge {
	position: absolute;
	z-index: var(--weba-ai-label-z-index, 20);
	box-sizing: border-box;
	margin: 0;
	pointer-events: none;
}

.weba-ai-image-badge--top-right {
	top: var(--weba-ai-label-offset, 7px);
	right: var(--weba-ai-label-offset, 7px);
}

.weba-ai-image-badge--top-left {
	top: var(--weba-ai-label-offset, 7px);
	left: var(--weba-ai-label-offset, 7px);
}

.weba-ai-image-badge--bottom-right {
	right: var(--weba-ai-label-offset, 7px);
	bottom: var(--weba-ai-label-offset, 7px);
}

.weba-ai-image-badge--bottom-left {
	bottom: var(--weba-ai-label-offset, 7px);
	left: var(--weba-ai-label-offset, 7px);
}

.weba-ai-image-badge img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

.weba-ai-image-badge--standard {
	display: flex;
	align-items: center;
	gap: 6px;
	width: auto;
	max-width: calc(100% - (2 * var(--weba-ai-label-offset, 7px)));
	padding: 4px 8px 4px 4px;
	border-radius: 999px;
	background: rgba(28, 26, 20, 0.86);
	color: #fff;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.2;
	text-align: left;
}

.weba-ai-image-badge--standard > img {
	flex: 0 0 auto;
	width: 24px !important;
	height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	object-fit: contain !important;
}

.weba-ai-image-badge__label {
	display: block;
}

.weba-ai-image-badge--standard.weba-ai-image-badge--has-context {
	align-items: flex-start;
	width: min(360px, calc(100% - (2 * var(--weba-ai-label-offset, 7px))));
	padding: 7px 10px 7px 7px;
	border-radius: 6px;
	font-weight: 500;
	line-height: 1.35;
}

.weba-ai-image-badge--standard.weba-ai-image-badge--has-context > img {
	margin-top: 1px;
}

.weba-ai-image-badge--standard.weba-ai-image-badge--size-small {
	font-size: 11px;
}

.weba-ai-image-badge--standard.weba-ai-image-badge--size-medium {
	font-size: 12px;
}

.weba-ai-image-badge--standard.weba-ai-image-badge--size-large {
	font-size: 13px;
}

.weba-ai-image-badge--standard.weba-ai-image-badge--size-medium > img {
	width: 28px !important;
	height: 28px !important;
	max-width: 28px !important;
	max-height: 28px !important;
}

.weba-ai-image-badge--standard.weba-ai-image-badge--size-large > img {
	width: 32px !important;
	height: 32px !important;
	max-width: 32px !important;
	max-height: 32px !important;
}

.weba-ai-image-badge--creative,
.weba-ai-image-badge--compact {
	pointer-events: auto;
}

.weba-ai-image-badge--creative.weba-ai-image-badge--size-small,
.weba-ai-image-badge--compact.weba-ai-image-badge--size-small {
	width: 36px;
}

.weba-ai-image-badge--creative.weba-ai-image-badge--size-medium,
.weba-ai-image-badge--compact.weba-ai-image-badge--size-medium {
	width: 42px;
}

.weba-ai-image-badge--creative.weba-ai-image-badge--size-large,
.weba-ai-image-badge--compact.weba-ai-image-badge--size-large {
	width: 48px;
}

.weba-ai-image-badge--creative summary,
.weba-ai-image-badge--compact summary {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
	cursor: help;
	list-style: none;
}

.weba-ai-image-badge--creative summary::after {
	position: absolute;
	top: calc(100% + 5px);
	right: 0;
	z-index: 1;
	width: max-content;
	max-width: min(320px, calc(100vw - 24px));
	padding: 6px 8px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.88);
	color: #fff;
	content: attr(data-ai-hover-label);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	opacity: 0;
	pointer-events: none;
	transform: translateY(-2px);
	transition: opacity 140ms ease, transform 140ms ease;
}

.weba-ai-image-badge--creative:not([open]) summary:focus-visible::after {
	opacity: 1;
	transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
	.weba-ai-image-badge--creative:not([open]) summary:hover::after {
		opacity: 1;
		transform: translateY(0);
	}
}

.weba-ai-image-badge--creative summary::-webkit-details-marker,
.weba-ai-image-badge--compact summary::-webkit-details-marker {
	display: none;
}

.weba-ai-image-badge--creative summary:focus-visible,
.weba-ai-image-badge--compact summary:focus-visible {
	border-radius: 999px;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.weba-ai-image-badge__details {
	position: absolute;
	top: calc(100% + 5px);
	right: 0;
	width: max-content;
	max-width: min(320px, calc(100vw - 24px));
	padding: 6px 8px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.88);
	color: #fff;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.weba-ai-image-badge--top-left .weba-ai-image-badge__details,
.weba-ai-image-badge--bottom-left .weba-ai-image-badge__details {
	right: auto;
	left: 0;
}

.weba-ai-image-badge--bottom-right .weba-ai-image-badge__details,
.weba-ai-image-badge--bottom-left .weba-ai-image-badge__details {
	top: auto;
	bottom: calc(100% + 5px);
}

.weba-ai-image-badge__screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.weba-ai-image-thumbnail-host {
	position: relative;
}

.weba-ai-image-thumbnail-host > .weba-ai-image-badge {
	--weba-ai-label-offset: 4px;

	width: 24px;
	pointer-events: none;
}

.pswp .weba-ai-image-badge--lightbox {
	z-index: 1600;
}

.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--top-right,
.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--top-left {
	top: 60px;
}

.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--top-right,
.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--bottom-right {
	right: 18px;
}

.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--top-left,
.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--bottom-left {
	left: 18px;
}

.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--bottom-right,
.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--bottom-left {
	bottom: 18px;
}


/*
 * CSS-Hintergrundbilder erhalten dasselbe Badge-Markup dynamisch per JavaScript.
 * Ein echtes Element verhindert Konflikte mit Woodmart-Pseudo-Elementen.
 */
.weba-ai-background-host > .weba-ai-image-badge--background {
	position: absolute;
}

@media (max-width: 575px) {
	.weba-ai-image-badge {
		--weba-ai-label-offset: 5px;
	}

	.weba-ai-image-badge--standard.weba-ai-image-badge--size-small {
		font-size: 10px;
	}

	.weba-ai-image-badge--standard.weba-ai-image-badge--has-context {
		width: min(300px, calc(100% - (2 * var(--weba-ai-label-offset, 5px))));
	}

	.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--top-right,
	.pswp .weba-ai-image-badge--lightbox.weba-ai-image-badge--top-left {
		top: 52px;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.weba-ai-image-badge--standard,
	.weba-ai-image-badge--creative summary::after,
	.weba-ai-image-badge__details {
		background: #000;
	}
}

@media (forced-colors: active) {
	.weba-ai-image-badge--standard,
	.weba-ai-image-badge--creative summary,
	.weba-ai-image-badge--compact summary {
		border: 1px solid ButtonText;
		border-radius: 999px;
	}

	.weba-ai-image-badge--standard {
		background: Canvas;
		color: CanvasText;
	}

	.weba-ai-image-badge--creative summary::after,
	.weba-ai-image-badge__details {
		border: 1px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}
}