Fix n.n.: Rahmen, Schatten und Tabs im Design – hellblauer Bereichsrand in beiden Themen

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

Changes.md

@@ -1,5 +1,11 @@
 # Änderungen
 
+## Rahmen, Schatten und Tabs im Design (01.10.2026)
+
+- Tabellen (`table.liste`), Kacheln und breite Formulare (`.formular.breit`, u. a. Einstellungen) erhalten in beiden Themen einen 1px breiten hellblauen Rand (`--bereichsrand`) und einen leichten Schatten (`--bereichsschatten`) für mehr Kontrast zwischen den Bereichen.
+- Titelleiste und Tab-Leiste: Linie im Stil des Bereichsrands, dazu ein schmaler Schatten nach unten.
+- Aktiver Tab und rechtsbündiger Tab („Kacheln wählen“, „Regeln“) haben im dunklen Thema einen abgesetzten blauen Rand (`--tabrand`).
+
 ## Automatische Buchungsnummer (01.10.2026)
 
 - Neue Buchungen ohne Nummer erhalten beim Anlegen die nächste laufende Nummer ihres Kontos (höchste rein numerische Nummer + 1, `Buchung::naechsteNummer()`). Vorgegebene Nummern (QIF, CSV, Formular) bleiben, bestehende Buchungen werden nicht verändert; die interne ID bleibt verborgen.

public/static/app.css

@@ -31,6 +31,10 @@
     --negativ: #c0392b;
     --warnung: #9a6700;
     --schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
+    --bereichsrand: 1px solid #a9c4ea;
+    --bereichsschatten: 0 0 10px 3px #c3cbd5;
+    --bereichsschatten-farbe: #c3cbd5;
+    --tabrand: var(--rand);
 
     --radius: 6px;
     --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -59,6 +63,10 @@
         --negativ: #f0705f;
         --warnung: #d9a441;
         --schatten: 0 1px 2px rgba(0, 0, 0, .4);
+        --bereichsrand: 1px solid #3f6cb0;
+        --bereichsschatten: 0 0 10px 3px #243b62;
+        --bereichsschatten-farbe: #243b62;
+        --tabrand: #345a94;
     }
 }
 
@@ -83,6 +91,10 @@
     --negativ: #f0705f;
     --warnung: #d9a441;
     --schatten: 0 1px 2px rgba(0, 0, 0, .4);
+    --bereichsrand: 1px solid #3f6cb0;
+    --bereichsschatten: 0 0 10px 3px #243b62;
+    --bereichsschatten-farbe: #243b62;
+    --tabrand: #345a94;
 }
 
 * { box-sizing: border-box; }
@@ -235,7 +247,8 @@ code {
     gap: 1rem;
     padding: .85rem 1.5rem;
     background: var(--flaeche);
-    border-bottom: 1px solid var(--rand);
+    border-bottom: var(--bereichsrand);
+    box-shadow: 0 4px 6px -3px var(--bereichsschatten-farbe);
     position: sticky;
     top: 0;
     z-index: 10;
@@ -316,7 +329,8 @@ form.inline { display: inline; margin: 0; }
 .tableiste {
     display: flex;
     gap: .25rem;
-    border-bottom: 1px solid var(--rand);
+    border-bottom: var(--bereichsrand);
+    box-shadow: 0 3px 4px -3px var(--bereichsschatten-farbe);
     margin-bottom: 1.25rem;
     overflow-x: auto;
 }
@@ -335,11 +349,17 @@ form.inline { display: inline; margin: 0; }
 
 /* Schiebt einen Eintrag ans andere Ende der Leiste – etwa „Kacheln wählen“, das
    kein Register ist, sondern ein Weg hinaus. */
-.tab.rechtsbuendig { margin-left: auto; }
+.tab.rechtsbuendig {
+    margin-left: auto;
+    background: var(--flaeche);
+    border-color: var(--tabrand);
+    margin-bottom: -1px;
+    padding-bottom: calc(.5rem + 1px);
+}
 
 .tab.aktiv {
     background: var(--flaeche);
-    border-color: var(--rand);
+    border-color: var(--tabrand);
     color: var(--text);
     font-weight: 500;
     margin-bottom: -1px;
@@ -356,9 +376,9 @@ form.inline { display: inline; margin: 0; }
 
 .kachel {
     background: var(--flaeche);
-    border: 1px solid var(--rand);
+    border: var(--bereichsrand);
     border-radius: var(--radius);
-    box-shadow: var(--schatten);
+    box-shadow: var(--bereichsschatten);
     padding: 1rem 1.15rem 1.25rem;
 }
 
@@ -744,8 +764,9 @@ table.liste {
     width: 100%;
     border-collapse: collapse;
     background: var(--flaeche);
-    border: 1px solid var(--rand);
+    border: var(--bereichsrand);
     border-radius: var(--radius);
+    box-shadow: var(--bereichsschatten);
     overflow: hidden;
     font-size: .92rem;
 }
@@ -1409,10 +1430,10 @@ table.liste th.bargeldspalte {
 .formular.breit {
     max-width: 620px;
     background: var(--flaeche);
-    border: 1px solid var(--rand);
+    border: var(--bereichsrand);
     border-radius: var(--radius);
     padding: 1.25rem;
-    box-shadow: var(--schatten);
+    box-shadow: var(--bereichsschatten);
 }
 
 .formular label {