feat(top-banner): editorialer Hero-Scrim statt Farbkästen

Titel-Overlay neu: linksseitiger dunkler Verlaufs-Scrim mit weißem
Titel + Subtitle und Wald-Eyebrow ("Windwiderstand Thüringen").
Ersetzt die beiden sich beißenden Farbkästen (fire-400/70 + white/50).
Eyebrow blendet aus, wenn er die Headline dupliziert (Home) — Content
und SEO unangetastet. Größen/Farben per `!` gegen unlayered base h1/h2.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/lib/components/TopBanner.svelte

@@ -68,6 +68,13 @@
     subheadline?.trim() ? (marked.parseInline(subheadline) as string) : "",
   );
 
+  const eyebrowLabel = "Windwiderstand Thüringen";
+  // Eyebrow überall — nur ausblenden, wenn er die Headline dupliziert (Home).
+  const showEyebrow = $derived(
+    (headline?.replace(/<[^>]*>/g, "").trim().toLowerCase() ?? "") !==
+      eyebrowLabel.toLowerCase(),
+  );
+
   const hasResponsive = $derived(
     responsive != null && responsive.fallback.trim().length > 0,
   );
@@ -125,15 +132,31 @@
           {/key}
         {/if}
         {#if hasPageTitle}
-          <div class="absolute inset-0 flex items-center justify-start ">
+          <!-- Verlaufs-Scrim: links dunkel -> rechts transparent, hält Text lesbar ohne das Foto zuzukleistern -->
-            <div class="container-custom mx-auto px-6 relative">
+          <div
-              {#if headlineHtml}
+            class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/55 to-transparent"
-                <h1 class="bg-fire-400/70 inline-block py-1 px-2 -ml-2 backdrop-blur">{@html headlineHtml}</h1>
+            aria-hidden="true"
-              {/if}
+          ></div>
-              <div></div>
+          <div class="absolute inset-0 flex items-center justify-start">
-              {#if subheadlineHtml}
+            <div class="container-custom mx-auto px-6">
-                <h2 class="bg-white/50 inline-block py-1 px-2 -ml-2 backdrop-blur font-light! text-xl!">{@html subheadlineHtml}</h2>
+              <div class="max-w-xl text-white">
-              {/if}
+                {#if showEyebrow}
+                  <span class="mb-3 inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.08em] text-wald-200">
+                    <span class="h-px w-6 bg-wald-400"></span>
+                    {eyebrowLabel}
+                  </span>
+                {/if}
+                {#if headlineHtml}
+                  <h1 class="text-4xl font-bold leading-[1.05] tracking-tight text-white! drop-shadow-sm lg:text-5xl">
+                    {@html headlineHtml}
+                  </h1>
+                {/if}
+                {#if subheadlineHtml}
+                  <h2 class="mt-4 text-xl! font-normal! leading-snug text-stein-100! lg:text-2xl!">
+                    {@html subheadlineHtml}
+                  </h2>
+                {/if}
+              </div>
             </div>
           </div>
         {/if}