refactor: einheitliche .chip-Klasse für Filter-Chips, .btn-outline.btn-sm für Adressbuch-Actions

- 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

@@ -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. */

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>

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 ===
+                    class="chip {activeTag === tag
-                    tag
                         ? 'bg-himmel-700 text-himmel-50 border-himmel-700'
                         : 'border-stein-300 text-stein-700 hover:bg-stein-100'}"
                     aria-pressed={activeTag === tag}