Karten im hellen Modus lesbar: Kartenfarbe nach Theme

Die BorderGlow-Karten in Values, Kontaktabschnitt und Über uns hatten
dunkle Hintergründe fest verdrahtet, ihr Text nutzt aber Theme-Farben
(Kontrast 1,07:1 im hellen Modus). BorderGlow kennt jetzt
lightBackgroundColor und wählt die Kartenfarbe per CSS nach Theme
(--card-bg-dark / --card-bg-light, html:not(.dark)), ohne Flackern beim
Laden. Dunkel behält exakt die bisherigen Farben (hsl(0 0% 6%), #120F17,
hsl(0 0% 4%)); hell nutzt hsl(0 0% 96%) mit sichtbarem Rand. Der
Kantenschein wird im hellen Modus normal statt mit plus-lighter gemischt
und in Violett gezeichnet, sonst wäre er auf Weiß unsichtbar.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/test/sofort-paket.test.tsx

@@ -600,3 +600,53 @@ describe("A4 Glow-Überschrift (Fix A)", () => {
     expect(weg.mock.calls.map(([typ]) => typ)).toEqual(expect.arrayContaining(["pointermove", "scroll"]));
   });
 });
+
+describe("A1 Karten (BorderGlow) im hellen Modus lesbar", () => {
+  // Dunkel bleibt exakt wie vorher; hell bekommt eine helle Kartenfarbe.
+  const KARTEN: { name: string; ui: React.ReactElement; anzahl: number; dunkel: string }[] = [
+    { name: "Values (Was Sie bekommen)", ui: <Values />, anzahl: 6, dunkel: "hsl(0 0% 6%)" },
+    { name: "Kontaktabschnitt (Der nächste Schritt)", ui: <KontaktAbschnitt />, anzahl: 1, dunkel: "#120F17" },
+    { name: "Über uns (Der Unterschied)", ui: <About />, anzahl: 3, dunkel: "hsl(0 0% 4%)" },
+  ];
+
+  it.each(KARTEN)("$name: dunkle Kartenfarbe unverändert, helle Variante vorhanden", ({ ui, anzahl, dunkel }) => {
+    const { container } = zeige(ui);
+    const karten = [...container.querySelectorAll<HTMLElement>(".border-glow-card")];
+    expect(karten).toHaveLength(anzahl);
+    for (const karte of karten) {
+      expect(karte.style.getPropertyValue("--card-bg-dark")).toBe(dunkel);
+      const hell = karte.style.getPropertyValue("--card-bg-light");
+      expect(hell).not.toBe("");
+      expect(hell).not.toBe(dunkel);
+      expect(leuchtdichte(farbe(hell))).toBeGreaterThan(0.85);
+    }
+  });
+
+  it.each(KARTEN)("$name: Text und Icons erreichen in beiden Themes mindestens 4,5:1", ({ ui }) => {
+    const { container } = zeige(ui);
+    const karte = container.querySelector<HTMLElement>(".border-glow-card") as HTMLElement;
+    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.
+      for (const name of ["foreground", "muted-foreground"]) {
+        expect(kontrast(tokenFarbe(thema, name), hintergrund[thema === "hell" ? "hell" : "dunkel"])).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/);
+    expect(css).toMatch(/html:not\(\.dark\)\s+\.border-glow-card\s*\{[^}]*--card-bg:\s*var\(--card-bg-light/);
+    expect(css).toMatch(/html:not\(\.dark\)\s+\.border-glow-card\s*\{[^}]*border-color:/);
+  });
+
+  it("der Kantenschein der Karten wird im hellen Modus normal statt mit plus-lighter gemischt (sonst unsichtbar auf Weiß)", () => {
+    const css = lies("src/components/BorderGlow.css");
+    expect(css).toMatch(/html:not\(\.dark\)\s+\.border-glow-card\s*>\s*\.edge-light\s*\{[^}]*mix-blend-mode:\s*normal/);
+    // dunkel bleibt wie vorher
+    expect(css).toMatch(/\.border-glow-card\s*>\s*\.edge-light\s*\{[^}]*mix-blend-mode:\s*plus-lighter/);
+  });
+});