feat(blog): complete blog experience overhaul

- Implemented minimalist vertical teaser list (MediumCard)
- Consolidated and refined 20 engineering-focused blog posts
- Rebuilt blog overview with narrow, centered layout (max-w-3xl)
- Introduced BlogCommandBar for integrated search and tag filtering
- Consolidated tags to 6-8 core technical categories
- Redesigned blog detail pages with industrial 'Technical Frame' layout
- Added SectionHeader component for consistent industrial titling
- Optimized vertical space by removing redundant PageHeaders

apps/web/src/components/blog/posts/Group3/GreenIT.tsx

@@ -0,0 +1,161 @@
+import React from "react";
+import { H2, H3 } from "../../../ArticleHeading";
+import { Paragraph, LeadParagraph } from "../../../ArticleParagraph";
+import { IconList, IconListItem } from "../../../IconList";
+import { Mermaid } from "../../../Mermaid";
+import { Marker } from "../../../Marker";
+import { ComparisonRow } from "../../../Landing/ComparisonRow";
+
+export const GreenIT: React.FC = () => (
+  <>
+    <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
+        graph={`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`}
+      />
+      <p 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.
+      </p>
+    </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">
+      <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>
+  </>
+);