Blog: drop hero photo, plain text header like /shop's ShopHeader

Same breadcrumb/title/description block as every other page, no more
bespoke photo-bleed layout. Featured post card goes back to sitting
flush below the header (no more negative-margin overlap trick, which
only made sense with the photo's bottom edge to overlap).

app/blog/page.tsx

@@ -57,46 +57,27 @@ export default async function BlogOverviewPage({
   return (
     <>
       <main className="flex flex-col flex-1 bg-bg-base">
-        {/* Header — copy left, photo bleeds to the viewport edge on the
-            right with a left-edge fade into bg-base, matching Figma's
-            hero-fade-left/hero-fade-bottom overlays (node 4577:330). */}
-        <Reveal className="relative flex flex-col sm:flex-row items-center w-full min-h-[20rem] sm:min-h-[27.5rem] border-b border-border overflow-hidden">
-          <div className="relative z-10 flex flex-col gap-4 items-start px-[var(--layout-padding-x)] py-10 sm:py-0 w-full sm:w-auto sm:max-w-[26rem]">
-            {/* Breadcrumb + text-h-feature heading — same treatment as
-                /shop's ShopHeader.tsx and every legal page, this hero was
-                the one page missing both (its own bespoke photo-bleed
-                layout predates that convention being established
-                elsewhere). */}
-            <p className="flex items-center gap-2 text-body-sm text-text-muted">
-              <Link href="/" className="hover:text-brand transition-colors">Startseite</Link>
-              <span>›</span>
-              <span className="text-text-primary">Blog</span>
-            </p>
-            <p
-              className="font-semibold text-display text-text-primary"
-              style={{ fontFamily: "var(--font-lora)" }}
-            >
-              Blog
-            </p>
-            <p className="text-body text-text-muted">
-              Gedanken, Methoden und Impulse für einen leichteren und klareren Alltag.
-            </p>
-            {/* Moved into the hero's own text column (was a separate full-
-                width bar below the entire hero, including the photo) — on
-                mobile especially (text stacks above the photo here), that
-                pushed the filters below a full extra screen's worth of
-                hero image before they were even visible. Living right
-                under the description keeps them in view immediately, on
-                every width, no scrolling past the photo needed. */}
-            {allCategories.length > 1 && (
-              <BlogCategoryFilter allCategories={allCategories} activeCategories={activeCategories} />
-            )}
-          </div>
-          <div className="relative w-full sm:absolute sm:inset-y-0 sm:right-0 sm:w-[68%] h-56 sm:h-full">
-            <Image alt="" src="/hero.png" fill sizes="(min-width: 640px) 68vw, 100vw" className="object-cover object-top" />
-            <div className="hidden sm:block absolute inset-y-0 left-0 w-72 bg-gradient-to-r from-bg-base to-transparent" />
-            <div className="absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-bg-base to-transparent" />
-          </div>
+        {/* Header — plain text, same treatment as /shop's ShopHeader.tsx
+            and every legal page (the bespoke photo-bleed hero this used to
+            be predated that convention being established elsewhere). */}
+        <Reveal className="flex flex-col gap-4 items-start pb-6 pt-10 px-[var(--layout-padding-x)] w-full border-b border-border">
+          <p className="flex items-center gap-2 text-body-sm text-text-muted">
+            <Link href="/" className="hover:text-brand transition-colors">Startseite</Link>
+            <span>›</span>
+            <span className="text-text-primary">Blog</span>
+          </p>
+          <p
+            className="font-semibold text-display text-text-primary"
+            style={{ fontFamily: "var(--font-lora)" }}
+          >
+            Blog
+          </p>
+          <p className="text-body text-text-muted">
+            Gedanken, Methoden und Impulse für einen leichteren und klareren Alltag.
+          </p>
+          {allCategories.length > 1 && (
+            <BlogCategoryFilter allCategories={allCategories} activeCategories={activeCategories} />
+          )}
         </Reveal>
 
         {posts.length === 0 && (
@@ -106,14 +87,11 @@ export default async function BlogOverviewPage({
         )}
 
         {featured && (
-          // -mt-8, not pt-10 — pulls the card up to slightly overlap the
-          // hero section's bottom edge instead of sitting flush below it.
-          // relative z-10 keeps it stacked above the hero's own photo.
           // key'd for the same reason as RevealGroup below — guards against
           // the same stuck-at-opacity-0 failure mode if a future filter
           // combination ever swaps in a *different* featured post without
           // an intervening moment where `featured` was falsy.
-          <Reveal key={featured.id} delay={0.1} className="relative z-10 w-full px-[var(--layout-padding-x)] -mt-8 pb-4">
+          <Reveal key={featured.id} delay={0.1} className="w-full px-[var(--layout-padding-x)] pt-8 pb-4">
             <Link
               href={`/blog/${featured.slug}`}
               className="group grid grid-cols-1 sm:grid-cols-2 w-full max-w-[80rem] mx-auto rounded-md overflow-hidden bg-bg-muted transition-transform duration-300 hover:-translate-y-1"