fix: Einstellungskarten in feste Spalten statt Spaltenfluss

Beim Abrufen und beim Bearbeiten sprang die halbe Seite. Ursache war der
CSS-Spaltenfluss: Aendert eine Karte ihre Hoehe, verteilt der Browser ALLE
Karten neu auf die Spalten. Ich hatte das zweimal am Symptom kuriert
(Formular in den Dialog verschoben), aber die naechste wachsende Karte
brachte es zurueck.

Jetzt bekommt jede Karte fest ihre Spalte. Waechst eine, verschiebt sich
nur, was in derselben Spalte darunter steht. Die Spaltenzahl kommt aus der
tatsaechlichen Containerbreite (ResizeObserver), nicht aus der
Fensterbreite – in der schmalen Seitenleisten-Ansicht stimmte das sonst
nicht.

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

web/src/pages/Account.jsx

@@ -6,6 +6,7 @@ import { api, ApiError } from "../api";
 import { useToast } from "../toast";
 import Icon from "../components/Icon";
 import PasswordInput from "../components/PasswordInput";
+import Kartenspalten from "../components/Kartenspalten";
 import PasswordRules from "../components/PasswordRules";
 import Geraetemarken from "./settings/Geraetemarken";
 import { DEFAULT_POLICY, meetsPolicy } from "../passwordPolicy";
@@ -56,7 +57,7 @@ export default function Account() {
   return (
     <div>
       <h1>{t("account.title")}</h1>
-      <div className="settings-grid">
+      <Kartenspalten>
         <form className="card" onSubmit={onSubmit}>
           <h2 style={{ marginTop: 0 }}>{t("account.password")}</h2>
           {fehler && (
@@ -101,7 +102,7 @@ export default function Account() {
         </div>
 
         <Geraetemarken />
-      </div>
+      </Kartenspalten>
     </div>
   );
 }

web/src/pages/Settings.jsx

@@ -5,6 +5,7 @@ import { useAuth } from "../auth";
 import { useToast } from "../toast";
 import { api } from "../api";
 import Icon from "../components/Icon";
+import Kartenspalten from "../components/Kartenspalten";
 import PolicyCard from "./settings/PolicyCard";
 import Postfaecher from "./settings/Postfaecher";
 import RestoreCard from "./settings/RestoreCard";
@@ -76,7 +77,7 @@ export default function Settings() {
         </div>
       )}
 
-      <div className="settings-grid">
+      <Kartenspalten>
         <div className="card">
           <h2 style={{ marginTop: 0 }}>{t("settings.general")}</h2>
           <label>
@@ -164,7 +165,7 @@ export default function Settings() {
 
         <Postfaecher />
         <RestoreCard />
-      </div>
+      </Kartenspalten>
     </div>
   );
 }