/**
 * Overlay fuer die sichtbare KI-Kennzeichnung.
 *
 * Das Aussehen der Kennzeichnung steht vollstaendig hier. assets/js/overlay.js liefert
 * nur Daten: welches Logo (background-image), dessen Seitenverhaeltnis und - ueber
 * --hphAiLabelRight / --hphAiLabelBottom - wie weit die sichtbare Bildecke vom Rand des
 * Containers entfernt liegt.
 *
 * Zwei bewusste Entscheidungen, damit das Overlay in beliebigen Theme-Containern haelt:
 *
 * 1. Es ist ein <span> mit Hintergrundbild, kein <img>. Themes stylen <img> in
 *    Bildcontainern fast immer sehr direkt (".image img { width: 100%; height: 100% }"),
 *    und solche Regeln sind spezifischer als eine einzelne Klasse.
 * 2. Die Geometrie ist mit !important abgesichert. Angepasst wird deshalb nicht ueber
 *    eigene height/width-Regeln, sondern ueber die Custom Properties - die gelten
 *    trotz !important:
 *
 *      .px-teaser-animated { --hphAiLabelHeight: 20px; --hphAiLabelInset: 14px; }
 */
.hph-ai-label-overlay {
	/* Groesse: feste Hoehe, Breite folgt dem Seitenverhaeltnis des Logos. */
	height: var(--hphAiLabelHeight, 25px) !important;
	width: calc(var(--hphAiLabelHeight, 25px) * var(--hphAiLabelRatio, 5)) !important;

	/* Abstand zur unteren rechten Ecke des sichtbaren Bildausschnitts. */
	position: absolute !important;
	right: calc(var(--hphAiLabelRight, 0px) + var(--hphAiLabelInset, 10px)) !important;
	bottom: calc(var(--hphAiLabelBottom, 0px) + var(--hphAiLabelInset, 10px)) !important;
	left: auto !important;
	top: auto !important;

	/* Sehr schmale Container: lieber kleiner skalieren als ueberstehen. */
	max-width: calc(100% - 2 * var(--hphAiLabelInset, 10px)) !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;

	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
	background-color: transparent;

	/* Ueber Farbverlaeufen und Textboxen, die Karten oft ueber das Bild legen. */
	z-index: var(--hphAiLabelZIndex, 4);

	display: block !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
	opacity: 1;
	/* Rein informativ: darf Klicks auf den darunterliegenden Link nicht abfangen. */
	pointer-events: none !important;
}

/* Wird nur gesetzt, wenn der Container des Bildes sonst nicht positioniert waere. */
.hph-ai-label-anchor {
	position: relative;
}

.hph-ai-label-overlay[hidden] {
	display: none !important;
}