/* jno-ai-act-00-frontend: frontend.css */
.jnoaat-badge {
	/* Breite/Höhe/Position werden von frontend-badges.js pro Bild gesetzt
	   (Mindestgröße, Presets oder proportionale Skalierung). z-index gehört
	   NICHT hierher, sondern variantenspezifisch zu --native/--escaped (siehe
	   dort) - ein gemeinsamer sehr hoher Wert für beide liess native Badges
	   fälschlich vor einem sticky Header rendern statt normal mit dem Bild
	   dahinter zu verschwinden, sobald das Bild beim Scrollen unter den
	   Header wandert (live gemeldet, nachdem v0.9.2 deutlich mehr Bilder in
	   den nativen statt den Escape-Modus verschoben hat). */
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	overflow: visible;
	pointer-events: none;
}

/* Normalfall: Badge ist echtes Geschwisterelement des Bildes, positioniert sich
   rein per CSS mit und braucht kein JS-Tracking beim Scrollen. Niedriger
   z-index reicht (nur übers Bild selbst hinweg nötig) - so verschwindet die
   Badge zusammen mit dem Bild ganz normal hinter einem sticky Header, statt
   ihn zu überdecken. */
.jnoaat-badge--native {
	position: absolute;
	z-index: 1;
}

.jnoaat-relative-host {
	position: relative !important;
}

/* Ausnahmefall: Bild steckt in einem overflow:hidden/auto/scroll-Container, die
   Badge wird stattdessen an body angehängt und per rAF nachgeführt. Braucht
   den hohen z-index (bewusst UNTER der WP-Admin-Bar, #wpadminbar z-index:
   99999), weil sie als position:fixed-Element potenziell über beliebigem
   Seiteninhalt schwebt, nicht nur übers eigene Bild hinweg. */
.jnoaat-badge--escaped {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99000;
}

.jnoaat-badge__icon {
	/* !important bewusst: Theme-/Builder-CSS enthält häufig generische
	   img-Selektoren (responsive Reset wie "img{max-width:100%;height:auto}",
	   oder wie hier ein Hero-Widget mit eigenem Custom-CSS "...img{height:90vh}"
	   auf jedes <img> im Widget-Wrapper). Unser Badge-Icon ist zufällig
	   ebenfalls ein <img> im selben Wrapper und erbt solche Regeln sonst mit -
	   in freier Wildbahn bestätigt (Custom-CSS eines Elementor-Hero-Widgets
	   hat die Icon-Höhe auf 90vh gezogen). */
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: fill !important;
	object-position: 0 0 !important;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.jnoaat-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 1em;
	padding: 0.7em 1.1em;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.05);
	font-size: 1em;
}

.jnoaat-banner__icon {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
}

.jnoaat-banner--bottom {
	margin: 1em 0 0;
}