From 52929122f53b315a0f4c421ff2065543eac08705 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Fri, 26 Jun 2026 12:20:24 +0200
Subject: [PATCH] fix(ui): roter NEU-Badge, separate Nav-Pills,
 Footer-Headlines + Spalten
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AnnouncementBanner: führendes **bold** rendert als roter Pill-Badge
- Header: Kalender/Adressbuch/Suche je eigene Pill statt geteiltem Container
- LinkListBlock: uppercase raus, >4 Links → 4er-Spalten ab sm

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/lib/components/AnnouncementBanner.svelte  | 20 ++++++++++++++++++-
 src/lib/components/Header.svelte              |  8 +++-----
 .../components/blocks/LinkListBlock.svelte    | 10 ++++++++--
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/AnnouncementBanner.svelte b/src/lib/components/AnnouncementBanner.svelte
index ac60f4f..336df16 100644
--- a/src/lib/components/AnnouncementBanner.svelte
+++ b/src/lib/components/AnnouncementBanner.svelte
@@ -10,7 +10,7 @@
 {#if banner?.text}
   <div class="w-full bg-wald-600 text-white print:hidden" role="note" style="font-size: 0.7rem;">
     <div class="container-custom flex items-center gap-3 py-2 md:justify-center md:text-center">
-      <span>{@html textHtml}</span>
+      <span class="banner-text">{@html textHtml}</span>
       {#if banner.link}
         <a
           href={banner.link}
@@ -22,3 +22,21 @@
     </div>
   </div>
 {/if}
+
+<style>
+  /* Leading **bold** in the banner text renders as a red "NEU"-style badge. */
+  .banner-text :global(strong:first-child) {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 0.3em;
+    padding: 0.1em 0.5em;
+    border-radius: 9999px;
+    background: var(--color-fire-600);
+    color: #fff;
+    font-size: 0.85em;
+    font-weight: 700;
+    line-height: 1.2;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+</style>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
index 7cce8fc..ce9b987 100644
--- a/src/lib/components/Header.svelte
+++ b/src/lib/components/Header.svelte
@@ -193,9 +193,7 @@
                     </a>
                 {/if}
             {/each}
-            <div
-                class="ml-2 flex items-center gap-0.5 rounded-full border border-wald-700/15 bg-wald-700/8 px-2 py-1"
-            >
+            <div class="ml-2 flex items-center gap-1.5">
                 {#each socialLinks as social}
                     {@const isInternal = social.href.startsWith("/")}
                     {@const sActive = isInternal && isActiveLink(social.href, $page.url.pathname)}
@@ -203,7 +201,7 @@
                         href={social.href}
                         target={isInternal ? undefined : "_blank"}
                         rel={isInternal ? undefined : "noopener noreferrer"}
-                        class="px-1.5 py-0.5 rounded-full transition-opacity hover:opacity-70 inline-flex items-center gap-1.5 {sActive ? 'font-bold' : ''}"
+                        class="rounded-full border border-wald-700/15 bg-wald-700/8 px-2.5 py-1 transition-opacity hover:opacity-70 inline-flex items-center gap-1.5 {sActive ? 'font-bold' : ''}"
                         aria-current={sActive ? "page" : undefined}
                         aria-label={social.label || t(T.header_social_aria)}
                         title={social.label || t(T.header_social_aria)}
@@ -216,7 +214,7 @@
                 {/each}
                 <button
                     type="button"
-                    class="px-1.5 py-0.5 rounded-full transition-opacity hover:opacity-70 inline-flex items-center justify-center"
+                    class="rounded-full border border-wald-700/15 bg-wald-700/8 px-2.5 py-1 transition-opacity hover:opacity-70 inline-flex items-center justify-center"
                     aria-label={searchOpen
                         ? t(T.header_search_close)
                         : t(T.header_search_open)}
diff --git a/src/lib/components/blocks/LinkListBlock.svelte b/src/lib/components/blocks/LinkListBlock.svelte
index c83f476..cd60738 100644
--- a/src/lib/components/blocks/LinkListBlock.svelte
+++ b/src/lib/components/blocks/LinkListBlock.svelte
@@ -30,9 +30,15 @@
 
 <div class="link-list {layoutClasses}" data-block="LinkList" data-block-type="link_list" data-block-slug={block._slug}>
   {#if block.headline}
-    <h3 class="mb-3 text-sm font-semibold tracking-wide uppercase">{block.headline}</h3>
+    <h3 class="mb-3 text-sm font-semibold">{block.headline}</h3>
   {/if}
-  <ul class={iconOnlyAll ? "flex flex-wrap gap-3" : "flex flex-col gap-1.5"}>
+  <ul
+    class={iconOnlyAll
+      ? "flex flex-wrap gap-3"
+      : links.length > 4
+        ? "grid grid-flow-row gap-x-8 gap-y-1.5 sm:grid-flow-col sm:grid-rows-4"
+        : "flex flex-col gap-1.5"}
+  >
     {#each links as link}
       {@const hasIcon = !!link.icon}
       {@const showText = link.showText !== false}