/** * agenic Komponenten-CSS – Divider (Atom) — vollständige Übertragung. * * Figma-Quelle: Set `divider` (653:2128, Seite 0.5, 7 Varianten, gemessen 10.08.2026): * Theme = auf-hell (Border) · subtle (Border--subtle) · auf-dunkel (Border--inverse) * · branded (Fusion-Gradient, 2 px) * Ausrichtung = Horizontal · Vertikal (Höhe 100 % des Containers, * Entscheidung Vincent 10.08.2026; branded×Vertikal existiert nicht) * Strichstärken: 1 px = Values/border/xs, branded 2 px = Values/border/s (gemessen). * Markup-Partial: includes/render-divider.php. * Kontrakt: Projekt-Doc `kontrakte-welle-a-10-08.md`. 0 tmp-Punkte. * * Seit 3.81.0 zusätzlich das Eingangs-Wachsen (Entscheidung Vincent, * 24.08.2026) — Block am Ende der Datei. Es hat keine Figma-Quelle: Die * Komponente `divider` führt keine Motion-Achse, und 0.7 · Animation kennt * bislang nur „scroll-reveal". Rückspielpunkt auf 0.8. * * Seit 3.97.0 die Achse `Auslauf` (Entscheidung Vincent, 25.08.2026): * weiches Ausblenden am Ende bzw. an beiden Enden statt harter Kante. * Ebenfalls ohne Figma-Quelle — Rückspielpunkt auf 0.8. Begründung und * Messbeleg im Block „Auslauf". */ .ag-divider, .ag-divider * { box-sizing: border-box; } .ag-divider.ag-divider { /* Doppelklasse: Elementors `.elementor hr{margin:0}` (0-1-1) schlägt sonst die Abstands-Margins — Finding 15, 10.08.2026 */ /* L3 mit L2-Defaults */ --ag-divider-color: var(--color-border); /* Figma Border */ --ag-divider-weight: var(--border-width-xs); /* Figma Values/border/xs = 1 */ --ag-divider-space-before: 0px; /* Control „Abstand davor" (nur Widget ag_divider) */ --ag-divider-space-after: 0px; /* Control „Abstand danach" */ /* Laenge der Auslauf-Strecke, siehe Block „Auslauf" am Dateiende. Bewusst PROZENT und keine Spacing-Stufe — Begruendung dort. */ --ag-divider-auslauf: 18%; /* Eingangs-Wachsen — Defaults bewusst HIER im Doppelklassen-Block und nicht am Wachsen-Selektor unten: Der globale Override aus includes/settings/frontend.php schreibt `.ag-divider.ag-divider{…}` und braucht dieselbe Spezifitaet (0,2,0), um zu greifen. Stuenden die Defaults am spezifischeren Selektor `html.ag-anim-ready .ag-divider[data-ag-anim]`, liefe die globale Einstellung ins Leere. */ --ag-divider-anim-dauer: var(--motion-duration-m); /* Figma Values/motion/duration/m = 450 */ --ag-divider-anim-ease: var(--motion-ease-standard); display: block; border: none; width: 100%; height: 0; border-top: var(--ag-divider-weight) solid var(--ag-divider-color); margin: var(--ag-divider-space-before) 0 var(--ag-divider-space-after); } /* ── Theme-Achse ───────────────────────────────────────────────── Doppelklasse zwingend — siehe Hinweis am Basisblock: dessen (0,2,0) schlaegt jeden einfachen Modifier (0,1,0). Bis 17.08.2026 rendeten deshalb ALLE Divider in --color-border, unabhaengig vom Theme (gemessen auf der Startseite: 16 von 16 in rgb(24,24,30), darunter 3 subtle und 4 auf-dunkel, die dadurch unsichtbar waren). */ .ag-divider--subtle.ag-divider--subtle { --ag-divider-color: var(--color-border-soft); } /* Figma Border--subtle */ .ag-divider--auf-dunkel.ag-divider--auf-dunkel { --ag-divider-color: var(--color-border-inverse); } /* Figma Border--inverse */ .ag-divider--branded.ag-divider--branded { /* Verlaufslinie: Border-Farbe kann keinen Verlauf tragen → Fläche. Stops identisch mit Paint Style Fusion | Gradients/fusion-basic (branded-Variante gemessen 10.08.2026, 9 Stops deckungsgleich). */ --ag-divider-weight: var(--border-width-s); /* Figma Values/border/s = 2 */ border-top: none; height: var(--ag-divider-weight); background: var(--gradient-fusion-basic); } /* ── Ausrichtung Vertikal ──────────────────────────────────────── Höhe = 100 % des Containers (Entscheidung Vincent 10.08.2026). In Flex-Containern greift align-self: stretch auch ohne feste Containerhöhe. */ /* Doppelklasse zwingend: `.ag-divider.ag-divider` oben hat Spezifitaet (0,2,0) und schlug mit `border: none; height: 0` die einfache Vertikal-Klasse (0,1,0). Die Variante rendert dadurch seit dem Doppelklassen-Fix vom 10.08.2026 als unsichtbarer 0x1-Strich (gemessen 17.08.2026 im Footer: height 1 px, border-left-width 0 px). Betrifft alle Konsumenten der Vertikal-Achse. */ .ag-divider--vertikal.ag-divider--vertikal { width: 0; height: 100%; align-self: stretch; border-top: none; border-left: var(--ag-divider-weight) solid var(--ag-divider-color); margin: 0 var(--ag-divider-space-after) 0 var(--ag-divider-space-before); } /* ── Auslauf: weiches Ende statt harter Kante (seit 3.97.0) ────── Entscheidung Vincent, 25.08.2026. ANLASS. Bei `branded` sieht der linke Rand aus, als liefe die Linie aus — das ist aber kein Ausblenden, sondern der Verlauf selbst: `--gradient-fusion-basic` startet mit `#18181e`, also genau der dunklen Flaeche darunter. Rechts endet er in `#5fb234` und schneidet hart ab. Die Maske stellt das Gegenstueck her. (Maske = weiches Ausblenden zu durchsichtig.) WARUM PROZENT UND KEINE SPACING-STUFE. Die Stops des Verlaufs sind prozentual; ein Pixelmasz wuerde nur bei genau einer Breite spiegeln. 18 % ist der Stop, an dem der Verlauf links seine Markenfarbe erreicht (`#368f9a 18%` in tokens.css) — dieselbe Strecke laeuft rechts zurueck. Die Zahl ist also gemessen, nicht gegriffen. `#000` ist hier kein Farbwert, sondern die Deckung der Maske — gleiches Muster wie in process-chain.css. Faellt `mask-image` mangels Unterstuetzung weg, ist die Kante wieder hart, sonst passiert nichts. KEINE FIGMA-QUELLE. Die Komponente `divider` (Set 653:2128) fuehrt keine Achse `Auslauf`. Rueckspielpunkt auf 0.8, wie beim Eingangs-Wachsen. Doppelklasse zwingend — der Basisblock oben liegt bei (0,2,0). */ .ag-divider--auslauf-ende.ag-divider--auslauf-ende { mask-image: linear-gradient(to right, #000 calc(100% - var(--ag-divider-auslauf)), transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--ag-divider-auslauf)), transparent 100%); } .ag-divider--auslauf-beide.ag-divider--auslauf-beide { mask-image: linear-gradient(to right, transparent 0, #000 var(--ag-divider-auslauf), #000 calc(100% - var(--ag-divider-auslauf)), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ag-divider-auslauf), #000 calc(100% - var(--ag-divider-auslauf)), transparent 100%); } /* Vertikal laeuft dieselbe Bewegung um 90 Grad gedreht: „Ende" ist unten, nicht rechts. Gleiche Spezifitaet wie oben — gewinnt durch die spaetere Position im Blatt, wie beim Eingangs-Wachsen. */ .ag-divider--vertikal.ag-divider--auslauf-ende { mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ag-divider-auslauf)), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ag-divider-auslauf)), transparent 100%); } .ag-divider--vertikal.ag-divider--auslauf-beide { mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ag-divider-auslauf), #000 calc(100% - var(--ag-divider-auslauf)), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--ag-divider-auslauf), #000 calc(100% - var(--ag-divider-auslauf)), transparent 100%); } /* ── Eingangs-Wachsen (seit 3.81.0) ────────────────────────────── Entscheidung Vincent, 24.08.2026: Die Linie wächst aus ihrem Anfang heraus, statt einzublenden — horizontal von links nach rechts, vertikal von oben nach unten. Das Merkmal ist dasselbe wie bei jeder anderen Einblendung (`data-ag-anim="reveal"`, gesetzt in includes/render-divider.php); reveal.js setzt `is-inview`, sobald der Auslösepunkt erreicht ist. WARUM DIESE SELEKTOREN SO SPEZIFISCH SIND assets/css/reveal.css liefert allen Reveal-Zielen den Startzustand „unsichtbar + 36 px nach unten versetzt" — mit (0,3,1) für `html.ag-anim-ready [data-ag-anim="reveal"]:not(.is-inview)`. Beim Divider ist das falsch: Er soll nicht auftauchen, sondern wachsen. Die Regeln hier tragen zusätzlich `.ag-divider` und liegen damit bei (0,4,1) — sie ersetzen den Startzustand, statt ihn zu ergänzen. `opacity: 1` ist deshalb kein Beiwerk, sondern hebt die Deckkraft 0 der Basis auf. Skaliert wird die Border-Box: Bei den Themes auf Border-Basis ist die Linie die `border-top` und wächst mit, bei `branded` die 2-px-Verlaufsfläche. */ html.ag-anim-ready .ag-divider[data-ag-anim="reveal"] { opacity: 1; transform-origin: left center; transform: scaleX(1); transition: transform var(--ag-divider-anim-dauer) var(--ag-divider-anim-ease); will-change: transform; } html.ag-anim-ready .ag-divider[data-ag-anim="reveal"]:not(.is-inview) { opacity: 1; transform: scaleX(0); } /* Vertikal: dieselbe Bewegung, um 90° gedreht — von oben nach unten. Gleiche Spezifität wie die Regeln darüber, gewinnt durch die spätere Position im Blatt. */ html.ag-anim-ready .ag-divider--vertikal[data-ag-anim="reveal"] { transform-origin: center top; transform: scaleY(1); } html.ag-anim-ready .ag-divider--vertikal[data-ag-anim="reveal"]:not(.is-inview) { transform: scaleY(0); } /* Barrierefreiheit: Wer Bewegung abbestellt hat, sieht die Linie sofort in voller Länge. Die Regel muss hier stehen und darf nicht der aus reveal.css überlassen werden — eine Media Query erhöht die Spezifität nicht, und die Regeln oben (0,4,1) schlügen sie sonst. */ @media (prefers-reduced-motion: reduce) { html.ag-anim-ready .ag-divider[data-ag-anim="reveal"], html.ag-anim-ready .ag-divider[data-ag-anim="reveal"]:not(.is-inview), html.ag-anim-ready .ag-divider--vertikal[data-ag-anim="reveal"], html.ag-anim-ready .ag-divider--vertikal[data-ag-anim="reveal"]:not(.is-inview) { transition: none; transform: none; opacity: 1; } } /* ── Innenabstand steuerbar (3.88.0) ───────────────────────────────────── Entscheidung Vincent, 24.08.2026: Der Innenabstand soll bei jedem Widget am Control liegen, nicht nur der Außenabstand. Dieses Widget führt im Design kein Blockpolster — die Vorgabe ist deshalb 0, und die Regel wird erst wirksam, wenn jemand am Control etwas wählt. Steht bewusst am Dateiende: gleiche Spezifität wie die Regeln oben, die spätere gewinnt. Nur oben und unten; seitlich begrenzt die Content-Breite. */ .ag-divider { padding-block: var(--ag-divider-pad-oben, 0px) var(--ag-divider-pad-unten, 0px); }