/*
 * KI-Kennzeichnung von Bildern (TSK-15194, EU AI Act Art. 50).
 *
 * Gestaltung „Glas dunkel“, identisch zum Shop (LMThemeChild _asew-ki-mark.scss):
 * rechteckig, 20px hoch, dunkles Glas, weiße Schrift, unten rechts im Bild.
 * Der Abstand kommt aus --asew-ki-x/-y (Standard 14px, Designentscheidung vom
 * 2026-08-27); in Listing-Kacheln spiegelt er den Innenabstand der Kachel.
 *
 * Zwei Formen, gleiche Optik, beide ohne Textinhalt im HTML (nichts davon landet
 * im Klartext von Suchindex oder Feeds):
 *  - .asew-ki-mark: eigenes Element neben einem <img>; Screenreader lesen das
 *    aria-label („KI-generiertes Bild“).
 *  - ::after an Elementen ohne <img> (Container-Hintergrund, Slides, Video-Overlay).
 * Das sichtbare „KI“ kommt in beiden Fällen per CSS mit leerem Alternativtext
 * (zweite content-Deklaration; Browser ohne diese Syntax behalten die erste).
 */

.asew-ki-mark,
.asew-ki-host--bg::after,
.asew-ki-host--slide::after,
.asew-ki-host--video .elementor-custom-embed-image-overlay::after {
	position: absolute;
	right: var(--asew-ki-x, 14px);
	bottom: var(--asew-ki-y, 14px);
	z-index: 12;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 20px;
	margin: 0;
	padding: 0 7px;
	background: rgba(13, 17, 18, 0.62);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	color: #fff;
	font: 700 11px/1 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
	letter-spacing: 0.09em;
	text-transform: none;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.asew-ki-mark,
	.asew-ki-host--bg::after,
	.asew-ki-host--slide::after,
	.asew-ki-host--video .elementor-custom-embed-image-overlay::after {
		background: rgba(13, 17, 18, 0.78);
	}
}

.asew-ki-mark::before,
.asew-ki-host--bg::after,
.asew-ki-host--slide::after,
.asew-ki-host--video .elementor-custom-embed-image-overlay::after {
	content: "KI";
	content: "KI" / "";
}

/* News- und Veranstaltungskacheln (JetEngine-Listing): Der Datums-Chip sitzt im
   Innenabstand der Kachel, das Kästchen spiegelt ihn auf der rechten Seite. */
.jet-listing-grid__item .asew-ki-host--bg {
	--asew-ki-x: max(14px, var(--padding-right, 0px));
	--asew-ki-y: max(14px, var(--padding-bottom, 0px));
}

/* Anker um ein gekennzeichnetes <img>: so breit wie das Bild, damit das Kästchen
   an der Bildecke sitzt. Größenvorgaben von Elementor überträgt ein Inline-
   <style> je Widget auf den Anker (ImageWidgetSizing). Die vertikale Ausrichtung
   entspricht der des Bildes: im Fließtext die Grundlinie, im Elementor-Bild-
   Widget middle (widget-image.css). */
.asew-ki-mark-anchor {
	position: relative;
	display: inline-block;
	max-width: 100%;
	vertical-align: baseline;
}

.asew-ki-mark-anchor--elementor {
	vertical-align: middle;
}

/* Attributselektor für die nötige Spezifität gegenüber
   `.elementor-widget-image img { display: inline-block }`. */
.asew-ki-mark-anchor > img[data-asew-ki] {
	display: block;
}

/* Ausrichtungsklassen wandern vom Bild an den Anker; zentriert bleibt er so breit
   wie das Bild. */
.asew-ki-mark-anchor.aligncenter {
	display: block;
	width: fit-content;
	margin-right: auto;
	margin-left: auto;
}

/* In Bildunterschriften des Beitragsinhalts steht das Bild als Block (Theme); als
   inline-block bekäme der Anker eine Zeilenbox mit Unterlänge und schöbe die
   Unterschrift ab. Elementors Bild-Widget nutzt ebenfalls figure.wp-caption, dort
   bleibt das Bild inline-block und per text-align ausgerichtet. */
.wp-caption > .asew-ki-mark-anchor:not(.asew-ki-mark-anchor--elementor) {
	display: block;
	width: fit-content;
}

/* Bild-Widget mit prozentualer Höhe: Das Bild füllt die Widget-Box, das
   Kästchen sitzt in ihr. */
.elementor-widget-container:has(> .asew-ki-mark) {
	position: relative;
}