/**
 * AI Image Disclosure
 * Badge zur Kennzeichnung KI-generierter Bilder.
 */

.aiid-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.aiid {
	position: absolute;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 5px 9px 5px 6px;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-size: var(--aiid-size, 13px);
	font-weight: 500;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0.005em;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	-webkit-tap-highlight-color: transparent;

	/* Standardmäßig durchlässig: Das Badge sitzt in der Bildecke und darf
	   weder den Produktlink noch die Lightbox blockieren. Nur wenn der
	   Tooltip aktiv ist, nimmt es Klicks entgegen. */
	pointer-events: none;
}

.aiid--tippbar {
	pointer-events: auto;
	cursor: help;
}

/* Farbvarianten.
   Der Kreis nimmt currentColor, die Buchstaben --aiid-ink.
   Die beiden dürfen nie gleich sein, sonst ist das Icon eine leere Scheibe. */
.aiid--dark {
	background: rgba(0, 0, 0, 0.62);
	color: #fff;
	--aiid-ink: #111;
}

.aiid--light {
	background: rgba(255, 255, 255, 0.85);
	color: #000;
	--aiid-ink: #fff;
}

.aiid--tl { top: 10px; left: 10px; }
.aiid--tr { top: 10px; right: 10px; }
.aiid--bl { bottom: 10px; left: 10px; }
.aiid--br { bottom: 10px; right: 10px; }

.aiid__icon {
	display: block;
	flex: none;
	width: calc(var(--aiid-size, 13px) * 1.55);
	height: calc(var(--aiid-size, 13px) * 1.55);
}

.aiid__text {
	display: inline;
}

/* Nur-Icon-Variante: Der Text bleibt für Screenreader erhalten. */
.aiid--iconly {
	padding: 5px;
}

.aiid--iconly .aiid__text,
.aiid__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Erkennbar künstlerische Werke: Die Offenlegung darf die Darstellung des
   Werks nicht beeinträchtigen, deshalb kleiner und zurückhaltender. */
.aiid--dezent {
	opacity: 0.75;
	transform: scale(0.85);
	transform-origin: var(--aiid-origin, top right);
}

.aiid--dezent:hover,
.aiid--dezent:focus-within,
.aiid--dezent.is-offen {
	opacity: 1;
}

.aiid--dezent.aiid--tl { --aiid-origin: top left; }
.aiid--dezent.aiid--tr { --aiid-origin: top right; }
.aiid--dezent.aiid--bl { --aiid-origin: bottom left; }
.aiid--dezent.aiid--br { --aiid-origin: bottom right; }

/* Ohne sichtbaren Tooltip darf der Punkt nicht stehen bleiben – er würde
   eine zweite Ebene ankündigen, die es dort nicht gibt. */
.aiid--ohne-tip .aiid__more,
.aiid--ohne-tip .aiid__tip {
	display: none;
}

/* Der Punkt zeigt an, dass es eine zweite Informationsebene gibt.
   Das verlangen die EU-Vorgaben, wenn man mit Tooltip arbeitet. */
.aiid__more {
	flex: none;
	width: 4px;
	height: 4px;
	margin-left: 1px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.55;
}

.aiid--iconly .aiid__more {
	position: absolute;
	top: 2px;
	right: 2px;
	margin: 0;
}

/* ---------- Tooltip ---------- */

.aiid__tip {
	position: absolute;
	z-index: 21;
	width: max-content;

	/* --aiid-tipmax setzt das Skript auf die Breite des Bildes, an dem das
	   Badge hängt. Ohne das ragt der Kasten aus schmalen Vorschaubildern
	   heraus und wird vom umgebenden overflow abgeschnitten. */
	max-width: min( 230px, var( --aiid-tipmax, 230px ), 70vw );
	padding: 9px 11px;
	border-radius: 8px;
	background: rgba(12, 12, 12, 0.94);
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
	white-space: normal;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-3px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	pointer-events: none;
}

/* Der Tooltip klappt immer ins Bild hinein, damit ihn ein Container mit
   overflow:hidden nicht abschneidet. */
.aiid--tl .aiid__tip,
.aiid--bl .aiid__tip { left: 0; }

.aiid--tr .aiid__tip,
.aiid--br .aiid__tip { right: 0; }

.aiid--tl .aiid__tip,
.aiid--tr .aiid__tip { top: calc(100% + 6px); }

.aiid--bl .aiid__tip,
.aiid--br .aiid__tip { bottom: calc(100% + 6px); }

.aiid--tippbar:hover .aiid__tip,
.aiid--tippbar:focus-within .aiid__tip,
.aiid.is-offen .aiid__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Auf Geräten ohne echten Hover soll der Tooltip nur per Tipp aufgehen. */
@media (hover: none) {
	.aiid--tippbar:hover .aiid__tip {
		opacity: 0;
		visibility: hidden;
	}

	.aiid.is-offen .aiid__tip {
		opacity: 1;
		visibility: visible;
	}
}

/* ---------- Hinweiszeile unter der Produktgalerie ---------- */

.aiid-note {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 10px 0 0;
	font-size: 0.8em;
	line-height: 1.4;
	opacity: 0.75;
	--aiid-ink: #fff;
}

/* Kreis in Textfarbe, Buchstaben ausgespart. Auf dunklem Seitenhintergrund
   mit hellem Text muss --aiid-ink im Theme auf die Hintergrundfarbe
   gesetzt werden, sonst verschwinden die Buchstaben. */
.aiid-note .aiid__icon {
	width: 1.35em;
	height: 1.35em;
	color: currentColor;
}

/* Im Fluss statt in der Bildecke – für den Shortcode. */
.aiid--inline {
	position: static;
	display: inline-flex;
	pointer-events: auto;
}

.aiid--inline .aiid__tip {
	top: calc(100% + 6px);
	bottom: auto;
	left: 0;
	right: auto;
}

@media (prefers-reduced-motion: reduce) {
	.aiid__tip {
		transition: none;
	}
}

@media print {
	.aiid {
		background: none;
		color: #000;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		--aiid-ink: #fff;
	}

	.aiid__tip {
		display: none;
	}
}