/* EII - KI-Kennzeichnung: Frontend-Styles */

.eiial-wrap {
	position: relative;
	/* WICHTIG: display:block + width:100% statt inline-block. Als inline-block
	   sizt sich das Element an seinem Inhalt aus (shrink-to-fit) und ignoriert den
	   "stretch"-Standard von CSS Grid/Flexbox-Zellen (z.B. Avia "Rasterzeile"/Grid Row) -
	   das erzeugte dort sichtbar eine zweite, leere Spalte. Als Block-Element streckt es
	   sich korrekt über die volle Zell-/Spaltenbreite.

	   Zusätzlich defensiv abgesichert (!important), falls die Avia-Rasterzeile intern mit
	   Flexbox, CSS-Grid oder einer JS-Masonry-Bibliothek (Isotope) arbeitet und eigene
	   Breiten-/Float-Regeln mit höherer Spezifität oder späterem Ladezeitpunkt setzt: */
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	clear: both !important;
	flex: 1 1 100% !important;
	-ms-flex: 1 1 100% !important;
	grid-column: 1 / -1 !important;
}
.eiial-wrap > img,
.eiial-wrap > video,
.eiial-wrap > iframe,
.eiial-wrap > .eiial-media-inner {
	display: block;
	max-width: 100%;
	width: 100%;
	height: auto;
}

/* Badge Grundgerüst - nur Icon + Text, kein Hintergrund/keine Pille */
.eiial-badge {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	pointer-events: none;
	line-height: 1.1;
	font-family: inherit;
	font-weight: 600;
	box-sizing: border-box;
	/* Harte Obergrenze gegen das umgebende Bezugselement (Spalte/Sektion/Bild): ohne das
	   wuerde ein sehr langer eigener Text die Box beliebig breit werden lassen und ueber den
	   Rand hinauslaufen - 32px = die beiden 16px-Randabstaende aus den .eiial-pos-* Klassen
	   unten, damit die Box nie bis an die Kante selbst heranreicht. flex-wrap:nowrap (Standard
	   bei inline-flex) haelt Icon und Text dabei weiterhin auf EINER Zeile nebeneinander - nur
	   der Text DARIN darf bei Platzmangel umbrechen, siehe .eiial-label-text. */
	max-width: calc(100% - 32px);
	/* Werden inline vom PHP-Renderer pro Element gesetzt (Icon-/Schriftgröße getrennt
	   einstellbar), hier nur Fallbacks falls das Inline-Style aus irgendeinem Grund fehlt. */
	font-size: var(--eiial-font-size, 15px);
}

/* Icon - Inline-SVG, bereits fertig eingefärbt (Außenform frei wählbar inkl. Alpha-Kanal,
   Innentext automatisch kontrastierend) über EIIAL_Settings::icon_svg_markup().

   WICHTIG: nur die Höhe wird über die Einstellung gesteuert, die Breite ist bewusst "auto".
   Die drei Icon-Varianten sind NICHT quadratisch - "Basis" hat ein 1:1-Seitenverhaeltnis
   (viewBox 566.93 x 566.93), "vollstaendig KI-generiert" und "teilweise KI-modifiziert" sind
   breite Badge-Formen mit eingebettetem Text (viewBox ca. 1790 x 567 bzw. 1701 x 567, also
   ca. 3:1). Wuerden width UND height beide auf denselben Wert gesetzt (wie bis Version 1.0.16),
   wuerden die beiden breiten Varianten zu einem Quadrat gestaucht. Da das <svg> selbst kein
   eigenes width-/height-Attribut traegt (nur viewBox), skaliert der Browser bei
   "height" + "width:auto" automatisch im echten, unverzerrten Seitenverhaeltnis. */
.eiial-badge .eiial-icon {
	display: block !important;
	flex: 0 0 auto !important;
	/* !important: defensiv gegen Theme-/Enfold-eigene globale Regeln fuer <svg> (z.B. eine
	   generische "img, svg { width:100%; height:auto; }"-Regel), die sonst je nach
	   Ladereihenfolge/Spezifitaet unsere Groesse ueberschreiben und zwischen den
	   Icon-Varianten wieder zu unterschiedlichen Hoehen fuehren koennten. */
	height: var(--eiial-icon-size, 28px) !important;
	width: auto !important;
	max-width: none !important;
	max-height: none !important;
	overflow: visible;
}

/* Textfarbe kommt per Inline-Style (color: ...) vom Renderer; hier nur ein Fallback,
   falls keine Farbe gesetzt wurde. Ausserdem bewusst der einzige Ort, an dem Zeilenumbruch
   erlaubt wird: ohne "white-space:normal" wuerde ein langer eigener Text (z.B. "preset"-
   oder "custom"-Modus) NIE umbrechen und stattdessen die ganze Badge-Box (siehe max-width
   oben) ueber ihre Grenze hinaus aufblasen, da ein nicht umbrechbarer Text keine
   Umbruchstelle fuer die "shrink-to-fit"-Breitenberechnung des Browsers liefert.
   "overflow-wrap: break-word" zusaetzlich defensiv fuer den Fall eines einzelnen, sehr
   langen Wortes ohne Leerzeichen (z.B. eine URL als eigener Text). */
.eiial-label-text {
	color: inherit;
	white-space: normal;
	overflow-wrap: break-word;
}

/* Positionen. Fester Pixel-Abstand (16px) statt em-Einheit: der Abstand zum Rand soll
   gleichmaessig bleiben, unabhaengig von der (frei einstellbaren) Schriftgroesse des Badges -
   mit "em" waere der Randabstand bei grosser Schrift unnoetig gross und bei kleiner Schrift
   zu knapp. 16px ist ein in UI-Badges/Overlays gaengiger, ausgewogener Wert. */
.eiial-pos-top-left     { top: 16px; left: 16px; }
.eiial-pos-top-right    { top: 16px; right: 16px; }
.eiial-pos-bottom-left  { bottom: 16px; left: 16px; }
.eiial-pos-bottom-right { bottom: 16px; right: 16px; }
.eiial-pos-top-center {
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
}
.eiial-pos-bottom-center {
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
}
.eiial-pos-center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Video: Badge bleibt unabhängig vom Player-Status sichtbar (kein pointer-events, damit
   Play-Button/Steuerung weiter klickbar bleiben) */
.eiial-wrap > iframe + .eiial-badge,
.eiial-wrap > video + .eiial-badge {
	pointer-events: none;
}

/* Overlay-Modus: Ziel-Element muss position:relative besitzen; wird nötigenfalls per JS gesetzt. */
.eiial-overlay-anchor {
	display: none;
}