Settings: Seitenbreite mit localStorage-Persistierung und Reset

- Settings-Page mit Range-Slider für Seitenbreite (600-1800px)
- JSON-basierter localStorage-Key 'settings' (zukunftssicher)
- applySettings() beim App-Start für sofortige Wiederherstellung
- Reset-Button mit Confirm-Dialog setzt alle Settings auf Defaults
- Sanfte Breitenübergänge via --transition-duration

wwwroot/css/dashboard.css

@@ -16,7 +16,7 @@
 
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
   gap: var(--page-spacing);
 }
 

wwwroot/css/main.css

@@ -21,6 +21,7 @@ header {
   overflow: hidden;
   width: var(--page-width);
   max-width: 100%;
+  transition: var(--transition-duration);
 }
 
 .page-content {

wwwroot/css/nav.css

@@ -12,6 +12,7 @@
   width: var(--page-width);
   max-width: 100%;
   padding: var(--box-padding);
+  transition: var(--transition-duration);
 }
 
 .nav-brand,

wwwroot/css/placeholder.css

@@ -1,7 +1,76 @@
-.settings-page .placeholder {
-  flex: 1;
+/* ── Settings ── */
+
+.settings {
+  padding: var(--page-padding);
+  width: 100%;
   display: flex;
   flex-direction: column;
+  gap: var(--page-spacing);
+}
+
+.settings-section h2 {
+  margin-bottom: var(--box-spacing);
+  padding-bottom: var(--badge-spacing);
+  border-bottom: var(--border-width) solid var(--f2-border);
+}
+
+.setting-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: var(--box-spacing);
-  padding: var(--page-padding);
+  padding: var(--box-padding);
+  background: var(--f1-bg);
+  border: var(--border-width) solid var(--f1-border);
+  border-radius: var(--border-radius);
+}
+
+.setting-info {
+  display: flex;
+  flex-direction: column;
+  gap: .15em;
+}
+
+.setting-info label {
+  color: var(--text-accent);
+  font-weight: 500;
+}
+
+.setting-hint {
+  opacity: var(--semi-transparent);
+  font-size: var(--font-size);
+}
+
+.setting-control {
+  display: flex;
+  align-items: center;
+  gap: var(--box-spacing);
+  flex-shrink: 0;
+}
+
+.setting-control input[type="range"] {
+  width: 200px;
+  cursor: pointer;
+  accent-color: var(--primary);
+  padding: 0;
+  border: none;
+  background: transparent;
+}
+
+.setting-control input[type="range"]:hover {
+  border: none;
+  filter: none;
+}
+
+.setting-value {
+  min-width: 4.5em;
+  text-align: right;
+  font-family: var(--mono);
+  font-size: var(--mono-size);
+  color: var(--text-accent);
+}
+
+.settings-reset {
+  border-top: var(--border-width) solid var(--f2-border);
+  padding-top: var(--box-spacing);
 }

wwwroot/css/theme.css

@@ -30,4 +30,5 @@
   --menu-item-padding: .5em .75em;
   --page-width: 900px;
   --hover-filter: contrast(.9);
+  --transition-duration: 220ms;
 }

wwwroot/index.html

@@ -177,9 +177,25 @@
       <button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
       <h1>Einstellungen</h1>
     </header>
-    <div class="page-content placeholder">
-      <h2><i class="fa fa-cog"></i> Einstellungen</h2>
-      <p>Hier können diverse Einstellungen getroffen werden.</p>
+    <div class="page-content">
+      <div class="settings">
+        <section class="settings-section">
+          <h2>Darstellung</h2>
+          <div class="setting-row">
+            <div class="setting-info">
+              <label>Seitenbreite</label>
+              <span class="setting-hint">Maximale Breite des Inhaltsbereichs</span>
+            </div>
+            <div class="setting-control">
+              <input type="range" id="settingPageWidth" min="600" max="1800" step="50">
+              <span class="setting-value" id="settingPageWidthValue">900px</span>
+            </div>
+          </div>
+        </section>
+        <section class="settings-section settings-reset">
+          <button id="settingsResetBtn" class="danger-btn">Alle Einstellungen zurücksetzen</button>
+        </section>
+      </div>
     </div>
   </div>
 </template>
@@ -207,6 +223,7 @@
 <script src="js/pages/agent-page.js"></script>
 <script src="js/pages/session-page.js"></script>
 <script src="js/pages/chat-page.js"></script>
+<script src="js/pages/settings-page.js"></script>
 <script src="js/app.js"></script>
 </body>
 </html>

wwwroot/js/pages/settings-page.js

@@ -0,0 +1,64 @@
+// ── Settings Page ──
+
+const SETTINGS_KEY = 'settings';
+
+const SETTINGS_DEFAULTS = {
+  pageWidth: 900
+};
+
+function loadSettings() {
+  try {
+    const raw = localStorage.getItem(SETTINGS_KEY);
+    if (raw) return Object.assign({}, SETTINGS_DEFAULTS, JSON.parse(raw));
+  } catch (_) {}
+  return Object.assign({}, SETTINGS_DEFAULTS);
+}
+
+function saveSettings(settings) {
+  localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
+}
+
+function resetSettings() {
+  localStorage.removeItem(SETTINGS_KEY);
+}
+
+function applySettings() {
+  const s = loadSettings();
+  document.documentElement.style.setProperty('--page-width', s.pageWidth + 'px');
+}
+
+// Apply on load
+applySettings();
+
+registerPage('settings', {
+  init() {
+    const slider = document.getElementById('settingPageWidth');
+    const display = document.getElementById('settingPageWidthValue');
+    const resetBtn = document.getElementById('settingsResetBtn');
+
+    const s = loadSettings();
+    slider.value = s.pageWidth;
+    display.textContent = s.pageWidth + 'px';
+
+    slider.addEventListener('input', () => {
+      display.textContent = slider.value + 'px';
+    });
+
+    slider.addEventListener('change', () => {
+      const s = loadSettings();
+      s.pageWidth = parseInt(slider.value, 10);
+      saveSettings(s);
+      applySettings();
+    });
+
+    resetBtn.addEventListener('click', () => {
+      if (!confirm('Alle Einstellungen auf Standard zurücksetzen?')) return;
+      resetSettings();
+      applySettings();
+      // Update UI
+      slider.value = SETTINGS_DEFAULTS.pageWidth;
+      display.textContent = SETTINGS_DEFAULTS.pageWidth + 'px';
+    });
+  },
+  destroy() {}
+});