feat: add class-variance-authority for card styling and enhance color palettes

- Introduced `class-variance-authority` to manage card component styles, allowing for flexible variant and layout options.
- Added a new color palette for "Fire" to the CSS for improved theming.
- Updated `Card` and `PostCard` components to utilize the new styling system, enhancing visual consistency and responsiveness.
- Refined layout and styling in various components for better user experience.

src/lib/components/Card.svelte

@@ -1,11 +1,68 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
+  import { cva, type VariantProps } from "class-variance-authority";
+
+  /**
+   * tile + stack/inline: Org-Karten (Padding im Shell).
+   * tile + post: PostCard – Shell ohne Padding, Medien bündig, Text mit p-4 im Kind.
+   * callout: CTA; layout wird ignoriert.
+   */
+  const cardSurface = cva("relative min-w-0 overflow-hidden", {
+    variants: {
+      variant: {
+        tile: "",
+        callout:
+          "flex flex-col gap-1.5 border border-dashed border-wald-300 bg-wald-50 p-3",
+      },
+      layout: {
+        stack: "",
+        inline: "",
+        post: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "tile",
+        layout: "stack",
+        class:
+          "flex flex-col gap-2 border border-gray-200 bg-white p-4 text-slate-950",
+      },
+      {
+        variant: "tile",
+        layout: "inline",
+        class:
+          "flex flex-row items-start gap-3 border border-gray-200 bg-white p-4 text-slate-950",
+      },
+      {
+        variant: "tile",
+        layout: "post",
+        class:
+          "flex flex-col gap-0 border border-gray-200 bg-white p-0 text-slate-950",
+      },
+    ],
+    defaultVariants: { variant: "tile", layout: "stack" },
+  });
+
+  const cardAsLink = cva("", {
+    variants: {
+      variant: {
+        callout: "cursor-pointer transition-all no-underline text-inherit",
+        tile: "transition-all no-underline hover:border-gray-300",
+      },
+    },
+    defaultVariants: { variant: "tile" },
+  });
+
+  type SurfaceProps = VariantProps<typeof cardSurface>;
+  type CardLinkVariant = NonNullable<SurfaceProps["variant"]>;
 
   let {
     children,
     href,
     target,
     rel,
+    variant = "tile",
+    layout = "stack",
     class: className = "",
   }: {
     children?: Snippet;
@@ -13,20 +70,20 @@
     target?: string;
     rel?: string;
     class?: string;
-  } = $props();
+  } & SurfaceProps = $props();
 
-  const base = "relative flex flex-col gap-2 rounded-lg border border-stein-200 bg-white p-4 shadow-sm min-w-0 overflow-hidden";
-  const interactive = $derived(
-    href ? "hover:border-stein-300 hover:shadow-md transition-all no-underline text-inherit" : "",
+  const surface = $derived(cardSurface({ variant, layout }));
+  const linkSurface = $derived(
+    href ? cardAsLink({ variant: (variant ?? "tile") as CardLinkVariant }) : "",
   );
 </script>
 
 {#if href}
-  <a {href} {target} {rel} class="{base} {interactive} {className}">
+  <a {href} {target} {rel} class="{surface} {linkSurface} {className}">
     {@render children?.()}
   </a>
 {:else}
-  <div class="{base} {className}">
+  <div class="{surface} {className}">
     {@render children?.()}
   </div>
 {/if}