/**
 * agenic Komponenten-CSS – Tag (Atom) — vollständige Übertragung.
 *
 * Figma-Quelle: Set `tag` (673:97, Seite 0.5 → 02 · Atoms, 22 Varianten seit 25.09.2026;
 * 12 gemessen 07.09.2026 nach der Graduierung von `UI Konzepte (WIP)`):
 *   Farbe  = Neutral · Brand · Erfolg · Fehler · Info · Warnung → Modifier
 *            + Fusion · ERP · CRM · Brand-hell · Brand-dunkel (Farbwelten, 25.09.2026 — s. Ende der Datei)
 *   Status = Default | Aktiv → CSS-State `.is-aktiv` (nie ein Control)
 *   Zähler = Boolean-Eigenschaft → Slot `.ag-tag__value`
 *
 * Maße der Quelle: 76 × 24 (Neutral, „Kategorie"), Polster spacing/xs × spacing/ms,
 * Gap spacing/s, Radius radius/max, Kontur border/xs, Text Copy/XS (Inter Light 12/16, −2 %).
 *
 * Die Kontur sitzt in Figma **INSIDE**. Deshalb `box-shadow: inset` statt `border` —
 * ein border addiert 2 px zur Box, eine Innenkontur nicht (belegter Fehler bei
 * ag_process_step, 19.08.2026: 34 statt 32).
 *
 * Kit-Reset auf Doppelklasse: In der Filter-Rolle rendert das Partial ein
 * `<button>`. `.elementor-kit-7 button` (0,1,1) setzt background-image,
 * background-color, border-radius 999, font-family, font-size und color und
 * schlägt damit jede Einzelklasse (0,1,0) — belegter Fehler bei ag_tab_item,
 * 19.08.2026. Der gesamte Grundblock steht deshalb auf `.ag-tag.ag-tag`.
 *
 * Markup-Partial: includes/render-tag.php. Konsumenten: ag_tag, ag_partner_directory.
 * Kontrakt: Projekt-Doc `kontrakt-ag-partner-directory.md` v0.3 (G2). 0 tmp-Punkte.
 */

.ag-tag,
.ag-tag * {
	box-sizing: border-box;
}

.ag-tag.ag-tag {
	/* L3 mit L2-Defaults — Zustand „Default", Achse Neutral */
	--ag-tag-flaeche: var(--color-surface-light);        /* Figma Surface/light */
	--ag-tag-kontur: var(--color-border-soft);           /* Figma Border--subtle */
	--ag-tag-fg: var(--color-text-standard);             /* Figma Text/standard */
	--ag-tag-value-fg: var(--color-text-grey);           /* Figma Text/grey */
	--ag-tag-icon-fg: var(--color-icon-border);          /* Figma Icon/border */
	--ag-tag-radius: var(--radius-max);                  /* Figma Values/radius/max */
	--ag-tag-kontur-breite: var(--border-width-xs);      /* Figma Values/border/xs = 1 */
	--ag-tag-pad-y: var(--spacing-xs);                   /* Figma spacing/xs = 4 */
	--ag-tag-pad-x: var(--spacing-ms);                   /* Figma spacing/ms = 12 */
	--ag-tag-gap: var(--spacing-s);                      /* Figma itemSpacing spacing/s = 8 */

	display: inline-flex;
	align-items: center;
	gap: var(--ag-tag-gap);
	padding: var(--ag-tag-pad-y) var(--ag-tag-pad-x);
	border-radius: var(--ag-tag-radius);
	background-color: var(--ag-tag-flaeche);
	color: var(--ag-tag-fg);
	font-family: var(--font-sans);
	font-size: var(--fs-100);                            /* Figma Copy/XS 12 */
	line-height: calc(16 / 12);                          /* Figma Copy/XS 16 */
	/* Seit 25.09.2026 Medium statt Light (Entscheidung Vincent, Farbwelten-
	   Konzept): Der Tag ist bedienbar, die Pill nicht — Gewicht trennt beide.
	   Figma: Text Style Digital/General/Button/XS (Inter Medium 12/16). */
	font-weight: var(--fw-medium);
	letter-spacing: -0.02em;
	white-space: nowrap;

	/* Innenkontur — addiert nichts zur Box, anders als border */
	box-shadow: inset 0 0 0 var(--ag-tag-kontur-breite) var(--ag-tag-kontur);

	/* Kit-Reset — greift für <button> wie für <span> */
	border: 0;
	background-image: none;
	margin: 0;
	text-decoration: none;
	text-transform: none;
	appearance: none;
	-webkit-appearance: none;
}

/* Bedienbare Fassung (Filterknopf). Der Zustandswechsel ist ein Farbwechsel
   plus Häkchen — beides ohne Bewegung, deshalb reicht eine kurze Blende. */
.ag-tag.ag-tag[type="button"] {
	cursor: pointer;
	transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
}

@media (prefers-reduced-motion: reduce) {
	.ag-tag.ag-tag[type="button"] {
		transition: none;
	}
}

.ag-tag.ag-tag[type="button"]:hover {
	--ag-tag-kontur: var(--color-border);                /* Figma Border */
}

.ag-tag.ag-tag[type="button"]:focus-visible {
	outline: var(--border-width-s) solid var(--color-border);
	outline-offset: 2px;
}

/* ── Slots ──────────────────────────────────────────────────── */

.ag-tag.ag-tag .ag-tag__label {
	color: inherit;
}

.ag-tag.ag-tag .ag-tag__value {
	color: var(--ag-tag-value-fg);
	font-variant-numeric: tabular-nums;
}

/* Das Häkchen zeigt nur der Aktiv-Zustand. Die Breite des Knopfes wächst
   dadurch beim Umschalten um Icon + Gap — genau wie in der Quelle
   (Figma: Default 76, Aktiv 96 bei gleichem Label). */
.ag-tag.ag-tag .ag-tag__icon {
	display: none;
	align-items: center;
	color: var(--ag-tag-icon-fg);
}

.ag-tag.ag-tag.is-aktiv .ag-tag__icon {
	display: inline-flex;
}

.ag-tag.ag-tag .ag-tag__haken {
	display: block;
}

/* ── Achse Farbe (Zustand Default) ──────────────────────────── */

.ag-tag.ag-tag--neutral {
	--ag-tag-flaeche: var(--color-surface-light);        /* Figma Surface/light */
	--ag-tag-kontur: var(--color-border-soft);           /* Figma Border--subtle */
}

.ag-tag.ag-tag--brand {
	/* Seit 25.09.2026 Surface/brand-tint (Primary/100) statt brand-subtle —
	   mittlere Stufe der Brand-Leiter hell · brand · dunkel (Entscheidung
	   Vincent, Farbwelten-Konzept). Trifft Bestands-Tags mit Farbe=Brand. */
	--ag-tag-flaeche: var(--color-surface-brand-tint);   /* Figma Surface/brand-tint */
	--ag-tag-kontur: var(--color-surface-brand);         /* Figma Surface/brand */
}

.ag-tag.ag-tag--erfolg {
	--ag-tag-flaeche: var(--color-surface-lightest);     /* Figma Surface/lightest */
	--ag-tag-kontur: var(--color-feedback-success);      /* Figma Feedback/success */
}

.ag-tag.ag-tag--fehler {
	--ag-tag-flaeche: var(--color-surface-lightest);
	--ag-tag-kontur: var(--color-feedback-error);        /* Figma Feedback/error */
}

.ag-tag.ag-tag--info {
	--ag-tag-flaeche: var(--color-surface-lightest);
	--ag-tag-kontur: var(--color-feedback-info);         /* Figma Feedback/info */
}

.ag-tag.ag-tag--warnung {
	--ag-tag-flaeche: var(--color-surface-lightest);
	--ag-tag-kontur: var(--color-feedback-warning);      /* Figma Feedback/warning */
}

/* ── Achse Status = Aktiv ───────────────────────────────────────
   In der Quelle sehen alle sechs Aktiv-Varianten gleich aus: Fläche und
   Kontur auf Surface/brand-strong, Text und Häkchen invers. Die Achse Farbe
   hat im Aktiv-Zustand deshalb keine optische Wirkung — bewusst so
   entschieden (Vincent, 07.09.2026), weil es für die Feedback-Farben keine
   kräftige Flächenvariante im Token-Bestand gibt. Kontrast gemessen:
   8,52 : 1 (Text/inverse auf Surface/brand-strong), WCAG AAA.
   Der Modifier steht hinter den Farb-Modifiern und gewinnt damit bei
   gleicher Spezifität über die Reihenfolge. */

.ag-tag.ag-tag.is-aktiv {
	--ag-tag-flaeche: var(--color-surface-brand-strong); /* Figma Surface/brand-strong */
	--ag-tag-kontur: var(--color-surface-brand-strong);
	--ag-tag-fg: var(--color-text-inverse-soft);         /* Figma Text/inverse */
	--ag-tag-value-fg: var(--color-text-inverse-soft);
	--ag-tag-icon-fg: var(--color-icon-border-inverse);  /* Figma Icon/border-inverse */
}

.ag-tag.ag-tag.is-aktiv[type="button"]:hover {
	--ag-tag-kontur: var(--color-border-inverse);        /* Figma Border--inverse */
}

.ag-tag.ag-tag.is-aktiv[type="button"]:focus-visible {
	outline-color: var(--color-border-inverse);
}

/* ── Link-Tag (als = a, seit 6.15.0) ────────────────────────────
   Filterleiste der Blog-Familie: Kategorien als Links. Bedienung wie der
   Filterknopf (Hover-Kontur, Fokusring), aktiv = aktuelle Seite.
   Kit-Falle (agenic-figma-zu-widget): `.elementor-kit-7 a` (0,1,1) und
   `.elementor-kit-7 a:hover` (0,2,1) setzen Linkfarbe und Unterstrich —
   deshalb `a.ag-tag.ag-tag` (0,2,1) bzw. mit Zustand (0,3,1). */
a.ag-tag.ag-tag,
a.ag-tag.ag-tag:visited {
	color: var(--ag-tag-fg);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, box-shadow .18s ease, color .18s ease;
}

a.ag-tag.ag-tag:hover {
	--ag-tag-kontur: var(--color-border);                /* Figma Border — wie der Filterknopf */
	color: var(--ag-tag-fg);
	text-decoration: none;
}

a.ag-tag.ag-tag:focus-visible {
	outline: var(--border-width-s) solid var(--color-border);
	outline-offset: 2px;
}

a.ag-tag.ag-tag.is-aktiv:hover {
	--ag-tag-kontur: var(--color-border-inverse);        /* Figma Border--inverse */
}

a.ag-tag.ag-tag.is-aktiv:focus-visible {
	outline-color: var(--color-border-inverse);
}

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

/* ── Farbwelten (Entscheidung Vincent, 25.09.2026) ──────────────────────
   Figma `tag`: fünf weitere Werte der Achse Farbe (12 → 22 Varianten,
   25.09.2026). Projekt-Doc claude/farbwelten-cards-pills-tags-konzept-25-09.md.
   fusion · erp · crm: Verlaufsfläche (waagerecht, beide Farben sichtbar) und
   Verlaufskontur. Die Kontur ist hier ein 1-px-`border` mit Verlauf im
   border-box statt der Innenkontur — die Höhe bleibt gleich, weil das Polster
   um 1 px schrumpft. `--ag-tag-grund` ist der deckende Grund unter der
   Verlaufsfläche (Default lightest; auf light-Grund lightest bleibt richtig,
   weil sich der Tag dann abhebt). */
.ag-tag.ag-tag--fusion,
.ag-tag.ag-tag--erp,
.ag-tag.ag-tag--crm {
	--ag-tag-grund: var(--color-surface-lightest);       /* Figma Surface/lightest */
	--ag-tag-pad-y: calc(var(--spacing-xs) - 1px);
	--ag-tag-pad-x: calc(var(--spacing-ms) - 1px);
	border: 1px solid transparent;
	box-shadow: none;
	background:
		var(--ag-tag-flaeche-verlauf) padding-box,
		linear-gradient(var(--ag-tag-grund), var(--ag-tag-grund)) padding-box,
		var(--ag-tag-kontur-verlauf) border-box;
	transition: transform var(--motion-duration-xs) var(--motion-ease-standard), filter .18s ease;
}
.ag-tag.ag-tag--fusion { --ag-tag-flaeche-verlauf: var(--gradient-flaeche-fusion-hell); --ag-tag-kontur-verlauf: var(--gradient-fusion-basic); } /* Figma Fusion | Flaeche/fusion-hell · fusion-basic */
.ag-tag.ag-tag--erp    { --ag-tag-flaeche-verlauf: var(--gradient-flaeche-erp-hell);    --ag-tag-kontur-verlauf: var(--gradient-kontur-erp); }   /* Figma Fusion | Flaeche/erp-hell · Kontur/erp */
.ag-tag.ag-tag--crm    { --ag-tag-flaeche-verlauf: var(--gradient-flaeche-crm-hell);    --ag-tag-kontur-verlauf: var(--gradient-kontur-crm); }   /* Figma Fusion | Flaeche/crm-hell · Kontur/crm */

/* Bedienbar: Lift wie der Button (0.7, rein Transform), Fläche wird kräftiger */
.ag-tag.ag-tag--fusion[type="button"]:hover, a.ag-tag.ag-tag--fusion:hover,
.ag-tag.ag-tag--erp[type="button"]:hover,    a.ag-tag.ag-tag--erp:hover,
.ag-tag.ag-tag--crm[type="button"]:hover,    a.ag-tag.ag-tag--crm:hover {
	transform: translateY(-2px);
	filter: saturate(1.4);
}

/* Aktiv je Bereich: der Verlauf des Gradient-Buttons; ERP/CRM mit nur einem Blob */
.ag-tag.ag-tag--fusion.is-aktiv,
.ag-tag.ag-tag--erp.is-aktiv,
.ag-tag.ag-tag--crm.is-aktiv {
	--ag-tag-pad-y: var(--spacing-xs);
	--ag-tag-pad-x: var(--spacing-ms);
	border: 0;
	background: var(--ag-tag-aktiv-verlauf);
	--ag-tag-fg: var(--color-text-inverse-soft);          /* Figma Text/inverse */
	--ag-tag-value-fg: var(--color-text-inverse-soft);
	--ag-tag-icon-fg: var(--color-icon-border-inverse);
}
.ag-tag.ag-tag--fusion.is-aktiv { --ag-tag-aktiv-verlauf: var(--gradient-fusion-basic-reverse-30); } /* Figma fusion-basic--reverse-30 */
.ag-tag.ag-tag--erp.is-aktiv    { --ag-tag-aktiv-verlauf: var(--gradient-fusion-mesh-erp-only); }   /* Figma Fusion | Mesh/erp-only */
.ag-tag.ag-tag--crm.is-aktiv    { --ag-tag-aktiv-verlauf: var(--gradient-fusion-mesh-crm-only); }   /* Figma Fusion | Mesh/crm-only */
.ag-tag.ag-tag--fusion.is-aktiv[type="button"]:hover, a.ag-tag.ag-tag--fusion.is-aktiv:hover,
.ag-tag.ag-tag--erp.is-aktiv[type="button"]:hover,    a.ag-tag.ag-tag--erp.is-aktiv:hover,
.ag-tag.ag-tag--crm.is-aktiv[type="button"]:hover,    a.ag-tag.ag-tag--crm.is-aktiv:hover {
	box-shadow: inset 0 0 0 var(--ag-tag-kontur-breite) var(--color-border-inverse); /* Figma Border--inverse */
	filter: none;
}

/* Brand-Stufen hell und dunkel — flach, Innenkontur wie der Bestand */
.ag-tag.ag-tag--brand-hell {
	--ag-tag-flaeche: var(--color-surface-brand-hell);   /* Figma Surface/brand-hell */
	--ag-tag-kontur: var(--color-border-brand-hell);     /* Figma Border--brand-hell */
}
.ag-tag.ag-tag--brand-dunkel {
	--ag-tag-flaeche: var(--color-surface-brand-dunkel); /* Figma Surface/brand-dunkel */
	--ag-tag-kontur: var(--color-border-brand-dunkel);   /* Figma Border--brand-dunkel */
	--ag-tag-fg: var(--color-text-inverse-soft);          /* Figma Text/inverse */
	--ag-tag-value-fg: var(--color-text-grey-inverse);    /* Figma Text/grey--inverse */
	--ag-tag-icon-fg: var(--color-icon-border-inverse);
}
.ag-tag.ag-tag--brand-dunkel[type="button"]:hover, a.ag-tag.ag-tag--brand-dunkel:hover {
	--ag-tag-kontur: var(--color-border-inverse);
}
/* Aktiv bei brand-dunkel kehrt um — sonst sähe aktiv aus wie inaktiv.
   Kontrast Text/standard auf morph light/900: 7,06 : 1. */
.ag-tag.ag-tag--brand-dunkel.is-aktiv {
	--ag-tag-flaeche: var(--color-border-brand-hell);    /* Figma Border--brand-hell (morph light/900) */
	--ag-tag-kontur: var(--color-border-brand-hell);
	--ag-tag-fg: var(--color-text-standard);
	--ag-tag-value-fg: var(--color-text-grey);
	--ag-tag-icon-fg: var(--color-icon-border);
}
.ag-tag.ag-tag--brand-dunkel.is-aktiv[type="button"]:hover, a.ag-tag.ag-tag--brand-dunkel.is-aktiv:hover {
	--ag-tag-kontur: var(--color-border);
}