/** * agenic Komponenten-CSS — Card-Grid (Sektions-Widget). * Quelle: Figma `card-grid` (1785:34259, gemessen 11.08.2026). * Fläche Surface/lightest · VERTICAL gap 64 (xxl) · Padding 120/120/128/120 → * oben auf 3xl (128) gerundet, unten 3xl; Raster GRID 3×2, gap 24/24 (ml). * Mobil: 1 Spalte, Sektions-gap 32 (l), Polster 16 (m). * Kontrakt: kontrakte-sektions-widgets-11-08 (B2). * * Nachtrag 28.08.2026 (Auftrag Vincent, Figma-Quelle nachgezogen): Desktop- * Raster jetzt serienmäßig 4 Spalten (Set 1785:34259, gemessen 28.08.2026), * plus Achse Fläche = lightest/light/darkest am Sektions-Hintergrund. */ .ag-card-grid, .ag-card-grid * { box-sizing: border-box; } .ag-card-grid { --ag-card-grid-bg: var(--color-surface-lightest); /* Default/Fallback = lightest */ --ag-card-grid-gap: var(--spacing-xxl); /* Quelle: 64 */ --ag-card-grid-raster-gap: var(--spacing-ml); /* Quelle: 24/24 */ --ag-card-grid-scroll-maske: var(--spacing-xxl); /* 64 — Verlaufsabschluss rechts */ --ag-card-grid-scroll-fuss: var(--spacing-ms); /* 12 — Luft für die Scrollleiste */ --ag-card-grid-scroll-breite-mobil: 288px; /* Mobil-Sollwert, breakpoint-varianten.md — kein Token dafür (tmp) */ --ag-card-grid-radius: var(--radius-l); /* Figma Values/radius/l = 24 */ --ag-card-grid-space-before: 0px; --ag-card-grid-space-after: 0px; position: relative; background: var(--ag-card-grid-bg); /* Untere Rundung, nachgetragen 18.08.2026. Sie fehlte seit dem Bau am 11.08.2026 — nicht erst mit der cta-Variante: Gemessen führen BEIDE Sets (card-grid 1785:34259 und card-grid--cta 1863:34949) in beiden Breakpoints `bottomRadius` gebunden an Values/radius/l. Oben bleibt eckig (0/0), damit die Sektion darüber bündig anschließt — Full-Bleed-Regel: die Rundung liegt am Seitenrand, nicht am Container. */ border-radius: 0 0 var(--ag-card-grid-radius) var(--ag-card-grid-radius); margin-block-start: var(--ag-card-grid-space-before); margin-block-end: var(--ag-card-grid-space-after); font-family: var(--font-sans); } /* Hintergrundfläche (Auftrag Vincent, 28.08.2026) — Figma-Quelle card-grid (1785:34259) führt die Achse Fläche = lightest/light/darkest. `--lightest` braucht keine eigene Regel, sie ist der Wert der Basisklasse oben. */ .ag-card-grid--light { --ag-card-grid-bg: var(--color-surface-light); } .ag-card-grid--darkest { --ag-card-grid-bg: var(--gradient-surface-darkest-tiefe); } /* Tiefenfläche, 25.09.2026 */ /* Lesbarkeit von Einleitung/Fußnote auf dunkler Fläche — gekoppelt an „Titel: Theme = Dunkel", dieselbe Achse, die die Titelkombination bereits selbst nutzt (titlekombinationen.css, --ag-titlekombinationen-fg). Ohne diese Kopplung würde dunkler Text auf Surface/darkest verschwinden. */ .ag-card-grid--theme-dunkel .ag-card-grid__copy, .ag-card-grid--theme-dunkel .ag-card-grid__note-eyebrow, .ag-card-grid--theme-dunkel .ag-card-grid__note-copy { color: var(--color-text-inverse-soft); /* Figma Text/inverse */ } .ag-card-grid__inner { display: flex; flex-direction: column; gap: var(--ag-card-grid-gap); padding: var(--ag-card-grid-pad-oben, var(--spacing-xxl)) max(var(--spacing-ml), calc((100% - var(--content-width, 1200px)) / 2)) var(--ag-card-grid-pad-unten, var(--ag-luft-sektion-fuss)); } /* Strecken ist seit 5.0.0 kein Control mehr, sondern das feste Verhalten des Rasters (Auftrag Vincent, 17.09.2026). Die frueheren Regeln unter `.ag-card-grid--strecken` waren wirkungslos: Die unbedingte Regel weiter unten (`> .ag-card { height: 100% }`) streckt ohnehin jede Karte, und `align-items: stretch` ist im Grid der Vorgabewert. */ .ag-card-grid__container { display: grid; gap: var(--ag-card-grid-raster-gap); grid-template-columns: repeat(var(--ag-card-grid-spalten, 3), minmax(0, 1fr)); } .ag-card-grid__container--4 { --ag-card-grid-spalten: 4; } .ag-card-grid__container--3 { --ag-card-grid-spalten: 3; } .ag-card-grid__container--2 { --ag-card-grid-spalten: 2; } .ag-card-grid__container--1 { --ag-card-grid-spalten: 1; } /* Spannweite je Karte (Auftrag Vincent, 07.09.2026). Die Rasterzelle ist die `.ag-glow-huelle` um die Karte — deshalb liegt die Klasse dort und der Selektor greift auf das direkte Kind des Containers. ACHTUNG, gemessen 07.09.2026 (Chromium, Playwright): CSS Grid kappt einen `span` NICHT auf die Zahl der Spalten. Verlangt eine Zelle mehr Spalten als das Raster hat, legt der Browser eine implizite Zusatzspalte der Breite 0 an — samt Rasterabstand davor. Im 3er-Raster schrumpfte dadurch JEDE Karte von 384 auf 376 und rechts blieb eine tote Luecke von 24. Deshalb wird die Spannweite hier ausdruecklich gekappt: Wer mehr Spalten verlangt, als das Raster hat, bekommt die volle Zeile (`1 / -1`) — nie einen zu grossen `span`. Aus demselben Grund ist "4 Spalten" grundsaetzlich `1 / -1` und nicht `span 4`. ABWEICHUNG von der Quelle `card-grid` (1785:34259) — dort ist keine gespannte Karte gezeigt; Rueckspielpunkt auf 0.8 Sektion 02. */ .ag-card-grid__container > .ag-card-grid__zelle--span-2 { grid-column: span 2; } .ag-card-grid__container > .ag-card-grid__zelle--span-3 { grid-column: span 3; } .ag-card-grid__container > .ag-card-grid__zelle--span-4 { grid-column: 1 / -1; } /* Kappung Desktop: Spannweite >= Spaltenzahl des Rasters = volle Zeile. */ .ag-card-grid__container--3 > .ag-card-grid__zelle--span-3, .ag-card-grid__container--2 > .ag-card-grid__zelle--span-2, .ag-card-grid__container--2 > .ag-card-grid__zelle--span-3, .ag-card-grid__container--1 > .ag-card-grid__zelle--span-2, .ag-card-grid__container--1 > .ag-card-grid__zelle--span-3 { grid-column: 1 / -1; } /* Mindesthöhe der Karten abschalten (Auftrag Vincent, 09.09.2026). `--ag-card-min-hoehe` steht in card.css auf 300 (dort als ABWEICHUNG von der Quelle dokumentiert, 24.08.2026). Hier wird sie je Raster auf 0 gesetzt — Doppelklasse (0,2,0) schlägt die Definition auf `.ag-card` (0,1,0), kein `!important` nötig. Zusammen mit dem festen Strecken ergibt das „hug auf die höchste Karte der Zeile": die Zelle misst sich am höchsten Inhalt, alle Karten füllen sie über `height: 100%` (Regel unten). */ .ag-card-grid--min-hoehe-aus .ag-card { --ag-card-min-hoehe: 0px; } /* Karten füllen ihre Rasterzelle auf gleiche Höhe (Quelle: 384×314 je Zelle). Seit 3.66.0 steckt jede Karte in `.ag-glow-huelle` (Fusions-Schein), die Zelle ist also die Hülle — deshalb die zweite Zeile. Ohne sie schrumpfen Karten im Raster auf ihre Inhaltshöhe zurück. */ .ag-card-grid__container > .ag-card, .ag-card-grid__container > * > .ag-card { height: 100%; } /* ── Anordnung: seitlich scrollbare Reihe ───────────────────────── Auftrag Vincent, 20.09.2026 · Bauweg A entschieden 26.09.2026. KEINE Figma-Quelle: `card-grid` (1785:34259) führt weder eine Anordnungs- noch eine Spalten-Achse — Rückspielpunkt auf 0.8, dieselbe Art Abweichung wie F4 bei process-chain (19.08.2026). Das Muster ist wörtlich aus `process-chain.css` übernommen: der Container ist selbst der Scrollbereich, ein Verlaufsabschluss rechts zeigt, dass es weitergeht, und `ist-am-ende` (JS) schaltet ihn am Ende ab, damit die letzte Karte nicht verblasst. Die Kartenbreite rechnet sich aus `--ag-card-grid-spalten`, damit Raster und Reihe dieselben Sollwerte teilen — bei Inhalt 1200: 4 → 282, 3 → 384, 2 → 588, 1 → 1200. Kein eigener Breitenwert. */ .ag-card-grid__container--scroll { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; /* Der Fusions-Schein der Karten ragt 44 px über ihre Hülle hinaus (`--ag-glow-ueberstand`, interaktion.css), und ein Scrollbereich klippt in BEIDEN Achsen — ohne Polster wäre er rundum abgeschnitten. Die Luft folgt deshalb dem globalen Glow-Schalter `--ag-glow-an` (Agenic Design → Glow → Schein): steht er auf 0, ist die Luft 0 und die Reihe sitzt bündig; steht er auf 1, kommen die 44 px automatisch zurück. Anlass (Vincent, 27.09.2026): Der Schein ist global ausgeschaltet — live auf agenic.com gemessen `--ag-glow-an: 0`, Deckkraft 0 —, aber die 41 Schein-Elemente stecken weiter im DOM mit `inset: -44px`. Ein festes Polster hätte Platz für etwas Unsichtbares reserviert. Polster und negatives Margin heben sich auf, die Content-Box bleibt 1200. `scroll-padding-inline` sorgt dafür, dass Snap an der Polsterkante greift statt das Polster wegzuscrollen. Unten kommt die Luft für die Scrollleiste dazu. */ --ag-card-grid-scroll-luft: calc(var(--ag-glow-ueberstand, 0px) * var(--ag-glow-an, 1)); padding: var(--ag-card-grid-scroll-luft); padding-bottom: calc(var(--ag-card-grid-scroll-luft) + var(--ag-card-grid-scroll-fuss)); margin: calc(-1 * var(--ag-card-grid-scroll-luft)); scroll-padding-inline: var(--ag-card-grid-scroll-luft); /* Verlaufsabschluss an BEIDEN Rändern (links seit 28.09.2026, Auftrag Vincent: „Fade-Effekt links ergänzen, wenn gescrollt"). Eine Maske, vier Stellschrauben: Breite und Endfarbe je Seite. Die Ausgangslage — ohne JavaScript und ganz am Anfang — ist links deckend ohne Verlauf, rechts Verlauf: genau das Bild bis 10.68.0. `card-grid.js` setzt `ist-gescrollt` (links an) und `ist-am-ende` (rechts aus). Die Maske ist um die Luft versetzt — sonst läge der Abschluss 44 px zu weit innen. `#000` steht nur einmal, als L3 (Maskenwert „deckend", kein Farbwert — dieselbe Ausnahme wie in process-chain.css). */ --ag-card-grid-scroll-deckend: #000; --ag-card-grid-scroll-links: 0px; --ag-card-grid-scroll-links-ende: var(--ag-card-grid-scroll-deckend); --ag-card-grid-scroll-rechts: var(--ag-card-grid-scroll-maske); --ag-card-grid-scroll-rechts-ende: transparent; --ag-card-grid-scroll-verlauf: linear-gradient(to right, var(--ag-card-grid-scroll-links-ende) 0, var(--ag-card-grid-scroll-links-ende) var(--ag-card-grid-scroll-luft), var(--ag-card-grid-scroll-deckend) calc(var(--ag-card-grid-scroll-luft) + var(--ag-card-grid-scroll-links)), var(--ag-card-grid-scroll-deckend) calc(100% - var(--ag-card-grid-scroll-luft) - var(--ag-card-grid-scroll-rechts)), var(--ag-card-grid-scroll-rechts-ende) calc(100% - var(--ag-card-grid-scroll-luft)), var(--ag-card-grid-scroll-rechts-ende) 100%); mask-image: var(--ag-card-grid-scroll-verlauf); -webkit-mask-image: var(--ag-card-grid-scroll-verlauf); } /* Weggescrollt vom Anfang: links blendet die Reihe aus — man sieht, dass davor noch Karten liegen. Setzt `card-grid.js`. */ .ag-card-grid__container--scroll.ist-gescrollt { --ag-card-grid-scroll-links: var(--ag-card-grid-scroll-maske); --ag-card-grid-scroll-links-ende: transparent; } /* Am Ende der Reihe den Abschluss rechts abschalten — sonst verblasst die Karte, die gerade gelesen wird. Setzt `card-grid.js`. */ .ag-card-grid__container--scroll.ist-am-ende { --ag-card-grid-scroll-rechts: 0px; --ag-card-grid-scroll-rechts-ende: var(--ag-card-grid-scroll-deckend); } /* Direktes Kind ist `.ag-glow-huelle`, nicht `.ag-card` (seit 3.66.0) — deshalb `> *` statt `> .ag-card`. `flex: 0 0` hält die Breite; ohne sie quetscht der Scrollbereich die Karten auf die Viewportbreite. */ .ag-card-grid__container--scroll > * { /* Einzeilig (Regel 9, WP-Rocket-Minifier): über mehrere Zeilen streicht der Minifier die Leerzeichen um `-`/`*` und macht calc() ungültig — ausgeloggt verlöre die Reihe ihre Kartenbreite. Fix 28.09.2026. */ flex: 0 0 calc((100% - (var(--ag-card-grid-spalten, 4) - 1) * var(--ag-card-grid-raster-gap)) / var(--ag-card-grid-spalten, 4)); scroll-snap-align: start; /* Gleiche Höhe für alle Karten der Reihe — der eigentliche Gewinn gegenüber dem Raster. Die Hülle trägt aus interaktion.css ein `height: 100%`; im Flex-Kontext löst das gegen die auto-Höhe des Containers auf und verhindert das Strecken. Gemessen 27.09.2026: ohne diese zwei Zeilen stand die erste Karte auf 348 und der Rest auf der Mindesthöhe 300. Mit ihnen füllen alle die höchste Karte; `.ag-card { height: 100% }` (Regel oben) reicht das durch. */ height: auto; align-self: stretch; } /* Sprung per Tag (28.09.2026): Die Zielkarte steht in der Mitte. Sie bekommt dafür vorübergehend einen Rastpunkt in der Mitte, sonst zöge `scroll-snap` sie bei gerader Spaltenzahl auf den nächsten Kartenanfang. Setzt und entfernt `card-grid.js`. */ .ag-card-grid__container--scroll > .ist-sprungziel { scroll-snap-align: center; } /* Spannweiten haben in der Reihe keine Bedeutung — `grid-column` wirkt im Flex-Kontext nicht. ABWEICHUNG, im Regal-Text auf 0.8 vermerkt. */ /* Unter der Tablet-Stufe wird das Raster ohnehin ein- bis zweispaltig; die Reihe behält dort den Mobil-Sollwert 288 (breakpoint-varianten). */ @media (max-width: 1023px) { .ag-card-grid__container--scroll > * { flex-basis: var(--ag-card-grid-scroll-breite-mobil); } } /* ── Navigation und Quicklinks der Reihe (Auftrag Vincent, 28.09.2026) ── Schalter `scroll_navigation`, nur bei Anordnung „Seitlich scrollbar". KEINE Figma-Quelle — Rückspielpunkt auf 0.8. Über der Reihe: die Kartentitel als Tags (Atom ag_tag, Rolle Knopf, Farbe Neutral). Abstand zwischen den Tags 12 wie in `tag-group` (949:13209, Spalten- und Zeilenabstand spacing/ms). Unter der Reihe: zwei Pfeilknöpfe, 40 × 40, Radius max — Maß und Form des icon-button der Quelle (2710:35248), wie in header.css. Handgebaut, weil es das Atom im Code noch nicht gibt (TMP, Entscheidung Vincent, 28.09.2026). Innenkontur und Farben wie der Tag, damit beide Bedien- elemente der Reihe gleich aussehen. Tags, Reihe und Pfeile stehen in einer eigenen Hülle mit 16 Abstand (kleinste Stufe der Luft-Leiter 64/32/16) — sonst trennte sie der Sektionsabstand 64 voneinander. */ .ag-card-grid__reihe { --ag-card-grid-reihe-gap: var(--spacing-m); /* 16 */ --ag-card-grid-quicklinks-gap: var(--spacing-ms); /* 12 — wie tag-group */ --ag-card-grid-pfeil-feld: var(--spacing-xl); /* 40 — icon-button der Quelle, wie header.css */ --ag-card-grid-pfeil-gap: var(--spacing-s); /* 8 — wie ag-pagination */ --ag-card-grid-pfeil-fg: var(--color-icon-border); /* Figma Icon/border */ --ag-card-grid-pfeil-kontur: var(--color-border-soft); /* Figma Border--subtle, wie ag-tag */ --ag-card-grid-pfeil-kontur-hover: var(--color-border); /* Figma Border */ --ag-card-grid-pfeil-hover: var(--color-surface-light); /* wie ag-pagination */ --ag-card-grid-pfeil-aus: var(--color-text-disabled); /* Figma Text/disabled */ display: flex; flex-direction: column; gap: var(--ag-card-grid-reihe-gap); min-width: 0; } .ag-card-grid--theme-dunkel .ag-card-grid__reihe { --ag-card-grid-pfeil-fg: var(--color-icon-border-inverse); /* Figma Icon/border-inverse */ --ag-card-grid-pfeil-kontur: var(--color-border-inverse); /* Figma Border--inverse */ --ag-card-grid-pfeil-kontur-hover: var(--color-border-inverse); --ag-card-grid-pfeil-hover: var(--color-surface-dark); } .ag-card-grid__quicklinks, .ag-card-grid__navigation { display: flex; flex-wrap: wrap; align-items: center; } .ag-card-grid__quicklinks { gap: var(--ag-card-grid-quicklinks-gap); } /* Tags heben sich vom Grund ab (Auftrag Vincent, 28.09.2026: „Die Tags müssen auf light BG lightest BG haben"). Der Tag Neutral steht auf Surface/light — auf der Sektionsfläche Light verschwände er. Dort deshalb Surface/lightest, wie die Karten-Regel „Karte nie auf der eigenen Fläche" (agenic-skill, 21.09.2026). Nur im Zustand Default; der Aktiv-Zustand behält Surface/brand-strong aus tag.css. Spezifität (0,4,0) schlägt `.ag-tag.ag-tag--neutral` (0,2,0). */ .ag-card-grid--light .ag-card-grid__quicklink.ag-tag--neutral:not(.is-aktiv) { --ag-tag-flaeche: var(--color-surface-lightest); /* Figma Surface/lightest */ } .ag-card-grid__navigation { gap: var(--ag-card-grid-pfeil-gap); } /* Über die Reihe heben: Bei eingeschaltetem Glow trägt die Reihe rundum 44 px Luft mit negativem Margin (`--ag-card-grid-scroll-luft`) und legt sich damit über Tags und Pfeile — sie fängt dann jeden Klick ab. Gemessen 28.09.2026 im statischen Render (Glow an): Pfeil nicht klickbar, „Reihe fängt Zeigerereignisse ab". */ .ag-card-grid__quicklinks, .ag-card-grid__navigation { position: relative; z-index: 1; } /* `display: flex` schlägt sonst das `hidden`-Attribut — die Knöpfe blieben ohne JavaScript sichtbar, aber ohne Wirkung. */ .ag-card-grid__quicklinks[hidden], .ag-card-grid__navigation[hidden] { display: none; } /* Kit-Falle `button` (agenic-figma-zu-widget): `.elementor-kit-7 button` (0,1,1) setzt Verlauf, Fläche, Radius 999, Schrift und Farbe. Der ganze Grundblock steht deshalb auf Doppelklasse (0,2,0). */ .ag-card-grid .ag-card-grid__pfeil { display: inline-flex; align-items: center; justify-content: center; inline-size: var(--ag-card-grid-pfeil-feld); block-size: var(--ag-card-grid-pfeil-feld); margin: 0; padding: 0; border: 0; border-radius: var(--radius-max); /* Figma Values/radius/max */ background-color: transparent; background-image: none; box-shadow: inset 0 0 0 var(--border-width-xs) var(--ag-card-grid-pfeil-kontur); /* Innenkontur wie ag-tag */ color: var(--ag-card-grid-pfeil-fg); font: inherit; line-height: 1; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; } .ag-card-grid .ag-card-grid__pfeil:hover:not(:disabled) { background-color: var(--ag-card-grid-pfeil-hover); box-shadow: inset 0 0 0 var(--border-width-xs) var(--ag-card-grid-pfeil-kontur-hover); } .ag-card-grid .ag-card-grid__pfeil:focus { outline: none; } .ag-card-grid .ag-card-grid__pfeil:focus-visible { outline: var(--border-width-s) solid var(--ag-card-grid-pfeil-kontur-hover); outline-offset: 2px; } .ag-card-grid .ag-card-grid__pfeil:disabled { color: var(--ag-card-grid-pfeil-aus); cursor: default; } .ag-card-grid .ag-card-grid__pfeil-icon { display: block; flex: 0 0 auto; } @media (prefers-reduced-motion: reduce) { .ag-card-grid .ag-card-grid__pfeil { transition: none; } } /* Engeres Kartenpolster bei vier Spalten (Auftrag Vincent, 17.09.2026: „Bei 4 Spalten reduziere Padding der Cards"). Die Karten sind im 4er-Raster nur ~282 breit; 32 Polster je Seite lassen dem Text zu wenig Zeile. Deshalb eine Stufe tiefer auf der Leiter: spacing/l 32 → spacing/ml 24. Nur ab 1024 — darunter wird das Raster zweispaltig (Regel unten) und die Karten tragen wieder ihre 32. `keine` und `bild` sind ausgenommen: Sie stehen bewusst auf Polster 0. Die Redaktions-Controls „Innenabstand oben/unten" überstimmen weiter. ABWEICHUNG VON DER QUELLE: `card-grid` in Figma zeigt kein eigenes Polster für vier Spalten — Rückspielpunkt auf 0.8. */ @media (min-width: 1024px) { .ag-card-grid__container--4 .ag-card:not(.ag-card--keine, .ag-card--bild) { --ag-card-pad: var(--spacing-ml); /* 24 */ } } /* ── Sektionsfuß (3.29.0) ──────────────────────────────────────── Quelle: Figma `card-grid--cta` (Set 1863:34949, gemessen 18.08.2026). Die Variante ergänzt das Basis-Set um eine Einleitung über dem Raster sowie cta-band und note darunter. Alles optional — ohne Inhalt entfällt der jeweilige Block ganz, deshalb sind hier keine Reserveabstände nötig: den Abstand macht das flex-gap des __inner. */ /* Einleitung — Copy/L im schmalen Lesestreifen. Die Quelle bindet Titel UND Einleitung an Values/Sizes&Breakpoints/Content-narrow (800), nicht an die volle Contentbreite. */ .ag-card-grid__copy { margin: 0; max-width: var(--content-width-narrow, 800px); font-size: var(--fs-600); /* Copy/L 24/32 */ line-height: calc(32 / 24); font-weight: var(--fw-light); letter-spacing: -0.02em; color: var(--color-text-standard); /* Figma Text/standard */ } .ag-card-grid__note { display: flex; flex-direction: column; gap: var(--spacing-ms); /* Quelle: 12 */ } .ag-card-grid__note-eyebrow { margin: 0; font-size: var(--fs-500); /* Display/XS 20 */ line-height: calc(32 / 20); font-weight: var(--fw-light); letter-spacing: -0.02em; color: var(--color-text-standard); /* nicht in Versalien (Auftrag Vincent, 20.09.2026) */ } .ag-card-grid__note-copy { margin: 0; max-width: 900px; font-size: var(--fs-600); /* Quelle: Copy/L */ line-height: calc(32 / 24); font-weight: var(--fw-light); letter-spacing: -0.02em; color: var(--color-text-standard); } /* Zwischenstufe — Quelle definiert nur Desktop und Mobil; zwei Spalten sind die dokumentierte Ergänzung für Tablets (--bp-lg 1024). */ @media (max-width: 1023px) { .ag-card-grid__container--4, .ag-card-grid__container--3 { --ag-card-grid-spalten: 2; } /* Ab hier hat jedes Raster hoechstens 2 Spalten — jede Spannweite ist damit die volle Zeile. Gilt auch mobil (1 Spalte) weiter. */ .ag-card-grid__container > .ag-card-grid__zelle--span-2, .ag-card-grid__container > .ag-card-grid__zelle--span-3 { grid-column: 1 / -1; } } /* Mobil — Grenze 768 = --bp-md (Festschreibung A5 offen, tmp). */ @media (max-width: 767px) { .ag-card-grid { --ag-card-grid-gap: var(--spacing-l); /* Quelle Mobil: 32 */ } .ag-card-grid__inner { padding: var(--ag-card-grid-pad-oben, var(--spacing-xxl)) var(--spacing-m) var(--ag-card-grid-pad-unten, var(--ag-luft-sektion-fuss)); } .ag-card-grid__container, .ag-card-grid__container--4, .ag-card-grid__container--3, .ag-card-grid__container--2 { --ag-card-grid-spalten: 1; } } /* ══ Einblendung: gestaffelter Kartenaufbau ════════════════════════════════ Auftrag Vincent, 12.09.2026 (Variante A): „nach DOM-Reihenfolge, 120 ms je Karte, ab der 6. gedeckelt — wie bei ag_step_list." Quelle: Projekt-Doc claude/animations-audit-12-09.md, Befund P1. WARUM ES DIESEN BLOCK BRAUCHT Bis 3.225.0 hatte card-grid.css keine eigene Einblendung. Das Raster lief allein über die Basisregel in reveal.css: bei `inhalt` fuhr `__inner` als EIN Block herein, alle Karten gleichzeitig. Gemessen am 12.09.2026 über fünf Seiten: 105 `ag-card` auf `none`, 17 Raster aktiv, jede Rasterzelle `transition-delay: 0s`. Es ist derselbe Befund, den `ag_step_list` am 10.09.2026 hatte, und dieselbe Abweichung von shelf/scroll-reveal (1244:195) auf 0.7: „Gruppen mit Stagger/m (120 ms)." GELTUNGSBEREICH — ausdrückliche Entscheidung, anzumerken Die Staffelung greift NUR bei `data-ag-anim="inhalt"` (Fläche steht, nur der Inhalt fährt) — dem Auslieferungszustand seit 3.139.0. Bei `reveal` bleibt alles unverändert: Wer die Fläche mitfahren lässt, will eine Blockbewegung; eine Staffelung darin liefe zusätzlich zur fahrenden Fläche und wirkte doppelt. Rückspielpunkt nach 0.7, falls das anders gewollt ist. DER DECKEL LIEGT IM CSS, NICHT IM PHP `ag_step_list` setzt seinen Zähler im Partial (`min( $i, 5 )`). Hier geht es über `:nth-child`, weil das Raster seine Karten nicht über ein eigenes Partial ausgibt — die Rasterzelle ist die `.ag-glow-huelle` aus ag_render_card(). Ab der 6. Karte hält `:nth-child(n+6)` den Zähler auf 5. Ohne Deckel startete Karte 7 bei 720 ms; bei einem 12er-Raster liefe die letzte Karte 1,3 s nach der ersten und das Raster zerfiele optisch. Nur `transform` und `opacity` (Prinzip 5 von 0.7). */ .ag-card-grid { --ag-card-grid-anim-weg: var(--motion-distance-reveal); /* Figma motion/distance/reveal = 36 */ --ag-card-grid-anim-dauer: var(--motion-reveal); /* Figma Motion/reveal = 950 */ --ag-card-grid-anim-versatz: var(--motion-stagger-m); /* Figma motion/stagger/m = 120 */ } /* 1 · Das Inner hält nur noch den Auslöser, es bewegt sich nicht mehr selbst. Spezifität (0,4,1) gegen die Basisregel in reveal.css (0,3,1). */ html.ag-anim-ready .ag-card-grid[data-ag-anim="inhalt"] > *, html.ag-anim-ready .ag-card-grid[data-ag-anim="inhalt"]:not(.is-inview) > * { opacity: 1; transform: none; transition: none; } /* 2 · Bewegt werden die Teile IM Inner. Bewusst `> *` statt einer Liste der Klassen: Titel, Einleitung, Fuß-CTA und Fußnote sind jeweils optional, und eine Klassenliste verlöre still jeden Teil, der später dazukommt — genau der Fehler, gegen den reveal.css gebaut wurde. Der Raster-Container selbst ist ausgenommen, seine Zellen fahren einzeln (Regel 3). */ html.ag-anim-ready .ag-card-grid[data-ag-anim="inhalt"] .ag-card-grid__inner > *:not(.ag-card-grid__container), html.ag-anim-ready .ag-card-grid[data-ag-anim="inhalt"] .ag-card-grid__container > * { opacity: 0; transform: translateY(var(--ag-card-grid-anim-weg)); transition: opacity var(--ag-card-grid-anim-dauer) var(--motion-ease-standard), transform var(--ag-card-grid-anim-dauer) var(--motion-ease-standard); transition-delay: var(--ag-card-grid-anim-verzug, 0ms); } /* 3 · Zähler je Rasterzelle, gedeckelt ab der 6. Der Verzug steht im selben Block: Custom Properties werden erst bei der Nutzung aufgelöst, der `calc()` greift also den kaskadierten Zähler ab. */ .ag-card-grid__container > * { --ag-card-grid-i: 0; --ag-card-grid-anim-verzug: calc(var(--ag-card-grid-i, 0) * var(--ag-card-grid-anim-versatz)); } .ag-card-grid__container > *:nth-child(2) { --ag-card-grid-i: 1; } .ag-card-grid__container > *:nth-child(3) { --ag-card-grid-i: 2; } .ag-card-grid__container > *:nth-child(4) { --ag-card-grid-i: 3; } .ag-card-grid__container > *:nth-child(5) { --ag-card-grid-i: 4; } .ag-card-grid__container > *:nth-child(n+6) { --ag-card-grid-i: 5; } /* 4 · Endzustand. */ html.ag-anim-ready .ag-card-grid[data-ag-anim="inhalt"].is-inview .ag-card-grid__inner > *:not(.ag-card-grid__container), html.ag-anim-ready .ag-card-grid[data-ag-anim="inhalt"].is-inview .ag-card-grid__container > * { opacity: 1; transform: none; } /* 5 · Barrierefreiheit: Wer Bewegung abbestellt hat, sieht sofort den Endzustand. Die Regel muss HIER stehen — eine Media Query erhöht die Spezifität nicht, die Regeln oben schlügen sonst die aus reveal.css. */ @media (prefers-reduced-motion: reduce) { html.ag-anim-ready .ag-card-grid[data-ag-anim="inhalt"] .ag-card-grid__inner > *:not(.ag-card-grid__container), html.ag-anim-ready .ag-card-grid[data-ag-anim="inhalt"] .ag-card-grid__container > * { transition: none; transform: none; opacity: 1; } } /* Karten ohne Fläche brauchen mehr Luft (Entscheidung Vincent, 25.09.2026: „Keine: Grids wirken sehr gedrungen"). Lücke spacing/ml 24 → spacing/xl 40. Projekt-Doc claude/kartenflaechen-neu-25-09.md. :has() greift, sobald eine Karte `keine` trägt. */ .ag-card-grid:has(.ag-card--keine) { --ag-card-grid-raster-gap: var(--spacing-xl); }