feat: complete MDX migration for blog, fix diagram fidelity and refactor styling architecture

apps/web/content/blog/green-it-sustainable-web.mdx

@@ -0,0 +1,169 @@
+---
+title: "Green IT: Warum nachhaltiger Code profitabler ist"
+description: "Effizienz als ökologischer und ökonomischer Hebel: Wie schlanke Web-Architekturen CO2 sparen und Ihr Budget schonen."
+date: "2026-02-03"
+tags: ["sustainability", "performance"]
+---
+
+<LeadParagraph>
+  Das Internet verbraucht mehr Energie als der weltweite Flugverkehr.
+</LeadParagraph>
+<LeadParagraph>
+  In meiner Rolle als Digital Architect sehe ich Nachhaltigkeit nicht als
+  "Nice-to-Have", sondern als Ausdruck technischer Reife.
+</LeadParagraph>
+<LeadParagraph>
+  Effizienter Code ist grüner Code.{" "}
+  <Marker>
+    Schlanke Systeme sparen nicht nur CO2, sondern auch bares Geld.
+  </Marker>
+</LeadParagraph>
+<LeadParagraph>
+  Ich zeige Ihnen, warum ökologische Verantwortung und ökonomische
+  Profitabilität Hand in Hand gehen.
+</LeadParagraph>
+
+<H2>Der ökologische Fußabdruck von schlechtem Code</H2>
+<Paragraph>
+  Jedes unnötige Kilobyte, das durch das Netz geschickt wird, frisst Strom –
+  im Rechenzentrum, in den Leitungen und am Endgerät des Nutzers.
+</Paragraph>
+<Paragraph>
+  Viele moderne Websites sind heute "Adipös". Sie schleppen Megabytes an
+  Ballast mit sich herum.
+</Paragraph>
+<Paragraph>
+  Das führt zu erhitzten Smartphones und überlasteten Servern.
+</Paragraph>
+<Paragraph>
+  Ich nenne das <Marker>digitale Verschwendung</Marker>.
+</Paragraph>
+<Paragraph>
+  Durch radikale Optimierung senken wir die CPU-Last um bis zu 80 %. Das
+  schont die Umwelt und beschleunigt Ihre UX.
+</Paragraph>
+
+<div className="my-12">
+  <Mermaid id="green-it-efficiency" title="Green IT Effizienz-Kreislauf" showShare={true}>
+graph TD
+      Code["Schlanke Code-Architektur"] --> Compute["Weniger CPU-Zyklen am Server"]
+      Code --> Bytes["Weniger Traffic (CDN)"]
+      Compute --> Energy["Niedrigerer Stromverbrauch"]
+      Bytes --> Impact["Schnellere UX & Weniger CO2"]
+      Energy --> Profit["Geringere Hosting-Kosten"]
+      style Profit fill:#4ade80,stroke:#333
+      style Impact fill:#4ade80,stroke:#333
+</Mermaid>
+  <div className="text-center text-xs text-slate-400 mt-4 italic">
+    Die grüne Rendite: Effizienz in der Software führt direkt zu
+    ökologischen und finanziellen Einsparungen.
+  </div>
+</div>
+
+<H3>Boutique-Engineering als Klimaschutz</H3>
+<Paragraph>
+  Standard-Agenturen greifen oft zu überladenen Baukästen, um Zeit zu
+  sparen.
+</Paragraph>
+<Paragraph>
+  Der Preis dafür ist eine gigantische technische Ineffizienz.
+</Paragraph>
+<Paragraph>Ich investiere lieber Zeit in präzises Handwerk.</Paragraph>
+<Paragraph>
+  Ein maßgeschneidertes System verbraucht nur einen Bruchteil der Ressourcen
+  eines WordPress-Monolithen.
+</Paragraph>
+<Paragraph>
+  Das ist <Marker>Nachhaltigkeit durch technologische Brillanz</Marker>.
+</Paragraph>
+
+<H2>Meine Hebel für eine nachhaltige Infrastruktur</H2>
+<Paragraph>Grüne IT beginnt bei der Wahl der Waffen.</Paragraph>
+<Paragraph>
+  Hier sind drei Wege, wie ich Ihren digitalen Fußabdruck minimiere:
+</Paragraph>
+
+<IconList>
+  <IconListItem check>
+    <strong>Static-First Architektur:</strong> Wir berechnen Seiten nicht
+    bei jedem Aufruf neu. Einmal generiert, tausende Male effizient
+    ausgeliefert.
+  </IconListItem>
+  <IconListItem check>
+    <strong>Intelligentes Asset-Management:</strong> Keine unnötigen Fonts
+    oder Tracking-Skripte. Wir senden nur das absolute Minimum an Daten an
+    den Browser.
+  </IconListItem>
+  <IconListItem check>
+    <strong>Grünes Server-Partnering:</strong> Ich wähle Hostinganbieter,
+    die zu 100 % mit erneuerbaren Energien arbeiten.{" "}
+    <Marker>Nachhaltigkeit über den gesamten Stack.</Marker>
+  </IconListItem>
+</IconList>
+
+<div className="my-12">
+  <Mermaid id="energy-consumption-pie" title="Website Energie-Verbrauch Breakdown" showShare={true}>
+pie
+    "Server Computing" : 40
+    "Data Transfer" : 30
+    "Client Rendering" : 20
+    "Asset Storage" : 10
+</Mermaid>
+  <div className="text-center text-xs text-slate-400 mt-4 italic">
+    Wo Ihre Website Energie verbraucht: Optimierungspotenzial in jedem Bereich.
+  </div>
+</div>
+
+<div className="my-12">
+  <ComparisonRow
+    description="Der Impact Ihres technologischen Fußabdrucks"
+    negativeLabel="Standard Legacy-Website"
+    negativeText="Hohe Serverlast, überladene Scripte, unnötiger CO2-Ausstoß"
+    positiveLabel="Eco-Performance Architecture"
+    positiveText="Minimale CPU-Last, schlanke Datenübertragung, 100% Green Hosting"
+  />
+</div>
+
+<H2>Wirtschaftliche Vorteile von Green IT</H2>
+<Paragraph>Effizienz zahlt sich aus.</Paragraph>
+<Paragraph>
+  Weniger Datentransfer und geringere Serverlast bedeuten niedrigere
+  laufende Kosten.
+</Paragraph>
+<Paragraph>
+  Gleichzeitig belohnt Google schnelle, schlanke Seiten mit besseren
+  Rankings.
+</Paragraph>
+<Paragraph>
+  Nachhaltigkeit ist also kein Verzicht, sondern ein{" "}
+  <Marker>Wettbewerbsvorteil</Marker>.
+</Paragraph>
+<Paragraph>
+  Positionieren Sie Ihr Unternehmen als Vorreiter einer neuen, bewussten
+  digitalen Ära.
+</Paragraph>
+
+<H2>Wann macht Green IT für Sie Sinn?</H2>
+<Paragraph>
+  Ich baue für Marken, die <Marker>Werte über kurzfristige Trends</Marker>{" "}
+  stellen.
+</Paragraph>
+<Paragraph>
+  Wenn Sie Ihre CSR-Ziele auch digital ernst nehmen, bin ich Ihr Architekt.
+</Paragraph>
+<Paragraph>
+  Schaffen wir Systeme, die auch für die nächste Generation noch vorbildlich
+  sind.
+</Paragraph>
+
+<H2>Fazit: Weniger ist mehr Zukunft</H2>
+<Paragraph>Gutes Design ist immer auch sparsames Design.</Paragraph>
+<Paragraph>
+  Lassen wir gemeinsam Ihren digitalen Ballast abwerfen und stattdessen in
+  echte Effizienz investieren.
+</Paragraph>
+<Paragraph>
+  <Marker>Purer Output bei minimalem Input.</Marker> Das ist das Ziel meines
+  Boutique-Ansatzes.
+</Paragraph>
+<Paragraph>Für Ihr Business und unseren Planeten.</Paragraph>