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/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,