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/Group1/PageSpeedFails.tsx

@@ -0,0 +1,182 @@
+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 PageSpeedFails: React.FC = () => (
+  <>
+    <LeadParagraph>
+      Unternehmen investieren oft Unsummen in glänzende Oberflächen, während das
+      technische Fundament einer digitalen Ruine gleicht.
+    </LeadParagraph>
+    <LeadParagraph>
+      Wenn Ihre Website bei Google PageSpeed scheitert, verlieren Sie Kunden –{" "}
+      <Marker>bevor diese Ihre Botschaft überhaupt wahrnehmen können</Marker>.
+    </LeadParagraph>
+    <LeadParagraph>
+      In meiner Arbeit als Digital Architect ist die Geschwindigkeit der
+      architektonische Gradmesser für Professionalität.
+    </LeadParagraph>
+
+    <H2>Der unsichtbare Umsatz-Verschleiß</H2>
+    <Paragraph>
+      Stellen Sie sich vor, Sie eröffnen ein Luxus-Geschäft in der besten Lage,
+      aber die Eingangstür klemmt massiv.
+    </Paragraph>
+    <Paragraph>
+      Kunden müssen 10 Sekunden lang drücken, um einzutreten. Genau das passiert
+      täglich auf tausenden Websites.
+    </Paragraph>
+    <Paragraph>
+      Millisekunden sind im digitalen Zeitalter die härteste Währung.
+    </Paragraph>
+    <Paragraph>
+      Eine Verzögerung von nur einer Sekunde kann die{" "}
+      <Marker>Conversion-Rate um bis zu 20 % senken</Marker>. Das ist kein
+      technisches Detail, sondern ein unternehmerisches Risiko.
+    </Paragraph>
+    <Paragraph>
+      Ich betrachte Performance nicht als IT-Kennzahl, sondern als ökonomischen
+      Hebel.
+    </Paragraph>
+    <Paragraph>
+      Google bewertet Websites heute primär nach den "Core Web Vitals". Das sind
+      präzise Messgrößen für die Frustrationstoleranz Ihrer Nutzer.
+    </Paragraph>
+    <Paragraph>
+      Wer hier rote Zahlen schreibt, wird vom Algorithmus unsichtbar gemacht –
+      eine digitale Strafe für technische Nachlässigkeit.
+    </Paragraph>
+
+    <div className="my-12">
+      <ComparisonRow
+        description="Der Impact von Geschwindigkeit auf Ihre Bilanz"
+        negativeLabel="Langsames Legacy-System"
+        negativeText="Hohe Absprungraten, sinkendes Markenvertrauen, teure Akquise ohne Ertrag"
+        positiveLabel="Mintel High-Performance"
+        positiveText="Maximale Conversion, SEO-Vorsprung ab Tag 1, begeisterte Nutzer"
+      />
+    </div>
+
+    <H2>Warum klassische Lösungen scheitern</H2>
+    <Paragraph>
+      Die Ursache liegt oft in der Verwendung von "All-in-One"-Lösungen wie
+      WordPress oder überladenen Baukästen.
+    </Paragraph>
+    <Paragraph>
+      Diese Systeme versuchen, alles für jeden zu sein. Das Ergebnis ist ein
+      gigantischer "Ballast an Code".
+    </Paragraph>
+    <Paragraph>
+      Jedes Byte muss durch das Nadelöhr der Internetverbindung gepresst werden,
+      bevor das erste Bild erscheint.
+    </Paragraph>
+    <Paragraph>
+      In einer mobilen Welt mit oft instabilen Verbindungen ist das ein{" "}
+      <Marker>architektonisches Todesurteil</Marker>. Wer hier spart, zahlt
+      später doppelt durch verlorene Kunden.
+    </Paragraph>
+
+    <div className="my-12">
+      <Mermaid
+        graph={`graph TD
+          A["Anfrage des Browsers"] --> B["Server muss 'nachdenken' (PHP/DB)"]
+          B --> C["Hunderte Datenbank-Abfragen"]
+          C --> D["HTML wird mühsam live konstruiert"]
+          D --> E["Veraltetes Asset-Management lädt alles"]
+          E --> F["Render-Blocking Code (Browser stoppt)"]
+          F --> G["Seite endlich sichtbar (nach 3-5 Sek)"]
+          style B fill:#fca5a5,stroke:#333
+          style F fill:#fca5a5,stroke:#333
+          style G fill:#fca5a5,stroke:#333`}
+      />
+      <p className="text-center text-xs text-slate-400 mt-4 italic">
+        Der Flaschenhals der Standard-Systeme: Rechenzeit am Server raubt Ihnen
+        wertvolle Kundenzeit.
+      </p>
+    </div>
+
+    <H2>Meine Architektur der Geschwindigkeit</H2>
+    <Paragraph>
+      Ich verfolge einen radikal anderen Ansatz. Statt die Seite erst mühsam
+      zusammenzubauen, wenn der Kunde sie anfragt, liefere ich fertig optimierte
+      "digitale Objekte" aus.
+    </Paragraph>
+    <Paragraph>
+      Mein "Static-First" Framework sorgt dafür, dass die Antwortzeit Ihres
+      Servers nahezu bei Null liegt.
+    </Paragraph>
+    <Paragraph>
+      Völlig egal, ob gerade 10 oder 10.000 Menschen gleichzeitig auf Ihre Seite
+      zugreifen.
+    </Paragraph>
+    <Paragraph>
+      Das ist <Marker>Skalierbarkeit durch Design</Marker>, nicht durch bloße
+      Server-Power.
+    </Paragraph>
+
+    <H3>Die drei Säulen meiner Umsetzung</H3>
+    <IconList>
+      <IconListItem check>
+        <strong>Zero-Computation am Edge:</strong> Durch Static Site Generation
+        (SSG) liegen alle Inhalte fertig auf globalen CDNs. Keine Wartezeit.
+      </IconListItem>
+      <IconListItem check>
+        <strong>Präzises Asset-Engineering:</strong> Ich nutze Tree-Shaking. Ihr
+        Kunde lädt exakt nur den Code, den er wirklich benötigt.
+      </IconListItem>
+      <IconListItem check>
+        <strong>Next-Gen Media-Handling:</strong> Bilder werden automatisch in
+        Formaten wie AVIF ausgeliefert. Qualität bleibt, Dateigröße schmilzt.
+      </IconListItem>
+    </IconList>
+
+    <H2>Der wirtschaftliche Case</H2>
+    <Paragraph>
+      Baukästen wirken "auf den ersten Blick" günstiger. Doch das ist eine
+      riskante Milchmädchenrechnung.
+    </Paragraph>
+    <Paragraph>
+      Wenn Sie monatlich 5.000 € in Marketing investieren, aber 30 % Ihrer Leads
+      durch Ladezeiten verlieren, verbrennen Sie jedes Jahr 18.000 €.
+    </Paragraph>
+    <Paragraph>
+      Mein System ist kein Kostenfaktor, sondern ein{" "}
+      <Marker>ROI-Beschleuniger</Marker>.
+    </Paragraph>
+    <Paragraph>
+      Wir senken die Kosten pro Lead, indem wir die Reibungsverluste minimieren.
+      Ein technisch überlegenes System ist immer die rentablere Wahl.
+    </Paragraph>
+
+    <H2>Wann meine Architektur für Sie Sinn macht</H2>
+    <Paragraph>
+      Ich bin Partner für Unternehmen, die über die "digitale Visitenkarte"
+      hinausgewachsen sind.
+    </Paragraph>
+    <Paragraph>
+      Ist Ihre Website ein geschäftskritisches Werkzeug für die Lead-Gen? Dann
+      ist mein Ansatz alternativlos.
+    </Paragraph>
+    <Paragraph>
+      Ich steige dort ein, wo technologische{" "}
+      <Marker>Exzellenz zum entscheidenden Wettbewerbsvorteil</Marker> wird.
+    </Paragraph>
+
+    <H2>Fazit: Respekt vor der Zeit Ihrer Nutzer</H2>
+    <Paragraph>
+      Geschwindigkeit ist letztlich Ausdruck von Wertschätzung. Sie
+      signalisieren Ihrem Kunden: "Ich respektiere deine Zeit."
+    </Paragraph>
+    <Paragraph>
+      Lassen Sie uns Ihre Website in eine hochpräzise Wachstums-Maschine
+      verwandeln.
+    </Paragraph>
+    <Paragraph>
+      <Marker>Qualität zahlt sich aus</Marker> – in Millisekunden und in Euro.
+    </Paragraph>
+  </>
+);