From e6d603cd0c8cb7a90cd5747be07ec1f238c53e26 Mon Sep 17 00:00:00 2001
From: root <root@ubuntu-16gb-webklar-v1.0.0>
Date: Thu, 1 Oct 2026 12:10:27 +0000
Subject: [PATCH] =?UTF-8?q?Kontaktkarte:=20CTA-Button=20mit=204,5:1=20Kont?=
 =?UTF-8?q?rast=20(Wei=C3=9F=20auf=20dunklerem=20Blau)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Weiß auf #0793CF kam nur auf 3,45:1 (hell und dunkel). Der Button auf der
Kontaktkarte nutzt jetzt hsl(198 93% 35%) = 4,76:1, beim Hovern
hsl(198 93% 30%) = 6,08:1. Der Test nimmt den Button nicht mehr aus,
sondern prüft Ruhe- und Hover-Farbe aller Buttons auf den Karten.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/Contact.tsx     |  4 +++-
 src/test/sofort-paket.test.tsx | 24 ++++++++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx
index e4c78bb..ebf506d 100644
--- a/src/components/Contact.tsx
+++ b/src/components/Contact.tsx
@@ -39,9 +39,11 @@ const Contact = () => {
                   data-analytics-cta="Potenzialanalyse starten"
                   data-analytics-location="contact_section"
                 >
+                  {/* Etwas dunkleres Blau als der Standard-Button (3,45:1 -> 4,76:1 mit weißem Text, Hover 6,08:1);
+                      die Farbe gilt in beiden Themes, weil der Button nicht von Theme-Farben abhängt. */}
                   <Button
                     size="lg"
-                    className="btn-minimal rounded-full px-8 py-6 text-base font-medium group"
+                    className="btn-minimal rounded-full px-8 py-6 text-base font-medium group bg-[hsl(198,93%,35%)] hover:bg-[hsl(198,93%,30%)]"
                   >
                     Potenzialanalyse starten
                     <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
diff --git a/src/test/sofort-paket.test.tsx b/src/test/sofort-paket.test.tsx
index 63a5448..d1be2b4 100644
--- a/src/test/sofort-paket.test.tsx
+++ b/src/test/sofort-paket.test.tsx
@@ -629,14 +629,34 @@ describe("A1 Karten (BorderGlow) im hellen Modus lesbar", () => {
     const hintergrund = { hell: farbe(karte.style.getPropertyValue("--card-bg-light")), dunkel: farbe(karte.style.getPropertyValue("--card-bg-dark")) };
     for (const thema of THEMEN) {
       // text-foreground (Titel, Hover-Zustand der Icons) und text-muted-foreground (Fließtext, Icons).
-      // Der blaue CTA-Button im Kontaktabschnitt hat eigene Farben (Weiß auf #0793CF, 3,45:1, in beiden Themes gleich)
-      // und gehört nicht zu den Theme-Farben; siehe Bericht.
+      // Der blaue CTA-Button im Kontaktabschnitt hat eigene, themeunabhängige Farben und wird im nächsten Test geprüft.
       for (const name of ["foreground", "muted-foreground"]) {
         expect(kontrast(tokenFarbe(thema, name), hintergrund[thema === "hell" ? "hell" : "dunkel"])).toBeGreaterThanOrEqual(4.5);
       }
     }
   });
 
+  it.each(KARTEN)("$name: Buttons auf den Karten (Text weiß auf eigener Farbe) erreichen in Ruhe und beim Hovern mindestens 4,5:1", ({ ui, name }) => {
+    const { container } = zeige(ui);
+    const buttons = [...container.querySelectorAll<HTMLElement>(".border-glow-card button")];
+    if (name.startsWith("Kontaktabschnitt")) expect(buttons).toHaveLength(1);
+    const arbitraerFarbe = (klassen: string[], praefix: string) =>
+      klassen.filter((k) => k.startsWith(`${praefix}bg-[`)).map((k) => k.slice(praefix.length + 4, -1));
+    for (const button of buttons) {
+      const klassen = [...button.classList];
+      // Weiß auf der eigenen Farbe; die Farbe ist themeunabhängig, gilt also in hell und dunkel gleich.
+      expect(klassen).toContain("text-white");
+      const ruhe = arbitraerFarbe(klassen, "");
+      const hover = arbitraerFarbe(klassen, "hover:");
+      // twMerge muss die Standardfarbe des Buttons ersetzen, nicht ergänzen
+      expect(ruhe).toHaveLength(1);
+      expect(hover).toHaveLength(1);
+      for (const hintergrundFarbe of [ruhe[0], hover[0]]) {
+        expect(kontrast([255, 255, 255], farbe(hintergrundFarbe))).toBeGreaterThanOrEqual(4.5);
+      }
+    }
+  });
+
   it("BorderGlow wählt die Kartenfarbe per CSS nach Theme und zeigt im hellen Modus einen sichtbaren Rand", () => {
     const css = lies("src/components/BorderGlow.css");
     expect(css).toMatch(/--card-bg:\s*var\(--card-bg-dark/);