/**
 * agenic Komponenten-CSS – Icon (Atom) — Figma `icon-badge`
 * (Set 1404:4795, Seite 0.5, Sektion `02 · Atoms`).
 *
 * Umstellung 17.09.2026 (Entscheidung Vincent, 17.09.2026): Es gibt nur noch
 * drei Icontypen — `gradient` (Fusion-Verlauf auf dem Zeichen) · `lightest` ·
 * `darkest`. Keine Hintergrundflaeche, kein Radius, keine Flaechenfarbe mehr.
 *
 * Die sechs alten Farbnamen (brand-subtle, brand-strong, fusion, dark--fusion,
 * light, dark) bleiben als Aliasse bestehen und zeigen auf einen der drei
 * Typen. Sie werden NICHT entfernt: Elementor legt den eingestellten Wert
 * unter dem Control-Namen ab, ein Wegfall wuerde bestehende Seiten still auf
 * den Default zurueckfallen lassen (agenic-skill, „Controls: additiv, nie
 * ersetzend").
 *
 * Die Klasse heisst weiterhin `ag-icon-badge` — auch der Name wird nicht
 * geaendert, weil Konsumenten-CSS daran haengt.
 */

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

.ag-icon-badge {
    --ag-icon-badge-glyph: 16px;                       /* Figma Groesse S */
    --ag-icon-badge-fg: var(--color-icon-border);      /* Figma Icon/border */

    /* Verlauf des Typs `gradient` (Entscheidung Vincent, 25.09.2026: „soll eher
       wie bei gradient button sein"). Bis 25.09. lag hier --gradient-fusion-basic
       an — der beginnt bei #18181e und faerbt auf einem 16-px-Zeichen die halbe
       Flaeche schwarz. Der Button Typ `gradient` hat keinen Schwarzanteil: seine
       Flaeche besteht aus den Fusion-Blobs ERP und CRM (button.css, Z. 141 ff.).
       Uebernommen wird deshalb deren Farbfuehrung als Linearverlauf, Tuerkis oben
       rechts nach Gruen unten links (225 Grad = Richtung unten-links).
       Nicht uebernommen: die drei Radialverlaeufe des Buttons und sein Scrim.
       Begruendung: auf Zeichengroessen von 16 bis 30 px verschmelzen die Blobs zu
       einer Flaeche, der Scrim dient allein der Textlesbarkeit auf dem Button.
       Beide Farben haengen an den L1-Tokens der Fusion-Palette — kein Hex hier. */
    --ag-icon-badge-verlauf:
        linear-gradient(225deg, var(--c-fusion-erp) 0%, var(--c-fusion-crm) 100%);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: var(--ag-icon-badge-glyph);
    block-size: var(--ag-icon-badge-glyph);
    color: var(--ag-icon-badge-fg);
    line-height: 1;
}

/* Elementor liefert das Zeichen als <i> (Iconschrift Font Awesome 7 Pro Light)
   oder als inline <svg>. Beide erben die Farbe ueber currentColor. */
.ag-icon-badge svg,
.ag-icon-badge i {
    inline-size: var(--ag-icon-badge-glyph);
    block-size: var(--ag-icon-badge-glyph);
    font-size: var(--ag-icon-badge-glyph);
    display: inline-block;
    fill: currentColor;
    color: inherit;
}

/* ── Groessen (Figma-Zeichenmasse; die Flaeche entfaellt) ──────────── */
.ag-icon-badge--s  { --ag-icon-badge-glyph: 16px; }
.ag-icon-badge--m  { --ag-icon-badge-glyph: 24px; }
.ag-icon-badge--l  { --ag-icon-badge-glyph: 24px; }
.ag-icon-badge--xl { --ag-icon-badge-glyph: 30px; }

/* ── Typ 2: lightest — helles Zeichen auf dunklem Grund ───────────── */
.ag-icon-badge--lightest { --ag-icon-badge-fg: var(--color-surface-lightest); }

/* ── Typ 3: darkest — dunkles Zeichen auf hellem Grund ────────────── */
.ag-icon-badge--darkest  { --ag-icon-badge-fg: var(--color-surface-darkest); }

/* ── Typ 1: gradient — Fusion-Verlauf auf dem Zeichen ──────────────
   Verlauf siehe --ag-icon-badge-verlauf oben.
   Zwei Wege, weil Elementor beide Markup-Formen liefern kann:
   · Iconschrift <i>: Verlauf als Hintergrund, per background-clip auf das
     Zeichen beschnitten.
   · inline <svg>: Verlauf ueber die SVG-Definition `ag-icon-fusion`, die
     ag_icon_verlauf_defs() einmal je Seite in den Footer schreibt. */
.ag-icon-badge--gradient {
    --ag-icon-badge-fg: transparent;
}

.ag-icon-badge--gradient i {
    background-image: var(--ag-icon-badge-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ag-icon-badge--gradient svg {
    fill: url(#ag-icon-fusion);
    stroke: url(#ag-icon-fusion);
}

/* ── Alte Farbnamen als Aliasse (veraltet, nicht entfernen) ────────── */
.ag-icon-badge--brand-subtle,
.ag-icon-badge--light        { --ag-icon-badge-fg: var(--color-surface-darkest); }

.ag-icon-badge--brand-strong,
.ag-icon-badge--dark         { --ag-icon-badge-fg: var(--color-surface-lightest); }

.ag-icon-badge--fusion,
.ag-icon-badge--dark--fusion { --ag-icon-badge-fg: transparent; }

.ag-icon-badge--fusion i,
.ag-icon-badge--dark--fusion i {
    background-image: var(--ag-icon-badge-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ag-icon-badge--fusion svg,
.ag-icon-badge--dark--fusion svg {
    fill: url(#ag-icon-fusion);
    stroke: url(#ag-icon-fusion);
}