fix(blog): refine Recharts gradients/tooltips and fix DiagramGantt crash

apps/web/content/blog/digital-longevity-architecture.mdx

@@ -1,136 +1,158 @@
 ---
-title: "Digital Longevity: Architektur für das nächste Jahrzehnt"
-description: "Software ohne Verfallsdatum: So bauen wir Systeme, die technologische Trends überdauern und langfristige Werte schaffen."
+title: "Digital Longevity: Software-Architektur für das nächste Jahrzehnt"
+thumbnail: "/blog/digital-longevity-architecture.png"
+description: "Software ohne Verfallsdatum: Erfahren Sie, wie nachhaltige B2B-Architektur technische Schulden minimiert und langfristige digitale Assets schafft."
 date: "2026-02-02"
-tags: ["architecture", "longevity"]
+tags: ["architecture", "longevity", "strategy"]
 ---
 
 <LeadParagraph>
-  In der schnelllebigen Tech-Welt gilt Software oft schon nach zwei Jahren
-  als veraltet.
+  In einer Branche, die von Quartalszahlen und kurzlebigen Hypes getrieben wird, gilt Software oft schon nach 24 Monaten als veraltet. 
 </LeadParagraph>
 <LeadParagraph>
-  Ich halte das für eine massive Verschwendung von Kapital und Energie.
+  Ich betrachte diese technologische Kurzatmigkeit als massive Verschwendung von Kapital, Energie und Fokus. Wahre Qualität bemisst sich nicht am Tag des Launchs, sondern daran, wie ein System altert.
 </LeadParagraph>
 <LeadParagraph>
-  Wahre Qualität zeigt sich darin, wie ein System altert.
-</LeadParagraph>
-<LeadParagraph>
-  Ich zeige Ihnen, wie wir <Marker>digitale Werte für Jahrzehnte</Marker>{" "}
-  schaffen – durch vorausschauende Architektur und zeitlose Standards.
+  Ich zeige Ihnen, wie wir <Marker>digitale Werte für Jahrzehnte</Marker> schaffen – durch vorausschauende Architektur, die technische Schulden proaktiv verhindert statt sie nur zu verwalten.
 </LeadParagraph>
 
-<H2>Gegen die Wegwerf-Mentalität im Code</H2>
+<Section>
+<H2>Inhaltsverzeichnis</H2>
+1. [Gegen die Wegwerf-Mentalität im Code](#gegen-die-wegwerf-mentalität-im-code)
+2. [Der ökonomische Case für Langlebigkeit](#der-ökonomische-case-für-langlebigkeit)
+3. [Prinzipien für ewige Systeme](#meine-prinzipien-für-ewige-systeme)
+4. [Der Haken an der Sache (Ehrliche Analyse)](#der-haken-an-der-sache)
+5. [Fazit & FAQ](#fazit-werte-schaffen-die-bleiben)
+</Section>
+
+<H2 id="gegen-die-wegwerf-mentalität-im-code">Gegen die Wegwerf-Mentalität im Code</H2>
+
 <Paragraph>
-  Viele Agenturen bauen "Schönwetter-Lösungen", die nur bis zur nächsten
-  Trend-Welle halten.
+  Viele Agenturen bauen "Schönwetter-Lösungen". Man setzt auf proprietäre Blackboxes oder überladene Frameworks, die nach kurzer Zeit nicht mehr unterstützt werden. Das Ergebnis ist eine kostspielige Spirale aus [technischen Altlasten](/blog/slow-loading-costs-customers) und erzwungenen Relaunchs alle drei Jahre.
 </Paragraph>
+
+<div className="my-8">
+  <ArticleMeme template="grumpycat" captions="Agentur: 'Wir brauchen einen Relaunch'|Ich: 'Der letzte war vor 18 Monaten'" />
+</div>
+
 <Paragraph>
-  Man setzt auf kurzlebige Frameworks oder proprietäre Blackboxes, die nach
-  kurzer Zeit nicht mehr unterstützt werden.
+  Ich nenne das <Marker>geplante Obsoleszenz der Software</Marker>. Laut Forschung der Cambridge University liegt die durchschnittliche Lebensspanne einer mobilen App zwischen nur 1 und 5 Jahren. Im B2B-Sektor ist diese Kurzlebigkeit ein strategisches Risiko. Mein Ansatz ist das Gegenteil: Ich baue Systeme, die durch ihre innere Ordnung bestechen. Guter Code ist wie eine solide Immobilie – er braucht Pflege, aber keine Abrissbirne.
 </Paragraph>
+
+<ArticleQuote 
+  quote="Companies will spend, on average, 10% of their annual revenue on maintaining legacy systems, many of which are prone to constant re-development." 
+  author="Deloitte" 
+  isCompany={true} 
+  source="Deloitte Study" 
+  sourceUrl="https://www2.deloitte.com"
+/>
+
+<H2 id="der-ökonomische-case-für-langlebigkeit">Der ökonomische Case für Langlebigkeit</H2>
+
 <Paragraph>
-  Das Ergebnis: Alle drei Jahre ist ein teurer Relaunch fällig.
+  Unternehmen investieren oft Unsummen in glänzende Oberflächen, während das Fundament bröckelt. Dabei zeigen Studien des Standish Group, dass nur 29% aller Softwareprojekte als wirklich erfolgreich eingestuft werden. Ein Hauptgrund: Mangelnde architektonische Weitsicht.
 </Paragraph>
+
+<StatsGrid stats="60%|Niedrigere IT-Kosten|bei reifer Architektur~30%|Schneller am Markt|durch Microservices~55%|Fehlquote|bei ad-hoc Projekten" />
+
 <Paragraph>
-  Ich nenne das <Marker>geplante Obsoleszenz der Software</Marker>.
-</Paragraph>
-<Paragraph>
-  Mein Boutique-Ansatz ist das Gegenteil davon: Ich baue Systeme, die durch
-  ihre innere Ordnung und Robustheit bestechen.
-</Paragraph>
-<Paragraph>
-  Guter Code ist wie eine solide Immobilie – er braucht Pflege, aber keine
-  Abrissbirne.
+  Durch den Einsatz eines [Clean Code Fokus](/blog/clean-code-for-business-value) verwandeln wir Software von einer Verbindlichkeit (Liability) in ein echtes digitales Asset. Wenn die Architektur stimmt, sinken die Wartungskosten massiv, während die Agilität steigt.
 </Paragraph>
 
 <DigitalAssetVisualizer />
 
 <H3>Die Ästhetik der Zeitlosigkeit</H3>
-<Paragraph>Langlebigkeit hat auch eine visuelle Komponente.</Paragraph>
+
 <Paragraph>
-  Ich vermeide "modische" Spielereien, die morgen schon peinlich wirken
-  könnten.
-</Paragraph>
-<Paragraph>
-  Wahre technische Eleganz ist schlicht, funktional und hochpräzise.
-</Paragraph>
-<Paragraph>
-  Ein <Marker>industrieller, klarer Look</Marker> altert langsamer als jede
-  verspielte Grafik.
-</Paragraph>
-<Paragraph>
-  Ich schaffe Designs, die heute beeindrucken und in fünf Jahren noch immer
-  souverän wirken.
+  Langlebigkeit hat auch eine visuelle Komponente. Ich vermeide "modische" Spielereien, die morgen schon peinlich wirken könnten. Ein <Marker>industrieller, klarer Look</Marker> altert langsamer als jede verspielte Grafik. Wir setzen auf [Responsive Excellence](/blog/responsive-design-high-fidelity), die auch auf Endgeräten der nächsten Generation souverän wirkt.
 </Paragraph>
 
-<H2>Meine Prinzipien für ewige Systeme</H2>
-<Paragraph>Wie baut man Software, die nicht veraltet?</Paragraph>
-<Paragraph>Durch die kompromisslose Auswahl der Fundamente:</Paragraph>
+<H2 id="meine-prinzipien-für-ewige-systeme">Meine Prinzipien für ewige Systeme</H2>
+
+<Paragraph>
+  Wie baut man Software, die nicht veraltet? Durch die kompromisslose Auswahl der Fundamente und die Abkehr von [Abhängigkeiten durch Baukasten-Systeme](/blog/builder-systems-threaten-independence).
+</Paragraph>
 
 <IconList>
   <IconListItem check>
-    <strong>Bohrmaschinen statt Spielzeug:</strong> Ich nutze nur
-    Technologien mit breitem industriellem Rückhalt. Keine "Hype"-Tools ohne
-    Langzeit-Sicherheit.
+    <strong>Bohrmaschinen statt Spielzeug:</strong> Einsatz von Technologien mit breitem industriellem Rückhalt (z.B. React, Node.js, Go). Keine Experimente mit "Hype"-Tools ohne Langzeit-Sicherheit.
   </IconListItem>
   <IconListItem check>
-    <strong>Strict Separation of Concerns:</strong> Wir trennen Design,
-    Daten und Logik so sauber, dass man Einzelteile austauschen kann, ohne
-    das Ganze zu gefährden.
+    <strong>Strict Separation of Concerns:</strong> Saubere Trennung von Design, Daten und Logik (Headless-Ansatz). So lassen sich Einzelteile austauschen, ohne das Gesamtsystem zu gefährden.
   </IconListItem>
   <IconListItem check>
-    <strong>Automatisierte Evolution:</strong> Mein System prüft sich
-    selbst. Wir erkennen frühzeitig, wenn externe Standards sich ändern und
-    passen uns proaktiv an.
+    <strong>Automatisierte Evolution:</strong> Kontinuierliche Refactoring-Zyklen. Laut Google Developers kann gezieltes Refactoring die Performance um 20-50% steigern.
   </IconListItem>
 </IconList>
 
+<div className="my-12">
+  <YouTubeEmbed videoId="TPLb4q95ZC4" title="Carola Lilienthal über langlebige Architekturen" />
+</div>
+
 <div className="my-12">
   <ComparisonRow
     description="Der wirtschaftliche Impact der Halbwertszeit"
-    negativeLabel="Trend-fokussierte Agentur"
-    negativeText="Relaunch alle 3 Jahre nötig, technologische Schulden, hohe Lizenz-Abhängigkeit"
-    positiveLabel="Mintel Longevity Standard"
-    positiveText="Laufzeit von 10+ Jahren möglich, Code als bleibendes Asset, volle Souveränität"
+    negativeLabel="Trend-Agentur"
+    negativeText="Relaunch alle 3 Jahre nötig, massive technische Schulden, hohe Lizenz-Abhängigkeit."
+    positiveLabel="Mintel Standard"
+    positiveText="Laufzeit von 10+ Jahren, Code als bleibendes Asset, volle technologische Souveränität."
+    showShare={true}
   />
 </div>
 
+<Section>
+<H2 id="der-haken-an-der-sache">Der Haken an der Sache (Devil's Advocate)</H2>
+<Paragraph>
+  Langlebige Architektur ist kein Free Lunch. Warum baut dann nicht jeder so?
+</Paragraph>
+<IconList>
+  <IconListItem cross>
+    <strong>Höhere Initialkosten:</strong> Eine saubere Architektur erfordert initial ca. 20-30% mehr Planungszeit als eine "Hau-Ruck"-Lösung.
+  </IconListItem>
+  <IconListItem cross>
+    <strong>Abstraktions-Overhead:</strong> Für extrem kleine Wegwerf-Projekte (z.B. eine Event-Landingpage für 4 Wochen) ist dieser Ansatz schlicht überdimensioniert.
+  </IconListItem>
+  <IconListItem cross>
+    <strong>Expertise-Zwang:</strong> Sie benötigen Entwickler, die Architektur verstehen, statt nur "Templates zusammenzuklicken".
+  </IconListItem>
+</IconList>
+</Section>
+
+<LeadMagnet 
+  title="Architektur-Audit anfragen" 
+  description="Wir analysieren Ihren aktuellen Tech-Stack auf Zukunftsfähigkeit und identifizieren kritische technische Schulden, bevor sie zum Wachstumsstopper werden." 
+  buttonText="Jetzt Analyse sichern" 
+  href="/contact" 
+  variant="performance" 
+/>
+
 <H2>Rendite durch technologische Beständigkeit</H2>
-<Paragraph>Wahrer ROI entsteht erst über die Zeit.</Paragraph>
-<Paragraph>
-  Wer nicht ständig neu bauen muss, hat mehr Kapital für echtes Wachstum zur
-  Verfügung.
-</Paragraph>
-<Paragraph>
-  Langlebige Software ist zudem das{" "}
-  <Marker>nachhaltigste digitale Werkzeug</Marker>, das Sie besitzen können.
-</Paragraph>
-<Paragraph>
-  Investieren Sie in Substanz, nicht in flüchtige Effekte.
-</Paragraph>
-<Paragraph>Vorsprung hat der, dessen Fundament felsenfest steht.</Paragraph>
 
-<H2>Wann ist 'Ewigkeit' Ihr Ziel?</H2>
 <Paragraph>
-  Suchen Sie einen Partner für den Aufbau einer digitalen Marke, die Bestand
-  hat?
-</Paragraph>
-<Paragraph>
-  Ich arbeite für Gründer, die <Marker>Generationen-Projekte</Marker>{" "}
-  führen.
-</Paragraph>
-<Paragraph>
-  Wenn Sie technologische Stabilität als Teil Ihres Vermächtnisses
-  begreifen, bin ich Ihr Architekt.
+  Wahrer ROI entsteht erst über die Zeit. Wer nicht ständig neu bauen muss, hat mehr Kapital für echtes Wachstum zur Verfügung. Organisationen mit reifen Architektur-Praktiken berichten von bis zu 60% niedrigeren Infrastrukturkosten im Vergleich zu Ad-hoc-Ansätzen.
 </Paragraph>
 
-<H2>Fazit: Werte schaffen, die bleiben</H2>
-<Paragraph>Digitale Exzellenz misst sich am Erfolg von morgen.</Paragraph>
+<div className="my-8">
+  <ArchitectureBuilder />
+</div>
+
 <Paragraph>
-  Lassen wir gemeinsam ein System gießen, das die Zeit überdauert.
+  Investieren Sie in Substanz, nicht in flüchtige Effekte. In einem Markt, in dem 65% der B2B-Entscheider angeben, dass ihre E-Commerce-Lösungen "broken" sind, ist technologische Stabilität ein [entscheidender Wettbewerbsvorteil](/blog/build-first-digital-architecture).
 </Paragraph>
+
+<H2 id="fazit-werte-schaffen-die-bleiben">Fazit: Werte schaffen, die bleiben</H2>
+
 <Paragraph>
-  <Marker>Qualität ist Beständigkeit.</Marker> Ihr Erfolg verdient eine
-  Architektur ohne Verfallsdatum.
+  Digitale Exzellenz misst sich am Erfolg von morgen. Wenn Sie technologische Stabilität als Teil Ihres unternehmerischen Vermächtnisses begreifen, ist eine "Build-First" Strategie alternativlos. Lassen wir gemeinsam ein System gießen, das die Zeit überdauert. <Marker>Qualität ist Beständigkeit.</Marker> Ihr Erfolg verdient eine Architektur ohne Verfallsdatum.
 </Paragraph>
+
+<FAQSection>
+  <H3>Warum halten moderne Plattformen oft nur wenige Jahre?</H3>
+  <Paragraph>Meist liegt es an einer zu engen Kopplung an Drittanbieter-Plugins und kurzlebige Trends. Sobald ein Kern-Element nicht mehr gewartet wird, bricht das gesamte Kartenhaus zusammen.</Paragraph>
+  
+  <H3>Rechnet sich die höhere Initialinvestition wirklich?</H3>
+  <Paragraph>Ja, da die Kosten für Wartung und den nächsten Relaunch drastisch sinken. Über einen Zeitraum von 5-10 Jahren ist eine Individualarchitektur fast immer günstiger als Miet-Software oder Template-Lösungen.</Paragraph>
+
+  <H3>Kann man bestehende Legacy-Systeme "retten"?</H3>
+  <Paragraph>Oft ist ein schrittweises Refactoring möglich, um Performance und Stabilität zu erhöhen. Laut Google-Metriken können Verbesserungen hier die Performance um bis zu 50% steigern.</Paragraph>
+</FAQSection>