/** * agenic Komponenten-CSS – Button (Atom) — vollständige Übertragung. * * Figma-Quelle: Set `button` (346:1429, Seite 0.5, 80 Varianten): * Typ = gradient · outline · text → Modifier * Farbe = Standard | Inverse → --inverse (Kontext) * Größe = L 56 · M 48 · S 40 · XS 34 → Modifier * Status = Default/Hover/Focus/Disabled → CSS-States * Icon = Boolean → Partial-Parameter * Ergänzung ohne Figma-Entsprechung (Entscheidung Vincent 11.08.2026): * Kontrast = an|aus (High-Contrast) → Modifier --kontrast * Abweichung vom Design System, Rückspielpunkt auf 0.8 Sektion 02. * Markup-Partial: includes/render-button.php. Konsumenten: ag_button, ag_cta_band. * Abstände nutzen die Figma-Spacing-Leiter --spacing-* (Deckungsgleichheit). * * Kontrakt v1.1 (11.08.2026): Der Typ `gradient simple` ist abgelöst * (Entscheidung Vincent „komplex gewinnt" — nur ein Primary live). Seine * 16 Figma-Varianten liegen unter `archiv/button--gradient-simple` (2467:1891); * gespeicherte Elementor-Werte mappt das Partial auf `gradient`. * * tmp-Punkte (ehrlich markiert): Größen-Paddings L/S/XS nicht einzeln aus * Figma vermessen (M exakt); Disabled-Optik genähert; die Mesh-Fläche ist * eine kalibrierte Näherung (RMSE 4,9 % gegen den Figma-Export) — ein * Gauß-Blur über Vektorformen ist mit drei Radialverläufen nicht exakt. */ .ag-button, .ag-button * { box-sizing: border-box; } /* Typisierte Custom Properties — nur registrierte Properties interpolieren. Ohne @property springt der Verlauf, statt zu gleiten. */ @property --ag-button-dx { syntax: ''; inherits: true; initial-value: 0px; } @property --ag-button-dy { syntax: ''; inherits: true; initial-value: 0px; } @property --ag-button-tint { syntax: ''; inherits: true; initial-value: 0; } /* ── Fremdgerenderte Knöpfe mit Atom-Look ──────────────────── ClickDimensions rendert den Absende-Knopf seines Formulars selbst (`.sd-navigation__complete-btn`); ohne JS lässt sich ihm keine Klasse anhängen. Damit der Verlauf aus EINER Quelle kommt (Regel „Atom-Doppelrolle, SSOT im Code") steht seine Auswahl hier neben der des Atoms — statt als zweiter Verlaufsnachbau im Widget-Blatt. Spezifität (0,3,0) schlägt `.elementor-kit-7 button` (0,1,1). Aufgenommen 04.09.2026, K3-5 erledigt (Auftrag Vincent: „Button ist nicht primary gradient"). */ .ag-button, .ag-hero-form-split__formular .sd-root-modern .sd-navigation__complete-btn { --ag-button-color: var(--color-text-standard); /* Abdunklung der Verlaufsfläche als L3-Alias. Global überschreibbar unter „agenic Design → Button"; Standard ist der Semantik-Token. */ --ag-button-scrim: var(--color-interaction-contrast-scrim); /* Kontrastkontur (High-Contrast, Modifier --kontrast). Farbe bindet an den Semantik-Token, die Deckung ist die einzige Stellschraube. */ --ag-button-kontur-farbe: var(--color-text-inverse-soft); --ag-button-kontur-deckung: 55%; /* Tiefe der Cursor-Verdrängung je Blob (Kontrakt ag_button §8). Der Faktor ist der einzige Hebel der globalen Einstellung — die Verhältnisse der drei Blobs zueinander bleiben dadurch erhalten. Faktor 0 = Verdrängung aus. */ --ag-button-push-faktor: 1; --ag-button-push-crm: calc(.34 * var(--ag-button-push-faktor)); --ag-button-push-erp: calc(-.22 * var(--ag-button-push-faktor)); --ag-button-push-dark: calc(.12 * var(--ag-button-push-faktor)); /* Rueckzug: Beim Verlassen zieht sich die Flaeche langsam zurueck, beim Ueberfahren folgt sie sofort. Voreinstellung ist die laengste Stufe der Figma-Motion-Leiter (Values/motion/duration/2xl). */ --ag-button-rueckzug: var(--motion-duration-2xl, 1600ms); display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-m); border-radius: var(--radius-max); font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: -0.02em; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease-standard); } .ag-button.ag-button, .ag-button.ag-button:hover, .ag-button.ag-button:focus, .ag-button.ag-button:visited { text-decoration: none; } .ag-button.ag-button:hover, .ag-hero-form-split__formular .sd-root-modern .sd-navigation__complete-btn:hover { transform: translateY(-2px); /* Button-Lift nach 0.7: rein Transform, kein Schatten */ } .ag-button.ag-button:focus-visible, .ag-hero-form-split__formular .sd-root-modern .sd-navigation__complete-btn:focus-visible { outline: 2px solid currentColor; /* Fokus per outline (0.7-Muster), nie box-shadow */ outline-offset: 2px; } /* Status=Disabled → Zustand, kein Control. tmp: Optik genähert. */ .ag-button.ag-button:is([disabled], [aria-disabled="true"], .is-disabled) { opacity: 0.45; /* tmp */ pointer-events: none; transform: none; } /* ── Größen (Figma: L 56 · M 48 · S 40 · XS 34) ─────────────── */ /* Doppelklasse: als