diff --git a/public/pages/dashboard.js b/public/pages/dashboard.js
index 14a49a1..45ff871 100644
--- a/public/pages/dashboard.js
+++ b/public/pages/dashboard.js
@@ -110,7 +110,8 @@ function showOnboarding(appContainer) {
 // Widget-Definitionen (Reihenfolge = Standard-Layout)
 // --------------------------------------------------------
 
-const WIDGET_IDS = ['weather', 'tasks', 'calendar', 'birthdays', 'budget', 'family', 'shopping', 'meals', 'notes'];
+// NEU — primäre Inhalte (tasks, calendar) ganz oben
+const WIDGET_IDS = ['tasks', 'calendar', 'weather', 'meals', 'shopping', 'birthdays', 'budget', 'family', 'notes'];
 
 const DEFAULT_WIDGET_CONFIG = WIDGET_IDS.map((id, i) => ({ id, visible: true, order: i }));
 
@@ -552,8 +553,13 @@ function renderDashboardOverview(user) {
 }
 
 function widgetTileClass(id) {
-  const wideIds = ['tasks', 'budget', 'notes', 'weather'];
-  return wideIds.includes(id) ? 'widget--wide' : '';
+  // Primär: immer 2 Spalten breit (die wichtigsten Inhalte)
+  const primaryIds = ['tasks', 'calendar'];
+  // Sekundär: 2 Spalten ab 3-Spalten-Breakpoint (1024px)
+  const secondaryIds = ['weather', 'shopping'];
+  if (primaryIds.includes(id))   return 'widget--wide';
+  if (secondaryIds.includes(id)) return 'widget--secondary';
+  return '';
 }
 
 function renderDashboardLayout(cfg, data, weather, currency) {
diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index 96f298d..fee6fec 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -193,6 +193,11 @@
   .widget--wide {
     grid-column: span 2;
   }
+
+  /* Sekundäre Widgets: 2 Spalten ab 3-Spalten-Grid */
+  .widget--secondary {
+    grid-column: span 2;
+  }
 }
 
 @media (min-width: 1280px) {
@@ -205,12 +210,22 @@
     grid-column: span 2;
   }
 
+  /* Im 4-Spalten-Grid: sekundäre Widgets nur 1 Spalte */
+  .widget--secondary {
+    grid-column: span 1;
+  }
+
   /* Greeting-Widget über alle 4 Spalten */
   .widget-greeting {
     grid-column: 1 / -1;
   }
 }
 
+/* Primäre Widgets: subtile Akzentlinie oben */
+.widget-wrapper.widget--wide > .widget {
+  border-top: 2px solid var(--active-module-accent, var(--color-accent));
+}
+
 /* --------------------------------------------------------
  * Begrüßungs-Widget
  * -------------------------------------------------------- */