fix(web): remove redundant prop-types and unblock lint pipeline

apps/web/src/payload/actions/generateField.ts

@@ -0,0 +1,191 @@
+"use server";
+
+import { config } from "../../../content-engine.config";
+import { getPayloadHMR } from "@payloadcms/next/utilities";
+import configPromise from "@payload-config";
+import * as fs from "node:fs/promises";
+import * as path from "node:path";
+import * as os from "node:os";
+
+async function getOrchestrator() {
+  const OPENROUTER_KEY =
+    process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
+  const REPLICATE_KEY = process.env.REPLICATE_API_KEY;
+
+  if (!OPENROUTER_KEY) {
+    throw new Error(
+      "Missing OPENROUTER_API_KEY in .env (Required for AI generation)",
+    );
+  }
+
+  const importDynamic = new Function("modulePath", "return import(modulePath)");
+  const { AiBlogPostOrchestrator } = await importDynamic(
+    "@mintel/content-engine",
+  );
+
+  return new AiBlogPostOrchestrator({
+    apiKey: OPENROUTER_KEY,
+    replicateApiKey: REPLICATE_KEY,
+    model: "google/gemini-3-flash-preview",
+  });
+}
+
+export async function generateSlugAction(
+  title: string,
+  draftContent: string,
+  oldSlug?: string,
+  instructions?: string,
+) {
+  try {
+    const orchestrator = await getOrchestrator();
+    const newSlug = await orchestrator.generateSlug(
+      draftContent,
+      title,
+      instructions,
+    );
+
+    if (oldSlug && oldSlug !== newSlug) {
+      const payload = await getPayloadHMR({ config: configPromise });
+      await payload.create({
+        collection: "redirects",
+        data: {
+          from: oldSlug,
+          to: newSlug,
+        },
+      });
+    }
+
+    return { success: true, slug: newSlug };
+  } catch (e: any) {
+    return { success: false, error: e.message };
+  }
+}
+
+export async function generateThumbnailAction(
+  draftContent: string,
+  title?: string,
+  instructions?: string,
+) {
+  try {
+    const payload = await getPayloadHMR({ config: configPromise });
+    const OPENROUTER_KEY =
+      process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
+    const REPLICATE_KEY = process.env.REPLICATE_API_KEY;
+
+    if (!OPENROUTER_KEY) {
+      throw new Error("Missing OPENROUTER_API_KEY in .env");
+    }
+    if (!REPLICATE_KEY) {
+      throw new Error(
+        "Missing REPLICATE_API_KEY in .env (Required for Thumbnails)",
+      );
+    }
+
+    const importDynamic = new Function(
+      "modulePath",
+      "return import(modulePath)",
+    );
+    const { AiBlogPostOrchestrator } = await importDynamic(
+      "@mintel/content-engine",
+    );
+    const { ThumbnailGenerator } = await importDynamic(
+      "@mintel/thumbnail-generator",
+    );
+
+    const orchestrator = new AiBlogPostOrchestrator({
+      apiKey: OPENROUTER_KEY,
+      replicateApiKey: REPLICATE_KEY,
+      model: "google/gemini-3-flash-preview",
+    });
+
+    const tg = new ThumbnailGenerator({ replicateApiKey: REPLICATE_KEY });
+
+    const prompt = await orchestrator.generateVisualPrompt(
+      draftContent || title || "Technology",
+      instructions,
+    );
+
+    const tmpPath = path.join(os.tmpdir(), `mintel-thumb-${Date.now()}.png`);
+    await tg.generateImage(prompt, tmpPath);
+
+    const fileData = await fs.readFile(tmpPath);
+    const stat = await fs.stat(tmpPath);
+    const fileName = path.basename(tmpPath);
+
+    const newMedia = await payload.create({
+      collection: "media",
+      data: {
+        alt: title ? `Thumbnail for ${title}` : "AI Generated Thumbnail",
+      },
+      file: {
+        data: fileData,
+        name: fileName,
+        mimetype: "image/png",
+        size: stat.size,
+      },
+    });
+
+    // Cleanup temp file
+    await fs.unlink(tmpPath).catch(() => {});
+
+    return { success: true, mediaId: newMedia.id };
+  } catch (e: any) {
+    return { success: false, error: e.message };
+  }
+}
+export async function generateSingleFieldAction(
+  documentTitle: string,
+  documentContent: string,
+  fieldName: string,
+  fieldDescription: string,
+  instructions?: string,
+) {
+  try {
+    const OPENROUTER_KEY =
+      process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
+    if (!OPENROUTER_KEY) throw new Error("Missing OPENROUTER_API_KEY");
+
+    const payload = await getPayloadHMR({ config: configPromise });
+
+    // Fetch context documents from DB
+    const contextDocsData = await payload.find({
+      collection: "context-files",
+      limit: 100,
+    });
+    const projectContext = contextDocsData.docs
+      .map((doc) => `--- ${doc.filename} ---\n${doc.content}`)
+      .join("\n\n");
+
+    const prompt = `You are an expert AI assistant perfectly trained for generating exact data values for CMS components.
+PROJECT STRATEGY & CONTEXT:
+${projectContext}
+
+DOCUMENT TITLE: ${documentTitle}
+DOCUMENT DRAFT:\n${documentContent}\n
+YOUR TASK: Generate the exact value for a specific field named "${fieldName}".
+${fieldDescription ? `FIELD DESCRIPTION / CONSTRAINTS: ${fieldDescription}\n` : ""}
+${instructions ? `EDITOR INSTRUCTIONS for this field: ${instructions}\n` : ""}
+CRITICAL RULES:
+1. Respond ONLY with the requested content value. 
+2. NO markdown wrapping blocks (like \`\`\`mermaid or \`\`\`html) around the output! Just the raw code or text.
+3. If the field implies a diagram or flow, output RAW Mermaid.js code. 
+4. If it's standard text, write professional B2B German. No quotes, no conversational filler.`;
+
+    const res = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${OPENROUTER_KEY}`,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        model: "google/gemini-3-flash-preview",
+        messages: [{ role: "user", content: prompt }],
+      }),
+    });
+    const data = await res.json();
+    const text = data.choices?.[0]?.message?.content?.trim() || "";
+    return { success: true, text };
+  } catch (e: any) {
+    return { success: false, error: e.message };
+  }
+}

apps/web/src/payload/actions/optimizePost.ts

@@ -0,0 +1,88 @@
+"use server";
+
+import { config } from "../../../content-engine.config";
+import { revalidatePath } from "next/cache";
+import { parseMarkdownToLexical } from "../utils/lexicalParser";
+import { getPayloadHMR } from "@payloadcms/next/utilities";
+import configPromise from "@payload-config";
+
+export async function optimizePostText(
+  draftContent: string,
+  instructions?: string,
+) {
+  try {
+    const payload = await getPayloadHMR({ config: configPromise });
+    const globalAiSettings = await payload.findGlobal({ slug: "ai-settings" });
+    const customSources =
+      globalAiSettings?.customSources?.map((s: any) => s.sourceName) || [];
+
+    const OPENROUTER_KEY =
+      process.env.OPENROUTER_KEY || process.env.OPENROUTER_API_KEY;
+    const REPLICATE_KEY = process.env.REPLICATE_API_KEY;
+
+    if (!OPENROUTER_KEY) {
+      throw new Error(
+        "OPENROUTER_KEY or OPENROUTER_API_KEY not found in environment.",
+      );
+    }
+
+    const importDynamic = new Function(
+      "modulePath",
+      "return import(modulePath)",
+    );
+    const { AiBlogPostOrchestrator } = await importDynamic(
+      "@mintel/content-engine",
+    );
+
+    const orchestrator = new AiBlogPostOrchestrator({
+      apiKey: OPENROUTER_KEY,
+      replicateApiKey: REPLICATE_KEY,
+      model: "google/gemini-3-flash-preview",
+    });
+
+    // Fetch context documents purely from DB
+    const contextDocsData = await payload.find({
+      collection: "context-files",
+      limit: 100,
+    });
+    const projectContext = contextDocsData.docs.map((doc) => doc.content);
+
+    const optimizedMarkdown = await orchestrator.optimizeDocument({
+      content: draftContent,
+      projectContext,
+      availableComponents: config.components,
+      instructions,
+      internalLinks: [],
+      customSources,
+    });
+
+    // The orchestrator currently returns Markdown + JSX tags.
+    // We convert this mixed string into a basic Lexical AST map.
+
+    if (!optimizedMarkdown || typeof optimizedMarkdown !== "string") {
+      throw new Error("AI returned invalid markup.");
+    }
+
+    const blocks = parseMarkdownToLexical(optimizedMarkdown);
+
+    return {
+      success: true,
+      lexicalAST: {
+        root: {
+          type: "root",
+          format: "",
+          indent: 0,
+          version: 1,
+          children: blocks,
+          direction: "ltr",
+        },
+      },
+    };
+  } catch (error: any) {
+    console.error("Failed to optimize post:", error);
+    return {
+      success: false,
+      error: error.message || "An unknown error occurred during optimization.",
+    };
+  }
+}

apps/web/src/payload/blocks/ArchitectureBuilderBlock.ts

@@ -0,0 +1,28 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const ArchitectureBuilderBlock: MintelBlock = {
+  slug: "architectureBuilder",
+  labels: {
+    singular: "Architecture Builder",
+    plural: "Architecture Builders",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "ArchitectureBuilder",
+    description:
+      "Interactive comparison between a standard SaaS rental approach and a custom Built-First (Mintel) architecture. Useful for articles discussing digital ownership, software rent vs. build, or technological assets. Requires no props.",
+    usageExample: "'<ArchitectureBuilder />'",
+  },
+  fields: [
+    {
+      name: "preset",
+      type: "text",
+      defaultValue: "standard",
+      admin: { description: "Geben Sie den Text für preset ein." },
+    },
+  ],
+};

apps/web/src/payload/blocks/ArticleBlockquoteBlock.ts

@@ -0,0 +1,59 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const ArticleBlockquoteBlock: MintelBlock = {
+  slug: "articleBlockquote",
+  labels: {
+    singular: "Article Blockquote",
+    plural: "Article Blockquotes",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "ArticleBlockquote",
+    description: "Styled blockquote for expert quotes or key statements.",
+    usageExample:
+      "'<ArticleBlockquote>\n  Performance ist keine IT-Kennzahl, sondern ein ökonomischer Hebel.\n</ArticleBlockquote>'",
+  },
+  fields: [
+    {
+      name: "quote",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für quote ein.",
+      },
+    },
+    {
+      name: "author",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für author ein.",
+      },
+    },
+    {
+      name: "role",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für role ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/ArticleMemeBlock.ts

@@ -0,0 +1,54 @@
+import { MintelBlock } from "./types";
+import type { Block } from "payload";
+
+export const ArticleMemeBlock: MintelBlock = {
+  slug: "articleMeme",
+  labels: {
+    singular: "Article Meme",
+    plural: "Article Memes",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "ArticleMeme",
+    description:
+      "Real image-based meme from the media library. Use for static screenshots or custom memes that are not available via memegen.link.",
+    usageExample:
+      '<ArticleMeme image="/media/my-meme.png" alt="Sarcastic dev meme" caption="When the code finally builds." />',
+  },
+  fields: [
+    {
+      name: "image",
+      type: "upload",
+      relationTo: "media",
+      required: true,
+      admin: { description: "Laden Sie die Datei für image hoch." },
+    },
+    {
+      name: "alt",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für alt ein.",
+      },
+    },
+    {
+      name: "caption",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für caption ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/ArticleQuoteBlock.ts

@@ -0,0 +1,97 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const ArticleQuoteBlock: MintelBlock = {
+  slug: "articleQuote",
+  labels: {
+    singular: "Article Quote",
+    plural: "Article Quotes",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "ArticleQuote",
+    description:
+      "Dark-themed quote card. Use for expert quotes or statements. Use isCompany={true} for brands/orgs to show an entity icon instead of personal initials. MANDATORY: always include source and sourceUrl for verifiability. Props: quote, author, role (optional), source (REQUIRED), sourceUrl (REQUIRED), isCompany (optional), translated (optional boolean).",
+    usageExample:
+      '\'<ArticleQuote quote="Optimizing for speed." author="Google" isCompany={true',
+  },
+  fields: [
+    {
+      name: "quote",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für quote ein.",
+      },
+    },
+    {
+      name: "author",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für author ein.",
+      },
+    },
+    {
+      name: "role",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für role ein.",
+      },
+    },
+    {
+      name: "source",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für source ein.",
+      },
+    },
+    {
+      name: "sourceUrl",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für sourceUrl ein.",
+      },
+    },
+    {
+      name: "translated",
+      type: "checkbox",
+      defaultValue: false,
+      admin: { description: "Wert für translated eingeben." },
+    },
+    {
+      name: "isCompany",
+      type: "checkbox",
+      defaultValue: false,
+      admin: { description: "Wert für isCompany eingeben." },
+    },
+  ],
+};

apps/web/src/payload/blocks/BoldNumberBlock.ts

@@ -0,0 +1,72 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const BoldNumberBlock: MintelBlock = {
+  slug: "boldNumber",
+  labels: {
+    singular: "Bold Number",
+    plural: "Bold Numbers",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "BoldNumber",
+    description: "Large centerpiece number with label for primary statistics.",
+    usageExample:
+      '\'<BoldNumber value="5x" label="höhere Conversion-Rate" source="Portent" />\'',
+  },
+  fields: [
+    {
+      name: "value",
+      type: "text",
+      required: true,
+      admin: {
+        description: "e.g. 53% or 2.5M€",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+    {
+      name: "label",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für label ein.",
+      },
+    },
+    {
+      name: "source",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für source ein.",
+      },
+    },
+    {
+      name: "sourceUrl",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für sourceUrl ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/ButtonBlock.ts

@@ -0,0 +1,69 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const ButtonBlock: MintelBlock = {
+  slug: "buttonBlock",
+  labels: {
+    singular: "Button Block",
+    plural: "Button Blocks",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "Button",
+    description:
+      "DEPRECATED: Use <LeadMagnet /> instead for main CTAs. Only use for small secondary links.",
+    usageExample:
+      '<Button href="/contact" variant="outline">Webprojekt anfragen</Button>',
+  },
+  fields: [
+    {
+      name: "label",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für label ein.",
+      },
+    },
+    {
+      name: "href",
+      type: "text",
+      required: true,
+      admin: { description: "Geben Sie den Text für href ein." },
+    },
+    {
+      name: "variant",
+      type: "select",
+      options: [
+        { label: "Primary", value: "primary" },
+        { label: "Outline", value: "outline" },
+        { label: "Ghost", value: "ghost" },
+      ],
+      defaultValue: "primary",
+      admin: { description: "Wählen Sie eine Option für variant aus." },
+    },
+    {
+      name: "size",
+      type: "select",
+      options: [
+        { label: "Normal", value: "normal" },
+        { label: "Large", value: "large" },
+      ],
+      defaultValue: "normal",
+      admin: { description: "Wählen Sie eine Option für size aus." },
+    },
+    {
+      name: "showArrow",
+      type: "checkbox",
+      defaultValue: true,
+      admin: { description: "Wert für showArrow eingeben." },
+    },
+  ],
+};

apps/web/src/payload/blocks/CarouselBlock.ts

@@ -0,0 +1,48 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const CarouselBlock: MintelBlock = {
+  slug: "carousel",
+  labels: {
+    singular: "Carousel",
+    plural: "Carousels",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "Carousel",
+    description:
+      "Interactive swipeable slider for multi-step explanations. IMPORTANT: items array must contain at least 2 items with substantive title and content text (no empty content).",
+    usageExample:
+      '\'<Carousel items={[{ title: "Schritt 1", content: "Analyse der aktuellen Performance..."',
+  },
+  fields: [
+    {
+      name: "slides",
+      type: "array",
+      fields: [
+        {
+          name: "image",
+          type: "upload",
+          relationTo: "media",
+          admin: { description: "Laden Sie die Datei für image hoch." },
+        },
+        {
+          name: "caption",
+          type: "text",
+          admin: {
+            components: {
+              afterInput: [
+                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+              ],
+            },
+            description: "Geben Sie den Text für caption ein.",
+          },
+        },
+      ],
+      admin: { description: "Fügen Sie Elemente zur Liste slides hinzu." },
+    },
+  ],
+};

apps/web/src/payload/blocks/ComparisonRowBlock.ts

@@ -0,0 +1,102 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const ComparisonRowBlock: MintelBlock = {
+  slug: "comparisonRow",
+  labels: {
+    singular: "Comparison Row",
+    plural: "Comparison Rows",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "ComparisonRow",
+    description:
+      'Side-by-side comparison: negative "Standard" approach vs positive "Mintel" approach. Props include showShare boolean.',
+    usageExample: `<ComparisonRow
+  description="Architektur-Vergleich"
+  negativeLabel="Legacy CMS"
+  negativeText="Langsame Datenbankabfragen, verwundbare Plugins."
+  positiveLabel="Mintel Stack"
+  positiveText="Statische Generierung, perfekte Sicherheit."
+  showShare={true`,
+  },
+  fields: [
+    {
+      name: "description",
+      type: "text",
+      admin: {
+        description: "Optional overarching description for the comparison.",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+    {
+      name: "negativeLabel",
+      type: "text",
+      required: true,
+      defaultValue: "Legacy",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für negativeLabel ein.",
+      },
+    },
+    {
+      name: "negativeText",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für negativeText ein.",
+      },
+    },
+    {
+      name: "positiveLabel",
+      type: "text",
+      required: true,
+      defaultValue: "Mintel Stack",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für positiveLabel ein.",
+      },
+    },
+    {
+      name: "positiveText",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für positiveText ein.",
+      },
+    },
+    {
+      name: "reverse",
+      type: "checkbox",
+      defaultValue: false,
+      admin: {
+        description: "Swap the visual order of the positive/negative cards?",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/DiagramFlowBlock.ts

@@ -0,0 +1,35 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const DiagramFlowBlock: MintelBlock = {
+  slug: "diagramFlow",
+  labels: {
+    singular: "Diagram Flow",
+    plural: "Diagram Flows",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "DiagramFlow",
+    description:
+      "Mermaid flowchart diagram defining the graph structure. MUST output raw mermaid code, no quotes or HTML.",
+    usageExample: "graph TD\\n  A[Start] --> B[End]",
+  },
+  fields: [
+    {
+      name: "definition",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für definition ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/DiagramGanttBlock.ts

@@ -0,0 +1,35 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const DiagramGanttBlock: MintelBlock = {
+  slug: "diagramGantt",
+  labels: {
+    singular: "Diagram Gantt",
+    plural: "Diagram Gantts",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "DiagramGantt",
+    description: "Mermaid Gantt timeline chart. MUST output raw mermaid code.",
+    usageExample:
+      "gantt\\n  title Project Roadmap\\n  dateFormat YYYY-MM-DD\\n  Section Design\\n  Draft UI :a1, 2024-01-01, 7d",
+  },
+  fields: [
+    {
+      name: "definition",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für definition ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/DiagramPieBlock.ts

@@ -0,0 +1,34 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const DiagramPieBlock: MintelBlock = {
+  slug: "diagramPie",
+  labels: {
+    singular: "Diagram Pie",
+    plural: "Diagram Pies",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "DiagramPie",
+    description: "Mermaid pie chart diagram. MUST output raw mermaid code.",
+    usageExample: 'pie title Market Share\\n  "Chrome" : 60\\n  "Safari" : 20',
+  },
+  fields: [
+    {
+      name: "definition",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für definition ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/DiagramSequenceBlock.ts

@@ -0,0 +1,36 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const DiagramSequenceBlock: MintelBlock = {
+  slug: "diagramSequence",
+  labels: {
+    singular: "Diagram Sequence",
+    plural: "Diagram Sequences",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "DiagramSequence",
+    description:
+      "Mermaid sequence diagram showing actor interactions. MUST output raw mermaid code.",
+    usageExample:
+      "sequenceDiagram\\n  Client->>Server: GET /api\\n  Server-->>Client: 200 OK",
+  },
+  fields: [
+    {
+      name: "definition",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für definition ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/DiagramStateBlock.ts

@@ -0,0 +1,35 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const DiagramStateBlock: MintelBlock = {
+  slug: "diagramState",
+  labels: {
+    singular: "Diagram State",
+    plural: "Diagram States",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "DiagramState",
+    description:
+      "Mermaid state diagram showing states and transitions. MUST output raw mermaid code.",
+    usageExample: "stateDiagram-v2\\n  [*] --> Idle\\n  Idle --> Loading",
+  },
+  fields: [
+    {
+      name: "definition",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für definition ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/DiagramTimelineBlock.ts

@@ -0,0 +1,36 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const DiagramTimelineBlock: MintelBlock = {
+  slug: "diagramTimeline",
+  labels: {
+    singular: "Diagram Timeline",
+    plural: "Diagram Timelines",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "DiagramTimeline",
+    description:
+      "Mermaid timeline or journey diagram. MUST output raw mermaid code.",
+    usageExample:
+      "timeline\\n  title Project Timeline\\n  2024\\n    : Q1 : Planning\\n    : Q2 : Execution",
+  },
+  fields: [
+    {
+      name: "definition",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für definition ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/DigitalAssetVisualizerBlock.ts

@@ -0,0 +1,27 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const DigitalAssetVisualizerBlock: MintelBlock = {
+  slug: "digitalAssetVisualizer",
+  labels: {
+    singular: "Digital Asset Visualizer",
+    plural: "Digital Asset Visualizers",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "DigitalAssetVisualizer",
+    description:
+      "Interactive visualization illustrating the financial difference between software as a liability (SaaS/rent) and software as a digital asset (Custom IP). Great for articles concerning CTO strategies, business value of code, and digital independence. Requires no props.",
+    usageExample: "'<DigitalAssetVisualizer />'",
+  },
+  fields: [
+    {
+      name: "assetId",
+      type: "text",
+      admin: { description: "Geben Sie den Text für assetId ein." },
+    },
+  ],
+};

apps/web/src/payload/blocks/ExternalLinkBlock.ts

@@ -0,0 +1,42 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const ExternalLinkBlock: MintelBlock = {
+  slug: "externalLink",
+  labels: {
+    singular: "External Link",
+    plural: "External Links",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "ExternalLink",
+    description:
+      "Inline external link with ↗ icon and outbound analytics tracking. Use for all source citations and external references within Paragraph text.",
+    usageExample:
+      "'<ExternalLink href=\"https://web.dev/articles/vitals\">Google Core Web Vitals</ExternalLink>'",
+  },
+  fields: [
+    {
+      name: "href",
+      type: "text",
+      required: true,
+      admin: { description: "Geben Sie den Text für href ein." },
+    },
+    {
+      name: "label",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für label ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/FAQSectionBlock.ts

@@ -0,0 +1,47 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+import { lexicalEditor, BlocksFeature } from "@payloadcms/richtext-lexical";
+import { HeadingBlock } from "./HeadingBlock";
+import { ParagraphBlock } from "./ParagraphBlock";
+import { ExternalLinkBlock } from "./ExternalLinkBlock";
+import { TrackedLinkBlock } from "./TrackedLinkBlock";
+
+export const FAQSectionBlock: MintelBlock = {
+  slug: "faqSection",
+  labels: {
+    singular: "Faq Section",
+    plural: "Faq Sections",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "FAQSection",
+    description:
+      "Semantic wrapper for FAQ questions at the end of the article. Put standard Markdown H3/Paragraphs inside.",
+    usageExample:
+      "'<FAQSection>\n  <H3>Frage 1</H3>\n  <Paragraph>Antwort 1</Paragraph>\n</FAQSection>'",
+  },
+  fields: [
+    {
+      name: "content",
+      type: "richText",
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          BlocksFeature({
+            blocks: [
+              HeadingBlock,
+              ParagraphBlock,
+              ExternalLinkBlock,
+              TrackedLinkBlock,
+            ].map(({ ai, render, ...b }) => b),
+          }),
+        ],
+      }),
+      required: true,
+      admin: { description: "Formatierter Textbereich für content." },
+    },
+  ],
+};

apps/web/src/payload/blocks/H2Block.ts

@@ -0,0 +1,24 @@
+import type { MintelBlock } from "./types";
+
+export const H2Block: MintelBlock = {
+  slug: "mintelH2",
+  labels: {
+    singular: "Heading 2",
+    plural: "Headings 2",
+  },
+  fields: [
+    {
+      name: "text",
+      type: "text",
+      required: true,
+      admin: {
+        description: "Geben Sie den Text für die H2-Überschrift ein.",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/H3Block.ts

@@ -0,0 +1,24 @@
+import type { MintelBlock } from "./types";
+
+export const H3Block: MintelBlock = {
+  slug: "mintelH3",
+  labels: {
+    singular: "Heading 3",
+    plural: "Headings 3",
+  },
+  fields: [
+    {
+      name: "text",
+      type: "text",
+      required: true,
+      admin: {
+        description: "Geben Sie den Text für die H3-Überschrift ein.",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/HeadingBlock.ts

@@ -0,0 +1,50 @@
+import { MintelBlock } from "./types";
+
+export const HeadingBlock: MintelBlock = {
+  slug: "mintelHeading",
+  labels: {
+    singular: "Heading",
+    plural: "Headings",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "Heading",
+    description:
+      "Flexible heading component with separated SEO and visual display levels.",
+    usageExample:
+      '\'<Heading seoLevel="h2" displayLevel="h3">Titel</Heading>\'',
+  },
+  fields: [
+    {
+      name: "text",
+      type: "text",
+      required: true,
+      admin: {
+        description: "Der Text der Überschrift.",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+    {
+      name: "seoLevel",
+      type: "select",
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"],
+      defaultValue: "h2",
+      admin: { description: "Das semantische HTML-Tag für SEO." },
+    },
+    {
+      name: "displayLevel",
+      type: "select",
+      options: ["h1", "h2", "h3", "h4", "h5", "h6"],
+      defaultValue: "h2",
+      admin: {
+        description: "Die visuelle Größe der Überschrift (unabhängig von SEO).",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/IconListBlock.ts

@@ -0,0 +1,69 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const IconListBlock: MintelBlock = {
+  slug: "iconList",
+  labels: {
+    singular: "Icon List",
+    plural: "Icon Lists",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "IconList",
+    description:
+      "Checklist with check/cross icons. Wrap IconListItem children inside.",
+    usageExample: `<IconList>
+  <IconListItem check>
+    <strong>Zero-Computation:</strong> Statische Seiten, kein Serverwarten.
+  </IconListItem>
+  <IconListItem cross>
+    <strong>Legacy CMS:</strong> Datenbankabfragen bei jedem Request.
+  </IconListItem>
+</IconList>`,
+  },
+  fields: [
+    {
+      name: "items",
+      type: "array",
+      fields: [
+        {
+          name: "icon",
+          type: "text",
+          admin: {
+            description: "Lucide icon",
+            components: { Field: "@/src/payload/components/IconSelector" },
+          },
+        },
+        {
+          name: "title",
+          type: "text",
+          required: true,
+          admin: {
+            components: {
+              afterInput: [
+                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+              ],
+            },
+            description: "Geben Sie den Text für title ein.",
+          },
+        },
+        {
+          name: "description",
+          type: "textarea",
+          admin: {
+            components: {
+              afterInput: [
+                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+              ],
+            },
+            description: "Geben Sie den mehrzeiligen Text für description ein.",
+          },
+        },
+      ],
+      admin: { description: "Fügen Sie Elemente zur Liste items hinzu." },
+    },
+  ],
+};

apps/web/src/payload/blocks/ImageTextBlock.ts

@@ -0,0 +1,52 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const ImageTextBlock: MintelBlock = {
+  slug: "imageText",
+  labels: {
+    singular: "Image Text",
+    plural: "Image Texts",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "ImageText",
+    description: "Layout component for image next to explanatory text.",
+    usageExample:
+      '\'<ImageText image="/img.jpg" title="Architektur">Erklärung...</ImageText>\'',
+  },
+  fields: [
+    {
+      name: "image",
+      type: "upload",
+      relationTo: "media",
+      required: true,
+      admin: { description: "Laden Sie die Datei für image hoch." },
+    },
+    {
+      name: "text",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für text ein.",
+      },
+    },
+    {
+      name: "alignment",
+      type: "select",
+      options: [
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" },
+      ],
+      defaultValue: "left",
+      admin: { description: "Wählen Sie eine Option für alignment aus." },
+    },
+  ],
+};

apps/web/src/payload/blocks/LeadMagnetBlock.ts

@@ -0,0 +1,81 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const LeadMagnetBlock: MintelBlock = {
+  slug: "leadMagnet",
+  labels: {
+    singular: "Lead Magnet CTA",
+    plural: "Lead Magnet CTAs",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "LeadMagnet",
+    description:
+      "Premium B2B conversion card. Use 1-2 per article as main high-impact CTAs. Props: title (strong headline), description (value prop), buttonText (action), href (link), variant (performance|security|standard).",
+    usageExample:
+      '\'<LeadMagnet title="Performance-Check anfragen" description="Wir analysieren Ihre Core Web Vitals und decken Umsatzpotenziale auf." buttonText="Jetzt analysieren lassen" href="/contact" variant="performance" />\'',
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      required: true,
+      admin: {
+        description: "The strong headline for the Call-to-Action",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+    {
+      name: "description",
+      type: "text",
+      required: true,
+      admin: {
+        description: "The value proposition text.",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+    {
+      name: "buttonText",
+      type: "text",
+      required: true,
+      defaultValue: "Jetzt anfragen",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für buttonText ein.",
+      },
+    },
+    {
+      name: "href",
+      type: "text",
+      required: true,
+      defaultValue: "/contact",
+      admin: { description: "Geben Sie den Text für href ein." },
+    },
+    {
+      name: "variant",
+      type: "select",
+      options: [
+        { label: "Performance", value: "performance" },
+        { label: "Security", value: "security" },
+        { label: "Standard", value: "standard" },
+      ],
+      defaultValue: "standard",
+      admin: { description: "Wählen Sie eine Option für variant aus." },
+    },
+  ],
+};

apps/web/src/payload/blocks/LeadParagraphBlock.ts

@@ -0,0 +1,36 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const LeadParagraphBlock: MintelBlock = {
+  slug: "leadParagraph",
+  labels: {
+    singular: "Lead Paragraph",
+    plural: "Lead Paragraphs",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "LeadParagraph",
+    description:
+      "Larger, emphasized paragraph for the article introduction. Use 1-3 at the start.",
+    usageExample:
+      "'<LeadParagraph>\n  Unternehmen investieren oft Unsummen in glänzende Oberflächen, während das technische Fundament bröckelt.\n</LeadParagraph>'",
+  },
+  fields: [
+    {
+      name: "text",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für text ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/LinkedInEmbedBlock.ts

@@ -0,0 +1,29 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const LinkedInEmbedBlock: MintelBlock = {
+  slug: "linkedInEmbed",
+  labels: {
+    singular: "Linked In Embed",
+    plural: "Linked In Embeds",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "LinkedInEmbed",
+    description:
+      "Embeds a professional post from LinkedIn. Use the activity URN (e.g. urn:li:activity:1234567890).",
+    usageExample:
+      "'<LinkedInEmbed urn=\"urn:li:activity:7153664326573674496\" />'",
+  },
+  fields: [
+    {
+      name: "url",
+      type: "text",
+      required: true,
+      admin: { description: "Geben Sie den Text für url ein." },
+    },
+  ],
+};

apps/web/src/payload/blocks/LoadTimeSimulatorBlock.ts

@@ -0,0 +1,31 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const LoadTimeSimulatorBlock: MintelBlock = {
+  slug: "loadTimeSimulator",
+  labels: {
+    singular: "Load Time Simulator",
+    plural: "Load Time Simulators",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "LoadTimeSimulator",
+    description:
+      "Interactive visual race simulating the loading experience of a slow legacy CMS vs a fast headless stack. Great for articles discussing load times, technical debt, or user frustration. Requires no props.",
+    usageExample: "'<LoadTimeSimulator />'",
+  },
+  fields: [
+    {
+      name: "initialLoadTime",
+      type: "number",
+      defaultValue: 3.5,
+      admin: {
+        description:
+          "Tragen Sie einen numerischen Wert für initialLoadTime ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/MarkerBlock.ts

@@ -0,0 +1,51 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const MarkerBlock: MintelBlock = {
+  slug: "marker",
+  labels: {
+    singular: "Marker",
+    plural: "Markers",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "Marker",
+    description:
+      "Inline highlight (yellow marker effect) for emphasizing key phrases within paragraphs.",
+    usageExample: "'<Marker>entscheidender Wettbewerbsvorteil</Marker>'",
+  },
+  fields: [
+    {
+      name: "text",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für text ein.",
+      },
+    },
+    {
+      name: "color",
+      type: "text",
+      admin: {
+        description: "Hex or rgba color",
+        components: { Field: "@/src/payload/components/ColorPicker" },
+      },
+    },
+    {
+      name: "delay",
+      type: "number",
+      defaultValue: 0,
+      admin: {
+        description: "Tragen Sie einen numerischen Wert für delay ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/MemeCardBlock.ts

@@ -0,0 +1,51 @@
+import { MintelBlock } from "./types";
+import type { Block } from "payload";
+
+export const MemeCardBlock: MintelBlock = {
+  slug: "memeCard",
+  labels: {
+    singular: "Meme Card",
+    plural: "Meme Cards",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "MemeCard",
+    description:
+      'Real meme image from memegen.link. template must be a valid memegen.link ID. IMPORTANT: Captions must be EXTREMELY SARCASTIC and PUNCHY (mocking bad B2B agencies, max 6 words per line). Best templates: drake (2-line prefer/dislike), gru (4-step plan backfire), disastergirl (burning house), fine (this is fine dog). Use German captions. Wrap in div with className="my-8".',
+    usageExample: `<div className="my-8">
+  <MemeCard template="drake" captions="47 WordPress Plugins installieren|Eine saubere Serverless Architektur" />
+</div>`,
+  },
+  fields: [
+    {
+      name: "template",
+      type: "text",
+      required: true,
+      admin: {
+        description:
+          "The template ID from memegen.link (e.g. 'drake', 'disastergirl')",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+    {
+      name: "captions",
+      type: "textarea",
+      required: true,
+      admin: {
+        description:
+          "Pipe-separated captions for the meme (e.g. 'Legacy Code|Mintel Stack'). Maximum 6 words per line.",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/MermaidBlock.ts

@@ -0,0 +1,68 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const MermaidBlock: MintelBlock = {
+  slug: "mermaid",
+  labels: {
+    singular: "Mermaid",
+    plural: "Mermaids",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "Mermaid",
+    description:
+      'Renders a Mermaid.js diagram (flowchart, sequence, pie, etc.). Diagram code goes as children. Keep it tiny (max 3-4 nodes). Wrap in div with className="my-8".',
+    usageExample: `<div className="my-8">
+  <Mermaid id="my-diagram" title="System Architecture" showShare={true`,
+  },
+  fields: [
+    {
+      name: "id",
+      type: "text",
+      required: true,
+      admin: {
+        description:
+          "A unique ASCII ID for the diagram (e.g. 'architecture-1').",
+      },
+    },
+    {
+      name: "title",
+      type: "text",
+      required: false,
+      admin: {
+        description: "Optional title displayed above the diagram.",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+    {
+      name: "showShare",
+      type: "checkbox",
+      defaultValue: false,
+      admin: {
+        description: "Show the share button for this diagram?",
+      },
+    },
+    {
+      name: "chartDefinition",
+      type: "code",
+      required: true,
+      admin: {
+        language: "markdown",
+        description:
+          "The raw Mermaid.js syntax (e.g. graph TD... shadowing, loops, etc.).",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/MetricBarBlock.ts

@@ -0,0 +1,68 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const MetricBarBlock: MintelBlock = {
+  slug: "metricBar",
+  labels: {
+    singular: "Metric Bar",
+    plural: "Metric Bars",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "MetricBar",
+    description:
+      "Animated horizontal progress bar. Use multiple in sequence to compare metrics. IMPORTANT: value MUST be a real number > 0, never use 0 or placeholder values. Props: label, value (number), max (default 100), unit (default %), color (red|green|blue|slate).",
+    usageExample: '<MetricBar label="WordPress Sites" value={33',
+  },
+  fields: [
+    {
+      name: "label",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für label ein.",
+      },
+    },
+    {
+      name: "value",
+      type: "number",
+      required: true,
+      admin: { description: "Percentage 0-100" },
+    },
+    {
+      name: "max",
+      type: "number",
+      defaultValue: 100,
+      admin: { description: "Tragen Sie einen numerischen Wert für max ein." },
+    },
+    {
+      name: "unit",
+      type: "text",
+      defaultValue: "%",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für unit ein.",
+      },
+    },
+    {
+      name: "color",
+      type: "text",
+      admin: {
+        components: { Field: "@/src/payload/components/ColorPicker" },
+        description: "Geben Sie den Text für color ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/ParagraphBlock.ts

@@ -0,0 +1,36 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const ParagraphBlock: MintelBlock = {
+  slug: "mintelP",
+  labels: {
+    singular: "Paragraph",
+    plural: "Paragraphs",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "Paragraph",
+    description:
+      "Standard body text paragraph. All body text must be wrapped in this.",
+    usageExample:
+      "'<Paragraph>\n  Mein System ist kein Kostenfaktor, sondern ein <Marker>ROI-Beschleuniger</Marker>.\n</Paragraph>'",
+  },
+  fields: [
+    {
+      name: "text",
+      type: "textarea",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den mehrzeiligen Text für text ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/PerformanceChartBlock.ts

@@ -0,0 +1,36 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const PerformanceChartBlock: MintelBlock = {
+  slug: "performanceChart",
+  labels: {
+    singular: "Performance Chart",
+    plural: "Performance Charts",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "PerformanceChart",
+    description:
+      "A visual chart illustrating performance metrics (e.g. PageSpeed, TTFB) over time or in comparison. Use to emphasize technical improvements.",
+    usageExample:
+      '<PerformanceChart items={[{ label: "Vorher", value: 12 }, { label: "Nachher", value: 98 }]} />',
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      defaultValue: "Website Performance",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für title ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/PerformanceROICalculatorBlock.ts

@@ -0,0 +1,40 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const PerformanceROICalculatorBlock: MintelBlock = {
+  slug: "performanceROICalculator",
+  labels: {
+    singular: "Performance R O I Calculator",
+    plural: "Performance R O I Calculators",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "PerformanceROICalculator",
+    description:
+      "Interactive simulation calculator showing the monetary ROI of improving load times (based on Deloitte B2B metrics). Use exactly once in performance-related articles to provide a highly engaging simulation. Requires no props.",
+    usageExample: "'<PerformanceROICalculator />'",
+  },
+  fields: [
+    {
+      name: "baseConversionRate",
+      type: "number",
+      defaultValue: 2.5,
+      admin: {
+        description:
+          "Tragen Sie einen numerischen Wert für baseConversionRate ein.",
+      },
+    },
+    {
+      name: "monthlyVisitors",
+      type: "number",
+      defaultValue: 50000,
+      admin: {
+        description:
+          "Tragen Sie einen numerischen Wert für monthlyVisitors ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/PremiumComparisonChartBlock.ts

@@ -0,0 +1,115 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const PremiumComparisonChartBlock: MintelBlock = {
+  slug: "premiumComparisonChart",
+  labels: {
+    singular: "Premium Comparison Chart",
+    plural: "Premium Comparison Charts",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "PremiumComparisonChart",
+    description:
+      "Advanced chart for comparing performance metrics with industrial aesthetics.",
+    usageExample:
+      '\'<PremiumComparisonChart title="TTFB Vergleich" items={[{ label: "Alt", value: 800, max: 1000, color: "red"',
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für title ein.",
+      },
+    },
+    {
+      name: "subtitle",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für subtitle ein.",
+      },
+    },
+    {
+      name: "datasets",
+      type: "array",
+      fields: [
+        {
+          name: "label",
+          type: "text",
+          required: true,
+          admin: {
+            components: {
+              afterInput: [
+                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+              ],
+            },
+            description: "Geben Sie den Text für label ein.",
+          },
+        },
+        {
+          name: "value",
+          type: "number",
+          required: true,
+          admin: {
+            description: "Tragen Sie einen numerischen Wert für value ein.",
+          },
+        },
+        {
+          name: "max",
+          type: "number",
+          defaultValue: 100,
+          admin: {
+            description: "Tragen Sie einen numerischen Wert für max ein.",
+          },
+        },
+        {
+          name: "unit",
+          type: "text",
+          admin: {
+            components: {
+              afterInput: [
+                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+              ],
+            },
+            description: "Geben Sie den Text für unit ein.",
+          },
+        },
+        {
+          name: "color",
+          type: "text",
+          admin: {
+            components: { Field: "@/src/payload/components/ColorPicker" },
+            description: "Geben Sie den Text für color ein.",
+          },
+        },
+        {
+          name: "description",
+          type: "text",
+          admin: {
+            components: {
+              afterInput: [
+                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+              ],
+            },
+            description: "Geben Sie den Text für description ein.",
+          },
+        },
+      ],
+      admin: { description: "Fügen Sie Elemente zur Liste datasets hinzu." },
+    },
+  ],
+};

apps/web/src/payload/blocks/RevealBlock.ts

@@ -0,0 +1,51 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+import { lexicalEditor } from "@payloadcms/richtext-lexical";
+
+export const RevealBlock: MintelBlock = {
+  slug: "mintelReveal",
+  labels: {
+    singular: "Reveal Wrap",
+    plural: "Reveal Wraps",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "Reveal",
+    description:
+      "Scroll-triggered reveal animation wrapper. Wrap any content to animate on scroll.",
+    usageExample:
+      '\'<Reveal>\n  <StatsDisplay value="100" label="PageSpeed Score" />\n</Reveal>\'',
+  },
+  fields: [
+    {
+      name: "direction",
+      type: "select",
+      options: [
+        { label: "Up", value: "up" },
+        { label: "Down", value: "down" },
+        { label: "Left", value: "left" },
+        { label: "Right", value: "right" },
+      ],
+      defaultValue: "up",
+      admin: { description: "Wählen Sie eine Option für direction aus." },
+    },
+    {
+      name: "delay",
+      type: "number",
+      defaultValue: 0.1,
+      admin: {
+        description: "Tragen Sie einen numerischen Wert für delay ein.",
+      },
+    },
+    {
+      name: "content",
+      type: "richText",
+      editor: lexicalEditor({}),
+      required: true,
+      admin: { description: "Formatierter Textbereich für content." },
+    },
+  ],
+};

apps/web/src/payload/blocks/RevenueLossCalculatorBlock.ts

@@ -0,0 +1,35 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const RevenueLossCalculatorBlock: MintelBlock = {
+  slug: "revenueLossCalculator",
+  labels: {
+    singular: "Revenue Loss Calculator",
+    plural: "Revenue Loss Calculators",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "RevenueLossCalculator",
+    description:
+      "Interactive calculator that estimates financial loss due to slow page load times. Use to build a business case for performance optimization.",
+    usageExample: "<RevenueLossCalculator />",
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      defaultValue: "Performance Revenue Simulator",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für title ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/SectionBlock.ts

@@ -0,0 +1,42 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+import { lexicalEditor } from "@payloadcms/richtext-lexical";
+
+export const SectionBlock: MintelBlock = {
+  slug: "mintelSection",
+  labels: {
+    singular: "Section Wrap",
+    plural: "Section Wraps",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "Section",
+    description: "Wraps a thematic section block with optional heading.",
+    usageExample:
+      "'<Section>\n  <h3>Section Title</h3>\n  <p>Content here.</p>\n</Section>'",
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für title ein.",
+      },
+    },
+    {
+      name: "content",
+      type: "richText",
+      editor: lexicalEditor({}),
+      required: true,
+      admin: { description: "Formatierter Textbereich für content." },
+    },
+  ],
+};

apps/web/src/payload/blocks/StatsDisplayBlock.ts

@@ -0,0 +1,60 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const StatsDisplayBlock: MintelBlock = {
+  slug: "statsDisplay",
+  labels: {
+    singular: "Stats Display",
+    plural: "Stats Displays",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "StatsDisplay",
+    description:
+      "A single large stat card with prominent value, label, and optional subtext.",
+    usageExample:
+      '\'<StatsDisplay value="-20%" label="Conversion" subtext="Jede Sekunde Verzögerung kostet." />\'',
+  },
+  fields: [
+    {
+      name: "label",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für label ein.",
+      },
+    },
+    {
+      name: "value",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für value ein.",
+      },
+    },
+    {
+      name: "subtext",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für subtext ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/StatsGridBlock.ts

@@ -0,0 +1,56 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const StatsGridBlock: MintelBlock = {
+  slug: "statsGrid",
+  labels: {
+    singular: "Stats Grid",
+    plural: "Stats Grids",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "StatsGrid",
+    description:
+      "Grid of 2–4 stat cards in a row. Use tilde (~) to separate stats, pipe (|) to separate value|label|subtext within each stat.",
+    usageExample:
+      "'<StatsGrid stats=\"53%|Mehr Umsatz|Rakuten 24~33%|Conversion Boost|nach CWV Fix~24%|Top 3 Ranking|bei bestandenen CWV\" />'",
+  },
+  fields: [
+    {
+      name: "stats",
+      type: "array",
+      fields: [
+        {
+          name: "label",
+          type: "text",
+          required: true,
+          admin: {
+            components: {
+              afterInput: [
+                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+              ],
+            },
+            description: "Geben Sie den Text für label ein.",
+          },
+        },
+        {
+          name: "value",
+          type: "text",
+          required: true,
+          admin: {
+            components: {
+              afterInput: [
+                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+              ],
+            },
+            description: "Geben Sie den Text für value ein.",
+          },
+        },
+      ],
+      admin: { description: "Fügen Sie Elemente zur Liste stats hinzu." },
+    },
+  ],
+};

apps/web/src/payload/blocks/TLDRBlock.ts

@@ -0,0 +1,35 @@
+import { MintelBlock } from "./types";
+import type { Block } from "payload";
+
+export const TLDRBlock: MintelBlock = {
+  slug: "mintelTldr",
+  labels: {
+    singular: "TL;DR Block",
+    plural: "TL;DR Blocks",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "TLDR",
+    description:
+      "Presents a bite-sized summary of the article in a premium dark card. Use exactly once at the very beginning.",
+    usageExample:
+      "'<TLDR>\n  Stabilität ist kein Zufall, sondern das Ergebnis einer Clean Code Strategie.\n</TLDR>'",
+  },
+  fields: [
+    {
+      name: "content",
+      type: "textarea",
+      required: true,
+      admin: {
+        description: "The summary content for the TLDR box.",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/TrackedLinkBlock.ts

@@ -0,0 +1,48 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const TrackedLinkBlock: MintelBlock = {
+  slug: "trackedLink",
+  labels: {
+    singular: "Tracked Link",
+    plural: "Tracked Links",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "TrackedLink",
+    description:
+      "A wrapper around next/link that tracks clicks. Use for all INTERNAL navigational links that should be tracked.",
+    usageExample:
+      '\'<TrackedLink href="/contact" className="text-blue-600 font-bold">Jetzt anfragen</TrackedLink>\'',
+  },
+  fields: [
+    {
+      name: "href",
+      type: "text",
+      required: true,
+      admin: { description: "Geben Sie den Text für href ein." },
+    },
+    {
+      name: "label",
+      type: "text",
+      required: true,
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für label ein.",
+      },
+    },
+    {
+      name: "eventName",
+      type: "text",
+      required: true,
+      admin: { description: "Geben Sie den Text für eventName ein." },
+    },
+  ],
+};

apps/web/src/payload/blocks/TwitterEmbedBlock.ts

@@ -0,0 +1,29 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const TwitterEmbedBlock: MintelBlock = {
+  slug: "twitterEmbed",
+  labels: {
+    singular: "Twitter (X) Embed",
+    plural: "Twitter (X) Embeds",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "TwitterEmbed",
+    description:
+      "Embeds a post from X.com (Twitter). Used to provide social proof, industry quotes, or examples. Provide the numerical tweetId.",
+    usageExample:
+      '\'<TwitterEmbed tweetId="1753464161943834945" theme="light" />\'',
+  },
+  fields: [
+    {
+      name: "url",
+      type: "text",
+      required: true,
+      admin: { description: "Geben Sie den Text für url ein." },
+    },
+  ],
+};

apps/web/src/payload/blocks/WaterfallChartBlock.ts

@@ -0,0 +1,73 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const WaterfallChartBlock: MintelBlock = {
+  slug: "waterfallChart",
+  labels: {
+    singular: "Waterfall Chart",
+    plural: "Waterfall Charts",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "WaterfallChart",
+    description:
+      "A timeline visualization of network requests (waterfall). Use to show loading sequences or bottlenecks. Labels auto-color coded by type (JS, HTML, IMG).",
+    usageExample: `<WaterfallChart 
+  title="Initial Load" 
+  events={[
+    { name: "Document", start: 0, duration: 150`,
+  },
+  fields: [
+    {
+      name: "title",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für title ein.",
+      },
+    },
+    {
+      name: "metrics",
+      type: "array",
+      fields: [
+        {
+          name: "label",
+          type: "text",
+          required: true,
+          admin: {
+            components: {
+              afterInput: [
+                "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+              ],
+            },
+            description: "Geben Sie den Text für label ein.",
+          },
+        },
+        {
+          name: "duration",
+          type: "number",
+          required: true,
+          admin: {
+            description: "Tragen Sie einen numerischen Wert für duration ein.",
+          },
+        },
+        {
+          name: "color",
+          type: "text",
+          admin: {
+            components: { Field: "@/src/payload/components/ColorPicker" },
+            description: "Geben Sie den Text für color ein.",
+          },
+        },
+      ],
+      admin: { description: "Fügen Sie Elemente zur Liste metrics hinzu." },
+    },
+  ],
+};

apps/web/src/payload/blocks/WebVitalsScoreBlock.ts

@@ -0,0 +1,52 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const WebVitalsScoreBlock: MintelBlock = {
+  slug: "webVitalsScore",
+  labels: {
+    singular: "Web Vitals Score",
+    plural: "Web Vitals Scores",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "WebVitalsScore",
+    description:
+      "Displays Core Web Vitals (LCP, INP, CLS) in a premium card layout with automatic traffic light coloring (Good/Needs Improvement/Poor). Use for performance audits or comparisons.",
+    usageExample: "'<WebVitalsScore values={{ lcp: 2.5, inp: 200, cls: 0.1",
+  },
+  fields: [
+    {
+      name: "lcp",
+      type: "number",
+      required: true,
+      admin: { description: "Largest Contentful Paint (s)" },
+    },
+    {
+      name: "inp",
+      type: "number",
+      required: true,
+      admin: { description: "Interaction to Next Paint (ms)" },
+    },
+    {
+      name: "cls",
+      type: "number",
+      required: true,
+      admin: { description: "Cumulative Layout Shift" },
+    },
+    {
+      name: "description",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für description ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/YouTubeEmbedBlock.ts

@@ -0,0 +1,41 @@
+import { MintelBlock } from "./types";
+
+import type { Block } from "payload";
+
+export const YouTubeEmbedBlock: MintelBlock = {
+  slug: "youTubeEmbed",
+  labels: {
+    singular: "You Tube Embed",
+    plural: "You Tube Embeds",
+  },
+  admin: {
+    group: "MDX Components",
+  },
+  ai: {
+    name: "YouTubeEmbed",
+    description:
+      "Embeds a YouTube video to visualize concepts or provide deep dives. Use the 11-character videoId.",
+    usageExample:
+      '\'<YouTubeEmbed videoId="dQw4w9WgXcQ" title="Performance Explanation" />\'',
+  },
+  fields: [
+    {
+      name: "videoId",
+      type: "text",
+      required: true,
+      admin: { description: "Geben Sie den Text für videoId ein." },
+    },
+    {
+      name: "title",
+      type: "text",
+      admin: {
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/AiFieldButton#AiFieldButton",
+          ],
+        },
+        description: "Geben Sie den Text für title ein.",
+      },
+    },
+  ],
+};

apps/web/src/payload/blocks/allBlocks.ts

@@ -0,0 +1,104 @@
+import { MintelBlock } from "./types";
+import { MemeCardBlock } from "./MemeCardBlock";
+import { MermaidBlock } from "./MermaidBlock";
+import { LeadMagnetBlock } from "./LeadMagnetBlock";
+import { ComparisonRowBlock } from "./ComparisonRowBlock";
+import { LeadParagraphBlock } from "./LeadParagraphBlock";
+import { ArticleBlockquoteBlock } from "./ArticleBlockquoteBlock";
+import { FAQSectionBlock } from "./FAQSectionBlock";
+import { StatsDisplayBlock } from "./StatsDisplayBlock";
+import { DiagramStateBlock } from "./DiagramStateBlock";
+import { DiagramTimelineBlock } from "./DiagramTimelineBlock";
+import { DiagramGanttBlock } from "./DiagramGanttBlock";
+import { DiagramPieBlock } from "./DiagramPieBlock";
+import { DiagramSequenceBlock } from "./DiagramSequenceBlock";
+import { DiagramFlowBlock } from "./DiagramFlowBlock";
+import { WaterfallChartBlock } from "./WaterfallChartBlock";
+import { PremiumComparisonChartBlock } from "./PremiumComparisonChartBlock";
+import { IconListBlock } from "./IconListBlock";
+import { StatsGridBlock } from "./StatsGridBlock";
+import { MetricBarBlock } from "./MetricBarBlock";
+import { CarouselBlock } from "./CarouselBlock";
+import { ImageTextBlock } from "./ImageTextBlock";
+import { RevenueLossCalculatorBlock } from "./RevenueLossCalculatorBlock";
+import { PerformanceChartBlock } from "./PerformanceChartBlock";
+import { PerformanceROICalculatorBlock } from "./PerformanceROICalculatorBlock";
+import { LoadTimeSimulatorBlock } from "./LoadTimeSimulatorBlock";
+import { ArchitectureBuilderBlock } from "./ArchitectureBuilderBlock";
+import { DigitalAssetVisualizerBlock } from "./DigitalAssetVisualizerBlock";
+import { TwitterEmbedBlock } from "./TwitterEmbedBlock";
+import { YouTubeEmbedBlock } from "./YouTubeEmbedBlock";
+import { LinkedInEmbedBlock } from "./LinkedInEmbedBlock";
+import { ExternalLinkBlock } from "./ExternalLinkBlock";
+import { TrackedLinkBlock } from "./TrackedLinkBlock";
+import { ArticleMemeBlock } from "./ArticleMemeBlock";
+import { MarkerBlock } from "./MarkerBlock";
+import { BoldNumberBlock } from "./BoldNumberBlock";
+import { WebVitalsScoreBlock } from "./WebVitalsScoreBlock";
+import { ButtonBlock } from "./ButtonBlock";
+import { ArticleQuoteBlock } from "./ArticleQuoteBlock";
+import { RevealBlock } from "./RevealBlock";
+import { SectionBlock } from "./SectionBlock";
+import { TLDRBlock } from "./TLDRBlock";
+import { HeadingBlock } from "./HeadingBlock";
+import { ParagraphBlock } from "./ParagraphBlock";
+import { H2Block } from "./H2Block";
+import { H3Block } from "./H3Block";
+
+export const allBlocks: MintelBlock[] = [
+  TLDRBlock,
+  HeadingBlock,
+  H2Block,
+  H3Block,
+  ParagraphBlock,
+  MemeCardBlock,
+  MermaidBlock,
+  LeadMagnetBlock,
+  ComparisonRowBlock,
+  LeadParagraphBlock,
+  ArticleBlockquoteBlock,
+  FAQSectionBlock,
+  StatsDisplayBlock,
+  DiagramStateBlock,
+  DiagramTimelineBlock,
+  DiagramGanttBlock,
+  DiagramPieBlock,
+  DiagramSequenceBlock,
+  DiagramFlowBlock,
+  WaterfallChartBlock,
+  PremiumComparisonChartBlock,
+  IconListBlock,
+  StatsGridBlock,
+  MetricBarBlock,
+  CarouselBlock,
+  ImageTextBlock,
+  RevenueLossCalculatorBlock,
+  PerformanceChartBlock,
+  PerformanceROICalculatorBlock,
+  LoadTimeSimulatorBlock,
+  ArchitectureBuilderBlock,
+  DigitalAssetVisualizerBlock,
+  TwitterEmbedBlock,
+  YouTubeEmbedBlock,
+  LinkedInEmbedBlock,
+  ExternalLinkBlock,
+  TrackedLinkBlock,
+  ArticleMemeBlock,
+  MarkerBlock,
+  BoldNumberBlock,
+  WebVitalsScoreBlock,
+  ButtonBlock,
+  ArticleQuoteBlock,
+  RevealBlock,
+  SectionBlock,
+];
+
+/**
+ * Payload 3.x silently drops blocks containing unknown properties.
+ * We strip `ai` and `render` so Payload gets clean Block objects.
+ */
+export const payloadBlocks = allBlocks.map(({ ai, render, ...block }) => block);
+
+export const allComponentDefinitions = allBlocks
+  .filter((block) => !!block.ai)
+  .map((block) => block.ai!);

apps/web/src/payload/blocks/index.ts

@@ -0,0 +1,45 @@
+export * from "./ArchitectureBuilderBlock";
+export * from "./ArticleBlockquoteBlock";
+export * from "./ArticleMemeBlock";
+export * from "./ArticleQuoteBlock";
+export * from "./BoldNumberBlock";
+export * from "./ButtonBlock";
+export * from "./CarouselBlock";
+export * from "./ComparisonRowBlock";
+export * from "./DiagramFlowBlock";
+export * from "./DiagramGanttBlock";
+export * from "./DiagramPieBlock";
+export * from "./DiagramSequenceBlock";
+export * from "./DiagramStateBlock";
+export * from "./DiagramTimelineBlock";
+export * from "./DigitalAssetVisualizerBlock";
+export * from "./ExternalLinkBlock";
+export * from "./FAQSectionBlock";
+export * from "./IconListBlock";
+export * from "./ImageTextBlock";
+export * from "./LeadMagnetBlock";
+export * from "./LeadParagraphBlock";
+export * from "./LinkedInEmbedBlock";
+export * from "./LoadTimeSimulatorBlock";
+export * from "./MarkerBlock";
+export * from "./MemeCardBlock";
+export * from "./MermaidBlock";
+export * from "./MetricBarBlock";
+export * from "./PerformanceChartBlock";
+export * from "./PerformanceROICalculatorBlock";
+export * from "./PremiumComparisonChartBlock";
+export * from "./RevealBlock";
+export * from "./RevenueLossCalculatorBlock";
+export * from "./SectionBlock";
+export * from "./StatsDisplayBlock";
+export * from "./StatsGridBlock";
+export * from "./TrackedLinkBlock";
+export * from "./TwitterEmbedBlock";
+export * from "./WaterfallChartBlock";
+export * from "./WebVitalsScoreBlock";
+export * from "./YouTubeEmbedBlock";
+export * from "./HeadingBlock";
+export * from "./H2Block";
+export * from "./H3Block";
+export * from "./ParagraphBlock";
+export * from "./TLDRBlock";

apps/web/src/payload/blocks/types.ts

@@ -0,0 +1,8 @@
+import type { Block } from "payload";
+import type { ComponentDefinition } from "@mintel/content-engine";
+import type { ComponentType } from "react";
+
+export type MintelBlock = Block & {
+  ai?: ComponentDefinition;
+  render?: ComponentType<any>;
+};

apps/web/src/payload/collections/ContextFiles.ts

@@ -0,0 +1,55 @@
+import type { CollectionConfig } from "payload";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export const ContextFiles: CollectionConfig = {
+  slug: "context-files",
+  labels: {
+    singular: "Context File",
+    plural: "Context Files",
+  },
+  admin: {
+    useAsTitle: "filename",
+    defaultColumns: ["filename", "updatedAt"],
+  },
+  access: {
+    read: () => true, // Needed for server actions to fetch context
+    create: () => true,
+    update: () => true,
+    delete: () => true,
+  },
+  hooks: {
+    afterChange: [
+      ({ doc, operation }) => {
+        // Potential future: sync back to disk?
+        // For now, let's keep it simple as a CMS-first feature.
+      },
+    ],
+  },
+  fields: [
+    {
+      name: "filename",
+      type: "text",
+      required: true,
+      unique: true,
+      admin: {
+        description:
+          "Exact filename (e.g. 'strategy.md'). The system uses this to identify the document during prompt generation.",
+      },
+    },
+    {
+      name: "content",
+      type: "textarea",
+      required: true,
+      admin: {
+        rows: 25,
+        description: "The raw markdown/text content of the document.",
+        style: { fontFamily: "monospace" },
+      },
+    },
+  ],
+};

apps/web/src/payload/collections/ContextFiles/seed/ABOUT.md

@@ -0,0 +1,123 @@
+Über mich
+
+Ich baue Websites und Systeme seit über 15 Jahren.
+Nicht weil ich Websites so liebe – sondern weil ich es hasse, wenn Dinge nicht funktionieren.
+
+In diesen 15 Jahren habe ich:
+• Agenturen von innen gesehen
+• Konzerne erlebt
+• Startups aufgebaut
+• Marketingversprechen zerlegt
+• Systeme repariert, die „fertig“ waren
+• und gelernt, wie man Dinge baut, die einfach laufen
+
+Heute mache ich das ohne Agentur-Zwischenschichten.
+Direkt. Sauber. Verantwortlich.
+
+⸻
+
+Ich habe fast alle Fehler schon für Sie gemacht
+
+(damit Sie sie nicht machen müssen)
+
+Ich habe als Designer angefangen,
+bin dann Entwickler geworden,
+und habe irgendwann gemerkt:
+
+Das Problem ist selten Technik.
+Es ist immer Zuständigkeit.
+
+Wenn keiner verantwortlich ist, passiert nichts.
+Also habe ich mir angewöhnt, Verantwortung zu übernehmen.
+
+⸻
+
+Warum ich Websites wie Systeme baue
+
+Ich war viele Jahre Senior Developer in Firmen, in denen:
+• Millionenumsätze dranhingen
+• Fehler teuer waren
+• Performance nicht optional war
+• Sicherheit kein Nice-to-Have war
+• „kurz mal ändern“ trotzdem passieren musste
+
+Das prägt.
+
+Deshalb sind meine Websites:
+• schnell
+• stabil
+• boring (im besten Sinne)
+• erweiterbar
+• wartungsarm
+• und nicht abhängig von Plugins oder Agenturen
+
+⸻
+
+Ich habe beide Seiten gesehen
+
+Ich war:
+• Webdesigner
+• Entwickler
+• Marketing
+• Vertrieb
+• Agentur
+• Inhouse
+• Dienstleister
+• Unternehmer
+
+Das heißt:
+
+Ich weiß, was Unternehmen brauchen –
+und was sie nicht brauchen.
+
+(Meetings, Tickets, Workshops, PowerPoint.)
+
+⸻
+
+Was Kunden davon haben
+
+Sie bekommen:
+• keinen Projektmanager
+• keinen Prozess
+• kein Team
+• kein Ticket
+• kein CMS-Drama
+
+Sie bekommen:
+• eine Person
+• eine Verantwortung
+• ein Ergebnis
+
+⸻
+
+Ein kurzer Überblick (ohne Lebenslauf-Gefühl)
+
+Ich habe u. a. gearbeitet bei:
+• Agenturen
+• E-Commerce-Plattformen
+• SaaS-Firmen
+• Marketing-Teams
+• internationalen Unternehmen
+• Mittelständlern
+• und Konzernen
+
+Als:
+• Web Designer
+• Frontend Developer
+• Software Developer
+• Senior Developer
+• und später Gründer
+
+Das Ergebnis daraus ist nicht ein Titel.
+Sondern eine Arbeitsweise.
+
+⸻
+
+Heute
+
+Heute baue ich Websites und Systeme für Unternehmen,
+die keine Lust mehr auf Agenturen haben
+und keine Zeit für Chaos.
+
+Ich übernehme das Thema komplett –
+damit es für Sie kein Thema mehr ist.

apps/web/src/payload/collections/ContextFiles/seed/AGBS.md

@@ -0,0 +1,154 @@
+Allgemeine Geschäftsbedingungen (AGB)
+
+1. Geltungsbereich
+
+Diese Allgemeinen Geschäftsbedingungen gelten für alle Verträge zwischen
+Marc Mintel (nachfolgend „Auftragnehmer“)
+und dem jeweiligen Kunden (nachfolgend „Auftraggeber“).
+
+Abweichende oder ergänzende Bedingungen des Auftraggebers werden nicht Vertragsbestandteil, auch wenn ihrer Geltung nicht ausdrücklich widersprochen wird.
+
+⸻
+
+2. Vertragsgegenstand
+
+Der Auftragnehmer erbringt Dienstleistungen im Bereich:
+• Webentwicklung
+• technische Umsetzung digitaler Systeme
+• Funktionen, Schnittstellen und Automatisierungen
+• Hosting, Betrieb und Wartung, sofern ausdrücklich vereinbart
+
+Der Auftragnehmer schuldet ausschließlich die vereinbarte technische Leistung, nicht jedoch:
+• einen wirtschaftlichen Erfolg
+• bestimmte Umsätze, Conversions oder Reichweiten
+• Suchmaschinen-Rankings
+• rechtliche oder geschäftliche Ergebnisse
+
+⸻
+
+3. Mitwirkungspflichten des Auftraggebers
+
+Der Auftraggeber verpflichtet sich, alle zur Leistungserbringung erforderlichen Inhalte, Informationen, Zugänge und Entscheidungen rechtzeitig, vollständig und korrekt bereitzustellen.
+
+Hierzu zählen insbesondere:
+• Texte, Bilder, Videos, Produktdaten
+• Freigaben und Feedback
+• Zugangsdaten
+• rechtlich erforderliche Inhalte (z. B. Impressum, Datenschutzerklärung)
+
+Verzögerungen oder Unterlassungen der Mitwirkung führen zu einer entsprechenden Verschiebung aller Termine.
+Hieraus entstehen keine Schadensersatz- oder Minderungsansprüche.
+
+⸻
+
+4. Ausführungs- und Bearbeitungszeiten
+
+Angegebene Bearbeitungszeiten sind unverbindliche Schätzungen, keine garantierten Fristen.
+
+Fixe Termine oder Deadlines gelten nur, wenn sie ausdrücklich schriftlich als verbindlich vereinbart wurden.
+
+⸻
+
+5. Abnahme
+
+Die Leistung gilt als abgenommen, wenn:
+• der Auftraggeber sie produktiv nutzt oder
+• innerhalb von 7 Tagen nach Bereitstellung keine wesentlichen Mängel angezeigt werden.
+
+Optische Abweichungen, Geschmacksfragen oder subjektive Einschätzungen stellen keine Mängel dar.
+
+⸻
+
+6. Haftung
+
+Der Auftragnehmer haftet nur für Schäden, die auf vorsätzlicher oder grob fahrlässiger Pflichtverletzung beruhen.
+
+Eine Haftung für:
+• entgangenen Gewinn
+• Umsatzausfälle
+• Datenverlust
+• Betriebsunterbrechungen
+• mittelbare oder Folgeschäden
+
+ist ausgeschlossen, soweit gesetzlich zulässig.
+
+⸻
+
+7. Verfügbarkeit & Betrieb
+
+Bei vereinbartem Hosting oder Betrieb schuldet der Auftragnehmer keine permanente Verfügbarkeit.
+
+Wartungsarbeiten, Updates, Sicherheitsmaßnahmen oder externe Störungen (z. B. Hoster, Netze, Drittanbieter) können zu zeitweisen Einschränkungen führen und begründen keine Haftungsansprüche.
+
+7a. Betriebs- und Pflegeleistung
+
+Die Betriebs- und Pflegeleistung ist fester Bestandteil der laufenden Leistungen des Auftragnehmers.
+
+Sie umfasst ausschließlich:
+• Sicherstellung des technischen Betriebs der Website
+• Wartung, Updates und Fehlerbehebung der bestehenden Systeme
+• Austausch, Korrektur oder Aktualisierung bereits vorhandener Inhalte
+• Pflege bestehender Datensätze ohne Änderung oder Erweiterung der Datenstruktur
+
+Nicht Bestandteil der Betriebs- und Pflegeleistung sind insbesondere:
+• regelmäßige oder fortlaufende Erstellung neuer Inhalte
+(z. B. Blogartikel, News, Produkte, Seiten)
+• redaktionelle Tätigkeiten oder Content-Produktion
+• strategische Inhaltsplanung oder Marketingmaßnahmen
+• Aufbau neuer Seiten, Features, Funktionen oder Datenmodelle
+• Serien-, Massen- oder Dauerpflege
+(z. B. tägliche oder wiederkehrende Inhaltserstellung)
+
+Die Betriebs- und Pflegeleistung dient ausschließlich der Instandhaltung, Sicherheit und Funktionsfähigkeit der bestehenden Website.
+
+Leistungen, die darüber hinausgehen, gelten als Neuentwicklung oder Inhaltserstellung und sind gesondert zu beauftragen und zu vergüten.
+
+⸻
+
+8. Drittanbieter & externe Systeme
+
+Der Auftragnehmer übernimmt keine Verantwortung für:
+• Leistungen, Ausfälle oder Änderungen externer Dienste
+• APIs, Schnittstellen oder Plattformen Dritter
+• rechtliche oder technische Änderungen fremder Systeme
+
+Eine Funktionsfähigkeit kann nur im Rahmen der jeweils aktuellen externen Schnittstellen gewährleistet werden.
+
+⸻
+
+9. Inhalte & Rechtliches
+
+Der Auftraggeber ist allein verantwortlich für:
+• Inhalte der Website
+• rechtliche Konformität (DSGVO, Urheberrecht, Wettbewerbsrecht etc.)
+• bereitgestellte Daten und Medien
+
+Der Auftragnehmer übernimmt keine rechtliche Prüfung.
+
+⸻
+
+10. Vergütung & Zahlungsverzug
+
+Alle Preise verstehen sich netto zuzüglich gesetzlicher Umsatzsteuer.
+
+Rechnungen sind, sofern nicht anders vereinbart, innerhalb von 7 Tagen fällig.
+
+Bei Zahlungsverzug ist der Auftragnehmer berechtigt:
+• Leistungen auszusetzen
+• Systeme offline zu nehmen
+• laufende Arbeiten zu stoppen
+
+⸻
+
+11. Kündigung laufender Leistungen
+
+Laufende Leistungen (z. B. Hosting & Betrieb) können mit einer Frist von 4 Wochen zum Monatsende gekündigt werden, sofern nichts anderes vereinbart ist.
+
+⸻
+
+12. Schlussbestimmungen
+
+Es gilt das Recht der Bundesrepublik Deutschland.
+Gerichtsstand ist – soweit zulässig – der Sitz des Auftragnehmers.
+
+Sollte eine Bestimmung dieser AGB unwirksam sein, bleibt die Wirksamkeit der übrigen Regelungen unberührt.

apps/web/src/payload/collections/ContextFiles/seed/AUDIENCE.md

@@ -0,0 +1,33 @@
+# Zielgruppe
+
+## Primäre Zielgruppe: Der deutsche Mittelstand
+
+Unsere Blog-Inhalte richten sich an Entscheider in kleinen und mittelständischen Unternehmen – nicht an Entwickler.
+
+### Wer liest das?
+
+- **Geschäftsführer** von Handwerksbetrieben, Kanzleien, Arztpraxen
+- **Marketing-Verantwortliche** in mittelständischen Unternehmen (10–250 Mitarbeiter)
+- **Online-Shop-Betreiber** mit 20k–500k€ Jahresumsatz
+- **Selbstständige** und Freiberufler mit eigener Website
+
+### Was sie NICHT sind
+
+- Keine Entwickler (kein Code-Jargon)
+- Keine Enterprise-Konzerne (kein "Amazon-Scale", keine "Millionen User")
+- Keine Marketing-Agenturen (kein Buzzword-Bingo)
+
+### Wie wir schreiben
+
+- **Know-how transportieren** ohne zu dozieren
+- **Technische Fakten verständlich machen** — ELI5 aber nicht herablassend
+- **Realistische Beispiele**: "Tischlerei Müller mit 30 Seitenbesuchern am Tag", nicht "globaler Marktführer mit 10M MAU"
+- **Probleme benennen** die sie kennen: langsame Website, schlechtes Google-Ranking, verlorene Anfragen
+- **Lösungen zeigen** die greifbar sind: konkrete Vorher/Nachher-Vergleiche, echte Zahlen
+
+### Tonalität gegenüber dem Leser
+
+- Auf Augenhöhe, nie von oben herab
+- Wie ein kompetenter Bekannter der einem beim Thema Website hilft
+- Ehrlich über Probleme, ohne Panik zu machen
+- Kein Verkaufsdruck, keine künstliche Dringlichkeit

apps/web/src/payload/collections/ContextFiles/seed/AUTOMATION.md

@@ -0,0 +1,76 @@
+# Routine Automation
+
+_Kleine Helfer, die den Alltag deutlich entlasten_
+
+In vielen mittelständischen Unternehmen fressen wiederkehrende Aufgaben Monat für Monat unzählige Stunden:
+
+- Daten aus Dokumenten abtippen
+- Formulare von Hand ausfüllen
+- Angebote, Berichte oder Bestätigungen manuell anpassen
+- Eingehende Anfragen immer wieder neu prüfen und bearbeiten
+
+Das ist keine wertschöpfende Arbeit.  
+Das ist Routine, die teuer ist, Fehler produziert und gute Mitarbeiter davon abhält, sich um das zu kümmern, was wirklich Umsatz bringt.
+
+Ich baue genau für diese Routine **einfache, maßgeschneiderte Helfer** – meist mit PDF- oder Excel-Ausgabe, Konfiguratoren oder KI-Dokumenten-Einlesen.  
+Einmal eingerichtet, laufen sie leise im Hintergrund.  
+Kein großes Projekt. Kein monatliches Tool-Abo. Kein „lernen Sie das neue System“.
+
+### Was das konkret bringen kann – Beispiele aus der Praxis
+
+- **Schnelle Dokumentenerstellung (PDF-Generatoren)**  
+  Kurze Eingaben (Formular, Mail, Excel-Zeile) → fertiges PDF raus: Angebote, Berichte, Protokolle, Bestätigungen, Übersichten. Immer Ihr Corporate Design, immer aktuelle Daten/Bausteine.  
+  → Von 30–120 Minuten runter auf 2–10 Minuten.
+
+- **Excel-Automatisierungen & smarte Tabellen**  
+  Verkaufszahlen, Lagerbestände, Kundenlisten → automatische Berechnungen, Zusammenfassungen, Prognosen oder Exporte. Monatsberichte oder Preislisten aktualisieren sich von selbst.  
+  → Kein ständiges Nachrechnen mehr, keine Versionskonflikte.
+
+- **Konfiguratoren für Anfragen & Schätzungen**  
+  Kunde oder Mitarbeiter geht schrittweise durch ein Formular (auf Ihrer Website oder intern): „Welche Leistung? Welcher Umfang? Welcher Termin?“ → sofort realistische Schätzung, Preisspanne oder fertiges Angebot als PDF/Excel.
+
+- **KI-Einlesen von PDFs oder handschriftlichen Dokumenten**  
+  Eingescannte Rechnungen, Lieferscheine, Formulare, Notizen oder handgeschriebene Protokolle → KI liest Text, Zahlen, Felder aus (auch Handschrift, wo lesbar) → Daten landen in übersichtlicher Tabelle/Excel oder vorausgefülltem Formular.  
+  Mitarbeiter prüft nur noch kurz → kleine Korrektur → Prozess geht weiter.  
+  → Kein stundenlanges Abtippen mehr, deutlich schnellerer Durchlauf.
+
+### Der echte Wert für Sie
+
+- 30–80 % weniger Zeit bei Routineaufgaben → Ihre Teams konzentrieren sich aufs Wesentliche
+- Weniger Fehler & Rückfragen → einheitlicher, professioneller Output
+- Schnellere Reaktion auf Kunden → Konfiguratoren & KI-Einlesen liefern sofort Infos
+- Amortisation oft schon nach wenigen Wochen oder Dutzend Nutzungen
+- Nutzt, was Sie bereits haben: Website, Excel, Mail, Scanner-App
+
+### Was ich **nicht** mache
+
+Ich ersetze **kein** ERP, CRM, Buchhaltungs- oder HR-System.  
+Kein automatisches Buchen, keine Finanzamtschnittstelle, keine GoBD-Archivierungspflichten.  
+Nur smarte Abkürzungen bei Routine – der Rest bleibt in Ihren bewährten Tools.
+
+### Ich kann Ihnen helfen, wenn Sie mit diesen typischen Problemen kämpfen
+
+- „Wir tippen immer noch Daten aus gescannten Dokumenten oder handschriftlichen Notizen ab.“
+- „Angebote, Berichte oder Protokolle dauern ewig, weil alles von Hand angepasst wird.“
+- „Kunden fragen ständig dasselbe – wir antworten jedes Mal manuell.“
+- „Excel-Tabellen und Berechnungen werden ständig neu gemacht und gehen kaputt.“
+- „Bis wir eine realistische Schätzung oder ein Angebot raus haben, vergeht zu viel Zeit.“
+
+Schreiben Sie mir einfach einen kurzen Satz zu Ihrem größten Zeitfresser in diesem Bereich.  
+Ich antworte meist innerhalb von 1–2 Tagen:
+
+- Ist das machbar? Ja/Nein
+- Ca. wie viel Aufwand (meist 3–15 Stunden) & Preisrahmen
+- Was Sie realistisch sparen können (Zeit, Nerven, Fehler)
+
+Passt es → baue ich es.  
+Danach: Routine digitalisiert. Mehr Ruhe im Alltag.
+
+**Kurz gesagt**  
+Routine Automation:  
+Nicht die große Revolution.  
+Sondern gezielte Entlastung bei den Dingen, die jeden Tag Zeit und Nerven kosten.  
+Mehr Zeit. Weniger Frust. Besserer Output.  
+Und das Gefühl: „Das läuft jetzt einfach.“
+
+Wenn bei Ihnen gerade etwas „von Hand gemacht wird“ oder „ewig dauert“ – Ich sage Ihnen, ob und wie schnell man das sinnvoll digitalisieren kann.

apps/web/src/payload/collections/ContextFiles/seed/CONTENT_RULES.md

@@ -0,0 +1,65 @@
+# Content-Regeln für Blog-Post-Generierung
+
+## 1. Visuelle Balance
+
+- **Max 1 visuelle Komponente pro 3–4 Textabsätze**
+- Visualisierungen dürfen **niemals direkt hintereinander** stehen
+- Zwischen zwei visuellen Elementen müssen mindestens 2 Textabsätze liegen
+- Nicht mehr als 5–6 visuelle Komponenten pro Blog-Post insgesamt
+
+### Erlaubte visuelle Komponenten
+
+- `Mermaid` / `DiagramFlow` / `DiagramSequence` — für Prozesse und Architektur
+- `ArticleMeme` — echte Meme-Bilder (memegen.link), kurze und knackige Texte
+- `BoldNumber` — einzelne Hero-Statistik mit Quelle
+- `PremiumComparisonChart` / `MetricBar` — für Vergleiche
+- `WebVitalsScore` — für Performance-Audits (max 1x pro Post)
+- `WaterfallChart` — für Ladezeiten-Visualisierung (max 1x pro Post)
+- `StatsGrid` — für 2–4 zusammengehörige Statistiken
+- `ComparisonRow` — für Vorher/Nachher-Vergleiche
+
+### Verboten
+
+- `MemeCard` (text-basierte Memes) — nur echte Bild-Memes verwenden
+- AI-generierte Bilder im Content — nur Thumbnails erlaubt
+- `DiagramPie` — vermeiden, zu generisch
+
+## 2. Zahlen und Statistiken
+
+- **Niemals nackte Zahlen** — jede Statistik braucht Kontext und Vergleich
+- `BoldNumber` nur für DIE eine zentrale Statistik des Abschnitts
+- Mehrere Zahlen → `StatsGrid` oder `PremiumComparisonChart` verwenden
+- Jede Zahl braucht eine **Quelle** (`source` + `sourceUrl` Pflicht)
+- Vergleiche sind immer besser als Einzelwerte: "33% vs. 92%", nicht nur "92%"
+
+## 3. Zitate und Quellen
+
+- Alle Zitate brauchen klare Attribution: `author`, `source`, `sourceUrl`
+- Bei übersetzten Zitaten: "(übersetzt)" im Zitat oder als Hinweis
+- `ExternalLink` für alle externen Referenzen im Fließtext
+- Keine erfundenen Zitate — nur verifizierbare Quellen
+
+## 4. Mermaid-Diagramme
+
+- **Extrem kompakt halten**: Strikt max 3–4 Nodes pro Diagramm
+- **Ausschließlich vertikale Layouts** (TD) — besser für Mobile
+- Deutsche Labels verwenden
+- Keine verschachtelten Subgraphs
+- Jedes Diagramm braucht einen aussagekräftigen `title`
+
+## 5. Memes
+
+- Nur echte Bilder via `ArticleMeme` (memegen.link API)
+- **Extreme Sarkasmus-Pflicht** — mach dich über schlechte Agentur-Arbeit oder Legacy-Tech lustig
+- **Kurze, knackige Captions** — max 6 Wörter pro Zeile
+- Deutsche Captions verwenden
+- Bewährte Templates: `drake`, `disastergirl`, `fine`, `daily-struggle`
+- Max 2–3 Memes pro Blog-Post
+
+## 6. Textstruktur
+
+- Jeder Abschnitt startet mit einer klaren H2/H3
+- `LeadParagraph` nur am Anfang (1–2 Stück)
+- Normaler Text in `Paragraph`-Komponenten
+- `Marker` sparsam einsetzen — max 2–3 pro Abschnitt
+- `IconList` für Aufzählungen mit Pro/Contra

apps/web/src/payload/collections/ContextFiles/seed/ESTIMATION_GUIDE.md

@@ -0,0 +1,99 @@
+# Service Estimation & AI Consultation Guide
+
+This guide explains how to use the automated estimation system to generate professional PDF quotes for clients using AI-driven context analysis.
+
+## 🛠 Basic Usage
+
+The primary entry point is the `ai-estimate` script. It orchestrates a 6-pass AI consultation:
+
+1. **Fact Extraction**: Identifying company data and project scope.
+2. **Feature Deep-Dive**: Generating technical justifications for items.
+3. **Strategic Content**: Creating the Briefing Analysis and Strategic Vision.
+4. **Information Architecture**: Designing a hierarchical sitemap.
+5. **Position Synthesis**: Mapping everything to a transparent pricing model.
+6. **Industrial Critic**: Final quality gate for tone and accuracy.
+
+### Generating an Estimation from Scratch
+
+#### 1. With a Website URL (Recommended)
+
+Providing a URL allows the system to crawl the existing site to understand the "Company DNA" and services.
+
+```bash
+npm run ai-estimate -- "Relaunch der Website mit Fokus auf B2B Leads" --url https://example.com
+```
+
+#### 2. From a Text File
+
+If you have a long briefing in a `.txt` file:
+
+```bash
+npm run ai-estimate -- @briefing.txt --url https://example.com
+```
+
+#### 3. Text-Only (No URL)
+
+If no URL is provided, the system relies entirely on your briefing text.
+
+```bash
+npm run ai-estimate -- "Neuentwicklung eines Portals für XYZ"
+```
+
+---
+
+## 📄 Output Modes
+
+The system can generate two types of documents:
+
+### 1. Full Quote (Default)
+
+Includes everything: Front Page, Briefing Analysis, Vision, Sitemap, Technical Principles, Detailed Pricing, Roadmap, and Legal Terms (AGB).
+
+```bash
+npm run ai-estimate -- "Project Briefing"
+```
+
+### 2. Estimation Only
+
+A condensed version excluding legal terms and deep technical principles. Focuses purely on the strategic fit and the price.
+
+```bash
+npm run ai-estimate -- "Project Briefing" --estimation
+```
+
+---
+
+## 📦 Cache & Cache Management
+
+To save costs and time, all AI responses and crawl results are cached in the `.cache` directory.
+
+### Regenerating with Cached Data
+
+If you run the same command again (identical briefing and URL), the system will use the cached results and won't call the AI APIs again. This is useful if you want to tweak the PDF layout without spending tokens.
+
+### Forcing a Refresh
+
+To ignore the cache and get a fresh AI consultation:
+
+```bash
+npm run ai-estimate -- "Project Briefing" --clear-cache
+```
+
+### Manual Tweaking (JSON State)
+
+Every run saves a detailed state to `out/estimations/json/[Company]_[Timestamp].json`.
+If you want to manually edit the AI's results (e.g., fix a typo in the sitemap or description), you can edit this JSON file and then regenerate the PDF from it:
+
+```bash
+npm run ai-estimate -- --json out/estimations/json/Your_Project.json
+```
+
+_(Add `--estimation` if you want the condensed version)._
+
+---
+
+## 💡 Advanced Options
+
+- `--comments "..."`: Add manual notes that the AI should consider (e.g., "Customer prefers a minimalist blue theme").
+- `--clear-cache`: Purges all cached data for this project before starting.
+- `--url [URL]`: Explicitly sets the crawl target (auto-discovered from briefing if omitted).

apps/web/src/payload/collections/ContextFiles/seed/KEYWORDS.md

@@ -0,0 +1,68 @@
+# High-Converting Keywords (Digital Architect / B2B)
+
+Diese 50 Keywords sind strategisch ausgewählt, um entscheidungsfreudige B2B-Kunden (Geschäftsführer, CMOs, CTOs) anzuziehen, die nach Premium-Lösungen, Performance-Architekturen und messbarem ROI suchen. Sie meiden den "Billig-Sektor" (wie "Wordpress Website günstig") und fokussieren sich auf High-End Tech und Business-Impact.
+
+## Kategorie 1: Enterprise Performance & Core Web Vitals (Pain Point: Sichtbarkeit & Speed)
+
+1. "Core Web Vitals Optimierung Agentur"
+2. "PageSpeed Insights 100 erreichen B2B"
+3. "Website Ladezeit verbessern Conversion Rate"
+4. "Mobile First Indexing Strategie 2026"
+5. "Headless Commerce Performance Optimierung"
+6. "Time to First Byte reduzieren Architektur"
+7. "Largest Contentful Paint optimieren Next.js"
+8. "Website Performance Audit B2B"
+9. "Static Site Generation vs Server Side Rendering SEO"
+10. "Enterprise SEO Performance Tech Stack"
+
+## Kategorie 2: Modern Tech Stack & Headless (Pain Point: Skalierbarkeit & Legacy-Code)
+
+11. "Next.js Agentur Deutschland"
+12. "Headless CMS Migration B2B"
+13. "Vercel Hosting Enterprise Architektur"
+14. "Directus CMS Agentur Setup"
+15. "React Server Components Vorteile B2B"
+16. "Decoupled Architecture E-Commerce"
+17. "Legacy CMS ablösen Strategie"
+18. "Wordpress headless machen Vor- und Nachteile"
+19. "Jamstack Entwicklung Enterprise"
+20. "Microservices Web Architektur"
+
+## Kategorie 3: B2B Conversion & Digital ROI (Pain Point: Umsatz & Leads)
+
+21. "B2B Website Relaunch Strategie"
+22. "Digital Architect Consulting B2B"
+23. "Conversion Rate Optimierung Tech Stack"
+24. "Lead Generierung B2B Website Architektur"
+25. "High-End Website Entwicklung Kosten"
+26. "ROI von Website Performance"
+27. "B2B Landingpage Architektur"
+28. "Website als Vertriebsmitarbeiter B2B"
+29. "Data Driven Design B2B"
+30. "UX/UI Architektur für hohe Conversion"
+
+## Kategorie 4: Infrastruktur, Sicherheit & Skalierbarkeit (Pain Point: Ausfälle & Security)
+
+31. "Cloudflare Enterprise Setup Agentur"
+32. "DDoS Schutz Web Architektur B2B"
+33. "Serverless Architecture Vorteile"
+34. "Hochverfügbare Website Architektur"
+35. "Edge Computing für Websiten"
+36. "Web Security Audit Enterprise"
+37. "Zero Trust Web Architektur"
+38. "Traefik Proxy Setup Next.js"
+39. "Dockerized CMS Deployment"
+40. "CI/CD Pipeline Webentwicklung B2B"
+
+## Kategorie 5: Spezifische Lösungen & "Digital Architect" Keywords (Nischen-Autorität)
+
+41. "Digital Architect Agentur Deutschland"
+42. "Mittelstand Digitalisierung Web-Infrastruktur"
+43. "Industrie 4.0 B2B Website"
+44. "Premium Webentwicklung Geschäftsführer"
+45. "Software Architektur Beratung B2B"
+46. "Web Vitals als Rankingfaktor Strategie"
+47. "Next.js Directus Integration"
+48. "High Performance Corporate Website"
+49. "Tech Stack Audit für Mittelstand"
+50. "Sustainable Web Design Architektur"

apps/web/src/payload/collections/ContextFiles/seed/LANDING_PAGE.md

@@ -0,0 +1,238 @@
+Digitale Systeme für Unternehmen, die keinen Overhead wollen
+
+Agenturen sind zu langsam.
+CMS will keiner pflegen.
+Digitale Themen bleiben liegen.
+
+Ich mache das anders.
+
+⸻
+
+Was ich mache
+
+Ich setze digitale Systeme für Unternehmen um – direkt, sauber und ohne Agentur-Zirkus.
+
+Websites, Funktionen, Systeme, interne Tools.
+Keine Workshops. Keine Tickets. Kein Tech-Blabla.
+
+Sie erklären mir, was Sie brauchen.
+Ich sorge dafür, dass es funktioniert.
+
+⸻
+
+Für wen das ist
+
+Für Unternehmen, die:
+• regelmäßig Änderungen an Website oder Systemen brauchen
+• keine Lust auf Agenturen haben
+• kein CMS anfassen wollen
+• keine Tickets schreiben möchten
+• keinen Entwickler einstellen wollen
+• und wollen, dass Dinge einfach erledigt werden
+
+Wenn bei Ihnen öfter der Satz fällt:
+
+„Das müsste man mal machen …“
+
+… aber es passiert nie – dann sind Sie hier richtig.
+
+⸻
+
+Das eigentliche Problem
+
+Digitale Arbeit scheitert nicht an Technik.
+Sie scheitert an Zuständigkeit.
+
+Agenturen wollen Projekte.
+Mitarbeiter haben Wichtigeres zu tun.
+IT ist ausgelastet.
+Und kleine Aufgaben sind zu klein für große Angebote.
+
+Also bleibt alles liegen.
+
+⸻
+
+Warum keine Agentur
+
+Ich habe über 15 Jahre in Agenturen gearbeitet.
+Ich kenne das Spiel. Und ich weiß, warum es nervt.
+
+⸻
+
+Agenturen machen einfache Dinge kompliziert
+
+Ein Button ändern?
+
+→ Konzeptcall
+→ Abstimmung
+→ internes Meeting
+→ Angebot
+→ Warten
+→ Rechnung
+
+Ich:
+→ mache es
+→ fertig
+
+⸻
+
+Agenturen verkaufen Prozesse statt Ergebnisse
+
+Workshops, Slides, Roadmaps, Alignment, Stakeholder.
+Klingt nach Fortschritt.
+Ist oft nur Beschäftigungstherapie.
+
+Bei mir zählt nur Umsetzung.
+
+⸻
+
+Agenturen rechnen nach Stunden
+
+(und liegen erstaunlich oft daneben)
+
+„Das dauert nur kurz“
+→ Überraschung auf der Rechnung
+
+Ich arbeite mit klaren Leistungen und Fixpreisen.
+Sie wissen vorher, was es kostet. Immer.
+
+⸻
+
+Agenturen geben Aufgaben weiter
+
+(und verlieren sie dann aus den Augen)
+
+Heute Projektmanager.
+Morgen Entwickler.
+Übermorgen niemand.
+
+Bei mir gilt:
+Eine Person. Eine Verantwortung.
+
+⸻
+
+Agenturen verschwinden nach dem Projekt
+
+Kleine Änderung? → neues Angebot
+Dringend? → Warteschleife
+
+Ich bleibe.
+Solange Sie Dinge brauchen.
+
+⸻
+
+Wie ich arbeite (und warum das entspannter ist)
+
+Agenturen machen erst ein Konzept.
+Dann wird umgesetzt.
+Dann merkt man: „Passt doch nicht ganz.“
+Dann wird nachberechnet.
+
+Ich mache es anders.
+
+⸻
+
+Ich baue zuerst. Dann reden wir drüber.
+
+Sie erklären mir Ihre Vorstellung.
+Ich setze den ersten echten Stand um.
+
+Keine Slides.
+Kein Konzept-PDF.
+Kein Ratespiel.
+
+Dann arbeiten wir direkt am Ergebnis, bis es passt.
+Ohne jedes Mal ein neues Angebot.
+Ohne Scope-Diskussionen.
+Ohne Theater.
+
+⸻
+
+Was ich konkret umsetze
+
+Websites
+• neue Websites (klarer Standard, kein Chaos)
+• bestehende Websites übernehmen
+• Seiten ändern oder ergänzen
+• Performance & SEO
+• Hosting & Betrieb (inklusive)
+
+⸻
+
+Funktionen & Systeme
+• Produktbereiche
+• Blogs, News, Jobs
+• Formulare (auch mehrstufig)
+• Downloads
+• Suche & Filter
+• PDF-Generatoren
+• API-Ausgaben & Daten-Sync
+• Sonderlogik
+
+⸻
+
+Interne Tools
+• kleine Inhouse-Tools
+• Excel ersetzen
+• Importe & Exporte
+• Automatisierung
+• Dinge, die nerven → weg
+
+⸻
+
+Was ich bewusst nicht mache
+• keine CMS-Schulungen
+• keine Agentur-Workshops
+• keine Ticketsysteme
+• keine Stundenabrechnung für Websites
+• kein Overhead
+• keine Prozessshows
+
+Das ist kein Mangel.
+Das ist der Vorteil.
+
+⸻
+
+Preise (klar & transparent)
+
+Ich arbeite mit festen Leistungen und Fixpreisen.
+Keine Abos. Keine Überraschungen.
+
+Grundlage
+• Website-Basis → 6.000 €
+• Hosting & Betrieb → 120 € / Monat (inkl. 20 GB Medien)
+
+Entwicklung
+• Seite → 800 €
+• Feature (System) → 2.000 €
+• Funktion (Logik) → 1.000 €
+
+Inhalte
+• Neuer Datensatz → 400 €
+• Datensatz anpassen → 200 €
+
+Optional
+• CMS-Einrichtung → 1.500 €
+• CMS-Anbindung pro Feature → 800 €
+• Speichererweiterung → +10 € / 10 GB
+
+Sie wissen vorher, was es kostet. Immer.
+
+⸻
+
+Warum Kunden bleiben
+• Dinge passieren schnell
+• Aufgaben verschwinden wirklich
+• kein Erklären
+• kein Nachfassen
+• kein Projektstress
+• kein Agentur-Zirkus
+
+Kurz: Ruhe.
+
+⸻
+
+Interesse?
+
+Schreiben Sie mir einfach, was Sie brauchen.
+Ich sage Ihnen ehrlich, ob ich es mache – und was es kostet.

apps/web/src/payload/collections/ContextFiles/seed/MAINTENANCE.md

@@ -0,0 +1,35 @@
+# Sorglos-Betrieb – Damit Sie sich auf Ihr Geschäft konzentrieren können
+
+Eine Website ist ein lebendiger Teil Ihres Unternehmens. Sie soll funktionieren, sicher sein und gut aussehen – ohne dass Sie sich ständig darum kümmern müssen.
+
+Genau dafür gibt es meinen Sorglos-Betrieb.
+
+Das ist keine automatische Server-Überwachung und kein reiner Wartungsvertrag. Es ist meine persönliche Verantwortung, Ihre Website so stabil und aktuell wie möglich zu halten. Ich schaue regelmäßig vorbei, behebe Probleme frühzeitig und reagiere schnell, wenn doch einmal etwas nicht rund läuft.
+
+## Was Sie erwarten können:
+
+### Ich kümmere mich proaktiv
+
+Regelmäßige Checks, Updates von Systemen und Plugins, Sicherheitsüberprüfungen – alles, was typische Ausfälle und Schwachstellen verhindert oder minimiert.
+
+### Schnelle Reaktion bei Problemen
+
+Websites können mal down gehen – durch Hoster-Störungen, plötzliche Updates von Drittanbietern oder andere unvorhergesehene Dinge. In solchen Fällen bin ich für Sie da: Ich analysiere, behebe und informiere Sie transparent. Sie müssen nicht selbst recherchieren oder panisch Support-Tickets schreiben.
+
+### Sicherheit und Aktualität bleiben im Blick
+
+Ich halte die bestehende Technik auf dem neuesten Stand, korrigiere kleine Fehler und passe Inhalte an, wenn nötig – alles innerhalb des vereinbarten Rahmens. So bleibt Ihre Website vertrauenswürdig und nutzerfreundlich.
+
+### Klare Grenzen – faire Erwartungen
+
+Der Sorglos-Betrieb deckt die Instandhaltung und Pflege der bestehenden Website ab: Technischer Betrieb, Sicherheit, kleine Korrekturen und Aktualisierungen.
+Neue Inhalte erstellen, große Umstrukturierungen, neue Features oder umfangreiche Redaktionsarbeit gehören nicht dazu – das besprechen und bepreisen wir separat und transparent.
+
+### Kurz gesagt:
+
+Ich nehme Ihnen so viel wie möglich vom technischen Alltag ab, damit Sie sich auf das konzentrieren können, was Sie am besten können – Ihr Geschäft führen.
+Ich kann nicht jede Störung im Voraus verhindern (das kann niemand), aber ich sorge dafür, dass solche Momente selten bleiben und schnell wieder behoben sind.
+
+### Sorglos-Betrieb bedeutet für mich:
+
+Ich kümmere mich – verlässlich, ehrlich und mit dem gleichen Anspruch, mit dem ich Ihre Website gebaut habe.

apps/web/src/payload/collections/ContextFiles/seed/PRICING.md

@@ -0,0 +1,234 @@
+Preise
+
+1. Website – Fixpreis
+
+Basis
+
+4.000 € einmalig
+
+Die Grundlage für jede Website:
+• Projekt-Setup & Infrastruktur
+• Hosting-Bereitstellung
+• Grundstruktur & Design-Vorlage
+• technisches SEO-Basics
+• Analytics (mit automatischem Mail-Report)
+• Testing, Staging, Production Umgebung
+• Livegang
+
+Enthält keine Seiten, Inhalte oder Funktionen.
+
+⸻
+
+2. Entwicklung (Produktion)
+
+Seite
+
+600 € / Seite
+
+Individuell gestaltete Seite –
+mit Layout, Struktur, Textaufteilung, responsivem Design.
+
+⸻
+
+Feature (System)
+
+1.500 € / Feature
+
+Ein in sich geschlossenes System mit Datenstruktur, Darstellung und Pflegefähigkeit.
+
+Typische Beispiele:
+• Produktbereich
+• Blog
+• News
+• Jobs
+• Referenzen
+• Events
+
+Ein Feature erzeugt ein Datenmodell, Übersichten & Detailseiten.
+
+⸻
+
+Funktion (Logik)
+
+800 € / Funktion
+
+Funktionen liefern Logik und Interaktion, z. B.:
+• Kontaktformular
+• Mailversand
+• Suche
+• Filter
+• Mehrsprachigkeit (System)
+• PDF-Export von Daten
+• API-Anbindungen (z. B. Produkt-Sync)
+• Redirect-Logik
+• Automatisierte Aufgaben
+
+Jede Funktion ist ein klar umrissener Logikbaustein.
+
+⸻
+
+3. Visuelle Inszenierung & Interaktion
+
+(Hier geht es um Design/UX-Extras, nicht um „Standard-Design“.)
+
+Visuelle Inszenierung
+
+1.500 € / Abschnitt
+
+Erweiterte Gestaltung:
+• Hero-Story
+• visuelle Abläufe
+• Scroll-Effekte
+• speziell inszenierte Sektionen
+
+⸻
+
+Komplexe Interaktion
+
+1.500 € / Interaktion
+
+Dargestellte, interaktive UI-Erlebnisse:
+• Konfiguratoren
+• Live-Previews
+• mehrstufige Auswahlprozesse
+
+(Nutzt deine bestehenden Bausteine, gehört aber zur Entwicklung.)
+
+⸻
+
+4. Inhalte & Medien
+
+Neuer Datensatz
+
+200 € / Stück
+
+Beispiele:
+• Produkt
+• Blogpost
+• News
+• Case
+• Job
+
+Datensätze enthalten Inhalte mit Text, Medien, Metadaten.
+
+⸻
+
+Datensatz anpassen
+
+200 € / Stück
+• Textupdates
+• Bildwechsel
+• Feldänderungen (ohne Schemaänderung)
+
+⸻
+
+5. Betrieb & Wartung (Pflicht)
+
+Hosting & Betrieb
+
+12 Monate = 3.000 €
+
+Sichert:
+• Webhosting & Verfügbarkeit
+• Sicherheitsupdates
+• Backups & Monitoring
+• Analytics inkl. Reports
+• Medien-Speicher (Standard bis 20 GB)
+
+⸻
+
+6. Speicher-Erweiterung (optional)
+
+Mehr Speicher
+
++10 € / Monat → +10 GB (aber nur 20/100/200 GB)
+
+Wenn das inklusive Volumen überschritten wird, wird automatisch erweitert.
+
+(Keine Leistungsdiskussion – nur Infrastruktur.)
+
+⸻
+
+7. Headless CMS (optional)
+
+CMS-Einrichtung
+
+1.500 € einmalig
+
+Einrichtung eines Headless CMS:
+• Struktur
+• Rollen
+• Rechte
+• API-Anbindung
+• Deployment
+• kurze Einführung
+
+⸻
+
+CMS-Anbindung pro Feature
+
+800 € / Feature
+
+Erlaubt, dass Datensätze (z. B. Blog, News) im CMS gepflegt werden.
+Seiten & Layout bleiben bei dir.
+
+⸻
+
+8. App / interne Software
+
+Entwicklung nach Zeit
+
+120 € / Stunde
+
+Für:
+• interne Tools
+• Prozesslogik
+• Workflows
+• Automatisierungen
+• alles, was Zustände und Abläufe beinhaltet
+
+(Kein Fixpreis, weil scope offen ist.)
+
+⸻
+
+9. Integrationen (optional)
+
+API-Schnittstelle / Daten-Sync
+
+800 € / Zielsystem
+
+Synchronisation zu externem System (Push):
+• Produkt-Sync
+• CRM / ERP / Stripe / sonstige API
+
+Nicht enthalten:
+• Betrieb fremder Systeme
+• Echtzeit-Pull-Mechanismen
+• Zustandsabhängige Syncs
+
+⸻
+
+10. Wichtige Regeln
+
+Seiten = Entwicklung
+Datensätze = Inhalte & Pflege
+Features = Daten-Systeme
+Funktionen = Logik
+CMS-Anbindung = optionale Datenpflege über Schnittstelle
+Betrieb = Hosting, Updates, Backups, Analytics
+Apps = Stunden (Prozesse & Systeme außerhalb der Website)
+
+⸻
+
+Leistungsausschlüsse (kurz und klar)
+• Kein Betrieb von Mail-Servern
+• Keine Logistik, kein Shop-Checkout
+• Kein Drittanbieter-Betrieb
+• Keine permanente Überwachung fremder Systeme
+
+⸻
+
+Satz für Kundenkommunikation
+
+Ich baue digitale Systeme mit klaren Preisen und Ergebnissen –
+keine Stunden, keine Überraschungen.

apps/web/src/payload/collections/ContextFiles/seed/PRINCIPLES.md

@@ -0,0 +1,43 @@
+Prinzipien
+
+Ich arbeite nach klaren Grundsätzen, die sicherstellen, dass meine Kunden fair, transparent und langfristig profitieren.
+
+⸻
+
+1. Volle Preis-Transparenz
+   Alle Kosten sind offen und nachvollziehbar.
+   Es gibt keine versteckten Gebühren, keine Abos, keine Lock-ins.
+   Jeder Kunde sieht genau, wofür er bezahlt.
+
+⸻
+
+2. Quellcode & Projektzugang
+   Auf Wunsch erhalten Kunden jederzeit den vollständigen Source Code und eine nachvollziehbare Struktur.
+   Damit kann jeder andere Entwickler problemlos weiterarbeiten.
+   Niemand kann später behaupten, der Code sei „Messy“ oder unbrauchbar.
+
+⸻
+
+3. Best Practices & saubere Technik
+   Ich setze konsequent bewährte Standards und dokumentierte Abläufe ein.
+   Das sorgt dafür, dass Systeme wartbar, verständlich und erweiterbar bleiben – langfristig.
+
+⸻
+
+4. Verantwortung & Fairness
+   Ich übernehme die technische Verantwortung für die Website.
+   Ich garantiere keine Umsätze, Rankings oder rechtliche Ergebnisse – nur saubere Umsetzung und stabile Systeme.
+   Wenn etwas nicht sinnvoll ist, sage ich es ehrlich.
+
+⸻
+
+5. Langfristiger Wert
+   Eine Website ist ein Investment.
+   Ich baue sie so, dass Anpassungen, Erweiterungen und Übergaben an andere Entwickler problemlos möglich sind.
+   Das schützt Ihre Investition und vermeidet teure Neuaufbauten.
+
+⸻
+
+6. Zusammenarbeit ohne Tricks
+   Keine künstlichen Deadlines, kein unnötiger Overhead.
+   Kommunikation ist klar, Entscheidungen nachvollziehbar, Übergaben sauber dokumentiert.

apps/web/src/payload/collections/ContextFiles/seed/STANDARDS.md

@@ -0,0 +1,36 @@
+# Meine Standards
+
+Ich entwickle Websites nach Prinzipien, die über das reine Funktionieren hinausgehen.
+Das Ziel ist eine Seite, die nicht nur heute überzeugt, sondern in den nächsten Jahren stabil, kosteneffizient, sicher und verantwortungsvoll bleibt – ohne dass Sie ständig nachbessern, abmahnen lassen oder sich für unnötigen Ressourcenverbrauch rechtfertigen müssen.
+
+## Was das für Sie konkret bedeutet:
+
+### Deutlich geringerer Energie- und CO₂-Verbrauch
+
+Durch konsequente Optimierung von Code, Bildern, Schriften und Ladeverhalten entsteht eine schlanke Website.
+→ Ihre Besucher laden die Seite spürbar schneller, Ihre Hosting-Kosten bleiben niedrig, und der CO₂-Fußabdruck pro Aufruf liegt oft um 70–90 % unter dem Durchschnitt vergleichbarer Projekte. Das ist heute für viele Unternehmen ein echter Wettbewerbs- und Imagevorteil – ohne dass Sie Kompromisse bei Design oder Funktionalität eingehen müssen.
+
+### Technologische Souveränität & Unabhängigkeit
+
+Keine Abhängigkeit von Big Tech, geschlossenen Baukasten-Systemen oder undurchsichtigen Cloud-Plattformen. Wir setzen konsequent auf Self-Hosting und Open-Source-Kerntechnologien.
+→ Alles, was für Ihre Website entwickelt wird, gehört Ihnen. Der Code ist custom-coded, die Infrastruktur ist unabhängig. Wenn ein großer Anbieter seine Preise erhöht, Bedingungen ändert oder Dienste einstellt, bleibt Ihre Website davon unberührt. Sie behalten die volle Kontrolle über Ihre digitale Identität – dauerhaft und ohne "Lock-in"-Effekte.
+
+### Vertrauen bei Ihren Besuchern
+
+Kein Cookie-Banner, kein heimliches Tracking, keine versteckten Datenabfragen.
+→ Viele Menschen erkennen intuitiv, dass hier mitgedacht wurde. Das schafft ein deutlich besseres Gefühl – besonders bei Kunden, die selbst Wert auf Datenschutz legen, in regulierten Branchen tätig sind oder einfach ein seriöses Unternehmen erwarten.
+
+### Sicherheit von Grund auf eingebaut
+
+Sichere Formulare, Schutz vor typischen Angriffsvektoren, keine veralteten oder riskanten Bibliotheken, lokale Ressourcen wo immer möglich.
+→ Die Website wird nicht schon nach wenigen Monaten zum Sicherheitsrisiko. Sie sparen sich spätere teure Sicherheits-Updates, Penetrationstests oder im Worst Case den Umgang mit einem Datenleck. Mehr Ruhe und weniger unvorhergesehene Kosten.
+
+### DSGVO-Konformität ohne Grauzonen oder Tricks
+
+Es wird nur verarbeitet, was technisch unbedingt erforderlich ist und ohne aktive Einwilligung erlaubt bleibt.
+→ Sie können das Thema Datenschutz mit gutem Gewissen abhaken. Keine Abmahn-Risiken, keine nervösen Kundenanfragen, keine teuren Nachbesserungen.
+
+### Langfristig wartungsarm und zukunftssicher
+
+Weil Abhängigkeiten minimiert und bewährte, schlanke Techniken bevorzugt werden, altert die Website deutlich langsamer.
+→ Sie zahlen weniger für regelmäßige Updates, haben seltener böse Überraschungen und können Ihr Budget gezielt in Inhalte, Marketing oder neue Funktionen investieren – statt in Notfall-Reparaturen.

apps/web/src/payload/collections/ContextFiles/seed/STYLEGUIDE.md

@@ -0,0 +1,88 @@
+# Style Guide: Digital Architect
+
+This document defines the visual language and design rules for the Mintel ecosystem. The goal is to maintain a "Digital Architect" aesthetic: technical, reductionist, and high-fidelity.
+
+## 1. Core Philosophy: Reduction to Essentials
+
+The design should feel "Websites ohne Overhead." Every element must serve a purpose. If it doesn't add value, remove it.
+
+- **Technical Precision**: Use grids, mono-spaced labels, and clear hierarchies to signal technical competence.
+- **Tactile Digital Objects**: UI elements should feel like physical objects (buttons that depress, tags that pop in, glass that blurs).
+- **High Contrast**: Bold black/slate on clean white backgrounds, with vibrant highlighter accents.
+
+## 2. Color Palette
+
+The project uses a monochrome base with curated highlighter accents.
+
+- **Primary Base**:
+  - **Backgrounds**: Pure White (`#ffffff`) for clarity.
+  - **Surfaces**: Slate-50 for subtle depth, White with 90% opacity + 10px blur for glassmorphism.
+- **Grays (Slate)**:
+  - **Text**: Slate-800 for body, Slate-900 for headings.
+  - **UI Borders**: Slate-100 or Slate-200.
+  - **Muted text**: Slate-400 or Slate-500.
+- **Highlighter Accents**: Used exclusively for tags, markers, and selective emphasis.
+  - **Yellow**: Warm, high-visibility (`rgba(255, 235, 59, 0.95)`).
+  - **Pink**: Vibrant, energetic (`rgba(255, 167, 209, 0.95)`).
+  - **Green**: Success, technical health (`rgba(129, 199, 132, 0.95)`).
+  - **Blue**: Neutral, structural (`rgba(226, 232, 240, 0.95)`).
+
+## 3. Typography
+
+A high-contrast mix of fonts that balances modern tech with editorial readability.
+
+- **Headings (Sans-serif)**: Use **Inter**.
+  - Tracking: `-0.025em` to `-0.05em` (tracking-tighter).
+  - Weight: Bold (`700`).
+  - Color: Slate-900.
+- **Body (Serif)**: Use **Newsreader** or Georgia.
+  - Style: Defaults to serif for long-form content to provide a "notebook" feel.
+  - Line-height: Relaxed (`1.6` to `1.75`).
+- **Technical (Monospace)**: Use **JetBrains Mono**.
+  - Usage: Small labels, tags, code snippets, and "Mono-Labels" (e.g., section numbers).
+  - Feature: Uppercase with wide tracking (`0.3em` to `0.4em`).
+
+## 4. Layout & Rhythm
+
+Standardized containers ensure consistency across different screen sizes.
+
+- **Standard Container**: Max-width 6xl (`72rem`). Used for most page sections.
+- **Wide Container**: Max-width 7xl (`80rem`). Used for galleries or high-impact visuals.
+- **Narrow Container**: Max-width 4xl (`56rem`). Used for focused reading and blog posts.
+- **Section Rhythm**: Sections are separated by clear `border-top` lines and numbered (e.g., "01", "02").
+
+## 5. UI Elements & Interactions
+
+### 5.1 Buttons
+
+- **Shape**: Always pill-shaped (rounded-full).
+- **Style**: Thin borders (`1px`) with bold, uppercase mono-spaced text.
+- **Hover**: Should feel "expensive." Smooth translate-up (`-0.5rem`) and deep, soft shadows.
+
+### 5.2 Cards & Containers
+
+- **Glassmorphism**: Use for search boxes and floating elements (`backdrop-filter: blur(10px)`).
+- **Cards**: Minimalist. Use `Slate-50` or thin `Slate-100` borders. Avoid heavy shadows unless on hover.
+
+### 5.3 Highlighters & Tags
+
+- **Marker Effect**: Use a hand-drawn marker underline (diagonal skew, slightly erratic rotation) for key titles.
+- **Tags**: Small, bold, uppercase. They should use `tagPopIn` animations when appearing.
+
+## 6. Motion & Atmosphere
+
+- **Reveals**: Content should never "just appear." Use slide-up and fade-in transitions (`0.5s` to `0.7s`) to create a sense of discovery.
+- **Background Grid**: A subtle, low-opacity grid pattern provides a technical "blueprint" feel to the pages.
+- **Micro-interactions**: Hovering over icons or tags should trigger subtle scales (`105%-110%`) and color shifts.
+
+## 7. Thumbnail & Illustration Style
+
+Blog post thumbnails are generated via AI image generation. They should follow these style rules:
+
+- **Style**: Technical blueprint / architectural illustration — clean lines, monochrome base with one highlighter accent color
+- **No photos**: Abstract, geometric, or diagrammatic illustrations only
+- **Color palette**: Slate grays + one accent from the highlighter palette (yellow, pink, or green)
+- **Feel**: "Engineering notebook sketch" — precise, minimal, professional
+- **No text in images**: Titles and labels are handled by the website layout
+- **Aspect ratio**: 16:9 for blog headers, 1:1 for social media cards
+- **No AI-generated photos of people, products, or realistic scenes** — only abstract/technical visualizations

apps/web/src/payload/collections/ContextFiles/seed/TECH.md

@@ -0,0 +1,98 @@
+Wie ich Websites technisch umsetze
+
+Ich entwickle Websites als moderne, performante Websysteme – nicht als Baukasten-Seiten und nicht als schwer wartbare CMS-Konstrukte.
+Der Fokus liegt auf Geschwindigkeit, Stabilität, Datenschutz und langfristiger Wartbarkeit.
+
+Die Technik dient dabei immer einem Zweck:
+Ihre Website soll zuverlässig funktionieren, schnell laden und kein laufendes Risiko darstellen.
+
+⸻
+
+Geschwindigkeit & Performance
+
+Meine Websites sind so aufgebaut, dass Inhalte extrem schnell ausgeliefert werden – unabhängig davon, ob ein Besucher am Desktop oder mobil unterwegs ist.
+
+Das bedeutet für Sie:
+• kurze Ladezeiten
+• bessere Nutzererfahrung
+• messbar bessere Werte bei Google PageSpeed & Core Web Vitals
+• geringere Absprungraten
+
+Die Seiten werden nicht „zusammengeklickt“, sondern technisch optimiert ausgeliefert.
+
+⸻
+
+Responsives Design (ohne Kompromisse)
+
+Jede Website ist von Grund auf responsiv.
+Layout, Inhalte und Funktionen passen sich automatisch an:
+• Smartphones
+• Tablets
+• Laptops
+• große Bildschirme
+
+Dabei wird nicht einfach skaliert, sondern gezielt für unterschiedliche Bildschirmgrößen optimiert.
+Das Ergebnis ist eine saubere Darstellung und gute Bedienbarkeit auf allen Geräten.
+
+⸻
+
+Stabilität & Betriebssicherheit
+
+Im Hintergrund laufen Überwachungs- und Kontrollmechanismen, die technische Probleme automatisch erkennen.
+
+Für Sie heißt das:
+• Fehler werden bemerkt, auch wenn niemand sie meldet
+• ich werde aktiv informiert, statt erst zu reagieren, wenn etwas kaputt ist
+• Probleme können frühzeitig behoben werden
+
+Das reduziert Ausfälle und vermeidet unangenehme Überraschungen.
+
+⸻
+
+Datenschutz & DSGVO
+
+Ich setze konsequent auf freie, selbst betriebene Software statt auf große externe Plattformen.
+
+Ihre Vorteile:
+• keine Weitergabe von Nutzerdaten an Dritte
+• keine versteckten Tracker
+• keine Abhängigkeit von US-Anbietern
+• datenschutzfreundliche Statistik ohne Cookies
+
+Die Website bleibt technisch schlank und rechtlich kontrollierbar.
+
+⸻
+
+Unabhängigkeit & Kostenkontrolle
+
+Da ich keine proprietären Systeme oder Lizenzmodelle einsetze:
+• entstehen keine laufenden Tool-Gebühren
+• gibt es keine plötzlichen Preiserhöhungen
+• bleibt die Website langfristig planbar betreibbar
+
+Sie zahlen für die Leistung – nicht für Lizenzen oder Marken.
+
+⸻
+
+Wartbarkeit & Erweiterbarkeit
+
+Die technische Struktur ist so aufgebaut, dass:
+• Inhalte erweitert werden können
+• Funktionen sauber ergänzt werden können
+• Anpassungen nicht das ganze System gefährden
+
+Das schützt Ihre Investition und verhindert teure Neuaufbauten nach kurzer Zeit.
+
+⸻
+
+Kurz gesagt
+
+Ich baue Websites, die:
+• schnell sind
+• auf allen Geräten sauber funktionieren
+• datenschutzkonform betrieben werden
+• technisch überwacht sind
+• langfristig wartbar bleiben
+
+Die Technik steht nicht im Vordergrund –
+aber sie sorgt dafür, dass Ihre Website zuverlässig ihren Zweck erfüllt.

apps/web/src/payload/collections/ContextFiles/seed/TONE.md

@@ -0,0 +1,53 @@
+Ton & Haltung in der Kommunikation
+
+Dieses Dokument beschreibt die verbindlichen Prinzipien, nach denen ich mit Kunden kommuniziere – schriftlich wie mündlich, auf der Website wie im Projektalltag.
+
+1. Klarheit vor Höflichkeit
+
+Ich kommuniziere klar, direkt und verständlich.
+Unklare Formulierungen, Marketingfloskeln oder beschwichtigende Aussagen werden vermieden.
+Lieber eine ehrliche, präzise Aussage als eine „freundliche“ Unverbindlichkeit.
+
+2. Ehrlichkeit ohne Verkaufsdruck
+
+Ich verspreche nichts, was ich nicht sicher einhalten kann.
+Grenzen, Risiken und Unsicherheiten werden offen benannt.
+Es gibt keine künstliche Dringlichkeit, kein Upselling aus Prinzip und keine verdeckten Interessen.
+
+3. Sachlich, ruhig, professionell
+
+Die Kommunikation bleibt sachlich und respektvoll – auch bei Kritik, Verzögerungen oder Meinungsverschiedenheiten.
+Emotionale Eskalation, Schuldzuweisungen oder Rechtfertigungsschleifen werden vermieden.
+
+4. Verantwortung statt Ausreden
+
+Probleme werden benannt, nicht relativiert.
+Wenn etwas nicht funktioniert, wird erklärt warum – und wie damit umgegangen wird.
+Ich übernehme Verantwortung für meine Arbeit, nicht für äußere Faktoren außerhalb meines Einflusses.
+
+5. Transparenz statt Fachchinesisch
+
+Komplexe Sachverhalte werden verständlich erklärt, ohne künstliche Vereinfachung oder Herablassung.
+Fachbegriffe werden nur verwendet, wenn sie notwendig sind.
+Wissen dient der Orientierung des Kunden, nicht der Selbstdarstellung.
+
+6. Gleichbehandlung aller Kunden
+
+Alle Kunden werden gleich behandelt – unabhängig von Projektgröße, Budget oder Laufzeit.
+Es gibt keine versteckten Prioritäten, Sonderregeln oder impliziten Erwartungshaltungen.
+
+7. Langfristige Perspektive
+
+Die Kommunikation ist auf nachhaltige Zusammenarbeit ausgelegt, nicht auf kurzfristige Zustimmung.
+Entscheidungen und Empfehlungen orientieren sich am langfristigen Nutzen des Kunden.
+
+8. Persona: Marc Mintel
+
+- Mitte 30, deutsch, bodenständig
+- Umgangssprachlich aber professionell — wie ein Gespräch unter Kollegen, nicht wie ein Vortrag
+- Technisch kompetent, erklärt aber auf Augenhöhe statt zu dozieren
+- Der hilfreiche technische Nachbar, nicht der Silicon-Valley-Guru
+- Keine Arroganz, kein Belehren — Wissen teilen statt damit angeben. Wir machen unsere Dinge auch nicht größer als Sie sind. Wir sind bescheiden.
+- Spricht Probleme direkt an, ohne dramatisch zu werden
+- Nutzt "ich" statt "wir" oder Passivkonstruktionen
+- Vermeidet englische Buzzwords wo deutsche Begriffe existieren: "Kunden verlieren" statt "Churn Rate", "Ladezeit" statt "Time to Interactive"

apps/web/src/payload/collections/ContextFiles/seed/WEBSITES.md

@@ -0,0 +1,136 @@
+Wie ich Websites baue – und warum Sie damit Ruhe haben
+
+Die meisten Websites funktionieren.
+Bis jemand sie anfasst.
+Oder Google etwas ändert.
+Oder ein Plugin ein Update macht.
+Oder die Agentur nicht mehr antwortet.
+
+Ich baue Websites so, dass das alles egal ist.
+
+⸻
+
+Ich baue Websites wie Systeme – nicht wie Broschüren
+
+Eine Website ist kein Flyer.
+Sie ist ein System, das jeden Tag arbeitet.
+
+Deshalb baue ich sie auch so:
+• stabil
+• schnell
+• vorhersehbar
+• ohne Überraschungen
+
+Sie müssen nichts warten.
+Sie müssen nichts lernen.
+Sie müssen nichts pflegen, wenn Sie nicht wollen.
+
+⸻
+
+Geschwindigkeit ist kein Extra. Sie ist Standard.
+
+Viele Websites sind langsam, weil sie zusammengeklickt sind.
+
+Meine sind schnell, weil sie gebaut sind.
+
+Das bedeutet für Sie:
+• Seiten laden sofort
+• Google mag sie
+• Besucher bleiben
+• weniger Absprünge
+• bessere Sichtbarkeit
+
+90+ Pagespeed ist bei mir kein Ziel.
+Es ist der Normalzustand.
+
+⸻
+
+Keine Plugins. Keine Updates. Keine Wartungshölle.
+
+Ich nutze keine Baukästen.
+Keine Plugin-Sammlungen.
+Keine Systeme, die sich selbst zerstören.
+
+Ihre Website besteht aus:
+• sauberem Code
+• klarer Struktur
+• festen Bausteinen
+
+Das heißt:
+
+Wenn etwas geändert wird, geht nichts kaputt.
+
+⸻
+
+Inhalte und Technik sind getrennt (absichtlich)
+
+Wenn Sie Inhalte selbst pflegen wollen, können Sie das.
+Aber nur Inhalte.
+
+Kein Design.
+Keine Struktur.
+Keine Technik.
+
+Sie können nichts kaputt machen.
+Ich verspreche es.
+
+Und wenn Sie nichts selbst pflegen wollen:
+Dann schreiben Sie mir einfach.
+Ich erledige das.
+
+⸻
+
+Änderungen sind einfach. Wirklich.
+
+Neue Seite?
+Neue Funktion?
+Neue Idee?
+
+Kein Ticket.
+Kein Formular.
+Kein Projektplan.
+
+Sie schreiben mir, was Sie brauchen.
+Ich setze es um.
+Fertig.
+
+⸻
+
+Warum das alles so gebaut ist
+
+Weil ich 15 Jahre Agenturen gesehen habe.
+
+Zu viele Meetings.
+Zu viele Konzepte.
+Zu viele Übergaben.
+Zu viele „eigentlich müsste man mal“.
+
+Meine Websites sind dafür gebaut,
+dass Dinge einfach passieren.
+
+⸻
+
+Das Ergebnis für Sie
+• schnelle Website
+• keine Pflegepflicht
+• keine Überraschungen
+• keine Abhängigkeit
+• keine Agentur
+• kein Stress
+
+Oder anders gesagt:
+
+Eine Website, die sich wie eine erledigte Aufgabe anfühlt.
+
+⸻
+
+Und technisch?
+
+Technisch ist das alles sehr modern.
+Aber das ist mein Problem, nicht Ihres.
+
+⸻
+
+Wenn Sie wollen, erkläre ich Ihnen das gerne.
+
+Wenn nicht, funktioniert es trotzdem.

apps/web/src/payload/collections/ContextFiles/seed/WORDING.md

@@ -0,0 +1,56 @@
+1. Aktiv statt passiv
+
+Sätze werden aktiv formuliert.
+Keine unpersönlichen Konstruktionen, kein „es wird“, „man sollte“, „könnte“.
+
+2. Kurz und eindeutig
+
+Sätze sind so kurz wie möglich, so lang wie nötig.
+Ein Gedanke pro Satz. Keine Schachtelsätze.
+
+3. Keine Weichmacher
+
+Keine Wörter wie:
+• eventuell
+• möglicherweise
+• grundsätzlich
+• in der Regel
+• normalerweise
+
+Wenn etwas gilt, wird es gesagt. Wenn nicht, wird es ausgeschlossen.
+
+4. Keine Marketingbegriffe
+
+Keine Buzzwords, Superlative oder leeren Versprechen.
+Keine emotional aufgeladenen Begriffe. Keine Werbesprache.
+
+5. Konkrete Aussagen
+
+Keine abstrakten Formulierungen.
+Aussagen beziehen sich auf konkrete Ergebnisse, Zustände oder Abläufe.
+
+6. Ich-Form
+
+Kommunikation erfolgt konsequent in der Ich-Form.
+Kein „wir“, kein „unser Team“, keine künstliche Vergrößerung.
+
+7. Keine Rechtfertigungen
+
+Keine erklärenden Absicherungen im Satz.
+Aussagen stehen für sich und werden nicht relativiert.
+
+8. Neutraler Ton
+
+Keine Umgangssprache.
+Keine Ironie.
+Keine Emojis.
+
+9. Verbindliche Sprache
+
+Keine offenen Enden ohne Grund.
+Wenn etwas nicht garantiert wird, wird das klar benannt – ohne Abschwächung.
+
+10. Technisch präzise, sprachlich einfach
+
+Technische Inhalte werden präzise beschrieben, sprachlich jedoch simpel gehalten.
+Kein unnötiger Jargon.

apps/web/src/payload/collections/Inquiries.ts

@@ -0,0 +1,56 @@
+import type { CollectionConfig } from "payload";
+
+export const Inquiries: CollectionConfig = {
+  slug: "inquiries",
+  labels: {
+    singular: "Inquiry",
+    plural: "Inquiries",
+  },
+  admin: {
+    useAsTitle: "name",
+    defaultColumns: ["name", "email", "companyName", "createdAt"],
+    description: "Contact form leads and inquiries.",
+  },
+  access: {
+    read: ({ req: { user } }) => Boolean(user), // Admin only
+    create: () => true, // Everyone can submit
+    update: ({ req: { user } }) => Boolean(user),
+    delete: ({ req: { user } }) => Boolean(user),
+  },
+  fields: [
+    {
+      name: "name",
+      type: "text",
+      required: true,
+    },
+    {
+      name: "email",
+      type: "text", // Using text for email format, or 'email' type if strictly enforced
+      required: true,
+    },
+    {
+      name: "companyName",
+      type: "text",
+    },
+    {
+      name: "projectType",
+      type: "text",
+    },
+    {
+      name: "message",
+      type: "textarea",
+    },
+    {
+      name: "isFreeText",
+      type: "checkbox",
+      defaultValue: false,
+    },
+    {
+      name: "config",
+      type: "json",
+      admin: {
+        description: "The JSON data from the configurator.",
+      },
+    },
+  ],
+};

apps/web/src/payload/collections/Media.ts

@@ -9,6 +9,7 @@ export const Media: CollectionConfig = {
   slug: "media",
   admin: {
     useAsTitle: "alt",
+    defaultColumns: ["filename", "alt", "updatedAt"],
   },
   access: {
     read: () => true, // Publicly readable

apps/web/src/payload/collections/Posts.ts

@@ -1,14 +1,30 @@
 import type { CollectionConfig } from "payload";
+import { lexicalEditor, BlocksFeature } from "@payloadcms/richtext-lexical";
+import { payloadBlocks } from "../blocks/allBlocks";
 
 export const Posts: CollectionConfig = {
   slug: "posts",
   admin: {
     useAsTitle: "title",
+    defaultColumns: ["featuredImage", "title", "date", "updatedAt", "_status"],
+  },
+  versions: {
+    drafts: true,
   },
   access: {
     read: () => true, // Publicly readable API
   },
   fields: [
+    {
+      name: "aiOptimizer",
+      type: "ui",
+      admin: {
+        position: "sidebar",
+        components: {
+          Field: "@/src/payload/components/OptimizeButton#OptimizeButton",
+        },
+      },
+    },
     {
       name: "title",
       type: "text",
@@ -21,6 +37,11 @@ export const Posts: CollectionConfig = {
       unique: true,
       admin: {
         position: "sidebar",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/GenerateSlugButton#GenerateSlugButton",
+          ],
+        },
       },
       hooks: {
         beforeValidate: [
@@ -46,29 +67,55 @@ export const Posts: CollectionConfig = {
       name: "date",
       type: "date",
       required: true,
+      admin: {
+        position: "sidebar",
+        description:
+          "Set a future date and save as 'Published' to schedule this post. It will not appear on the frontend until this date is reached.",
+      },
     },
     {
       name: "tags",
       type: "array",
       required: true,
+      admin: {
+        position: "sidebar",
+      },
       fields: [
         {
           name: "tag",
           type: "text",
+          admin: {
+            description: "Kategorisiere diesen Post mit einem eindeutigen Tag",
+            components: { Field: "@/src/payload/components/TagSelector" },
+          },
         },
       ],
     },
     {
-      name: "thumbnail",
-      type: "text", // Keeping as text for now to match current MDX strings like "/blog/green-it.png"
+      name: "featuredImage",
+      type: "upload",
+      relationTo: "media",
+      admin: {
+        description: "The main hero image for the blog post.",
+        position: "sidebar",
+        components: {
+          afterInput: [
+            "@/src/payload/components/FieldGenerators/GenerateThumbnailButton#GenerateThumbnailButton",
+          ],
+        },
+      },
     },
     {
       name: "content",
-      type: "code",
-      admin: {
-        language: "markdown",
-      },
-      required: true,
+      type: "richText",
+      editor: lexicalEditor({
+        features: ({ defaultFeatures }) => [
+          ...defaultFeatures,
+          BlocksFeature({
+            blocks: payloadBlocks,
+          }),
+        ],
+      }),
     },
   ],
 };

apps/web/src/payload/collections/Redirects.ts

@@ -0,0 +1,33 @@
+import type { CollectionConfig } from "payload";
+
+export const Redirects: CollectionConfig = {
+  slug: "redirects",
+  admin: {
+    useAsTitle: "from",
+    defaultColumns: ["from", "to", "createdAt"],
+  },
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: "from",
+      type: "text",
+      required: true,
+      unique: true,
+      admin: {
+        description:
+          "The old URL slug that should be redirected (e.g. 'old-post-name')",
+      },
+    },
+    {
+      name: "to",
+      type: "text",
+      required: true,
+      admin: {
+        description:
+          "The new URL slug to redirect to (e.g. 'new-awesome-post')",
+      },
+    },
+  ],
+};

apps/web/src/payload/components/ColorPicker/index.tsx

@@ -0,0 +1,144 @@
+"use client";
+
+import React from "react";
+import { useField } from "@payloadcms/ui";
+
+const PREDEFINED_COLORS = [
+  { label: "Slate (Default)", value: "slate", color: "#64748b" },
+  { label: "Primary Blue", value: "blue", color: "#2563eb" },
+  { label: "Success Green", value: "green", color: "#10b981" },
+  { label: "Danger Red", value: "red", color: "#ef4444" },
+  { label: "Mintel Neon", value: "neon", color: "#d9f99d" },
+  { label: "Dark Navy", value: "navy", color: "#0f172a" },
+  { label: "Brand Slate", value: "brand-slate", color: "#334155" },
+  { label: "Emerald", value: "emerald", color: "#059669" },
+  { label: "Purple", value: "purple", color: "#8b5cf6" },
+];
+
+export default function ColorPickerField({ path }: { path: string }) {
+  const { value, setValue } = useField<string>({ path });
+
+  const handleColorClick = (colorValue: string) => {
+    setValue(colorValue);
+  };
+
+  return (
+    <div
+      className="field-type"
+      style={{ marginBottom: "1.5rem", fontFamily: "inherit" }}
+    >
+      <label
+        className="field-label"
+        style={{
+          display: "block",
+          marginBottom: "12px",
+          fontSize: "0.875rem",
+          fontWeight: 600,
+          color: "var(--theme-elevation-800)",
+        }}
+      >
+        Theme Color Selection
+      </label>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(40px, 1fr))",
+          gap: "12px",
+          marginBottom: "16px",
+          padding: "16px",
+          background: "var(--theme-elevation-50)",
+          border: "1px solid var(--theme-elevation-150)",
+          borderRadius: "8px",
+        }}
+      >
+        {PREDEFINED_COLORS.map((swatch) => {
+          const isSelected = value === swatch.value;
+          return (
+            <button
+              key={swatch.value}
+              type="button"
+              title={swatch.label}
+              onClick={() => handleColorClick(swatch.value)}
+              style={{
+                width: "100%",
+                aspectRatio: "1/1",
+                borderRadius: "8px",
+                backgroundColor: swatch.color,
+                border: isSelected
+                  ? "3px solid var(--theme-text)"
+                  : "1px solid rgba(0,0,0,0.1)",
+                boxShadow: isSelected
+                  ? "0 0 0 2px var(--theme-elevation-150)"
+                  : "inset 0 2px 4px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.1)",
+                outline: "none",
+                cursor: "pointer",
+                transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                transform: isSelected ? "scale(1.05)" : "scale(1)",
+              }}
+              onMouseEnter={(e) => {
+                if (!isSelected)
+                  Object.assign(e.currentTarget.style, {
+                    transform: "scale(1.1)",
+                    boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+                  });
+              }}
+              onMouseLeave={(e) => {
+                if (!isSelected)
+                  Object.assign(e.currentTarget.style, {
+                    transform: "scale(1)",
+                    boxShadow:
+                      "inset 0 2px 4px rgba(255,255,255,0.1), 0 2px 4px rgba(0,0,0,0.1)",
+                  });
+              }}
+            />
+          );
+        })}
+      </div>
+
+      {/* Custom Hex Fallback mapping */}
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "12px",
+          background: "var(--theme-elevation-50)",
+          padding: "12px 16px",
+          borderRadius: "8px",
+          border: "1px solid var(--theme-elevation-150)",
+        }}
+      >
+        <span
+          style={{
+            fontSize: "0.875rem",
+            fontWeight: 500,
+            color: "var(--theme-elevation-600)",
+          }}
+        >
+          Hex / String Value:
+        </span>
+        <input
+          type="text"
+          value={value || ""}
+          onChange={(e) => setValue(e.target.value)}
+          placeholder="e.g. #ff0000 or slate-500"
+          style={{
+            padding: "8px 12px",
+            border: "1px solid var(--theme-elevation-200)",
+            borderRadius: "6px",
+            background: "#ffffff",
+            color: "var(--theme-text)",
+            fontSize: "0.875rem",
+            width: "100%",
+            maxWidth: "200px",
+            boxShadow: "inset 0 1px 2px rgba(0,0,0,0.05)",
+            outline: "none",
+          }}
+          onFocus={(e) => (e.target.style.borderColor = "var(--theme-primary)")}
+          onBlur={(e) =>
+            (e.target.style.borderColor = "var(--theme-elevation-200)")
+          }
+        />
+      </div>
+    </div>
+  );
+}

apps/web/src/payload/components/FieldGenerators/AiFieldButton.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState } from "react";
+import { useField, useDocumentInfo, useForm } from "@payloadcms/ui";
+import { generateSingleFieldAction } from "../../actions/generateField";
+
+export function AiFieldButton({ path, field }: { path: string; field: any }) {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [instructions, setInstructions] = useState("");
+  const [showInstructions, setShowInstructions] = useState(false);
+
+  // Payload hooks
+  const { value, setValue } = useField<string>({ path });
+  const { title } = useDocumentInfo();
+  const { fields } = useForm();
+
+  const extractText = (lexicalRoot: any): string => {
+    if (!lexicalRoot) return "";
+    let text = "";
+    const iterate = (node: any) => {
+      if (node.text) text += node.text + " ";
+      if (node.children) node.children.forEach(iterate);
+    };
+    iterate(lexicalRoot);
+    return text;
+  };
+
+  const handleGenerate = async (e: React.MouseEvent) => {
+    e.preventDefault();
+
+    const lexicalValue = fields?.content?.value as any;
+    const legacyValue = fields?.legacyMdx?.value as string;
+    let draftContent = legacyValue || "";
+    if (!draftContent && lexicalValue?.root) {
+      draftContent = extractText(lexicalValue.root);
+    }
+
+    setIsGenerating(true);
+    try {
+      // Field name is passed as a label usually, fallback to path
+      const fieldName = typeof field?.label === "string" ? field.label : path;
+      const fieldDescription =
+        typeof field?.admin?.description === "string"
+          ? field.admin.description
+          : "";
+
+      const res = await generateSingleFieldAction(
+        (title as string) || "",
+        draftContent,
+        fieldName,
+        fieldDescription,
+        instructions,
+      );
+      if (res.success && res.text) {
+        setValue(res.text);
+      } else {
+        alert("Fehler: " + res.error);
+      }
+    } catch (e) {
+      alert("Fehler bei der Generierung.");
+    } finally {
+      setIsGenerating(false);
+      setShowInstructions(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        marginTop: "8px",
+        marginBottom: "8px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+      }}
+    >
+      <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+        <button
+          type="button"
+          onClick={handleGenerate}
+          disabled={isGenerating}
+          style={{
+            background: "var(--theme-elevation-150)",
+            border: "1px solid var(--theme-elevation-200)",
+            color: "var(--theme-text)",
+            padding: "4px 12px",
+            borderRadius: "4px",
+            fontSize: "12px",
+            cursor: isGenerating ? "not-allowed" : "pointer",
+            display: "flex",
+            alignItems: "center",
+            gap: "6px",
+            opacity: isGenerating ? 0.6 : 1,
+          }}
+        >
+          {isGenerating ? "✨ AI arbeitet..." : "✨ AI Ausfüllen"}
+        </button>
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            setShowInstructions(!showInstructions);
+          }}
+          style={{
+            background: "transparent",
+            border: "none",
+            color: "var(--theme-elevation-500)",
+            fontSize: "12px",
+            cursor: "pointer",
+            textDecoration: "underline",
+          }}
+        >
+          {showInstructions ? "Prompt verbergen" : "Mit Prompt..."}
+        </button>
+      </div>
+      {showInstructions && (
+        <textarea
+          value={instructions}
+          onChange={(e) => setInstructions(e.target.value)}
+          placeholder="Eigene Anweisung an AI (z.B. 'als catchy slogan')"
+          disabled={isGenerating}
+          style={{
+            width: "100%",
+            padding: "6px 8px",
+            fontSize: "12px",
+            borderRadius: "4px",
+            border: "1px solid var(--theme-elevation-200)",
+            background: "var(--theme-elevation-50)",
+            color: "var(--theme-text)",
+          }}
+          rows={2}
+        />
+      )}
+    </div>
+  );
+}

apps/web/src/payload/components/FieldGenerators/GenerateSlugButton.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useForm, useField } from "@payloadcms/ui";
+import { generateSlugAction } from "../../actions/generateField";
+import { Button } from "@payloadcms/ui";
+
+export function GenerateSlugButton({ path }: { path: string }) {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [instructions, setInstructions] = useState("");
+
+  useEffect(() => {
+    if (!isGenerating) return;
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue =
+        "Slug-Generierung läuft noch. Wenn Sie neu laden, bricht der Vorgang ab!";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [isGenerating]);
+
+  const { fields, replaceState } = useForm();
+  const { value, initialValue, setValue } = useField({ path });
+
+  const extractText = (lexicalRoot: any): string => {
+    if (!lexicalRoot) return "";
+    let text = "";
+    const iterate = (node: any) => {
+      if (node.text) text += node.text + " ";
+      if (node.children) node.children.forEach(iterate);
+    };
+    iterate(lexicalRoot);
+    return text;
+  };
+
+  const handleGenerate = async () => {
+    const title = (fields?.title?.value as string) || "";
+    const lexicalValue = fields?.content?.value as any;
+    const legacyValue = fields?.legacyMdx?.value as string;
+
+    let draftContent = legacyValue || "";
+    if (!draftContent && lexicalValue?.root) {
+      draftContent = extractText(lexicalValue.root);
+    }
+
+    setIsGenerating(true);
+    try {
+      const res = await generateSlugAction(
+        title,
+        draftContent,
+        initialValue as string,
+        instructions,
+      );
+      if (res.success && res.slug) {
+        setValue(res.slug);
+      } else {
+        alert("Fehler: " + res.error);
+      }
+    } catch (e) {
+      console.error(e);
+      alert("Unerwarteter Fehler.");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="flex gap-2 items-center mb-4">
+      <textarea
+        value={instructions}
+        onChange={(e) => setInstructions(e.target.value)}
+        placeholder="Optionale AI Anweisung für den Slug..."
+        disabled={isGenerating}
+        style={{
+          width: "100%",
+          minHeight: "40px",
+          padding: "8px 12px",
+          fontSize: "14px",
+          borderRadius: "4px",
+          border: "1px solid var(--theme-elevation-200)",
+          background: "var(--theme-elevation-50)",
+          color: "var(--theme-text)",
+          marginBottom: "8px",
+        }}
+      />
+      <button
+        type="button"
+        onClick={handleGenerate}
+        disabled={isGenerating}
+        className="btn btn--icon-style-none btn--size-medium ml-auto"
+        style={{
+          background: "var(--theme-elevation-150)",
+          border: "1px solid var(--theme-elevation-200)",
+          color: "var(--theme-text)",
+          boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+          transition: "all 0.2s ease",
+          opacity: isGenerating ? 0.6 : 1,
+          cursor: isGenerating ? "not-allowed" : "pointer",
+        }}
+      >
+        <span className="btn__content">
+          {isGenerating ? "✨ Generiere (ca 10s)..." : "✨ AI Slug Generieren"}
+        </span>
+      </button>
+    </div>
+  );
+}

apps/web/src/payload/components/FieldGenerators/GenerateThumbnailButton.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useForm, useField } from "@payloadcms/ui";
+import { generateThumbnailAction } from "../../actions/generateField";
+import { Button } from "@payloadcms/ui";
+
+export function GenerateThumbnailButton({ path }: { path: string }) {
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [instructions, setInstructions] = useState("");
+
+  useEffect(() => {
+    if (!isGenerating) return;
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue =
+        "Bild-Generierung läuft noch (dies dauert bis zu 2 Minuten). Wenn Sie neu laden, bricht der Vorgang ab!";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [isGenerating]);
+
+  const { fields } = useForm();
+  const { value, setValue } = useField({ path });
+
+  const extractText = (lexicalRoot: any): string => {
+    if (!lexicalRoot) return "";
+    let text = "";
+    const iterate = (node: any) => {
+      if (node.text) text += node.text + " ";
+      if (node.children) node.children.forEach(iterate);
+    };
+    iterate(lexicalRoot);
+    return text;
+  };
+
+  const handleGenerate = async () => {
+    const title = (fields?.title?.value as string) || "";
+    const lexicalValue = fields?.content?.value as any;
+    const legacyValue = fields?.legacyMdx?.value as string;
+
+    let draftContent = legacyValue || "";
+    if (!draftContent && lexicalValue?.root) {
+      draftContent = extractText(lexicalValue.root);
+    }
+
+    setIsGenerating(true);
+    try {
+      const res = await generateThumbnailAction(
+        draftContent,
+        title,
+        instructions,
+      );
+      if (res.success && res.mediaId) {
+        setValue(res.mediaId);
+      } else {
+        alert("Fehler: " + res.error);
+      }
+    } catch (e) {
+      console.error(e);
+      alert("Unerwarteter Fehler.");
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="flex gap-2 items-center mt-2 mb-4">
+      <textarea
+        value={instructions}
+        onChange={(e) => setInstructions(e.target.value)}
+        placeholder="Optionale Thumbnail-Detailanweisung (Farben, Stimmung, etc.)..."
+        disabled={isGenerating}
+        style={{
+          width: "100%",
+          minHeight: "40px",
+          padding: "8px 12px",
+          fontSize: "14px",
+          borderRadius: "4px",
+          border: "1px solid var(--theme-elevation-200)",
+          background: "var(--theme-elevation-50)",
+          color: "var(--theme-text)",
+          marginBottom: "8px",
+        }}
+      />
+      <button
+        type="button"
+        onClick={handleGenerate}
+        disabled={isGenerating}
+        className="btn btn--icon-style-none btn--size-medium"
+        style={{
+          background: "var(--theme-elevation-150)",
+          border: "1px solid var(--theme-elevation-200)",
+          color: "var(--theme-text)",
+          boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+          transition: "all 0.2s ease",
+          opacity: isGenerating ? 0.6 : 1,
+          cursor: isGenerating ? "not-allowed" : "pointer",
+        }}
+      >
+        <span className="btn__content">
+          {isGenerating
+            ? "✨ AI arbeitet (dauert ca. 1-2 Min)..."
+            : "✨ AI Thumbnail Generieren"}
+        </span>
+      </button>
+    </div>
+  );
+}

apps/web/src/payload/components/IconSelector/index.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import React, { useState } from "react";
+import { useField } from "@payloadcms/ui";
+import * as LucideIcons from "lucide-react";
+
+const COMMON_ICONS = [
+  "Check",
+  "X",
+  "AlertTriangle",
+  "Info",
+  "ArrowRight",
+  "ArrowUpRight",
+  "ChevronRight",
+  "Settings",
+  "Tool",
+  "Terminal",
+  "Code",
+  "Database",
+  "Server",
+  "Cpu",
+  "Zap",
+  "Shield",
+  "Lock",
+  "Key",
+  "Eye",
+  "Search",
+  "Filter",
+  "BarChart",
+  "LineChart",
+  "PieChart",
+  "TrendingUp",
+  "TrendingDown",
+  "Users",
+  "User",
+  "Briefcase",
+  "Building",
+  "Globe",
+  "Mail",
+  "FileText",
+  "File",
+  "Folder",
+  "Image",
+  "Video",
+  "MessageSquare",
+  "Clock",
+  "Calendar",
+  "CheckCircle",
+  "XCircle",
+  "Play",
+  "Pause",
+  "Activity",
+  "Box",
+  "Layers",
+  "Layout",
+  "Monitor",
+  "Smartphone",
+  "Tablet",
+  "Wifi",
+  "Cloud",
+  "Crosshair",
+  "Target",
+  "Trophy",
+  "Star",
+  "Heart",
+];
+
+export default function IconSelectorField({ path }: { path: string }) {
+  const { value, setValue } = useField<string>({ path });
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredIcons = COMMON_ICONS.filter((name) =>
+    name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const handleIconClick = (iconName: string) => {
+    // Toggle off if clicking the current value
+    if (value === iconName) {
+      setValue(null);
+    } else {
+      setValue(iconName);
+    }
+  };
+
+  return (
+    <div className="field-type" style={{ marginBottom: "1.5rem" }}>
+      <label
+        className="field-label"
+        style={{
+          display: "block",
+          marginBottom: "8px",
+          fontSize: "0.875rem",
+          fontWeight: 500,
+        }}
+      >
+        Icon Selection (Lucide)
+      </label>
+
+      <input
+        type="text"
+        placeholder="Search icons..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        style={{
+          padding: "8px 12px",
+          border: "1px solid var(--theme-elevation-200)",
+          borderRadius: "4px",
+          background: "var(--theme-elevation-50)",
+          color: "var(--theme-text)",
+          fontSize: "0.875rem",
+          width: "100%",
+          marginBottom: "12px",
+          boxSizing: "border-box",
+        }}
+      />
+
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(40px, 1fr))",
+          gap: "8px",
+          maxHeight: "200px",
+          overflowY: "auto",
+          padding: "4px",
+        }}
+      >
+        {filteredIcons.map((iconName) => {
+          const Icon = (LucideIcons as any)[iconName];
+          if (!Icon) return null;
+          const isSelected = value === iconName;
+
+          return (
+            <button
+              key={iconName}
+              type="button"
+              title={iconName}
+              onClick={() => handleIconClick(iconName)}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "40px",
+                height: "40px",
+                borderRadius: "6px",
+                background: isSelected
+                  ? "var(--theme-elevation-200)"
+                  : "transparent",
+                border: isSelected
+                  ? "1px solid var(--theme-elevation-400)"
+                  : "1px solid var(--theme-elevation-150)",
+                color: isSelected
+                  ? "var(--theme-text)"
+                  : "var(--theme-elevation-500)",
+                cursor: "pointer",
+                transition: "all 0.1s ease",
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.background = isSelected
+                  ? "var(--theme-elevation-200)"
+                  : "var(--theme-elevation-100)";
+                e.currentTarget.style.color = "var(--theme-text)";
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.background = isSelected
+                  ? "var(--theme-elevation-200)"
+                  : "transparent";
+                e.currentTarget.style.color = isSelected
+                  ? "var(--theme-text)"
+                  : "var(--theme-elevation-500)";
+              }}
+            >
+              <Icon size={20} strokeWidth={1.5} />
+            </button>
+          );
+        })}
+      </div>
+
+      {filteredIcons.length === 0 && (
+        <div
+          style={{
+            fontSize: "0.875rem",
+            color: "var(--theme-elevation-500)",
+            marginTop: "8px",
+          }}
+        >
+          No matching icons found.
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/payload/components/OptimizeButton.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useForm, useDocumentInfo } from "@payloadcms/ui";
+import { optimizePostText } from "../actions/optimizePost";
+import { Button } from "@payloadcms/ui";
+
+export function OptimizeButton() {
+  const [isOptimizing, setIsOptimizing] = useState(false);
+  const [instructions, setInstructions] = useState("");
+
+  useEffect(() => {
+    if (!isOptimizing) return;
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue =
+        "Lexical Block-Optimierung läuft noch (dies dauert bis zu 45 Sekunden). Wenn Sie neu laden, bricht der Vorgang ab!";
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, [isOptimizing]);
+
+  const { fields, setModified, replaceState } = useForm();
+  const { title } = useDocumentInfo();
+
+  const handleOptimize = async () => {
+    // ... gathering draftContent logic
+    const lexicalValue = fields?.content?.value as any;
+    const legacyValue = fields?.legacyMdx?.value as string;
+
+    let draftContent = legacyValue || "";
+
+    const extractText = (lexicalRoot: any): string => {
+      if (!lexicalRoot) return "";
+      let text = "";
+      const iterate = (node: any) => {
+        if (node.text) text += node.text + " ";
+        if (node.children) node.children.forEach(iterate);
+      };
+      iterate(lexicalRoot);
+      return text;
+    };
+
+    if (!draftContent && lexicalValue?.root) {
+      draftContent = extractText(lexicalValue.root);
+    }
+
+    if (!draftContent || draftContent.trim().length < 50) {
+      alert(
+        "Der Entwurf ist zu kurz. Bitte tippe zuerst ein paar Stichpunkte oder einen Rohling ein.",
+      );
+      return;
+    }
+
+    setIsOptimizing(true);
+    try {
+      // 2. We inject the title so the AI knows what it's writing about
+      const payloadText = `---\ntitle: "${title}"\n---\n\n${draftContent}`;
+
+      const response = await optimizePostText(payloadText, instructions);
+
+      if (response.success && response.lexicalAST) {
+        // 3. Inject the new Lexical AST directly into the field form state
+        // We use Payload's useForm hook replacing the value of the 'content' field.
+
+        replaceState({
+          ...fields,
+          content: {
+            ...fields.content,
+            value: response.lexicalAST,
+            initialValue: response.lexicalAST,
+          },
+        });
+
+        setModified(true);
+        alert(
+          "🎉 Artikel wurde erfolgreich von der AI optimiert und mit Lexical Components angereichert.",
+        );
+      } else {
+        alert("❌ Fehler: " + response.error);
+      }
+    } catch (error) {
+      console.error("Optimization failed:", error);
+      alert("Ein unerwarteter Fehler ist aufgetreten.");
+    } finally {
+      setIsOptimizing(false);
+    }
+  };
+
+  return (
+    <div className="mb-8 p-4 bg-slate-50 border border-slate-200 rounded-md">
+      <h3 className="text-sm font-semibold mb-2">AI Post Optimizer</h3>
+      <p className="text-xs text-slate-500 mb-4">
+        Lass Mintel AI deinen Text-Rohentwurf analysieren und automatisch in
+        einen voll formatierten Lexical Artikel mit passenden B2B Komponenten
+        (MemeCards, Mermaids) umwandeln.
+      </p>
+      <textarea
+        value={instructions}
+        onChange={(e) => setInstructions(e.target.value)}
+        placeholder="Optionale Anweisungen an die AI (z.B. 'schreibe etwas lockerer' oder 'fokussiere dich auf SEO')..."
+        disabled={isOptimizing}
+        style={{
+          width: "100%",
+          minHeight: "60px",
+          padding: "8px 12px",
+          fontSize: "14px",
+          borderRadius: "4px",
+          border: "1px solid var(--theme-elevation-200)",
+          background: "var(--theme-elevation-50)",
+          color: "var(--theme-text)",
+          marginBottom: "16px",
+        }}
+      />
+      <button
+        type="button"
+        onClick={handleOptimize}
+        disabled={isOptimizing}
+        className="btn btn--icon-style-none btn--size-medium mt-4"
+        style={{
+          background: "var(--theme-elevation-150)",
+          border: "1px solid var(--theme-elevation-200)",
+          color: "var(--theme-text)",
+          boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+          transition: "all 0.2s ease",
+          opacity: isOptimizing ? 0.7 : 1,
+          cursor: isOptimizing ? "not-allowed" : "pointer",
+        }}
+      >
+        <span className="btn__content" style={{ fontWeight: 600 }}>
+          {isOptimizing ? "✨ AI arbeitet (ca 30s)..." : "✨ Jetzt optimieren"}
+        </span>
+      </button>
+    </div>
+  );
+}

apps/web/src/payload/components/TagSelector/index.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useField } from "@payloadcms/ui";
+
+export default function TagSelectorField({ path }: { path: string }) {
+  const { value, setValue } = useField<string>({ path });
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+
+  useEffect(() => {
+    const fetchTags = async () => {
+      try {
+        const res = await fetch("/api/posts?depth=0&limit=1000");
+        const data = await res.json();
+        if (data && data.docs) {
+          const allTags = new Set<string>();
+          data.docs.forEach((post: any) => {
+            if (post.tags && Array.isArray(post.tags)) {
+              post.tags.forEach((t: any) => {
+                if (t.tag) allTags.add(t.tag);
+              });
+            }
+          });
+          setSuggestions(Array.from(allTags).sort());
+        }
+      } catch (err) {
+        console.error("Failed to load tags for suggestions", err);
+      }
+    };
+    fetchTags();
+  }, []);
+
+  const [isFocused, setIsFocused] = useState(false);
+
+  return (
+    <div style={{ marginBottom: "1rem", position: "relative" }}>
+      <label
+        style={{
+          display: "block",
+          marginBottom: "4px",
+          fontSize: "0.75rem",
+          fontWeight: 600,
+          color: "var(--theme-elevation-500)",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em",
+        }}
+      >
+        Tag Name
+      </label>
+      <div style={{ position: "relative" }}>
+        <input
+          type="text"
+          value={value || ""}
+          onChange={(e) => setValue(e.target.value)}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setTimeout(() => setIsFocused(false), 200)}
+          placeholder="e.g. Next.js"
+          style={{
+            padding: "4px 8px",
+            border: "1px solid var(--theme-elevation-200)",
+            borderRadius: "4px",
+            background: "var(--theme-elevation-50)",
+            color: "var(--theme-text)",
+            fontSize: "0.875rem",
+            width: "100%",
+            boxSizing: "border-box",
+            outline: "none",
+            transition: "border-color 0.2s",
+          }}
+        />
+
+        {isFocused && suggestions.length > 0 && (
+          <div
+            style={{
+              position: "absolute",
+              top: "100%",
+              left: 0,
+              right: 0,
+              zIndex: 50,
+              background: "#ffffff",
+              border: "1px solid var(--theme-elevation-200)",
+              borderRadius: "4px",
+              marginTop: "2px",
+              maxHeight: "120px",
+              overflowY: "auto",
+              boxShadow: "0 10px 15px -3px rgba(0,0,0,0.1)",
+            }}
+          >
+            {suggestions.map((tag) => (
+              <div
+                key={tag}
+                onClick={() => {
+                  setValue(tag);
+                  setIsFocused(false);
+                }}
+                onMouseDown={(e) => e.preventDefault()}
+                style={{
+                  padding: "4px 10px",
+                  cursor: "pointer",
+                  fontSize: "0.8rem",
+                  color: "var(--theme-text)",
+                  borderBottom: "1px solid var(--theme-elevation-50)",
+                }}
+                onMouseEnter={(e) =>
+                  (e.currentTarget.style.background =
+                    "var(--theme-elevation-100)")
+                }
+                onMouseLeave={(e) =>
+                  (e.currentTarget.style.background = "transparent")
+                }
+              >
+                {tag}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+      {!value && (
+        <div
+          style={{
+            fontSize: "0.7rem",
+            color: "var(--theme-elevation-400)",
+            marginTop: "2px",
+          }}
+        >
+          Select from list or type a new tag.
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/payload/globals/AiSettings.ts

@@ -0,0 +1,30 @@
+import type { GlobalConfig } from "payload";
+export const AiSettings: GlobalConfig = {
+  slug: "ai-settings",
+  label: "AI Settings",
+  access: {
+    read: () => true, // Needed if the Next.js frontend or server actions need to fetch it
+  },
+  admin: {
+    group: "Configuration",
+  },
+  fields: [
+    {
+      name: "customSources",
+      type: "array",
+      label: "Custom Trusted Sources",
+      admin: {
+        description:
+          "List of trusted B2B/Tech sources (e.g. 'Vercel Blog', 'Fireship', 'Theo - t3.gg') the AI should prioritize when researching facts or videos. This overrides the hardcoded defaults.",
+      },
+      fields: [
+        {
+          name: "sourceName",
+          type: "text",
+          required: true,
+          label: "Channel or Publication Name",
+        },
+      ],
+    },
+  ],
+};

apps/web/src/payload/utils/lexicalParser.ts

@@ -0,0 +1,640 @@
+/**
+ * Converts a Markdown+JSX string into a Lexical AST node array.
+ * Handles all registered Payload blocks and standard markdown formatting.
+ */
+
+function propValue(chunk: string, prop: string): string {
+  // Match prop="value" or prop='value' or prop={value}
+  const match =
+    chunk.match(new RegExp(`${prop}=["']([^"']+)["']`)) ||
+    chunk.match(new RegExp(`${prop}=\\{([^}]+)\\}`));
+  return match ? match[1] : "";
+}
+
+function innerContent(chunk: string, tag: string): string {
+  const match = chunk.match(
+    new RegExp(`<${tag}(?:\\s[^>]*)?>([\\s\\S]*?)<\\/${tag}>`),
+  );
+  return match ? match[1].trim() : "";
+}
+
+function blockNode(blockType: string, fields: Record<string, any>) {
+  return {
+    type: "block",
+    format: "",
+    version: 2,
+    fields: { blockType, ...fields },
+  };
+}
+
+export function parseMarkdownToLexical(markdown: string): any[] {
+  const textNode = (text: string) => ({
+    type: "paragraph",
+    format: "",
+    indent: 0,
+    version: 1,
+    children: [{ mode: "normal", type: "text", text, version: 1 }],
+  });
+
+  const nodes: any[] = [];
+
+  // Strip frontmatter
+  let content = markdown;
+  const fm = content.match(/^---\s*\n[\s\S]*?\n---/);
+  if (fm) content = content.replace(fm[0], "").trim();
+
+  // Pre-process: reassemble multi-line JSX tags that got split by double-newline chunking.
+  // This handles tags like <IconList>\n\n<IconListItem ... />\n\n</IconList>
+  content = reassembleMultiLineJSX(content);
+
+  const rawChunks = content.split(/\n\s*\n/);
+
+  for (let chunk of rawChunks) {
+    chunk = chunk.trim();
+    if (!chunk) continue;
+
+    // === Self-closing tags (no children) ===
+
+    // ArticleMeme / MemeCard
+    if (chunk.includes("<ArticleMeme") || chunk.includes("<MemeCard")) {
+      nodes.push(
+        blockNode("memeCard", {
+          template: propValue(chunk, "template"),
+          captions: propValue(chunk, "captions"),
+        }),
+      );
+      continue;
+    }
+
+    // BoldNumber
+    if (chunk.includes("<BoldNumber")) {
+      nodes.push(
+        blockNode("boldNumber", {
+          value: propValue(chunk, "value"),
+          label: propValue(chunk, "label"),
+          source: propValue(chunk, "source"),
+          sourceUrl: propValue(chunk, "sourceUrl"),
+        }),
+      );
+      continue;
+    }
+
+    // WebVitalsScore
+    if (chunk.includes("<WebVitalsScore")) {
+      nodes.push(
+        blockNode("webVitalsScore", {
+          lcp: parseFloat(propValue(chunk, "lcp")) || 0,
+          inp: parseFloat(propValue(chunk, "inp")) || 0,
+          cls: parseFloat(propValue(chunk, "cls")) || 0,
+          description: propValue(chunk, "description"),
+        }),
+      );
+      continue;
+    }
+
+    // LeadMagnet
+    if (chunk.includes("<LeadMagnet")) {
+      nodes.push(
+        blockNode("leadMagnet", {
+          title: propValue(chunk, "title"),
+          description: propValue(chunk, "description"),
+          buttonText: propValue(chunk, "buttonText") || "Jetzt anfragen",
+          href: propValue(chunk, "href") || "/contact",
+          variant: propValue(chunk, "variant") || "standard",
+        }),
+      );
+      continue;
+    }
+
+    // ComparisonRow
+    if (chunk.includes("<ComparisonRow")) {
+      nodes.push(
+        blockNode("comparisonRow", {
+          description: propValue(chunk, "description"),
+          negativeLabel: propValue(chunk, "negativeLabel"),
+          negativeText: propValue(chunk, "negativeText"),
+          positiveLabel: propValue(chunk, "positiveLabel"),
+          positiveText: propValue(chunk, "positiveText"),
+          reverse: chunk.includes("reverse={true}"),
+        }),
+      );
+      continue;
+    }
+
+    // StatsDisplay
+    if (chunk.includes("<StatsDisplay")) {
+      nodes.push(
+        blockNode("statsDisplay", {
+          label: propValue(chunk, "label"),
+          value: propValue(chunk, "value"),
+          subtext: propValue(chunk, "subtext"),
+        }),
+      );
+      continue;
+    }
+
+    // MetricBar
+    if (chunk.includes("<MetricBar")) {
+      nodes.push(
+        blockNode("metricBar", {
+          label: propValue(chunk, "label"),
+          value: parseFloat(propValue(chunk, "value")) || 0,
+          max: parseFloat(propValue(chunk, "max")) || 100,
+          unit: propValue(chunk, "unit") || "%",
+        }),
+      );
+      continue;
+    }
+
+    // ExternalLink
+    if (chunk.includes("<ExternalLink")) {
+      nodes.push(
+        blockNode("externalLink", {
+          href: propValue(chunk, "href"),
+          label:
+            propValue(chunk, "label") || innerContent(chunk, "ExternalLink"),
+        }),
+      );
+      continue;
+    }
+
+    // TrackedLink
+    if (chunk.includes("<TrackedLink")) {
+      nodes.push(
+        blockNode("trackedLink", {
+          href: propValue(chunk, "href"),
+          label:
+            propValue(chunk, "label") || innerContent(chunk, "TrackedLink"),
+          eventName: propValue(chunk, "eventName"),
+        }),
+      );
+      continue;
+    }
+
+    // YouTube
+    if (chunk.includes("<YouTubeEmbed")) {
+      nodes.push(
+        blockNode("youTubeEmbed", {
+          videoId: propValue(chunk, "videoId"),
+        }),
+      );
+      continue;
+    }
+
+    // LinkedIn
+    if (chunk.includes("<LinkedInEmbed")) {
+      nodes.push(
+        blockNode("linkedInEmbed", {
+          url: propValue(chunk, "url"),
+        }),
+      );
+      continue;
+    }
+
+    // Twitter
+    if (chunk.includes("<TwitterEmbed")) {
+      nodes.push(
+        blockNode("twitterEmbed", {
+          url: propValue(chunk, "url"),
+        }),
+      );
+      continue;
+    }
+
+    // Interactive (self-closing, defaults only)
+    if (chunk.includes("<RevenueLossCalculator")) {
+      nodes.push(
+        blockNode("revenueLossCalculator", {
+          title: propValue(chunk, "title") || "Performance Revenue Simulator",
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<PerformanceChart")) {
+      nodes.push(
+        blockNode("performanceChart", {
+          title: propValue(chunk, "title") || "Website Performance",
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<PerformanceROICalculator")) {
+      nodes.push(
+        blockNode("performanceROICalculator", {
+          baseConversionRate:
+            parseFloat(propValue(chunk, "baseConversionRate")) || 2.5,
+          monthlyVisitors:
+            parseInt(propValue(chunk, "monthlyVisitors")) || 50000,
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<LoadTimeSimulator")) {
+      nodes.push(
+        blockNode("loadTimeSimulator", {
+          initialLoadTime:
+            parseFloat(propValue(chunk, "initialLoadTime")) || 3.5,
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<ArchitectureBuilder")) {
+      nodes.push(
+        blockNode("architectureBuilder", {
+          preset: propValue(chunk, "preset") || "standard",
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<DigitalAssetVisualizer")) {
+      nodes.push(
+        blockNode("digitalAssetVisualizer", {
+          assetId: propValue(chunk, "assetId"),
+        }),
+      );
+      continue;
+    }
+
+    // === Tags with inner content ===
+
+    // TLDR
+    if (chunk.includes("<TLDR>")) {
+      const inner = innerContent(chunk, "TLDR");
+      if (inner) {
+        nodes.push(blockNode("mintelTldr", { content: inner }));
+        continue;
+      }
+    }
+
+    // Paragraph (handles <Paragraph>, <Paragraph ...attrs>)
+    if (/<Paragraph[\s>]/.test(chunk)) {
+      const inner = innerContent(chunk, "Paragraph");
+      if (inner) {
+        nodes.push(blockNode("mintelP", { text: inner }));
+        continue;
+      }
+    }
+
+    // H2 (handles <H2>, <H2 id="...">)
+    if (/<H2[\s>]/.test(chunk)) {
+      const inner = innerContent(chunk, "H2");
+      if (inner) {
+        nodes.push(
+          blockNode("mintelHeading", {
+            text: inner,
+            seoLevel: "h2",
+            displayLevel: "h2",
+          }),
+        );
+        continue;
+      }
+    }
+
+    // H3 (handles <H3>, <H3 id="...">)
+    if (/<H3[\s>]/.test(chunk)) {
+      const inner = innerContent(chunk, "H3");
+      if (inner) {
+        nodes.push(
+          blockNode("mintelHeading", {
+            text: inner,
+            seoLevel: "h3",
+            displayLevel: "h3",
+          }),
+        );
+        continue;
+      }
+    }
+
+    // Marker (inline highlight, usually inside Paragraph – store as standalone block)
+    if (chunk.includes("<Marker>") && !chunk.includes("<Paragraph")) {
+      const inner = innerContent(chunk, "Marker");
+      if (inner) {
+        nodes.push(blockNode("marker", { text: inner }));
+        continue;
+      }
+    }
+
+    // LeadParagraph
+    if (chunk.includes("<LeadParagraph>")) {
+      const inner = innerContent(chunk, "LeadParagraph");
+      if (inner) {
+        nodes.push(blockNode("leadParagraph", { text: inner }));
+        continue;
+      }
+    }
+
+    // ArticleBlockquote
+    if (chunk.includes("<ArticleBlockquote")) {
+      nodes.push(
+        blockNode("articleBlockquote", {
+          quote: innerContent(chunk, "ArticleBlockquote"),
+          author: propValue(chunk, "author"),
+          role: propValue(chunk, "role"),
+        }),
+      );
+      continue;
+    }
+
+    // ArticleQuote
+    if (chunk.includes("<ArticleQuote")) {
+      nodes.push(
+        blockNode("articleQuote", {
+          quote:
+            innerContent(chunk, "ArticleQuote") || propValue(chunk, "quote"),
+          author: propValue(chunk, "author"),
+          role: propValue(chunk, "role"),
+          source: propValue(chunk, "source"),
+        }),
+      );
+      continue;
+    }
+
+    // Mermaid
+    if (chunk.includes("<Mermaid")) {
+      nodes.push(
+        blockNode("mermaid", {
+          id: propValue(chunk, "id") || `chart-${Date.now()}`,
+          title: propValue(chunk, "title"),
+          showShare: chunk.includes("showShare={true}"),
+          chartDefinition: innerContent(chunk, "Mermaid"),
+        }),
+      );
+      continue;
+    }
+
+    // Diagram variants (prefer inner definition, fall back to raw chunk text)
+    if (chunk.includes("<DiagramFlow")) {
+      nodes.push(
+        blockNode("diagramFlow", {
+          definition:
+            innerContent(chunk, "DiagramFlow") ||
+            propValue(chunk, "definition") ||
+            chunk,
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<DiagramSequence")) {
+      nodes.push(
+        blockNode("diagramSequence", {
+          definition:
+            innerContent(chunk, "DiagramSequence") ||
+            propValue(chunk, "definition") ||
+            chunk,
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<DiagramGantt")) {
+      nodes.push(
+        blockNode("diagramGantt", {
+          definition:
+            innerContent(chunk, "DiagramGantt") ||
+            propValue(chunk, "definition") ||
+            chunk,
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<DiagramPie")) {
+      nodes.push(
+        blockNode("diagramPie", {
+          definition:
+            innerContent(chunk, "DiagramPie") ||
+            propValue(chunk, "definition") ||
+            chunk,
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<DiagramState")) {
+      nodes.push(
+        blockNode("diagramState", {
+          definition:
+            innerContent(chunk, "DiagramState") ||
+            propValue(chunk, "definition") ||
+            chunk,
+        }),
+      );
+      continue;
+    }
+    if (chunk.includes("<DiagramTimeline")) {
+      nodes.push(
+        blockNode("diagramTimeline", {
+          definition:
+            innerContent(chunk, "DiagramTimeline") ||
+            propValue(chunk, "definition") ||
+            chunk,
+        }),
+      );
+      continue;
+    }
+
+    // Section (wrapping container – unwrap and parse inner content as top-level blocks)
+    if (chunk.includes("<Section")) {
+      const inner = innerContent(chunk, "Section");
+      if (inner) {
+        const innerNodes = parseMarkdownToLexical(inner);
+        nodes.push(...innerNodes);
+      }
+      continue;
+    }
+
+    // FAQSection (wrapping container)
+    if (chunk.includes("<FAQSection")) {
+      // FAQSection contains nested H3/Paragraph pairs.
+      // We extract them as individual blocks instead.
+      const faqContent = innerContent(chunk, "FAQSection");
+      if (faqContent) {
+        // Parse nested content recursively
+        const innerNodes = parseMarkdownToLexical(faqContent);
+        nodes.push(...innerNodes);
+      }
+      continue;
+    }
+
+    // IconList with IconListItems
+    if (chunk.includes("<IconList")) {
+      const items: any[] = [];
+      // Self-closing: <IconListItem icon="Check" title="..." description="..." />
+      const itemMatches = chunk.matchAll(/<IconListItem\s+([^>]*?)\/>/g);
+      for (const m of itemMatches) {
+        const attrs = m[1];
+        const title = (attrs.match(/title=["']([^"']+)["']/) || [])[1] || "";
+        const desc =
+          (attrs.match(/description=["']([^"']+)["']/) || [])[1] || "";
+        items.push({
+          icon: (attrs.match(/icon=["']([^"']+)["']/) || [])[1] || "Check",
+          title: title || "•",
+          description: desc,
+        });
+      }
+      // Content-wrapped: <IconListItem check>HTML content</IconListItem>
+      const itemMatches2 = chunk.matchAll(
+        /<IconListItem([^>]*)>([\s\S]*?)<\/IconListItem>/g,
+      );
+      for (const m of itemMatches2) {
+        const attrs = m[1] || "";
+        const innerHtml = m[2].trim();
+        // Use title attr if present, otherwise use inner HTML (stripped of tags) as title
+        const titleAttr = (attrs.match(/title=["']([^"']+)["']/) || [])[1];
+        const strippedInner = innerHtml.replace(/<[^>]+>/g, "").trim();
+        items.push({
+          icon: (attrs.match(/icon=["']([^"']+)["']/) || [])[1] || "Check",
+          title: titleAttr || strippedInner || "•",
+          description: "",
+        });
+      }
+      if (items.length > 0) {
+        nodes.push(blockNode("iconList", { items }));
+        continue;
+      }
+    }
+
+    // StatsGrid
+    if (chunk.includes("<StatsGrid")) {
+      const stats: any[] = [];
+      const statMatches = chunk.matchAll(/<StatItem\s+([^>]*?)\/>/g);
+      for (const m of statMatches) {
+        const attrs = m[1];
+        stats.push({
+          label: (attrs.match(/label=["']([^"']+)["']/) || [])[1] || "",
+          value: (attrs.match(/value=["']([^"']+)["']/) || [])[1] || "",
+        });
+      }
+      // Also try inline props pattern
+      if (stats.length === 0) {
+        const innerStats = innerContent(chunk, "StatsGrid");
+        if (innerStats) {
+          // fallback: store the raw content
+          nodes.push(blockNode("statsGrid", { stats: [] }));
+          continue;
+        }
+      }
+      nodes.push(blockNode("statsGrid", { stats }));
+      continue;
+    }
+
+    // PremiumComparisonChart
+    if (chunk.includes("<PremiumComparisonChart")) {
+      nodes.push(
+        blockNode("premiumComparisonChart", {
+          title: propValue(chunk, "title"),
+        }),
+      );
+      continue;
+    }
+
+    // WaterfallChart
+    if (chunk.includes("<WaterfallChart")) {
+      nodes.push(
+        blockNode("waterfallChart", {
+          title: propValue(chunk, "title"),
+        }),
+      );
+      continue;
+    }
+
+    // Reveal (animation wrapper – just pass through)
+    if (chunk.includes("<Reveal")) {
+      const inner = innerContent(chunk, "Reveal");
+      if (inner) {
+        // Parse inner content as regular nodes
+        const innerNodes = parseMarkdownToLexical(inner);
+        nodes.push(...innerNodes);
+        continue;
+      }
+    }
+
+    // Standalone IconListItem (outside IconList context)
+    if (chunk.includes("<IconListItem")) {
+      // Skip – these should be inside an IconList
+      continue;
+    }
+
+    // Skip wrapper divs (like <div className="my-8">)
+    if (/^<div\s/.test(chunk) || chunk === "</div>") {
+      continue;
+    }
+
+    // === Standard Markdown ===
+    // CarouselBlock
+    if (chunk.includes("<Carousel")) {
+      const slides: any[] = [];
+      const slideMatches = chunk.matchAll(/<Slide\s+([^>]*?)\/>/g);
+      for (const m of slideMatches) {
+        const attrs = m[1];
+        slides.push({
+          image: (attrs.match(/image=["']([^"']+)["']/) || [])[1] || "",
+          caption: (attrs.match(/caption=["']([^"']+)["']/) || [])[1] || "",
+        });
+      }
+      if (slides.length > 0) {
+        nodes.push(blockNode("carousel", { slides }));
+        continue;
+      }
+    }
+    // Headings
+    const headingMatch = chunk.match(/^(#{1,6})\s+(.*)/);
+    if (headingMatch) {
+      nodes.push({
+        type: "heading",
+        tag: `h${headingMatch[1].length}`,
+        format: "",
+        indent: 0,
+        version: 1,
+        direction: "ltr",
+        children: [
+          { mode: "normal", type: "text", text: headingMatch[2], version: 1 },
+        ],
+      });
+      continue;
+    }
+
+    // Default: plain text paragraph
+    nodes.push(textNode(chunk));
+  }
+
+  return nodes;
+}
+
+/**
+ * Reassembles multi-line JSX tags that span across double-newline boundaries.
+ * E.g. <IconList>\n\n<IconListItem.../>\n\n</IconList> becomes a single chunk.
+ */
+function reassembleMultiLineJSX(content: string): string {
+  // Tags that wrap other content across paragraph breaks
+  const wrapperTags = [
+    "IconList",
+    "StatsGrid",
+    "FAQSection",
+    "Section",
+    "Reveal",
+    "Carousel",
+  ];
+
+  for (const tag of wrapperTags) {
+    const openRegex = new RegExp(`<${tag}[^>]*>`, "g");
+    let match;
+    while ((match = openRegex.exec(content)) !== null) {
+      const openPos = match.index;
+      const closeTag = `</${tag}>`;
+      const closePos = content.indexOf(closeTag, openPos);
+      if (closePos === -1) continue;
+
+      const fullEnd = closePos + closeTag.length;
+      const fullBlock = content.substring(openPos, fullEnd);
+
+      // Replace double newlines inside this block with single newlines
+      // so it stays as one chunk during splitting
+      const collapsed = fullBlock.replace(/\n\s*\n/g, "\n");
+      content =
+        content.substring(0, openPos) + collapsed + content.substring(fullEnd);
+
+      // Adjust regex position
+      openRegex.lastIndex = openPos + collapsed.length;
+    }
+  }
+
+  return content;
+}