feat: Phase 4 — Wetter-Widget, Wiederkehrende Aufgaben, Kanban-Ansicht, PWA

- server/routes/weather.js: OpenWeatherMap-Proxy (aktuelles Wetter + 3-Tage-Forecast,
  30-min-Cache, graceful fallback wenn kein API-Key gesetzt)
- public/pages/dashboard.js: Weather-Widget parallel mit Dashboard-Daten laden
- public/styles/dashboard.css: Weather-Widget-Styles (Gradient, Forecast-Strip)
- server/services/recurrence.js: RRULE-Parser (FREQ=DAILY/WEEKLY/MONTHLY, BYDAY,
  INTERVAL, UNTIL) + nextOccurrence()-Funktion
- server/routes/tasks.js: Bei PATCH /:id/status = done → nächste Instanz
  wiederkehrender Aufgaben automatisch anlegen
- public/pages/tasks.js: Kanban-Ansicht (3 Spalten: Offen/In Bearbeitung/Erledigt)
  mit HTML5 Drag & Drop, View-Toggle (Liste/Kanban)
- public/styles/tasks.css: Kanban-Board-Styles (Spalten, Cards, Drag-over-Highlight)
- public/sw.js: Cache-Version auf v2, alle Modul-CSS-Dateien im APP_SHELL-Cache

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/pages/dashboard.js

@@ -228,6 +228,54 @@ function renderPinnedNotes(notes) {
   return `<div class="widget">${header}<div class="widget__body">${items}</div></div>`;
 }
 
+// --------------------------------------------------------
+// Wetter-Widget
+// --------------------------------------------------------
+
+const WEATHER_ICON_BASE = 'https://openweathermap.org/img/wn/';
+
+function weatherIconUrl(icon) {
+  return `${WEATHER_ICON_BASE}${icon}@2x.png`;
+}
+
+function renderWeatherWidget(weather) {
+  if (!weather) return ''; // Kein API-Key → Widget ausblenden
+
+  const { city, current, forecast } = weather;
+
+  const forecastHtml = forecast.map((d) => {
+    const date = new Date(d.date + 'T12:00:00');
+    const label = date.toLocaleDateString('de-DE', { weekday: 'short' });
+    return `
+      <div class="weather-forecast__day">
+        <div class="weather-forecast__label">${label}</div>
+        <img class="weather-forecast__icon" src="${weatherIconUrl(d.icon)}"
+             alt="${d.desc}" width="32" height="32" loading="lazy">
+        <div class="weather-forecast__temps">
+          <span class="weather-forecast__high">${d.temp_max}°</span>
+          <span class="weather-forecast__low">${d.temp_min}°</span>
+        </div>
+      </div>`;
+  }).join('');
+
+  return `
+    <div class="widget weather-widget">
+      <div class="weather-widget__main">
+        <div class="weather-widget__left">
+          <div class="weather-widget__temp">${current.temp}°C</div>
+          <div class="weather-widget__desc">${current.desc}</div>
+          <div class="weather-widget__city">${city}</div>
+          <div class="weather-widget__meta">
+            Gefühlt ${current.feels_like}° · ${current.humidity}% Luftfeuchtigkeit · Wind ${current.wind_speed} km/h
+          </div>
+        </div>
+        <img class="weather-widget__icon" src="${weatherIconUrl(current.icon)}"
+             alt="${current.desc}" width="80" height="80" loading="lazy">
+      </div>
+      ${forecast.length ? `<div class="weather-forecast">${forecastHtml}</div>` : ''}
+    </div>`;
+}
+
 // --------------------------------------------------------
 // FAB Speed-Dial
 // --------------------------------------------------------
@@ -336,10 +384,16 @@ export async function render(container, { user }) {
   `;
   initFab(container);
 
-  // Daten laden
-  let data = { upcomingEvents: [], urgentTasks: [], todayMeals: [], pinnedNotes: [] };
+  // Daten laden (Dashboard + Wetter parallel)
+  let data    = { upcomingEvents: [], urgentTasks: [], todayMeals: [], pinnedNotes: [] };
+  let weather = null;
   try {
-    data = await api.get('/dashboard');
+    const [dashRes, weatherRes] = await Promise.all([
+      api.get('/dashboard'),
+      api.get('/weather').catch(() => ({ data: null })),
+    ]);
+    data    = dashRes;
+    weather = weatherRes.data ?? null;
   } catch (err) {
     console.error('[Dashboard] Ladefehler:', err.message);
     window.oikos?.showToast('Dashboard konnte nicht vollständig geladen werden.', 'warning');
@@ -350,6 +404,7 @@ export async function render(container, { user }) {
     <div class="dashboard">
       <div class="dashboard__grid">
         ${renderGreeting(user)}
+        ${renderWeatherWidget(weather)}
         ${renderUrgentTasks(data.urgentTasks ?? [])}
         ${renderUpcomingEvents(data.upcomingEvents ?? [])}
         ${renderTodayMeals(data.todayMeals ?? [])}

public/pages/tasks.js

@@ -306,11 +306,13 @@ function renderModal({ task = null, users = [] } = {}) {
 // --------------------------------------------------------
 
 let state = {
-  tasks:       [],
-  users:       [],
-  filters:     { status: '', priority: '', assigned_to: '' },
-  groupMode:   'category',   // 'category' | 'due'
+  tasks:         [],
+  users:         [],
+  filters:       { status: '', priority: '', assigned_to: '' },
+  groupMode:     'category',   // 'category' | 'due'
+  viewMode:      'list',       // 'list' | 'kanban'
   expandedTasks: new Set(),
+  dragTaskId:    null,
 };
 
 // --------------------------------------------------------
@@ -441,11 +443,159 @@ async function handleAddSubtask(parentId, container) {
   }
 }
 
+// --------------------------------------------------------
+// Kanban-Ansicht
+// --------------------------------------------------------
+
+const KANBAN_COLS = [
+  { status: 'open',        label: 'Offen',         colorVar: '--color-text-secondary' },
+  { status: 'in_progress', label: 'In Bearbeitung', colorVar: '--color-warning'        },
+  { status: 'done',        label: 'Erledigt',       colorVar: '--color-success'        },
+];
+
+function renderKanbanCard(task) {
+  const due = formatDueDate(task.due_date);
+  return `
+    <div class="kanban-card ${task.status === 'done' ? 'kanban-card--done' : ''}"
+         data-task-id="${task.id}" draggable="true">
+      <div class="kanban-card__title">${task.title}</div>
+      <div class="kanban-card__meta">
+        ${renderPriorityBadge(task.priority)}
+        ${due ? `<span class="due-date ${due.cls}"><i data-lucide="clock" style="width:10px;height:10px"></i> ${due.label}</span>` : ''}
+      </div>
+      ${task.assigned_color ? `
+        <div class="kanban-card__footer">
+          <div class="task-avatar" style="background-color:${task.assigned_color};width:22px;height:22px;font-size:9px"
+               title="${task.assigned_name ?? ''}">
+            ${initials(task.assigned_name ?? '')}
+          </div>
+        </div>` : ''}
+    </div>`;
+}
+
+function renderKanban(container) {
+  const listEl = container.querySelector('#task-list');
+  if (!listEl) return;
+
+  const grouped = {};
+  for (const col of KANBAN_COLS) grouped[col.status] = [];
+  for (const t of state.tasks) {
+    if (grouped[t.status]) grouped[t.status].push(t);
+    else grouped['open'].push(t);
+  }
+
+  listEl.innerHTML = `
+    <div class="kanban-board">
+      ${KANBAN_COLS.map((col) => `
+        <div class="kanban-col" data-status="${col.status}">
+          <div class="kanban-col__header">
+            <span class="kanban-col__title" style="color:${col.colorVar.startsWith('--') ? `var(${col.colorVar})` : col.colorVar}">
+              ${col.label}
+            </span>
+            <span class="kanban-col__count">${grouped[col.status].length}</span>
+          </div>
+          <div class="kanban-col__body" data-drop-zone="${col.status}">
+            ${grouped[col.status].map((t) => renderKanbanCard(t)).join('')}
+            <div class="kanban-drop-placeholder" hidden></div>
+          </div>
+        </div>
+      `).join('')}
+    </div>`;
+
+  if (window.lucide) window.lucide.createIcons();
+  wireKanbanDrag(container);
+  updateOverdueBadge();
+}
+
+function wireKanbanDrag(container) {
+  const board = container.querySelector('.kanban-board');
+  if (!board) return;
+
+  board.addEventListener('dragstart', (e) => {
+    const card = e.target.closest('.kanban-card[data-task-id]');
+    if (!card) return;
+    state.dragTaskId = card.dataset.taskId;
+    card.classList.add('kanban-card--dragging');
+    e.dataTransfer.effectAllowed = 'move';
+  });
+
+  board.addEventListener('dragend', (e) => {
+    const card = e.target.closest('.kanban-card[data-task-id]');
+    if (card) card.classList.remove('kanban-card--dragging');
+    board.querySelectorAll('.kanban-drop-placeholder').forEach((el) => el.hidden = true);
+    board.querySelectorAll('.kanban-col__body--over').forEach((el) =>
+      el.classList.remove('kanban-col__body--over')
+    );
+    state.dragTaskId = null;
+  });
+
+  board.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+    const zone = e.target.closest('[data-drop-zone]');
+    if (!zone) return;
+    board.querySelectorAll('.kanban-col__body--over').forEach((el) =>
+      el.classList.remove('kanban-col__body--over')
+    );
+    zone.classList.add('kanban-col__body--over');
+  });
+
+  board.addEventListener('dragleave', (e) => {
+    const zone = e.target.closest('[data-drop-zone]');
+    if (zone && !zone.contains(e.relatedTarget)) {
+      zone.classList.remove('kanban-col__body--over');
+    }
+  });
+
+  board.addEventListener('drop', async (e) => {
+    e.preventDefault();
+    const zone = e.target.closest('[data-drop-zone]');
+    if (!zone || !state.dragTaskId) return;
+    zone.classList.remove('kanban-col__body--over');
+
+    const newStatus = zone.dataset.dropZone;
+    const taskId    = state.dragTaskId;
+    const task      = state.tasks.find((t) => String(t.id) === String(taskId));
+    if (!task || task.status === newStatus) return;
+
+    // Optimistisches Update
+    task.status = newStatus;
+    renderKanban(container);
+
+    try {
+      await api.patch(`/tasks/${taskId}/status`, { status: newStatus });
+      await loadTasks(container); // sync
+    } catch (err) {
+      window.oikos.showToast(err.message, 'danger');
+      await loadTasks(container);
+    }
+  });
+
+  // Klick auf Kanban-Card öffnet Edit-Modal
+  board.addEventListener('click', async (e) => {
+    if (e.target.closest('[draggable]')) {
+      const card = e.target.closest('.kanban-card[data-task-id]');
+      if (!card) return;
+      try {
+        const task = await loadTaskForEdit(card.dataset.taskId);
+        openModal(renderModal({ task, users: state.users }));
+        wireModalEvents(container);
+      } catch (err) {
+        window.oikos.showToast('Aufgabe konnte nicht geladen werden.', 'danger');
+      }
+    }
+  });
+}
+
 // --------------------------------------------------------
 // Partielle DOM-Updates
 // --------------------------------------------------------
 
 function renderTaskList(container) {
+  if (state.viewMode === 'kanban') {
+    renderKanban(container);
+    return;
+  }
   const listEl = container.querySelector('#task-list');
   if (!listEl) return;
   listEl.innerHTML = renderTaskGroups(state.tasks, state.groupMode);
@@ -532,11 +682,30 @@ function wireFilterChips(container) {
   });
 }
 
+function wireViewToggle(container) {
+  const toggle = container.querySelector('#view-toggle');
+  if (!toggle) return;
+  toggle.querySelectorAll('[data-view]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      state.viewMode = btn.dataset.view;
+      toggle.querySelectorAll('[data-view]').forEach((b) =>
+        b.classList.toggle('group-toggle__btn--active', b.dataset.view === state.viewMode)
+      );
+      // Gruppierungs-Toggle nur in Listenansicht sinnvoll
+      const groupToggle = container.querySelector('#group-mode-toggle');
+      if (groupToggle) groupToggle.style.display = state.viewMode === 'list' ? '' : 'none';
+      renderTaskList(container);
+    });
+  });
+}
+
 function wireGroupToggle(container) {
-  container.querySelectorAll('.group-toggle__btn').forEach((btn) => {
-    btn.addEventListener('click', async () => {
+  const toggle = container.querySelector('#group-mode-toggle');
+  if (!toggle) return;
+  toggle.querySelectorAll('.group-toggle__btn').forEach((btn) => {
+    btn.addEventListener('click', () => {
       state.groupMode = btn.dataset.mode;
-      container.querySelectorAll('.group-toggle__btn').forEach((b) =>
+      toggle.querySelectorAll('.group-toggle__btn').forEach((b) =>
         b.classList.toggle('group-toggle__btn--active', b.dataset.mode === state.groupMode)
       );
       renderTaskList(container);
@@ -625,7 +794,17 @@ export async function render(container, { user }) {
       <div class="tasks-toolbar">
         <h1 class="tasks-toolbar__title">Aufgaben</h1>
         <div class="tasks-toolbar__actions">
-          <div class="group-toggle">
+          <div class="group-toggle" id="view-toggle">
+            <button class="group-toggle__btn group-toggle__btn--active" data-view="list"
+                    title="Listenansicht" aria-label="Listenansicht">
+              <i data-lucide="list" style="width:14px;height:14px;pointer-events:none"></i>
+            </button>
+            <button class="group-toggle__btn" data-view="kanban"
+                    title="Kanban-Ansicht" aria-label="Kanban-Ansicht">
+              <i data-lucide="columns" style="width:14px;height:14px;pointer-events:none"></i>
+            </button>
+          </div>
+          <div class="group-toggle" id="group-mode-toggle">
             <button class="group-toggle__btn group-toggle__btn--active" data-mode="category">Kategorie</button>
             <button class="group-toggle__btn" data-mode="due">Fälligkeit</button>
           </div>
@@ -666,6 +845,7 @@ export async function render(container, { user }) {
   }
 
   // UI verdrahten
+  wireViewToggle(container);
   wireGroupToggle(container);
   wireNewTaskBtn(container);
   wireTaskList(container);

public/styles/dashboard.css

@@ -329,6 +329,95 @@
   overflow: hidden;
 }
 
+/* --------------------------------------------------------
+ * Wetter-Widget
+ * -------------------------------------------------------- */
+.weather-widget {
+  background: linear-gradient(135deg, #1a73e8 0%, #0f4fa8 100%);
+  color: #ffffff;
+}
+
+.weather-widget__main {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+}
+
+.weather-widget__temp {
+  font-size: var(--text-4xl, 2.25rem);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  margin-bottom: var(--space-1);
+}
+
+.weather-widget__desc {
+  font-size: var(--text-base);
+  font-weight: var(--font-weight-medium);
+  text-transform: capitalize;
+  margin-bottom: 2px;
+}
+
+.weather-widget__city {
+  font-size: var(--text-sm);
+  opacity: 0.85;
+  margin-bottom: var(--space-2);
+}
+
+.weather-widget__meta {
+  font-size: var(--text-xs);
+  opacity: 0.75;
+  line-height: 1.4;
+}
+
+.weather-widget__icon {
+  width: 80px;
+  height: 80px;
+  flex-shrink: 0;
+  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
+}
+
+.weather-forecast {
+  display: flex;
+  border-top: 1px solid rgba(255,255,255,0.2);
+  padding: var(--space-3) var(--space-5);
+  gap: var(--space-4);
+}
+
+.weather-forecast__day {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  flex: 1;
+}
+
+.weather-forecast__label {
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  opacity: 0.85;
+  text-transform: capitalize;
+}
+
+.weather-forecast__icon {
+  width: 32px;
+  height: 32px;
+}
+
+.weather-forecast__temps {
+  display: flex;
+  gap: var(--space-2);
+  font-size: var(--text-xs);
+}
+
+.weather-forecast__high {
+  font-weight: var(--font-weight-semibold);
+}
+
+.weather-forecast__low {
+  opacity: 0.65;
+}
+
 /* --------------------------------------------------------
  * Skeleton-Zustände (pro Widget)
  * -------------------------------------------------------- */

public/styles/tasks.css

@@ -495,6 +495,128 @@
   margin-left: auto;
 }
 
+/* --------------------------------------------------------
+ * Kanban-Board
+ * -------------------------------------------------------- */
+.kanban-board {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-3);
+  align-items: start;
+  min-height: 60vh;
+}
+
+@media (max-width: 640px) {
+  .kanban-board {
+    grid-template-columns: 1fr;
+  }
+}
+
+.kanban-col {
+  background-color: var(--color-surface-2);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  min-height: 200px;
+}
+
+.kanban-col__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1.5px solid var(--color-border);
+}
+
+.kanban-col__title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.kanban-col__count {
+  font-size: var(--text-xs);
+  color: var(--color-text-disabled);
+  background-color: var(--color-surface);
+  padding: 2px var(--space-2);
+  border-radius: var(--radius-full);
+}
+
+.kanban-col__body {
+  flex: 1;
+  padding: var(--space-3);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  min-height: 80px;
+  transition: background-color var(--transition-fast);
+}
+
+.kanban-col__body--over {
+  background-color: var(--color-accent-light);
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+}
+
+.kanban-card {
+  background-color: var(--color-surface);
+  border-radius: var(--radius-sm);
+  box-shadow: var(--shadow-sm);
+  padding: var(--space-3);
+  cursor: grab;
+  user-select: none;
+  transition: box-shadow var(--transition-fast), opacity var(--transition-fast),
+              transform var(--transition-fast);
+}
+
+.kanban-card:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.kanban-card--dragging {
+  opacity: 0.4;
+  cursor: grabbing;
+  transform: rotate(1.5deg);
+}
+
+.kanban-card--done {
+  opacity: 0.6;
+}
+
+.kanban-card__title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  margin-bottom: var(--space-2);
+  line-height: 1.4;
+}
+
+.kanban-card--done .kanban-card__title {
+  text-decoration: line-through;
+  color: var(--color-text-secondary);
+}
+
+.kanban-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+  margin-bottom: var(--space-2);
+}
+
+.kanban-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--space-2);
+}
+
+.kanban-drop-placeholder {
+  height: 60px;
+  border: 2px dashed var(--color-accent);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-accent-light);
+  opacity: 0.5;
+}
+
 /* --------------------------------------------------------
  * Leer-Zustand
  * -------------------------------------------------------- */

public/sw.js

@@ -4,7 +4,7 @@
  * Abhängigkeiten: keine
  */
 
-const CACHE_NAME = 'oikos-v1';
+const CACHE_NAME = 'oikos-v2';
 
 // App-Shell-Ressourcen, die offline verfügbar sein sollen
 const APP_SHELL = [
@@ -16,6 +16,14 @@ const APP_SHELL = [
   '/styles/reset.css',
   '/styles/layout.css',
   '/styles/login.css',
+  '/styles/dashboard.css',
+  '/styles/tasks.css',
+  '/styles/shopping.css',
+  '/styles/meals.css',
+  '/styles/calendar.css',
+  '/styles/notes.css',
+  '/styles/contacts.css',
+  '/styles/budget.css',
   '/manifest.json',
 ];