fix(tasks): reorder toolbar buttons; wrap list in tasks-body; remove flex-wrap on mobile

group-mode toggle moved before view toggle in markup order.
Filter panel, task list, and FAB wrapped in .tasks-body for scroll containment.
tasks-toolbar flex-wrap removed — actions stay on one line on narrow screens.

public/pages/tasks.js

@@ -1430,6 +1430,10 @@ export async function render(container, { user }) {
       <div class="tasks-toolbar">
         <h1 class="tasks-toolbar__title">${t('tasks.title')}</h1>
         <div class="tasks-toolbar__actions">
+          <div class="group-toggle" id="group-mode-toggle" ${isKanban ? 'style="display:none"' : ''}>
+            <button class="group-toggle__btn group-toggle__btn--active" data-mode="category">${t('tasks.categoryLabel')}</button>
+            <button class="group-toggle__btn" data-mode="due">${t('tasks.dueDateLabel')}</button>
+          </div>
           <div class="group-toggle" id="view-toggle">
             <button class="group-toggle__btn ${isKanban ? '' : 'group-toggle__btn--active'}" data-view="list"
                     title="${t('tasks.listView')}" aria-label="${t('tasks.listView')}">
@@ -1440,16 +1444,13 @@ export async function render(container, { user }) {
               <i data-lucide="columns" class="icon-md" aria-hidden="true"></i>
             </button>
           </div>
-          <div class="group-toggle" id="group-mode-toggle" ${isKanban ? 'style="display:none"' : ''}>
-            <button class="group-toggle__btn group-toggle__btn--active" data-mode="category">${t('tasks.categoryLabel')}</button>
-            <button class="group-toggle__btn" data-mode="due">${t('tasks.dueDateLabel')}</button>
-          </div>
           <button class="btn btn--primary" id="btn-new-task" style="gap:var(--space-1)">
             <i data-lucide="plus" class="icon-lg" aria-hidden="true"></i> ${t('tasks.newTask')}
           </button>
         </div>
       </div>
 
+      <div class="tasks-body">
         <div class="tasks-filters" id="filter-bar"></div>
         <div class="filter-panel" id="filter-panel" hidden></div>
 
@@ -1465,6 +1466,7 @@ export async function render(container, { user }) {
           <i data-lucide="plus" class="icon-2xl" aria-hidden="true"></i>
         </button>
       </div>
+    </div>
   `;
 
   if (window.lucide) window.lucide.createIcons();

public/styles/tasks.css

@@ -13,14 +13,17 @@
  * Seiten-Layout
  * -------------------------------------------------------- */
 .tasks-page {
-  padding: var(--space-4);
-  padding-bottom: var(--space-16);
   max-width: var(--content-max-width);
   margin: 0 auto;
 }
 
+.tasks-body {
+  padding: var(--space-4);
+  padding-bottom: var(--space-16);
+}
+
 @media (min-width: 1024px) {
-  .tasks-page {
+  .tasks-body {
     padding: var(--space-8);
     padding-bottom: var(--space-16);
   }
@@ -32,20 +35,18 @@
 .tasks-toolbar {
   display: flex;
   align-items: center;
-  gap: var(--space-3);
+  gap: var(--space-2);
-  margin-bottom: var(--space-4);
+  padding: var(--space-3) var(--space-4);
-  flex-wrap: wrap;
   border-top: 3px solid var(--module-accent);
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-surface);
 }
 
 .tasks-toolbar__title {
-  font-size: var(--text-2xl);
+  font-size: var(--text-lg);
   font-weight: var(--font-weight-bold);
-  flex: 1 1 auto;
+  flex: 1;
-  min-width: min-content;
   white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .tasks-toolbar__actions {
@@ -54,6 +55,7 @@
   gap: var(--space-2);
 }
 
+
 /* Gruppierungs-Toggle */
 .group-toggle {
   display: flex;
@@ -196,15 +198,15 @@
 }
 
 /* Filter-Panel */
-.filter-panel {
+.filter-panel:not([hidden]) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
   background-color: var(--color-surface);
   border: 1.5px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-3) var(--space-4);
   margin-bottom: var(--space-4);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
 }
 
 .filter-panel__group {