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/Group2/CookieFreeDesign.tsx

@@ -0,0 +1,176 @@
+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 CookieFreeDesign: React.FC = () => (
+  <>
+    <LeadParagraph>
+      Ich halte Cookie-Banner für eine der größten Design-Sünden und
+      Vertrauenskiller des modernen Webs.
+    </LeadParagraph>
+    <LeadParagraph>
+      Sie stören den Lesefluss und suggerieren eine Pseudo-Sicherheit.
+    </LeadParagraph>
+    <LeadParagraph>
+      Vor allem signalisieren sie eines: Ein mangelhaftes technisches Konzept.
+    </LeadParagraph>
+    <LeadParagraph>
+      Ich zeige Ihnen, wie wir{" "}
+      <Marker>vollständig ohne Banner auskommen</Marker> – bei 100 %
+      DSGVO-Konformität.
+    </LeadParagraph>
+
+    <H2>Das Banner-Paradoxon: Warum wir uns das antun</H2>
+    <Paragraph>
+      Klassische Websites laden oft ungefragt Scripte von Drittanbietern – meist
+      US-Konzerne.
+    </Paragraph>
+    <Paragraph>
+      Diese Tracker setzen Cookies, um Nutzer über verschiedene Seiten hinweg zu
+      verfolgen.
+    </Paragraph>
+    <Paragraph>
+      Das Ergebnis ist das tägliche Banner-Chaos, das den Inhalt überdeckt.
+    </Paragraph>
+    <Paragraph>
+      Viele Besucher klicken frustriert auf "Alle akzeptieren" oder verlassen
+      die Seite sofort wieder.
+    </Paragraph>
+    <Paragraph>
+      Ich verfolge eine radikal andere Philosophie:{" "}
+      <Marker>
+        Wenn wir keine Daten abfließen lassen, brauchen wir auch keine
+        Erlaubnis.
+      </Marker>
+    </Paragraph>
+    <Paragraph>
+      Es ist eine Frage der technischen Souveränität und des digitalen Anstands.
+    </Paragraph>
+
+    <div className="my-12">
+      <Mermaid
+        graph={`graph TD
+          User["Nutzer besucht Website"] --> Logic["Mintel Privacy Engine"]
+          Logic --> Assets["Lokale Assets (Fonts/Scripts)"]
+          Logic --> Analytics["Aggregierte, anonyme Metriken"]
+          Assets --> NoBanner["Kein Cookie-Banner nötig"]
+          Analytics --> NoBanner
+          NoBanner --> Experience["Sofortige Experience & Vertrauen"]
+          style NoBanner fill:#4ade80,stroke:#333
+          style Experience fill:#4ade80,stroke:#333`}
+      />
+      <p className="text-center text-xs text-slate-400 mt-4 italic">
+        Privacy by Design: Wenn die Architektur den Schutz bereits garantiert,
+        entfallen die rechtlichen Krücken.
+      </p>
+    </div>
+
+    <H3>Die unsichtbare Transaktion des Vertrauens</H3>
+    <Paragraph>
+      Jedes Mal, wenn ein Nutzer Ihre Seite ohne Banner betreten kann, findet
+      eine unsichtbare Transaktion statt: Vertrauensaufbau.
+    </Paragraph>
+    <Paragraph>
+      Sie signalisieren Ihrem Besucher: "Ich brauche deine persönlichen Daten
+      nicht, um dich zu überzeugen."
+    </Paragraph>
+    <Paragraph>
+      Privatsphäre ist heute ein <Marker>High-End Feature</Marker>.
+    </Paragraph>
+    <Paragraph>
+      Ich baue Systeme, die diesen Respekt technisch erzwingen und so die
+      Markenbindung stärken.
+    </Paragraph>
+    <Paragraph>
+      Wir verzichten konsequent auf invasive Tracker und gewinnen dafür loyale
+      Nutzer.
+    </Paragraph>
+
+    <H2>Mein Weg zu 100 % technischer Souveränität</H2>
+    <Paragraph>
+      Privacy-first bedeutet für mich nicht Verzicht, sondern intelligenteres
+      Engineering.
+    </Paragraph>
+    <Paragraph>
+      Wir messen Ihren Erfolg – aber wir brauchen keine personenbezogenen
+      Profile.
+    </Paragraph>
+
+    <IconList>
+      <IconListItem check>
+        <strong>Full Local Hosting:</strong> Google Fonts und sämtliche Scripte
+        liegen direkt auf Ihrer Infrastruktur. Kein Datentransfer zu US-Servern.
+      </IconListItem>
+      <IconListItem check>
+        <strong>Ethische Telemetrie:</strong> Analysetools, die Nutzerwege
+        messen, ohne Cookies zu setzen.{" "}
+        <Marker>Volle Transparenz, ohne Verfolgung.</Marker>
+      </IconListItem>
+      <IconListItem check>
+        <strong>Zero-Tracking Default:</strong> Mein Framework ist so ausgelegt,
+        dass "Consent-Einforderung" technisch gar nicht notwendig wird.
+      </IconListItem>
+    </IconList>
+
+    <div className="my-12">
+      <ComparisonRow
+        description="Nutzererfahrung im harten Fakten-Check"
+        negativeLabel="Tracking-fokussierte Seite"
+        negativeText="Banner-Dschungel, rechtliche Grauzonen, Performance-Verlust durch Tracker"
+        positiveLabel="Cookie-Free Architecture"
+        positiveText="Direkter Zugang zum Content, 100 % DSGVO-Safe, Premium-Look & Feel"
+      />
+    </div>
+
+    <H2>Der ökonomische Vorteil von 'Banner-Freiheit'</H2>
+    <Paragraph>
+      Consent-Management-Tools verschlechtern oft selbst die Ladezeit Ihrer
+      Website.
+    </Paragraph>
+    <Paragraph>
+      Sie laden schwere JavaScript-Dateien, noch bevor Ihre Botschaft erscheint.
+    </Paragraph>
+    <Paragraph>
+      Indem wir diese Tools eliminieren, verbessern wir die UX und Ihre
+      PageSpeed-Werte.
+    </Paragraph>
+    <Paragraph>
+      Zudem vermeiden Sie Abo-Kosten und das Risiko von Abmahnungen durch
+      falsche Skripte.
+    </Paragraph>
+    <Paragraph>
+      Ein <Marker>sauberes System ist wartungsarm und rechtssicher</Marker>.
+    </Paragraph>
+
+    <H2>Wann macht dieser radikale Ansatz für Sie Sinn?</H2>
+    <Paragraph>
+      Ich verstehe mich als Partner für Marken, die Haltung zeigen.
+    </Paragraph>
+    <Paragraph>
+      Wenn Datenschutz für Sie ein echtes Qualitätsmerkmal ist, ist dies mein
+      absoluter Standard.
+    </Paragraph>
+    <Paragraph>
+      Ich arbeite für Unternehmen, die{" "}
+      <Marker>durch Überzeugung und Relevanz</Marker> verkaufen, nicht durch
+      Verfolgung.
+    </Paragraph>
+
+    <H2>Fazit: Befreien Sie Ihre Inhalte</H2>
+    <Paragraph>
+      Eine Website ohne Banner wirkt sofort aufgeräumter, ehrlicher und
+      wertiger.
+    </Paragraph>
+    <Paragraph>
+      Es ist ein klares Statement für digitale Professionalität und Respekt.
+    </Paragraph>
+    <Paragraph>
+      Ich baue Ihnen die Brücke in eine{" "}
+      <Marker>bannerfreie, souveräne Zukunft</Marker>.
+    </Paragraph>
+  </>
+);