/**
* agenic Komponenten-CSS – Table (Organismus) — Figma `table` (1654:22791) +
* `table-row` (1530:5408), gemessen 10.08.2026. Theme dark·light, Spalten 3·1,
* Zeilen-Trenner Border--inverse|--subtle, Zellen Copy/S, Kopf Headline/M-Zeile.
* Mobil: seit 10.77.0 drei Muster (scrollen · stapeln · reiter), s. Mobil-Block —
* die Quelle definiert keinen Mobil-Umbau (Finding, bewusste Erweiterung).
* Kontrakt: kontrakte-welle-b-10-08.
* 23.09.2026: Neuer Standard-Look (Kontrakt kontrakt-ag-table-neuer-look-23-09, §1):
* Kopf Copy/S Medium Versalien, Zeilenname label-16, Zellen Copy/M in
* Textfarbe, Zellpolster --spacing-m. Bisherige Werte bleiben über die
* Stufen-Controls wählbar.
*/
.ag-table-wrap, .ag-table-wrap * { box-sizing: border-box; }
.ag-table-wrap {
--ag-table-fg: var(--color-text-standard);
--ag-table-muted: var(--color-text-grey); /* Figma Text/grey */
--ag-table-border: var(--color-border-soft); /* light: Border--subtle */
--ag-table-space-before: 0px;
--ag-table-space-after: 0px;
margin-block-start: var(--ag-table-space-before);
margin-block-end: var(--ag-table-space-after);
overflow-x: auto;
font-family: var(--font-sans);
color: var(--ag-table-fg);
}
.ag-table-wrap--dark {
--ag-table-fg: var(--color-text-inverse-soft); /* Figma Text/inverse */
--ag-table-muted: var(--color-text-grey-inverse); /* Figma Text/grey--inverse */
--ag-table-border: var(--color-border-inverse); /* Figma Border--inverse */
}
.ag-table {
width: 100%;
border-collapse: collapse;
letter-spacing: -0.02em;
}
/* Härtung gegen Theme-/Kit-Tabellenstile (Zebra, Rahmen) — QA 10.08. */
.ag-table,
.ag-table tr,
.ag-table th,
.ag-table td {
background: transparent;
border-left: 0;
border-right: 0;
border-bottom: 0;
}
.ag-table th,
.ag-table td {
text-align: left;
vertical-align: top;
padding: var(--spacing-m) var(--spacing-ml) var(--spacing-m) 0; /* 7.14.0: kompakter — vorher --spacing-ml oben+unten (Zeilenhöhe 80) */
border-top: var(--border-width-xs) solid var(--ag-table-border);
/* Größe steuerbar seit 7.5.0 (Control „zellen_stufe", Copy-Leiter).
Fallback = bisheriger Festwert Copy/S 14/19 Light. */
font-size: var(--ag-table-zelle-fs, var(--ag-copy-m-fs));
line-height: var(--ag-table-zelle-lh, var(--ag-copy-m-lh));
font-weight: var(--ag-table-zelle-fw, var(--ag-copy-m-fw));
}
.ag-table th:last-child, .ag-table td:last-child { padding-right: 0; }
.ag-table thead th {
/* Startseiten-Messung 10.08.2026 (table-cta 1687:18840): Kopfzeile ist
KLEIN (Copy/XS grey), Zeilennamen groß — vorherige Lesart war invertiert. */
/* Control „kopf_stufe" seit 7.5.0 — Fallback seit 7.14.0 Copy/S.
Gewicht fest Medium: der Kopf ist eine Beschriftung, kein Fließtext, und
die Copy-Leiter führt nur Light (bewusste Abweichung, Kontrakt §1).
Keine Versalien: Entscheidung Vincent, 23.09.2026 (7.15.0) — der
Prototyp hatte Versalien + Letterspacing, beides zurückgenommen. */
font-size: var(--ag-table-kopf-fs, var(--ag-copy-s-fs));
line-height: var(--ag-table-kopf-lh, var(--ag-copy-s-lh));
font-weight: var(--fw-medium);
border-top: none;
color: var(--ag-table-muted);
}
/* 8.1.2: Keine Linie über der Kopfzeile. Hello Elementor (reset.css) setzt
`border-block-start: 1px` über die erste Kopfzeile — in drei Formen
(thead:first-child · colgroup + thead · caption + thead) und schlägt damit
`.ag-table thead th` (0,1,2). Unser Partial rendert vor .
Hier dieselben drei Formen plus Klasse, damit wir gewinnen.
Entscheidung Vincent, 23.09.2026. */
.ag-table thead:first-child tr:first-child th,
.ag-table thead:first-child tr:first-child td,
.ag-table colgroup + thead tr:first-child th,
.ag-table colgroup + thead tr:first-child td,
.ag-table caption + thead tr:first-child th,
.ag-table caption + thead tr:first-child td {
border-block-start: 0;
}
.ag-table tbody th {
color: var(--ag-table-fg);
/* Control „zeilenname_stufe" (Titel-Leiter) seit 7.5.0 — Fallback seit
7.14.0 label-16 (16/21 Medium): der Zeilenname schreit nicht mehr, der
Inhalt trägt (Kontrakt §1). block-24m bleibt über das Control wählbar. */
font-size: var(--ag-table-zeilenname-fs, var(--ag-titel-label-16-fs));
line-height: var(--ag-table-zeilenname-lh, var(--ag-titel-label-16-lh));
font-weight: var(--ag-table-zeilenname-fw, var(--ag-titel-label-16-fw));
}
/* 7.14.0: Zellen in voller Textfarbe — der Inhalt ist der Punkt der Tabelle.
Folge: `zeile_hervorhebung=betont` ist im neuen Standard wirkungslos (Finding,
Kontrakt §1); `gedaempft` und `zeile_farbe=grau` bleiben die leisen Wege. */
.ag-table tbody td { color: var(--ag-table-fg); }
/* ── Rich Text in Zellen (7.5.0) ────────────────────────────────────────
Spalten 2–4 sind seit 21.09.2026 WYSIWYG (Kontrakt v0.2). Der Editor
liefert ,
, , , , . Theme und Kit stylen diese
Elemente global — hier im Zellen-Scope auf die Tabellen-Typo zurückholen. */
.ag-table td > :first-child { margin-block-start: 0; }
.ag-table td > :last-child { margin-block-end: 0; }
.ag-table td p,
.ag-table td ul,
.ag-table td ol {
margin-block: 0 var(--spacing-s);
font: inherit;
}
/* 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-table td > :is(ul, ol):last-child { margin-block-end: 0; }
/* Betonung: Medium statt Browser-Bold (700) — die Datei führt Light und
Medium, kein Bold (Text Styles Copy/* und Headline/*). */
.ag-table td strong,
.ag-table td b { font-weight: var(--fw-medium); color: var(--ag-table-fg); }
/* Links: Kit-Linkfarbe hat (0,1,1) — Doppelklasse (0,2,2) inkl. Zustände.
Farbe ist nicht der einzige Träger: Unterstreichung bleibt (WCAG 1.4.1). */
.ag-table.ag-table td a,
.ag-table.ag-table td a:visited {
color: var(--ag-table-fg);
text-decoration: underline;
text-underline-offset: 0.15em;
}
.ag-table.ag-table td a:hover,
.ag-table.ag-table td a:focus-visible { text-decoration-thickness: 2px; }
/* ── Zeilen-Hervorhebung (7.6.0, Control „zeile_hervorhebung") ──────────
Nur bestehende L3/L2-Farben, keine neuen Werte. Kontrakt v0.2 §2. */
.ag-table tbody tr.ag-table__zeile--betont > td { color: var(--ag-table-fg); }
.ag-table tbody tr.ag-table__zeile--gedaempft > th {
color: var(--ag-table-muted);
font-weight: var(--fw-light);
}
/* Zwischentitel: Gruppenüberschrift über die volle Breite, Titel-Stufe label-16
(Headline/S 16/21 Medium). Mehr Luft oben trennt die Gruppen. */
.ag-table tbody th.ag-table__zwischentitel {
font-size: var(--ag-titel-label-16-fs);
line-height: var(--ag-titel-label-16-lh);
font-weight: var(--ag-titel-label-16-fw);
color: var(--ag-table-fg);
padding-block-start: var(--spacing-l);
}
/* ── Zeilen-Optionen je Zeile (7.12.0 / 7.13.0, Kontrakt v0.3) ──────────
Modifier an der ; sie setzen nur die L3-Variablen um, die die
Zellenregeln oben ohnehin lesen. Kein neuer Wert, keine neue Größe —
ausschließlich die Titel-Leiter (titel-stufen.css) und die Copy-Leiter
(copy-stufen.css). Ohne Modifier gilt der Widget-Wert (= Stand 7.11.3). */
.ag-table tbody tr.ag-table__zeile--name-hero-80 { --ag-table-zeilenname-fs: var(--ag-titel-hero-80-fs); --ag-table-zeilenname-lh: var(--ag-titel-hero-80-lh); --ag-table-zeilenname-fw: var(--ag-titel-hero-80-fw); }
.ag-table tbody tr.ag-table__zeile--name-hero-56 { --ag-table-zeilenname-fs: var(--ag-titel-hero-56-fs); --ag-table-zeilenname-lh: var(--ag-titel-hero-56-lh); --ag-table-zeilenname-fw: var(--ag-titel-hero-56-fw); }
.ag-table tbody tr.ag-table__zeile--name-sektion-38 { --ag-table-zeilenname-fs: var(--ag-titel-sektion-38-fs); --ag-table-zeilenname-lh: var(--ag-titel-sektion-38-lh); --ag-table-zeilenname-fw: var(--ag-titel-sektion-38-fw); }
.ag-table tbody tr.ag-table__zeile--name-panel-24 { --ag-table-zeilenname-fs: var(--ag-titel-panel-24-fs); --ag-table-zeilenname-lh: var(--ag-titel-panel-24-lh); --ag-table-zeilenname-fw: var(--ag-titel-panel-24-fw); }
.ag-table tbody tr.ag-table__zeile--name-block-24m { --ag-table-zeilenname-fs: var(--ag-titel-block-24m-fs); --ag-table-zeilenname-lh: var(--ag-titel-block-24m-lh); --ag-table-zeilenname-fw: var(--ag-titel-block-24m-fw); }
.ag-table tbody tr.ag-table__zeile--name-subblock-20 { --ag-table-zeilenname-fs: var(--ag-titel-subblock-20-fs); --ag-table-zeilenname-lh: var(--ag-titel-subblock-20-lh); --ag-table-zeilenname-fw: var(--ag-titel-subblock-20-fw); } /* tmp — Stufe ohne Figma-Quelle, s. render-helpers */
.ag-table tbody tr.ag-table__zeile--name-label-16 { --ag-table-zeilenname-fs: var(--ag-titel-label-16-fs); --ag-table-zeilenname-lh: var(--ag-titel-label-16-lh); --ag-table-zeilenname-fw: var(--ag-titel-label-16-fw); }
.ag-table tbody tr.ag-table__zeile--zellen-xs { --ag-table-zelle-fs: var(--ag-copy-xs-fs); --ag-table-zelle-lh: var(--ag-copy-xs-lh); --ag-table-zelle-fw: var(--ag-copy-xs-fw); }
.ag-table tbody tr.ag-table__zeile--zellen-s { --ag-table-zelle-fs: var(--ag-copy-s-fs); --ag-table-zelle-lh: var(--ag-copy-s-lh); --ag-table-zelle-fw: var(--ag-copy-s-fw); }
.ag-table tbody tr.ag-table__zeile--zellen-m { --ag-table-zelle-fs: var(--ag-copy-m-fs); --ag-table-zelle-lh: var(--ag-copy-m-lh); --ag-table-zelle-fw: var(--ag-copy-m-fw); }
.ag-table tbody tr.ag-table__zeile--zellen-l { --ag-table-zelle-fs: var(--ag-copy-l-fs); --ag-table-zelle-lh: var(--ag-copy-l-lh); --ag-table-zelle-fw: var(--ag-copy-l-fw); }
/* Farbe (Entscheidung Vincent, 23.09.2026, A1): grau · branded. Beide Werte
überschreiben Vorder- und Dämpfungsfarbe der Zeile, damit Name UND Zellen
dieselbe Farbe tragen. Dunkel: Text/grey--inverse bzw. Text/link--inverse —
Figma führt kein Text/branded--inverse, deshalb tmp. Kontrast im Bau gemessen. */
.ag-table tbody tr.ag-table__zeile--farbe-grau > th,
.ag-table tbody tr.ag-table__zeile--farbe-grau > td { color: var(--ag-table-muted); }
.ag-table tbody tr.ag-table__zeile--farbe-branded > th,
.ag-table tbody tr.ag-table__zeile--farbe-branded > td { color: var(--ag-table-branded); }
.ag-table-wrap { --ag-table-branded: var(--color-text-branded); } /* Figma Text/branded */
.ag-table-wrap--dark { --ag-table-branded: var(--color-text-link-inverse); } /* tmp — Figma Text/link--inverse als Ersatz */
/* Icon vor dem Zeilennamen (7.13.0, Control „zeile_icon"). Größe folgt der
Zeilennamen-Größe (1em), Farbe currentColor — Farbe der Zeile gilt mit. */
.ag-table__icon {
display: inline-block;
width: 1em;
height: 1em;
margin-inline-end: var(--spacing-s);
vertical-align: -0.125em; /* optische Grundlinie, wie FA-Standard */
line-height: 1;
}
/* Icon hinter dem Spaltenkopf (10.12.0, Controls „kopf1_icon" … „kopf4_icon").
Farbe wie der Kopftext (currentColor), Abstand gespiegelt. Größe seit 10.12.1
fest 24 px (Figma icon-badge M) — 1em war bei Kopf 14 px zu klein (Vincent, 25.09.2026). */
.ag-table-wrap { --ag-table-kopf-icon: 24px; } /* Figma icon-badge Größe M (24) — 10.12.1 */
.ag-table__icon.ag-table__icon--hinten {
font-size: var(--ag-table-kopf-icon); /* 1em im Icon = 24 px, unabhängig vom Kopftext */
vertical-align: middle;
margin-inline-end: 0;
margin-inline-start: var(--spacing-s);
}
.ag-table__icon > svg,
.ag-table__icon > i {
display: inline-block; /* Theme setzt svg auf block — wie beim Pfeil */
width: 1em;
height: 1em;
font-size: 1em;
fill: currentColor;
}
/* ── Gewicht je Spalte (7.16.0, Controls „spalte1_gewicht" … „spalte4_gewicht") ──
Entscheidung Vincent, 23.09.2026: jede Spalte leicht oder medium, auch Spalte 1.
Die Datei führt Light und Medium, kein Bold. Doppelklasse am Wrap, damit die
Spaltenregel über der Zeilen-Option (--ag-table-zelle-fw an der
) liegt.
Zwischentitel bleiben unberührt; strong/b in Zellen bleibt Medium. */
.ag-table-wrap.ag-table-wrap--s1-light .ag-table tbody th:not(.ag-table__zwischentitel) { font-weight: var(--fw-light); }
.ag-table-wrap.ag-table-wrap--s1-medium .ag-table tbody th:not(.ag-table__zwischentitel) { font-weight: var(--fw-medium); }
.ag-table-wrap.ag-table-wrap--s2-light .ag-table tbody td:nth-child(2) { font-weight: var(--fw-light); }
.ag-table-wrap.ag-table-wrap--s2-medium .ag-table tbody td:nth-child(2) { font-weight: var(--fw-medium); }
.ag-table-wrap.ag-table-wrap--s3-light .ag-table tbody td:nth-child(3) { font-weight: var(--fw-light); }
.ag-table-wrap.ag-table-wrap--s3-medium .ag-table tbody td:nth-child(3) { font-weight: var(--fw-medium); }
.ag-table-wrap.ag-table-wrap--s4-light .ag-table tbody td:nth-child(4) { font-weight: var(--fw-light); }
.ag-table-wrap.ag-table-wrap--s4-medium .ag-table tbody td:nth-child(4) { font-weight: var(--fw-medium); }
/* ── Layout (7.6.0) ──────────────────────────────────────────────────────
Breiten über (Partial rendert immer eine colgroup) — so tragen sie
auch, wenn die erste Zeile ein Zwischentitel mit colspan ist. */
.ag-table-wrap--breiten-gleich .ag-table,
.ag-table-wrap--breiten-erste-breit .ag-table { table-layout: fixed; }
.ag-table-wrap--breiten-erste-breit .ag-table col:first-child { width: 40%; } /* Anteil, kein Maß-Token nötig */
/* Rechtsbündig ab Spalte 2 (Zahlenspalten). Zeilenname bleibt links. */
.ag-table-wrap--rechts-ab-2 .ag-table td,
.ag-table-wrap--rechts-ab-2 .ag-table thead th:not(:first-child) { text-align: right; }
.ag-table-wrap--rechts-ab-2 .ag-table td ul,
.ag-table-wrap--rechts-ab-2 .ag-table td ol { text-align: left; }
/* Ohne Trennlinien. Beim Stapeln trägt die
ihren eigenen Trenner
(Regel im Mobil-Block) — der bleibt, sonst verschmelzen die Zeilen. */
.ag-table-wrap--ohne-trenner .ag-table th,
.ag-table-wrap--ohne-trenner .ag-table td { border-top: 0; }
/* Link je Zeile auf dem Zeilennamen (8.5.0, Control „zeile_link",
Entscheidung Vincent 24.09.2026). Farbe erbt die Zeile (Farbe, Hervorhebung,
Theme) — Kit-Linkfarbe hat (0,1,1), daher Doppelklasse inkl. Zustände.
Farbe ist nicht der einzige Träger: Unterstreichung wie in td (WCAG 1.4.1). */
.ag-table.ag-table .ag-table__link,
.ag-table.ag-table .ag-table__link:visited {
color: inherit;
font: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
}
.ag-table.ag-table .ag-table__link:hover,
.ag-table.ag-table .ag-table__link:focus-visible { text-decoration-thickness: 2px; }
.ag-table.ag-table .ag-table__link:focus-visible {
outline: var(--border-width-s) solid currentColor;
outline-offset: var(--spacing-xxs);
}
/* Pfeil im Link rückt beim Zeigen nach — Muster wie ag_link_list (Motion/hover, shift). */
.ag-table__link .ag-table__pfeil { transition: transform var(--motion-hover) var(--motion-ease-standard); }
.ag-table__link:hover .ag-table__pfeil,
.ag-table__link:focus-visible .ag-table__pfeil { transform: translateX(var(--motion-distance-shift)); }
@media (prefers-reduced-motion: reduce) {
.ag-table__link .ag-table__pfeil { transition: none; }
}
/* Icon und Pfeil kleben am Namen (8.9.0, Entscheidung Vincent 24.09.2026).
Das Partial legt das erste Wort samt Icon und das letzte Wort samt Pfeil je
in eine solche Gruppe — so steht keins von beiden allein in einer Zeile.
Zwischen den Wörtern des Namens bleibt der Umbruch erlaubt, die Spalte wird
also nicht breiter als nötig. Anlass: Startseite, Zeile „Lieferkette“:
134 px Bedarf bei 130 px Inhaltsbreite, der Pfeil rutschte in die zweite
Zeile (gemessen 24.09.2026). */
.ag-table__zusammen { white-space: nowrap; }
/* Pfeile an Zeilennamen (Control „pfeile", Quelle Startseite) */
.ag-table__pfeil {
display: inline-block; /* QA 10.08.: Theme setzt svg auf block — Pfeil brach um */
margin-left: var(--spacing-ms);
vertical-align: middle;
}
/* ── Mobil (10.77.0, Projekt-Doc tabellen-mobil-konzept-30-09) ──────────
Entscheidung Vincent, 30.09.2026: E1 = alle drei Muster, E2 = Default bleibt
scrollen. Abweichung, bewusst: die Figma-Quelle `table` (1654:22791) kennt
keinen Mobil-Umbau — die Muster sind eine Erweiterung, Rückspielpunkt 0.8.
Drei Modifier am Wrap, einer ist immer gesetzt:
--scrollen Muster B: alle Spalten bleiben, Tabelle wischt, Verlauf am
rechten Rand als Hinweis, Text „Seitlich wischen" (Partial).
Keine feste erste Spalte — nimmt zu viel Platz (Vincent, 30.09.).
--stapeln Muster A: jede Zeile ein Block, jede Zelle trägt ihren
Spaltenkopf (data-label aus dem Partial) als Beschriftung.
--reiter Muster C: wie A, dazu eine Reiterleiste (ag_tab_item) über der
Tabelle; JS (table.js) setzt data-ag-aktiv und blendet die
anderen Spalten aus. Ohne JS bleibt A sichtbar.
Oberhalb 768 gibt es keinen Unterschied; Leiste und Hinweis sind dort weg. */
.ag-table-wrap {
/* Mindestbreite je Spalte beim Wischen. Kein Maß-Token in der Leiter —
Vorschlag: Values/width/spalte-min. */
--ag-table-spalte-min: 180px; /* tmp — kein Figma-Token */
--ag-table-spalte1-min: 140px; /* tmp — kein Figma-Token */
--ag-table-wisch-verlauf: var(--spacing-xl); /* 40 — Breite des Verlaufs am Rand */
}
.ag-table__reiter,
.ag-table__hinweis { display: none; }
@media (max-width: 767px) {
/* ── Muster B: wischen ─────────────────────────────────────────────── */
.ag-table-wrap--scrollen .ag-table th,
.ag-table-wrap--scrollen .ag-table td { min-width: var(--ag-table-spalte-min); }
.ag-table-wrap--scrollen .ag-table th:first-child,
.ag-table-wrap--scrollen .ag-table td:first-child { min-width: var(--ag-table-spalte1-min); }
/* Verlauf am rechten Rand über eine Maske — themeneutral, weil die Tabelle
keine eigene Fläche hat. JS nimmt ihn am Scrollende (is-am-ende) und bei
passender Tabelle (is-passt) weg. */
.ag-table-wrap--scrollen:not(.is-am-ende):not(.is-passt) {
-webkit-mask-image: linear-gradient(to right, black calc(100% - var(--ag-table-wisch-verlauf)), transparent);
mask-image: linear-gradient(to right, black calc(100% - var(--ag-table-wisch-verlauf)), transparent);
}
.ag-table-wrap--scrollen .ag-table__hinweis {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
position: sticky; /* bleibt beim Wischen links stehen */
left: 0;
margin: var(--spacing-s) 0 0;
font-size: var(--ag-copy-xs-fs);
line-height: var(--ag-copy-xs-lh);
font-weight: var(--fw-medium);
color: var(--ag-table-muted);
}
.ag-table-wrap--scrollen.is-passt .ag-table__hinweis { display: none; }
.ag-table__hinweis > svg { display: inline-block; width: 1em; height: 1em; }
/* ── Muster A: stapeln — gilt auch für reiter ──────────────────────── */
.ag-table-wrap--stapeln,
.ag-table-wrap--reiter { overflow-x: visible; }
.ag-table-wrap--stapeln .ag-table,
.ag-table-wrap--stapeln .ag-table tbody,
.ag-table-wrap--stapeln .ag-table tr,
.ag-table-wrap--stapeln .ag-table th,
.ag-table-wrap--stapeln .ag-table td,
.ag-table-wrap--reiter .ag-table,
.ag-table-wrap--reiter .ag-table tbody,
.ag-table-wrap--reiter .ag-table tr,
.ag-table-wrap--reiter .ag-table th,
.ag-table-wrap--reiter .ag-table td {
display: block;
width: 100%;
}
.ag-table-wrap--stapeln .ag-table colgroup,
.ag-table-wrap--stapeln .ag-table thead,
.ag-table-wrap--reiter .ag-table colgroup,
.ag-table-wrap--reiter .ag-table thead { display: none; }
.ag-table-wrap--stapeln .ag-table tr,
.ag-table-wrap--reiter .ag-table tr {
border-top: var(--border-width-xs) solid var(--ag-table-border);
padding-block: var(--spacing-m);
}
.ag-table-wrap--stapeln .ag-table th,
.ag-table-wrap--stapeln .ag-table td,
.ag-table-wrap--reiter .ag-table th,
.ag-table-wrap--reiter .ag-table td {
border-top: 0;
padding: var(--spacing-xs) 0;
}
/* Der Zeilenname ist der Kopf des Blocks — etwas Luft zu den Zellen. */
.ag-table-wrap--stapeln .ag-table tbody th,
.ag-table-wrap--reiter .ag-table tbody th { padding-block-end: var(--spacing-s); }
/* Beschriftung vor der Zelle: der Spaltenkopf, Copy/XS Medium in der
Kopffarbe. Nur wo das Partial ein data-label gesetzt hat (Kopf an). */
.ag-table-wrap--stapeln .ag-table td[data-label]::before,
.ag-table-wrap--reiter .ag-table td[data-label]::before {
content: attr(data-label);
display: block;
margin-block-end: var(--spacing-xxs);
font-size: var(--ag-copy-xs-fs);
line-height: var(--ag-copy-xs-lh);
font-weight: var(--fw-medium);
color: var(--ag-table-muted);
}
/* Zwischentitel bleiben volle Breite ohne Beschriftung. */
.ag-table-wrap--stapeln .ag-table th.ag-table__zwischentitel,
.ag-table-wrap--reiter .ag-table th.ag-table__zwischentitel { padding-block: var(--spacing-s) var(--spacing-xs); }
/* Gestapelt ist rechtsbündig sinnlos — eine Spalte (7.6.0). */
.ag-table-wrap--stapeln.ag-table-wrap--rechts-ab-2 .ag-table td,
.ag-table-wrap--reiter.ag-table-wrap--rechts-ab-2 .ag-table td { text-align: left; }
/* Ohne Trenner: der Block braucht seinen Trenner trotzdem, sonst
verschmelzen die Zeilen (Regel seit 7.6.0). */
/* ── Muster C: Reiter ──────────────────────────────────────────────── */
/* Die Leiste erscheint erst, wenn JS data-ag-aktiv gesetzt hat; vorher
gilt Muster A. Die Reiter sind ag_tab_item-Instanzen (tab-item.css). */
.ag-table-wrap--reiter[data-ag-aktiv] .ag-table__reiter {
display: flex;
flex-wrap: wrap;
gap: 0 var(--spacing-ml);
margin-block-end: var(--spacing-m);
}
.ag-table-wrap--reiter[data-ag-aktiv] .ag-table__reiter .ag-tab-item { flex: 0 1 auto; min-width: 0; }
.ag-table-wrap--reiter[data-ag-aktiv] .ag-table td[data-ag-spalte]:not(.is-aktiv) { display: none; }
/* Der Reiter nennt die Spalte schon — keine Beschriftung doppelt. */
.ag-table-wrap--reiter[data-ag-aktiv] .ag-table td[data-label]::before { display: none; }
/* Zeilenname und Wert als Paar: Name oben, Wert direkt darunter. */
.ag-table-wrap--reiter[data-ag-aktiv] .ag-table tbody th { padding-block-end: var(--spacing-xxs); }
}
/* Härtung gegen das Eltern-Theme (gemessen 11.08.2026, Feedback Vincent Punkt 12).
`hello-elementor/assets/css/reset.css` setzt Zebra und Hover auf JEDE Tabelle:
table tbody>tr:nth-child(odd)>td|th → background hsla(0,0%,50%,.071)
table tbody tr:hover>td|th → background hsla(0,0%,50%,.102)
Spezifität (0,1,3) bzw. (0,1,4) schlägt die Einzelklasse `.ag-table th` (0,1,1) —
deshalb Doppelklasse. Die ag-Tabelle ist NICHT klickbar, ein Hover ist irreführend. */
.ag-table.ag-table tbody > tr:nth-child(odd) > td,
.ag-table.ag-table tbody > tr:nth-child(odd) > th,
.ag-table.ag-table tbody tr:hover > td,
.ag-table.ag-table tbody tr:hover > th {
background-color: transparent;
}
/* Einblendung */
html.ag-anim-ready .ag-table-wrap[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-table-wrap[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-table-wrap[data-ag-anim="reveal"],
html.ag-anim-ready .ag-table-wrap[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-table {
padding-block: var(--ag-table-pad-oben, 0px) var(--ag-table-pad-unten, 0px);
}