/*
 * Fischer AI Image Badge — Badge-Darstellung.
 *
 * Reines HTML/CSS (kein Bild-Asset): der Text wird von fh-ai-badge.js aus den
 * data-fh-ai-badge-* Attributen gebaut, die das PHP auf dem jeweiligen
 * Element-Wrapper setzt. Keine Bilddatei zu pflegen, wenn sich Text oder
 * Farben später ändern.
 *
 * Unabhängige, frei kombinierbare Achsen, per Bild bzw. Elementor-Platzierung
 * wählbar:
 *   - Textfarbe:    --weiss / --schwarz
 *   - Stil:         --pill (Fläche dahinter) / --plain (nur Text)
 *   - Textlänge:    (kein CSS — steuert nur, ob fh-ai-badge.js "KI" oder
 *                    "KI-erstellt"/"KI-bearbeitet" in den Badge schreibt)
 *   - Textgröße:    --size-gross / --size-mittel / --size-klein
 *   - Text-Deckkraft: --opacity-100 / -90 / -70 / -50 (nur der Text, nicht
 *                    der Pillen-Hintergrund — daher als eigene, mit
 *                    --weiss/--schwarz kombinierte Regeln unten, nicht als
 *                    CSS opacity auf das ganze Element)
 *
 * Positionierung: der Host bleibt der reguläre Elementor-Wrapper (dessen
 * eigene Breite NIE verändert wird — siehe fh-ai-badge.js für die Historie,
 * warum das absichtlich so ist). Bei einem enthaltenen <img> berechnet das
 * JS die Position in Pixeln relativ zu diesem Host und setzt sie inline;
 * die Klassen .fh-ai-badge--tl/tr/bl/br unten greifen nur noch für den
 * Container-Hintergrund-Fall (kein <img> — der Host IST bereits die
 * Bildfläche, reines CSS genügt).
 */

[data-fh-ai-badge="1"],
[data-fh-ai-badge-items],
.fh-ai-badge-editor-host {
	position: relative;
}

.fh-ai-badge {
	position: absolute;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	pointer-events: none;
	white-space: nowrap;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.2px;
}

/* Textgröße. "gross" ist die ursprüngliche, unveränderte Größe. */
.fh-ai-badge--size-gross { font-size: 12px; }
.fh-ai-badge--size-mittel { font-size: 10px; }
.fh-ai-badge--size-klein { font-size: 9px; }

/* Stil "Mit Hintergrund": echte Pille — border-radius:999px, wie die
   übrigen Pill-Elemente der Website (Filter-Chips, CTA-Buttons). !important,
   weil generisches Theme-/Elementor-Standard-CSS auf dieser Baustelle
   wiederholt Vorrang vor unspezifischerem Plugin-CSS hatte.
   overflow:hidden ist hier kein Zufall: backdrop-filter respektiert den
   border-radius-Clip in Chrome/Safari nicht immer exakt — der Weichzeichner
   kann leicht über die runden Ecken hinausragen und dort einen minimal
   rechteckigen Schleier hinterlassen, was die Ecken optisch weniger rund
   wirken lässt, obwohl border-radius korrekt gesetzt ist. overflow:hidden
   erzwingt den harten Zuschnitt auf genau die Pillenform. */
.fh-ai-badge--pill {
	padding: 6px 12px !important;
	border-radius: 999px !important;
	overflow: hidden !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* Kurztext ("KI", 2 Zeichen): das feste Pillen-Padding oben wirkt hier
   unproportional breit im Vergleich zum langen Text ("KI-erstellt" usw.) —
   etwas knapperes horizontales Padding gleicht das aus. */
.fh-ai-badge--pill.fh-ai-badge--label-kurz {
	padding: 6px 9px !important;
}

.fh-ai-badge--pill.fh-ai-badge--weiss {
	background: rgba(26, 26, 26, 0.72) !important;
}

.fh-ai-badge--pill.fh-ai-badge--schwarz {
	background: rgba(255, 255, 255, 0.88) !important;
}

/* Stil "Nur Text": wirklich nur Text — kein Hintergrund, kein Schatten,
   keine sonstigen Effekte. */
.fh-ai-badge--plain {
	padding: 0 !important;
	background: none !important;
	text-shadow: none !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Textfarbe, 100 % Deckkraft (Standard). Die --opacity-* Regeln unten haben
   durch die doppelte Klasse höhere Spezifität und überschreiben das gezielt. */
.fh-ai-badge--weiss {
	color: #FFFFFF;
}

.fh-ai-badge--schwarz {
	color: #1A1A1A;
}

/* Text-Deckkraft — nur der Text selbst, nicht die Pillenfläche dahinter
   (deshalb rgba() auf color, nicht CSS opacity auf das ganze Element). */
.fh-ai-badge--opacity-90.fh-ai-badge--weiss { color: rgba(255, 255, 255, 0.9); }
.fh-ai-badge--opacity-70.fh-ai-badge--weiss { color: rgba(255, 255, 255, 0.7); }
.fh-ai-badge--opacity-50.fh-ai-badge--weiss { color: rgba(255, 255, 255, 0.5); }

.fh-ai-badge--opacity-90.fh-ai-badge--schwarz { color: rgba(26, 26, 26, 0.9); }
.fh-ai-badge--opacity-70.fh-ai-badge--schwarz { color: rgba(26, 26, 26, 0.7); }
.fh-ai-badge--opacity-50.fh-ai-badge--schwarz { color: rgba(26, 26, 26, 0.5); }

/* Nur für den Container-Hintergrund-Fall (kein <img>, reines CSS). */
.fh-ai-badge--tl { top: 10px; left: 10px; }
.fh-ai-badge--tr { top: 10px; right: 10px; }
.fh-ai-badge--bl { bottom: 10px; left: 10px; }
.fh-ai-badge--br { bottom: 10px; right: 10px; }

@media (max-width: 480px) {
	.fh-ai-badge--size-gross { font-size: 11px; }
	.fh-ai-badge--size-mittel { font-size: 9px; }
	.fh-ai-badge--size-klein { font-size: 7px; }
	.fh-ai-badge--pill {
		padding: 5px 10px !important;
	}
	.fh-ai-badge--tl,
	.fh-ai-badge--tr { top: 7px; }
	.fh-ai-badge--bl,
	.fh-ai-badge--br { bottom: 7px; }
	.fh-ai-badge--tl,
	.fh-ai-badge--bl { left: 7px; }
	.fh-ai-badge--tr,
	.fh-ai-badge--br { right: 7px; }
}