/**
 * agenic Komponenten-CSS – Statement-Band — Figma `statement-band` (1855:34313,
 * gemessen 10.08.2026): Verlaufsfläche --gradient-preset-hell (CSS-Nachbau der
 * gradient-preset--1-1-Shapes, Entscheidung Vincent 10.08.2026),
 * Intro Copy/L, Statement Display/S auf white-grey (#f8fafa = Surface/lightest),
 * Padding 3xl 128, Gaps xxl 64. Kontrakt: kontrakte-welle-c-10-08.
 */

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

/* „agenic · Breite" = Standard heißt hier: volle Viewport-Breite (Auftrag
   Vincent, QS 26.09.2026 — „agenic Breite Standard: Volle Breite").
   Bis 10.52.1 lief das Band im Standard nur so breit wie seine Sektion;
   in boxed-Sektionen und außerhalb einer ag-sektion blieb es bei 1200, und
   die Redaktion musste „Volle Breite" von Hand wählen (so auf Seite 1507).
   Dieselbe Rechnung wie ag-breite--voll in tokens.css; das Band polstert
   sein __inner selbst mit der Full-Bleed-Formel, deshalb kein Wrapper-Polster.
   (0,4,0) wie dort — Elementor setzt max-width: 100% mit (0,3,0).
   „Container" und „Container schmal" wirken unverändert. */
.elementor-element.elementor-widget-ag_statement_band.ag-breite--standard.ag-breite--standard {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
}
/* Der Ausbruch der Ausbruchsliste (tokens.css, −Seitenrand) entfällt, der
   Wrapper regelt die Breite allein — sonst stünde das Band 2 × 16 zu breit. */
.elementor-widget-ag_statement_band.ag-breite--standard .ag-statement-band {
    margin-inline: 0;
}

.ag-statement-band {
    --ag-statement-band-fg: var(--color-surface-lightest); /* Figma white-grey #f8fafa */
    --ag-statement-band-space-before: 0px;
    --ag-statement-band-space-after: 0px;

    background: var(--gradient-preset-hell, var(--color-surface-darkest)); /* CSS-Nachbau gradient-preset--1-1·hell (Entscheidung Vincent 10.08.) */
    color: var(--ag-statement-band-fg);
    margin-block-start: var(--ag-statement-band-space-before);
    margin-block-end: var(--ag-statement-band-space-after);
    font-family: var(--font-sans);
    letter-spacing: -0.02em;
}

.ag-statement-band__inner {
    /* Inhalt exakt auf --content-width (1200), s. hero.css */
    padding: var(--ag-statement-band-pad-oben, var(--spacing-xxl)) max(var(--spacing-ml), calc((100% - var(--content-width, 1200px)) / 2)) var(--ag-statement-band-pad-unten, var(--ag-luft-sektion-fuss)); /* 128 / 24+ */
    /* Layout lt. Quelle (1855:34313, Fix 10.08.): zweispaltig — Intro links,
       Statement rechts (Zeile darunter), Logo-Mark oben rechts, Accordion volle Breite. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        'intro logo'
        '. statement'
        'accordion accordion';
    column-gap: var(--spacing-xxl);
    row-gap: var(--spacing-xxl);                          /* 64 */
}

.ag-statement-band__intro {
    grid-area: intro;
    margin: 0;
    font-size: var(--fs-600);                             /* Copy/L 24/32 Light */
    line-height: calc(32 / 24);
    font-weight: var(--fw-light);
    max-width: 720px;
}

.ag-statement-band__statement {
    grid-area: statement;
    margin: 0;
    font-size: var(--fs-750);                             /* Display/S 38/44 Light */
    line-height: calc(44 / 38);
    font-weight: var(--fw-light);
    max-width: 960px;
    color: inherit;
}

.ag-statement-band__accordion { grid-area: accordion; max-width: none; }

.ag-statement-band__logo {
    grid-area: logo;
    justify-self: end;
    color: var(--ag-statement-band-fg);
}

.ag-statement-band__logo .ag-logo-mark {
    width: 56px;                                          /* Quelle: Instanz 56×59 */
    height: auto;
    display: block;
}

@media (max-width: 767px) { /* A5 offen (tmp) — Mobilbau folgt gegen mobil-375 */
    .ag-statement-band__inner {
        padding: var(--ag-statement-band-pad-oben, var(--spacing-xxl)) var(--spacing-ml) var(--ag-statement-band-pad-unten, var(--ag-luft-sektion-fuss));
        grid-template-columns: 1fr;
        grid-template-areas: 'logo' 'intro' 'statement' 'accordion';
    }
    .ag-statement-band__logo { justify-self: start; }
}

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