Keep card markup and map shadow-sm to the card shadow

Removing the shadow-sm classes touched the page markup of the project
overview, which other branches change as well. The card rule now sets
Bootstrap's --bs-box-shadow-sm to the card shadow instead, so cards with
and without shadow-sm look the same and the pages stay as they are on main.

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

AGENTS.md

@@ -172,8 +172,9 @@ Support Ctrl+Plus and Ctrl+Shift+Plus for insertion.
 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). Do
+soft shadow defined on `.card` in `globals.css` (own dark-mode value). The
-not add Bootstrap `shadow-*` classes or a colored top border to cards.
+`.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.
 

src/app/globals.css

@@ -434,21 +434,24 @@ a.kpi:hover {
 /* 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
+   über Kopfzeile und Inhalt, nicht über die Kante. Bootstraps shadow-sm
-   Bootstrap-Klasse shadow-*, die den Schatten mit !important überschreiben
+   setzt box-shadow mit !important aus --bs-box-shadow-sm; die Karte legt diese
-   würde. */
+   Variable auf denselben Schatten, damit Karten mit und ohne shadow-sm gleich
+   aussehen. */
 .card {
-  --bs-card-border-radius: 16px;
+  --lb-card-shadow:
-  --bs-card-border-color: var(--color-border);
-  box-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 {
-  box-shadow:
+  --lb-card-shadow:
     0 4px 24px rgba(0, 0, 0, 0.4),
     0 1px 0 rgba(255, 255, 255, 0.05) inset;
 }

src/app/projects/[projectId]/page.tsx

@@ -904,7 +904,7 @@ export default function ProjectDetailPage() {
         ) : null}
 
         <section className="col-12" id="verteilungen">
-          <div className="card">
+          <div className="card shadow-sm">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
                 <span>Verteilungen</span>
@@ -997,7 +997,7 @@ export default function ProjectDetailPage() {
         </section>
 
         <section className="col-12 col-lg-5" id="etagen">
-          <div className="card h-100">
+          <div className="card shadow-sm h-100">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
                 <span>Etagen</span>
@@ -1028,7 +1028,7 @@ export default function ProjectDetailPage() {
         </section>
 
         <section className="col-12 col-lg-7" id="raeume">
-          <div className="card">
+          <div className="card shadow-sm">
             <div className="card-header d-flex justify-content-between align-items-center">
               <div>
                 <span>Räume</span>
@@ -1079,7 +1079,7 @@ export default function ProjectDetailPage() {
         </section>
       </div>
 
-      <section className="card mt-4" id="projektgeraete">
+      <section className="card shadow-sm mt-4" id="projektgeraete">
         <div className="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
           <div>
             <span>Projektgeräte</span>

src/app/projects/page.tsx

@@ -238,7 +238,7 @@ export default function ProjectsPage() {
       {error ? <div className="alert alert-warning">{error}</div> : null}
 
       <div className="d-flex flex-column gap-4">
-        <section className="card">
+        <section className="card shadow-sm">
           <div className="card-header">Neues Projekt</div>
           <div className="card-body" style={{ maxWidth: 480 }}>
             <form className="vstack gap-3" onSubmit={handleCreateProject}>
@@ -271,7 +271,7 @@ export default function ProjectsPage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card shadow-sm">
           <div className="card-header">Projekt importieren</div>
           <div className="card-body" style={{ maxWidth: 480 }}>
             <p className="text-secondary small">
@@ -326,7 +326,7 @@ export default function ProjectsPage() {
           </div>
         </section>
 
-        <section className="card">
+        <section className="card shadow-sm">
           <div className="card-header">Globale Geräte / Verbraucher</div>
         <div className="card-body border-bottom">
           <form className="row g-2" onSubmit={handleCreateGlobalDevice}>

src/frontend/components/project-version-history.tsx

@@ -227,7 +227,7 @@ export function ProjectVersionHistory({
     history?.currentRevision === currentRevision;
 
   return (
-    <section className="card">
+    <section className="card shadow-sm">
       <div className="card-header d-flex flex-wrap justify-content-between align-items-center gap-2">
         <span>Versionen und Sicherungspunkte</span>
         <div className="d-flex align-items-center gap-2">