diff --git a/AGENTS.md b/AGENTS.md
index d8f963c..c00fd78 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -193,6 +193,11 @@ active filter shows "Filter aktiv".
 
 Bootstrap may be used for the general application UI, such as navigation, page layout, buttons, forms, cards, alerts and modals.
 
+Cards follow the PM app look: 1px border all around, 16px radius and the
+soft shadow defined on `.card` in `globals.css` (own dark-mode value). The
+`.card` rule maps Bootstrap's `shadow-sm` to the same shadow; do not add other
+`shadow-*` classes or a colored top border to cards.
+
 Do not use Bootstrap as the core table/grid framework for the circuit list editor.
 
 The circuit list editor must remain a custom spreadsheet-like component with controlled cell selection, inline edit mode, row grouping, drag-and-drop indicators and keyboard behavior.
diff --git a/docs/current-architecture.md b/docs/current-architecture.md
index 8349e75..ab223bd 100644
--- a/docs/current-architecture.md
+++ b/docs/current-architecture.md
@@ -267,6 +267,10 @@ Kategorie/Phasenzahl/Kostengruppe, „Zurücksetzen“, Anzeige „x von y“);
 Filterlogik liegt rein in `src/frontend/utils/overview-filters.ts`, der
 Einklappzustand je Karte in `localStorage`. Aktionen verwenden wie der Editor
 `IconButton`/`IconLink`.
+Die allgemeinen Anwendungskarten verwenden in `src/app/globals.css` einen
+gleichmäßigen Rahmen, 16-px-Rundungen und einen Schatten mit eigener
+Dark-Mode-Abstimmung. Bootstrap-Karten mit `shadow-sm` nutzen denselben
+Schatten; der Stromkreis-Grid bleibt eine eigenständige Komponente.
 Die Verteilersuche berücksichtigt aktuell Name und Etagenname; die Gerätesuche
 Name, Anzeigename, Kategorie einschließlich deutscher Bezeichnung, Anschlussart
 und Kostengruppe. Der Gerätefilter „Anschluss“ wählt zwischen 1- und 3-phasig.
diff --git a/src/app/globals.css b/src/app/globals.css
index 76e5dd3..a8a382d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -688,12 +688,29 @@ 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. Bootstraps shadow-sm
+   setzt box-shadow mit !important aus --bs-box-shadow-sm; die Karte legt diese
+   Variable auf denselben Schatten, damit Karten mit und ohne shadow-sm gleich
+   aussehen. */
 .card {
-  border-radius: var(--radius);
-  border-top: 3px solid var(--color-primary);
-  box-shadow:
-    0 1px 2px var(--shadow-soft),
-    0 10px 24px -14px var(--shadow-strong);
+  --lb-card-shadow:
+    0 4px 24px var(--shadow-soft),
+    0 1px 0 rgba(255, 255, 255, 0.7) inset;
+  --bs-box-shadow-sm: var(--lb-card-shadow);
+  --bs-card-border-radius: 16px;
+  --bs-card-border-color: var(--color-border);
+  box-shadow: var(--lb-card-shadow);
+}
+
+/* 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 {
+  --lb-card-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.4),
+    0 1px 0 rgba(255, 255, 255, 0.05) inset;
 }
 
 .card-header {