/**
 * agenic Komponenten-CSS – Fact-Box (Molekül).
 *
 * Quelle: Figma Set `fact-box` (1601:16244, Seite 0.5 → 03 · Molecules),
 * frisch gemessen 19.08.2026: Kachel 280 × 244, Radius 24 (seit 19.08. an
 * `Values/radius/l` gebunden), Padding 22/24/24/24, Wert Display/L 80/93 Light,
 * Label Copy/L 24/32 Light, icon-badge Größe L (56, r12).
 *
 * Vier Flächen statt zwei (Kontrakt §5.1, Entscheidung Vincent 19.08.2026):
 *   grey         → Surface/medium        #a3acad  Text standard  (Figma Farbe4)
 *   light        → Surface/light         #dae5e6  Text standard  (Figma Farbe2)
 *   brand-subtle → Surface/brand-subtle  #9cb8b4  Text standard
 *   darkest      → Surface/darkest       #18181e  Text invers    (Figma Farbe3)
 * Kontrast gegen Text/standard bzw. Text/inverse gemessen 19.08.2026:
 * 7,5 : 1 · 13,3 : 1 · 8,1 : 1 · 17,1 : 1 — alle vier bestehen AA und AAA.
 *
 * Das Badge gehört dem Atom `ag-icon-badge` (icon-badge.css) und wird hier
 * NICHT mehr nachgebaut. Die frühere tmp-Näherung `rgba(248,250,250,.35)`
 * ist damit aufgelöst — sie hatte weder Fläche noch Glyphfarbe der Quelle.
 * Folge: Konsumenten müssen `ag-icon-badge` in get_style_depends() führen.
 */

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

.ag-fact-box {
    --ag-fact-box-bg: var(--color-surface-medium);        /* Figma Farbe4 */
    --ag-fact-box-fg: var(--color-text-standard);
    --ag-fact-box-hoehe: 244px;                           /* tmp — Quellmaß, keine Stufe der Figma-Leiter */
    --ag-fact-box-space-before: 0px;
    --ag-fact-box-space-after: 0px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: var(--ag-fact-box-hoehe);
    margin-block-start: var(--ag-fact-box-space-before);
    margin-block-end: var(--ag-fact-box-space-after);
    padding: var(--ag-fact-box-pad-oben, 22px) var(--spacing-ml) var(--ag-fact-box-pad-unten, var(--spacing-ml));    /* tmp — 22 ist keine Stufe der Figma-Leiter (Bestand seit 10.08.) */
    background: var(--ag-fact-box-bg);
    border-radius: var(--radius-l);                       /* Quelle: Values/radius/l */
    color: var(--ag-fact-box-fg);
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
}

/* ── Flächen ─────────────────────────────────────────────────────── */
.ag-fact-box--grey         { --ag-fact-box-bg: var(--color-surface-medium); }
.ag-fact-box--light        { --ag-fact-box-bg: var(--color-surface-light); }
.ag-fact-box--brand-subtle { --ag-fact-box-bg: var(--color-surface-brand-subtle); }
/* Farbwelten fusion · erp · crm (Entscheidung Vincent, 25.09.2026): Surface/light
   plus Tiefenlage wie ag_card (Paint Styles „Fusion | Karte/*-hell"). */
.ag-fact-box--fusion { --ag-fact-box-bg: var(--gradient-tiefe-diagonal-hell), var(--color-surface-light); }
.ag-fact-box--erp    { --ag-fact-box-bg: var(--gradient-tiefe-erp-hell), var(--color-surface-light); }
.ag-fact-box--crm    { --ag-fact-box-bg: var(--gradient-tiefe-crm-hell), var(--color-surface-light); }
.ag-fact-box--darkest {
    --ag-fact-box-bg: var(--color-surface-darkest);
    --ag-fact-box-fg: var(--color-text-inverse);          /* Quelle: Text/inverse */
}

.ag-fact-box__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-m);
}

.ag-fact-box__value {
    font-size: var(--fs-950, 80px);                       /* Display/L 80/93 Light */
    line-height: calc(93 / 80);
    font-weight: var(--fw-light);
}

/* Positionierung des Badges — Fläche, Größe und Glyphfarbe kommen aus
   icon-badge.css. Hier steht nur, dass es nicht schrumpfen darf. */
.ag-fact-box__badge { flex: 0 0 auto; }

.ag-fact-box__label {
    font-size: var(--fs-600);                             /* Copy/L 24/32 Light */
    line-height: calc(32 / 24);
    font-weight: var(--fw-light);
}

/* ── Einblendung ─────────────────────────────────────────────────── */
html.ag-anim-ready .ag-fact-box[data-ag-anim="reveal"] {
    transition: opacity var(--motion-reveal) var(--motion-ease-standard),
                transform var(--motion-reveal) var(--motion-ease-standard);
}
html.ag-anim-ready .ag-fact-box[data-ag-anim="reveal"]:not(.is-inview) {
    opacity: 0;
    transform: translateY(var(--motion-distance-reveal));
}
@media (prefers-reduced-motion: reduce) {
    html.ag-anim-ready .ag-fact-box[data-ag-anim="reveal"],
    html.ag-anim-ready .ag-fact-box[data-ag-anim="reveal"]:not(.is-inview) {
        transition: none; transform: none; opacity: 1;
    }
}