From df1895bb91029a220bcfcbbeeb6ee1c707ca5734 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Thu, 4 Jun 2026 10:36:26 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20einheitliche=20.chip-Klasse=20f?=
 =?UTF-8?q?=C3=BCr=20Filter-Chips,=20.btn-outline.btn-sm=20f=C3=BCr=20Adre?=
 =?UTF-8?q?ssbuch-Actions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- app.css: neue .chip Utility (rounded-xs, border, text-[11px])
- AdressbuchBlock: Org-/Letter-Filter auf .chip, Action-Buttons auf .btn-outline.btn-sm
- CalendarBlock: Tag-Filter auf .chip

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app.css                                      |  6 ++++++
 src/lib/components/blocks/AdressbuchBlock.svelte | 16 ++++++++--------
 src/lib/components/blocks/CalendarBlock.svelte   |  5 ++---
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/app.css b/src/app.css
index e148973..672c292 100644
--- a/src/app.css
+++ b/src/app.css
@@ -396,6 +396,12 @@ main ol:not(.not-prose):where(:not(.not-prose *)) li {
     @apply px-2 py-1 text-xs gap-1;
 }
 
+/* Filter-Chip — Basis für alle Filter-Chips (Kalender, Adressbuch, …).
+   Aktiv/inaktiv-Farben werden kontextuell per Klasse gesetzt. */
+.chip {
+    @apply inline-flex cursor-pointer items-center whitespace-nowrap rounded-xs border px-2 py-0.5 text-[11px] font-medium transition-colors;
+}
+
 /* Dekorativer Hintergrund mit zwei verschwommenen Verlaufs-Blobs (Wald → Erde).
    Nutzung: Container mit relativer Positionierung; Blobs sitzen in ::before/::after.
    Inhalt sollte z-Index >= 0 haben (Standard); Blobs liegen unter Stacking-Kontext. */
diff --git a/src/lib/components/blocks/AdressbuchBlock.svelte b/src/lib/components/blocks/AdressbuchBlock.svelte
index ce2f27a..d93a597 100644
--- a/src/lib/components/blocks/AdressbuchBlock.svelte
+++ b/src/lib/components/blocks/AdressbuchBlock.svelte
@@ -82,18 +82,18 @@
     <div class="flex flex-wrap gap-1">
       <button
         onclick={() => (activeOrg = null)}
-        class="rounded-full border px-2 py-px text-[0.65rem] font-medium transition-colors {activeOrg === null
+        class="chip {activeOrg === null
           ? 'border-wald-400 bg-wald-500 text-white'
-          : 'border-stein-200 bg-stein-100 text-stein-600 hover:border-wald-300 hover:text-wald-700'}"
+          : 'border-stein-300 text-stein-700 hover:bg-stein-100'}"
       >
         Alle
       </button>
       {#each allOrgs() as [slug, name]}
         <button
           onclick={() => (activeOrg = activeOrg === slug ? null : slug)}
-          class="rounded-full border px-2 py-px text-[0.65rem] font-medium transition-colors {activeOrg === slug
+          class="chip {activeOrg === slug
             ? 'border-wald-400 bg-wald-500 text-white'
-            : 'border-stein-200 bg-stein-100 text-stein-600 hover:border-wald-300 hover:text-wald-700'}"
+            : 'border-stein-300 text-stein-700 hover:bg-stein-100'}"
         >
           {name}
         </button>
@@ -106,10 +106,10 @@
         <button
           onclick={() => (activeLetter = activeLetter === letter ? null : letter)}
           disabled={!has}
-          class="w-6 rounded py-px text-center text-[0.65rem] font-medium transition-colors {activeLetter === letter
+          class="chip w-6 justify-center border-transparent {activeLetter === letter
             ? 'bg-wald-500 text-white'
             : has
-              ? 'text-stein-600 hover:bg-stein-100 hover:text-wald-700'
+              ? 'text-stein-700 hover:bg-stein-100'
               : 'cursor-default text-stein-300'}"
         >
           {letter}
@@ -151,7 +151,7 @@
                 <a
                   href="tel:{contact.phone.replace(/\s/g, '')}"
                   title={contact.phone}
-                  class="inline-flex items-center gap-1 rounded-sm border border-stein-200 bg-stein-50 px-2 py-0.5 text-[0.6rem] text-stein-600 no-underline transition-colors hover:border-wald-300 hover:bg-wald-50 hover:text-wald-700"
+                  class="btn-outline btn-sm no-underline"
                 >
                   <Icon icon="mdi:phone-outline" class="size-3.5 shrink-0" />
                   <span class="truncate">{contact.phone}</span>
@@ -161,7 +161,7 @@
                 <a
                   href="mailto:{contact.email}"
                   title={contact.email}
-                  class="inline-flex items-center gap-1 rounded-sm border border-stein-200 bg-stein-50 px-2 py-0.5 text-[0.6rem] text-stein-600 no-underline transition-colors hover:border-wald-300 hover:bg-wald-50 hover:text-wald-700"
+                  class="btn-outline btn-sm no-underline"
                 >
                   <Icon icon="mdi:email-outline" class="size-3.5 shrink-0" />
                   <span class="truncate">{contact.email}</span>
diff --git a/src/lib/components/blocks/CalendarBlock.svelte b/src/lib/components/blocks/CalendarBlock.svelte
index 6ac7f18..5019e16 100644
--- a/src/lib/components/blocks/CalendarBlock.svelte
+++ b/src/lib/components/blocks/CalendarBlock.svelte
@@ -925,7 +925,7 @@
             <button
                 type="button"
                 onclick={() => (activeTag = null)}
-                class="text-[11px] px-2 py-0.5 rounded-xs border {!activeTag
+                class="chip {!activeTag
                     ? 'bg-himmel-700 text-himmel-50 border-himmel-700'
                     : 'border-stein-300 text-stein-700 hover:bg-stein-100'}"
                 aria-pressed={!activeTag}
@@ -936,8 +936,7 @@
                 <button
                     type="button"
                     onclick={() => (activeTag = activeTag === tag ? null : tag)}
-                    class="text-[11px] px-2 py-0.5 rounded-xs border {activeTag ===
-                    tag
+                    class="chip {activeTag === tag
                         ? 'bg-himmel-700 text-himmel-50 border-himmel-700'
                         : 'border-stein-300 text-stein-700 hover:bg-stein-100'}"
                     aria-pressed={activeTag === tag}