/** * agenic Komponenten-CSS – Highlight-Box (Molekül, Bereich Inhalt). * * Quelle: Figma Set `highlight-box` (1188:3798, Seite 0.5 → 03 · Molecules), * v2 frisch gemessen 23.09.2026 — 42 Varianten: * Desktop Breite 1200 (Values/Sizes&Breakpoints/Content), Padding 40 rundum * (Values/spacing/xl, gebunden), Radius 24 (Values/radius/l), * copy Text Style Digital/General/Copy/L (24/32 Light), * Textbreite fix 1000, Abstand label → copy 8 (Values/spacing/s) * Mobil Breite 343, Padding 24 (Values/spacing/ml) / 16 (Layout/padding/mobile) * Fläche light (Standard) · keine · lightest · medium · dark · black · gradient * — Karten-Leiter ag_card_flaechen(); dunkle Flächen mit Text/inverse; * gradient trägt eine Ebene `scrim` (Interaction/contrast-scrim) * Akzent keine · links · unten — Ebene `rule`, Kontur Surface/brand in * Values/border/m (4), Muster `blockquote`; auf gradient keine * Label Text Style Digital/General/Copy/M (16/21), Text/standard * * Kontrast Text/standard #18181e auf Surface/light #dae5e6, gemessen * 08.09.2026: 13,74 : 1 — WCAG 1.4.3 AA und AAA. Text/inverse auf dem * Verlauf (Textzone, nur Hintergrund): ohne Scrim min 3,88 : 1 (Label 16 px * fällt durch), mit Scrim 40 % min 8,02 : 1 — gemessen 23.09.2026, * Entscheidung Vincent 23.09.2026. * * Markup-Partial: includes/render-highlight-box.php. * Kontrakt: claude/kontrakt-ag-highlight-box.md v2.1 (Bild nur im Widget). * * Ein tmp-Wert bleibt: die feste Textbreite 1000 der Quelle (F-HB-2 alt). * Die früheren tmp-Werte 48 (Padding) und 22/32 (Typo) sind mit v2 in der * Quelle gebunden (spacing/xl, Copy/L) und damit erledigt. */ .ag-highlight-box, .ag-highlight-box * { box-sizing: border-box; } .ag-highlight-box { /* L3 mit L2-Defaults — Default = Fläche light, Akzent keine, Grund hell */ --ag-highlight-box-bg: var(--color-surface-light); /* Figma Surface/light */ --ag-highlight-box-fg: var(--color-text-standard); /* Figma Text/standard */ --ag-highlight-box-label-fg: var(--color-text-standard); /* Figma Text/standard */ --ag-highlight-box-akzent: transparent; /* Leiste: Surface/brand, wenn Akzent gesetzt */ --ag-highlight-box-akzent-breite: var(--border-width-m); /* Figma Values/border/m = 4 */ --ag-highlight-box-radius: var(--radius-l); /* Figma Values/radius/l = 24 */ --ag-highlight-box-pad-y: var(--spacing-xl); /* Figma Values/spacing/xl = 40 */ --ag-highlight-box-pad-x: var(--spacing-xl); /* Figma Values/spacing/xl = 40 */ --ag-highlight-box-gap: var(--spacing-s); /* Figma Values/spacing/s = 8, label → copy */ --ag-highlight-box-fs: var(--fs-600); /* Copy/L 24 */ --ag-highlight-box-lh: calc(32 / 24); /* Copy/L 32 */ --ag-highlight-box-fw: var(--fw-light); /* Copy/L Inter Light */ --ag-highlight-box-label-fs: var(--fs-300); /* Copy/M 16 */ --ag-highlight-box-label-lh: calc(21 / 16); /* Copy/M 21 */ --ag-highlight-box-zeile: 1000px; /* tmp — feste Textbreite der Quelle, Zeilenlängenbegrenzung */ --ag-highlight-box-absatz-gap: var(--spacing-m); /* Absatzabstand innerhalb des WYSIWYG */ --ag-highlight-box-space-before: 0px; /* Control „Abstand davor" */ --ag-highlight-box-space-after: 0px; /* Control „Abstand danach" */ position: relative; /* Bezug für die Leiste */ overflow: hidden; /* Leiste folgt der Rundung (Quelle: clipsContent) */ display: flex; flex-direction: column; gap: var(--ag-highlight-box-gap); width: 100%; max-width: var(--content-width, 1200px); /* Figma Sizes&Breakpoints/Content */ margin-block-start: var(--ag-highlight-box-space-before); margin-block-end: var(--ag-highlight-box-space-after); margin-inline: auto; padding: var(--ag-highlight-box-pad-oben, var(--ag-highlight-box-pad-y)) var(--ag-highlight-box-pad-x) var(--ag-highlight-box-pad-unten, var(--ag-highlight-box-pad-y)); background: var(--ag-highlight-box-bg); border-radius: var(--ag-highlight-box-radius); color: var(--ag-highlight-box-fg); font-family: var(--font-sans); } /* Leiste — eigene Ebene `rule` der Quelle, als ::before (::after bleibt Elementor vorbehalten). Kontur innen, deshalb kein Layout-Einfluss. */ .ag-highlight-box::before { content: ""; position: absolute; inset: 0 auto 0 0; inline-size: var(--ag-highlight-box-akzent-breite); background: var(--ag-highlight-box-akzent); pointer-events: none; } .ag-highlight-box--akzent-links, .ag-highlight-box--akzent-unten { --ag-highlight-box-akzent: var(--color-surface-brand); /* Figma Surface/brand */ } .ag-highlight-box--akzent-unten::before { inset: auto 0 0 0; inline-size: auto; block-size: var(--ag-highlight-box-akzent-breite); } .ag-highlight-box--akzent-keine::before, .ag-highlight-box--flaeche-gradient::before { display: none; /* Quelle: auf gradient keine Leiste */ } .ag-highlight-box__label { margin: 0; font-size: var(--ag-highlight-box-label-fs); line-height: var(--ag-highlight-box-label-lh); font-weight: var(--fw-regular); color: var(--ag-highlight-box-label-fg); } .ag-highlight-box__copy { max-width: var(--ag-highlight-box-zeile); font-size: var(--ag-highlight-box-fs); line-height: var(--ag-highlight-box-lh); font-weight: var(--ag-highlight-box-fw); letter-spacing: -0.02em; /* Copy/L −2 % (wie accordion-text-panel) */ } /* Der WYSIWYG darf mehrere Absätze liefern. Erster und letzter tragen keinen Außenabstand, damit das Polster der Box exakt das Quellmaß bleibt. */ .ag-highlight-box__copy > * { margin-block: 0 var(--ag-highlight-box-absatz-gap); } .ag-highlight-box__copy > :last-child { margin-block-end: 0; } /* ── Bild (v2.1, 25.09.2026) ─────────────────────────────────────────── Auftrag Vincent 25.09.2026, Entscheidung „Nur Widget“: Die Figma-Quelle führt KEIN Bild — bewusste Abweichung, Rückspielpunkt auf 0.8. Nur mit `--mit-bild` aktiv; ohne Bild bleibt alles wie v2.0. Text links, Bild rechts (Vorlage: Screenshot Vincent), mobil darunter. Desktop: Das Bild füllt die ganze Höhe der Textspalte (Auftrag Vincent 25.09.2026, 10.27.0) — die Textspalte bestimmt die Höhe, das Bild schneidet per object-fit zu. Mobil hat es keine Nachbarspalte und steht im Seitenverhältnis. Spaltenverhältnis, Mindesthöhe und Seitenverhältnis haben keine Quelle → tmp. */ .ag-highlight-box--mit-bild { --ag-highlight-box-spalten: minmax(0, 3fr) minmax(0, 2fr); /* tmp — Verhältnis aus dem Screenshot, ca. 60/40 */ --ag-highlight-box-spalten-gap: var(--spacing-xxl); /* Figma Values/spacing/xxl = 64, wie media-text */ --ag-highlight-box-bild-radius: var(--radius-m); /* Figma Values/radius/m, wie media-text */ --ag-highlight-box-bild-ratio: 4 / 3; /* tmp — Seitenverhältnis mobil, aus dem Screenshot */ --ag-highlight-box-bild-min-h: 240px; /* tmp — Mindesthöhe Desktop bei sehr kurzem Text */ --ag-highlight-box-bild-bg: var(--color-surface-lightest); /* Figma Surface/lightest — Grund, solange das Bild lädt */ --ag-highlight-box-media-fit: cover; /* Einfügemodus (object-fit), Figma „Fill" */ --ag-highlight-box-media-position: center; /* Ausrichtung (object-position) */ display: grid; grid-template-columns: var(--ag-highlight-box-spalten); align-items: stretch; /* Bild streckt sich auf die Höhe der Textspalte */ column-gap: var(--ag-highlight-box-spalten-gap); } .ag-highlight-box__text { display: flex; flex-direction: column; gap: var(--ag-highlight-box-gap); min-width: 0; } .ag-highlight-box__medium { position: relative; margin: 0; min-height: var(--ag-highlight-box-bild-min-h); overflow: hidden; border-radius: var(--ag-highlight-box-bild-radius); background: var(--ag-highlight-box-bild-bg); } /* Blockname vorangestellt wegen `.elementor img { height: auto }` (0,1,1) — Muster media-text.css / card.css. */ .ag-highlight-box .ag-highlight-box__bild { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; border-radius: 0; object-fit: var(--ag-highlight-box-media-fit, cover); object-position: var(--ag-highlight-box-media-position, center); } /* ── Grund (theme) — wirkt nur, wenn die Box selbst keine Fläche trägt ───── */ .ag-highlight-box--dunkel.ag-highlight-box--flaeche-keine { --ag-highlight-box-fg: var(--color-text-inverse-soft); /* Figma Text/inverse */ --ag-highlight-box-label-fg: var(--color-text-inverse-soft); } /* ── Fläche — Karten-Leiter, Reihenfolge wie ag_card_flaechen() ──────────── Der Flächenblock steht NACH dem Grund-Block: gleiche Spezifität, spätere Regel gewinnt (Muster link-tile-grid, 07.09.2026). */ .ag-highlight-box--flaeche-keine { --ag-highlight-box-bg: transparent; } .ag-highlight-box--flaeche-lightest { --ag-highlight-box-bg: var(--color-surface-lightest); /* Figma Surface/lightest */ } .ag-highlight-box--flaeche-light { --ag-highlight-box-bg: var(--color-surface-light); /* Figma Surface/light */ } .ag-highlight-box--flaeche-medium { --ag-highlight-box-bg: var(--color-surface-medium); /* Figma Surface/medium — Text bleibt Text/standard, nie Text/grey (stats-band 17.09.) */ } .ag-highlight-box--flaeche-dark { --ag-highlight-box-bg: var(--color-surface-dark); /* Figma Surface/dark */ --ag-highlight-box-fg: var(--color-text-inverse-soft); /* Figma Text/inverse */ --ag-highlight-box-label-fg: var(--color-text-inverse-soft); } .ag-highlight-box--flaeche-black { --ag-highlight-box-bg: var(--color-surface-darkest); /* Figma Surface/darkest */ --ag-highlight-box-fg: var(--color-text-inverse-soft); --ag-highlight-box-label-fg: var(--color-text-inverse-soft); } /* gradient: Verlauf ist ein background-image — Elementors Lazy-Load blendet background-image unterhalb des Folds aus; der Sektions-Container braucht `e-no-lazyload` (F-LG-2, 07.09.2026). */ /* ── Farbwelt über der Fläche (Entscheidung Vincent, 25.09.2026) ───────── Zweiter Regler `farbwelt` neben der Fläche — wie ag_card (card.css): Tiefenlage über light, lightest oder darkest (`black`). Ersetzt die Flächen fusion/erp/crm aus 10.39.0; Altwerte löst ag_card_flaeche_teilen() zu light + Farbwelt auf. Projekt-Doc claude/kartenflaechen-neu-25-09.md. */ .ag-highlight-box--welt-fusion { --ag-welt-lage: var(--gradient-tiefe-diagonal-hell); } .ag-highlight-box--welt-erp { --ag-welt-lage: var(--gradient-tiefe-erp-hell); } .ag-highlight-box--welt-crm { --ag-welt-lage: var(--gradient-tiefe-crm-hell); } .ag-highlight-box--flaeche-light:is(.ag-highlight-box--welt-fusion, .ag-highlight-box--welt-erp, .ag-highlight-box--welt-crm) { --ag-highlight-box-bg: var(--ag-welt-lage), var(--color-surface-light); } .ag-highlight-box--flaeche-lightest:is(.ag-highlight-box--welt-fusion, .ag-highlight-box--welt-erp, .ag-highlight-box--welt-crm) { --ag-highlight-box-bg: var(--ag-welt-lage), var(--color-surface-lightest); } .ag-highlight-box--flaeche-black:is(.ag-highlight-box--welt-fusion, .ag-highlight-box--welt-erp, .ag-highlight-box--welt-crm) { --ag-highlight-box-bg: var(--ag-welt-lage), var(--color-surface-darkest); } .ag-highlight-box--flaeche-gradient { /* Ebene `scrim` der Quelle (Interaction/contrast-scrim, #000 40 %) über dem Verlauf — Muster Primary-Button 11.08.2026. Gemessen 23.09.2026 am Render (Textzone, nur Hintergrund): ohne Scrim min 3,88 : 1 — das Label (16 px) fiele durch —, mit Scrim min 8,02 : 1 (AA und AAA). */ --ag-highlight-box-bg: linear-gradient(var(--color-interaction-contrast-scrim), var(--color-interaction-contrast-scrim)), var(--gradient-fusion-basic-reverse-30); /* Paint Style Fusion | Gradients/fusion-basic--reverse-30 */ --ag-highlight-box-fg: var(--color-text-inverse-soft); --ag-highlight-box-label-fg: var(--color-text-inverse-soft); } /* ── Innenabstand — Leiter S/M/L (Entscheidung Vincent, 17.09.2026) ──────── */ .ag-highlight-box--pad-s { --ag-highlight-box-pad-y: var(--spacing-ml); --ag-highlight-box-pad-x: var(--spacing-ml); } /* 24 */ .ag-highlight-box--pad-m { --ag-highlight-box-pad-y: var(--spacing-l); --ag-highlight-box-pad-x: var(--spacing-l); } /* 32 */ .ag-highlight-box--pad-l { --ag-highlight-box-pad-y: var(--spacing-xxl); --ag-highlight-box-pad-x: var(--spacing-xxl); } /* 64 */ /* ── Mobil ─────────────────────────────────────────────────────────── Quelle `Breakpoint=Mobil`: Padding 24 oben/unten (Values/spacing/ml), 16 seitlich (Layout/padding/mobile). Die Zeilenbreitenbegrenzung entfällt. Die Leiter S/M/L gilt auch mobil (Klassen stehen später und gewinnen). */ @media (max-width: 767px) { .ag-highlight-box { --ag-highlight-box-pad-y: var(--spacing-ml); /* 24 */ --ag-highlight-box-pad-x: var(--spacing-m); /* 16 — Layout/padding/mobile */ --ag-highlight-box-zeile: none; } .ag-highlight-box--mit-bild { grid-template-columns: minmax(0, 1fr); /* mobil: Bild unter dem Text */ row-gap: var(--spacing-ml); /* 24 */ } .ag-highlight-box__medium { min-height: 0; aspect-ratio: var(--ag-highlight-box-bild-ratio); /* mobil keine Nachbarspalte → Seitenverhältnis */ } .ag-highlight-box--pad-s { --ag-highlight-box-pad-y: var(--spacing-ml); --ag-highlight-box-pad-x: var(--spacing-ml); } .ag-highlight-box--pad-m { --ag-highlight-box-pad-y: var(--spacing-l); --ag-highlight-box-pad-x: var(--spacing-l); } .ag-highlight-box--pad-l { --ag-highlight-box-pad-y: var(--spacing-xxl); --ag-highlight-box-pad-x: var(--spacing-xxl); } } /* ── Einblendung ───────────────────────────────────────────────────── Startzustand hängt am JS-Gate `html.ag-anim-ready` — ohne JS bleibt die Box sichtbar. */ html.ag-anim-ready .ag-highlight-box[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-highlight-box[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-highlight-box[data-ag-anim="reveal"], html.ag-anim-ready .ag-highlight-box[data-ag-anim="reveal"]:not(.is-inview) { transition: none; transform: none; opacity: 1; } } /* ── Bild im (Imagify, live) — Muster card.css ───────────── Imagify packt das auf agenic.com in ein und verschiebt die Klasse dorthin; das steht ohne Klasse darin, füllt seinen Rahmen nicht und ignoriert Einpassung/Ausrichtung. Befund QS Vincent, 26.09.2026 („Bild ausfüllen funktioniert mobil nicht"), gemessen live auf /loesungen/microsoft-dynamics-365-crm/: 358 × 250, 358 × 239, object-fit fill. Das füllt jetzt das und erbt Einpassung und Ausrichtung. (0,2,2) schlägt `.elementor img { height: auto }` (0,1,1). */ .ag-highlight-box picture.ag-highlight-box__bild > img { display: block; box-sizing: border-box; width: 100%; height: 100%; max-width: none; margin: 0; padding: 0; border: 0; border-radius: inherit; object-fit: inherit; object-position: inherit; }