From c3fa10dd538bd544bddd0b26420ea2f2d29fc674 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Sun, 22 Feb 2026 18:07:48 +0100
Subject: [PATCH] fix(ui): apply user-requested fixes for Meme, TOC, ROI
 Calculator, and Gantt

---
 apps/web/src/components/ArticleMeme.tsx                   | 4 ++--
 apps/web/src/components/DiagramGantt.tsx                  | 2 +-
 apps/web/src/components/TableOfContents.tsx               | 4 ++--
 .../components/simulations/PerformanceROICalculator.tsx   | 8 ++++----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/ArticleMeme.tsx b/apps/web/src/components/ArticleMeme.tsx
index 7f4fb4c..6d81ca5 100644
--- a/apps/web/src/components/ArticleMeme.tsx
+++ b/apps/web/src/components/ArticleMeme.tsx
@@ -97,13 +97,13 @@ export const ArticleMeme: React.FC<ArticleMemeProps & { image?: string }> = ({ t
 
     return (
         <Reveal direction="up" delay={0.1}>
-            <div id={shareId} className={`not-prose max-w-xl mx-auto my-16 group relative transition-all duration-500 ease-out z-10 ${className}`}>
+            <div id={shareId} className={`not-prose max-w-xl mx-auto my-16 mb-24 group relative transition-all duration-500 ease-out z-10 ${className}`}>
                 {/* Ambient Glow */}
                 <div className="absolute -inset-1 bg-gradient-to-r from-red-100/30 to-slate-100/30 rounded-[2rem] blur opacity-10 group-hover:opacity-30 transition duration-1000 -z-10" />
 
                 <div className="glass bg-white/80 backdrop-blur-xl border border-slate-100 rounded-2xl overflow-hidden shadow-sm shadow-slate-200 group-hover:shadow-md transition-all duration-500 relative">
                     {/* Share Button */}
-                    <div className="absolute top-4 right-4 md:opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-50">
+                    <div className="absolute -bottom-14 right-0 md:opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-50">
                         <ComponentShareButton targetId={shareId} title={`Meme: ${template}`} />
                     </div>
 
diff --git a/apps/web/src/components/DiagramGantt.tsx b/apps/web/src/components/DiagramGantt.tsx
index 323cf86..a7aed5f 100644
--- a/apps/web/src/components/DiagramGantt.tsx
+++ b/apps/web/src/components/DiagramGantt.tsx
@@ -35,7 +35,7 @@ ${(tasks || [])
         const deps = task.dependencies?.length
           ? `, after ${task.dependencies.join(" ")}`
           : "";
-        const safeName = task.name.replace(/:/g, " -");
+        const safeName = task.name.replace(/[:&<>"]/g, " -");
         return `    ${safeName} :${task.id}, ${task.start}, ${task.duration}${deps}`;
       })
       .join("\n")}`;
diff --git a/apps/web/src/components/TableOfContents.tsx b/apps/web/src/components/TableOfContents.tsx
index f652fb3..ef15033 100644
--- a/apps/web/src/components/TableOfContents.tsx
+++ b/apps/web/src/components/TableOfContents.tsx
@@ -75,12 +75,12 @@ export const TableOfContents: React.FC<TableOfContentsProps> = ({ items, classNa
     };
 
     return (
-        <div className={`not-prose my-12 p-8 bg-slate-50 border border-slate-200 rounded-2xl ${className}`}>
+        <div className={`not-prose my-12 border-l-2 border-slate-200 pl-6 ${className}`}>
             <script
                 type="application/ld+json"
                 dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
             />
-            <p className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6 border-b border-slate-200 pb-2">
+            <p className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6">
                 Inhaltsverzeichnis
             </p>
             <nav>
diff --git a/apps/web/src/components/simulations/PerformanceROICalculator.tsx b/apps/web/src/components/simulations/PerformanceROICalculator.tsx
index f1e9bf2..df08414 100644
--- a/apps/web/src/components/simulations/PerformanceROICalculator.tsx
+++ b/apps/web/src/components/simulations/PerformanceROICalculator.tsx
@@ -5,8 +5,8 @@ import { ComponentShareButton } from '../ComponentShareButton';
 import { Reveal } from '../Reveal';
 
 export function PerformanceROICalculator({ className = '' }: { className?: string }) {
-    const [traffic, setTraffic] = useState(800); // Typical niche B2B traffic
-    const [aov, setAov] = useState(25000); // Typical B2B project value
+    const [traffic, setTraffic] = useState(300); // Typical niche B2B SME traffic
+    const [aov, setAov] = useState(5000); // Typical SME project value
     const [loadTime, setLoadTime] = useState(4.5);
     const [baseConv, setBaseConv] = useState(2.0); // 2% Lead-Rate as default
 
@@ -66,7 +66,7 @@ export function PerformanceROICalculator({ className = '' }: { className?: strin
                                     <span className="font-mono font-bold text-slate-700">{traffic.toLocaleString('de-DE')}</span>
                                 </div>
                                 <input
-                                    type="range" min="100" max="5000" step="100"
+                                    type="range" min="100" max="2000" step="100"
                                     value={traffic} onChange={(e) => setTraffic(Number(e.target.value))}
                                     className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900"
                                 />
@@ -90,7 +90,7 @@ export function PerformanceROICalculator({ className = '' }: { className?: strin
                                     <span className="font-mono font-bold text-slate-700">{formatCurrency(aov)}</span>
                                 </div>
                                 <input
-                                    type="range" min="1000" max="250000" step="1000"
+                                    type="range" min="1000" max="50000" step="1000"
                                     value={aov} onChange={(e) => setAov(Number(e.target.value))}
                                     className="w-full h-1.5 bg-slate-200 rounded-lg appearance-none cursor-pointer accent-slate-900"
                                 />