/** * agenic Komponenten-CSS – Card (Molekül) — Figma `card` (Set 2501:7201, * Seite 0.5, 36 Varianten, neu gemessen 17.08.2026 für den Neuschnitt 4.0.0): * Fläche = kontur · frosted · light · medium · dark · black * (`kontur` und `frosted` sind im Code seit 17.09.2026 entfernt, s. unten.) * Seit 25.09.2026 zusätzlich `fusion` · `erp` · `crm` (Farbwelten, Quelle 54 → 72 Varianten). * Im Code zusätzlich, ohne Entsprechung in der Quelle: `lightest` (02.09.2026), * `gradient` (02.09.2026) und `keine` (07.09.2026) — alle drei Rückspielpunkte auf 0.8. * Seit 17.09.2026 außerdem `bild` (Bildkachel) und die Klickfläche * `.ag-card--klickbar` — beide ebenfalls ohne Quelle, Rückspielpunkte auf 0.8. * Medien = keine · innen · überlappend * Icon-Position = oben · rechts * Maße aus der Quelle: Wurzel radius l 24 · content padding l 32, gap xl 40 · * title-row gap m 16 · media 240 hoch (radius m 16, bei überlappend l 24) · * footer gap ml 24. Kontrakt: card 4.0.0. * * Die alte Quelle 968:5004 („card--alt", Archiv) hatte 30 Varianten und die * Achse Titel Groß/Standard — beides gilt nicht mehr. * * ABWEICHUNG von der Quelle (Auftrag Vincent, 24.08.2026) — gehört auf 0.8: * · header-Gap (title-row → Text) 40 → 24 (`--ag-card-header-gap`) * · content-Gap (Kopf → Fuß) 40 → 32, Mindestabstand; `margin-top:auto` * am Fuß schiebt darüber hinaus. Das frühere `padding-top: 16` am Fuß * entfällt, sonst wäre der Mindestabstand 48 statt 32. * · Mindesthöhe der Karte neu 300 (`--ag-card-min-hoehe`) * * ABWEICHUNG von der Quelle (Auftrag Vincent, 26.08.2026) — gehört auf 0.8: * · Bei `Medien=überlappend` steht das obere Innenpolster auf 32+32 = 64 * (`--ag-card-pad-oben-standard`). Grund: Der Inhalt zieht sich 32 über das * Bild, das Polster ist ebenfalls 32 — beides hebt sich auf, der sichtbare * Abstand Bild → erstes Element war 0. Die Quelle zeigt dasselbe Verhalten; * gewollt ist aber derselbe sichtbare Abstand wie bei `innen` (32). * · Neu wählbar: Bildausschnitt (`--ag-card-media-position`, object-position). * Die Quelle führt keine solche Achse; Default `center` hält Bestandskarten * unverändert. */ .ag-card, .ag-card * { box-sizing: border-box; } .ag-card { --ag-card-bg: var(--color-surface-light); /* Figma Surface/light — Rückfall, seit 17.09.2026 statt frosted */ --ag-card-fg: var(--color-text-standard); --ag-card-radius: var(--radius-l); /* Figma radius/l = 24 */ --ag-card-pad: var(--spacing-l); /* 32 */ /* Oberes Innenpolster als eigene Stellschraube: `innen`/`keine` nehmen den Normalwert, `überlappend` hebt ihn um den Überlappungsbetrag an (unten). Der Redaktions-Control „Innenabstand oben" (--ag-card-pad-oben) überstimmt beides — er ist der äußere `var()`-Wert an der Polsterstelle. */ --ag-card-pad-oben-standard: var(--ag-card-pad); --ag-card-media-fit: cover; /* Einfügemodus (object-fit), Figma „Fill" */ --ag-card-media-position: center; /* Ausrichtung (object-position) */ --ag-card-logo-abstand: var(--spacing-l); /* Logo-Schalter: Sicherheitsabstand 32, wie --ag-card-pad */ --ag-card-logo-hoehe: 80px; /* tmp — Vorgabe Vincent 19.09.2026 (vorher max. 128), kein Höhen-Token */ --ag-card-gap: var(--spacing-l); /* Kopf → Fuß, Mindestabstand 32 */ --ag-card-header-gap: var(--spacing-ml); /* title-row → Text 24 */ --ag-card-title-gap: var(--spacing-m); /* title-row 16 */ --ag-card-media-radius: var(--radius-m); /* Figma radius/m = 16 */ --ag-card-overlap: var(--spacing-l); /* überlappend: −32 */ --ag-card-min-hoehe: 300px; /* Mindesthöhe der Karte */ --ag-card-space-before: 0px; --ag-card-space-after: 0px; display: flex; flex-direction: column; min-height: var(--ag-card-min-hoehe); overflow: hidden; background: var(--ag-card-bg); border-radius: var(--ag-card-radius); margin-block-start: var(--ag-card-space-before); margin-block-end: var(--ag-card-space-after); color: var(--ag-card-fg); font-family: var(--font-sans); } /* ── Flächen ────────────────────────────────────────────────────────── */ /* `keine` ist neu seit 07.09.2026 (Auftrag Vincent) — die nackte Karte: ohne Fläche, ohne Kontur, ohne Innenpolster. Die Mindesthöhe fällt hier ebenfalls weg (Entscheidung Vincent, 07.09.2026), sonst stünde unter kurzem Text bis zu 300 px Luft. Alle anderen Flächen behalten ihre 300. ABWEICHUNG VON DER QUELLE: Die Figma-Komponente `card` (2501:7201) kennt diesen Wert nicht — Rückspielpunkt auf 0.8. */ .ag-card--keine { --ag-card-bg: transparent; --ag-card-pad: 0px; --ag-card-min-hoehe: 0px; border: 0; } /* `kontur` und `frosted` sind seit 17.09.2026 entfernt (Auftrag Vincent). Das Partial gibt ihre Klassen nicht mehr aus — gespeicherte Werte werden dort zu `light`. ABWEICHUNG VON DER QUELLE, Rückspielpunkt 0.8. */ /* `lightest` war bis 02.09.2026 die einzige Fläche der Quelle ohne Entsprechung im Code. Der Token stand längst in tokens.css. */ .ag-card--lightest { --ag-card-bg: var(--color-surface-lightest); } .ag-card--light { --ag-card-bg: var(--color-surface-light); } .ag-card--medium { --ag-card-bg: var(--color-surface-medium); } .ag-card--dark { --ag-card-bg: var(--color-surface-dark); --ag-card-fg: var(--color-text-inverse-soft); } .ag-card--black { --ag-card-bg: var(--color-surface-darkest); --ag-card-fg: var(--color-text-inverse-soft); } /* ── Farbwelt über der Fläche (Entscheidung Vincent, 25.09.2026) ───────── Zweiter Regler neben der Fläche: `.ag-card--welt-{fusion|erp|crm}` legt eine Tiefenlage über light, lightest oder darkest (`black`). Vorher (10.37–10.39) waren fusion/erp/crm eigene Flächen auf light; das Partial löst gespeicherte Altwerte zu light + Farbwelt auf. Doppelklasse (0,2,0) gewinnt über die Flächenklasse. Stärke folgt `--tiefe-staerke` (Einstellungen → Flächen), beim Hover 2,4. Pills in der Karte bekommen den Grund für ihre Verlaufskontur. Paint Styles „Fusion | Tiefe/*-hell"; Figma führt die Achse noch nicht (Rückspielpunkt 0.8). Projekt-Doc claude/kartenflaechen-neu-25-09.md. */ .ag-card--welt-fusion { --ag-card-lage: var(--gradient-tiefe-diagonal-hell); } .ag-card--welt-erp { --ag-card-lage: var(--gradient-tiefe-erp-hell); } .ag-card--welt-crm { --ag-card-lage: var(--gradient-tiefe-crm-hell); } .ag-card--light:is(.ag-card--welt-fusion, .ag-card--welt-erp, .ag-card--welt-crm) { --ag-card-grund: var(--color-surface-light); /* Figma Surface/light */ } .ag-card--lightest:is(.ag-card--welt-fusion, .ag-card--welt-erp, .ag-card--welt-crm) { --ag-card-grund: var(--color-surface-lightest); /* Figma Surface/lightest */ } .ag-card--black:is(.ag-card--welt-fusion, .ag-card--welt-erp, .ag-card--welt-crm) { --ag-card-grund: var(--color-surface-darkest); /* Figma Surface/darkest */ } .ag-card:is(.ag-card--welt-fusion, .ag-card--welt-erp, .ag-card--welt-crm) { --ag-card-bg: var(--ag-card-lage), var(--ag-card-grund); --ag-pill-grund: var(--ag-card-grund); } /* `gradient` ist seit 02.09.2026 die CTA-Kachel (Quelle 02.09.2026, Kontrakt §1). Die Fläche kommt aus dem Paint Style „Fusion | Gradients/fusion-basic--reverse-30"; der Token steht bereits in tokens.css — es entsteht keine neue Variable. `background` (Zeile 59) ist eine Kurzform und nimmt einen Verlauf ohne Umbau an. Zusätzlich zieht die Quelle die Abstände enger als bei den übrigen Flächen: Kopf → Fuß 24 statt 32, Titel → Copy 12 statt 24. Vorbild ist `cta-box`. BEKANNTE ABWEICHUNG (Kontrakt §4.1, Finding auf 0.0): Weiße Copy erreicht auf dem schwächsten Verlaufsstopp 4,44 : 1 — WCAG AA verlangt 4,5 : 1 für Fließtext. Entscheidung Vincent 02.09.2026: vorerst so lassen, Klärung am Paint Style. */ .ag-card--gradient { --ag-card-bg: var(--gradient-fusion-basic-reverse-30); --ag-card-fg: var(--color-text-inverse-soft); --ag-card-gap: var(--spacing-ml); --ag-card-header-gap: var(--spacing-ms); } /* `bild` ist seit 17.09.2026 die Bildkachel (Auftrag Vincent). Nur das Bild, randlos: Es füllt die Karte, die Rundung kommt von der Karte selbst (`border-radius` + `overflow: hidden` oben), der Einfügemodus von `--ag-card-media-fit` (Default `cover` = Figma „Fill"). Die Höhe bestimmt das Raster — die Kachel ist so hoch wie ihre Nachbarn. Das Bild liegt absolut, trägt also selbst keine Höhe bei. Deshalb gilt die Mindesthöhe hier IMMER, auch wenn ein Raster sie für Karten abschaltet (card-grid `--min-hoehe-aus` setzt `--ag-card-min-hoehe: 0`) — sonst fiele eine Kachel allein in ihrer Zeile auf 0 px zusammen, mobil jede. Der Wert 300 ist derselbe wie `--ag-card-min-hoehe` (ABWEICHUNG vom 24.08.2026, kein Figma-Token). ABWEICHUNG VON DER QUELLE: `card` (2501:7201) kennt den Wert nicht — Rückspielpunkt auf 0.8. */ .ag-card.ag-card--bild { --ag-card-bg: transparent; --ag-card-pad: 0px; --ag-card-bild-min-hoehe: 300px; position: relative; min-height: max(var(--ag-card-min-hoehe), var(--ag-card-bild-min-hoehe)); /*
bringt Browser- und Theme-Ränder mit (UA 40 px seitlich, Kit/Theme `figure { margin: 0 0 1em }` mit Spezifität 0,1,1). Ohne diese Zeilen wuchs die Rasterzeile um 16 px (gemessen 17.09.2026). */ margin-inline: 0; margin-block-start: var(--ag-card-space-before); margin-block-end: var(--ag-card-space-after); padding: 0; border: 0; } .ag-card--bild .ag-card__bild.ag-card__bild { position: absolute; inset: 0; display: block; width: 100%; height: 100%; /* schlägt `img { height: auto }` aus dem Theme */ max-width: none; margin: 0; border: 0; border-radius: inherit; object-fit: var(--ag-card-media-fit); object-position: var(--ag-card-media-position); } /* ── Medien ─────────────────────────────────────────────────────────── Bei `überlappend` trägt in der Quelle NICHT die Wurzel die Fläche, sondern das innere `content` (Wurzel-Gap −32, beide Radien 24). Die Fläche wandert deshalb eine Ebene tiefer — sonst läge der Hintergrund über dem Bild und die Überlappung wäre unsichtbar. */ /* SPEZIFITÄT, nicht Kosmetik: Elementor liefert `.elementor img { height: auto }` (0,1,1) mit. Das schlägt eine Regel mit nur einer Klasse (0,1,0) — die `height: 240px` hier war dadurch WIRKUNGSLOS, gemessen am 26.08.2026 auf agenic.local: `.ag-card__media` stand auf 0px statt 240px. Das Bild rendete im eigenen Seitenverhältnis, und `object-fit` hatte nichts zu beschneiden. Der vorangestellte Blockname hebt uns auf (0,2,0) und damit über Elementor. Dieselbe Falle steckte in media-text, media-text-list, media-fact, text-media-panel und fact-media-row. */ .ag-card .ag-card__media { display: block; width: 100%; height: 240px; /* Figma media 240 */ /* Beide Variablen setzt das Partial am selbst (Control „Bild einfügen und ausrichten") — im Raster je Karte. Die feste Höhe darüber ist der Grund, warum hier keine Mindesthöhe nötig ist. */ object-fit: var(--ag-card-media-fit, cover); /* Figma-Skalierung „Fill" */ object-position: var(--ag-card-media-position, center); border-radius: var(--ag-card-media-radius); } /* ── Logo-Schalter (Auftrag Vincent, 19.09.2026) ────────────────────── Ein Logo als Bild hing am Rand des Rahmens. `padding` am schrumpft die Inhaltsbox, in der `object-fit` arbeitet — das Logo bekommt rundum Luft, der Rahmen (240 hoch bzw. die ganze Kachel) bleibt gleich groß. `border-box`, damit das Polster innen liegt und nichts wächst. Doppelklasse (0,2,0) wie die Grundregeln oben — `.elementor img` (0,1,1) bringt sonst eigene Werte mit. ABWEICHUNG VON DER QUELLE: `card` (2501:7201) kennt keinen Logo-Modus — Rückspielpunkt auf 0.8. */ .ag-card .ag-card__media.ag-card__media--logo, .ag-card--bild .ag-card__bild.ag-card__bild--logo { box-sizing: border-box; padding: var(--ag-card-logo-abstand); /* Immer einpassen, nie beschneiden (Ergänzung Vincent, 19.09.2026). Direkt statt über --ag-card-media-fit: Das Partial setzt die Variable inline am — die Regel hier soll sie überstimmen. */ object-fit: contain; } /* In der Karte folgt unter dem Bild der Inhalt mit eigenem Polster — ein Abstand unten verdoppelte die Luft. Der Bildbereich ist fest 80 px hoch (Vorgabe Vincent, 19.09.2026; zuvor „höchstens 128"), Polster oben eingerechnet (border-box) — für das Logo bleiben 48 px. Fest statt höchstens, damit Logos in einer Kartenreihe auf gleicher Höhe stehen. Gilt nicht für die Bildkachel: Dort füllt das Bild die ganze Kachel, es gibt keinen Inhalt darunter. */ .ag-card .ag-card__media.ag-card__media--logo { padding-block-end: 0; height: var(--ag-card-logo-hoehe); } /* Logo-Größe (Auftrag Vincent, 26.09.2026): drei Stufen der Bildbereich-Höhe, Luft oben (32) eingerechnet — für das Logo bleiben 32 / 48 / 96 px. `m` ist der bisherige Wert (--ag-card-logo-hoehe, 80, tmp). */ .ag-card .ag-card__media.ag-card__media--logo-s { --ag-card-logo-hoehe: var(--spacing-xxl); } /* 64 */ .ag-card .ag-card__media.ag-card__media--logo-l { --ag-card-logo-hoehe: var(--spacing-4xl); } /* 128 */ /* ── Bild im (Imagify, live) ─────────────────────────────── Imagify liefert WebP aus, indem es das in ein packt — und verschiebt dabei `class` und `style` ans (imagify/classes/ Picture/Display.php). Das innere steht danach ohne Klasse da: kein `height: 100%`, kein `object-fit`, es rendert im eigenen Seitenverhältnis. Gemessen live 19.09.2026, agenic.com/technologien: Kachel 384 × 339, 384 × 339, ohne Klasse, `position: static`, `object-fit: fill` — das Bild endete deutlich über der Kachelunterkante. Nur live, weil Imagify im Elementor-Editor nicht umschreibt. Das trägt jetzt die Klasse und damit Maße, Rundung, Polster und die Inline-Variablen; das füllt es nur noch aus und erbt Einpassung und Ausrichtung (`inherit` — auch `contain` beim Logo). (0,2,2) schlägt `.elementor img { height: auto }` (0,1,1). */ .ag-card picture.ag-card__bild > img, .ag-card picture.ag-card__media > 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; } .ag-card--medien-ueberlappend { background: transparent; border: 0; --ag-card-media-radius: var(--radius-l); /* 24 statt 16 */ /* Der Versatz frisst das obere Polster: content sitzt −32 über dem Bild, das Polster ist 32 — sichtbar bleiben 0. Deshalb hier 32+32 = 64, damit der sichtbare Abstand Bild → erstes Element wieder 32 beträgt, genau wie bei `innen` (Auftrag Vincent, 26.08.2026; Abweichung, s. Kopfkommentar). */ --ag-card-pad-oben-standard: calc(var(--ag-card-pad) + var(--ag-card-overlap)); } .ag-card--medien-ueberlappend .ag-card__content { background: var(--ag-card-bg); border-radius: var(--ag-card-radius); margin-block-start: calc(var(--ag-card-overlap) * -1); /* Seit 25.09.2026 liegt das BILD oben, nicht mehr die Kartenfläche (Auftrag Vincent). Vorher stand hier `position: relative` ohne z-index — die Fläche deckte die unteren 32 px des Bildes ab. Jetzt ragt das Bild über die Karte, die Fläche schaut darunter hervor. Der Stacking-Kontext bleibt, damit die Reihenfolge nicht von der DOM-Folge abhängt. */ position: relative; z-index: 0; } /* Das Bild liegt über der Kartenfläche (Auftrag Vincent, 25.09.2026). Nur bei `überlappend` — ohne Versatz gibt es keine Überschneidung. */ .ag-card--medien-ueberlappend .ag-card__media { position: relative; z-index: 1; } /* Die Sonderfälle `frosted`/`kontur` + überlappend entfallen mit den beiden Flächen (17.09.2026). */ /* `keine` + `überlappend`: Es gibt keine Fläche, die das Medium überlappen könnte — der Versatz hätte nur den Effekt, dass Bild und Text ohne Abstand aneinanderkleben (gemessen 07.09.2026: 0 px). Deshalb fällt der Versatz weg und das obere Polster steht auf 32, damit der sichtbare Abstand Bild → erstes Element derselbe ist wie bei `innen`. */ .ag-card--keine.ag-card--medien-ueberlappend { --ag-card-overlap: 0px; --ag-card-pad-oben-standard: var(--spacing-l); } /* Dasselbe bei `innen`: Ohne Polster stünde der Titel unmittelbar an der Bildkante (gemessen 07.09.2026: 0 px). Die 32 sind hier kein Kasten-Polster, sondern der Abstand Bild → Text — bei allen anderen Flächen leistet ihn das Innenpolster. Karten ohne Medium bleiben vollständig polsterfrei. */ .ag-card--keine.ag-card--medien-innen { --ag-card-pad-oben-standard: var(--spacing-l); } .ag-card--medien-ueberlappend.ag-card--keine .ag-card__content { /* Gleiche Lage wie kontur: Die Fläche sitzt bei `überlappend` am content, hier trägt sie nichts. Das obere Polster bleibt der Überlappungsbetrag (0 + 32), damit der Abstand Bild → erstes Element nicht auf 0 fällt. */ background: transparent; } .ag-card__content { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--ag-card-gap); /* Oben/unten über die Abstände-Controls überstimmbar (Konvention `--ag-{block}-pad-oben/-unten`, AGENIC-STANDARDS.md). Bis 3.109.0 stand hier die Kurzform `padding: var(--ag-card-pad)` — die beiden Controls im Tab „Abstände" waren dadurch wirkungslos. */ padding: var(--ag-card-pad-oben, var(--ag-card-pad-oben-standard)) var(--ag-card-pad) var(--ag-card-pad-unten, var(--ag-card-pad)); } .ag-card__header { display: flex; flex-direction: column; gap: var(--ag-card-header-gap); } .ag-card__title-row { display: flex; flex-direction: column; gap: var(--ag-card-title-gap); } /* ── Marker-Zeile (Pills + Icon-Badge) ──────────────────────────────── Die DOM-Reihenfolge ist immer „Pills, dann Icon". Bei Icon-Position=oben dreht `column-reverse` die Optik auf „Icon oben, Pills darunter" — die Quelle listet dort tatsächlich icon-badge vor pill-list. Vertretbar, weil das Badge `aria-hidden` und rein dekorativ ist: Die Vorleseordnung ändert sich dadurch nicht. */ .ag-card__marker-row { display: flex; } .ag-card--icon-oben .ag-card__marker-row { flex-direction: column-reverse; align-items: flex-start; gap: var(--spacing-l); /* Figma 32 */ } .ag-card--icon-rechts .ag-card__marker-row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--spacing-m); /* Figma 16 */ } .ag-card__pills { display: flex; flex-wrap: wrap; gap: var(--spacing-s); } /* Pill-Position „unter Headline" (19.09.2026). Die Pills stehen dann in der Titelzeile direkt unter dem Titel; der Abstand ist `--ag-card-title-gap` aus dem Flex-Gap der Titelzeile. Die Marker-Zeile trägt nur noch das Icon — bei Icon-Position=rechts bleibt es rechts statt nach links zu rutschen. */ /* Gilt auch für „unter Text" (`--pills-text`): Seit 6.12.0 stehen die Pills dort als erste Zeile im Fuß, über dem Trenner; Abstand zum Trenner aus dem Fuß-Gap (`--spacing-ml`, 24). */ .ag-card--pills-unten.ag-card--icon-rechts .ag-card__marker-row, .ag-card--pills-text.ag-card--icon-rechts .ag-card__marker-row { justify-content: flex-end; } /* ── Typografie ─────────────────────────────────────────────────────── Die Quelle führt Titel UND Subline in allen 36 Varianten fest auf `Stufe=panel-24` = Display/XS 24/32 Light — eine Größen-Achse gibt es dort nicht. Seit 3.51.0 sind beide dennoch wählbar (Auftrag Vincent 19.08.2026): L3-Variablen `--ag-card-titel-*` / `--ag-card-subline-*`, gesetzt vom Control „Stufe des Titels/der Subline"; der Fallback ist panel-24, damit Bestandsinstanzen unverändert aussehen. Abweichung von der Quelle — gehört auf 0.8. Werte kommen aus L2 (`titel-stufen.css`), nie direkt aus `--fs-*`. */ .ag-card__titel { margin: 0; color: inherit; letter-spacing: -0.02em; font-size: var(--ag-card-titel-fs, var(--ag-titel-panel-24-fs)); line-height: var(--ag-card-titel-lh, var(--ag-titel-panel-24-lh)); font-weight: var(--ag-card-titel-fw, var(--ag-titel-panel-24-fw)); } /* Die Subline misst in der Quelle dieselbe Stufe und dieselbe Farbe wie der Titel (Display/XS, Text/standard) — optisch also nicht unterscheidbar. Mit der eigenen Stufen-Achse ist das jetzt auflösbar, vor allem über den Gewichtsunterschied Light ↔ Medium (`panel-24` ↔ `block-24m`). */ .ag-card__subline { margin: 0; color: inherit; letter-spacing: -0.02em; font-size: var(--ag-card-subline-fs, var(--ag-titel-panel-24-fs)); line-height: var(--ag-card-subline-lh, var(--ag-titel-panel-24-lh)); font-weight: var(--ag-card-subline-fw, var(--ag-titel-panel-24-fw)); } .ag-card__text { font-size: var(--fs-300); /* Copy/M 16/21 Light */ line-height: calc(21 / 16); font-weight: var(--fw-light); letter-spacing: -0.02em; } .ag-card__text > * { margin: 0 0 var(--spacing-m); } .ag-card__text > *:last-child { margin-bottom: 0; } /* 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. */ .ag-card .ag-card__text > :is(ul, ol):last-child { margin-bottom: 0; } /* ── Fuß ────────────────────────────────────────────────────────────── Seit 4.0.0 rendert der Fuß in beiden Fällen das Button-Atom (Typ 3rd/Text). Das frühere handgeschriebene ist entfallen — es duplizierte das Atom-Markup. */ .ag-card__footer { margin-top: auto; /* Fuß sitzt unten */ display: flex; flex-direction: column; gap: var(--spacing-ml); /* Trenner → Aktion 24 */ /* Kein padding-top mehr: Der Mindestabstand Kopf → Fuß kommt allein aus dem content-Gap (32). `margin-top: auto` schiebt darüber hinaus, sobald die Karte höher ist als ihr Inhalt. Vorher addierten sich Gap 40 und padding 16 zu 56 — der Fuß saß dadurch nie enger als 56 am Text. */ } .ag-card__footer .ag-divider { margin: 0; } /* ── Aktionen ───────────────────────────────────────────────────────── Nur die CTA-Kachel (`gradient`) zeigt zwei Buttons. Vorbild ist `cta-box` in der Mobil-Fassung (375 px ≈ Kartenbreite 385): beide untereinander, volle Breite, Abstand 16. Die Breite setzt das Button-Atom über `breite: voll` — hier steht bewusst keine eigene Breitenregel. Der Wrapper entsteht nur, wenn der zweite Button gefüllt ist; bei einem einzelnen Button rendert der Fuß unverändert wie bisher. */ .ag-card__aktionen { display: flex; flex-direction: column; gap: var(--spacing-m); } /* ── Klickfläche: die ganze Karte ist der Link ───────────────────────── Auftrag Vincent, 17.09.2026. Das Partial setzt `.ag-card--klickbar` und legt als erstes Kind einen leeren Link `.ag-card__flaechenlink` an (ag_card_flaechenlink()). Der Link liegt absolut über der ganzen Karte. Warum kein `::after` am Button (übliches „stretched link"): Das Pseudo- Element hängt am nächsten positionierten Vorfahren. Den gibt es hier an zwei Stellen, die nicht die Karte sind — der Button hebt sich beim Hover per `transform` (button.css), und bei `Medien=überlappend` ist der Inhalt `position: relative` mit `backdrop-filter`. In beiden Fällen schrumpfte die Klickfläche auf den Button bzw. den Inhalt. Stattdessen: Alles über dem Link lässt Klicks durch (`pointer-events: none`), nur echte Bedienelemente fangen sie ab und liegen eine Ebene höher. So bleiben zweiter Button und Links im Text klickbar. Nebenwirkung: Text in einer klickbaren Karte lässt sich nicht markieren — gängig bei Kartenlinks. */ .ag-card.ag-card--klickbar { position: relative; /* Lift beim Hover (Entscheidung Vincent, 25.09.2026): rein Transform, kein Schatten — wie der Button nach 0.7. Weg: Values/motion/distance/shift. */ transition: transform var(--motion-duration-s) var(--motion-ease-standard), --tiefe-staerke var(--motion-duration-s) var(--motion-ease-standard); } .ag-card.ag-card--klickbar:hover { transform: translateY(calc(-1 * var(--motion-distance-shift))); --tiefe-staerke: 2.4; /* Lage der Farbwelten wird kräftiger; ohne Lage ohne Wirkung */ } .ag-card__flaechenlink.ag-card__flaechenlink { position: absolute; inset: 0; z-index: 0; display: block; border-radius: inherit; background: transparent; text-decoration: none; outline: none; /* Fokus zeigt die Karte, siehe unten */ } .ag-card--klickbar > :not(.ag-card__flaechenlink) { pointer-events: none; } .ag-card--klickbar :is(a, button, input, select, textarea, summary, label, [tabindex]):not(.ag-card__flaechenlink) { position: relative; z-index: 1; pointer-events: auto; } /* Nur wo die Fläche selbst der Link ist (Bildkachel, Karte ohne Beschriftung), kann sie Fokus bekommen — dann zeigt die Karte den Ring wie interaktion.css. */ .ag-card.ag-card--klickbar:has(> .ag-card__flaechenlink:focus-visible) { outline-width: var(--border-width-s); outline-color: currentColor; } /* Einblendung (0.7-Standardmuster) */ html.ag-anim-ready .ag-card[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-card[data-ag-anim="reveal"]:not(.is-inview) { opacity: 0; transform: translateY(var(--motion-distance-reveal)); } /* ── Mobil: Karten hugen, Polster 16 (Auftrag Vincent, QS 26.09.2026) ── „Cards mobil höhe immer hug wenn 1-spaltig untereinander" und „padding innen verringern 16px". Unter 768 stehen alle Karten-Raster einspaltig (card-grid, media-card-list, post-grid, partner-directory, stage-ladder); die Mindesthöhe 300 erzeugte dort nur Leerraum unter kurzem Text. Die Bildkarte behält ihre eigene Mindesthöhe (--ag-card-bild-min-hoehe), sonst fiele das Bild auf 0. `keine`/`bild` bleiben bei Polster 0 — daher :not(). Die Redaktions-Controls „Innenabstand oben/unten" überstimmen weiter. Grenze 768 = --bp-md (A5 offen, tmp). */ @media (max-width: 767px) { .ag-card { --ag-card-min-hoehe: 0px; } .ag-card:not(.ag-card--keine, .ag-card--bild) { --ag-card-pad: var(--spacing-m); /* 16 */ --ag-card-logo-abstand: var(--spacing-m); /* Logo-Rand folgt dem Polster */ } } @media (prefers-reduced-motion: reduce) { .ag-card.ag-card--klickbar { transition: none; } .ag-card.ag-card--klickbar:hover { transform: none; } html.ag-anim-ready .ag-card[data-ag-anim="reveal"], html.ag-anim-ready .ag-card[data-ag-anim="reveal"]:not(.is-inview) { transition: none; transform: none; opacity: 1; } } /* ── Karte füllt ihre Zelle im Elementor-Container ──────────────────── Kein eigenes Control (Entscheidung Vincent, 18.08.2026): Ob gestreckt wird, entscheiden allein die Flex-/Grid-Einstellungen des Containers (`align-items` am Container bzw. `align-self` am Widget). Diese Regeln ändern daran nichts — sie beheben nur, dass die von Elementor bereits gestreckte Zellhöhe unterwegs abriss. Wo sie abriss (gemessen am Frontend 18.08.2026, Seite 902, Grid 3×400px): e-grid (align-items: stretch) → Zelle 297 ✓ e-con (flex column) → 297 ✓ von der Zelle gestreckt .elementor-widget-ag_card → 276 ✗ Flex-Item, Höhe = Inhalt .elementor-widget-container / .ag-card → 276 ✗ Elementor legt jede Karte in einen eigenen Kind-Container; das Widget ist darin Flex-Item einer Spalte und wächst nicht mit. Die Kette muss deshalb am Widget selbst beginnen, nicht erst am Container-Div. Steht der Container auf `start`/`center`, ist die Elternhöhe `auto` — `height: 100%` löst dann ebenfalls zu `auto` auf. Gegenprobe gemessen: Kartenhöhen mit und ohne diese Regeln identisch (297/276/276/276). Der Fuß sitzt dadurch unten, ohne weitere Regel: `.ag-card__content` ist `flex: 1 1 auto`, `.ag-card__footer` hat `margin-top: auto` (unten). Elementor-Selektoren im Komponenten-CSS folgen dem Vorbild aus `doku.css` (Zeile 610, `.elementor-widget-ag_doku_nav`). Das Card-Grid bleibt außen vor — es streckt über `card-grid.css` vom Raster (fest seit 5.0.0). NUR im Elementor-v3-Container (`.e-con` / `.e-con-inner`). Grund (gemessen 18.08.2026, Brandhub „Moleküle", Seite 823): In einer klassischen Elementor-Spalte (`.elementor-widget-wrap`) hat der Elternteil eine definite Höhe — die volle Spaltenhöhe der Seite. `height: 100%` löst dort nicht zu `auto` auf, sondern zur ganzen Spalte: Karte 8783 px statt 300 px, zwei Instanzen betroffen. Die Annahme oben („bei start/center folgenlos") gilt nur für v3-Container, nicht für klassische Spalten. `:where()` hält die Spezifität bei (0,1,0) wie zuvor. */ :where(.e-con, .e-con-inner) > .elementor-widget-ag_card { height: 100%; } :where(.e-con, .e-con-inner) > .elementor-widget-ag_card > .elementor-widget-container { height: 100%; } /* Zweite Zeile für „optimized markup" (Elementor ohne Container-Div) — dann ist die Karte direktes Kind des Widget-Wrappers. Seit 3.66.0 steckt die Karte zusätzlich in `.ag-glow-huelle` (Fusions-Schein). Die Hülle bringt `height: 100%` selbst mit (interaktion.css); hier muss nur die Karte innerhalb der Hülle erreicht werden — deshalb je Fall eine zweite Zeile. `:where()` hält die Spezifität unverändert bei (0,1,0). */ :where(.e-con, .e-con-inner) > .elementor-widget-ag_card > .elementor-widget-container > .ag-card, :where(.e-con, .e-con-inner) > .elementor-widget-ag_card > .ag-card, :where(.e-con, .e-con-inner) > .elementor-widget-ag_card > .elementor-widget-container > :where(.ag-glow-huelle) > .ag-card, :where(.e-con, .e-con-inner) > .elementor-widget-ag_card > :where(.ag-glow-huelle) > .ag-card { height: 100%; } /* QA 10.08.: Fuß-Buttons nicht auf Spaltenbreite strecken (flex-stretch) */ .ag-card .ag-button { align-self: flex-start; }