/**
 * agenic Komponenten-CSS – Float-Fact-Card (Molekül, vorläufig — F-MF-1).
 *
 * Quelle: Figma Set `float-fact-card` (3561:65892, Seite 0.5, QS · Faktdarstellungen),
 * frisch gemessen 25.08.2026. Karte: Surface/lightest, Radius Values/radius/l 24,
 * Padding spacing/l 32, Gap spacing/s 8, Effect Style `frost` (Background-Blur 8,
 * Values/effects/backdrop-blur). Breiten: M 264 · L 344 (Quelle; skala-L 264 —
 * Ausnahme der Quelle, hier nicht gesondert abgebildet).
 * Stat: Label Copy/S 14/19 Text/grey · Wert Display/S 38/44 Light Text/standard ·
 * Delta: Punkt Ø10 Feedback/success + Copy/XS 12/16 Text/grey.
 * Charts: Säulen 30 breit, Gap spacing/ms 12, Radius Values/radius/xs 8,
 * Surface/brand-subtle, Akzent Surface/brand; Linie Stroke Surface/brand 2,
 * Endpunkt Ø8; Fortschritt/Segmente 12 hoch (Balkenradius abgeleitet
 * Values/radius/max — in der Quelle nicht einzeln messbar, Pillenoptik laut
 * Screenshot); Punkte Ø12 (Raster 10×5) bzw. Ø16 (Skala 5); Radiale 128,
 * Start −90°, Wert Surface/brand, Spur/Rest Surface/light bzw. brand-subtle.
 *
 * Kontrakt: KONTRAKT-ag-media-fact-25-08.md §1. Nur abgeleitete Trendfarben
 * neutral/negativ (Quelle belegt ausschließlich Feedback/success — angemerkt).
 */

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

.ag-float-fact-card {
    /* L3 → L2 (Drei-Schichten-Regel) */
    --ag-ffc-bg: var(--color-surface-lightest);
    --ag-ffc-fg: var(--color-text-standard);
    --ag-ffc-nebentext: var(--color-text-grey);
    --ag-ffc-akzent: var(--color-surface-brand);
    --ag-ffc-flaeche-2: var(--color-surface-brand-subtle);
    --ag-ffc-flaeche-3: var(--color-surface-light);
    --ag-ffc-radius: var(--radius-l);              /* Quelle: Values/radius/l 24 */
    --ag-ffc-pad: var(--spacing-l);                /* Quelle: 32 */
    --ag-ffc-gap: var(--spacing-s);                /* Quelle: 8 */
    --ag-ffc-breite: 270px;                        /* Größe M — Quellmaß 3561:65892, nachgemessen 24.09.2026 (bis 8.8.0 stand hier 264, Abweichung 1 im Projekt-Doc hero-facts-text-flywheel-varianten-07-09) */

    display: flex;
    flex-direction: column;
    gap: var(--ag-ffc-gap);
    width: var(--ag-ffc-breite);
    max-width: 100%;
    /* Abstände-Sektion des Widgets (ag_spacing_section): die vier Variablen
       schreibt Elementor per Selector auf diesen Block. Fix 25.08.2026 —
       sie wurden hier anfangs nicht gelesen, die Controls liefen ins Leere. */
    margin-block-start: var(--ag-float-fact-card-space-before, 0px);
    margin-block-end: var(--ag-float-fact-card-space-after, 0px);
    padding: var(--ag-float-fact-card-pad-oben, var(--ag-ffc-pad)) var(--ag-ffc-pad) var(--ag-float-fact-card-pad-unten, var(--ag-ffc-pad));
    background: var(--ag-ffc-bg);
    border-radius: var(--ag-ffc-radius);
    -webkit-backdrop-filter: blur(var(--effect-backdrop-blur)); /* Quelle: Effect Style frost */
    backdrop-filter: blur(var(--effect-backdrop-blur));
    color: var(--ag-ffc-fg);
    font-family: var(--font-sans);
}

.ag-float-fact-card--l { --ag-ffc-breite: 344px; } /* Größe L (Quellmaß) */
/* S: seit 24.09.2026 in der Quelle (Entscheidung Vincent, Option A für die
   3-Karten-Variante der media-fact-kombination): 200 breit, Innenabstand 24
   statt 32 (spacing/ml), damit 136 statt 152 Inhaltsbreite nicht zu eng wird.
   XL: weiter TMP, kein Figma-Beleg (Entscheidung Vincent 09.09.2026). */
.ag-float-fact-card--s  { --ag-ffc-breite: 200px; --ag-ffc-pad: var(--spacing-ml); }
.ag-float-fact-card--xl { --ag-ffc-breite: 420px; } /* TMP */

/* ── Stat-Block ─────────────────────────────────────────────────── */
.ag-float-fact-card__stat {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);                         /* Quelle: 8 */
    min-width: 0;
}
.ag-float-fact-card__label {
    font-size: var(--fs-200);                      /* Figma Copy/S */
    line-height: calc(19 / 14);
    color: var(--ag-ffc-nebentext);
}
.ag-float-fact-card__wert {
    font-size: var(--fs-750);                      /* Figma Display/S 38/44 — Stufe „m" (Standard) */
    line-height: calc(44 / 38);
    font-weight: var(--fw-light);
    letter-spacing: -0.02em;
    color: var(--ag-ffc-fg);
}
/* Schriftgröße-Control „wert_stufe" (Auftrag Vincent, 09.09.2026) — dieselben
   L2-Token wie die Titel-Stufen Display/XS·S·M (assets/css/titel-stufen.css,
   Handle ag-titel-stufen als Style-Abhängigkeit registriert). Kein neuer Wert:
   „m" ist unverändert die Basisregel oben. */
.ag-float-fact-card__wert--s { font-size: var(--ag-titel-panel-24-fs, var(--fs-600)); line-height: var(--ag-titel-panel-24-lh, calc(32 / 24)); }
.ag-float-fact-card__wert--l { font-size: var(--ag-titel-hero-56-fs, var(--fs-900));  line-height: var(--ag-titel-hero-56-lh, calc(67 / 56)); }
.ag-float-fact-card__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-s);                         /* Quelle: 8 */
    font-size: var(--fs-100);                      /* Figma Copy/XS */
    line-height: calc(16 / 12);
    color: var(--ag-ffc-nebentext);
}
.ag-float-fact-card__delta-punkt {
    width: 10px;                                   /* Quellmaß Ø10 */
    height: 10px;
    border-radius: var(--radius-max);
    background: var(--color-feedback-success);     /* Quelle: Feedback/success */
    flex: none;
}
/* Abgeleitet — Quelle belegt nur positiv (angemerkt im Kontrakt) */
.ag-float-fact-card__delta--neutral  .ag-float-fact-card__delta-punkt { background: var(--color-text-grey); }
.ag-float-fact-card__delta--negativ .ag-float-fact-card__delta-punkt { background: var(--color-feedback-error); } /* Token tokens.css:217 */

/* ── zahl-doppel ────────────────────────────────────────────────── */
.ag-float-fact-card__doppel {
    display: flex;
    gap: var(--spacing-m);
    align-items: stretch;
}
.ag-float-fact-card__doppel .ag-float-fact-card__stat { flex: 1 1 0; }
.ag-float-fact-card__trenner {
    width: 1px;
    background: var(--color-border-subtle, var(--color-surface-light)); /* Quelle: Border--subtle */
    flex: none;
}

/* ── zahl-liste ─────────────────────────────────────────────────── */
.ag-float-fact-card__liste {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
    margin: 0;
}
.ag-float-fact-card__zeile {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-m);
    font-size: var(--fs-200);                      /* Figma Copy/S */
    line-height: calc(19 / 14);
}
.ag-float-fact-card__zeile-label { color: var(--ag-ffc-nebentext); }
.ag-float-fact-card__zeile-wert  { color: var(--ag-ffc-fg); margin: 0; }

/* ── zahl-icon ──────────────────────────────────────────────────── */
.ag-float-fact-card--zahl-icon { gap: var(--spacing-m); }
.ag-float-fact-card__badge { flex: none; align-self: flex-start; }

/* ── Säulen ─────────────────────────────────────────────────────── */
.ag-float-fact-card__chart--saeulen {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-ms);                        /* Quelle: 12 */
    height: 64px;                                  /* Quellmaß Chart */
    margin-block-start: var(--spacing-s);
}
.ag-float-fact-card__saeule {
    flex: 1 1 0;
    max-width: 30px;                               /* Quellmaß Säule */
    border-radius: var(--radius-xs);               /* Quelle: 8 */
    background: var(--ag-ffc-flaeche-2);
}
.ag-float-fact-card__saeule.ist-akzent { background: var(--ag-ffc-akzent); }

/* ── Linie / Fläche ─────────────────────────────────────────────── */
.ag-float-fact-card__chart--linie {
    position: relative;
    height: 64px;                                  /* Quellmaß Chart */
    margin-block-start: var(--spacing-s);
}
.ag-float-fact-card__chart--linie svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ag-float-fact-card__linie {
    fill: none;
    stroke: var(--ag-ffc-akzent);                  /* Quelle: Surface/brand, 2px */
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.ag-float-fact-card__flaeche { fill: var(--ag-ffc-flaeche-2); opacity: .6; }
.ag-float-fact-card__endpunkt {
    position: absolute;
    width: 8px;                                    /* Quellmaß Ø8 */
    height: 8px;
    border-radius: var(--radius-max);
    background: var(--ag-ffc-akzent);
    transform: translate(-50%, -50%);
}

/* ── Fortschritt / Segmente ─────────────────────────────────────── */
.ag-float-fact-card__chart--fortschritt,
.ag-float-fact-card__chart--segmente {
    display: flex;
    height: 12px;                                  /* Quellmaß */
    border-radius: var(--radius-max);              /* abgeleitet (Pillenoptik) */
    overflow: hidden;
    background: var(--ag-ffc-flaeche-3);           /* Quelle: Spur Surface/light */
    margin-block-start: var(--spacing-s);
}
.ag-float-fact-card__chart--segmente { background: transparent; gap: 2px; }
.ag-float-fact-card__balkenwert { background: var(--ag-ffc-akzent); border-radius: inherit; }
.ag-float-fact-card__segment--1 { background: var(--ag-ffc-akzent); }
.ag-float-fact-card__segment--2 { background: var(--ag-ffc-flaeche-2); }
.ag-float-fact-card__segment--3 { background: var(--ag-ffc-flaeche-3); }

/* ── Vergleich ──────────────────────────────────────────────────── */
.ag-float-fact-card__chart--vergleich {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s);
    margin-block-start: var(--spacing-s);
}
.ag-float-fact-card__vergleich-zeile {
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
}
.ag-float-fact-card__vergleich-balken {
    height: 16px;                                  /* Quellmaß */
    border-radius: var(--radius-max);              /* abgeleitet (Pillenoptik) */
    background: var(--ag-ffc-flaeche-2);
    flex: none;
}
.ag-float-fact-card__vergleich-balken.ist-akzent { background: var(--ag-ffc-akzent); }
.ag-float-fact-card__vergleich-label {
    font-size: var(--fs-100);                      /* Figma Copy/XS */
    line-height: calc(16 / 12);
    color: var(--ag-ffc-nebentext);
    white-space: nowrap;
}

/* ── Punktraster / Skala ────────────────────────────────────────── */
.ag-float-fact-card__chart--punktraster {
    display: grid;
    grid-template-columns: repeat(10, 12px);      /* Quelle: 10 × 5 Punkte Ø12 */
    gap: var(--spacing-s);
    margin-block-start: var(--spacing-s);
}
.ag-float-fact-card__chart--skala {
    display: flex;
    gap: var(--spacing-s);
    margin-block-start: var(--spacing-s);
}
.ag-float-fact-card__punkt {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-max);
    background: var(--ag-ffc-flaeche-3);
}
.ag-float-fact-card__punkt--gross { width: 16px; height: 16px; } /* Quelle: Skala Ø16 */
.ag-float-fact-card__punkt.ist-akzent { background: var(--ag-ffc-akzent); }

/* ── Radiale: Donut / Ring / Tacho ──────────────────────────────── */
.ag-float-fact-card__chart--radial {
    position: relative;
    width: 128px;                                  /* Quellmaß */
    margin-block-start: var(--spacing-s);
}
.ag-float-fact-card__chart--radial svg { width: 100%; display: block; }
.ag-float-fact-card__radial-spur,
.ag-float-fact-card__radial-wert {
    fill: none;
    stroke-width: 7;                               /* Ring: innerRadius 0,84 der Quelle ≈ 7/84 im 100er-Raster */
    stroke-linecap: round;
}
.ag-float-fact-card__radial-spur { stroke: var(--ag-ffc-flaeche-3); }
.ag-float-fact-card__chart--donut .ag-float-fact-card__radial-spur { stroke: var(--ag-ffc-flaeche-2); }
.ag-float-fact-card__radial-wert { stroke: var(--ag-ffc-akzent); }
.ag-float-fact-card__radial-spur.ist-donut,
.ag-float-fact-card__radial-wert.ist-donut { stroke-width: 16; stroke-linecap: butt; } /* Quelle: innerRadius 0,62 */
.ag-float-fact-card__chart--donut svg,
.ag-float-fact-card__chart--ring svg { transform: rotate(-90deg); }  /* Quelle: Start −90° */
.ag-float-fact-card__radial-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-200);                      /* Figma Copy/S */
    color: var(--ag-ffc-fg);
}
.ag-float-fact-card__chart--tacho .ag-float-fact-card__radial-text { align-items: flex-end; padding-block-end: 2px; }

/* Reveal folgt dem globalen Muster (reveal.css) über data-ag-anim. */

/* ── Zitat (Darstellung 17, Quelle 4992:124885, 24.09.2026) ──────────
   Zitattext oben in Copy/L, Quelle unten in Copy/S grau; keine Trend-Zeile.
   Höhe folgt dem Text (Quelle: hug). */
.ag-float-fact-card__zitat {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);                         /* Quelle: stat Label=bottom, Abstand 16 (TMP: gemessen 8 + Zeilenabstand) */
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}
.ag-float-fact-card__zitat-text {
    margin: 0;
    font-size: var(--fs-400);                      /* Figma Copy/L */
    line-height: calc(27 / 18);
    font-weight: var(--fw-regular, 400);
    color: var(--ag-ffc-fg);
    text-wrap: pretty;
}
.ag-float-fact-card__zitat-quelle {
    font-size: var(--fs-200);                      /* Figma Copy/S */
    line-height: calc(19 / 14);
    color: var(--ag-ffc-nebentext);
}

/* ── Umbruch-Hygiene (10.0.0, Auftrag Vincent 24.09.2026) ──────────────
   Zusammen mit ag_text_kleben() (geschützte Leerzeichen nach kurzen Wörtern
   und vor dem letzten Wort): der Browser vermeidet Einzelwort-Schlusszeilen
   und bricht Kartentexte nicht automatisch im Wort. */
.ag-float-fact-card__label,
.ag-float-fact-card__wert,
.ag-float-fact-card__zitat-text,
.ag-float-fact-card__zitat-quelle {
    text-wrap: pretty;
}
/* Textkarten (Darstellung text/zitat, längere Sätze in 206 px Inhaltsbreite bei M):
   Passt ein geklebtes Paar („KI automatisiert.“) nicht in die Zeile, trennt der
   Browser sauber an der Silbe statt „KI“ allein stehen zu lassen oder mitten im
   Wort zu brechen. Regel Fließtext 8/4/3 (Vincent, 17.09.2026); gemessen
   24.09.2026: „Menschen steuern. KI automatisiert.“ bei M in Copy/XL. */
.ag-float-fact-card--text .ag-float-fact-card__wert,
.ag-float-fact-card__zitat-text {
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-chars: 8 4 3;
    hyphenate-limit-chars: 8 4 3;
}
/* Silbentrennung für ALLE Kartentexte (10.26.1, Auftrag Vincent 25.09.2026:
   „Fact cards haben keine Trennstriche bei Umbrüchen“).
   Ursache: Die Karte erbte die Trennung nur aus base.css. In der Kombination
   ag_media_fact setzte der Chip-Wrapper `hyphens: manual` (9.0.0) — das erbten
   Label, Kennzahl und alle Nebentexte; lange Wörter brachen dort ohne Strich
   (overflow-wrap) oder liefen über. Die Karte setzt die Regel jetzt selbst am
   Wurzelelement, damit sie in jedem Konsumenten gleich trennt.
   Grenzen wie base.css (8/4/3, Entscheidung Vincent 17.09.2026): kurze Wörter
   und Zahlen („38 %“, „+12 %“) bleiben ungetrennt. Werte ohne Token — es gibt
   keine Token-Leiter für Trennregeln. */
.ag-float-fact-card {
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-chars: 8 4 3;
    hyphenate-limit-chars: 8 4 3;              /* tmp */
    -webkit-hyphenate-limit-before: 4;         /* tmp — Safari */
    -webkit-hyphenate-limit-after: 3;          /* tmp — Safari */
    -webkit-hyphenate-limit-lines: 2;          /* tmp — Safari */
}

/* Farbwelten fusion · erp · crm (Entscheidung Vincent, 25.09.2026). Die Karte
   schwebt meist über Bildern — Grund bleibt deshalb lightest (deckend), die
   Tiefenlage liegt darüber. Paint Styles „Fusion | Tiefe/*-hell". */
.ag-float-fact-card--flaeche-fusion { --ag-ffc-bg: var(--gradient-tiefe-diagonal-hell), var(--color-surface-lightest); }
.ag-float-fact-card--flaeche-erp    { --ag-ffc-bg: var(--gradient-tiefe-erp-hell), var(--color-surface-lightest); }
.ag-float-fact-card--flaeche-crm    { --ag-ffc-bg: var(--gradient-tiefe-crm-hell), var(--color-surface-lightest); }