first publish

src/components/services/trainings/TrainingsModules.tsx

@@ -0,0 +1,45 @@
+import { Reveal } from "@/components/motion/Reveal";
+import { ModuleTable } from "@/components/ui/ModuleTable";
+import { trainings as trainingsDe, type TrainingsContent } from "@/content/trainings";
+import { SectionHeading } from "@/components/services/SectionHeading";
+
+/**
+ * Page-level corrections to <ModuleTable/> (shared component – see report).
+* Scoped to xl and above, where the ledger has room; between lg and xl the shared
+ * table has a separate, pre-existing problem (the Bodoni titles overrun the
+ * „Ziel“ column) that needs the component itself to move its five-column
+ * layout from `lg:` to `xl:`.
+ *
+ * 1. The „+“ carries `self-start`, so it floated above the right-aligned mono
+ *    meta. The row is already `items-baseline`, so the glyph goes back on
+ *    that baseline and lines up with the meta’s first line.
+ * 2. From 1360 px – the first width at which the mono meta has real slack –
+ *    the trailing glyph column drops from 2 rem to 1 rem (the free space goes
+ *    to the fr columns), so the „+“ no longer sits ~55 px clear of the meta
+ *    and the right edge of the table resolves.
+ * Written out in full – Tailwind only ever sees literal class strings.
+ */
+const MODULE_TABLE_FIX = [
+  "xl:[&_.self-start]:self-baseline",
+  "min-[1360px]:[&>div]:grid-cols-[minmax(0,3.5fr)_minmax(0,3fr)_minmax(0,2fr)_minmax(0,2.2fr)_1rem]",
+  "min-[1360px]:[&_summary]:grid-cols-[minmax(0,3.5fr)_minmax(0,3fr)_minmax(0,2fr)_minmax(0,2.2fr)_1rem]",
+].join(" ");
+
+/**
+ * Leistungsbausteine „Drei Module.“ – ledger table cols 3–12: header row
+ * „Modul | Ziel | Für wen“, one native `<details>` per module (+ → ×),
+ * opening to the hairline-separated „Inhalte“ list.
+ */
+export function TrainingsModules({ content = trainingsDe }: { content?: TrainingsContent }) {
+  const { eyebrow, h2, items } = content.modules;
+  return (
+    <>
+      <SectionHeading eyebrow={eyebrow} h2={h2} className="col-span-12 lg:col-span-6 lg:col-start-3" />
+      <Reveal className="col-span-12 mt-12 lg:col-span-8 lg:col-start-3 lg:mt-16">
+        <ModuleTable modules={items} className={MODULE_TABLE_FIX} />
+      </Reveal>
+    </>
+  );
+}
+
+export default TrainingsModules;