From c796d3ad6ff150c0bf1f00b2ebdf563af0072fa8 Mon Sep 17 00:00:00 2001
From: ulsklyc <ulas@kalayci.cloud>
Date: Thu, 26 Mar 2026 12:22:21 +0100
Subject: [PATCH] feat: migrate remaining 5 modules to shared modal system

Migrate budget, contacts, notes, meals, calendar to use the shared
openModal/closeModal from components/modal.js. Each module now gets
focus-trap, escape-handler, overlay-click, focus-restore, scroll-lock.

Removed ~460 lines of duplicate modal CSS (.budget-modal-overlay,
.contact-modal-overlay, .note-modal-overlay, .meal-modal-overlay,
.event-modal-overlay and their children). Content-specific styles
(color-picker, autocomplete, ingredient-list, etc.) are preserved.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/pages/budget.js     | 250 +++++++++++++++----------------
 public/pages/calendar.js   | 271 +++++++++++++++------------------
 public/pages/contacts.js   | 188 +++++++++++------------
 public/pages/meals.js      | 298 ++++++++++++++++++-------------------
 public/pages/notes.js      | 180 ++++++++++------------
 public/styles/budget.css   |  88 +----------
 public/styles/calendar.css |  98 +-----------
 public/styles/contacts.css |  85 -----------
 public/styles/meals.css    | 107 +------------
 public/styles/notes.css    |  84 +----------
 10 files changed, 552 insertions(+), 1097 deletions(-)

diff --git a/public/pages/budget.js b/public/pages/budget.js
index eefd4c4..b63b8e1 100644
--- a/public/pages/budget.js
+++ b/public/pages/budget.js
@@ -6,6 +6,7 @@
  */
 
 import { api } from '/api.js';
+import { openModal as openSharedModal, closeModal } from '/components/modal.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -134,7 +135,7 @@ function wireNav() {
     renderBody();
     updateLabel();
   });
-  const addHandler = () => openModal({ mode: 'create' });
+  const addHandler = () => openBudgetModal({ mode: 'create' });
   _container.querySelector('#budget-add').addEventListener('click', addHandler);
   _container.querySelector('#fab-new-budget').addEventListener('click', addHandler);
   updateLabel();
@@ -208,7 +209,7 @@ function renderBody() {
     const item = e.target.closest('.budget-entry[data-id]');
     if (item && !e.target.closest('[data-action]')) {
       const entry = state.entries.find((e) => e.id === parseInt(item.dataset.id, 10));
-      if (entry) openModal({ mode: 'edit', entry });
+      if (entry) openBudgetModal({ mode: 'edit', entry });
     }
   });
 }
@@ -276,150 +277,133 @@ function formatEntryDate(dateStr) {
 // Modal
 // --------------------------------------------------------
 
-function openModal({ mode, entry = null }) {
-  document.querySelector('#budget-modal-overlay')?.remove();
-
+function openBudgetModal({ mode, entry = null }) {
   const isEdit = mode === 'edit';
   const today  = new Date().toISOString().slice(0, 10);
 
-  const isExpense  = isEdit ? entry.amount < 0 : true; // Standard: Ausgabe
+  const isExpense  = isEdit ? entry.amount < 0 : true;
   const absAmount  = isEdit ? Math.abs(entry.amount).toFixed(2) : '';
 
   const catOpts = CATEGORIES.map((c) =>
     `<option value="${c}" ${isEdit && entry.category === c ? 'selected' : ''}>${c}</option>`
   ).join('');
 
-  const overlay = document.createElement('div');
-  overlay.id        = 'budget-modal-overlay';
-  overlay.className = 'budget-modal-overlay';
-  overlay.innerHTML = `
-    <div class="budget-modal" role="dialog" aria-modal="true">
-      <div class="budget-modal__header">
-        <h2 class="budget-modal__title">${isEdit ? 'Eintrag bearbeiten' : 'Neuer Eintrag'}</h2>
-        <button class="budget-modal__close" id="bm-close" aria-label="Schließen">
-          <i data-lucide="x" style="width:16px;height:16px;"></i>
-        </button>
-      </div>
-      <div class="budget-modal__body">
-        <!-- Einnahme / Ausgabe Toggle -->
-        <div class="amount-type-toggle">
-          <button class="amount-type-btn amount-type-btn--expenses ${isExpense ? 'amount-type-btn--active' : ''}"
-                  id="type-expense" type="button">Ausgabe</button>
-          <button class="amount-type-btn amount-type-btn--income ${!isExpense ? 'amount-type-btn--active' : ''}"
-                  id="type-income" type="button">Einnahme</button>
-        </div>
-
-        <div class="form-group">
-          <label class="form-label" for="bm-title">Titel *</label>
-          <input type="text" class="form-input" id="bm-title"
-                 placeholder="z.B. REWE Einkauf" value="${escHtml(isEdit ? entry.title : '')}">
-        </div>
-
-        <div class="form-group">
-          <label class="form-label" for="bm-amount">Betrag (€) *</label>
-          <input type="number" class="form-input" id="bm-amount"
-                 placeholder="0,00" step="0.01" min="0"
-                 value="${absAmount}">
-        </div>
-
-        <div class="form-group">
-          <label class="form-label" for="bm-category">Kategorie</label>
-          <select class="form-input" id="bm-category">${catOpts}</select>
-        </div>
-
-        <div class="form-group">
-          <label class="form-label" for="bm-date">Datum *</label>
-          <input type="date" class="form-input" id="bm-date"
-                 value="${isEdit ? entry.date : today}">
-        </div>
-
-        <div class="form-group">
-          <label class="allday-toggle">
-            <input type="checkbox" id="bm-recurring" ${isEdit && entry.is_recurring ? 'checked' : ''}>
-            <span class="allday-toggle__label">Wiederkehrend</span>
-          </label>
-        </div>
-      </div>
-      <div class="budget-modal__footer">
-        ${isEdit ? `<button class="btn btn--danger btn--icon" id="bm-delete" title="Löschen">
-          <i data-lucide="trash-2" style="width:16px;height:16px;"></i>
-        </button>` : '<div></div>'}
-        <div class="budget-modal__footer-actions">
-          <button class="btn btn--secondary" id="bm-cancel">Abbrechen</button>
-          <button class="btn btn--primary" id="bm-save">${isEdit ? 'Speichern' : 'Hinzufügen'}</button>
-        </div>
-      </div>
+  const content = `
+    <div class="amount-type-toggle">
+      <button class="amount-type-btn amount-type-btn--expenses ${isExpense ? 'amount-type-btn--active' : ''}"
+              id="type-expense" type="button">Ausgabe</button>
+      <button class="amount-type-btn amount-type-btn--income ${!isExpense ? 'amount-type-btn--active' : ''}"
+              id="type-income" type="button">Einnahme</button>
     </div>
-  `;
 
-  document.body.appendChild(overlay);
-  if (window.lucide) lucide.createIcons();
+    <div class="form-group">
+      <label class="form-label" for="bm-title">Titel *</label>
+      <input type="text" class="form-input" id="bm-title"
+             placeholder="z.B. REWE Einkauf" value="${escHtml(isEdit ? entry.title : '')}">
+    </div>
 
-  // Typ-Toggle
-  let currentType = isExpense ? 'expense' : 'income';
-  overlay.querySelector('#type-expense').addEventListener('click', () => {
-    currentType = 'expense';
-    overlay.querySelector('#type-expense').classList.add('amount-type-btn--active');
-    overlay.querySelector('#type-income').classList.remove('amount-type-btn--active');
+    <div class="form-group">
+      <label class="form-label" for="bm-amount">Betrag (€) *</label>
+      <input type="number" class="form-input" id="bm-amount"
+             placeholder="0,00" step="0.01" min="0"
+             value="${absAmount}">
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="bm-category">Kategorie</label>
+      <select class="form-input" id="bm-category">${catOpts}</select>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="bm-date">Datum *</label>
+      <input type="date" class="form-input" id="bm-date"
+             value="${isEdit ? entry.date : today}">
+    </div>
+
+    <div class="form-group">
+      <label class="allday-toggle">
+        <input type="checkbox" id="bm-recurring" ${isEdit && entry.is_recurring ? 'checked' : ''}>
+        <span class="allday-toggle__label">Wiederkehrend</span>
+      </label>
+    </div>
+
+    <div class="modal-panel__footer" style="border:none;padding:0;margin-top:var(--space-4)">
+      ${isEdit ? `<button class="btn btn--danger btn--icon" id="bm-delete" title="Löschen">
+        <i data-lucide="trash-2" style="width:16px;height:16px;"></i>
+      </button>` : '<div></div>'}
+      <div style="display:flex;gap:var(--space-3)">
+        <button class="btn btn--secondary" id="bm-cancel">Abbrechen</button>
+        <button class="btn btn--primary" id="bm-save">${isEdit ? 'Speichern' : 'Hinzufügen'}</button>
+      </div>
+    </div>`;
+
+  openSharedModal({
+    title: isEdit ? 'Eintrag bearbeiten' : 'Neuer Eintrag',
+    content,
+    size: 'sm',
+    onSave(panel) {
+      let currentType = isExpense ? 'expense' : 'income';
+
+      panel.querySelector('#type-expense').addEventListener('click', () => {
+        currentType = 'expense';
+        panel.querySelector('#type-expense').classList.add('amount-type-btn--active');
+        panel.querySelector('#type-income').classList.remove('amount-type-btn--active');
+      });
+      panel.querySelector('#type-income').addEventListener('click', () => {
+        currentType = 'income';
+        panel.querySelector('#type-income').classList.add('amount-type-btn--active');
+        panel.querySelector('#type-expense').classList.remove('amount-type-btn--active');
+      });
+
+      panel.querySelector('#bm-cancel').addEventListener('click', closeModal);
+
+      panel.querySelector('#bm-delete')?.addEventListener('click', async () => {
+        if (!confirm(`"${entry.title}" wirklich löschen?`)) return;
+        closeModal();
+        await deleteEntry(entry.id);
+      });
+
+      panel.querySelector('#bm-save').addEventListener('click', async () => {
+        const saveBtn    = panel.querySelector('#bm-save');
+        const title      = panel.querySelector('#bm-title').value.trim();
+        const absVal     = parseFloat(panel.querySelector('#bm-amount').value);
+        const category   = panel.querySelector('#bm-category').value;
+        const date       = panel.querySelector('#bm-date').value;
+        const recurring  = panel.querySelector('#bm-recurring').checked ? 1 : 0;
+
+        if (!title)           { window.oikos?.showToast('Titel ist erforderlich', 'error'); return; }
+        if (isNaN(absVal) || absVal <= 0) { window.oikos?.showToast('Gültigen Betrag eingeben', 'error'); return; }
+        if (!date)            { window.oikos?.showToast('Datum ist erforderlich', 'error'); return; }
+
+        const amount = currentType === 'expense' ? -absVal : absVal;
+
+        saveBtn.disabled    = true;
+        saveBtn.textContent = '…';
+
+        try {
+          const body = { title, amount, category, date, is_recurring: recurring };
+          if (mode === 'create') {
+            const res = await api.post('/budget', body);
+            state.entries.unshift(res.data);
+          } else {
+            const res = await api.put(`/budget/${entry.id}`, body);
+            const idx = state.entries.findIndex((e) => e.id === entry.id);
+            if (idx !== -1) state.entries[idx] = res.data;
+          }
+          const sumRes  = await api.get(`/budget/summary?month=${state.month}`);
+          state.summary = sumRes.data;
+
+          closeModal();
+          renderBody();
+          window.oikos?.showToast(mode === 'create' ? 'Eintrag hinzugefügt' : 'Eintrag gespeichert', 'success');
+        } catch (err) {
+          window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error');
+          saveBtn.disabled    = false;
+          saveBtn.textContent = isEdit ? 'Speichern' : 'Hinzufügen';
+        }
+      });
+    },
   });
-  overlay.querySelector('#type-income').addEventListener('click', () => {
-    currentType = 'income';
-    overlay.querySelector('#type-income').classList.add('amount-type-btn--active');
-    overlay.querySelector('#type-expense').classList.remove('amount-type-btn--active');
-  });
-
-  overlay.querySelector('#bm-close').addEventListener('click',  () => overlay.remove());
-  overlay.querySelector('#bm-cancel').addEventListener('click', () => overlay.remove());
-  overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
-
-  overlay.querySelector('#bm-delete')?.addEventListener('click', async () => {
-    if (!confirm(`"${entry.title}" wirklich löschen?`)) return;
-    overlay.remove();
-    await deleteEntry(entry.id);
-  });
-
-  overlay.querySelector('#bm-save').addEventListener('click', async () => {
-    const saveBtn    = overlay.querySelector('#bm-save');
-    const title      = overlay.querySelector('#bm-title').value.trim();
-    const absVal     = parseFloat(overlay.querySelector('#bm-amount').value);
-    const category   = overlay.querySelector('#bm-category').value;
-    const date       = overlay.querySelector('#bm-date').value;
-    const recurring  = overlay.querySelector('#bm-recurring').checked ? 1 : 0;
-
-    if (!title)           { window.oikos?.showToast('Titel ist erforderlich', 'error'); return; }
-    if (isNaN(absVal) || absVal <= 0) { window.oikos?.showToast('Gültigen Betrag eingeben', 'error'); return; }
-    if (!date)            { window.oikos?.showToast('Datum ist erforderlich', 'error'); return; }
-
-    const amount = currentType === 'expense' ? -absVal : absVal;
-
-    saveBtn.disabled    = true;
-    saveBtn.textContent = '…';
-
-    try {
-      const body = { title, amount, category, date, is_recurring: recurring };
-      if (mode === 'create') {
-        const res = await api.post('/budget', body);
-        state.entries.unshift(res.data);
-      } else {
-        const res = await api.put(`/budget/${entry.id}`, body);
-        const idx = state.entries.findIndex((e) => e.id === entry.id);
-        if (idx !== -1) state.entries[idx] = res.data;
-      }
-      // Zusammenfassung neu laden
-      const sumRes  = await api.get(`/budget/summary?month=${state.month}`);
-      state.summary = sumRes.data;
-
-      overlay.remove();
-      renderBody();
-      window.oikos?.showToast(mode === 'create' ? 'Eintrag hinzugefügt' : 'Eintrag gespeichert', 'success');
-    } catch (err) {
-      window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error');
-      saveBtn.disabled    = false;
-      saveBtn.textContent = isEdit ? 'Speichern' : 'Hinzufügen';
-    }
-  });
-
-  overlay.querySelector('#bm-title').focus();
 }
 
 // --------------------------------------------------------
diff --git a/public/pages/calendar.js b/public/pages/calendar.js
index b84377e..7147ade 100644
--- a/public/pages/calendar.js
+++ b/public/pages/calendar.js
@@ -6,6 +6,7 @@
 
 import { api } from '/api.js';
 import { renderRRuleFields, bindRRuleEvents, getRRuleValues } from '/rrule-ui.js';
+import { openModal as openSharedModal, closeModal } from '/components/modal.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -703,61 +704,54 @@ function showEventPopup(ev, anchor) {
 // --------------------------------------------------------
 
 function openEventModal({ mode, event = null, date = null }) {
-  document.querySelector('#event-modal-overlay')?.remove();
+  const isEdit = mode === 'edit';
+  const content = buildEventModalContent({ mode, event, date });
 
-  const overlay = document.createElement('div');
-  overlay.id        = 'event-modal-overlay';
-  overlay.className = 'event-modal-overlay';
-  overlay.innerHTML = buildEventModalHTML({ mode, event, date });
-  document.body.appendChild(overlay);
+  openSharedModal({
+    title: isEdit ? 'Termin bearbeiten' : 'Neuer Termin',
+    content,
+    size: 'md',
+    onSave(panel) {
+      // RRULE-Events binden
+      bindRRuleEvents(panel, 'event');
 
-  if (window.lucide) lucide.createIcons();
+      const selectedColor = isEdit ? (event?.color || EVENT_COLORS[0]) : EVENT_COLORS[0];
 
-  // RRULE-Events binden
-  bindRRuleEvents(overlay, 'event');
+      // Farb-Auswahl
+      panel.querySelectorAll('.color-swatch').forEach((sw) => {
+        sw.addEventListener('click', () => {
+          panel.querySelectorAll('.color-swatch').forEach((s) => s.classList.remove('color-swatch--active'));
+          sw.classList.add('color-swatch--active');
+        });
+      });
+      panel.querySelectorAll('.color-swatch').forEach((sw) => {
+        if (sw.dataset.color === selectedColor) sw.classList.add('color-swatch--active');
+      });
 
-  const isEdit       = mode === 'edit';
-  const selectedColor = isEdit ? (event?.color || EVENT_COLORS[0]) : EVENT_COLORS[0];
+      // Ganztägig-Toggle
+      const alldayCheck = panel.querySelector('#modal-allday');
+      const timeFields  = panel.querySelector('#time-fields');
+      const alldayFields = panel.querySelector('#allday-fields');
+      alldayCheck.addEventListener('change', () => {
+        if (alldayCheck.checked) { timeFields.style.display = 'none'; alldayFields.style.display = ''; }
+        else                      { timeFields.style.display = '';     alldayFields.style.display = 'none'; }
+      });
+      if (isEdit && event?.all_day) { timeFields.style.display = 'none'; alldayFields.style.display = ''; }
 
-  // Farb-Auswahl
-  overlay.querySelectorAll('.color-swatch').forEach((sw) => {
-    sw.addEventListener('click', () => {
-      overlay.querySelectorAll('.color-swatch').forEach((s) => s.classList.remove('color-swatch--active'));
-      sw.classList.add('color-swatch--active');
-    });
+      panel.querySelector('#modal-cancel').addEventListener('click', closeModal);
+
+      panel.querySelector('#modal-delete')?.addEventListener('click', async () => {
+        if (!confirm(`"${event.title}" wirklich löschen?`)) return;
+        closeModal();
+        await deleteEvent(event.id);
+      });
+
+      panel.querySelector('#modal-save').addEventListener('click', () => saveEvent(panel, mode, event?.id));
+    },
   });
-  // Initial aktive Farbe markieren
-  overlay.querySelectorAll('.color-swatch').forEach((sw) => {
-    if (sw.dataset.color === selectedColor) sw.classList.add('color-swatch--active');
-  });
-
-  // Ganztägig-Toggle
-  const alldayCheck = overlay.querySelector('#modal-allday');
-  const timeFields  = overlay.querySelector('#time-fields');
-  alldayCheck.addEventListener('change', () => {
-    timeFields.style.display = alldayCheck.checked ? 'none' : '';
-  });
-  if (isEdit && event?.all_day) timeFields.style.display = 'none';
-
-  // Schließen
-  overlay.querySelector('#modal-close').addEventListener('click',  closeEventModal);
-  overlay.querySelector('#modal-cancel').addEventListener('click', closeEventModal);
-  overlay.addEventListener('click', (e) => { if (e.target === overlay) closeEventModal(); });
-
-  // Löschen (nur Edit)
-  overlay.querySelector('#modal-delete')?.addEventListener('click', async () => {
-    if (!confirm(`"${event.title}" wirklich löschen?`)) return;
-    closeEventModal();
-    await deleteEvent(event.id);
-  });
-
-  // Speichern
-  overlay.querySelector('#modal-save').addEventListener('click', () => saveEvent(overlay, mode, event?.id));
-
-  overlay.querySelector('#modal-title').focus();
 }
 
-function buildEventModalHTML({ mode, event, date }) {
+function buildEventModalContent({ mode, event, date }) {
   const isEdit = mode === 'edit';
   const today  = date || state.today;
 
@@ -776,118 +770,93 @@ function buildEventModalHTML({ mode, event, date }) {
   ].join('');
 
   return `
-    <div class="event-modal" role="dialog" aria-modal="true">
-      <div class="event-modal__header">
-        <h2 class="event-modal__title">${isEdit ? 'Termin bearbeiten' : 'Neuer Termin'}</h2>
-        <button class="event-modal__close" id="modal-close" aria-label="Schließen">
-          <i data-lucide="x" style="width:16px;height:16px;"></i>
-        </button>
+    <div class="form-group">
+      <label class="form-label" for="modal-title">Titel *</label>
+      <input type="text" class="form-input" id="modal-title"
+             placeholder="z.B. Zahnarzt" value="${escHtml(isEdit ? event.title : '')}">
+    </div>
+
+    <div class="form-group">
+      <label class="allday-toggle">
+        <input type="checkbox" id="modal-allday" ${isEdit && event.all_day ? 'checked' : ''}>
+        <span class="allday-toggle__label">Ganztägig</span>
+      </label>
+    </div>
+
+    <div id="time-fields">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+        <div class="form-group">
+          <label class="form-label" for="modal-start-date">Startdatum</label>
+          <input type="date" class="form-input" id="modal-start-date" value="${startDate}">
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="modal-start-time">Startzeit</label>
+          <input type="time" class="form-input" id="modal-start-time" value="${startTime}">
+        </div>
       </div>
-      <div class="event-modal__body">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
         <div class="form-group">
-          <label class="form-label" for="modal-title">Titel *</label>
-          <input type="text" class="form-input" id="modal-title"
-                 placeholder="z.B. Zahnarzt" value="${escHtml(isEdit ? event.title : '')}">
+          <label class="form-label" for="modal-end-date">Enddatum</label>
+          <input type="date" class="form-input" id="modal-end-date" value="${endDate}">
         </div>
-
         <div class="form-group">
-          <label class="allday-toggle">
-            <input type="checkbox" id="modal-allday" ${isEdit && event.all_day ? 'checked' : ''}>
-            <span class="allday-toggle__label">Ganztägig</span>
-          </label>
-        </div>
-
-        <div id="time-fields">
-          <div class="event-modal__row">
-            <div class="form-group">
-              <label class="form-label" for="modal-start-date">Startdatum</label>
-              <input type="date" class="form-input" id="modal-start-date" value="${startDate}">
-            </div>
-            <div class="form-group">
-              <label class="form-label" for="modal-start-time">Startzeit</label>
-              <input type="time" class="form-input" id="modal-start-time" value="${startTime}">
-            </div>
-          </div>
-          <div class="event-modal__row">
-            <div class="form-group">
-              <label class="form-label" for="modal-end-date">Enddatum</label>
-              <input type="date" class="form-input" id="modal-end-date" value="${endDate}">
-            </div>
-            <div class="form-group">
-              <label class="form-label" for="modal-end-time">Endzeit</label>
-              <input type="time" class="form-input" id="modal-end-time" value="${endTime}">
-            </div>
-          </div>
-        </div>
-
-        <!-- Ganztägig: nur Datum -->
-        <div id="allday-fields" style="display:none;">
-          <div class="event-modal__row">
-            <div class="form-group">
-              <label class="form-label" for="modal-allday-start">Von</label>
-              <input type="date" class="form-input" id="modal-allday-start" value="${startDate}">
-            </div>
-            <div class="form-group">
-              <label class="form-label" for="modal-allday-end">Bis</label>
-              <input type="date" class="form-input" id="modal-allday-end" value="${endDate}">
-            </div>
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-label" for="modal-location">Ort</label>
-          <input type="text" class="form-input" id="modal-location"
-                 placeholder="Optional" value="${escHtml(isEdit && event.location ? event.location : '')}">
-        </div>
-
-        <div class="form-group">
-          <label class="form-label" for="modal-assigned">Zugewiesen an</label>
-          <select class="form-input" id="modal-assigned">${userOpts}</select>
-        </div>
-
-        <div class="form-group">
-          <label class="form-label">Farbe</label>
-          <div class="color-picker">
-            ${EVENT_COLORS.map((c) => `
-              <div class="color-swatch" data-color="${c}" style="background-color:${c};"
-                   role="radio" tabindex="0" aria-label="Farbe ${c}"></div>
-            `).join('')}
-          </div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-label" for="modal-description">Beschreibung</label>
-          <textarea class="form-input" id="modal-description" rows="2"
-                    placeholder="Optional…">${escHtml(isEdit && event.description ? event.description : '')}</textarea>
-        </div>
-
-        ${renderRRuleFields('event', isEdit ? event.recurrence_rule : null)}
-      </div>
-      <div class="event-modal__footer">
-        ${isEdit ? `<button class="btn btn--danger btn--icon" id="modal-delete" title="Löschen">
-          <i data-lucide="trash-2" style="width:16px;height:16px;"></i>
-        </button>` : '<div></div>'}
-        <div class="event-modal__footer-actions">
-          <button class="btn btn--secondary" id="modal-cancel">Abbrechen</button>
-          <button class="btn btn--primary" id="modal-save">${isEdit ? 'Speichern' : 'Erstellen'}</button>
+          <label class="form-label" for="modal-end-time">Endzeit</label>
+          <input type="time" class="form-input" id="modal-end-time" value="${endTime}">
         </div>
       </div>
     </div>
-  `;
-}
 
-// Allday-Toggle: Felder umschalten
-document.addEventListener('change', (e) => {
-  if (e.target.id !== 'modal-allday') return;
-  const tf = document.querySelector('#time-fields');
-  const af = document.querySelector('#allday-fields');
-  if (!tf || !af) return;
-  if (e.target.checked) { tf.style.display = 'none'; af.style.display = ''; }
-  else                   { tf.style.display = '';     af.style.display = 'none'; }
-});
+    <div id="allday-fields" style="display:none;">
+      <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+        <div class="form-group">
+          <label class="form-label" for="modal-allday-start">Von</label>
+          <input type="date" class="form-input" id="modal-allday-start" value="${startDate}">
+        </div>
+        <div class="form-group">
+          <label class="form-label" for="modal-allday-end">Bis</label>
+          <input type="date" class="form-input" id="modal-allday-end" value="${endDate}">
+        </div>
+      </div>
+    </div>
 
-function closeEventModal() {
-  document.querySelector('#event-modal-overlay')?.remove();
+    <div class="form-group">
+      <label class="form-label" for="modal-location">Ort</label>
+      <input type="text" class="form-input" id="modal-location"
+             placeholder="Optional" value="${escHtml(isEdit && event.location ? event.location : '')}">
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="modal-assigned">Zugewiesen an</label>
+      <select class="form-input" id="modal-assigned">${userOpts}</select>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label">Farbe</label>
+      <div class="color-picker">
+        ${EVENT_COLORS.map((c) => `
+          <div class="color-swatch" data-color="${c}" style="background-color:${c};"
+               role="radio" tabindex="0" aria-label="Farbe ${c}"></div>
+        `).join('')}
+      </div>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="modal-description">Beschreibung</label>
+      <textarea class="form-input" id="modal-description" rows="2"
+                placeholder="Optional…">${escHtml(isEdit && event.description ? event.description : '')}</textarea>
+    </div>
+
+    ${renderRRuleFields('event', isEdit ? event.recurrence_rule : null)}
+
+    <div class="modal-panel__footer" style="border:none;padding:0;margin-top:var(--space-4)">
+      ${isEdit ? `<button class="btn btn--danger btn--icon" id="modal-delete" title="Löschen">
+        <i data-lucide="trash-2" style="width:16px;height:16px;"></i>
+      </button>` : '<div></div>'}
+      <div style="display:flex;gap:var(--space-3)">
+        <button class="btn btn--secondary" id="modal-cancel">Abbrechen</button>
+        <button class="btn btn--primary" id="modal-save">${isEdit ? 'Speichern' : 'Erstellen'}</button>
+      </div>
+    </div>`;
 }
 
 async function saveEvent(overlay, mode, eventId) {
@@ -943,7 +912,7 @@ async function saveEvent(overlay, mode, eventId) {
       if (idx !== -1) state.events[idx] = res.data;
     }
 
-    closeEventModal();
+    closeModal();
     renderView();
     window.oikos?.showToast(mode === 'create' ? 'Termin erstellt' : 'Termin gespeichert', 'success');
   } catch (err) {
diff --git a/public/pages/contacts.js b/public/pages/contacts.js
index 14d740a..628e2cd 100644
--- a/public/pages/contacts.js
+++ b/public/pages/contacts.js
@@ -5,6 +5,7 @@
  */
 
 import { api } from '/api.js';
+import { openModal as openSharedModal, closeModal } from '/components/modal.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -95,7 +96,7 @@ export async function render(container, { user }) {
   });
 
   // Neu
-  const addHandler = () => openModal({ mode: 'create' });
+  const addHandler = () => openContactModal({ mode: 'create' });
   _container.querySelector('#contacts-add-btn').addEventListener('click', addHandler);
   _container.querySelector('#fab-new-contact').addEventListener('click', addHandler);
 }
@@ -168,7 +169,7 @@ function renderList() {
     const item = e.target.closest('.contact-item[data-id]');
     if (item && !e.target.closest('a') && !e.target.closest('[data-action]')) {
       const c = state.contacts.find((c) => c.id === parseInt(item.dataset.id, 10));
-      if (c) openModal({ mode: 'edit', contact: c });
+      if (c) openContactModal({ mode: 'edit', contact: c });
     }
   });
 }
@@ -200,9 +201,7 @@ function renderContactItem(c) {
 // Modal
 // --------------------------------------------------------
 
-function openModal({ mode, contact = null }) {
-  document.querySelector('#contact-modal-overlay')?.remove();
-
+function openContactModal({ mode, contact = null }) {
   const isEdit = mode === 'edit';
   const v      = (field) => escHtml(isEdit && contact[field] ? contact[field] : '');
 
@@ -210,107 +209,94 @@ function openModal({ mode, contact = null }) {
     `<option value="${c}" ${isEdit && contact.category === c ? 'selected' : ''}>${c}</option>`
   ).join('');
 
-  const overlay = document.createElement('div');
-  overlay.id        = 'contact-modal-overlay';
-  overlay.className = 'contact-modal-overlay';
-  overlay.innerHTML = `
-    <div class="contact-modal" role="dialog" aria-modal="true">
-      <div class="contact-modal__header">
-        <h2 class="contact-modal__title">${isEdit ? 'Kontakt bearbeiten' : 'Neuer Kontakt'}</h2>
-        <button class="contact-modal__close" id="cm-close" aria-label="Schließen">
-          <i data-lucide="x" style="width:16px;height:16px;"></i>
-        </button>
-      </div>
-      <div class="contact-modal__body">
-        <div class="form-group">
-          <label class="form-label" for="cm-name">Name *</label>
-          <input type="text" class="form-input" id="cm-name" placeholder="Vollständiger Name" value="${v('name')}">
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="cm-category">Kategorie</label>
-          <select class="form-input" id="cm-category">${catOpts}</select>
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="cm-phone">Telefon</label>
-          <input type="tel" class="form-input" id="cm-phone" placeholder="+49 …" value="${v('phone')}">
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="cm-email">E-Mail</label>
-          <input type="email" class="form-input" id="cm-email" placeholder="name@beispiel.de" value="${v('email')}">
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="cm-address">Adresse</label>
-          <input type="text" class="form-input" id="cm-address" placeholder="Straße, PLZ Ort" value="${v('address')}">
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="cm-notes">Notizen</label>
-          <textarea class="form-input" id="cm-notes" rows="2" placeholder="Optional…">${v('notes')}</textarea>
-        </div>
-      </div>
-      <div class="contact-modal__footer">
-        ${isEdit ? `<button class="btn btn--danger btn--icon" id="cm-delete" title="Löschen">
-          <i data-lucide="trash-2" style="width:16px;height:16px;"></i>
-        </button>` : '<div></div>'}
-        <div style="display:flex;gap:var(--space-3);">
-          <button class="btn btn--secondary" id="cm-cancel">Abbrechen</button>
-          <button class="btn btn--primary" id="cm-save">${isEdit ? 'Speichern' : 'Erstellen'}</button>
-        </div>
-      </div>
+  const content = `
+    <div class="form-group">
+      <label class="form-label" for="cm-name">Name *</label>
+      <input type="text" class="form-input" id="cm-name" placeholder="Vollständiger Name" value="${v('name')}">
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="cm-category">Kategorie</label>
+      <select class="form-input" id="cm-category">${catOpts}</select>
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="cm-phone">Telefon</label>
+      <input type="tel" class="form-input" id="cm-phone" placeholder="+49 …" value="${v('phone')}">
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="cm-email">E-Mail</label>
+      <input type="email" class="form-input" id="cm-email" placeholder="name@beispiel.de" value="${v('email')}">
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="cm-address">Adresse</label>
+      <input type="text" class="form-input" id="cm-address" placeholder="Straße, PLZ Ort" value="${v('address')}">
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="cm-notes">Notizen</label>
+      <textarea class="form-input" id="cm-notes" rows="2" placeholder="Optional…">${v('notes')}</textarea>
     </div>
-  `;
 
-  document.body.appendChild(overlay);
-  if (window.lucide) lucide.createIcons();
+    <div class="modal-panel__footer" style="border:none;padding:0;margin-top:var(--space-4)">
+      ${isEdit ? `<button class="btn btn--danger btn--icon" id="cm-delete" title="Löschen">
+        <i data-lucide="trash-2" style="width:16px;height:16px;"></i>
+      </button>` : '<div></div>'}
+      <div style="display:flex;gap:var(--space-3);">
+        <button class="btn btn--secondary" id="cm-cancel">Abbrechen</button>
+        <button class="btn btn--primary" id="cm-save">${isEdit ? 'Speichern' : 'Erstellen'}</button>
+      </div>
+    </div>`;
 
-  overlay.querySelector('#cm-close').addEventListener('click',  () => overlay.remove());
-  overlay.querySelector('#cm-cancel').addEventListener('click', () => overlay.remove());
-  overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
+  openSharedModal({
+    title: isEdit ? 'Kontakt bearbeiten' : 'Neuer Kontakt',
+    content,
+    size: 'md',
+    onSave(panel) {
+      panel.querySelector('#cm-cancel').addEventListener('click', closeModal);
 
-  overlay.querySelector('#cm-delete')?.addEventListener('click', async () => {
-    if (!confirm(`"${contact.name}" wirklich löschen?`)) return;
-    overlay.remove();
-    await deleteContact(contact.id);
+      panel.querySelector('#cm-delete')?.addEventListener('click', async () => {
+        if (!confirm(`"${contact.name}" wirklich löschen?`)) return;
+        closeModal();
+        await deleteContact(contact.id);
+      });
+
+      panel.querySelector('#cm-save').addEventListener('click', async () => {
+        const saveBtn  = panel.querySelector('#cm-save');
+        const name     = panel.querySelector('#cm-name').value.trim();
+        const category = panel.querySelector('#cm-category').value;
+        const phone    = panel.querySelector('#cm-phone').value.trim() || null;
+        const email    = panel.querySelector('#cm-email').value.trim() || null;
+        const address  = panel.querySelector('#cm-address').value.trim() || null;
+        const notes    = panel.querySelector('#cm-notes').value.trim() || null;
+
+        if (!name) { window.oikos?.showToast('Name ist erforderlich', 'error'); return; }
+
+        saveBtn.disabled    = true;
+        saveBtn.textContent = '…';
+
+        try {
+          const body = { name, category, phone, email, address, notes };
+          if (mode === 'create') {
+            const res = await api.post('/contacts', body);
+            state.contacts.push(res.data);
+            state.contacts.sort((a, b) =>
+              CATEGORIES.indexOf(a.category) - CATEGORIES.indexOf(b.category) ||
+              a.name.localeCompare(b.name)
+            );
+          } else {
+            const res = await api.put(`/contacts/${contact.id}`, body);
+            const idx = state.contacts.findIndex((c) => c.id === contact.id);
+            if (idx !== -1) state.contacts[idx] = res.data;
+          }
+          closeModal();
+          renderList();
+          window.oikos?.showToast(mode === 'create' ? 'Kontakt gespeichert' : 'Kontakt aktualisiert', 'success');
+        } catch (err) {
+          window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error');
+          saveBtn.disabled    = false;
+          saveBtn.textContent = isEdit ? 'Speichern' : 'Erstellen';
+        }
+      });
+    },
   });
-
-  overlay.querySelector('#cm-save').addEventListener('click', async () => {
-    const saveBtn  = overlay.querySelector('#cm-save');
-    const name     = overlay.querySelector('#cm-name').value.trim();
-    const category = overlay.querySelector('#cm-category').value;
-    const phone    = overlay.querySelector('#cm-phone').value.trim() || null;
-    const email    = overlay.querySelector('#cm-email').value.trim() || null;
-    const address  = overlay.querySelector('#cm-address').value.trim() || null;
-    const notes    = overlay.querySelector('#cm-notes').value.trim() || null;
-
-    if (!name) { window.oikos?.showToast('Name ist erforderlich', 'error'); return; }
-
-    saveBtn.disabled    = true;
-    saveBtn.textContent = '…';
-
-    try {
-      const body = { name, category, phone, email, address, notes };
-      if (mode === 'create') {
-        const res = await api.post('/contacts', body);
-        state.contacts.push(res.data);
-        state.contacts.sort((a, b) =>
-          CATEGORIES.indexOf(a.category) - CATEGORIES.indexOf(b.category) ||
-          a.name.localeCompare(b.name)
-        );
-      } else {
-        const res = await api.put(`/contacts/${contact.id}`, body);
-        const idx = state.contacts.findIndex((c) => c.id === contact.id);
-        if (idx !== -1) state.contacts[idx] = res.data;
-      }
-      overlay.remove();
-      renderList();
-      window.oikos?.showToast(mode === 'create' ? 'Kontakt gespeichert' : 'Kontakt aktualisiert', 'success');
-    } catch (err) {
-      window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error');
-      saveBtn.disabled    = false;
-      saveBtn.textContent = isEdit ? 'Speichern' : 'Erstellen';
-    }
-  });
-
-  overlay.querySelector('#cm-name').focus();
 }
 
 async function deleteContact(id) {
diff --git a/public/pages/meals.js b/public/pages/meals.js
index 560606b..15fc6b7 100644
--- a/public/pages/meals.js
+++ b/public/pages/meals.js
@@ -5,6 +5,7 @@
  */
 
 import { api } from '/api.js';
+import { openModal as openSharedModal, closeModal as closeSharedModal } from '/components/modal.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -248,14 +249,14 @@ function wireGrid(grid) {
     const action = btn.dataset.action;
 
     if (action === 'add-meal') {
-      openModal({ mode: 'create', date: btn.dataset.date, mealType: btn.dataset.type });
+      openMealModal({ mode: 'create', date: btn.dataset.date, mealType: btn.dataset.type });
       return;
     }
 
     if (action === 'edit-meal') {
       const mealId = parseInt(btn.dataset.mealId, 10);
       const meal   = state.meals.find((m) => m.id === mealId);
-      if (meal) openModal({ mode: 'edit', meal, date: meal.date, mealType: meal.meal_type });
+      if (meal) openMealModal({ mode: 'edit', meal, date: meal.date, mealType: meal.meal_type });
       return;
     }
 
@@ -281,109 +282,104 @@ function wireGrid(grid) {
 // Modal
 // --------------------------------------------------------
 
-function openModal(opts) {
+function openMealModal(opts) {
   state.modal = opts;
-  document.querySelector('#meal-modal-overlay')?.remove();
+  const { mode, date, mealType, meal } = opts;
+  const isEdit = mode === 'edit';
 
-  const overlay = document.createElement('div');
-  overlay.id        = 'meal-modal-overlay';
-  overlay.className = 'meal-modal-overlay';
-  overlay.innerHTML = buildModalHTML(opts);
-  document.body.appendChild(overlay);
+  const content = buildModalContent(opts);
 
-  if (window.lucide) lucide.createIcons();
+  openSharedModal({
+    title: isEdit ? 'Mahlzeit bearbeiten' : 'Mahlzeit hinzufügen',
+    content,
+    size: 'md',
+    onSave(panel) {
+      // Autocomplete
+      const titleInput = panel.querySelector('#modal-title');
+      const acDropdown = panel.querySelector('#modal-autocomplete');
+      let acIndex = -1;
+      let acTimer;
 
-  // Autocomplete
-  const titleInput = overlay.querySelector('#modal-title');
-  const acDropdown = overlay.querySelector('#modal-autocomplete');
-  let acIndex = -1;
-  let acTimer;
+      titleInput.addEventListener('input', () => {
+        clearTimeout(acTimer);
+        acTimer = setTimeout(async () => {
+          const q = titleInput.value.trim();
+          if (!q) { acDropdown.hidden = true; return; }
+          try {
+            const res = await api.get(`/meals/suggestions?q=${encodeURIComponent(q)}`);
+            if (!res.data.length) { acDropdown.hidden = true; return; }
+            acIndex = -1;
+            acDropdown.innerHTML = res.data.map((s) => `
+              <div class="meal-modal__autocomplete-item" data-title="${escHtml(s.title)}">${escHtml(s.title)}</div>
+            `).join('');
+            acDropdown.hidden = false;
+          } catch { acDropdown.hidden = true; }
+        }, 200);
+      });
 
-  titleInput.addEventListener('input', () => {
-    clearTimeout(acTimer);
-    acTimer = setTimeout(async () => {
-      const q = titleInput.value.trim();
-      if (!q) { acDropdown.hidden = true; return; }
-      try {
-        const res = await api.get(`/meals/suggestions?q=${encodeURIComponent(q)}`);
-        if (!res.data.length) { acDropdown.hidden = true; return; }
-        acIndex = -1;
-        acDropdown.innerHTML = res.data.map((s) => `
-          <div class="meal-modal__autocomplete-item" data-title="${escHtml(s.title)}">${escHtml(s.title)}</div>
-        `).join('');
-        acDropdown.hidden = false;
-      } catch { acDropdown.hidden = true; }
-    }, 200);
+      titleInput.addEventListener('keydown', (e) => {
+        const items = [...acDropdown.querySelectorAll('.meal-modal__autocomplete-item')];
+        if (!items.length) return;
+        if (e.key === 'ArrowDown') { e.preventDefault(); acIndex = Math.min(acIndex + 1, items.length - 1); items.forEach((el, i) => el.classList.toggle('meal-modal__autocomplete-item--active', i === acIndex)); }
+        if (e.key === 'ArrowUp')   { e.preventDefault(); acIndex = Math.max(acIndex - 1, 0);                items.forEach((el, i) => el.classList.toggle('meal-modal__autocomplete-item--active', i === acIndex)); }
+        if (e.key === 'Enter' && acIndex >= 0) { e.preventDefault(); titleInput.value = items[acIndex].dataset.title; acDropdown.hidden = true; acIndex = -1; }
+        if (e.key === 'Escape') acDropdown.hidden = true;
+      });
+
+      acDropdown.addEventListener('mousedown', (e) => {
+        const item = e.target.closest('.meal-modal__autocomplete-item');
+        if (item) { titleInput.value = item.dataset.title; acDropdown.hidden = true; }
+      });
+
+      // Zutaten
+      const ingList   = panel.querySelector('#ingredient-list');
+      const addIngBtn = panel.querySelector('#add-ingredient-btn');
+
+      addIngBtn.addEventListener('click', () => {
+        const tmp  = document.createElement('div');
+        tmp.innerHTML = ingredientRowHTML('', '', null);
+        const row = tmp.firstElementChild;
+        ingList.appendChild(row);
+        if (window.lucide) lucide.createIcons();
+        row.querySelector('input').focus();
+      });
+
+      ingList.addEventListener('click', (e) => {
+        const btn = e.target.closest('[data-action="remove-ingredient"]');
+        if (btn) btn.closest('.ingredient-row').remove();
+      });
+
+      // Einkaufslisten-Transfer
+      panel.querySelector('#transfer-btn')?.addEventListener('click', async () => {
+        const selectEl = panel.querySelector('#transfer-list-select');
+        const listId   = parseInt(selectEl?.value, 10);
+        if (!listId || !state.modal?.meal) return;
+        const btn = panel.querySelector('#transfer-btn');
+        btn.disabled = true;
+        try {
+          const res = await api.post(`/meals/${state.modal.meal.id}/to-shopping-list`, { listId });
+          if (res.data.transferred > 0) {
+            window.oikos?.showToast(`${res.data.transferred} Zutat${res.data.transferred !== 1 ? 'en' : ''} übertragen`, 'success');
+            await loadWeek(state.currentWeek);
+            closeModal();
+            renderWeekGrid();
+          } else {
+            window.oikos?.showToast('Alle Zutaten bereits übertragen', 'info');
+            btn.disabled = false;
+          }
+        } catch (err) {
+          window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error');
+          btn.disabled = false;
+        }
+      });
+
+      panel.querySelector('#modal-cancel').addEventListener('click', closeModal);
+      panel.querySelector('#modal-save').addEventListener('click', () => saveModal(panel));
+    },
   });
-
-  titleInput.addEventListener('keydown', (e) => {
-    const items = [...acDropdown.querySelectorAll('.meal-modal__autocomplete-item')];
-    if (!items.length) return;
-    if (e.key === 'ArrowDown') { e.preventDefault(); acIndex = Math.min(acIndex + 1, items.length - 1); items.forEach((el, i) => el.classList.toggle('meal-modal__autocomplete-item--active', i === acIndex)); }
-    if (e.key === 'ArrowUp')   { e.preventDefault(); acIndex = Math.max(acIndex - 1, 0);                items.forEach((el, i) => el.classList.toggle('meal-modal__autocomplete-item--active', i === acIndex)); }
-    if (e.key === 'Enter' && acIndex >= 0) { e.preventDefault(); titleInput.value = items[acIndex].dataset.title; acDropdown.hidden = true; acIndex = -1; }
-    if (e.key === 'Escape') acDropdown.hidden = true;
-  });
-
-  acDropdown.addEventListener('mousedown', (e) => {
-    const item = e.target.closest('.meal-modal__autocomplete-item');
-    if (item) { titleInput.value = item.dataset.title; acDropdown.hidden = true; }
-  });
-
-  // Zutaten
-  const ingList   = overlay.querySelector('#ingredient-list');
-  const addIngBtn = overlay.querySelector('#add-ingredient-btn');
-
-  addIngBtn.addEventListener('click', () => {
-    const tmp  = document.createElement('div');
-    tmp.innerHTML = ingredientRowHTML('', '', null);
-    const row = tmp.firstElementChild;
-    ingList.appendChild(row);
-    if (window.lucide) lucide.createIcons();
-    row.querySelector('input').focus();
-  });
-
-  ingList.addEventListener('click', (e) => {
-    const btn = e.target.closest('[data-action="remove-ingredient"]');
-    if (btn) btn.closest('.ingredient-row').remove();
-  });
-
-  // Einkaufslisten-Transfer Button im Modal
-  overlay.querySelector('#transfer-btn')?.addEventListener('click', async () => {
-    const selectEl = overlay.querySelector('#transfer-list-select');
-    const listId   = parseInt(selectEl?.value, 10);
-    if (!listId || !state.modal?.meal) return;
-    const btn = overlay.querySelector('#transfer-btn');
-    btn.disabled = true;
-    try {
-      const res = await api.post(`/meals/${state.modal.meal.id}/to-shopping-list`, { listId });
-      if (res.data.transferred > 0) {
-        window.oikos?.showToast(`${res.data.transferred} Zutat${res.data.transferred !== 1 ? 'en' : ''} übertragen`, 'success');
-        await loadWeek(state.currentWeek);
-        closeModal();
-        renderWeekGrid();
-      } else {
-        window.oikos?.showToast('Alle Zutaten bereits übertragen', 'info');
-        btn.disabled = false;
-      }
-    } catch (err) {
-      window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error');
-      btn.disabled = false;
-    }
-  });
-
-  // Schließen
-  overlay.querySelector('#modal-close').addEventListener('click',  closeModal);
-  overlay.querySelector('#modal-cancel').addEventListener('click', closeModal);
-  overlay.addEventListener('click', (e) => { if (e.target === overlay) closeModal(); });
-
-  // Speichern
-  overlay.querySelector('#modal-save').addEventListener('click', () => saveModal(overlay));
-
-  titleInput.focus();
 }
 
-function buildModalHTML({ mode, date, mealType, meal }) {
+function buildModalContent({ mode, date, mealType, meal }) {
   const isEdit   = mode === 'edit';
   const typeOpts = MEAL_TYPES.map((t) =>
     `<option value="${t.key}" ${t.key === mealType ? 'selected' : ''}>${t.label}</option>`
@@ -400,67 +396,57 @@ function buildModalHTML({ mode, date, mealType, meal }) {
   const hasIngOpen = isEdit && meal.ingredients?.some((i) => !i.on_shopping_list);
 
   return `
-    <div class="meal-modal" role="dialog" aria-modal="true">
-      <div class="meal-modal__header">
-        <h2 class="meal-modal__title">${isEdit ? 'Mahlzeit bearbeiten' : 'Mahlzeit hinzufügen'}</h2>
-        <button class="meal-modal__close" id="modal-close" aria-label="Schließen">
-          <i data-lucide="x" style="width:16px;height:16px;"></i>
-        </button>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)">
+      <div class="form-group" style="margin-bottom:0">
+        <label class="form-label" for="modal-date">Datum</label>
+        <input type="date" class="form-input" id="modal-date" value="${date}">
       </div>
-      <div class="meal-modal__body">
-        <div class="meal-modal__row">
-          <div class="form-group">
-            <label class="form-label" for="modal-date">Datum</label>
-            <input type="date" class="form-input" id="modal-date" value="${date}">
-          </div>
-          <div class="form-group">
-            <label class="form-label" for="modal-type">Mahlzeit</label>
-            <select class="form-input" id="modal-type">${typeOpts}</select>
-          </div>
-        </div>
-
-        <div class="form-group" style="position:relative;">
-          <label class="form-label" for="modal-title">Titel *</label>
-          <input type="text" class="form-input" id="modal-title"
-                 placeholder="z.B. Spaghetti Bolognese"
-                 value="${escHtml(isEdit ? meal.title : '')}"
-                 autocomplete="off">
-          <div id="modal-autocomplete" class="meal-modal__autocomplete" hidden></div>
-        </div>
-
-        <div class="form-group">
-          <label class="form-label" for="modal-notes">Notizen</label>
-          <textarea class="form-input" id="modal-notes" rows="2"
-                    placeholder="Optional…">${escHtml(isEdit && meal.notes ? meal.notes : '')}</textarea>
-        </div>
-
-        <div class="form-group">
-          <label class="form-label">Zutaten</label>
-          <div class="ingredient-list" id="ingredient-list">${ingRows}</div>
-          <button class="add-ingredient-btn" id="add-ingredient-btn" type="button">
-            <i data-lucide="plus" style="width:14px;height:14px;"></i>
-            Zutat hinzufügen
-          </button>
-        </div>
-
-        ${isEdit && hasIngOpen ? `
-        <div class="shopping-transfer">
-          <div class="shopping-transfer__label">
-            <i data-lucide="shopping-cart" style="width:14px;height:14px;"></i>
-            Zutaten auf Einkaufsliste übertragen
-          </div>
-          <select class="shopping-transfer__select" id="transfer-list-select">${listOpts}</select>
-          <button class="btn btn--secondary shopping-transfer__btn" id="transfer-btn" type="button">
-            Jetzt übertragen
-          </button>
-        </div>` : ''}
-      </div>
-      <div class="meal-modal__footer">
-        <button class="btn btn--secondary" id="modal-cancel">Abbrechen</button>
-        <button class="btn btn--primary" id="modal-save">${isEdit ? 'Speichern' : 'Hinzufügen'}</button>
+      <div class="form-group" style="margin-bottom:0">
+        <label class="form-label" for="modal-type">Mahlzeit</label>
+        <select class="form-input" id="modal-type">${typeOpts}</select>
       </div>
     </div>
-  `;
+
+    <div class="form-group" style="position:relative;">
+      <label class="form-label" for="modal-title">Titel *</label>
+      <input type="text" class="form-input" id="modal-title"
+             placeholder="z.B. Spaghetti Bolognese"
+             value="${escHtml(isEdit ? meal.title : '')}"
+             autocomplete="off">
+      <div id="modal-autocomplete" class="meal-modal__autocomplete" hidden></div>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label" for="modal-notes">Notizen</label>
+      <textarea class="form-input" id="modal-notes" rows="2"
+                placeholder="Optional…">${escHtml(isEdit && meal.notes ? meal.notes : '')}</textarea>
+    </div>
+
+    <div class="form-group">
+      <label class="form-label">Zutaten</label>
+      <div class="ingredient-list" id="ingredient-list">${ingRows}</div>
+      <button class="add-ingredient-btn" id="add-ingredient-btn" type="button">
+        <i data-lucide="plus" style="width:14px;height:14px;"></i>
+        Zutat hinzufügen
+      </button>
+    </div>
+
+    ${isEdit && hasIngOpen ? `
+    <div class="shopping-transfer">
+      <div class="shopping-transfer__label">
+        <i data-lucide="shopping-cart" style="width:14px;height:14px;"></i>
+        Zutaten auf Einkaufsliste übertragen
+      </div>
+      <select class="shopping-transfer__select" id="transfer-list-select">${listOpts}</select>
+      <button class="btn btn--secondary shopping-transfer__btn" id="transfer-btn" type="button">
+        Jetzt übertragen
+      </button>
+    </div>` : ''}
+
+    <div class="modal-panel__footer" style="border:none;padding:0;margin-top:var(--space-4)">
+      <button class="btn btn--secondary" id="modal-cancel">Abbrechen</button>
+      <button class="btn btn--primary" id="modal-save">${isEdit ? 'Speichern' : 'Hinzufügen'}</button>
+    </div>`;
 }
 
 function ingredientRowHTML(name, qty, id) {
@@ -476,7 +462,7 @@ function ingredientRowHTML(name, qty, id) {
 }
 
 function closeModal() {
-  document.querySelector('#meal-modal-overlay')?.remove();
+  closeSharedModal();
   state.modal = null;
 }
 
diff --git a/public/pages/notes.js b/public/pages/notes.js
index 20e6952..109178f 100644
--- a/public/pages/notes.js
+++ b/public/pages/notes.js
@@ -5,6 +5,7 @@
  */
 
 import { api } from '/api.js';
+import { openModal as openSharedModal, closeModal } from '/components/modal.js';
 
 // --------------------------------------------------------
 // Konstanten
@@ -71,7 +72,7 @@ export async function render(container, { user }) {
   }
   renderGrid();
 
-  const addHandler = () => openModal({ mode: 'create' });
+  const addHandler = () => openNoteModal({ mode: 'create' });
   _container.querySelector('#notes-add-btn').addEventListener('click', addHandler);
   _container.querySelector('#fab-new-note').addEventListener('click', addHandler);
 }
@@ -112,7 +113,7 @@ function renderGrid() {
     const card = e.target.closest('.note-card[data-id]');
     if (card) {
       const note = state.notes.find((n) => n.id === parseInt(card.dataset.id, 10));
-      if (note) openModal({ mode: 'edit', note });
+      if (note) openNoteModal({ mode: 'edit', note });
     }
   });
 }
@@ -152,110 +153,93 @@ function renderNoteCard(note) {
 // Modal
 // --------------------------------------------------------
 
-function openModal({ mode, note = null }) {
-  document.querySelector('#note-modal-overlay')?.remove();
-
-  const overlay = document.createElement('div');
-  overlay.id        = 'note-modal-overlay';
-  overlay.className = 'note-modal-overlay';
-
+function openNoteModal({ mode, note = null }) {
   const isEdit    = mode === 'edit';
   const selColor  = isEdit ? note.color : NOTE_COLORS[0];
 
-  overlay.innerHTML = `
-    <div class="note-modal" role="dialog" aria-modal="true">
-      <div class="note-modal__header">
-        <h2 class="note-modal__title">${isEdit ? 'Notiz bearbeiten' : 'Neue Notiz'}</h2>
-        <button class="note-modal__close" id="note-modal-close" aria-label="Schließen">
-          <i data-lucide="x" style="width:16px;height:16px;"></i>
-        </button>
-      </div>
-      <div class="note-modal__body">
-        <div class="form-group">
-          <label class="form-label" for="note-title">Titel (optional)</label>
-          <input type="text" class="form-input" id="note-title"
-                 placeholder="Kein Titel" value="${escHtml(isEdit && note.title ? note.title : '')}">
-        </div>
-        <div class="form-group">
-          <label class="form-label" for="note-content">Inhalt *</label>
-          <textarea class="form-input" id="note-content" rows="6"
-                    placeholder="Notiz eingeben… (** fett **, * kursiv *, - Liste)"
-                    style="resize:vertical;">${escHtml(isEdit ? note.content : '')}</textarea>
-        </div>
-        <div class="form-group">
-          <label class="form-label">Farbe</label>
-          <div class="note-color-picker">
-            ${NOTE_COLORS.map((c) => `
-              <div class="note-color-swatch ${c === selColor ? 'note-color-swatch--active' : ''}"
-                   data-color="${c}"
-                   style="background-color:${c};border:2px solid ${c === '#FFFFFF' ? '#E5E5EA' : c};"
-                   role="radio" tabindex="0" aria-label="Farbe ${c}"></div>
-            `).join('')}
-          </div>
-        </div>
-        <div class="form-group">
-          <label class="allday-toggle">
-            <input type="checkbox" id="note-pinned" ${isEdit && note.pinned ? 'checked' : ''}>
-            <span class="allday-toggle__label">Anpinnen (erscheint auf Dashboard)</span>
-          </label>
-        </div>
-      </div>
-      <div class="note-modal__footer">
-        <button class="btn btn--secondary" id="note-modal-cancel">Abbrechen</button>
-        <button class="btn btn--primary" id="note-modal-save">${isEdit ? 'Speichern' : 'Erstellen'}</button>
+  const content = `
+    <div class="form-group">
+      <label class="form-label" for="note-title">Titel (optional)</label>
+      <input type="text" class="form-input" id="note-title"
+             placeholder="Kein Titel" value="${escHtml(isEdit && note.title ? note.title : '')}">
+    </div>
+    <div class="form-group">
+      <label class="form-label" for="note-content">Inhalt *</label>
+      <textarea class="form-input" id="note-content" rows="6"
+                placeholder="Notiz eingeben… (** fett **, * kursiv *, - Liste)"
+                style="resize:vertical;">${escHtml(isEdit ? note.content : '')}</textarea>
+    </div>
+    <div class="form-group">
+      <label class="form-label">Farbe</label>
+      <div class="note-color-picker">
+        ${NOTE_COLORS.map((c) => `
+          <div class="note-color-swatch ${c === selColor ? 'note-color-swatch--active' : ''}"
+               data-color="${c}"
+               style="background-color:${c};border:2px solid ${c === '#FFFFFF' ? '#E5E5EA' : c};"
+               role="radio" tabindex="0" aria-label="Farbe ${c}"></div>
+        `).join('')}
       </div>
     </div>
-  `;
+    <div class="form-group">
+      <label class="allday-toggle">
+        <input type="checkbox" id="note-pinned" ${isEdit && note.pinned ? 'checked' : ''}>
+        <span class="allday-toggle__label">Anpinnen (erscheint auf Dashboard)</span>
+      </label>
+    </div>
 
-  document.body.appendChild(overlay);
-  if (window.lucide) lucide.createIcons();
+    <div class="modal-panel__footer" style="border:none;padding:0;margin-top:var(--space-4)">
+      <button class="btn btn--secondary" id="note-modal-cancel">Abbrechen</button>
+      <button class="btn btn--primary" id="note-modal-save">${isEdit ? 'Speichern' : 'Erstellen'}</button>
+    </div>`;
 
-  // Farb-Swatch
-  overlay.querySelectorAll('.note-color-swatch').forEach((sw) => {
-    sw.addEventListener('click', () => {
-      overlay.querySelectorAll('.note-color-swatch').forEach((s) => s.classList.remove('note-color-swatch--active'));
-      sw.classList.add('note-color-swatch--active');
-    });
+  openSharedModal({
+    title: isEdit ? 'Notiz bearbeiten' : 'Neue Notiz',
+    content,
+    size: 'md',
+    onSave(panel) {
+      // Farb-Swatch
+      panel.querySelectorAll('.note-color-swatch').forEach((sw) => {
+        sw.addEventListener('click', () => {
+          panel.querySelectorAll('.note-color-swatch').forEach((s) => s.classList.remove('note-color-swatch--active'));
+          sw.classList.add('note-color-swatch--active');
+        });
+      });
+
+      panel.querySelector('#note-modal-cancel').addEventListener('click', closeModal);
+
+      panel.querySelector('#note-modal-save').addEventListener('click', async () => {
+        const saveBtn = panel.querySelector('#note-modal-save');
+        const title   = panel.querySelector('#note-title').value.trim() || null;
+        const cnt     = panel.querySelector('#note-content').value.trim();
+        const color   = panel.querySelector('.note-color-swatch--active')?.dataset.color || NOTE_COLORS[0];
+        const pinned  = panel.querySelector('#note-pinned').checked ? 1 : 0;
+
+        if (!cnt) { window.oikos?.showToast('Inhalt ist erforderlich', 'error'); return; }
+
+        saveBtn.disabled    = true;
+        saveBtn.textContent = '…';
+
+        try {
+          if (mode === 'create') {
+            const res = await api.post('/notes', { title, content: cnt, color, pinned });
+            state.notes.unshift(res.data);
+          } else {
+            const res = await api.put(`/notes/${note.id}`, { title, content: cnt, color, pinned });
+            const idx = state.notes.findIndex((n) => n.id === note.id);
+            if (idx !== -1) state.notes[idx] = res.data;
+            state.notes.sort((a, b) => b.pinned - a.pinned);
+          }
+          closeModal();
+          renderGrid();
+          window.oikos?.showToast(mode === 'create' ? 'Notiz erstellt' : 'Notiz gespeichert', 'success');
+        } catch (err) {
+          window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error');
+          saveBtn.disabled    = false;
+          saveBtn.textContent = isEdit ? 'Speichern' : 'Erstellen';
+        }
+      });
+    },
   });
-
-  overlay.querySelector('#note-modal-close').addEventListener('click',  () => overlay.remove());
-  overlay.querySelector('#note-modal-cancel').addEventListener('click', () => overlay.remove());
-  overlay.addEventListener('click', (e) => { if (e.target === overlay) overlay.remove(); });
-
-  overlay.querySelector('#note-modal-save').addEventListener('click', async () => {
-    const saveBtn = overlay.querySelector('#note-modal-save');
-    const title   = overlay.querySelector('#note-title').value.trim() || null;
-    const content = overlay.querySelector('#note-content').value.trim();
-    const color   = overlay.querySelector('.note-color-swatch--active')?.dataset.color || NOTE_COLORS[0];
-    const pinned  = overlay.querySelector('#note-pinned').checked ? 1 : 0;
-
-    if (!content) { window.oikos?.showToast('Inhalt ist erforderlich', 'error'); return; }
-
-    saveBtn.disabled    = true;
-    saveBtn.textContent = '…';
-
-    try {
-      if (mode === 'create') {
-        const res = await api.post('/notes', { title, content, color, pinned });
-        state.notes.unshift(res.data);
-      } else {
-        const res = await api.put(`/notes/${note.id}`, { title, content, color, pinned });
-        const idx = state.notes.findIndex((n) => n.id === note.id);
-        if (idx !== -1) state.notes[idx] = res.data;
-        // Angepinnte nach oben sortieren
-        state.notes.sort((a, b) => b.pinned - a.pinned);
-      }
-      overlay.remove();
-      renderGrid();
-      window.oikos?.showToast(mode === 'create' ? 'Notiz erstellt' : 'Notiz gespeichert', 'success');
-    } catch (err) {
-      window.oikos?.showToast(err.data?.error ?? 'Fehler', 'error');
-      saveBtn.disabled    = false;
-      saveBtn.textContent = isEdit ? 'Speichern' : 'Erstellen';
-    }
-  });
-
-  overlay.querySelector('#note-content').focus();
 }
 
 // --------------------------------------------------------
diff --git a/public/styles/budget.css b/public/styles/budget.css
index 061ae67..75a5f7f 100644
--- a/public/styles/budget.css
+++ b/public/styles/budget.css
@@ -285,81 +285,8 @@
 }
 
 /* --------------------------------------------------------
- * Modal
+ * Budget-Modal Content-Styles (Overlay/Panel via shared modal.js)
  * -------------------------------------------------------- */
-.budget-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: var(--color-overlay);
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  animation: fadeIn var(--transition-fast) ease;
-}
-
-@media (min-width: 768px) {
-  .budget-modal-overlay {
-    align-items: center;
-    padding: var(--space-4);
-  }
-}
-
-.budget-modal {
-  background-color: var(--color-surface);
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-  width: 100%;
-  max-height: 90dvh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: slideUp var(--transition-base) ease;
-}
-
-@media (min-width: 768px) {
-  .budget-modal {
-    border-radius: var(--radius-lg);
-    max-width: 460px;
-    max-height: 80dvh;
-  }
-}
-
-.budget-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4);
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.budget-modal__title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-bold);
-}
-
-.budget-modal__close {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-full);
-  background: var(--color-border);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  min-height: unset;
-}
-
-.budget-modal__body {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
 
 /* Einnahme/Ausgabe-Toggle */
 .amount-type-toggle {
@@ -394,16 +321,3 @@
   color: #ffffff;
 }
 
-.budget-modal__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4);
-  border-top: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.budget-modal__footer-actions {
-  display: flex;
-  gap: var(--space-3);
-}
diff --git a/public/styles/calendar.css b/public/styles/calendar.css
index cb0e99e..5515d38 100644
--- a/public/styles/calendar.css
+++ b/public/styles/calendar.css
@@ -513,90 +513,8 @@
 }
 
 /* --------------------------------------------------------
- * Termin-Modal
+ * Calendar-Modal Content-Styles (Overlay/Panel via shared modal.js)
  * -------------------------------------------------------- */
-.event-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: var(--color-overlay);
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  animation: fadeIn var(--transition-fast) ease;
-}
-
-@media (min-width: 768px) {
-  .event-modal-overlay {
-    align-items: center;
-    padding: var(--space-4);
-  }
-}
-
-.event-modal {
-  background-color: var(--color-surface);
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-  width: 100%;
-  max-height: 90dvh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: slideUp var(--transition-base) ease;
-}
-
-@media (min-width: 768px) {
-  .event-modal {
-    border-radius: var(--radius-lg);
-    max-width: 560px;
-    max-height: 85dvh;
-  }
-}
-
-.event-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4);
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-  gap: var(--space-2);
-}
-
-.event-modal__title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-bold);
-  flex: 1;
-}
-
-.event-modal__close {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-full);
-  background: var(--color-border);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  min-height: unset;
-  flex-shrink: 0;
-}
-
-.event-modal__body {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-.event-modal__row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-3);
-}
 
 /* Farbauswahl */
 .color-picker {
@@ -636,20 +554,6 @@
   color: var(--color-text-primary);
 }
 
-.event-modal__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4);
-  border-top: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.event-modal__footer-actions {
-  display: flex;
-  gap: var(--space-3);
-}
-
 /* --------------------------------------------------------
  * Termin-Detailansicht (Popup beim Klick)
  * -------------------------------------------------------- */
diff --git a/public/styles/contacts.css b/public/styles/contacts.css
index a8ee17d..312ee97 100644
--- a/public/styles/contacts.css
+++ b/public/styles/contacts.css
@@ -230,88 +230,3 @@
   color: var(--color-text-secondary);
 }
 
-/* --------------------------------------------------------
- * Modal (gleiche Struktur wie andere Module)
- * -------------------------------------------------------- */
-.contact-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: var(--color-overlay);
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  animation: fadeIn var(--transition-fast) ease;
-}
-
-@media (min-width: 768px) {
-  .contact-modal-overlay {
-    align-items: center;
-    padding: var(--space-4);
-  }
-}
-
-.contact-modal {
-  background-color: var(--color-surface);
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-  width: 100%;
-  max-height: 90dvh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: slideUp var(--transition-base) ease;
-}
-
-@media (min-width: 768px) {
-  .contact-modal {
-    border-radius: var(--radius-lg);
-    max-width: 480px;
-    max-height: 85dvh;
-  }
-}
-
-.contact-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4);
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.contact-modal__title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-bold);
-}
-
-.contact-modal__close {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-full);
-  background: var(--color-border);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  min-height: unset;
-}
-
-.contact-modal__body {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
-.contact-modal__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4);
-  border-top: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
diff --git a/public/styles/meals.css b/public/styles/meals.css
index d81f27c..109e23c 100644
--- a/public/styles/meals.css
+++ b/public/styles/meals.css
@@ -244,102 +244,8 @@
 }
 
 /* --------------------------------------------------------
- * Modal — Mahlzeit erstellen / bearbeiten
+ * Meals-Modal Content-Styles (Overlay/Panel via shared modal.js)
  * -------------------------------------------------------- */
-.meal-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: var(--color-overlay);
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding: 0;
-  animation: fadeIn var(--transition-fast) ease;
-}
-
-@media (min-width: 768px) {
-  .meal-modal-overlay {
-    align-items: center;
-    padding: var(--space-4);
-  }
-}
-
-.meal-modal {
-  background-color: var(--color-surface);
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-  width: 100%;
-  max-height: 90dvh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: slideUp var(--transition-base) ease;
-}
-
-@media (min-width: 768px) {
-  .meal-modal {
-    border-radius: var(--radius-lg);
-    max-width: 520px;
-    max-height: 80dvh;
-  }
-}
-
-@keyframes slideUp {
-  from { transform: translateY(100%); opacity: 0; }
-  to   { transform: translateY(0);    opacity: 1; }
-}
-
-@media (min-width: 768px) {
-  @keyframes slideUp {
-    from { transform: translateY(20px); opacity: 0; }
-    to   { transform: translateY(0);    opacity: 1; }
-  }
-}
-
-.meal-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4);
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.meal-modal__title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-bold);
-}
-
-.meal-modal__close {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-full);
-  background: var(--color-border);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  min-height: unset;
-  flex-shrink: 0;
-}
-
-.meal-modal__body {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-4);
-}
-
-/* Formular-Zeile: Datum + Typ */
-.meal-modal__row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-3);
-}
 
 /* Autocomplete im Modal */
 .meal-modal__autocomplete {
@@ -459,17 +365,6 @@
   align-self: flex-start;
 }
 
-/* Modal-Footer */
-.meal-modal__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--space-3);
-  padding: var(--space-4);
-  border-top: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
 /* --------------------------------------------------------
  * Mahlzeit-Typ Labels (DE)
  * -------------------------------------------------------- */
diff --git a/public/styles/notes.css b/public/styles/notes.css
index bc9ea4a..15326df 100644
--- a/public/styles/notes.css
+++ b/public/styles/notes.css
@@ -214,81 +214,8 @@
 }
 
 /* --------------------------------------------------------
- * Modal
+ * Notes-Modal Content-Styles (Overlay/Panel via shared modal.js)
  * -------------------------------------------------------- */
-.note-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background-color: var(--color-overlay);
-  z-index: var(--z-modal);
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  animation: fadeIn var(--transition-fast) ease;
-}
-
-@media (min-width: 768px) {
-  .note-modal-overlay {
-    align-items: center;
-    padding: var(--space-4);
-  }
-}
-
-.note-modal {
-  background-color: var(--color-surface);
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-  width: 100%;
-  max-height: 90dvh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  animation: slideUp var(--transition-base) ease;
-}
-
-@media (min-width: 768px) {
-  .note-modal {
-    border-radius: var(--radius-lg);
-    max-width: 520px;
-    max-height: 80dvh;
-  }
-}
-
-.note-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--space-4);
-  border-bottom: 1px solid var(--color-border);
-  flex-shrink: 0;
-}
-
-.note-modal__title {
-  font-size: var(--text-lg);
-  font-weight: var(--font-weight-bold);
-}
-
-.note-modal__close {
-  width: 32px;
-  height: 32px;
-  border-radius: var(--radius-full);
-  background: var(--color-border);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-secondary);
-  min-height: unset;
-}
-
-.note-modal__body {
-  flex: 1;
-  overflow-y: auto;
-  padding: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
 
 /* Farb-Auswahl */
 .note-color-picker {
@@ -309,12 +236,3 @@
 .note-color-swatch:hover       { transform: scale(1.15); }
 .note-color-swatch--active     { border-color: var(--color-text-primary); transform: scale(1.1); }
 
-.note-modal__footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--space-3);
-  padding: var(--space-4);
-  border-top: 1px solid var(--color-border);
-  flex-shrink: 0;
-}