feat: Einstellungen mit Abschnittsleiste statt Kachelfluss

Die Karten lagen in einem Spaltenfluss nebeneinander. Wo etwas landete, hing
von der Kartenhoehe ab und nicht vom Thema – man fand nichts wieder, und mit
jeder neuen Karte wurde es schlimmer.

Jetzt eine Spalte in fester Reihenfolge, daneben eine klebende Leiste mit den
Abschnitten: Sie zeigt, wo man gerade ist, und springt auf Klick dorthin. Die
Leiste wird aus derselben Liste gebaut wie die Abschnitte, damit kein Punkt
ins Leere zeigen kann. /settings#bankanbindung fuehrt direkt zum Abschnitt;
die Rueckkehr von der Bank nutzt das.

Drei Dinge, die beim Nachmessen auffielen und sonst kaputt gewesen waeren:

- Ein Klick setzt die Marke selbst. Ein kurzer Abschnitt am Seitenende bringt
  die Seite ans Ende, und die Seitenende-Regel haette dann einen anderen Punkt
  markiert als den angeklickten. Eigenes Scrollen hebt die Vorauswahl auf.
- Bei "Bewegung reduzieren" wird nicht sanft gescrollt: Der Browser fuehrt
  einen sanften Bildlauf dann gar nicht aus, der Sprung ginge ins Leere.
- Unter 760 px klebt die Abschnittsleiste nicht, weil dort die Hauptnavigation
  selbst die obere Leiste ist und sie verdeckt haette. Und die Spalten-
  Anordnung braucht align-items: stretch, sonst presst das flex-start von oben
  den Inhalt auf seine Inhaltsbreite statt auf die volle.

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

web/src/finance.css

@@ -1194,3 +1194,116 @@ tr.row-dup {
   gap: 4px;
   color: var(--accent);
 }
+
+/* ---------- Einstellungen: Abschnittsleiste + gestapelte Abschnitte ----------
+   Vorher lagen die Karten in einem Spaltenfluss nebeneinander. Man fand nichts
+   wieder, weil die Reihenfolge von der Kartenhöhe abhing statt vom Thema.
+   Jetzt: eine Spalte in fester Reihenfolge, daneben eine Leiste, die zeigt, wo
+   man ist, und mit einem Klick dorthin springt. */
+.settings-layout {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sp-5);
+}
+.settings-nav {
+  flex: 0 0 200px;
+  position: sticky;
+  top: var(--sp-5);
+  /* Eigener Bildlauf, falls die Liste einmal höher wird als der Schirm –
+     sonst wären die untersten Punkte nicht erreichbar. */
+  max-height: calc(100vh - var(--sp-6) * 2);
+  overflow-y: auto;
+}
+.settings-nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.settings-nav a {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+  text-decoration: none;
+  font-weight: 560;
+  border-left: 2px solid transparent;
+  min-width: 0;
+}
+.settings-nav a:hover {
+  background: var(--surface-2);
+  color: var(--text);
+}
+.settings-nav a.active {
+  background: var(--surface-2);
+  color: var(--accent);
+  border-left-color: var(--accent);
+}
+.settings-inhalt {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-4);
+}
+/* Beim Anspringen soll die Überschrift nicht am oberen Rand kleben. */
+.settings-section {
+  scroll-margin-top: var(--sp-5);
+}
+
+@media (max-width: 1000px) {
+  /* Drei Spalten passen nicht mehr: Die Abschnittsleiste klappt über den
+     Inhalt und wird zur waagerecht scrollbaren Reihe. */
+  .settings-layout {
+    flex-direction: column;
+    /* Ohne das erbt die Spalten-Anordnung das flex-start von oben – dort ist
+       es für die klebende Leiste nötig, hier presst es Leiste und Inhalt auf
+       ihre Inhaltsbreite zusammen statt auf die volle. */
+    align-items: stretch;
+  }
+  .settings-nav {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    flex: 0 0 auto;
+    width: 100%;
+    max-height: none;
+    padding: var(--sp-2) 0;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+  }
+  .settings-nav ul {
+    flex-direction: row;
+    overflow-x: auto;
+    gap: var(--sp-2);
+  }
+  .settings-nav a {
+    white-space: nowrap;
+    border-left: none;
+    border-bottom: 2px solid transparent;
+  }
+  .settings-nav a.active {
+    border-left-color: transparent;
+    border-bottom-color: var(--accent);
+  }
+  .settings-section {
+    scroll-margin-top: 56px;
+  }
+}
+
+@media (max-width: 760px) {
+  /* Ab hier ist die Hauptnavigation selbst eine klebende Leiste am oberen Rand
+     (z-index 20). Eine zweite klebende Leiste darunter verschwände hinter ihr –
+     also scrollt die Abschnittsleiste hier einfach mit. */
+  .settings-nav {
+    position: static;
+    border-bottom: none;
+  }
+  .settings-section {
+    scroll-margin-top: var(--sp-3);
+  }
+}