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/components/BorderGlow.css

@@ -6,6 +6,8 @@
   --border-radius: 28px;
   --glow-padding: 40px;
   --cone-spread: 25;
+  /* Kartenfarbe nach Theme: --card-bg-dark / --card-bg-light kommen aus BorderGlow.tsx */
+  --card-bg: var(--card-bg-dark, #000);
   position: relative;
   border-radius: var(--border-radius);
   isolation: isolate;
@@ -25,6 +27,12 @@
     rgba(0, 0, 0, 0.1) 0px 32px 64px;
 }
 
+/* Heller Modus: helle Kartenfarbe und ein sichtbarer Rand (weiß mit 8 % Deckkraft wäre auf Weiß unsichtbar) */
+html:not(.dark) .border-glow-card {
+  --card-bg: var(--card-bg-light, var(--card-bg-dark, #000));
+  border-color: hsl(var(--border));
+}
+
 .border-glow-card::before,
 .border-glow-card::after,
 .border-glow-card > .edge-light {
@@ -147,6 +155,20 @@
     0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
 }
 
+/* Heller Modus: "plus-lighter" ginge auf einer hellen Karte im Weiß unter, und die blasse Glow-Farbe wäre kaum sichtbar.
+   Der Kantenschein wird deshalb normal gemischt und in einem kräftigeren Violett gezeichnet. */
+html:not(.dark) .border-glow-card > .edge-light {
+  mix-blend-mode: normal;
+}
+
+html:not(.dark) .border-glow-card > .edge-light::before {
+  box-shadow:
+    inset 0 0 0 1px hsl(268deg 83% 62% / 70%),
+    inset 0 0 3px 0 hsl(268deg 83% 62% / 45%),
+    inset 0 0 12px 0 hsl(268deg 83% 62% / 30%),
+    inset 0 0 25px 2px hsl(268deg 83% 62% / 15%);
+}
+
 .border-glow-inner {
   display: flex;
   flex-direction: column;

src/components/BorderGlow.tsx

@@ -56,7 +56,10 @@ interface BorderGlowProps {
   className?: string;
   edgeSensitivity?: number;
   glowColor?: string;
+  /** Kartenfarbe im dunklen Modus (und Standard, wenn lightBackgroundColor fehlt). */
   backgroundColor?: string;
+  /** Kartenfarbe im hellen Modus; ohne Angabe gilt backgroundColor in beiden Themes. */
+  lightBackgroundColor?: string;
   borderRadius?: number;
   glowRadius?: number;
   glowIntensity?: number;
@@ -72,6 +75,7 @@ const BorderGlow = ({
   edgeSensitivity = 30,
   glowColor = '40 80 80',
   backgroundColor = '#120F17',
+  lightBackgroundColor,
   borderRadius = 28,
   glowRadius = 40,
   glowIntensity = 1.0,
@@ -183,7 +187,8 @@ const BorderGlow = ({
       onPointerMove={animated ? undefined : handlePointerMove}
       className={`border-glow-card ${className}`}
       style={{
-        '--card-bg': backgroundColor,
+        '--card-bg-dark': backgroundColor,
+        '--card-bg-light': lightBackgroundColor ?? backgroundColor,
         '--edge-sensitivity': edgeSensitivity,
         '--border-radius': `${borderRadius}px`,
         '--glow-padding': `${glowRadius}px`,

src/components/Contact.tsx

@@ -12,6 +12,7 @@ const Contact = () => {
             edgeSensitivity={30}
             glowColor="40 80 80"
             backgroundColor="#120F17"
+            lightBackgroundColor="hsl(0 0% 96%)"
             borderRadius={28}
             glowRadius={40}
             glowIntensity={1}

src/components/Values.tsx

@@ -69,6 +69,7 @@ const Values = () => {
               edgeSensitivity={30}
               glowColor="40 80 80"
               backgroundColor="hsl(0 0% 6%)"
+              lightBackgroundColor="hsl(0 0% 96%)"
               borderRadius={8}
               glowRadius={30}
               glowIntensity={0.8}