From 3a30d4ce8ffb38ad4dce674e4eb78def6edb9ed5 Mon Sep 17 00:00:00 2001
From: Athena <athena@market-compass.de>
Date: Thu, 30 Apr 2026 22:24:55 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Flip-Karten=20mit=20Inline-Styles=20?=
 =?UTF-8?q?=E2=80=94=20backface-visibility=20zuverl=C3=A4ssig?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Vorherige CSS-Klassen wurden von Tailwind v4 nicht korrekt verarbeitet.
Alle 3D-Properties (perspective, transformStyle, backfaceVisibility,
transform) jetzt als React Inline-Styles gesetzt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/components/FlipCards.tsx | 100 ++++++++++++++++++++++++-------
 1 file changed, 80 insertions(+), 20 deletions(-)

diff --git a/src/app/components/FlipCards.tsx b/src/app/components/FlipCards.tsx
index 3fc7874..cdde105 100644
--- a/src/app/components/FlipCards.tsx
+++ b/src/app/components/FlipCards.tsx
@@ -32,43 +32,105 @@ const PAIRS = [
 function FlipCard({ before, after }: { before: string; after: string }) {
   const [flipped, setFlipped] = useState(false);
 
+  const faceBase: React.CSSProperties = {
+    position: "absolute",
+    inset: 0,
+    borderRadius: "1rem",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "12px",
+    padding: "24px",
+    textAlign: "center",
+    WebkitBackfaceVisibility: "hidden",
+    backfaceVisibility: "hidden",
+  };
+
   return (
     <div
-      className="flip-card-wrapper cursor-pointer"
+      style={{ perspective: "1000px", height: "220px", cursor: "pointer" }}
       onClick={() => setFlipped((f) => !f)}
       onMouseEnter={() => setFlipped(true)}
       onMouseLeave={() => setFlipped(false)}
       role="button"
       tabIndex={0}
       onKeyDown={(e) => e.key === "Enter" && setFlipped((f) => !f)}
-      aria-label={`Karte umdrehen: ${before}`}
     >
-      <div className={`flip-card-inner ${flipped ? "flipped" : ""}`}>
+      {/* Inner — rotates */}
+      <div
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          transformStyle: "preserve-3d",
+          transition: "transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1)",
+          transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
+        }}
+      >
+        {/* VORDERSEITE */}
+        <div
+          style={{
+            ...faceBase,
+            background: "#ffffff",
+            border: "1px solid #eae8f8",
+            boxShadow: "0 2px 12px rgba(99,102,241,0.06)",
+          }}
+        >
+          <span style={{
+            fontSize: "0.65rem", fontWeight: 800, letterSpacing: "0.12em",
+            textTransform: "uppercase", borderRadius: "99px",
+            padding: "3px 10px", background: "#eef2ff", color: "#4338ca",
+          }}>
+            Kennst du das?
+          </span>
 
-        {/* VORDERSEITE — Vorher */}
-        <div className="flip-face flip-front">
-          <span className="flip-label flip-label-front">Kennst du das?</span>
-          <p className="flip-text">{before}</p>
-          <span className="flip-hint">
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <p style={{ fontSize: "0.9rem", lineHeight: 1.5, fontStyle: "italic", color: "#475569" }}>
+            {before}
+          </p>
+
+          <span style={{
+            fontSize: "0.68rem", display: "flex", alignItems: "center",
+            gap: "4px", color: "#a5b4fc", marginTop: "auto",
+          }}>
+            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
             </svg>
             drehe mich um
           </span>
         </div>
 
-        {/* RÜCKSEITE — Nachher */}
-        <div className="flip-face flip-back">
-          <span className="flip-label flip-label-back">Das hast du danach:</span>
-          <p className="flip-text">{after}</p>
-          <span className="flip-hint flip-hint-back">
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        {/* RÜCKSEITE */}
+        <div
+          style={{
+            ...faceBase,
+            background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
+            boxShadow: "0 4px 24px rgba(99,102,241,0.35)",
+            transform: "rotateY(180deg)",
+          }}
+        >
+          <span style={{
+            fontSize: "0.65rem", fontWeight: 800, letterSpacing: "0.12em",
+            textTransform: "uppercase", borderRadius: "99px",
+            padding: "3px 10px", background: "rgba(255,255,255,0.2)", color: "#fff",
+          }}>
+            Das hast du danach:
+          </span>
+
+          <p style={{ fontSize: "0.9rem", lineHeight: 1.5, fontWeight: 600, color: "#fff" }}>
+            {after}
+          </p>
+
+          <span style={{
+            fontSize: "0.68rem", display: "flex", alignItems: "center",
+            gap: "4px", color: "rgba(255,255,255,0.7)", marginTop: "auto",
+          }}>
+            <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
               <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
             </svg>
             nach 8 Wochen
           </span>
         </div>
-
       </div>
     </div>
   );
@@ -83,11 +145,9 @@ export default function FlipCards() {
             <span className="w-2 h-2 rounded-full bg-indigo-500 animate-pulse" />
             Transformation
           </span>
-          <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">
-            Kennst du das?
-          </h2>
+          <h2 className="mt-4 text-3xl md:text-4xl font-extrabold text-slate-900">Kennst du das?</h2>
           <p className="mt-2 text-slate-500 text-sm">
-            Fahre über eine Karte — oder klicke drauf — um zu sehen was sich verändert.
+            Fahre über eine Karte — oder tippe drauf — um zu sehen was sich verändert.
           </p>
         </div>