feat: Einstellungen in Kapitel (Profil/Darstellung/Ansicht/Kalender)

- Settings-Sidebar mit Kapiteln: Profil, Darstellung, Ansicht, Kalender,
  Benutzerverwaltung (statt eines langen "Darstellung"-Panels).
- Neues "Profil"-Kapitel: Anzeigename + Login-Name ändern, E-Mail, plus
  Privatsphäre (private Sichtbarkeit) und "Für Gruppen sichtbarer Kalender".
- "Konten" → "Kalender" umbenannt. Version v39.

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

frontend/index.html

@@ -652,15 +652,53 @@
     <div class="settings-page-body">
       <div class="settings-nav-backdrop" id="settings-nav-backdrop"></div>
       <nav class="settings-nav">
-        <button class="settings-nav-btn active" data-panel="general" data-i18n="settings_nav_appearance">Darstellung</button>
+        <button class="settings-nav-btn active" data-panel="profile" data-i18n="settings_nav_profile">Profil</button>
-        <button class="settings-nav-btn" data-panel="accounts" data-i18n="settings_nav_accounts">Konten</button>
+        <button class="settings-nav-btn" data-panel="general" data-i18n="settings_nav_appearance">Darstellung</button>
+        <button class="settings-nav-btn" data-panel="view" data-i18n="settings_nav_view">Ansicht</button>
+        <button class="settings-nav-btn" data-panel="accounts" data-i18n="settings_nav_calendars">Kalender</button>
         <button class="settings-nav-btn hidden" data-panel="users" id="settings-nav-users" data-i18n="settings_nav_users">Benutzerverwaltung</button>
       </nav>
 
       <div class="settings-panels">
 
-        <!-- Einstellungen (merged: Darstellung + Ansicht & Raster + Ausgeblendete Kalender) -->
+        <!-- Profil: Name, Privatsphäre, geteilter Kalender -->
-        <div class="settings-panel active" id="settings-panel-general">
+        <div class="settings-panel active" id="settings-panel-profile">
+          <h4 class="panel-title" data-i18n="profile_account">Konto</h4>
+          <div class="form-group">
+            <label data-i18n="profile_display_name">Anzeigename</label>
+            <input type="text" id="cfg-display-name" data-i18n-placeholder="profile_display_name_ph" placeholder="Anzeigename" />
+          </div>
+          <div class="form-group">
+            <label data-i18n="profile_login_name">Login-Name</label>
+            <input type="text" id="cfg-login-name" spellcheck="false" autocapitalize="none" />
+            <p class="panel-desc" data-i18n="profile_login_name_desc">Klein geschrieben, fürs Anmelden. Groß-/Kleinschreibung egal.</p>
+          </div>
+          <div class="form-group">
+            <label>E-Mail</label>
+            <input type="email" id="cfg-email" placeholder="Keine E-Mail hinterlegt" />
+          </div>
+          <button class="btn btn-primary btn-sm" id="cfg-profile-save" data-i18n="save">Speichern</button>
+
+          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_privacy">Privatsphäre</h4>
+          <p class="panel-desc" data-i18n="settings_private_visibility_desc">Wie private Termine für andere Gruppenmitglieder erscheinen</p>
+          <div class="form-group">
+            <label data-i18n="settings_private_visibility">Private Termine für Gruppenmitglieder</label>
+            <select id="cfg-private-visibility">
+              <option value="busy" data-i18n="private_visibility_busy">Als „Beschäftigt“ anzeigen</option>
+              <option value="hidden" data-i18n="private_visibility_hidden">Ausblenden</option>
+            </select>
+          </div>
+
+          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_calendars">Geteilter Kalender</h4>
+          <p class="panel-desc" data-i18n="settings_group_visible_desc">Wähle, welcher deiner Kalender für deine Gruppenmitglieder sichtbar ist</p>
+          <div class="form-group">
+            <label data-i18n="settings_group_visible">Für Gruppen sichtbarer Kalender</label>
+            <div id="cfg-group-visible-list" class="cal-radio-list"></div>
+          </div>
+        </div>
+
+        <!-- Darstellung: Sprache, Farben, Stundenhöhe -->
+        <div class="settings-panel" id="settings-panel-general">
 
           <h4 class="panel-title" data-i18n="settings_language">Sprache</h4>
           <div class="form-group">
@@ -732,7 +770,19 @@
             </div>
           </div>
 
-          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_calendar_view">Kalenderansicht</h4>
+          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_hour_height">Stundenhöhe (Wochen- &amp; Tagesansicht)</h4>
+          <p class="panel-desc" data-i18n="settings_hour_height_desc">Wie viel Platz eine Stunde in der Zeitrasteransicht einnimmt</p>
+          <div class="contrast-selector" id="cfg-hour-height" data-setting="hour_height">
+            <button class="contrast-btn" data-val="28"><span class="hour-preview">━━</span><span class="contrast-lbl" data-i18n="hour_compact">Kompakt</span></button>
+            <button class="contrast-btn" data-val="44"><span class="hour-preview">━━━</span><span class="contrast-lbl" data-i18n="hour_normal">Normal</span></button>
+            <button class="contrast-btn" data-val="60"><span class="hour-preview">━━━━</span><span class="contrast-lbl" data-i18n="hour_comfort">Komfort</span></button>
+            <button class="contrast-btn" data-val="80"><span class="hour-preview">━━━━━</span><span class="contrast-lbl" data-i18n="hour_large">Gross</span></button>
+          </div>
+        </div>
+
+        <!-- Ansicht: Standardansicht, Wochenstart, vergangene Termine, ausgeblendete Kalender -->
+        <div class="settings-panel" id="settings-panel-view">
+          <h4 class="panel-title" data-i18n="settings_calendar_view">Kalenderansicht</h4>
           <div class="form-group">
             <label data-i18n="settings_default_view">Standardansicht</label>
             <select id="cfg-default-view">
@@ -757,39 +807,13 @@
             </label>
           </div>
 
-          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_privacy">Privatsphäre</h4>
-          <p class="panel-desc" data-i18n="settings_private_visibility_desc">Wie private Termine für andere Gruppenmitglieder erscheinen</p>
-          <div class="form-group">
-            <label data-i18n="settings_private_visibility">Private Termine für Gruppenmitglieder</label>
-            <select id="cfg-private-visibility">
-              <option value="busy" data-i18n="private_visibility_busy">Als „Beschäftigt“ anzeigen</option>
-              <option value="hidden" data-i18n="private_visibility_hidden">Ausblenden</option>
-            </select>
-          </div>
-
-          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_calendars">Kalender</h4>
-          <p class="panel-desc" data-i18n="settings_group_visible_desc">Wähle, welcher deiner Kalender für deine Gruppenmitglieder sichtbar ist</p>
-          <div class="form-group">
-            <label data-i18n="settings_group_visible">Für Gruppen sichtbarer Kalender</label>
-            <div id="cfg-group-visible-list" class="cal-radio-list"></div>
-          </div>
-
-          <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_hour_height">Stundenhöhe (Wochen- &amp; Tagesansicht)</h4>
-          <p class="panel-desc" data-i18n="settings_hour_height_desc">Wie viel Platz eine Stunde in der Zeitrasteransicht einnimmt</p>
-          <div class="contrast-selector" id="cfg-hour-height" data-setting="hour_height">
-            <button class="contrast-btn" data-val="28"><span class="hour-preview">━━</span><span class="contrast-lbl" data-i18n="hour_compact">Kompakt</span></button>
-            <button class="contrast-btn" data-val="44"><span class="hour-preview">━━━</span><span class="contrast-lbl" data-i18n="hour_normal">Normal</span></button>
-            <button class="contrast-btn" data-val="60"><span class="hour-preview">━━━━</span><span class="contrast-lbl" data-i18n="hour_comfort">Komfort</span></button>
-            <button class="contrast-btn" data-val="80"><span class="hour-preview">━━━━━</span><span class="contrast-lbl" data-i18n="hour_large">Gross</span></button>
-          </div>
-
           <h4 class="panel-title" style="margin-top:24px" data-i18n="settings_hidden_cals">Ausgeblendete Kalender</h4>
           <div id="hidden-cals-list"><span style="font-size:13px;color:var(--text-3)" data-i18n="settings_no_hidden_cals">Keine ausgeblendeten Kalender</span></div>
         </div>
 
         <!-- Konten (CalDAV, Lokal, iCal, Google) -->
         <div class="settings-panel" id="settings-panel-accounts">
-          <h4 class="panel-title" data-i18n="settings_nav_accounts">Konten</h4>
+          <h4 class="panel-title" data-i18n="settings_nav_calendars">Kalender</h4>
 
           <div class="accounts-section">
             <div class="accounts-section-heading" data-i18n="settings_accounts_caldav">CalDAV-Konten</div>

frontend/js/calendar.js

@@ -2553,6 +2553,14 @@ function openSettingsModal() {
   document.getElementById('cfg-private-visibility').value = s.private_event_visibility || 'busy';
   renderGroupVisibleList(s.group_visible_calendar_id);
 
+  // Profile chapter: name (from cached user) + email (fresh from /profile).
+  const pu = JSON.parse(localStorage.getItem('user') || '{}');
+  document.getElementById('cfg-display-name').value = pu.display_name || pu.username || '';
+  document.getElementById('cfg-login-name').value = pu.username || '';
+  api.get('/profile/').then(p => {
+    document.getElementById('cfg-email').value = p.email || '';
+  }).catch(() => {});
+
   // Set active contrast/hour-height buttons
   [
     { id: 'cfg-text-contrast', val: s.text_contrast || 3 },
@@ -3003,6 +3011,29 @@ function bindSettingsModal() {
     } catch (e) { showToast(e.message, true); }
   };
 
+  // Profile chapter save (name/login/email → /profile, separate from settings).
+  const profileSaveBtn = document.getElementById('cfg-profile-save');
+  if (profileSaveBtn) profileSaveBtn.onclick = async () => {
+    const email = document.getElementById('cfg-email').value.trim();
+    const displayName = document.getElementById('cfg-display-name').value.trim();
+    const loginName = document.getElementById('cfg-login-name').value.trim();
+    const user = JSON.parse(localStorage.getItem('user') || '{}');
+    const body = { email: email || null };
+    if (displayName) body.display_name = displayName;
+    if (loginName && loginName.toLowerCase() !== (user.username || '')) body.username = loginName;
+    try {
+      const res = await api.put('/profile/', body);
+      if (res && res.access_token) localStorage.setItem('token', res.access_token);
+      const updated = { ...user };
+      if (displayName) updated.display_name = displayName;
+      if (body.username) updated.username = body.username.toLowerCase();
+      localStorage.setItem('user', JSON.stringify(updated));
+      const dd = document.getElementById('dropdown-username');
+      if (dd) dd.textContent = updated.display_name || updated.username || 'Benutzer';
+      showToast(t('profile_saved'));
+    } catch (e) { showToast(e.message, true); }
+  };
+
   document.getElementById('settings-save').onclick = async () => {
     const getActive = (id) => {
       const btn = document.querySelector(`#${id} .contrast-btn.active`);

frontend/js/i18n.js

@@ -60,6 +60,9 @@ const translations = {
     // Settings
     settings_title: 'Einstellungen',
     settings_nav_appearance: 'Darstellung',
+    settings_nav_profile: 'Profil',
+    settings_nav_view: 'Ansicht',
+    settings_nav_calendars: 'Kalender',
     settings_nav_google: 'Google Konten',
     settings_nav_users: 'Benutzerverwaltung',
     settings_colors: 'Farben',
@@ -329,6 +332,9 @@ const translations = {
     // Settings
     settings_title: 'Settings',
     settings_nav_appearance: 'Appearance',
+    settings_nav_profile: 'Profile',
+    settings_nav_view: 'View',
+    settings_nav_calendars: 'Calendars',
     settings_nav_google: 'Google Accounts',
     settings_nav_users: 'User Management',
     settings_colors: 'Colors',

frontend/js/version.js

@@ -1,2 +1,2 @@
 // Increment APP_VERSION with every code change
-export const APP_VERSION = 'v38';
+export const APP_VERSION = 'v39';