Backup: Stand vor Design-Optimierung (2026-02-16)

css/products-modern.css

@@ -139,15 +139,16 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background: linear-gradient(135deg, #0f72b5, #00406e);
+    background: linear-gradient(135deg, #0A1832, #0f72b5);
     border-radius: 20px;
     opacity: 0.1;
     transition: all 0.5s;
 }
 
 .product-card:hover .product-icon-bg {
-    opacity: 0.2;
+    opacity: 0.3;
     transform: rotate(10deg) scale(1.1);
+    background: linear-gradient(135deg, #0A1832, #1e3a5f);
 }
 
 .product-icon {
@@ -155,13 +156,13 @@
     z-index: 1;
     width: 50px;
     height: 50px;
-    filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(98%) contrast(92%);
+    filter: brightness(0) saturate(100%) invert(8%) sepia(13%) saturate(4290%) hue-rotate(189deg) brightness(95%) contrast(97%);
     transition: all 0.5s;
 }
 
 .product-card:hover .product-icon {
     transform: scale(1.1);
-    filter: brightness(0) saturate(100%) invert(42%) sepia(82%) saturate(723%) hue-rotate(178deg) brightness(108%) contrast(92%);
+    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
 }
 
 .product-title-wrapper {
@@ -181,6 +182,11 @@
     transition: all 0.3s;
 }
 
+/* Specific styling for AccountForger title */
+.product-title[data-translate="productAccountForgerTitle"] {
+    color: #0A1832;
+}
+
 .product-card:hover .product-title {
     color: #0f72b5;
 }
@@ -279,9 +285,9 @@
 
 /* Learn More Button */
 .product-learn-more {
-    background: transparent;
-    border: 2px solid #0f72b5;
-    color: #0f72b5;
+    background: #C8A851;
+    border: 2px solid #C8A851;
+    color: #0a0f1c;
     padding: 10px 25px;
     border-radius: 50px;
     cursor: pointer;
@@ -301,7 +307,7 @@
     left: 50%;
     width: 0;
     height: 0;
-    background: linear-gradient(135deg, #0f72b5, #00406e);
+    background: #0a0f1c;
     transform: translate(-50%, -50%);
     transition: all 0.5s;
     border-radius: 50px;
@@ -313,10 +319,10 @@
 }
 
 .product-learn-more:hover {
-    color: #ffffff;
-    border-color: transparent;
+    color: #C8A851;
+    border-color: #C8A851;
     transform: translateY(-2px);
-    box-shadow: 0 10px 30px rgba(15, 114, 181, 0.3);
+    box-shadow: 0 10px 30px rgba(200, 168, 81, 0.3);
 }
 
 .product-learn-more span {