Leistungs-Icons als plastische 3D-Keycaps

Icon-Flächen in den Leistungs-Kacheln zu zweischichtigen Tasten
umgebaut: grauer Tastenkörper mit erhöhter, gewölbter Oberfläche,
Glanzkante und weichem Bodenschatten.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

public/styles.css

@@ -378,22 +378,42 @@ a { color: inherit; text-decoration: none; }
   transition: background .15s ease;
 }
 .card:hover { background: var(--paper-2); }
-/* Icon sitzt auf einem weißen 3D-Keycap */
+/* Icon-Keycap — gewölbte Taste mit erhöhter Oberfläche (3D) */
 .icon-key {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 56px;
-  margin-bottom: 28px;
-  background: var(--paper);
-  border: 1.6px solid var(--black);
-  border-radius: 8px;
-  box-shadow: 0 5px 0 0 var(--black);
+  position: relative;
+  display: inline-block;
+  width: 58px;
+  height: 58px;
+  margin-bottom: 30px;
+  border-radius: 12px;
+  /* Tastenkörper / Seitenwände */
+  background: linear-gradient(180deg, #DADADA 0%, #C0C0C0 60%, #B0B0B0 100%);
+  box-shadow: 0 9px 13px -5px rgba(0,0,0,.28);
 }
+/* erhöhte, leicht gewölbte Tastenoberfläche */
+.icon-key::before {
+  content: "";
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  right: 4px;
+  bottom: 11px;
+  border-radius: 8px;
+  background: linear-gradient(180deg, #FFFFFF 0%, #EDEDED 100%);
+  box-shadow:
+    inset 0 2px 1px rgba(255,255,255,.95),
+    inset 0 -4px 6px rgba(0,0,0,.09);
+}
+/* Icon zentriert auf der Tastenoberfläche */
 .card-icon {
-  width: 27px;
-  height: 27px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  right: 4px;
+  bottom: 11px;
+  margin: auto;
+  width: 26px;
+  height: 26px;
 }
 .card h3 {
   font-size: 19px;