From bedfe597ab3dbeac6739369bf470b38c266e1cb0 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Tue, 21 Apr 2026 13:39:57 +0200
Subject: [PATCH] style: update typography and enhance OrganisationsBlock
 layout

- Changed comment in app.css to reflect German terminology for quotes.
- Added Button component to OrganisationsBlock for improved call-to-action presentation.
- Adjusted button styling and layout in OrganisationsBlock for better responsiveness and visual consistency.
---
 src/app.css                                       |  2 +-
 .../components/blocks/OrganisationsBlock.svelte   | 15 +++++++++++----
 src/lib/ui/Button.svelte                          |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app.css b/src/app.css
index c277fcf..8c619be 100644
--- a/src/app.css
+++ b/src/app.css
@@ -97,7 +97,7 @@
 }
 
 :root {
-  /* Typography – Inter (primary), Lora (quotes) */
+  /* Typography – Inter (primary), Lora (Zitate) */
   --font-body: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-secondary: "Lora Variable", Lora, Georgia, "Times New Roman", serif;
 
diff --git a/src/lib/components/blocks/OrganisationsBlock.svelte b/src/lib/components/blocks/OrganisationsBlock.svelte
index fe6f407..c43bd65 100644
--- a/src/lib/components/blocks/OrganisationsBlock.svelte
+++ b/src/lib/components/blocks/OrganisationsBlock.svelte
@@ -8,6 +8,7 @@
   import Card from "$lib/components/Card.svelte";
   import Badge from "$lib/components/Badge.svelte";
   import RustyImage from "$lib/components/RustyImage.svelte";
+  import Button from "$lib/ui/Button.svelte";
 
   marked.setOptions({ gfm: true });
 
@@ -112,23 +113,29 @@
     href={addOrganisationCtaLink?.url}
     target={addOrganisationCtaLink?.newTab ? "_blank" : undefined}
     rel={addOrganisationCtaLink?.newTab ? "noopener noreferrer" : undefined}
-    class="h-full"
+    class="h-full w-full max-w-full md:max-w-md"
   >
     {#if block.addOrganisationTitle}
-      <h5 class="text-sm font-semibold text-wald-800 leading-snug">{block.addOrganisationTitle}</h5>
+      <h5 class="text-xl font-semibold text-wald-800 leading-snug">{block.addOrganisationTitle}</h5>
     {/if}
     {#if ctaHtml}
       <div class="markdown text-xs text-wald-700">{@html ctaHtml}</div>
     {/if}
     {#if addOrganisationCtaLink}
-      <p class="mb-0 mt-1 text-xs font-medium text-wald-800">{addOrganisationCtaLink.linkName}</p>
+      <div class="self-start">
+        <Button variant="primary" size="sm">
+          {addOrganisationCtaLink.linkName}
+        </Button>
+      </div>
     {/if}
   </Card>
 {/snippet}
 
 <div class={layoutClasses} data-block-type="organisations" data-block-slug={block._slug}>
   {#if block.headline}
-    <h3 class={compact ? "mb-2 text-lg font-semibold text-stein-900" : "mb-4"}>{block.headline}</h3>
+    <h3
+      class={compact ? "mb-2 text-lg font-semibold text-stein-900" : "mb-4"}
+    >{block.headline}</h3>
   {/if}
 
   {#if carousel}
diff --git a/src/lib/ui/Button.svelte b/src/lib/ui/Button.svelte
index f47a4f5..483d1d5 100644
--- a/src/lib/ui/Button.svelte
+++ b/src/lib/ui/Button.svelte
@@ -13,7 +13,7 @@
   } = $props();
 
   const base =
-    'inline-flex items-center justify-center gap-2 rounded-lg font-semibold transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40';
+    'inline-flex items-center justify-center gap-2 rounded-xs font-semibold transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-wald-300 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40';
 
   const sizeClasses = $derived(
     { sm: 'h-9 px-4 py-2 text-sm', md: 'h-12 min-w-[120px] px-6 py-3 text-base', large: 'h-14 px-8 py-4 text-lg' }[