Give cards the surface look of the PM app

Cards had a 3px petrol bar on the top edge, and Bootstrap's shadow-sm
class overrode their own shadow with !important. They now use the PM app
surface: a 1px border all around, a 16px radius and a soft diffuse shadow
with a faint inner highlight, with a stronger shadow and a weaker highlight
in dark mode. The shadow-sm classes are removed from the cards so the
shared rule applies. Menus, drawers and dialogs keep their shadows.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/globals.css

@@ -431,12 +431,26 @@ a.kpi:hover {
   color: var(--color-accent-pale);
 }
 
+/* Flächen-Look wie in der PM-App (Vorbild grow-monitor): gleichmäßiger
+   1-px-Rahmen statt farbigem Balken an der Oberkante, größerer Radius und ein
+   weicher Streuschatten mit feiner heller Innenkante oben. Der Akzent kommt
+   über Kopfzeile und Inhalt, nicht über die Kante. Karten tragen deshalb keine
+   Bootstrap-Klasse shadow-*, die den Schatten mit !important überschreiben
+   würde. */
 .card {
-  border-radius: var(--radius);
-  border-top: 3px solid var(--color-primary);
+  --bs-card-border-radius: 16px;
+  --bs-card-border-color: var(--color-border);
   box-shadow:
-    0 1px 2px var(--shadow-soft),
-    0 10px 24px -14px var(--shadow-strong);
+    0 4px 24px var(--shadow-soft),
+    0 1px 0 rgba(255, 255, 255, 0.7) inset;
+}
+
+/* Auf dunklem Grund ein kräftigerer Streuschatten und nur eine schwache
+   Innenkante, sonst wirkt sie wie ein harter weißer Strich. */
+:root[data-bs-theme="dark"] .card {
+  box-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.4),
+    0 1px 0 rgba(255, 255, 255, 0.05) inset;
 }
 
 .card-header {