From 4b87ad3c8483ae85851ad936aaf4ced7e312afe7 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Mon, 13 Jul 2026 10:28:52 +0200
Subject: [PATCH] =?UTF-8?q?feat(top-banner):=20editorialer=20Hero-Scrim=20?=
 =?UTF-8?q?statt=20Farbk=C3=A4sten?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 41 ++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/TopBanner.svelte b/src/lib/components/TopBanner.svelte
index c27b005..7185d7e 100644
--- a/src/lib/components/TopBanner.svelte
+++ b/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 ">
-            <div class="container-custom mx-auto px-6 relative">
-              {#if headlineHtml}
-                <h1 class="bg-fire-400/70 inline-block py-1 px-2 -ml-2 backdrop-blur">{@html headlineHtml}</h1>
-              {/if}
-              <div></div>
-              {#if subheadlineHtml}
-                <h2 class="bg-white/50 inline-block py-1 px-2 -ml-2 backdrop-blur font-light! text-xl!">{@html subheadlineHtml}</h2>
-              {/if}
+          <!-- Verlaufs-Scrim: links dunkel -> rechts transparent, hält Text lesbar ohne das Foto zuzukleistern -->
+          <div
+            class="absolute inset-0 bg-gradient-to-r from-black/80 via-black/55 to-transparent"
+            aria-hidden="true"
+          ></div>
+          <div class="absolute inset-0 flex items-center justify-start">
+            <div class="container-custom mx-auto px-6">
+              <div class="max-w-xl text-white">
+                {#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}