/**
 * agenic Komponenten-CSS – Card-Testimonial — Figma `card-testimonial`
 * (713:2224, Theme lightest·light·dark), gemessen 10.08.2026: Fläche
 * Surface/lightest|light|darkest, Padding l 32, Gap ml 24, Zitat Copy/L,
 * Avatar auf Surface/brand-subtle, Name Headline/S, Rolle Copy/XS grey,
 * Kontur Border--subtle. Kontrakt: kontrakte-welle-c-10-08.
 */

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

.ag-card-testimonial {
    --ag-card-testimonial-bg: var(--color-surface-lightest);
    --ag-card-testimonial-fg: var(--color-text-standard);
    --ag-card-testimonial-muted: var(--color-text-grey);
    --ag-card-testimonial-border: var(--color-border-soft);   /* Figma Border--subtle */
    --ag-card-testimonial-space-before: 0px;
    --ag-card-testimonial-space-after: 0px;

    display: flex;
    flex-direction: column;
    gap: var(--spacing-ml);                                   /* 24 */
    margin: var(--ag-card-testimonial-space-before) 0 var(--ag-card-testimonial-space-after);
    padding: var(--ag-card-testimonial-pad-oben, var(--spacing-l)) var(--spacing-l) var(--ag-card-testimonial-pad-unten, var(--spacing-l));                                /* 32 */
    background: var(--ag-card-testimonial-bg);
    border: var(--border-width-xs) solid var(--ag-card-testimonial-border);
    border-radius: var(--radius-l);                          /* radius/l 24 */
    color: var(--ag-card-testimonial-fg);
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
}

.ag-card-testimonial--light { --ag-card-testimonial-bg: var(--color-surface-light); }
/* ── Farbwelt über der Fläche (Entscheidung Vincent, 25.09.2026) ─────────
   Zweiter Regler `farbwelt` neben der Fläche — wie ag_card (card.css); `dark` ist hier Surface/darkest.
   Tiefenlage über light, lightest oder darkest (`black`). Ersetzt die
   Flächen fusion/erp/crm aus 10.39.0; Altwerte löst ag_card_flaeche_teilen()
   zu light + Farbwelt auf. Projekt-Doc claude/kartenflaechen-neu-25-09.md. */
.ag-card-testimonial--welt-fusion { --ag-welt-lage: var(--gradient-tiefe-diagonal-hell); }
.ag-card-testimonial--welt-erp    { --ag-welt-lage: var(--gradient-tiefe-erp-hell); }
.ag-card-testimonial--welt-crm    { --ag-welt-lage: var(--gradient-tiefe-crm-hell); }
.ag-card-testimonial:is(.ag-card-testimonial--welt-fusion, .ag-card-testimonial--welt-erp, .ag-card-testimonial--welt-crm) { --ag-card-testimonial-border: transparent; }
.ag-card-testimonial--light:is(.ag-card-testimonial--welt-fusion, .ag-card-testimonial--welt-erp, .ag-card-testimonial--welt-crm)    { --ag-card-testimonial-bg: var(--ag-welt-lage), var(--color-surface-light); }
.ag-card-testimonial--lightest:is(.ag-card-testimonial--welt-fusion, .ag-card-testimonial--welt-erp, .ag-card-testimonial--welt-crm) { --ag-card-testimonial-bg: var(--ag-welt-lage), var(--color-surface-lightest); }
.ag-card-testimonial--dark:is(.ag-card-testimonial--welt-fusion, .ag-card-testimonial--welt-erp, .ag-card-testimonial--welt-crm)     { --ag-card-testimonial-bg: var(--ag-welt-lage), var(--color-surface-darkest); }
.ag-card-testimonial--dark {
    --ag-card-testimonial-bg: var(--color-surface-darkest);
    --ag-card-testimonial-fg: var(--color-text-inverse-soft);
    --ag-card-testimonial-muted: var(--color-text-grey-inverse);
    --ag-card-testimonial-border: var(--color-border-inverse);
}

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

.ag-card-testimonial__person { display: flex; align-items: center; gap: var(--spacing-m); }

.ag-card-testimonial__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    border-radius: var(--radius-max);
    background: var(--color-surface-brand-subtle);            /* Figma Surface/brand-subtle */
    color: var(--color-text-standard);
    font-size: var(--fs-300);                                 /* Copy/M */
    font-weight: var(--fw-light);
}

.ag-card-testimonial__meta { display: flex; flex-direction: column; gap: 2px; }

.ag-card-testimonial__name {
    font-size: var(--fs-300);                                 /* Headline/S 16/21 Medium */
    line-height: calc(21 / 16);
    font-weight: var(--fw-medium);
}

.ag-card-testimonial__role {
    font-size: var(--fs-100);                                 /* Copy/XS 12/16 */
    line-height: calc(16 / 12);
    font-weight: var(--fw-light);
    color: var(--ag-card-testimonial-muted);
}

/* ── Karte füllt ihre Zelle im Elementor-Container ────────────────────
   Gleiche Kette und gleiche Begründung wie in `card.css` (dort ausführlich,
   inkl. Messung vom 18.08.2026): Elementor legt die Karte in einen eigenen
   Kind-Container; das Widget ist darin Flex-Item einer Spalte und wächst
   nicht mit. Kein eigenes Control — gestreckt wird ausschließlich über die
   Flex-/Grid-Einstellungen des Containers (Entscheidung Vincent,
   18.08.2026). Bei `start`/`center` folgenlos, weil `height: 100%` dann zu
   `auto` auflöst.

   NUR im Elementor-v3-Container (`.e-con` / `.e-con-inner`) — gleiche
   Einschränkung und gleiche Begründung wie in `card.css`: In einer
   klassischen Spalte (`.elementor-widget-wrap`) ist die Elternhöhe definit,
   die Karte wurde dort 8783 px statt 170 px hoch (gemessen 18.08.2026,
   Brandhub „Moleküle", Seite 823, zwei Instanzen). */
:where(.e-con, .e-con-inner) > .elementor-widget-ag_card_testimonial { height: 100%; }
:where(.e-con, .e-con-inner) > .elementor-widget-ag_card_testimonial > .elementor-widget-container { height: 100%; }
:where(.e-con, .e-con-inner) > .elementor-widget-ag_card_testimonial > .elementor-widget-container > .ag-card-testimonial,
:where(.e-con, .e-con-inner) > .elementor-widget-ag_card_testimonial > .ag-card-testimonial { height: 100%; }

/* Person-Zeile an die Unterkante, sonst treibt der Abstand zum Zitat bei
   gestreckter Karte auseinander. Bei ungestreckter Karte folgenlos (kein
   freier Raum zu verteilen). Nur im Einzel-Widget — in
   `ag_logo_stats_testimonial` bleibt die Karte unberührt.
   Abweichung: die Figma-Quelle 713:2224 kennt keinen gestreckten Zustand. */
.elementor-widget-ag_card_testimonial .ag-card-testimonial__person {
    margin-top: auto;
}

/* Einblendung */
html.ag-anim-ready .ag-card-testimonial[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-card-testimonial[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-card-testimonial[data-ag-anim="reveal"],
    html.ag-anim-ready .ag-card-testimonial[data-ag-anim="reveal"]:not(.is-inview) {
        transition: none; transform: none; opacity: 1;
    }
}