/** * agenic Komponenten-CSS – Text-Block (Molekül). * * Figma-Quellen (gemessen 10.08.2026): `text-block` (623:6510) + `text-combo` * (640:4758, Achse Abstand S·M — dokumentierte Abweichung: als WYSIWYG-Inhalt * übersetzt, Kontrakt freigegeben 10.08.2026). * Titel Display/XS 24/32 Light · Gap Titel→Divider spacing/s = 8 * Kopf→Body spacing/l = 32 · Absatz-Gap S = spacing/m 16 · M = spacing/ml 24 * Body Copy/M 16/21 Light · Farben Text/standard ↔ Text/inverse * Markup-Partial: includes/render-text-block.php. * Kontrakt: Projekt-Doc `kontrakte-welle-a-10-08.md`. */ .ag-text-block, .ag-text-block * { box-sizing: border-box; } .ag-text-block { /* L3 mit L2-Defaults */ --ag-text-block-fg: var(--color-text-standard); /* Figma Text/standard */ --ag-text-block-gap: var(--spacing-l); /* Kopf → Body = 32 */ --ag-text-block-title-gap: var(--spacing-s); /* Kopf-Gap = 8 */ --ag-text-block-divider-gap: var(--spacing-m); /* Zusatz unter dem Strich = 16, wie titlekombinationen (Vincent 17.09.2026) */ --ag-text-block-para-gap: var(--spacing-m); /* Absatzabstand S = 16 */ --ag-text-block-space-before: 0px; /* Control „Abstand davor" */ --ag-text-block-space-after: 0px; /* Control „Abstand danach" */ display: flex; flex-direction: column; gap: var(--ag-text-block-gap); margin-block-start: var(--ag-text-block-space-before); margin-block-end: var(--ag-text-block-space-after); color: var(--ag-text-block-fg); font-family: var(--font-sans); } .ag-text-block--abstand-m { --ag-text-block-para-gap: var(--spacing-ml); /* Absatzabstand M = 24 */ } /* Textgröße — Figma `text` (387:1693), Achse Größe, Typ=Copy, gemessen 11.08.2026. Feedback Vincent Punkt 4. Default `m` entspricht dem bisherigen Festwert. */ .ag-text-block--gr-xs { --ag-text-block-fs: var(--fs-100); --ag-text-block-lh: calc(16 / 12); } .ag-text-block--gr-s { --ag-text-block-fs: var(--fs-200); --ag-text-block-lh: calc(19 / 14); } .ag-text-block--gr-m { --ag-text-block-fs: var(--fs-300); --ag-text-block-lh: calc(21 / 16); } .ag-text-block--gr-l { --ag-text-block-fs: var(--fs-600); --ag-text-block-lh: calc(32 / 24); } .ag-text-block--gr-xl { --ag-text-block-fs: var(--fs-700); --ag-text-block-lh: calc(40 / 32); } .ag-text-block--dunkel { --ag-text-block-fg: var(--color-text-inverse-soft); /* Figma Text/inverse */ } /* ── Kopf: Titel + Divider ───────────────────────────────────── */ /* Kopf schrumpft auf die Titelbreite, damit der Strich über dem Titel nur so weit geht wie der Titel (Entscheidung Vincent, 08.09.2026 — dieselbe Regel wie beim Kopf-Strich der titlekombinationen). Der Body bleibt unberuehrt und laeuft weiter ueber die volle Spaltenbreite. */ .ag-text-block__head { display: flex; flex-direction: column; gap: var(--ag-text-block-title-gap); width: fit-content; max-width: 100%; } .ag-text-block__title { margin: 0; color: inherit; font-family: var(--font-sans); /* Stufe panel-24, überschreibbar durch den Control „Stufe des Titels". */ font-size: var(--ag-text-block-title-fs, var(--ag-titel-panel-24-fs)); line-height: var(--ag-text-block-title-lh, var(--ag-titel-panel-24-lh)); font-weight: var(--ag-text-block-title-fw, var(--ag-titel-panel-24-fw)); letter-spacing: -0.02em; } /* Strich über dem Titel (Entscheidung Vincent, 21.09.2026). Abstand zum Titel = Kopf-Gap 8 + 16 = 24. Gesetzt wird die Variable des Atoms, nicht `margin`: divider.css deklariert die Margin im Doppelklassen-Block (0,2,0) — gleiches Verfahren wie `.ag-titlekombinationen__divider`. */ .ag-text-block .ag-text-block__divider.ag-divider { --ag-divider-space-after: var(--ag-text-block-divider-gap); } /* ── Body (WYSIWYG-Inhalt, Copy/M) ───────────────────────────── */ .ag-text-block__body { display: flex; flex-direction: column; gap: var(--ag-text-block-para-gap); font-size: var(--ag-text-block-fs, var(--fs-300)); /* Copy-Stufe aus dem Control */ line-height: var(--ag-text-block-lh, calc(21 / 16)); font-weight: var(--fw-light); letter-spacing: -0.02em; } .ag-text-block__body > * { margin: 0; /* Abstand kommt aus dem Gap */ } /* Listen im Fließtext: zentrale Regel in hello-elementor-child/assets/base.css (Entscheidung Vincent, 25.09.2026). Hier nur, was das Widget abweichend braucht. */ /* Links im Fließtext gegen Kit-/Theme-Linkfarben absichern (Doppelklasse). */ .ag-text-block .ag-text-block__body a, .ag-text-block .ag-text-block__body a:hover, .ag-text-block .ag-text-block__body a:focus, .ag-text-block .ag-text-block__body a:visited { color: var(--color-text-link); /* Figma Text/link */ } .ag-text-block--dunkel .ag-text-block__body a, .ag-text-block--dunkel .ag-text-block__body a:hover, .ag-text-block--dunkel .ag-text-block__body a:focus, .ag-text-block--dunkel .ag-text-block__body a:visited { color: var(--color-text-inverse-soft); /* dunkle Fläche: heller Link */ } /* ── Einblendung (0.7-Standardmuster; Gate nur mit JS) ───────── */ html.ag-anim-ready .ag-text-block[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-text-block[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-text-block[data-ag-anim="reveal"], html.ag-anim-ready .ag-text-block[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-text-block { padding-block: var(--ag-text-block-pad-oben, 0px) var(--ag-text-block-pad-unten, 0px); } /* ── Textbreite in Rasterspalten (Control `textbreite`, 7.9.0) ───────────── Entscheidung Vincent, 21.09.2026 (Option 1). Die Klasse `ag-textbreite--N` sitzt per prefix_class auf dem Elementor-Wrapper. Rasterrechnung wie in titel-breite.css (Figma `0.4 · Grids`, `shelf/spaltenraster` 930:23075): Rinne spacing/ml = 24, Spalte = (100 % − 11 Rinnen) / 12 = 78 bei 1200. 100 % ist die Breite des Wrappers — bei `ag-breite--container` also 1200. Kein margin-inline: auto — der Block bleibt an der Inhaltskante (CD-Regel „kein zentrierter Text", agenic-skill). Unter Tablet volle Breite, weil das Raster dort nur vier Spalten hat. */ @media (min-width: 768px) { /* --bp-md 768, A5-Festschreibung offen (tmp) */ [class*="ag-textbreite--"] .ag-text-block { --ag-text-block-rinne: var(--spacing-ml); /* 24 */ --ag-text-block-spalte: calc((100% - 11 * var(--ag-text-block-rinne)) / 12); max-width: calc(var(--ag-text-block-spalte) * var(--ag-text-block-spalten, 12) + (var(--ag-text-block-spalten, 12) - 1) * var(--ag-text-block-rinne)); } .ag-textbreite--4 .ag-text-block { --ag-text-block-spalten: 4; } .ag-textbreite--5 .ag-text-block { --ag-text-block-spalten: 5; } .ag-textbreite--6 .ag-text-block { --ag-text-block-spalten: 6; } .ag-textbreite--7 .ag-text-block { --ag-text-block-spalten: 7; } .ag-textbreite--8 .ag-text-block { --ag-text-block-spalten: 8; } .ag-textbreite--9 .ag-text-block { --ag-text-block-spalten: 9; } .ag-textbreite--10 .ag-text-block { --ag-text-block-spalten: 10; } .ag-textbreite--11 .ag-text-block { --ag-text-block-spalten: 11; } .ag-textbreite--12 .ag-text-block { --ag-text-block-spalten: 12; } }