Refactor and optimize styles for PaperCard and UI elements.

The PaperCard component now uses a reusable SVG-based "torn paper edge" for improved performance and maintainability. Several redundant styles, unnecessary comments, and animations were removed, resulting in cleaner and more consistent code. Background gradients were streamlined, and redundant wrapper styles were eliminated.

frontend/src/App.jsx

@@ -19,11 +19,15 @@ function cycleTag(tag) {
   return null;
 }
 
+/**
+ * PaperCard: wrapper, der oben + unten einen "torn paper edge" drauflegt.
+ * Wichtig: Edge braucht zIndex > children, sonst verschwindet er unter dem Header.
+ */
 function PaperCard({ children, style }) {
   return (
     <div style={{ ...styles.paperCard, ...style }}>
       <div style={styles.paperEdgeTop} aria-hidden="true" />
-      {children}
+      <div style={styles.paperInner}>{children}</div>
       <div style={styles.paperEdgeBottom} aria-hidden="true" />
     </div>
   );
@@ -233,7 +237,7 @@ export default function App() {
     document.head.appendChild(link);
   }, []);
 
-  // ✅ Keyframes / Animationen (+ Paper Edge minimal)
+  // ✅ Keyframes / Animationen
   useEffect(() => {
     if (document.getElementById("hp-anim-style")) return;
     const style = document.createElement("style");
@@ -250,20 +254,12 @@ export default function App() {
         70%  { opacity: .70; transform: translateY(1px) scale(1.01); filter: blur(17px); }
         100% { opacity: .65; transform: translateY(0px) scale(1); filter: blur(16px); }
       }
-
-      /* Paper edge: super subtle, keeps it "alive" without causing scroll lag */
-      @keyframes paperEdgeDrift {
-        0% { opacity: .92; transform: translateX(0px); }
-        50% { opacity: .98; transform: translateX(0.6px); }
-        100% { opacity: .92; transform: translateX(0px); }
-      }
     `;
     document.head.appendChild(style);
   }, []);
 
   // ✅ Hintergrund (html + body) setzen (gegen white flashes) + ✅ Performance Fix für Mobile
   useEffect(() => {
-    // ⚡ PERFORMANCE: etwas "gröberes" Noise Pattern (weniger Repaints)
     const bg = `radial-gradient(circle at 12% 18%, rgba(120,80,30,0.18), rgba(0,0,0,0) 38%),
       radial-gradient(circle at 85% 22%, rgba(120,80,30,0.12), rgba(0,0,0,0) 42%),
       radial-gradient(circle at 35% 82%, rgba(120,80,30,0.10), rgba(0,0,0,0) 45%),
@@ -285,10 +281,8 @@ export default function App() {
     document.documentElement.style.background = bg;
     document.body.style.background = bg;
 
-    // ⚡ MOBILE: background-attachment fixed verursacht oft Scroll-Lag → explizit ausschalten
     const isTouch =
-      "ontouchstart" in window ||
+      "ontouchstart" in window || (navigator && navigator.maxTouchPoints > 0);
-      (navigator && navigator.maxTouchPoints > 0);
 
     if (isTouch) {
       document.documentElement.style.backgroundAttachment = "scroll";
@@ -446,7 +440,9 @@ export default function App() {
                   type="button"
                   onClick={() => setShowPw((v) => !v)}
                   style={styles.pwToggleBtn}
-                  aria-label={showPw ? "Passwort verstecken" : "Passwort anzeigen"}
+                  aria-label={
+                    showPw ? "Passwort verstecken" : "Passwort anzeigen"
+                  }
                   title={showPw ? "Verstecken" : "Anzeigen"}
                 >
                   {showPw ? "🙈" : "👁"}
@@ -482,9 +478,9 @@ export default function App() {
     : [];
 
   const getRowBg = (status) => {
-    if (status === 1) return "rgba(255, 0, 0, 0.06)"; // rot
+    if (status === 1) return "rgba(255, 0, 0, 0.06)";
-    if (status === 2) return "rgba(0, 170, 60, 0.07)"; // grün
+    if (status === 2) return "rgba(0, 170, 60, 0.07)";
-    if (status === 3) return "rgba(120, 120, 120, 0.14)"; // grau
+    if (status === 3) return "rgba(120, 120, 120, 0.14)";
     return "rgba(255,255,255,0.22)";
   };
 
@@ -713,9 +709,7 @@ export default function App() {
                       ...styles.row,
                       background: getRowBg(e.status),
                       animation:
-                        pulseId === e.entry_id
+                        pulseId === e.entry_id ? "rowPulse 220ms ease-out" : "none",
-                          ? "rowPulse 220ms ease-out"
-                          : "none",
                     }}
                   >
                     <div
@@ -760,13 +754,39 @@ export default function App() {
   );
 }
 
-/* ===== Styles (Parchment / Boardgame Look) ===== */
+/* ===== Styles ===== */
+
+// Paper edge SVG (repeat-x) – bewusst simpel & leichtgewichtig.
+// Wir encoden minimal (spaces -> %20 etc.) damit es zuverlässig als data-uri läuft.
+const PAPER_EDGE_SVG =
+  "data:image/svg+xml;utf8," +
+  encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" width="220" height="20" viewBox="0 0 220 20">
+  <path d="M0,18
+           C12,20 22,10 34,16
+           C48,23 58,9 72,15
+           C86,22 96,11 110,16
+           C126,22 138,10 152,15
+           C166,20 178,12 192,16
+           C204,19 212,14 220,16
+           L220,0 L0,0 Z"
+        fill="rgba(255,255,255,0.95)"/>
+  <path d="M0,18
+           C12,20 22,10 34,16
+           C48,23 58,9 72,15
+           C86,22 96,11 110,16
+           C126,22 138,10 152,15
+           C166,20 178,12 192,16
+           C204,19 212,14 220,16"
+        fill="none" stroke="rgba(0,0,0,0.14)" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
+`);
+
 const styles = {
   page: {
     minHeight: "100dvh",
     margin: 0,
     padding: 0,
-    // ⚡ PERFORMANCE: gröberes Pattern (weniger Repaints)
     background: `
       radial-gradient(circle at 12% 18%, rgba(120,80,30,0.18), rgba(0,0,0,0) 38%),
       radial-gradient(circle at 85% 22%, rgba(120,80,30,0.12), rgba(0,0,0,0) 42%),
@@ -779,9 +799,8 @@ const styles = {
       ),
       linear-gradient(180deg, #f1e2c2, #e3c996)
     `,
-    // ✅ FIX: "fixed" raus → Mobile scrollt deutlich smoother
-    // backgroundAttachment: "fixed",
   },
+
   shell: {
     fontFamily: '"IM Fell English", system-ui',
     padding: 16,
@@ -802,7 +821,7 @@ const styles = {
     backdropFilter: "blur(4px)",
   },
 
-  // === Paper card base (replaces `card` visually) ===
+  // ===== PAPER CARD =====
   paperCard: {
     position: "relative",
     borderRadius: 16,
@@ -810,93 +829,39 @@ const styles = {
     border: "1px solid rgba(0,0,0,0.18)",
     background: "rgba(255,255,255,0.35)",
     boxShadow: "0 10px 24px rgba(0,0,0,0.12)",
-    transition: "transform 180ms ease, box-shadow 180ms ease",
   },
-
+  paperInner: {
-  // Fallback (kept, in case you still use it somewhere)
+    position: "relative",
-  card: {
+    zIndex: 1, // content below edges
-    borderRadius: 16,
-    overflow: "hidden",
-    border: "1px solid rgba(0,0,0,0.18)",
-    background: "rgba(255,255,255,0.35)",
-    boxShadow: "0 10px 24px rgba(0,0,0,0.12)",
-    transition: "transform 180ms ease, box-shadow 180ms ease",
   },
-
-  // Paper edges (top + bottom) — mask-based, lightweight, no heavy blur/filters
   paperEdgeTop: {
     position: "absolute",
-    left: 0,
+    left: -2,
-    right: 0,
+    right: -2,
-    top: 0,
+    top: -1,
     height: 18,
+    zIndex: 3,
     pointerEvents: "none",
-    background:
+    backgroundImage: `url("${PAPER_EDGE_SVG}")`,
-      "linear-gradient(180deg, rgba(255,255,255,0.62), rgba(255,255,255,0.0))",
+    backgroundRepeat: "repeat-x",
+    backgroundSize: "220px 18px",
     opacity: 0.95,
-
+    mixBlendMode: "multiply",
-    WebkitMaskImage:
-      "radial-gradient(10px 8px at 6% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(12px 9px at 14% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(9px 7px at 24% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(13px 10px at 36% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(10px 8px at 49% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(12px 9px at 62% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(9px 7px at 74% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(13px 10px at 86% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(10px 8px at 94% 100%, #000 98%, transparent 102%)," +
-      "linear-gradient(#000, #000)",
-    maskImage:
-      "radial-gradient(10px 8px at 6% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(12px 9px at 14% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(9px 7px at 24% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(13px 10px at 36% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(10px 8px at 49% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(12px 9px at 62% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(9px 7px at 74% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(13px 10px at 86% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(10px 8px at 94% 100%, #000 98%, transparent 102%)," +
-      "linear-gradient(#000, #000)",
-
-    filter: "drop-shadow(0 1px 0 rgba(0,0,0,0.14))",
-    animation: "paperEdgeDrift 8s ease-in-out infinite",
   },
-
   paperEdgeBottom: {
     position: "absolute",
-    left: 0,
+    left: -2,
-    right: 0,
+    right: -2,
-    bottom: 0,
+    bottom: -1,
-    height: 20,
+    height: 18,
+    zIndex: 3,
     pointerEvents: "none",
-    background:
+    backgroundImage: `url("${PAPER_EDGE_SVG}")`,
-      "linear-gradient(0deg, rgba(255,255,255,0.62), rgba(255,255,255,0.0))",
+    backgroundRepeat: "repeat-x",
+    backgroundSize: "220px 18px",
     opacity: 0.95,
+    mixBlendMode: "multiply",
     transform: "scaleY(-1)",
-    WebkitMaskImage:
-      "radial-gradient(10px 8px at 6% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(12px 9px at 14% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(9px 7px at 24% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(13px 10px at 36% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(10px 8px at 49% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(12px 9px at 62% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(9px 7px at 74% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(13px 10px at 86% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(10px 8px at 94% 100%, #000 98%, transparent 102%)," +
-      "linear-gradient(#000, #000)",
-    maskImage:
-      "radial-gradient(10px 8px at 6% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(12px 9px at 14% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(9px 7px at 24% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(13px 10px at 36% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(10px 8px at 49% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(12px 9px at 62% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(9px 7px at 74% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(13px 10px at 86% 100%, #000 98%, transparent 102%)," +
-      "radial-gradient(10px 8px at 94% 100%, #000 98%, transparent 102%)," +
-      "linear-gradient(#000, #000)",
-    filter: "drop-shadow(0 1px 0 rgba(0,0,0,0.14))",
-    animation: "paperEdgeDrift 8s ease-in-out infinite",
   },
 
   sectionHeader: {
@@ -938,8 +903,7 @@ const styles = {
     fontWeight: 1000,
     borderRadius: 10,
     border: "1px solid rgba(0,0,0,0.25)",
-    background:
+    background: "linear-gradient(180deg, rgba(255,255,255,0.55), rgba(0,0,0,0.06))",
-      "linear-gradient(180deg, rgba(255,255,255,0.55), rgba(0,0,0,0.06))",
     cursor: "pointer",
   },
 
@@ -947,8 +911,7 @@ const styles = {
     padding: "10px 12px",
     borderRadius: 12,
     border: "1px solid rgba(0,0,0,0.25)",
-    background:
+    background: "linear-gradient(180deg, rgba(255,255,255,0.75), rgba(0,0,0,0.06))",
-      "linear-gradient(180deg, rgba(255,255,255,0.75), rgba(0,0,0,0.06))",
     fontWeight: 1000,
     cursor: "pointer",
     whiteSpace: "nowrap",
@@ -961,7 +924,7 @@ const styles = {
     border: "1px solid rgba(0,0,0,0.25)",
     background: "rgba(255,255,255,0.55)",
     outline: "none",
-    fontSize: 16, // ✅ iOS: verhindert Zoom
+    fontSize: 16,
   },
 
   primaryBtn: {
@@ -978,8 +941,7 @@ const styles = {
     padding: "10px 12px",
     borderRadius: 12,
     border: "1px solid rgba(0,0,0,0.25)",
-    background:
+    background: "linear-gradient(180deg, rgba(255,255,255,0.75), rgba(0,0,0,0.05))",
-      "linear-gradient(180deg, rgba(255,255,255,0.75), rgba(0,0,0,0.05))",
     fontWeight: 900,
     cursor: "pointer",
     transition: "transform 140ms ease, box-shadow 140ms ease",
@@ -1024,8 +986,7 @@ const styles = {
     maxWidth: 560,
     borderRadius: 18,
     border: "1px solid rgba(0,0,0,0.25)",
-    background:
+    background: "linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42))",
-      "linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.42))",
     boxShadow: "0 18px 50px rgba(0,0,0,0.35)",
     padding: 14,
     backdropFilter: "blur(6px)",
@@ -1042,15 +1003,13 @@ const styles = {
     height: 38,
     borderRadius: 12,
     border: "1px solid rgba(0,0,0,0.25)",
-    background:
+    background: "linear-gradient(180deg, rgba(255,255,255,0.85), rgba(0,0,0,0.06))",
-      "linear-gradient(180deg, rgba(255,255,255,0.85), rgba(0,0,0,0.06))",
     fontWeight: 1000,
     cursor: "pointer",
     lineHeight: "38px",
     textAlign: "center",
   },
 
-  // Help modal content
   helpBody: {
     marginTop: 10,
     paddingTop: 4,
@@ -1116,7 +1075,6 @@ const styles = {
     position: "relative",
     overflow: "hidden",
     padding: 20,
-    // ⚡ Performance: gröberes Pattern
     background: `
       radial-gradient(circle at 12% 18%, rgba(120,80,30,0.18), rgba(0,0,0,0) 38%),
       radial-gradient(circle at 85% 22%, rgba(120,80,30,0.12), rgba(0,0,0,0) 42%),
@@ -1133,10 +1091,7 @@ const styles = {
     width: "100%",
     maxWidth: 420,
     padding: 26,
-    borderRadius: 22, // paperCard uses 16; this overrides for login
+    borderRadius: 22,
-    position: "relative",
-    zIndex: 2,
-    // border/background/boxShadow handled by PaperCard base
     animation: "popIn 240ms ease-out",
   },
   loginTitle: {
@@ -1166,7 +1121,7 @@ const styles = {
     border: "1px solid rgba(0,0,0,0.25)",
     background: "rgba(255,255,255,0.55)",
     outline: "none",
-    fontSize: 16, // ✅ iOS: verhindert Zoom
+    fontSize: 16,
   },
   loginBtn: {
     padding: "12px 14px",
@@ -1212,7 +1167,7 @@ const styles = {
     background: "rgba(255,255,255,0.55)",
     outline: "none",
     minWidth: 0,
-    fontSize: 16, // ✅ iOS: verhindert Zoom
+    fontSize: 16,
   },
   pwToggleBtn: {
     width: 48,
@@ -1222,8 +1177,7 @@ const styles = {
     borderRadius: "0 12px 12px 0",
     border: "1px solid rgba(0,0,0,0.25)",
     borderLeft: "none",
-    background:
+    background: "linear-gradient(180deg, rgba(255,255,255,0.85), rgba(0,0,0,0.06))",
-      "linear-gradient(180deg, rgba(255,255,255,0.85), rgba(0,0,0,0.06))",
     cursor: "pointer",
     fontWeight: 900,
     padding: 0,