diff --git a/e2e/calendar.spec.js b/e2e/calendar.spec.js
index 507422f..467e482 100644
--- a/e2e/calendar.spec.js
+++ b/e2e/calendar.spec.js
@@ -2573,4 +2573,91 @@ test.describe('FreeShard WebCalendar E2E Suite', () => {
       }
     }
   });
+
+  test.describe('Issue #110 — stylesheet and markup agree', () => {
+    // Computed value of a design token, as an rgb() string comparable to getComputedStyle colours.
+    async function tokenColor(page, token) {
+      return page.evaluate(t => {
+        const probe = document.createElement('span');
+        probe.style.color = `var(${t})`;
+        document.body.appendChild(probe);
+        const c = getComputedStyle(probe).color;
+        probe.remove();
+        return c;
+      }, token);
+    }
+
+    test('a warning toast carries its own glyph and the warning border colour', async ({ page }) => {
+      await page.goto('/');
+      await expect(page.locator('#app')).not.toHaveClass(/hidden/, { timeout: 10000 });
+      await page.locator('#calendar-list .calendar-item').first().locator('[data-share-cal]').click();
+      await expect(page.locator('#share-cal-dialog-backdrop')).toBeVisible();
+
+      // Adding a share with nothing entered is the share flow's warning.
+      await page.click('#share-add-btn');
+      const toast = page.locator('#toast-container .toast.warning');
+      await expect(toast).toBeVisible();
+      await expect(toast.locator('.toast-icon')).not.toHaveText('ℹ');
+      await expect(toast.locator('.toast-icon')).toHaveText('⚠');
+      const border = await toast.evaluate(el => {
+        const s = getComputedStyle(el);
+        return { width: s.borderLeftWidth, color: s.borderLeftColor };
+      });
+      expect(border).toEqual({ width: '3px', color: await tokenColor(page, '--warning') });
+
+      // The user-search suggestions sit over the dialog's content on an opaque surface.
+      await page.locator('#share-search-input').fill('testuser');
+      const dropdown = page.locator('#share-autocomplete-dropdown');
+      await expect(dropdown).not.toHaveClass(/hidden/, { timeout: 10000 });
+      expect(await dropdown.evaluate(el => getComputedStyle(el).backgroundColor)).toBe(await tokenColor(page, '--surface'));
+    });
+
+    test('an attendee\'s participation status renders as a muted pill', async ({ page }) => {
+      await page.goto('/');
+      await expect(page.locator('#app')).not.toHaveClass(/hidden/, { timeout: 10000 });
+      await page.click('#new-event-btn');
+      await page.fill('#ev-attendee-name', 'Test User');
+      await page.fill('#ev-attendee-email', 'testuser@example.com');
+      await page.click('#add-attendee-btn');
+
+      const status = page.locator('#ev-attendee-list .attendee-status').first();
+      await expect(status).toHaveText('Ausstehend');
+      const style = await status.evaluate(el => {
+        const s = getComputedStyle(el);
+        return { color: s.color, paddingLeft: s.paddingLeft, borderRadius: s.borderTopLeftRadius };
+      });
+      expect(style.color).toBe(await tokenColor(page, '--ink-muted'));
+      expect(parseFloat(style.paddingLeft)).toBeGreaterThan(0);
+      expect(parseFloat(style.borderRadius)).toBeGreaterThan(0);
+    });
+
+    test('empty lists use the muted empty-state text', async ({ page }) => {
+      await page.route('**/api/msgraph/accounts', route => route.fulfill({
+        contentType: 'application/json',
+        body: JSON.stringify({ success: true, available: true, accounts: [] }),
+      }));
+      await page.goto('/');
+      await expect(page.locator('#app')).not.toHaveClass(/hidden/, { timeout: 10000 });
+      await page.click('#sidebar-settings-btn');
+      await page.click('#settings-add-account-btn');
+      await page.click('#btn-link-msgraph');
+      await expect(page.locator('#msgraph-modal-backdrop')).not.toHaveClass(/hidden/);
+
+      const empty = page.locator('#msgraph-accounts-list .empty-state');
+      await expect(empty).toHaveText('Keine Office 365 Konten verbunden.');
+      expect(await empty.evaluate(el => getComputedStyle(el).color)).toBe(await tokenColor(page, '--ink-muted'));
+    });
+
+    test('the welcome dialog\'s calendar glyph is drawn in the accent line colour', async ({ page }) => {
+      // Registered after the suite's init script, so it runs later and re-enables the welcome dialog.
+      await page.addInitScript(() => {
+        if (window.origin !== 'null') window.localStorage.removeItem('welcome-popup-closed');
+      });
+      await page.goto('/');
+      await expect(page.locator('#welcome-modal-backdrop')).not.toHaveClass(/hidden/, { timeout: 10000 });
+      const glyph = page.locator('#welcome-modal .modal-body svg').first();
+      expect(await glyph.evaluate(el => getComputedStyle(el).stroke)).toBe(await tokenColor(page, '--line'));
+      await page.click('#welcome-btn-close');
+    });
+  });
 });
diff --git a/public/css/app.css b/public/css/app.css
index ef7673d..e83ce14 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -119,11 +119,6 @@ a { color: inherit; text-decoration: none; }
   text-transform: uppercase; letter-spacing: var(--ls-label);
   color: var(--ink-muted);
 }
-.fs-mono {
-  font: 400 var(--fs-mono)/1 var(--font-mono);
-  letter-spacing: var(--ls-mono);
-  color: var(--ink-muted);
-}
 
 /* ── 5. Loading Screen ────────────────────────────────────────────────────── */
 .loading-screen {
@@ -158,7 +153,7 @@ a { color: inherit; text-decoration: none; }
   background: var(--surface);
   border-right: var(--border-w) solid var(--border);
   display: flex; flex-direction: column;
-  overflow-y: auto; overflow-x: hidden;
+  overflow: hidden; /* .sidebar-content scrolls; the footer stays put */
   height: 100%;
   position: relative; /* containing block for .sidebar-settings-drawer */
 }
@@ -240,7 +235,7 @@ a { color: inherit; text-decoration: none; }
 }
 
 .mini-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
-.mini-cal-dow, .mini-cal-day-name {
+.mini-cal-dow {
   font: 600 9px/1 var(--font-ui);
   text-transform: uppercase; letter-spacing: 0.1em;
   color: var(--ink-muted); text-align: center;
@@ -516,6 +511,10 @@ a { color: inherit; text-decoration: none; }
 .event-chip-title {
   overflow: hidden; text-overflow: ellipsis;
 }
+.recur-icon {
+  margin-left: 4px; flex-shrink: 0;
+  display: inline-block; vertical-align: middle;
+}
 .month-more {
   font: 600 10px/1 var(--font-ui);
   color: var(--ink-muted); margin-top: 2px; cursor: pointer;
@@ -938,6 +937,18 @@ textarea.form-input { height: auto; padding: var(--sp-3); resize: vertical; }
 }
 .attendee-name  { font-size: var(--fs-small); color: var(--ink); }
 .attendee-email { font-size: 11px; color: var(--ink-muted); font-family: var(--font-mono); }
+/* PARTSTAT pill; the second class is the RFC 5545 value */
+.attendee-status {
+  margin-left: auto;
+  padding: 1px var(--sp-2);
+  border: var(--border-w) solid currentColor;
+  border-radius: var(--radius-pill);
+  font-size: 11px; white-space: nowrap;
+  color: var(--ink-muted);
+}
+.attendee-status.ACCEPTED  { color: var(--success); }
+.attendee-status.TENTATIVE { color: var(--warning); }
+.attendee-status.DECLINED  { color: var(--danger); }
 .attendee-remove { color: var(--ink-muted); transition: color var(--t); padding: 2px; border-radius: 4px; }
 .attendee-remove:hover { color: var(--danger); }
 .attendee-remove svg { width: 13px; height: 13px; display: block; }
@@ -1092,15 +1103,10 @@ textarea.form-input { height: auto; padding: var(--sp-3); resize: vertical; }
 .toast.success { border-left: 3px solid var(--data); }
 .toast.error   { border-left: 3px solid var(--danger); }
 .toast.info    { border-left: 3px solid var(--line); }
+.toast.warning { border-left: 3px solid var(--warning); }
 
 /* ── 19. Keyboard focus chrome ────────────────────────────────────────────── */
 /* Teal outline + slight scale on keyboard nav only (DECISIONS.md) */
-.fs-focusable { transform-origin: center; }
-.fs-focusable:focus-visible {
-  outline: 2px solid var(--line);
-  outline-offset: 3px;
-  position: relative; z-index: 3;
-}
 /* Buttons & tiles get mild scale; full-width rows do not */
 .toolbar-btn:focus-visible,
 .btn:focus-visible {
@@ -1121,7 +1127,6 @@ textarea.form-input { height: auto; padding: var(--sp-3); resize: vertical; }
   }
   .sidebar.open { transform: translateX(0); visibility: visible; transition: transform var(--t-slow); }
   .app { flex-direction: column; }
-  .month-grid-header-day { font-size: 9px; }
 
   /* Responsive Grid-based Toolbar Layout */
   .toolbar {
@@ -1312,26 +1317,6 @@ textarea.form-input, .form-textarea {
 }
 .onboarding-form { display: flex; flex-direction: column; }
 
-/* Sidebar section/account classes the old HTML used — now remapped */
-.sidebar-title  { font: 600 var(--fs-h3)/1 var(--font-ui); color: var(--line); }
-
-/* Calendar/Account list sections — old class names still referenced */
-.calendar-list-section,
-.account-list-section {
-  padding: var(--sp-4) var(--sp-3);
-  border-top: var(--border-w) solid var(--border);
-}
-.section-header {
-  display: flex; align-items: center; justify-content: space-between;
-  margin-bottom: var(--sp-2);
-}
-.section-title {
-  font: 600 var(--fs-label)/1 var(--font-ui);
-  text-transform: uppercase; letter-spacing: var(--ls-label);
-  color: var(--ink-muted);
-}
-
-/* Mini calendar section compatibility */
 .mini-calendar { padding: 0 var(--sp-1); }
 
 
@@ -1434,7 +1419,14 @@ textarea.form-input, .form-textarea {
   background: rgba(255, 255, 255, 0.04);
   border-color: #555;
 }
-.oauth-icon {
+.btn-msgraph {
+  margin-top: 8px;
+  background: #0078D4; /* Microsoft brand blue */
+  border-color: #0078D4;
+  color: #ffffff;
+}
+.oauth-icon,
+.google-badge-icon {
   flex-shrink: 0;
 }
 .modal-divider {
@@ -1459,14 +1451,6 @@ textarea.form-input, .form-textarea {
 }
 
 /* Sidebar Restructuring & Drawer */
-/* NOTE: must not set `position` here — this rule comes after the mobile media
-   query and would override the off-canvas `position: fixed` of the sidebar. */
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden !important;
-}
 .sidebar-content {
   flex: 1;
   overflow-y: auto;
@@ -1687,6 +1671,7 @@ textarea.form-input, .form-textarea {
 [data-theme="dark"] .kanban-card {
   background: var(--surface-bg-alt);
 }
+.kanban-card-body { min-width: 0; }
 .kanban-card-title {
   font-weight: 600;
   font-size: 14px;
@@ -1756,6 +1741,12 @@ textarea.form-input, .form-textarea {
 }
 
 /* ── Empty State Styles ─────────────────────────────────────────────────── */
+.empty-state {
+  padding: var(--sp-4) var(--sp-3);
+  text-align: center;
+  font-size: var(--fs-small);
+  color: var(--ink-muted);
+}
 .kanban-empty-state {
   margin: 12px 0 16px 0;
   padding: 16px 20px;
@@ -1817,6 +1808,9 @@ textarea.form-input, .form-textarea {
   margin-top: 3px;
   cursor: pointer;
 }
+.sidebar-task-info { flex: 1; min-width: 0; cursor: pointer; }
+.sidebar-task-meta { font-size: 0.75rem; color: var(--ink-muted); }
+.sidebar-tasks-empty { font-size: 0.78rem; color: var(--ink-muted); padding: 4px 8px; }
 .sidebar-task-title {
   font-size: 0.82rem;
   font-weight: 500;
@@ -1960,11 +1954,6 @@ textarea.form-input, .form-textarea {
   background: #c69500;
 }
 
-/* ── Print & Vector PDF Export Utility Classes ────────────────────────────────── */
-.print-only {
-  display: none !important;
-}
-
 /* ── Print & Vector PDF Export Styles ─────────────────────────────────────── */
 @media print {
   body {
@@ -1983,19 +1972,11 @@ textarea.form-input, .form-textarea {
   .status-bar,
   .modal-backdrop,
   .popover,
-  .notifications-toast,
   #kanban-side-drawer,
-  .drawer-backdrop,
   .shortcuts-modal-backdrop,
-  .toolbar-tz-select-wrapper,
-  .quick-add-container,
-  .header-actions,
-  .no-print {
+  .toolbar-tz-select-wrapper {
     display: none !important;
   }
-  .print-only {
-    display: block !important;
-  }
   .app {
     display: block !important;
     overflow: visible !important;
@@ -2018,7 +1999,8 @@ textarea.form-input, .form-textarea {
   }
   .calendar-container,
   .month-grid,
-  .week-grid,
+  .week-grid-body,
+  .day-grid-body,
   .agenda-view,
   .kanban-board {
     width: 100% !important;
@@ -2028,11 +2010,11 @@ textarea.form-input, .form-textarea {
     break-inside: avoid !important;
     page-break-inside: avoid !important;
   }
-  .month-day-cell,
+  .month-day,
   .week-day-col,
   .event-chip,
   .kanban-card,
-  .agenda-item {
+  .agenda-event {
     border: 1px solid #000 !important;
     color: #000 !important;
     background: #ffffff !important;
diff --git a/public/index.html b/public/index.html
index e5ec01f..2c3bcd2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -688,11 +688,11 @@ <h3 class="modal-title" id="event-modal-title">Neuer Termin</h3>
         </div>
 
         <div class="form-row">
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="ev-attachment-url">Dateianhang / Drive Link</label>
             <input class="form-input" id="ev-attachment-url" type="url" placeholder="https://files.freeshard.local/d/..." />
           </div>
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="ev-attachment-name">Dateiname (optional)</label>
             <input class="form-input" id="ev-attachment-name" type="text" placeholder="z. B. Dokument.pdf" />
           </div>
@@ -762,7 +762,7 @@ <h3 class="modal-title" id="account-modal-title">Account hinzufügen</h3>
           </svg>
           Mit Google Kalender verbinden
         </button>
-        <button type="button" class="btn btn-oauth btn-msgraph" id="btn-link-msgraph" style="margin-top: 8px; background-color: #0078D4; color: #ffffff;">
+        <button type="button" class="btn btn-oauth btn-msgraph" id="btn-link-msgraph">
           <svg class="oauth-icon" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
             <path d="M11.4 24H0V12.6h11.4V24zM24 24H12.6V12.6H24V24zM11.4 11.4H0V0h11.4v11.4zM24 11.4H12.6V0H24v11.4z"/>
           </svg>
@@ -890,7 +890,7 @@ <h3 class="modal-title" id="welcome-modal-title">Willkommen beim WebCalendar</h3
     </div>
     <div class="modal-body" style="text-align: center; padding: 20px 10px;">
       <div style="display: flex; justify-content: center; margin-bottom: 16px;">
-        <svg viewBox="0 0 24 24" fill="none" stroke="var(--primary)" stroke-width="1.5" width="48" height="48">
+        <svg viewBox="0 0 24 24" fill="none" stroke="var(--line)" stroke-width="1.5" width="48" height="48">
           <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
           <line x1="16" y1="2" x2="16" y2="6"/>
           <line x1="8" y1="2" x2="8" y2="6"/>
@@ -984,7 +984,7 @@ <h3 class="modal-title" id="task-modal-title">Neue Aufgabe</h3>
           <textarea class="form-input" id="task-description" rows="2" placeholder="Zusätzliche Details..."></textarea>
         </div>
         <div class="form-row">
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="task-status">Status</label>
             <select class="form-select" id="task-status">
               <option value="NEEDS-ACTION">Zu erledigen (Offen)</option>
@@ -992,33 +992,33 @@ <h3 class="modal-title" id="task-modal-title">Neue Aufgabe</h3>
               <option value="COMPLETED">Erledigt</option>
             </select>
           </div>
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="task-calendar-id">Kalender</label>
             <select class="form-select" id="task-calendar-id"></select>
           </div>
         </div>
         <div class="form-row">
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="task-dtstart">Startdatum</label>
             <input class="form-input" id="task-dtstart" type="datetime-local" />
           </div>
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="task-due">Fälligkeitsdatum</label>
             <input class="form-input" id="task-due" type="datetime-local" />
           </div>
         </div>
         <div class="form-row">
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="task-duration">Dauer (z. B. PT2H)</label>
             <input class="form-input" id="task-duration" type="text" placeholder="z. B. PT2H oder PT30M" />
           </div>
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="task-percent-complete">Fortschritt (%)</label>
             <input class="form-input" id="task-percent-complete" type="number" min="0" max="100" placeholder="0 - 100" />
           </div>
         </div>
         <div class="form-row">
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="task-priority">Priorität</label>
             <select class="form-select" id="task-priority">
               <option value="">Keine</option>
@@ -1027,7 +1027,7 @@ <h3 class="modal-title" id="task-modal-title">Neue Aufgabe</h3>
               <option value="3">Niedrig (3)</option>
             </select>
           </div>
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="task-recurrence">Wiederholung (RRULE)</label>
             <select class="form-select" id="task-recurrence">
               <option value="">Keine Wiederholung</option>
@@ -1116,21 +1116,21 @@ <h3 class="modal-title" id="availability-modal-title">Öffentliche Termin-Buchun
       <form id="availability-form" style="margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 16px;">
         <h4 style="margin-top:0; margin-bottom:12px;">Neue Buchungsseite erstellen</h4>
         <div class="form-row">
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="ap-title">Titel / Name</label>
             <input class="form-input" id="ap-title" type="text" placeholder="z. B. 30 Min. Erstberatung" required />
           </div>
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="ap-slug">Kürzel (Slug)</label>
             <input class="form-input" id="ap-slug" type="text" placeholder="beratung-30m" required />
           </div>
         </div>
         <div class="form-row">
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="ap-calendar">Ziel-Kalender</label>
             <select class="form-select" id="ap-calendar" required></select>
           </div>
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="ap-duration">Dauer (Minuten)</label>
             <input class="form-input" id="ap-duration" type="number" value="30" min="15" step="15" required />
           </div>
@@ -1141,11 +1141,11 @@ <h4 style="margin-top:0; margin-bottom:12px;">Neue Buchungsseite erstellen</h4>
           <div id="ap-busy-calendars"></div>
         </fieldset>
         <div class="form-row">
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="ap-start-hour">Start-Uhrzeit (Std.)</label>
             <input class="form-input" id="ap-start-hour" type="number" value="9" min="0" max="23" required />
           </div>
-          <div class="form-group flex-1">
+          <div class="form-group">
             <label class="form-label" for="ap-end-hour">End-Uhrzeit (Std.)</label>
             <input class="form-input" id="ap-end-hour" type="number" value="17" min="1" max="24" required />
           </div>
diff --git a/public/js/app.js b/public/js/app.js
index cc6fed8..4106af9 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -749,7 +749,7 @@ function renderCalendarList() {
         </button>`;
           
     const googleBadge = c.source === 'google'
-      ? `<svg class="google-badge-icon" viewBox="0 0 24 24" width="12" height="12" style="flex-shrink:0;" title="Mit Google Kalender synchronisiert">
+      ? `<svg class="google-badge-icon" viewBox="0 0 24 24" width="12" height="12" title="Mit Google Kalender synchronisiert">
           <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
           <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
           <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l3.66-2.85z"/>
@@ -1756,7 +1756,7 @@ function renderSettingsCalendars() {
          </button>`;
 
     const googleBadge = c.source === 'google'
-      ? `<svg class="google-badge-icon" viewBox="0 0 24 24" width="12" height="12" style="flex-shrink:0;" title="Mit Google Kalender synchronisiert">
+      ? `<svg class="google-badge-icon" viewBox="0 0 24 24" width="12" height="12" title="Mit Google Kalender synchronisiert">
           <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
           <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
           <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l3.66-2.85z"/>
@@ -2539,7 +2539,7 @@ export function showToast(message, type = 'info') {
     setStatus('Fehler: ' + message);
   }
 
-  const icons = { success: '✓', error: '✕', info: 'ℹ' };
+  const icons = { success: '✓', error: '✕', info: 'ℹ', warning: '⚠' };
   toast.innerHTML = `
     <span class="toast-icon">${icons[type] || icons.info}</span>
     <span class="toast-msg">${escHtml(message)}</span>
diff --git a/public/js/calendar.js b/public/js/calendar.js
index 5355898..2f7005c 100644
--- a/public/js/calendar.js
+++ b/public/js/calendar.js
@@ -308,9 +308,9 @@ export function chipHtml(ev) {
   const timeStr = ev.allDay ? '' : `<span class="event-chip-time">${fmtTime(ev.start)}</span>`;
   const labelText = ev.allDay ? ev.title : `${fmtTime(ev.start)} ${ev.title}`;
   const recurIcon = (ev.recurrence || ev.masterUid)
-    ? `<svg class="recur-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="10" height="10" style="margin-left:4px;vertical-align:middle;display:inline-block;flex-shrink:0;"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 11-.57-8.38l5.67-5.67"/></svg>`
+    ? `<svg class="recur-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="10" height="10"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 11-.57-8.38l5.67-5.67"/></svg>`
     : '';
-  return `<div class="event-chip${ev.allDay ? ' all-day' : ''}"
+  return `<div class="event-chip"
               tabindex="0"
               role="button"
               aria-label="${escHtml(labelText)}"
@@ -679,7 +679,7 @@ function createEventBlock(ev, evCol, totalCols, cb) {
   block.setAttribute('aria-label', labelText.trim());
 
   const recurIcon = (ev.recurrence || ev.masterUid)
-    ? `<svg class="recur-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="10" height="10" style="margin-left:4px;vertical-align:middle;display:inline-block;flex-shrink:0;"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 11-.57-8.38l5.67-5.67"/></svg>`
+    ? `<svg class="recur-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="10" height="10"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 11-.57-8.38l5.67-5.67"/></svg>`
     : '';
 
   block.innerHTML = `
@@ -813,7 +813,7 @@ export function agendaEventHtml(ev) {
     : `${fmtTime(ev.start)}${ev.end ? ' – ' + fmtTime(ev.end) : ''}`;
 
   const recurIcon = (ev.recurrence || ev.masterUid)
-    ? `<svg class="recur-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="10" height="10" style="margin-left:4px;vertical-align:middle;display:inline-block;flex-shrink:0;"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 11-.57-8.38l5.67-5.67"/></svg>`
+    ? `<svg class="recur-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="10" height="10"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 11-.57-8.38l5.67-5.67"/></svg>`
     : '';
 
   const labelText = `${timeStr} ${ev.title}`;
diff --git a/public/js/invitations.js b/public/js/invitations.js
index b4c4bef..ee1d2cb 100644
--- a/public/js/invitations.js
+++ b/public/js/invitations.js
@@ -106,11 +106,11 @@ export function escHtml(str) {
 
 export function renderInvitationsHTML(invList, options = {}) {
   if (options.error || invitationsError) {
-    return '<p class="empty-state invitations-error-state" style="padding: 20px; text-align: center; color: var(--danger);">Fehler beim Laden der Einladungen.</p>';
+    return '<p class="empty-state invitations-error-state" style="color: var(--danger);">Fehler beim Laden der Einladungen.</p>';
   }
 
   if (!Array.isArray(invList) || invList.length === 0) {
-    return '<p class="empty-state" style="padding: 20px; text-align: center; color: var(--text-muted);">Keine ausstehenden Einladungen vorhanden.</p>';
+    return '<p class="empty-state">Keine ausstehenden Einladungen vorhanden.</p>';
   }
 
   return invList.map(inv => {
diff --git a/public/js/tasks.js b/public/js/tasks.js
index 89fcc51..41cbb83 100644
--- a/public/js/tasks.js
+++ b/public/js/tasks.js
@@ -512,7 +512,7 @@ export function renderSidebarTasks(container, countBadge, tasks, callbacks = {},
   if (!container) return;
 
   if (pendingTasks.length === 0) {
-    container.innerHTML = `<div class="sidebar-tasks-empty" style="font-size:0.78rem;color:var(--ink-muted);padding:4px 8px">Keine offenen Aufgaben.</div>`;
+    container.innerHTML = `<div class="sidebar-tasks-empty">Keine offenen Aufgaben.</div>`;
     return;
   }
 
@@ -529,9 +529,9 @@ export function renderSidebarTasks(container, countBadge, tasks, callbacks = {},
 
     item.innerHTML = `
       <input type="checkbox" class="sidebar-task-checkbox" title="Als erledigt markieren" />
-      <div class="sidebar-task-info" tabindex="0" role="button" style="cursor:pointer; flex:1;">
+      <div class="sidebar-task-info" tabindex="0" role="button">
         <div class="sidebar-task-title ${prioClass}">${escapeHtml(task.title)}</div>
-        <div class="sidebar-task-meta" style="font-size:0.75rem; color:var(--ink-muted);">
+        <div class="sidebar-task-meta">
           ${task.due ? `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="12" height="12" style="vertical-align:-1px;margin-right:4px;"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>${(task.dueIsDate || task.allDay) ? new Date(task.due).toLocaleDateString('de-DE', { timeZone: 'UTC' }) : new Date(task.due).toLocaleDateString('de-DE')}` : ''}
           ${task.recurrence ? ` <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" width="10" height="10" style="margin-left:4px;vertical-align:middle;display:inline-block;"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 11-.57-8.38l5.67-5.67"/></svg>` : ''}
         </div>
diff --git a/server/test/issue110_stylesheet_markup_drift.test.js b/server/test/issue110_stylesheet_markup_drift.test.js
index 561df2d..c51d538 100644
--- a/server/test/issue110_stylesheet_markup_drift.test.js
+++ b/server/test/issue110_stylesheet_markup_drift.test.js
@@ -1,94 +1,82 @@
+// Issue #110: the stylesheet and the markup must not drift apart. These are invariants over the
+// whole of public/, not lists of names: every custom property in use is defined, every class
+// selector in app.css is emitted somewhere, and no top-level rule is declared twice.
 const fs = require('fs');
 const path = require('path');
 const { test, describe } = require('node:test');
 const assert = require('node:assert');
 
-describe('Issue #110 — Stylesheet and Markup Drift Fixes', () => {
-  const cssPath = path.join(process.cwd(), 'public/css/app.css');
-  const cssContent = fs.readFileSync(cssPath, 'utf8');
-  const publicDir = path.join(process.cwd(), 'public');
+const publicDir = path.join(__dirname, '..', '..', 'public');
+const css = fs.readFileSync(path.join(publicDir, 'css', 'app.css'), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '');
 
-  function getProjectCode() {
-    let code = '';
-    function walk(dir) {
-      for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
-        const full = path.join(dir, entry.name);
-        if (entry.isDirectory()) walk(full);
-        else if (entry.name.endsWith('.html') || entry.name.endsWith('.js') || entry.name.endsWith('.css')) {
-          code += fs.readFileSync(full, 'utf8') + '\n';
-        }
-      }
-    }
-    walk(publicDir);
-    return code;
-  }
-
-  test('All referenced custom CSS properties are defined in app.css', () => {
-    const definedVars = new Set();
-    for (const m of cssContent.matchAll(/--[a-zA-Z0-9_-]+(?=\s*:)/g)) {
-      definedVars.add(m[0]);
+function readSources(ext) {
+  const out = [];
+  (function walk(dir) {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) walk(full);
+      else if (ext.some(e => entry.name.endsWith(e))) out.push(fs.readFileSync(full, 'utf8'));
     }
+  })(publicDir);
+  return out.join('\n');
+}
+const markup = readSources(['.html', '.js']);
 
-    const allCode = getProjectCode();
-    const usedVars = new Set();
-    for (const m of allCode.matchAll(/var\((--[a-zA-Z0-9_-]+)/g)) {
-      usedVars.add(m[1]);
+// Top-level rules of the stylesheet: { selector, depth } where depth > 0 means inside an at-rule.
+function rules(text) {
+  const result = [];
+  const stack = [];
+  let buf = '';
+  for (const ch of text) {
+    if (ch === '{') {
+      const sel = buf.trim();
+      stack.push(sel);
+      if (!sel.startsWith('@')) result.push({ selector: sel, atRules: stack.slice(0, -1).filter(s => s.startsWith('@')) });
+      buf = '';
+    } else if (ch === '}') {
+      stack.pop();
+      buf = '';
+    } else if (ch === ';' ) {
+      buf = '';
+    } else {
+      buf += ch;
     }
+  }
+  return result;
+}
 
-    const targetUndefinedVars = [
-      '--surface-hover',
-      '--text-muted',
-      '--surface-bg-alt',
-      '--radius-card',
-      '--radius-sm',
-      '--text',
-      '--warning'
-    ];
-
-    const missingVars = targetUndefinedVars.filter(v => !definedVars.has(v));
-    assert.deepStrictEqual(missingVars, [], `Missing custom property definitions in CSS: ${missingVars.join(', ')}`);
+describe('Issue #110 — stylesheet and markup drift', () => {
+  test('every custom property referenced under public/ is defined in app.css', () => {
+    const defined = new Set([...css.matchAll(/(--[\w-]+)\s*:/g)].map(m => m[1]));
+    const used = new Set([...(css + markup).matchAll(/var\(\s*(--[\w-]+)/g)].map(m => m[1]));
+    const undefinedVars = [...used].filter(v => !defined.has(v)).sort();
+    assert.deepStrictEqual(undefinedVars, [], `custom properties used but never defined: ${undefinedVars.join(', ')}`);
   });
 
-  test('Unstyled component classes have CSS definitions in app.css', () => {
-    const cssClassSelectors = new Set();
-    for (const m of cssContent.matchAll(/\.([a-zA-Z0-9_-]+)/g)) {
-      cssClassSelectors.add(m[1]);
+  test('every class selector in app.css is emitted by the markup or scripts', () => {
+    const classes = new Set();
+    for (const { selector } of rules(css)) {
+      // Attribute selectors and :not()/:is() arguments may hold dots that are not classes.
+      const plain = selector.replace(/\[[^\]]*\]/g, '');
+      for (const m of plain.matchAll(/\.(-?[a-zA-Z_][\w-]*)/g)) classes.add(m[1]);
     }
-
-    const requiredClasses = [
-      'btn-secondary',
-      'popover-attachments',
-      'attachment-drive-link',
-      'popover-color-bar',
-      'popover-meta',
-      'popover-actions',
-      'toast-icon',
-      'toast-msg',
-      'toast-close',
-      'btn-revoke-share',
-      'share-role-toggle',
-      'agenda-events',
-      'agenda-event-loc'
-    ];
-
-    const unstyled = requiredClasses.filter(c => !cssClassSelectors.has(c));
-    assert.deepStrictEqual(unstyled, [], `Unstyled component classes missing in CSS: ${unstyled.join(', ')}`);
+    assert.ok(classes.size > 100, 'the stylesheet parsed into class selectors');
+    const dead = [...classes].filter(c => !new RegExp(`(^|[^\\w-])${c}($|[^\\w-])`).test(markup)).sort();
+    assert.deepStrictEqual(dead, [], `class selectors with no element that could match them: ${dead.join(', ')}`);
   });
 
-  test('Obsolete dead CSS selectors are removed from app.css', () => {
-    const deadSelectors = [
-      '.onboarding-screen',
-      '.onboarding-logo-icon',
-      '.account-item',
-      '.account-remove',
-      '.view-switcher',
-      '.view-btn',
-      '.search-bar',
-      '.attendee-info',
-      '.popover-header'
-    ];
-
-    const presentDeadSelectors = deadSelectors.filter(sel => cssContent.includes(sel));
-    assert.deepStrictEqual(presentDeadSelectors, [], `Dead CSS selectors still present in app.css: ${presentDeadSelectors.join(', ')}`);
+  test('no rule is declared twice at the top level', () => {
+    // A later top-level duplicate sits after the media queries and silently overrides them
+    // (the second `.sidebar` rule did this to the off-canvas drawer). A shared base rule for a
+    // selector group followed by per-selector rules is not a duplicate.
+    const seen = new Set();
+    const dupes = [];
+    for (const { selector, atRules } of rules(css)) {
+      if (atRules.length > 0) continue;
+      const key = selector.split(',').map(x => x.trim().replace(/\s+/g, ' ')).sort().join(', ');
+      if (seen.has(key)) dupes.push(key);
+      seen.add(key);
+    }
+    assert.deepStrictEqual(dupes, [], `rules declared more than once at the top level: ${dupes.join(' | ')}`);
   });
 });
diff --git a/server/test/print_stylesheet.test.js b/server/test/print_stylesheet.test.js
index 940a702..1bdefdd 100644
--- a/server/test/print_stylesheet.test.js
+++ b/server/test/print_stylesheet.test.js
@@ -46,8 +46,7 @@ test('Print View and PDF Export Stylesheet Suite (Issue #22)', async (t) => {
       '#sidebar-settings-btn',
       '.status-bar',
       '.modal-backdrop',
-      '.popover',
-      '.no-print'
+      '.popover'
     ];
 
     for (const selector of requiredHiddenSelectors) {
@@ -70,11 +69,12 @@ test('Print View and PDF Export Stylesheet Suite (Issue #22)', async (t) => {
     const requiredBreakSelectors = [
       '.calendar-container',
       '.month-grid',
-      '.week-grid',
+      '.week-grid-body',
+      '.day-grid-body',
       '.event-chip',
       '.kanban-card',
-      '.agenda-item',
-      '.month-day-cell'
+      '.agenda-event',
+      '.month-day'
     ];
 
     for (const selector of requiredBreakSelectors) {
@@ -90,18 +90,6 @@ test('Print View and PDF Export Stylesheet Suite (Issue #22)', async (t) => {
     );
   });
 
-  await t.test('app.css includes .no-print and .print-only helper utility rules', () => {
-    assert.ok(cssContent.includes('.no-print'), 'app.css must define .no-print class');
-    assert.ok(cssContent.includes('.print-only'), 'app.css must define .print-only class');
-
-    const printCss = getPrintBlock(cssContent);
-    const nonPrintCss = cssContent.replace(printCss, '');
-    assert.ok(
-      nonPrintCss.includes('.print-only') && nonPrintCss.includes('display: none'),
-      '.print-only must be display: none in default screen styles'
-    );
-  });
-
   await t.test('@media print enforces high-contrast background and overflow visibility', () => {
     const printCss = getPrintBlock(cssContent);
     assert.ok(printCss, '@media print block must be present');