refactor: komplettsanierung

2026-02-17 01:56:15 +01:00
parent 4db820214b
commit 34b35e2f17
38 changed files with 1631 additions and 329 deletions
--- a/apps/web/app/blog/[slug]/page.tsx
+++ b/apps/web/app/blog/[slug]/page.tsx
@@ -1,12 +1,13 @@
 import * as React from "react";
 import { notFound } from "next/navigation";
 import { blogPosts } from "../../../src/data/blogPosts";
-import { PageHeader } from "../../../src/components/PageHeader";
+import { BlogPostHeader } from "../../../src/components/blog/BlogPostHeader";
 import { Section } from "../../../src/components/Section";
 import { Reveal } from "../../../src/components/Reveal";
 import { BlogPostClient } from "../../../src/components/BlogPostClient";
 import { PostComponents } from "../../../src/components/blog/posts";
-import { Card } from "../../../src/components/Layout";
+import { TextSelectionShare } from "../../../src/components/TextSelectionShare";
+import { BlogPostStickyBar } from "../../../src/components/blog/BlogPostStickyBar";

 export async function generateStaticParams() {
  return blogPosts.map((post) => ({
@@ -41,71 +42,50 @@ export default async function BlogPostPage({
    <div className="flex flex-col gap-8 md:gap-12 py-8 md:py-24 overflow-hidden">
      <BlogPostClient readingTime={readingTime} title={post.title} />

-      <PageHeader
-        variant="blog"
+      <BlogPostHeader
        title={post.title}
        description={post.description}
-        backgroundSymbol={slug.charAt(0).toUpperCase()}
+        date={formattedDate}
+        readingTime={readingTime}
+        slug={slug}
      />

      <main id="post-content">
+        {/* Sticky Progress Bar */}
+        <BlogPostStickyBar
+          title={post.title}
+          url={`https://mintel.me/blog/${slug}`}
+        />
+
        <Section containerVariant="wide" className="pt-0 md:pt-0">
-          <div className="max-w-5xl mx-auto px-0 sm:px-4 md:px-0">
+          <div className="max-w-3xl mx-auto px-5 md:px-0">
            <Reveal delay={0.4} width="100%">
-              <Card
-                variant="glass"
-                techBorder
-                className="relative overflow-hidden rounded-none sm:rounded-3xl"
-              >
-                {/* Decorative background grid inside the card */}
-                <div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
-
-                <div className="relative z-10 px-5 py-10 md:px-16 md:py-20">
-                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[9px] md:text-[10px] font-bold text-slate-400 mb-10 md:mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
-                    <div className="flex items-center gap-3">
-                      <span className="w-2 h-2 rounded-full bg-slate-300" />
-                      <time dateTime={post.date}>{formattedDate}</time>
-                    </div>
-                    <div className="flex items-center gap-4 sm:gap-6">
-                      <div className="flex items-center gap-2">
-                        <span className="text-slate-200 hidden sm:inline">
-                          |
-                        </span>
-                        <span>{readingTime} min Lesezeit</span>
-                      </div>
-                      <span>
-                        {slug.substring(0, 4).toUpperCase()}-
-                        {Math.floor(Math.random() * 999)}
-                      </span>
-                    </div>
-                  </div>
-
-                  {post.tags && post.tags.length > 0 && (
-                    <div className="flex flex-wrap gap-2 mb-10 md:mb-12">
-                      {post.tags.map((tag, index) => (
-                        <span
-                          key={tag}
-                          className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
-                        >
-                          #{tag}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-
-                  {PostContent ? (
-                    <PostContent />
-                  ) : (
-                    <div className="p-8 bg-slate-50 border border-slate-200 rounded-lg italic text-slate-500">
-                      Inhalt wird bald veröffentlicht...
-                    </div>
-                  )}
+              {post.tags && post.tags.length > 0 && (
+                <div className="flex flex-wrap gap-2 mb-10 md:mb-12">
+                  {post.tags.map((tag, index) => (
+                    <span
+                      key={tag}
+                      className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
+                    >
+                      #{tag}
+                    </span>
+                  ))}
                </div>
-              </Card>
+              )}
+
+              {PostContent ? (
+                <PostContent />
+              ) : (
+                <div className="p-8 bg-slate-50 border border-slate-200 rounded-lg italic text-slate-500">
+                  Inhalt wird bald veröffentlicht...
+                </div>
+              )}
            </Reveal>
          </div>
        </Section>
      </main>
+
+      <TextSelectionShare />
    </div>
  );
 }
--- a/apps/web/app/blog/page.tsx
+++ b/apps/web/app/blog/page.tsx
@@ -9,10 +9,15 @@ import { SectionHeader } from "../../src/components/SectionHeader";
 import { Reveal } from "../../src/components/Reveal";
 import { Section } from "../../src/components/Section";
 import { AbstractCircuit, GradientMesh } from "../../src/components/Effects";
+import { Share2 } from "lucide-react";
+import { ShareModal } from "../../src/components/ShareModal";
+import { useAnalytics } from "../../src/components/analytics/useAnalytics";

 export default function BlogPage() {
  const [searchQuery, setSearchQuery] = useState("");
  const [activeTags, setActiveTags] = useState<string[]>([]);
+  const [isShareModalOpen, setIsShareModalOpen] = useState(false);
+  const { trackEvent } = useAnalytics();

  // Memoize allPosts
  const allPosts = React.useMemo(
@@ -78,21 +83,41 @@ export default function BlogPage() {
    <div className="flex flex-col bg-slate-50/30 overflow-hidden relative min-h-screen">
      <AbstractCircuit />

-      <Section
-        effects={<GradientMesh variant="metallic" className="opacity-40" />}
-        className="pb-32 pt-12 md:pt-20"
-        containerVariant="wide"
-      >
-        <div className="max-w-[calc(100vw-2rem)] md:max-w-7xl mx-auto space-y-12">
-          {/* Section Header & Filters - Centered & Compact */}
-          <div className="relative z-20 space-y-12 flex flex-col items-center text-center">
-            <SectionHeader
-              title="Alle Artikel"
-              subtitle="Index"
-              align="center"
-              className="py-0 md:py-0"
-            />
-            <Reveal width="100%" className="max-w-2xl mx-auto">
+      {/* Header Section */}
+      <header className="relative pt-32 pb-8 md:pt-44 md:pb-12 z-20 overflow-hidden">
+        <GradientMesh
+          variant="metallic"
+          className="opacity-20 absolute inset-0 -z-10"
+        />
+        <div className="narrow-container">
+          <div className="space-y-4 text-center">
+            <Reveal direction="down" delay={0.1}>
+              <div className="flex items-center justify-center gap-4 text-[10px] font-bold uppercase tracking-[0.3em] text-slate-400">
+                <div className="w-6 h-px bg-slate-200" />
+                <span>Knowledge Base</span>
+                <div className="w-12 h-px bg-slate-100" />
+              </div>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <div className="flex flex-col items-center gap-6">
+                <h1 className="text-5xl md:text-7xl font-bold text-slate-900 tracking-tighter leading-none">
+                  Alle Artikel<span className="text-slate-300">.</span>
+                </h1>
+                <p className="font-serif italic text-slate-400 text-sm md:text-xl max-w-sm">
+                  Gedanken über Engineering, Design und die Architektur der
+                  Zukunft.
+                </p>
+              </div>
+            </Reveal>
+          </div>
+        </div>
+      </header>
+
+      {/* Sticky Filter Bar */}
+      <div className="sticky top-0 z-40 bg-slate-50/80 backdrop-blur-xl border-y border-slate-200/50 py-4 shadow-sm transition-all duration-300">
+        <div className="narrow-container">
+          <div className="flex flex-col md:flex-row items-center gap-4">
+            <Reveal width="100%" className="flex-1">
              <BlogCommandBar
                searchQuery={searchQuery}
                onSearchChange={setSearchQuery}
@@ -101,8 +126,38 @@ export default function BlogPage() {
                onTagToggle={handleTagToggle}
              />
            </Reveal>
+            <div className="flex-shrink-0 flex items-center gap-2">
+              <button
+                onClick={() => {
+                  setIsShareModalOpen(true);
+                  trackEvent("blog_index_share_opened", {
+                    url: window.location.href,
+                  });
+                }}
+                className="inline-flex items-center gap-2 px-6 py-3 bg-white border border-slate-200 rounded-2xl text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition-all text-sm font-bold shadow-sm"
+                aria-label="Blog teilen"
+              >
+                <Share2 className="w-4 h-4" />
+                <span className="hidden sm:inline">Index teilen</span>
+              </button>
+            </div>
          </div>
+        </div>
+      </div>

+      <ShareModal
+        isOpen={isShareModalOpen}
+        onClose={() => setIsShareModalOpen(false)}
+        url={typeof window !== "undefined" ? window.location.href : ""}
+        title="Mintel Knowledge Base - Alle Artikel"
+      />
+
+      <Section
+        className="pb-32 pt-12"
+        containerVariant="narrow"
+        variant="white"
+      >
+        <div className="space-y-12 relative z-10 p-4 md:p-0">
          {/* Posts List (Vertical & Minimal) */}
          <div id="posts-container" className="space-y-12">
            {postsToShow.length === 0 ? (
@@ -123,7 +178,12 @@ export default function BlogPage() {
            ) : (
              <div className="grid grid-cols-1 gap-6 max-w-3xl mx-auto w-full">
                {postsToShow.map((post, i) => (
-                  <Reveal key={post.slug} delay={0.05 * i} width="100%">
+                  <Reveal
+                    key={post.slug}
+                    delay={0.05 * i}
+                    width="100%"
+                    viewport={{ once: true, margin: "20% 0px" }} // Added more margin for better back-navigation detection
+                  >
                    <MediumCard post={post} />
                  </Reveal>
                ))}
--- a/apps/web/src/components/BlogPostClient.tsx
+++ b/apps/web/src/components/BlogPostClient.tsx
@@ -1,131 +1,33 @@
-'use client';
+"use client";

-import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import * as React from "react";
+import { useEffect } from "react";

 interface BlogPostClientProps {
  readingTime: number;
  title: string;
 }

-export const BlogPostClient: React.FC<BlogPostClientProps> = ({ readingTime, title }) => {
-  const router = useRouter();
-  const [isScrolled, setIsScrolled] = useState(false);
-
+export const BlogPostClient: React.FC<BlogPostClientProps> = () => {
  useEffect(() => {
    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 100);
-      
      // Update progress bar
-      const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
-      const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
-      const scrolled = (winScroll / height);
-      const progressBar = document.querySelector('.reading-progress-bar') as HTMLElement;
+      const winScroll =
+        document.body.scrollTop || document.documentElement.scrollTop;
+      const height =
+        document.documentElement.scrollHeight -
+        document.documentElement.clientHeight;
+      const scrolled = winScroll / height;
+      const progressBar = document.querySelector(
+        ".reading-progress-bar",
+      ) as HTMLElement;
      if (progressBar) {
        progressBar.style.transform = `scaleX(${scrolled})`;
      }
    };
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

-  const handleBack = () => {
-    // Lovely exit animation
-    const content = document.getElementById('post-content');
-    if (content) {
-      content.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';
-      content.style.opacity = '0';
-      content.style.transform = 'translateY(20px) scale(0.98)';
-    }
-    
-    const topNav = document.getElementById('top-nav');
-    if (topNav) {
-      topNav.style.transition = 'opacity 0.4s ease-out';
-      topNav.style.opacity = '0';
-    }
-    
-    const overlay = document.createElement('div');
-    overlay.className = 'fixed inset-0 bg-gradient-to-br from-white via-slate-50 to-white z-[100] opacity-0 transition-opacity duration-500';
-    document.body.appendChild(overlay);
-    
-    setTimeout(() => {
-      overlay.style.opacity = '1';
-    }, 100);
-    
-    setTimeout(() => {
-      router.push('/blog?from=post');
-    }, 500);
-  };
-
-  const handleShare = async () => {
-    const url = window.location.href;
-    if (navigator.share) {
-      try {
-        await navigator.share({ title, url });
-      } catch (err) {
-        console.error('Share failed:', err);
-      }
-    } else {
-      // Fallback: copy to clipboard
-      try {
-        await navigator.clipboard.writeText(url);
-        alert('Link copied to clipboard!');
-      } catch (err) {
-        console.error('Copy failed:', err);
-      }
-    }
-  };
-
-  return (
-    <>
-      <div className="reading-progress-bar" />
-      <nav
-        id="top-nav"
-        className={`fixed top-0 left-0 right-0 z-40 border-b border-slate-200 transition-all duration-300 ${
-          isScrolled ? 'bg-white/95 backdrop-blur-md' : 'bg-white/80 backdrop-blur-sm'
-        }`}
-      >
-        <div className="max-w-4xl mx-auto px-6 py-4 flex items-center justify-between">
-          <button
-            onClick={handleBack}
-            className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100 group"
-            aria-label="Back to home"
-          >
-            <svg className="w-5 h-5 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-            </svg>
-            <span className="font-bold uppercase tracking-widest text-xs">Zurück</span>
-          </button>
-          
-          <div className="flex items-center gap-3">
-            <span className="text-[10px] font-bold uppercase tracking-widest text-slate-400 hidden sm:inline">
-              {readingTime} min read
-            </span>
-            <button
-              onClick={handleShare}
-              className="share-button-top flex items-center gap-1.5 px-3 py-1.5 border border-slate-200 rounded-full text-slate-600 hover:text-slate-900 hover:border-slate-400 hover:bg-slate-50 transition-all duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-100"
-              aria-label="Share this post"
-            >
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/>
-              </svg>
-            </button>
-          </div>
-        </div>
-      </nav>
-
-      <div className="mt-16 pt-8 border-t border-slate-50 text-center">
-        <button
-          onClick={handleBack}
-          className="btn btn-primary group"
-        >
-          <svg className="w-4 h-4 group-hover:-translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
-          </svg>
-          Alle Beiträge
-        </button>
-      </div>
-    </>
-  );
+  return <div className="reading-progress-bar" />;
 };
--- a/apps/web/src/components/DiagramGantt.tsx
+++ b/apps/web/src/components/DiagramGantt.tsx
@@ -0,0 +1,50 @@
+"use client";
+
+import React from "react";
+import { Mermaid } from "./Mermaid";
+
+interface GanttTask {
+  id: string;
+  name: string;
+  start: string;
+  duration: string;
+  dependencies?: string[];
+}
+
+interface DiagramGanttProps {
+  tasks: GanttTask[];
+  title?: string;
+  caption?: string;
+  id?: string;
+  showShare?: boolean;
+}
+
+export const DiagramGantt: React.FC<DiagramGanttProps> = ({
+  tasks,
+  title,
+  caption,
+  id,
+  showShare = true,
+}) => {
+  const ganttGraph = `gantt
+    dateFormat YYYY-MM-DD
+${tasks
+  .map((task) => {
+    const deps = task.dependencies?.length
+      ? `, after ${task.dependencies.join(" ")}`
+      : "";
+    return `    ${task.name} :${task.id}, ${task.start}, ${task.duration}${deps}`;
+  })
+  .join("\n")}`;
+
+  return (
+    <div className="my-12">
+      <Mermaid graph={ganttGraph} id={id} title={title} showShare={showShare} />
+      {caption && (
+        <p className="text-center text-xs text-slate-400 mt-4 italic">
+          {caption}
+        </p>
+      )}
+    </div>
+  );
+};
--- a/apps/web/src/components/DiagramPie.tsx
+++ b/apps/web/src/components/DiagramPie.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import React from "react";
+import { Mermaid } from "./Mermaid";
+
+interface PieSlice {
+  label: string;
+  value: number;
+}
+
+interface DiagramPieProps {
+  data: PieSlice[];
+  title?: string;
+  caption?: string;
+  id?: string;
+  showShare?: boolean;
+}
+
+export const DiagramPie: React.FC<DiagramPieProps> = ({
+  data,
+  title,
+  caption,
+  id,
+  showShare = true,
+}) => {
+  const pieGraph = `pie
+${data.map((slice) => `    "${slice.label}" : ${slice.value}`).join("\n")}`;
+
+  return (
+    <div className="my-12">
+      <Mermaid graph={pieGraph} id={id} title={title} showShare={showShare} />
+      {caption && (
+        <p className="text-center text-xs text-slate-400 mt-4 italic">
+          {caption}
+        </p>
+      )}
+    </div>
+  );
+};
--- a/apps/web/src/components/DiagramSequence.tsx
+++ b/apps/web/src/components/DiagramSequence.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import React from "react";
+import { Mermaid } from "./Mermaid";
+
+interface SequenceMessage {
+  from: string;
+  to: string;
+  message: string;
+  type?: "solid" | "dotted" | "async";
+}
+
+interface DiagramSequenceProps {
+  participants: string[];
+  messages: SequenceMessage[];
+  title?: string;
+  caption?: string;
+  id?: string;
+  showShare?: boolean;
+}
+
+export const DiagramSequence: React.FC<DiagramSequenceProps> = ({
+  participants,
+  messages,
+  title,
+  caption,
+  id,
+  showShare = true,
+}) => {
+  const getArrow = (type?: string) => {
+    switch (type) {
+      case "dotted":
+        return "-->";
+      case "async":
+        return "->>";
+      default:
+        return "->";
+    }
+  };
+
+  const sequenceGraph = `sequenceDiagram
+${participants.map((p) => `    participant ${p}`).join("\n")}
+${messages.map((m) => `    ${m.from}${getArrow(m.type)}${m.to}: ${m.message}`).join("\n")}`;
+
+  return (
+    <div className="my-12">
+      <Mermaid
+        graph={sequenceGraph}
+        id={id}
+        title={title}
+        showShare={showShare}
+      />
+      {caption && (
+        <p className="text-center text-xs text-slate-400 mt-4 italic">
+          {caption}
+        </p>
+      )}
+    </div>
+  );
+};
--- a/apps/web/src/components/DiagramShareButton.tsx
+++ b/apps/web/src/components/DiagramShareButton.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import React, { useState } from "react";
+import { Share2 } from "lucide-react";
+import { ShareModal } from "./ShareModal";
+import { useAnalytics } from "./analytics/useAnalytics";
+
+interface DiagramShareButtonProps {
+  diagramId: string;
+  title?: string;
+  svgContent?: string;
+}
+
+export const DiagramShareButton: React.FC<DiagramShareButtonProps> = ({
+  diagramId,
+  title = "Diagram",
+  svgContent,
+}) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { trackEvent } = useAnalytics();
+
+  const currentUrl =
+    typeof window !== "undefined"
+      ? `${window.location.origin}${window.location.pathname}#${diagramId}`
+      : "";
+
+  // Convert SVG to PNG for sharing
+  const generateDiagramImage = async (): Promise<string | undefined> => {
+    if (!svgContent) return undefined;
+
+    try {
+      // Create a canvas to render the SVG
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return undefined;
+
+      // Create an image from the SVG
+      const img = new Image();
+      const svgBlob = new Blob([svgContent], {
+        type: "image/svg+xml;charset=utf-8",
+      });
+      const url = URL.createObjectURL(svgBlob);
+
+      return new Promise((resolve) => {
+        img.onload = () => {
+          // Set canvas size to match image
+          canvas.width = img.width * 2; // 2x for better quality
+          canvas.height = img.height * 2;
+
+          // Fill with white background
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+          // Draw the image
+          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+          // Convert to data URL
+          const dataUrl = canvas.toDataURL("image/png");
+          URL.revokeObjectURL(url);
+          resolve(dataUrl);
+        };
+
+        img.onerror = () => {
+          URL.revokeObjectURL(url);
+          resolve(undefined);
+        };
+
+        img.src = url;
+      });
+    } catch (err) {
+      console.error("Failed to generate diagram image:", err);
+      return undefined;
+    }
+  };
+
+  const handleOpenModal = async () => {
+    setIsModalOpen(true);
+    trackEvent("diagram_share_opened", {
+      diagram_id: diagramId,
+      diagram_title: title,
+    });
+  };
+
+  return (
+    <>
+      <button
+        onClick={handleOpenModal}
+        className="inline-flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition-all text-xs font-medium"
+        aria-label="Diagramm teilen"
+      >
+        <Share2 className="w-3.5 h-3.5" />
+        <span>Teilen</span>
+      </button>
+
+      <ShareModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        url={currentUrl}
+        title={title}
+        diagramImage={svgContent}
+      />
+    </>
+  );
+};
--- a/apps/web/src/components/DiagramState.tsx
+++ b/apps/web/src/components/DiagramState.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import React from "react";
+import { Mermaid } from "./Mermaid";
+
+interface StateTransition {
+  from: string;
+  to: string;
+  label?: string;
+}
+
+interface DiagramStateProps {
+  states: string[];
+  transitions: StateTransition[];
+  initialState?: string;
+  finalStates?: string[];
+  title?: string;
+  caption?: string;
+  id?: string;
+  showShare?: boolean;
+}
+
+export const DiagramState: React.FC<DiagramStateProps> = ({
+  states,
+  transitions,
+  initialState,
+  finalStates = [],
+  title,
+  caption,
+  id,
+  showShare = true,
+}) => {
+  const stateGraph = `stateDiagram-v2
+${initialState ? `    [*] --> ${initialState}` : ""}
+${transitions
+  .map((t) => {
+    const label = t.label ? ` : ${t.label}` : "";
+    return `    ${t.from} --> ${t.to}${label}`;
+  })
+  .join("\n")}
+${finalStates.map((s) => `    ${s} --> [*]`).join("\n")}`;
+
+  return (
+    <div className="my-12">
+      <Mermaid graph={stateGraph} id={id} title={title} showShare={showShare} />
+      {caption && (
+        <p className="text-center text-xs text-slate-400 mt-4 italic">
+          {caption}
+        </p>
+      )}
+    </div>
+  );
+};
--- a/apps/web/src/components/DiagramTimeline.tsx
+++ b/apps/web/src/components/DiagramTimeline.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import React from "react";
+import { Mermaid } from "./Mermaid";
+
+interface TimelineEvent {
+  year: string;
+  title: string;
+}
+
+interface DiagramTimelineProps {
+  events: TimelineEvent[];
+  title?: string;
+  caption?: string;
+  id?: string;
+  showShare?: boolean;
+}
+
+export const DiagramTimeline: React.FC<DiagramTimelineProps> = ({
+  events,
+  title,
+  caption,
+  id,
+  showShare = true,
+}) => {
+  const timelineGraph = `timeline
+    title ${title || "Timeline"}
+${events.map((event) => `    ${event.year} : ${event.title}`).join("\n")}`;
+
+  return (
+    <div className="my-12">
+      <Mermaid
+        graph={timelineGraph}
+        id={id}
+        title={title}
+        showShare={showShare}
+      />
+      {caption && (
+        <p className="text-center text-xs text-slate-400 mt-4 italic">
+          {caption}
+        </p>
+      )}
+    </div>
+  );
+};
--- a/apps/web/src/components/Embeds/index.ts
+++ b/apps/web/src/components/Embeds/index.ts
@@ -1,15 +1,23 @@
 // Embed Components Index

 // Re-export for convenience
-export { YouTubeEmbed } from '../YouTubeEmbed';
-export { TwitterEmbed } from '../TwitterEmbed';
-export { GenericEmbed } from '../GenericEmbed';
-export { Mermaid } from '../Mermaid';
+export { YouTubeEmbed } from "../YouTubeEmbed";
+export { TwitterEmbed } from "../TwitterEmbed";
+export { GenericEmbed } from "../GenericEmbed";
+export { Mermaid } from "../Mermaid";
+export { DiagramTimeline } from "../DiagramTimeline";
+export { DiagramSequence } from "../DiagramSequence";
+export { DiagramPie } from "../DiagramPie";
+export { DiagramGantt } from "../DiagramGantt";
+export { DiagramState } from "../DiagramState";
+export { DiagramShareButton } from "../DiagramShareButton";

 // Type definitions for props
 export interface MermaidProps {
  graph: string;
  id?: string;
+  title?: string;
+  showShare?: boolean;
 }

 export interface YouTubeEmbedProps {
@@ -17,19 +25,19 @@ export interface YouTubeEmbedProps {
  title?: string;
  className?: string;
  aspectRatio?: string;
-  style?: 'default' | 'minimal' | 'rounded' | 'flat';
+  style?: "default" | "minimal" | "rounded" | "flat";
 }

 export interface TwitterEmbedProps {
  tweetId: string;
-  theme?: 'light' | 'dark';
+  theme?: "light" | "dark";
  className?: string;
-  align?: 'left' | 'center' | 'right';
+  align?: "left" | "center" | "right";
 }

 export interface GenericEmbedProps {
  url: string;
  className?: string;
  maxWidth?: string;
-  type?: 'video' | 'article' | 'rich';
+  type?: "video" | "article" | "rich";
 }
--- a/apps/web/src/components/Mermaid.tsx
+++ b/apps/web/src/components/Mermaid.tsx
@@ -2,15 +2,24 @@

 import React, { useEffect, useRef, useState } from "react";
 import mermaid from "mermaid";
+import { DiagramShareButton } from "./DiagramShareButton";

 interface MermaidProps {
  graph: string;
  id?: string;
+  title?: string;
+  showShare?: boolean;
 }

-export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
+export const Mermaid: React.FC<MermaidProps> = ({
+  graph,
+  id: providedId,
+  title,
+  showShare = false,
+}) => {
  const [id, setId] = useState<string | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);
+  const [svgContent, setSvgContent] = useState<string>("");

  useEffect(() => {
    setId(
@@ -23,15 +32,52 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
  useEffect(() => {
    mermaid.initialize({
      startOnLoad: false,
-      theme: "default",
+      theme: "base",
      darkMode: false,
      themeVariables: {
-        fontFamily: "Inter, system-ui, sans-serif",
-        fontSize: "16px",
+        // Base colors - industrial slate/white palette
        primaryColor: "#ffffff",
-        nodeBorder: "#e2e8f0",
+        primaryTextColor: "#1e293b",
+        primaryBorderColor: "#cbd5e1",
+        lineColor: "#94a3b8",
+        secondaryColor: "#f8fafc",
+        tertiaryColor: "#f1f5f9",
+
+        // Background colors
+        background: "#ffffff",
        mainBkg: "#ffffff",
-        lineColor: "#cbd5e1",
+        secondBkg: "#f8fafc",
+        tertiaryBkg: "#f1f5f9",
+
+        // Text colors
+        textColor: "#1e293b",
+        labelTextColor: "#475569",
+
+        // Node styling
+        nodeBorder: "#cbd5e1",
+        clusterBkg: "#f8fafc",
+        clusterBorder: "#cbd5e1",
+
+        // Edge/line styling
+        edgeLabelBackground: "#ffffff",
+
+        // Font
+        fontFamily: "Inter, system-ui, sans-serif",
+        fontSize: "14px",
+
+        // Pie Chart Colors - High Contrast Industrial Palette
+        pie1: "#0f172a", // Deep Navy
+        pie2: "#334155", // Slate Blue
+        pie3: "#64748b", // Steel Gray
+        pie4: "#94a3b8", // Muted Steel
+        pie5: "#cbd5e1", // Concrete
+        pie6: "#1e293b", // Slate 800
+        pie7: "#475569", // Slate 600
+        pie8: "#000000", // Pure Black for accents
+        pie9: "#e2e8f0", // Light Concrete
+        pie10: "#020617", // Slate 950
+        pie11: "#525252", // Neutral 600
+        pie12: "#262626", // Neutral 800
      },
      securityLevel: "loose",
    });
@@ -41,6 +87,7 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
        try {
          const { svg } = await mermaid.render(`${id}-svg`, graph);
          containerRef.current.innerHTML = svg;
+          setSvgContent(svg);
          setIsRendered(true);
        } catch (err) {
          console.error("Mermaid rendering failed:", err);
@@ -58,21 +105,41 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
  if (!id) return null;

  return (
-    <div className="mermaid-wrapper my-12 not-prose w-full overflow-hidden">
-      <div className="flex justify-center w-full">
-        <div
-          ref={containerRef}
-          className={`mermaid transition-opacity duration-500 w-full flex justify-center ${isRendered ? "opacity-100" : "opacity-0"}`}
-          id={id}
-        >
-          {error ? (
-            <div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
-              {error}
-            </div>
-          ) : (
-            graph
-          )}
+    <div className="mermaid-wrapper not-prose relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] w-screen px-5 md:px-16 py-12 bg-slate-50/50 border-y border-slate-100">
+      <div className="max-w-7xl mx-auto">
+        {title && (
+          <h4 className="text-center text-sm font-bold text-slate-700 mb-8 uppercase tracking-[0.2em]">
+            {title}
+          </h4>
+        )}
+        <div className="flex justify-center w-full">
+          <div
+            ref={containerRef}
+            className={`mermaid transition-opacity duration-500 w-full flex justify-center ${isRendered ? "opacity-100" : "opacity-0"}`}
+            id={id}
+            style={{
+              maxWidth: "100%",
+              overflow: "visible",
+            }}
+          >
+            {error ? (
+              <div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
+                {error}
+              </div>
+            ) : (
+              graph
+            )}
+          </div>
        </div>
+        {showShare && id && (
+          <div className="flex justify-center mt-8">
+            <DiagramShareButton
+              diagramId={id}
+              title={title}
+              svgContent={svgContent}
+            />
+          </div>
+        )}
      </div>
    </div>
  );
--- a/apps/web/src/components/Modal.tsx
+++ b/apps/web/src/components/Modal.tsx
@@ -1,27 +1,45 @@
-'use client';
+"use client";

-import * as React from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-import { X } from 'lucide-react';
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { motion, AnimatePresence } from "framer-motion";
+import { X } from "lucide-react";
+import { cn } from "../utils/cn";

 interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  title: string;
  children: React.ReactNode;
+  maxWidth?: string;
 }

-export function Modal({ isOpen, onClose, title, children }: ModalProps) {
+export function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  maxWidth = "max-w-lg",
+}: ModalProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+
  // Close on escape key
  React.useEffect(() => {
    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
+      if (e.key === "Escape") onClose();
    };
-    window.addEventListener('keydown', handleEsc);
-    return () => window.removeEventListener('keydown', handleEsc);
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
  }, [onClose]);

-  return (
+  if (!mounted) return null;
+
+  return createPortal(
    <AnimatePresence>
      {isOpen && (
        <>
@@ -30,31 +48,35 @@ export function Modal({ isOpen, onClose, title, children }: ModalProps) {
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            onClick={onClose}
-            className="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[100]"
+            className="fixed inset-0 bg-slate-900/60 backdrop-blur-md z-[9999]"
          />
-          <div className="fixed inset-0 flex items-center justify-center p-4 z-[101] pointer-events-none">
+          <div className="fixed inset-0 flex items-center justify-center p-2 z-[10000] pointer-events-none">
            <motion.div
-              initial={{ opacity: 0, scale: 0.9, y: 20 }}
+              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.9, y: 20 }}
-              className="bg-white w-full max-w-lg rounded-[2.5rem] shadow-2xl pointer-events-auto overflow-hidden"
+              exit={{ opacity: 0, scale: 0.95, y: 20 }}
+              className={cn(
+                "bg-white w-full rounded-[2rem] shadow-2xl pointer-events-auto overflow-hidden border border-slate-100",
+                maxWidth,
+              )}
            >
-              <div className="p-8 border-b border-slate-50 flex items-center justify-between">
-                <h3 className="text-2xl font-bold text-slate-900">{title}</h3>
+              <div className="px-6 md:px-8 border-b border-slate-50 flex items-center justify-between bg-slate-50/50">
+                <h3 className="text-lg md:text-xl font-bold text-slate-900 tracking-tight">
+                  {title}
+                </h3>
                <button
                  onClick={onClose}
-                  className="p-2 hover:bg-slate-50 rounded-full transition-colors text-slate-400 hover:text-slate-900"
+                  className="p-1.5 hover:bg-slate-100 rounded-full transition-colors text-slate-400 hover:text-slate-900"
                >
-                  <X size={24} />
+                  <X size={18} />
                </button>
              </div>
-              <div className="p-8">
-                {children}
-              </div>
+              <div className="p-6 md:p-8">{children}</div>
            </motion.div>
          </div>
        </>
      )}
-    </AnimatePresence>
+    </AnimatePresence>,
+    document.body,
  );
 }
--- a/apps/web/src/components/PageHeader.tsx
+++ b/apps/web/src/components/PageHeader.tsx
@@ -1,7 +1,12 @@
+"use client";
+
 import * as React from "react";
 import { Reveal } from "./Reveal";
 import { H1, LeadText } from "./Typography";
 import { cn } from "../utils/cn";
+import { Share2, Clock, Calendar } from "lucide-react";
+import { ShareModal } from "./ShareModal";
+import { useAnalytics } from "./analytics/useAnalytics";

 interface PageHeaderProps {
  title: React.ReactNode;
@@ -9,6 +14,10 @@ interface PageHeaderProps {
  backgroundSymbol?: string;
  className?: string;
  variant?: "default" | "blog";
+  showShare?: boolean;
+  date?: string;
+  readingTime?: number;
+  slug?: string;
 }

 export const PageHeader: React.FC<PageHeaderProps> = ({
@@ -17,15 +26,31 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
  backgroundSymbol,
  className = "",
  variant = "default",
+  showShare = false,
+  date,
+  readingTime,
+  slug,
 }) => {
+  const [isShareModalOpen, setIsShareModalOpen] = React.useState(false);
+  const { trackEvent } = useAnalytics();
  const isBlog = variant === "blog";

+  const handleOpenShare = () => {
+    setIsShareModalOpen(true);
+    trackEvent("header_share_opened", {
+      title: typeof title === "string" ? title : "Blog Post",
+      slug: slug,
+    });
+  };
+
+  const currentUrl = typeof window !== "undefined" ? window.location.href : "";
+
  return (
    <section
      className={cn(
        "narrow-container relative overflow-hidden md:overflow-visible",
        isBlog
-          ? "pt-32 pb-12 md:pt-48 md:pb-16"
+          ? "pt-32 pb-8 md:pt-48 md:pb-12"
          : "pt-24 pb-16 md:pt-40 md:pb-24",
        className,
      )}
@@ -51,44 +76,89 @@ export const PageHeader: React.FC<PageHeaderProps> = ({
      )}

      <div
-        className={cn("space-y-4 md:space-y-8 relative", isBlog && "max-w-7xl")}
-      >
-        <Reveal>
-          <h1
-            className={cn(
-              "font-bold text-slate-900 tracking-tighter leading-[1.1]",
-              isBlog ? "text-xl md:text-6xl" : "text-2xl md:text-7xl",
-            )}
-          >
-            {title}
-          </h1>
-        </Reveal>
-
-        {description && (
-          <Reveal delay={0.2}>
-            <p
-              className={cn(
-                "font-serif italic text-slate-400 leading-relaxed",
-                isBlog
-                  ? "text-sm md:text-xl max-w-xl"
-                  : "text-base md:text-2xl max-w-2xl",
-              )}
-            >
-              {description}
-            </p>
-          </Reveal>
+        className={cn(
+          "space-y-4 md:space-y-12 relative",
+          isBlog && "max-w-7xl",
        )}
+      >
+        <div className="space-y-4 md:space-y-8">
+          <Reveal>
+            <div className="flex items-start justify-between gap-6">
+              <h1
+                className={cn(
+                  "font-bold text-slate-900 tracking-tighter leading-[1.1] flex-1",
+                  isBlog ? "text-xl md:text-6xl" : "text-2xl md:text-7xl",
+                )}
+              >
+                {title}
+              </h1>
+              {showShare && isBlog && (
+                <button
+                  onClick={handleOpenShare}
+                  className="flex-shrink-0 inline-flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 hover:border-slate-300 transition-all text-xs font-medium mt-1"
+                  aria-label="Artikel teilen"
+                >
+                  <Share2 className="w-3.5 h-3.5" />
+                  <span className="hidden md:inline">Teilen</span>
+                </button>
+              )}
+            </div>
+          </Reveal>
+
+          {description && (
+            <Reveal delay={0.2}>
+              <p
+                className={cn(
+                  "font-serif italic text-slate-400 leading-relaxed",
+                  isBlog
+                    ? "text-sm md:text-xl max-w-xl"
+                    : "text-base md:text-2xl max-w-2xl",
+                )}
+              >
+                {description}
+              </p>
+            </Reveal>
+          )}
+        </div>

        {isBlog && (
-          <div className="pt-4 flex items-center gap-4">
-            <div className="h-px flex-1 bg-slate-100" />
-            <span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
-              Technical ID:{" "}
-              {Math.random().toString(36).substring(7).toUpperCase()}
-            </span>
-          </div>
+          <Reveal delay={0.3}>
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6 py-6 border-y border-slate-100">
+              <div className="flex items-center gap-8 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">
+                {date && (
+                  <div className="flex items-center gap-2">
+                    <Calendar className="w-3 h-3 text-slate-300" />
+                    <time dateTime={date}>{date}</time>
+                  </div>
+                )}
+                {readingTime && (
+                  <div className="flex items-center gap-2">
+                    <Clock className="w-3 h-3 text-slate-300" />
+                    <span>{readingTime} min Lesezeit</span>
+                  </div>
+                )}
+              </div>
+              <div className="flex items-center gap-4">
+                <span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
+                  Technical ID: {slug?.substring(0, 4).toUpperCase() || "BLOG"}-
+                  {Math.random().toString(36).substring(7).toUpperCase()}
+                </span>
+                <span
+                  className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"
+                  title="System Live"
+                />
+              </div>
+            </div>
+          </Reveal>
        )}
      </div>
+
+      <ShareModal
+        isOpen={isShareModalOpen}
+        onClose={() => setIsShareModalOpen(false)}
+        url={currentUrl}
+        title={typeof title === "string" ? title : "Mintel Blog"}
+      />
    </section>
  );
 };
--- a/apps/web/src/components/Reveal.tsx
+++ b/apps/web/src/components/Reveal.tsx
@@ -11,9 +11,14 @@ interface RevealProps {
  direction?: "up" | "down" | "left" | "right" | "none";
  scale?: number;
  blur?: boolean;
+  viewport?: {
+    once?: boolean;
+    margin?: string;
+    amount?: "some" | "all" | number;
+  };
 }

-export const Reveal: React.FC<RevealProps> = ({
+const Reveal: React.FC<RevealProps> = ({
  children,
  width = "100%",
  delay = 0.25,
@@ -21,7 +26,22 @@ export const Reveal: React.FC<RevealProps> = ({
  direction = "up",
  scale = 0.98,
  blur = true,
+  viewport = { once: true, margin: "-10%" },
 }) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, {
+    once: viewport.once ?? true,
+    margin: (viewport.margin as any) ?? "-10%",
+    amount: (viewport.amount as any) ?? 0.1,
+  });
+  const mainControls = useAnimation();
+
+  useEffect(() => {
+    if (isInView) {
+      mainControls.start("visible");
+    }
+  }, [isInView, mainControls]);
+
  const variants: Variants = {
    hidden: {
      opacity: 0,
@@ -41,6 +61,7 @@ export const Reveal: React.FC<RevealProps> = ({

  return (
    <div
+      ref={ref}
      style={{
        position: "relative",
        width,
@@ -50,11 +71,11 @@ export const Reveal: React.FC<RevealProps> = ({
      <motion.div
        variants={variants}
        initial="hidden"
-        whileInView="visible"
-        viewport={{ once: true, margin: "-10%" }}
+        animate={mainControls}
        style={{
          width: width === "100%" ? "100%" : "inherit",
          backfaceVisibility: "hidden",
+          WebkitBackfaceVisibility: "hidden",
        }}
        transition={{
          duration: 0.5,
@@ -72,3 +93,5 @@ export const Reveal: React.FC<RevealProps> = ({
    </div>
  );
 };
+
+export { Reveal };
--- a/apps/web/src/components/ShareModal.tsx
+++ b/apps/web/src/components/ShareModal.tsx
@@ -1,19 +1,68 @@
-'use client';
+"use client";

-import * as React from 'react';
-import { Modal } from './Modal';
-import { Copy, Check, Share2 } from 'lucide-react';
-import { useState } from 'react';
+import * as React from "react";
+import { Modal } from "./Modal";
+import { Copy, Check, Share2, Download } from "lucide-react";
+import { useState, useEffect } from "react";

 interface ShareModalProps {
  isOpen: boolean;
  onClose: () => void;
  url: string;
  qrCodeData?: string;
+  title?: string;
+  diagramImage?: string;
 }

-export function ShareModal({ isOpen, onClose, url, qrCodeData }: ShareModalProps) {
+export function ShareModal({
+  isOpen,
+  onClose,
+  url,
+  qrCodeData,
+  title,
+  diagramImage,
+}: ShareModalProps) {
  const [copied, setCopied] = useState(false);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [timestamp] = useState(
+    new Date().toLocaleTimeString("de-DE", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    }),
+  );
+
+  useEffect(() => {
+    if (diagramImage && isOpen) {
+      // Convert SVG to PNG for preview with higher resolution (3x)
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      const img = new Image();
+      const svgBlob = new Blob([diagramImage], {
+        type: "image/svg+xml;charset=utf-8",
+      });
+      const svgUrl = URL.createObjectURL(svgBlob);
+
+      img.onload = () => {
+        const scale = 3; // 3x scaling for sharpness
+        canvas.width = img.width * scale;
+        canvas.height = img.height * scale;
+
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        // Draw image with scaling
+        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+        setImagePreview(canvas.toDataURL("image/png"));
+        URL.revokeObjectURL(svgUrl);
+      };
+
+      img.src = svgUrl;
+    }
+  }, [diagramImage, isOpen]);

  const handleCopy = () => {
    navigator.clipboard.writeText(url);
@@ -24,56 +73,236 @@ export function ShareModal({ isOpen, onClose, url, qrCodeData }: ShareModalProps
  const handleNativeShare = async () => {
    if (navigator.share) {
      try {
-        await navigator.share({
-          title: 'Meine Projekt-Konfiguration',
-          url: url
-        });
+        const shareData: ShareData = {
+          title: title || "Mintel Diagramm",
+          url: url,
+        };
+
+        // If we have a diagram image, try to include it as a file
+        if (imagePreview) {
+          try {
+            // Convert base64 preview back to a File object
+            const response = await fetch(imagePreview);
+            const blob = await response.blob();
+            const file = new File(
+              [blob],
+              `${title?.replace(/\s+/g, "-").toLowerCase() || "diagram"}.png`,
+              { type: "image/png" },
+            );
+
+            // Check if sharing files is supported
+            if (navigator.canShare && navigator.canShare({ files: [file] })) {
+              shareData.files = [file];
+            }
+          } catch (fileError) {
+            console.error("Could not prepare file for sharing", fileError);
+          }
+        }
+
+        await navigator.share(shareData);
      } catch (e) {
        console.error("Share failed", e);
      }
    }
  };

-  return (
-    <Modal isOpen={isOpen} onClose={onClose} title="Konfiguration teilen">
-      <div className="space-y-8">
-        <p className="text-slate-500 leading-relaxed">
-          Speichern Sie diesen Link, um Ihre Konfiguration später fortzusetzen oder teilen Sie ihn mit anderen.
-        </p>
+  const handleDownloadImage = () => {
+    if (!imagePreview) return;

-        {qrCodeData && (
-          <div className="flex flex-col items-center gap-4 p-8 bg-slate-50 rounded-[2rem]">
-            <img src={qrCodeData} alt="QR Code" className="w-48 h-48 rounded-xl shadow-sm" />
-            <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">QR-Code scannen</p>
+    const link = document.createElement("a");
+    link.download = `${title?.replace(/\s+/g, "-").toLowerCase() || "diagram"}.png`;
+    link.href = imagePreview;
+    link.click();
+  };
+
+  const handleShareX = () => {
+    const text = encodeURIComponent(title || "Mintel Diagramm");
+    const shareUrl = `https://twitter.com/intent/tweet?text=${text}&url=${encodeURIComponent(url)}`;
+    window.open(shareUrl, "_blank", "width=550,height=420");
+  };
+
+  const handleShareLinkedIn = () => {
+    const shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
+    window.open(shareUrl, "_blank", "width=550,height=420");
+  };
+
+  const modalTitle = diagramImage
+    ? "Diagramm teilen"
+    : title
+      ? "Artikel teilen"
+      : "Konfiguration teilen";
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={modalTitle}
+      maxWidth={diagramImage ? "max-w-3xl" : "max-w-lg"}
+    >
+      <div className="space-y-8">
+        {imagePreview ? (
+          <div className="space-y-6">
+            {/* Social Post Preview Section */}
+            <div className="space-y-3">
+              <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">
+                Social Preview
+              </label>
+              <div className="bg-slate-50 rounded-2xl border border-slate-100 overflow-hidden shadow-inner">
+                <div className="p-4 flex items-center gap-3 border-b border-white/50">
+                  <div className="w-8 h-8 rounded-full bg-slate-200 animate-pulse" />
+                  <div className="space-y-1">
+                    <div className="h-2 w-24 bg-slate-200 rounded animate-pulse" />
+                    <div className="h-1.5 w-16 bg-slate-100 rounded animate-pulse" />
+                  </div>
+                </div>
+                <div className="p-4 space-y-4">
+                  <div className="space-y-2">
+                    <div className="h-2.5 w-full bg-slate-200 rounded animate-pulse" />
+                    <div className="h-2.5 w-3/4 bg-slate-200 rounded animate-pulse" />
+                  </div>
+                  {/* Industrial Blueprint Preview */}
+                  <div className="relative group overflow-hidden bg-white border border-slate-200 rounded-xl shadow-sm transition-all duration-500 hover:shadow-md hover:border-slate-300">
+                    <div
+                      className="absolute inset-0 opacity-[0.03] pointer-events-none"
+                      style={{
+                        backgroundImage:
+                          "radial-gradient(#1e293b 1px, transparent 0)",
+                        backgroundSize: "15px 15px",
+                      }}
+                    />
+
+                    <div className="relative p-6 flex flex-col items-center">
+                      <img
+                        src={imagePreview}
+                        alt={title || "Diagram"}
+                        className="max-w-full max-h-[30vh] object-contain transition-transform duration-700"
+                      />
+                    </div>
+
+                    <div className="bg-slate-50/80 border-t border-slate-100 px-3 py-1.5 flex items-center justify-between text-[6px] font-mono text-slate-400 uppercase tracking-widest">
+                      <div className="flex items-center gap-2">
+                        <span>
+                          SYS:{" "}
+                          {Math.random()
+                            .toString(36)
+                            .substring(7)
+                            .toUpperCase()}
+                        </span>
+                        <span className="w-0.5 h-0.5 bg-slate-300 rounded-full" />
+                        <span>MINTEL.ME</span>
+                      </div>
+                      <span>{timestamp}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <p className="text-center text-[10px] font-bold uppercase tracking-[0.3em] text-slate-300 flex items-center justify-center gap-4">
+              <span className="w-8 h-px bg-slate-100" />
+              Diagramm Vorschau
+              <span className="w-8 h-px bg-slate-100" />
+            </p>
+          </div>
+        ) : (
+          title && (
+            <div className="space-y-3">
+              <label className="text-[10px] font-bold uppercase tracking-widest text-slate-400 ml-1">
+                Artikel Titel
+              </label>
+              <p className="text-slate-600 leading-relaxed font-medium bg-slate-50/50 p-5 rounded-2xl border border-slate-100 italic transition-all hover:bg-white hover:shadow-sm">
+                "{title}"
+              </p>
+            </div>
+          )
+        )}
+
+        {!diagramImage && qrCodeData && (
+          <div className="flex flex-col items-center gap-4 p-8 bg-slate-50 rounded-[2rem] border border-slate-100 shadow-inner">
+            <img
+              src={qrCodeData}
+              alt="QR Code"
+              className="w-48 h-48 rounded-xl shadow-sm"
+            />
+            <p className="text-[10px] font-bold uppercase tracking-widest text-slate-400">
+              QR-Code scannen
+            </p>
          </div>
        )}

        <div className="space-y-4">
-          <div className="relative">
-            <input
-              type="text"
-              readOnly
-              value={url}
-              className="w-full p-6 pr-20 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-mono text-slate-600 focus:outline-none"
-            />
-            <button
-              onClick={handleCopy}
-              className="absolute right-2 top-2 bottom-2 px-4 bg-white border border-slate-100 rounded-xl text-slate-900 hover:bg-slate-900 hover:text-white transition-all flex items-center gap-2"
-            >
-              {copied ? <Check size={18} /> : <Copy size={18} />}
-              <span className="text-xs font-bold uppercase tracking-wider">{copied ? 'Kopiert' : 'Kopieren'}</span>
-            </button>
+          <div className="relative group">
+            <div className="absolute -inset-1 bg-gradient-to-r from-slate-200 to-slate-100 rounded-2xl blur opacity-25 group-hover:opacity-100 transition duration-1000 group-focus-within:opacity-100" />
+            <div className="relative">
+              <input
+                type="text"
+                readOnly
+                value={url}
+                className="w-full p-5 pr-32 bg-white border border-slate-200 rounded-2xl text-xs font-mono text-slate-600 focus:outline-none focus:border-slate-400 focus:ring-4 focus:ring-slate-50 transition-all"
+              />
+              <button
+                onClick={handleCopy}
+                className="absolute right-1.5 top-1.5 bottom-1.5 px-4 bg-slate-900 border border-slate-800 rounded-xl text-white hover:bg-black transition-all flex items-center gap-2"
+              >
+                {copied ? <Check size={14} /> : <Copy size={14} />}
+                <span className="text-[10px] font-bold uppercase tracking-wider">
+                  {copied ? "Kopiert" : "Kopieren"}
+                </span>
+              </button>
+            </div>
          </div>

-          {typeof navigator !== 'undefined' && !!navigator.share && (
-            <button
-              onClick={handleNativeShare}
-              className="w-full p-6 bg-slate-900 text-white rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 transition-all"
-            >
-              <Share2 size={20} />
-              <span>System-Dialog öffnen</span>
-            </button>
-          )}
+          <div className="flex flex-col sm:flex-row items-center gap-4 pt-2">
+            <div className="flex items-center gap-2">
+              <button
+                onClick={handleShareX}
+                className="w-12 h-12 bg-black text-white rounded-xl flex items-center justify-center hover:bg-slate-900 transition-all border border-slate-800 active:scale-95"
+                title="Auf X teilen"
+              >
+                <svg
+                  className="w-5 h-5"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+                </svg>
+              </button>
+
+              <button
+                onClick={handleShareLinkedIn}
+                className="w-12 h-12 bg-[#0A66C2] text-white rounded-xl flex items-center justify-center hover:bg-[#004182] transition-all active:scale-95"
+                title="Auf LinkedIn teilen"
+              >
+                <svg
+                  className="w-5 h-5"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                >
+                  <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+                </svg>
+              </button>
+
+              {typeof navigator !== "undefined" && !!navigator.share && (
+                <button
+                  onClick={handleNativeShare}
+                  className="w-12 h-12 bg-white border border-slate-200 text-slate-900 rounded-xl flex items-center justify-center hover:bg-slate-50 transition-all active:scale-95"
+                  title="System-Dialog öffnen"
+                >
+                  <Share2 size={20} className="text-slate-400" />
+                </button>
+              )}
+            </div>
+
+            {imagePreview && (
+              <button
+                onClick={handleDownloadImage}
+                className="flex-1 w-full p-3 bg-slate-100 text-slate-900 rounded-xl font-bold flex items-center justify-center gap-3 hover:bg-slate-200 transition-all border border-slate-200 active:scale-[0.98]"
+              >
+                <Download size={18} />
+                <span className="text-xs">Als Bild speichern (PNG)</span>
+              </button>
+            )}
+          </div>
        </div>
      </div>
    </Modal>
--- a/apps/web/src/components/TextSelectionShare.tsx
+++ b/apps/web/src/components/TextSelectionShare.tsx
@@ -0,0 +1,184 @@
+"use client";
+
+import React, { useEffect, useState, useRef } from "react";
+import { Share2, Copy, Check } from "lucide-react";
+import { useAnalytics } from "./analytics/useAnalytics";
+import { motion, AnimatePresence } from "framer-motion";
+
+export function TextSelectionShare() {
+  const [isVisible, setIsVisible] = useState(false);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [selectedText, setSelectedText] = useState("");
+  const [copied, setCopied] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const { trackEvent } = useAnalytics();
+  const selectionTimeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    const handleSelection = () => {
+      // Clear any pending timeout
+      if (selectionTimeoutRef.current) {
+        clearTimeout(selectionTimeoutRef.current);
+      }
+
+      // Small delay to ensure selection is complete
+      selectionTimeoutRef.current = setTimeout(() => {
+        const selection = window.getSelection();
+        const text = selection?.toString().trim();
+
+        if (text && text.length > 10) {
+          const range = selection?.getRangeAt(0);
+          const rect = range?.getBoundingClientRect();
+
+          if (rect) {
+            // Position menu above selection, centered
+            setPosition({
+              x: rect.left + rect.width / 2,
+              y: rect.top + window.scrollY - 10,
+            });
+            setSelectedText(text);
+            setIsVisible(true);
+          }
+        } else {
+          setIsVisible(false);
+          setCopied(false);
+        }
+      }, 100);
+    };
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        const selection = window.getSelection();
+        if (!selection?.toString()) {
+          setIsVisible(false);
+          setCopied(false);
+        }
+      }
+    };
+
+    // Listen to both mouseup and selectionchange for better reliability
+    document.addEventListener("mouseup", handleSelection);
+    document.addEventListener("selectionchange", handleSelection);
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mouseup", handleSelection);
+      document.removeEventListener("selectionchange", handleSelection);
+      document.removeEventListener("mousedown", handleClickOutside);
+      if (selectionTimeoutRef.current) {
+        clearTimeout(selectionTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = async () => {
+    const url = window.location.href;
+    const shareText = `"${selectedText}"\n\n${url}`;
+
+    try {
+      await navigator.clipboard.writeText(shareText);
+      setCopied(true);
+      trackEvent("text_selection_copied", {
+        text_length: selectedText.length,
+        url: url,
+      });
+      setTimeout(() => {
+        setIsVisible(false);
+        setCopied(false);
+      }, 1500);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  };
+
+  const handleShareX = () => {
+    const url = window.location.href;
+    const text = encodeURIComponent(`"${selectedText}"\n\n`);
+    const shareUrl = `https://twitter.com/intent/tweet?text=${text}&url=${encodeURIComponent(url)}`;
+
+    window.open(shareUrl, "_blank", "width=550,height=420");
+    trackEvent("text_selection_shared_x", {
+      text_length: selectedText.length,
+      url: url,
+    });
+    setIsVisible(false);
+  };
+
+  const handleShareLinkedIn = () => {
+    const url = window.location.href;
+    const shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`;
+
+    window.open(shareUrl, "_blank", "width=550,height=420");
+    trackEvent("text_selection_shared_linkedin", {
+      text_length: selectedText.length,
+      url: url,
+    });
+    setIsVisible(false);
+  };
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          ref={menuRef}
+          initial={{ opacity: 0, y: 10, scale: 0.9 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 10, scale: 0.9 }}
+          transition={{ duration: 0.15, ease: "easeOut" }}
+          className="fixed z-[200]"
+          style={{
+            left: `${position.x}px`,
+            top: `${position.y}px`,
+            transform: "translate(-50%, -100%)",
+          }}
+        >
+          <div className="bg-slate-900 text-white rounded-xl shadow-2xl px-2 py-2 flex items-center gap-1">
+            <button
+              onClick={handleCopy}
+              className="px-3 py-2 hover:bg-slate-800 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium"
+              title="Zitat kopieren"
+            >
+              {copied ? (
+                <>
+                  <Check size={16} className="text-green-400" />
+                  <span>Kopiert!</span>
+                </>
+              ) : (
+                <>
+                  <Copy size={16} />
+                  <span>Kopieren</span>
+                </>
+              )}
+            </button>
+
+            <div className="w-px h-6 bg-slate-700" />
+
+            <button
+              onClick={handleShareX}
+              className="px-3 py-2 hover:bg-slate-800 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium"
+              title="Auf X teilen"
+            >
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+              </svg>
+              <span>X</span>
+            </button>
+
+            <button
+              onClick={handleShareLinkedIn}
+              className="px-3 py-2 hover:bg-slate-800 rounded-lg transition-colors flex items-center gap-2 text-sm font-medium"
+              title="Auf LinkedIn teilen"
+            >
+              <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
+              </svg>
+              <span>LinkedIn</span>
+            </button>
+          </div>
+          {/* Arrow */}
+          <div className="absolute left-1/2 -translate-x-1/2 -bottom-2 w-0 h-0 border-l-8 border-r-8 border-t-8 border-l-transparent border-r-transparent border-t-slate-900" />
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
--- a/apps/web/src/components/blog/BlogPostHeader.tsx
+++ b/apps/web/src/components/blog/BlogPostHeader.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { Reveal } from "../Reveal";
+import { Clock, Calendar, ArrowLeft } from "lucide-react";
+
+interface BlogPostHeaderProps {
+  title: string;
+  description: string;
+  date: string;
+  readingTime: number;
+  slug: string;
+}
+
+export const BlogPostHeader: React.FC<BlogPostHeaderProps> = ({
+  title,
+  description,
+  date,
+  readingTime,
+  slug,
+}) => {
+  return (
+    <header className="pt-32 pb-8 md:pt-40 md:pb-12 max-w-4xl mx-auto px-5 md:px-0">
+      <div className="space-y-8 md:space-y-10">
+        <Reveal>
+          <Link
+            href="/blog"
+            className="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest text-slate-400 hover:text-slate-900 transition-colors mb-8 group"
+          >
+            <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />
+            Zurück zur Übersicht
+          </Link>
+          <div className="space-y-6">
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-black text-slate-900 tracking-tighter leading-[1.1]">
+              {title}
+            </h1>
+            <p className="font-serif italic text-slate-500 text-xl md:text-2xl leading-relaxed max-w-2xl">
+              {description}
+            </p>
+          </div>
+        </Reveal>
+
+        <Reveal delay={0.2}>
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 py-6 border-y border-slate-100">
+            <div className="flex items-center gap-6 text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em]">
+              <div className="flex items-center gap-2">
+                <Calendar className="w-3 h-3 text-slate-300" />
+                <time dateTime={date}>{date}</time>
+              </div>
+              <div className="flex items-center gap-2">
+                <Clock className="w-3 h-3 text-slate-300" />
+                <span>{readingTime} min Lesezeit</span>
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <span className="text-[8px] font-mono text-slate-300 uppercase tracking-[0.5em]">
+                {slug?.substring(0, 4).toUpperCase() || "BLOG"}-
+                {slug
+                  ? slug
+                      .split("")
+                      .reduce((acc, char) => acc + char.charCodeAt(0), 0)
+                      .toString(16)
+                      .toUpperCase()
+                      .padStart(4, "0")
+                  : "0000"}
+              </span>
+              <span
+                className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse"
+                title="System Live"
+              />
+            </div>
+          </div>
+        </Reveal>
+      </div>
+    </header>
+  );
+};
--- a/apps/web/src/components/blog/BlogPostStickyBar.tsx
+++ b/apps/web/src/components/blog/BlogPostStickyBar.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import { Share2, ArrowLeft, ArrowUp } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ShareModal } from "../ShareModal";
+import { useAnalytics } from "../analytics/useAnalytics";
+
+interface BlogPostStickyBarProps {
+  title: string;
+  url: string;
+}
+
+export function BlogPostStickyBar({ title, url }: BlogPostStickyBarProps) {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const [isShareModalOpen, setIsShareModalOpen] = React.useState(false);
+  const { trackEvent } = useAnalytics();
+
+  React.useEffect(() => {
+    const handleScroll = () => {
+      // Show start appearing after scrolling past the header area (approx 600px)
+      const show = window.scrollY > 600;
+      setIsVisible(show);
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <>
+      <AnimatePresence>
+        {isVisible && (
+          <motion.div
+            initial={{ y: -20, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -20, opacity: 0 }}
+            transition={{ duration: 0.4, ease: [0.23, 1, 0.32, 1] }}
+            className="fixed top-[72px] md:top-[80px] left-0 right-0 z-[90] bg-white/70 backdrop-blur-xl border-b border-slate-100 shadow-sm shadow-slate-100/50 h-16"
+          >
+            <div className="max-w-4xl mx-auto px-6 h-full flex items-center justify-center relative">
+              {/* Left Side - Absolute Positioned */}
+              <div className="absolute left-6 h-full flex items-center">
+                <Link
+                  href="/blog"
+                  className="group flex items-center gap-2.5 text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 hover:text-slate-900 transition-colors"
+                >
+                  <div className="w-9 h-9 rounded-full border border-slate-200 group-hover:border-slate-900 group-hover:bg-slate-900 flex items-center justify-center transition-all duration-300">
+                    <ArrowLeft className="w-4 h-4 text-slate-400 group-hover:text-white transition-colors" />
+                  </div>
+                  <span className="hidden sm:inline">Blog</span>
+                </Link>
+              </div>
+
+              {/* Center Title - Guaranteed dead center */}
+              <div className="flex items-center justify-center p-0 m-0 h-full">
+                <span className="text-[11px] font-bold text-slate-800 tracking-tight text-center max-w-[40vw] truncate leading-normal m-0 p-0 block uppercase">
+                  {title}
+                </span>
+              </div>
+
+              {/* Right Side - Absolute Positioned */}
+              <div className="absolute right-6 h-full flex items-center gap-3">
+                <button
+                  onClick={() =>
+                    window.scrollTo({ top: 0, behavior: "smooth" })
+                  }
+                  className="p-2 text-slate-400 hover:text-slate-900 hover:bg-slate-50 rounded-lg transition-all md:hidden flex items-center justify-center"
+                  title="Nach oben"
+                >
+                  <ArrowUp className="w-5 h-5" />
+                </button>
+
+                <button
+                  onClick={() => {
+                    setIsShareModalOpen(true);
+                    trackEvent("blog_post_sticky_share_clicked", { url });
+                  }}
+                  className="inline-flex items-center gap-2.5 px-5 py-2 border border-slate-200 hover:border-slate-300 hover:bg-slate-50 rounded-full text-slate-600 hover:text-slate-900 transition-all text-[10px] font-bold uppercase tracking-[0.1em] leading-none"
+                >
+                  <Share2 className="w-4 h-4" />
+                  <span className="hidden xs:inline">Teilen</span>
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <ShareModal
+        isOpen={isShareModalOpen}
+        onClose={() => setIsShareModalOpen(false)}
+        url={url}
+        title={title}
+      />
+    </>
+  );
+}
--- a/apps/web/src/components/blog/posts/Group1/AgencySlowdown.tsx
+++ b/apps/web/src/components/blog/posts/Group1/AgencySlowdown.tsx
@@ -3,6 +3,7 @@ import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
 import { Mermaid } from "../../../Mermaid";
+import { DiagramGantt } from "../../../DiagramGantt";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";

@@ -63,6 +64,9 @@ export const AgencySlowdown: React.FC = () => (
          style AM fill:#fca5a5,stroke:#333
          style PM fill:#fca5a5,stroke:#333
          style Ticket fill:#fca5a5,stroke:#333`}
+        id="agency-bottleneck"
+        title="Agentur-Hierarchie Flaschenhals"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Die traditionelle 'Stille Post': Jede Schnittstelle kostet Sie Zeit,
@@ -152,6 +156,27 @@ export const AgencySlowdown: React.FC = () => (
      </IconListItem>
    </IconList>

+    <DiagramGantt
+      tasks={[
+        {
+          id: "agency-req",
+          name: "Agentur: Anforderung bis Live",
+          start: "2024-01-01",
+          duration: "4w",
+        },
+        {
+          id: "mintel-req",
+          name: "Mintel: Anforderung bis Live",
+          start: "2024-01-01",
+          duration: "1w",
+        },
+      ]}
+      title="Zeitvergleich: Agentur vs. Boutique"
+      caption="Direkte Kommunikation beschleunigt Ihr Business um den Faktor 4."
+      id="agency-comparison-gantt"
+      showShare={true}
+    />
+
    <H2>Für wen ich die Bremse löse</H2>
    <Paragraph>
      Mein Angebot richtet sich an Gründer und Entscheider, die{" "}
--- a/apps/web/src/components/blog/posts/Group1/PageSpeedFails.tsx
+++ b/apps/web/src/components/blog/posts/Group1/PageSpeedFails.tsx
@@ -3,6 +3,7 @@ import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
 import { Mermaid } from "../../../Mermaid";
+import { DiagramPie } from "../../../DiagramPie";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";

@@ -92,6 +93,9 @@ export const PageSpeedFails: React.FC = () => (
          style B fill:#fca5a5,stroke:#333
          style F fill:#fca5a5,stroke:#333
          style G fill:#fca5a5,stroke:#333`}
+        id="legacy-loading-bottleneck"
+        title="Legacy System Ladezeit-Flaschenhals"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Der Flaschenhals der Standard-Systeme: Rechenzeit am Server raubt Ihnen
@@ -134,6 +138,20 @@ export const PageSpeedFails: React.FC = () => (
      </IconListItem>
    </IconList>

+    <DiagramPie
+      data={[
+        { label: "JavaScript Execution", value: 35 },
+        { label: "Render Blocking CSS", value: 25 },
+        { label: "Server Response Time", value: 20 },
+        { label: "Image Loading", value: 15 },
+        { label: "Third-Party Scripts", value: 5 },
+      ]}
+      title="Typische Performance-Bottlenecks Verteilung"
+      caption="Wo die Zeit wirklich verloren geht: Eine Analyse der häufigsten Ladezeit-Killer."
+      id="performance-bottlenecks-pie"
+      showShare={true}
+    />
+
    <H2>Der wirtschaftliche Case</H2>
    <Paragraph>
      Baukästen wirken "auf den ersten Blick" günstiger. Doch das ist eine
--- a/apps/web/src/components/blog/posts/Group1/SlowLoadingDebt.tsx
+++ b/apps/web/src/components/blog/posts/Group1/SlowLoadingDebt.tsx
@@ -68,6 +68,9 @@ export const SlowLoadingDebt: React.FC = () => (
          Loss --> Debt["Explodierende Akquisekosten"]
          style Loss fill:#ef4444,color:#fff
          style Debt fill:#ef4444,color:#fff`}
+        id="loading-debt-cycle"
+        title="Ladezeit Teufelskreis"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Der fatale Teufelskreis der Ladezeit: Technische Schulden führen zu
--- a/apps/web/src/components/blog/posts/Group1/WebsiteStability.tsx
+++ b/apps/web/src/components/blog/posts/Group1/WebsiteStability.tsx
@@ -3,6 +3,7 @@ import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
 import { Mermaid } from "../../../Mermaid";
+import { DiagramState } from "../../../DiagramState";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";

@@ -54,6 +55,9 @@ export const WebsiteStability: React.FC = () => (
          style Stable fill:#4ade80,stroke:#333
          style Alert fill:#ef4444,color:#fff
          style Deploy fill:#4ade80,stroke:#333`}
+        id="deployment-safety-net"
+        title="Deployment Sicherheitsnetz"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Mein defensives Sicherheitsnetz: Keine Änderung erreicht den Nutzer,
@@ -107,6 +111,24 @@ export const WebsiteStability: React.FC = () => (
      </IconListItem>
    </IconList>

+    <DiagramState
+      states={["Development", "Testing", "Staging", "Production", "Rollback"]}
+      transitions={[
+        { from: "Development", to: "Testing", label: "Code Complete" },
+        { from: "Testing", to: "Staging", label: "Tests Pass" },
+        { from: "Staging", to: "Production", label: "Final Approval" },
+        { from: "Production", to: "Rollback", label: "Issue Detected" },
+        { from: "Rollback", to: "Development", label: "Fix Required" },
+        { from: "Testing", to: "Development", label: "Tests Fail" },
+      ]}
+      initialState="Development"
+      finalStates={["Production"]}
+      title="Website Deployment Lifecycle"
+      caption="Jeder Zustand ist abgesichert: Keine Änderung erreicht Production ohne vollständige Validierung."
+      id="deployment-lifecycle-state"
+      showShare={true}
+    />
+
    <div className="my-12">
      <ComparisonRow
        description="Hobby-Ansatz vs. Industrial-Grade Reliability"
--- a/apps/web/src/components/blog/posts/Group1/WordPressPlugins.tsx
+++ b/apps/web/src/components/blog/posts/Group1/WordPressPlugins.tsx
@@ -62,6 +62,9 @@ export const WordPressPlugins: React.FC = () => (
          Slow --> Bounce["Besucher springen ab"]
          style Slow fill:#fca5a5,stroke:#333
          style Bounce fill:#ef4444,color:#fff`}
+        id="plugin-dependency-trap"
+        title="Plugin Dependency Trap"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Das Plugin-Paradoxon: Jedes 'Feature' erhöht die Wahrscheinlichkeit
--- a/apps/web/src/components/blog/posts/Group2/CookieFreeDesign.tsx
+++ b/apps/web/src/components/blog/posts/Group2/CookieFreeDesign.tsx
@@ -62,6 +62,9 @@ export const CookieFreeDesign: React.FC = () => (
          NoBanner --> Experience["Sofortige Experience & Vertrauen"]
          style NoBanner fill:#4ade80,stroke:#333
          style Experience fill:#4ade80,stroke:#333`}
+        id="cookie-free-architecture"
+        title="Cookie-freie Architektur"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Privacy by Design: Wenn die Architektur den Schutz bereits garantiert,
--- a/apps/web/src/components/blog/posts/Group2/GDPRSystem.tsx
+++ b/apps/web/src/components/blog/posts/Group2/GDPRSystem.tsx
@@ -58,6 +58,9 @@ export const GDPRSystem: React.FC = () => (
          style Safe fill:#4ade80,stroke:#333
          style Minimize fill:#4ade80,stroke:#333
          style Encrypt fill:#4ade80,stroke:#333`}
+        id="gdpr-compliance-flow"
+        title="DSGVO Compliance System"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Der Kreislauf der systemischen Sicherheit: Jede Stufe schützt Ihre
--- a/apps/web/src/components/blog/posts/Group2/LocalCloud.tsx
+++ b/apps/web/src/components/blog/posts/Group2/LocalCloud.tsx
@@ -53,6 +53,9 @@ export const LocalCloud: React.FC = () => (
          Compliance --> Speed["Niedrige Latenz & Absolute Kontrolle"]
          style Local fill:#4ade80,stroke:#333
          style Risk fill:#fca5a5,stroke:#333`}
+        id="local-cloud-hybrid"
+        title="Local Cloud Strategie"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Architektonische Entscheidung: Geopolitische Risiken minimieren durch
--- a/apps/web/src/components/blog/posts/Group2/PrivacyAnalytics.tsx
+++ b/apps/web/src/components/blog/posts/Group2/PrivacyAnalytics.tsx
@@ -53,6 +53,9 @@ export const PrivacyAnalytics: React.FC = () => (
          Zero --> Compliance["100% DSGVO & Banner-Frei"]
          style Insights fill:#4ade80,stroke:#333
          style Compliance fill:#4ade80,stroke:#333`}
+        id="privacy-analytics-flow"
+        title="Privacy Analytics Workflow"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Ethisches Tracking: Wir gewinnen wertvolle Business-Insights, während
--- a/apps/web/src/components/blog/posts/Group2/VendorLockIn.tsx
+++ b/apps/web/src/components/blog/posts/Group2/VendorLockIn.tsx
@@ -3,6 +3,7 @@ import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
 import { Mermaid } from "../../../Mermaid";
+import { DiagramState } from "../../../DiagramState";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";

@@ -57,6 +58,9 @@ export const VendorLockIn: React.FC = () => (
          Flex --> Evolution["Permanente Innovation"]
          style Open fill:#4ade80,stroke:#333
          style Crisis fill:#fca5a5,stroke:#333`}
+        id="vendor-lockin-fork"
+        title="Vendor Lock-In vs. Offene Architektur"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Die Gabelung der digitalen Strategie: Wählen Sie Freiheit durch
@@ -102,6 +106,24 @@ export const VendorLockIn: React.FC = () => (
      </IconListItem>
    </IconList>

+    <DiagramState
+      states={["Independent", "Integrated", "Dependent", "Locked", "Migration"]}
+      transitions={[
+        { from: "Independent", to: "Integrated", label: "Adopt Platform" },
+        { from: "Integrated", to: "Dependent", label: "Deep Integration" },
+        { from: "Dependent", to: "Locked", label: "Critical Mass" },
+        { from: "Locked", to: "Migration", label: "Exit Decision" },
+        { from: "Migration", to: "Independent", label: "Successful Exit" },
+        { from: "Integrated", to: "Independent", label: "Early Exit" },
+      ]}
+      initialState="Independent"
+      finalStates={["Locked"]}
+      title="Vendor Lock-In Progression"
+      caption="Der Weg in die Abhängigkeit: Je tiefer die Integration, desto schwieriger der Ausstieg."
+      id="vendor-dependency-state"
+      showShare={true}
+    />
+
    <div className="my-12">
      <ComparisonRow
        description="Der ökonomische Vergleich Ihrer Unabhängigkeit"
--- a/apps/web/src/components/blog/posts/Group3/BuildFirst.tsx
+++ b/apps/web/src/components/blog/posts/Group3/BuildFirst.tsx
@@ -3,6 +3,7 @@ import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
 import { Mermaid } from "../../../Mermaid";
+import { DiagramTimeline } from "../../../DiagramTimeline";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";

@@ -58,6 +59,9 @@ export const BuildFirst: React.FC = () => (
          Competitive --> Growth["Skalierung ohne Grenzen"]
          style Build fill:#4ade80,stroke:#333
          style Growth fill:#4ade80,stroke:#333`}
+        id="build-vs-buy-decision"
+        title="Build vs. Buy Entscheidung"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Build vs. Buy: Investieren Sie in Ihr eigenes geistiges Eigentum statt
@@ -104,6 +108,19 @@ export const BuildFirst: React.FC = () => (
      Software-Miete ist ein Kostenblock, Software-Bau ist eine Investition.
    </Paragraph>

+    <DiagramTimeline
+      events={[
+        { year: "Monat 1-2", title: "Strategische Planung & Blueprint" },
+        { year: "Monat 3-4", title: "Core-Architektur & MVP" },
+        { year: "Monat 5-6", title: "Feature-Ausbau & Testing" },
+        { year: "Monat 7-8", title: "Launch & Optimierung" },
+        { year: "Monat 9+", title: "Kontinuierliche Evolution" },
+      ]}
+      title="Typischer Build-First Projektverlauf"
+      caption="Von der Vision zum skalierbaren System: Ein strukturierter Weg zur digitalen Souveränität."
+      id="build-first-timeline"
+    />
+
    <IconList>
      <IconListItem check>
        <strong>Exakter Prozess-Match:</strong> Das System passt sich Ihren
--- a/apps/web/src/components/blog/posts/Group3/FixedPrice.tsx
+++ b/apps/web/src/components/blog/posts/Group3/FixedPrice.tsx
@@ -3,6 +3,7 @@ import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
 import { Mermaid } from "../../../Mermaid";
+import { DiagramGantt } from "../../../DiagramGantt";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";

@@ -57,6 +58,9 @@ export const FixedPrice: React.FC = () => (
          Safety --> Quality["Maximale Qualität durch Effizienz"]
          style Fixed fill:#4ade80,stroke:#333
          style Quality fill:#4ade80,stroke:#333`}
+        id="fixed-price-model"
+        title="Festpreis vs. Stundensatz Modell"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Das Modell des Vertrauens: Fixe Budgets schaffen den Raum für
@@ -109,6 +113,49 @@ export const FixedPrice: React.FC = () => (
      </IconListItem>
    </IconList>

+    <DiagramGantt
+      tasks={[
+        {
+          id: "blueprint",
+          name: "Blueprint & Planung",
+          start: "2024-01-01",
+          duration: "2w",
+        },
+        {
+          id: "design",
+          name: "Design System",
+          start: "2024-01-15",
+          duration: "1w",
+          dependencies: ["blueprint"],
+        },
+        {
+          id: "core",
+          name: "Core Development",
+          start: "2024-01-22",
+          duration: "3w",
+          dependencies: ["design"],
+        },
+        {
+          id: "testing",
+          name: "Testing & QA",
+          start: "2024-02-12",
+          duration: "1w",
+          dependencies: ["core"],
+        },
+        {
+          id: "launch",
+          name: "Launch & Deployment",
+          start: "2024-02-19",
+          duration: "1w",
+          dependencies: ["testing"],
+        },
+      ]}
+      title="Festpreis-Projekt: Klare Meilensteine"
+      caption="Transparente Zeitplanung mit festen Deliverables – Sie wissen immer, wo Sie stehen."
+      id="fixed-price-gantt"
+      showShare={true}
+    />
+
    <div className="my-12">
      <ComparisonRow
        description="Der ökonomische Vergleich Ihrer Projektsicherheit"
--- a/apps/web/src/components/blog/posts/Group3/GreenIT.tsx
+++ b/apps/web/src/components/blog/posts/Group3/GreenIT.tsx
@@ -3,6 +3,7 @@ import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
 import { Mermaid } from "../../../Mermaid";
+import { DiagramPie } from "../../../DiagramPie";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";

@@ -56,6 +57,9 @@ export const GreenIT: React.FC = () => (
          Energy --> Profit["Geringere Hosting-Kosten"]
          style Profit fill:#4ade80,stroke:#333
          style Impact fill:#4ade80,stroke:#333`}
+        id="green-it-efficiency"
+        title="Green IT Effizienz-Kreislauf"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Die grüne Rendite: Effizienz in der Software führt direkt zu
@@ -104,6 +108,19 @@ export const GreenIT: React.FC = () => (
      </IconListItem>
    </IconList>

+    <DiagramPie
+      data={[
+        { label: "Server Computing", value: 40 },
+        { label: "Data Transfer", value: 30 },
+        { label: "Client Rendering", value: 20 },
+        { label: "Asset Storage", value: 10 },
+      ]}
+      title="Website Energie-Verbrauch Breakdown"
+      caption="Wo Ihre Website Energie verbraucht: Optimierungspotenzial in jedem Bereich."
+      id="energy-consumption-pie"
+      showShare={true}
+    />
+
    <div className="my-12">
      <ComparisonRow
        description="Der Impact Ihres technologischen Fußabdrucks"
--- a/apps/web/src/components/blog/posts/Group3/Longevity.tsx
+++ b/apps/web/src/components/blog/posts/Group3/Longevity.tsx
@@ -58,6 +58,9 @@ export const Longevity: React.FC = () => (
          Update --> ROI
          style ROI fill:#4ade80,stroke:#333
          style Decade fill:#4ade80,stroke:#333`}
+        id="technology-longevity"
+        title="Technologie Langlebigkeit"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Architektur der Langlebigkeit: Durch die Trennung von Logik und Trends
--- a/apps/web/src/components/blog/posts/Group3/MaintenanceNoCMS.tsx
+++ b/apps/web/src/components/blog/posts/Group3/MaintenanceNoCMS.tsx
@@ -56,6 +56,9 @@ export const MaintenanceNoCMS: React.FC = () => (
          Speed --> Focus["Fokus auf Kunden & Strategie"]
          style Git fill:#4ade80,stroke:#333
          style Focus fill:#4ade80,stroke:#333`}
+        id="maintenance-workflow"
+        title="Wartungs-Workflow Vergleich"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Der schlanke Workflow: Wir eliminieren die Datenbank-Ebene, um
--- a/apps/web/src/components/blog/posts/Group4/CRMSync.tsx
+++ b/apps/web/src/components/blog/posts/Group4/CRMSync.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { H2, H3 } from "../../../ArticleHeading";
 import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
 import { IconList, IconListItem } from "../../../IconList";
-import { Mermaid } from "../../../Mermaid";
+import { DiagramSequence } from "../../../DiagramSequence";
 import { Marker } from "../../../Marker";
 import { ComparisonRow } from "../../../Landing/ComparisonRow";

@@ -47,20 +47,44 @@ export const CRMSync: React.FC = () => (
    </Paragraph>

    <div className="my-12">
-      <Mermaid
-        graph={`graph LR
-          Lead["Besucher sendet Formular"] --> Edge["Mintel Validation Layer"]
-          Edge --> Transform["Intelligente Daten-Aufbereitung"]
-          Transform --> CRM["CRM (Salesforce/HubSpot/etc.)"]
-          CRM --> Notify["Instat Sales-Benachrichtigung"]
-          CRM --> AutoResp["Personalisierte Auto-Antwort"]
-          style CRM fill:#4ade80,stroke:#333
-          style Notify fill:#4ade80,stroke:#333`}
+      <DiagramSequence
+        participants={[
+          "Besucher",
+          "Website",
+          "ValidationLayer",
+          "CRM",
+          "SalesTeam",
+        ]}
+        messages={[
+          { from: "Besucher", to: "Website", message: "Formular absenden" },
+          {
+            from: "Website",
+            to: "ValidationLayer",
+            message: "Daten validieren",
+          },
+          {
+            from: "ValidationLayer",
+            to: "CRM",
+            message: "Lead erstellen (API)",
+          },
+          {
+            from: "CRM",
+            to: "SalesTeam",
+            message: "Echtzeit-Benachrichtigung",
+            type: "async",
+          },
+          {
+            from: "CRM",
+            to: "Besucher",
+            message: "Auto-Response E-Mail",
+            type: "dotted",
+          },
+        ]}
+        title="Automatisierter CRM-Sync Ablauf"
+        caption="Der automatisierte Lead-Fluss: Von der ersten Interaktion bis zum CRM-Eintrag in Millisekunden – ohne menschliches Eingreifen."
+        id="crm-sync-sequence"
+        showShare={true}
      />
-      <p className="text-center text-xs text-slate-400 mt-4 italic">
-        Der automatisierte Lead-Fluss: Von der ersten Interaktion bis zum
-        CRM-Eintrag in Millisekunden – ohne menschliches Eingreifen.
-      </p>
    </div>

    <H3>Echtzeit-Synchronität als Wettbewerbsvorteil</H3>
--- a/apps/web/src/components/blog/posts/Group4/CleanCode.tsx
+++ b/apps/web/src/components/blog/posts/Group4/CleanCode.tsx
@@ -55,6 +55,9 @@ export const CleanCode: React.FC = () => (
          Market --> Profit
          style Profit fill:#4ade80,stroke:#333
          style Clean fill:#4ade80,stroke:#333`}
+        id="clean-code-architecture"
+        title="Clean Code Architektur"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Die Logik der Qualität: Sauberer Code zahlt sich durch sinkende
--- a/apps/web/src/components/blog/posts/Group4/HostingOps.tsx
+++ b/apps/web/src/components/blog/posts/Group4/HostingOps.tsx
@@ -54,6 +54,9 @@ export const HostingOps: React.FC = () => (
          Global --> Failover["Automatisches Failover (Sicherheit)"]
          style Global fill:#4ade80,stroke:#333
          style Failover fill:#4ade80,stroke:#333`}
+        id="cloud-native-operations"
+        title="Cloud-Native Operations"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Die Cloud-Native Architektur: Skalierung per Knopfdruck und
--- a/apps/web/src/components/blog/posts/Group4/NoTemplates.tsx
+++ b/apps/web/src/components/blog/posts/Group4/NoTemplates.tsx
@@ -56,6 +56,9 @@ export const NoTemplates: React.FC = () => (
          Distinct --> Authority["Marken-Autorität"]
          style Custom fill:#4ade80,stroke:#333
          style Authority fill:#4ade80,stroke:#333`}
+        id="bespoke-vs-template"
+        title="Bespoke vs. Template Vergleich"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Bespoke vs. Template: Investieren Sie in ein digitales Unikat, das Ihre
--- a/apps/web/src/components/blog/posts/Group4/ResponsiveDesign.tsx
+++ b/apps/web/src/components/blog/posts/Group4/ResponsiveDesign.tsx
@@ -53,6 +53,9 @@ export const ResponsiveDesign: React.FC = () => (
          Desktop --> UX
          style UX fill:#4ade80,stroke:#333
          style Logic fill:#4ade80,stroke:#333`}
+        id="responsive-ux-strategy"
+        title="Responsive UX Strategie"
+        showShare={true}
      />
      <p className="text-center text-xs text-slate-400 mt-4 italic">
        Plattformübergreifende Brillanz: Ein System, das sich nicht nur anpasst,