/** * agenic Widgets – CTA Band zweispaltig (Organismus, Full-Bleed) * * Quelle: Figma `cta-band--2col` (2846:21168, Seite 0.5, Sektion * `04 · Organisms (Layouts)`), gemessen 19.08.2026. * Kontrakt: `_incoming/kontrakt-ag-cta-band-2col.md` v0.1. * Schichten: L3 (--ag-cta-band-2col-*) → L2 (--spacing-*, --color-*, * --gradient-*, --fs-*, --motion-*) → L1. * * Gemessene Maße bei 1440: Band 1440 × 524 · Inhalt 1200 · Innenabstand * seitlich 120, oben/unten 128 · Spalten 571 / 565, Abstand 64 · * Copy ↔ Button 32 · Marke-Abstand oben 64 · Logo-Slot 247 × 56. * * 0 Hex, 0 harte Spacings, 0 tmp — bis auf die Mobilstufen (s. u.). */ .ag-cta-band-2col, .ag-cta-band-2col * { box-sizing: border-box; /* nicht von Theme/Elementor-Reset abhängig */ } .ag-cta-band-2col { /* L3 mit L2-Defaults */ --ag-cta-band-2col-fg: var(--color-text-inverse-soft); /* Figma Text/inverse */ --ag-cta-band-2col-logo-fg: var(--color-text-inverse); /* Figma agenic-logo · Farbe=Weiß */ --ag-cta-band-2col-logo-width: 247px; /* Slot `logo` 247 × 56 */ --ag-cta-band-2col-pad-block: var(--spacing-4xl); /* Figma 128 */ --ag-cta-band-2col-pad-inline-min: var(--spacing-ml); /* Mindestpolster schmal, 24 */ --ag-cta-band-2col-col-gap: var(--spacing-xxl); /* Figma row gap, gebunden spacing/xxl = 64 */ --ag-cta-band-2col-body-gap: var(--spacing-l); /* Figma body gap, gebunden spacing/l = 32 */ --ag-cta-band-2col-marke-gap: var(--spacing-5xl); /* Figma marke padding-top = 64 */ --ag-cta-band-2col-space-before: 0px; /* Control „Abstand davor" */ --ag-cta-band-2col-space-after: 0px; /* Control „Abstand danach" */ /* Paint Style „Fusion | Gradients/fusion-basic--reverse-30": 9 Stops + 30-%-Schwarz-Overlay, Winkel 134,2°. Wertgleich zur gemessenen Fläche am `surface`-Frame; in Figma ist sie nicht an die Style gebunden (Rückspielpunkt R1). Die Fläche wächst mit der Höhe mit. */ background: var(--gradient-fusion-basic-reverse-30); color: var(--ag-cta-band-2col-fg); margin-block-start: var(--ag-cta-band-2col-space-before); margin-block-end: var(--ag-cta-band-2col-space-after); font-family: var(--font-sans); /* letter-spacing steht bewusst NICHT hier: `em` löst an dem Element auf, an dem es deklariert ist, und vererbt danach als feste Länge. Auf dem Block (16 px) ergäbe -0.02em = -0,32 px und würde die Überschrift mit 56 px genauso treffen — Figma misst dort aber -1,12 px. Deshalb je Textelement deklarieren (gemessen 19.08.2026). */ } /* Full-Bleed: die Breitenbegrenzung leistet allein das Polster. Bei 1440 px ergibt die calc() exakt 120 — das Figma-Maß. KEINE zusätzliche max-width auf dem Wrapper, sonst addiert sich beides und der Inhalt bleibt schmaler als --content-width. max() steht bewusst in EINER Zeile: Der CSS-Minifier von WP Rocket (matthiasmullie/minify) macht aus „var(…)," ein „var(…))" und schließt max() damit zu früh. Die ganze Deklaration wird ungültig, das Polster fällt für Besucher auf 0 (gemessen 21.09.2026 auf agenic.com, nur ausgeloggt). Nicht wieder umbrechen. */ .ag-cta-band-2col__inner { padding: var(--ag-cta-band-2col-pad-block) max(var(--ag-cta-band-2col-pad-inline-min), calc((100% - var(--content-width, 1200px)) / 2)); } /* Figma `row`: HORIZONTAL, gap 64, counterAxisAlign = MAX (unten bündig). Spaltenverhältnis exakt gemessen (571 / 565) — 1fr 1fr läge 3 px daneben. */ .ag-cta-band-2col__row { display: grid; grid-template-columns: minmax(0, 571fr) minmax(0, 565fr); column-gap: var(--ag-cta-band-2col-col-gap); align-items: end; } /* Figma `col/titel`: VERTICAL, SPACE_BETWEEN, vertikal FILL — Titel oben, Marke unten. */ .ag-cta-band-2col__col { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; } .ag-cta-band-2col__title { margin: 0; /* Stufe hero-56, überschreibbar durch den Control „Stufe des Titels". */ font-size: var(--ag-cta-band-2col-title-fs, var(--ag-titel-hero-56-fs)); line-height: var(--ag-cta-band-2col-title-lh, var(--ag-titel-hero-56-lh)); letter-spacing: -0.02em; /* Figma ls = -2 % */ font-weight: var(--ag-cta-band-2col-title-fw, var(--ag-titel-hero-56-fw)); color: inherit; } .ag-cta-band-2col__marke { padding-block-start: var(--ag-cta-band-2col-marke-gap); } .ag-cta-band-2col__logo { width: var(--ag-cta-band-2col-logo-width); max-width: 100%; color: var(--ag-cta-band-2col-logo-fg); /* das SVG füllt über currentColor */ } .ag-cta-band-2col__logo .ag-logo-wbm { display: block; width: 100%; height: auto; } /* Figma `body`: VERTICAL, gap 32, unten bündig im row. */ .ag-cta-band-2col__body { display: flex; flex-direction: column; gap: var(--ag-cta-band-2col-body-gap); min-width: 0; } .ag-cta-band-2col__copy { font-size: var(--fs-600); /* Digital/General/Copy/L — 24 */ line-height: calc(32 / 24); /* Figma 32 px */ letter-spacing: -0.02em; /* Figma ls = -2 % → -0,48 px bei 24 */ font-weight: var(--fw-light); color: inherit; } .ag-cta-band-2col__copy > :first-child { margin-block-start: 0; } .ag-cta-band-2col__copy > :last-child { margin-block-end: 0; } /* Buttons nicht strecken (Kit-/Theme-Styles bluten sonst durch). */ .ag-cta-band-2col__actions { display: flex; align-items: flex-start; } .ag-cta-band-2col__actions .ag-button { align-self: flex-start; } /* ── Mobil ─────────────────────────────────────────────────────── Die Quelle hat KEINE 375er-Variante (Kontrakt Abweichung A6). Näherung nach `breakpoint-varianten`; A5-Festschreibung offen. */ @media (max-width: 767.98px) { /* tmp — A5 offen */ .ag-cta-band-2col__inner { padding: var(--spacing-xxl) var(--spacing-ml); /* tmp */ } .ag-cta-band-2col__row { grid-template-columns: 1fr; row-gap: var(--ag-cta-band-2col-col-gap); } .ag-cta-band-2col__title { font-size: var(--fs-800); /* Mobilstufe 40, wie ag_hero — tmp */ line-height: 1.15; /* tmp */ } /* Doppelklasse: Kit-/Theme-Regeln auf `a` haben Spezifität (0,1,1). */ .ag-cta-band-2col .ag-button.ag-button { width: 100%; justify-content: space-between; /* Label links, Pfeil rechts */ } } /* ── Einblendung (Modell: Global Standard + Widget-Override) ───── Nur aktiv, wenn JS bereit ist (html.ag-anim-ready) — ohne JS bleibt alles sichtbar. prefers-reduced-motion wird immer respektiert. */ @media (prefers-reduced-motion: no-preference) { html.ag-anim-ready .ag-cta-band-2col[data-ag-anim="reveal"] { opacity: 0; transform: translateY(var(--motion-distance-reveal)); transition: opacity var(--motion-reveal) var(--motion-ease-standard), transform var(--motion-reveal) var(--motion-ease-standard); } html.ag-anim-ready .ag-cta-band-2col[data-ag-anim="reveal"].is-inview { opacity: 1; transform: none; } }