From 64d499647dca5013c6d99f938168aa276de2f87b Mon Sep 17 00:00:00 2001
From: Scarriffle <admin@scarriffle.com>
Date: Sat, 9 May 2026 17:12:57 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20Stufenf=C3=B6rmige=20Monatsgrenze=20?=
 =?UTF-8?q?=E2=80=93=20auch=20waagerechte=20Linie=20unter=20Vormonats-Tage?=
 =?UTF-8?q?n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Trennlinie hat jetzt eine 'Stufen'-Form: unten unter den letzten
Tagen des Vormonats in derselben Zeile, dann links runter zum 1. des
neuen Monats, dann oben über die ersten Tage des neuen Monats.

So ist die Monatsgrenze visuell vollständig umrandet.
---
 frontend/css/app.css       | 11 +++++++++++
 frontend/js/views/month.js |  4 +++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/frontend/css/app.css b/frontend/css/app.css
index f075962..35ddf75 100644
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -528,6 +528,17 @@ a { color: var(--primary); text-decoration: none; }
   z-index: 4;
   pointer-events: none;
 }
+/* Bottom divider on the previous-month cells in the same row as the change.
+   Uses ::before because these cells never have month-divider-left. */
+.month-col.month-divider-bottom::before {
+  content: '';
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 3px;
+  background: var(--month-divider-color, #7090c0);
+  z-index: 4;
+  pointer-events: none;
+}
 .month-row.month-divider-top {
   position: relative;
 }
diff --git a/frontend/js/views/month.js b/frontend/js/views/month.js
index 4a019c4..e213a75 100644
--- a/frontend/js/views/month.js
+++ b/frontend/js/views/month.js
@@ -141,10 +141,12 @@ export function renderMonth(container, currentDate, events, onDayClick, onEventC
       // First-of-month marker: show month abbreviation, push day number below
       const isFirstOfMonth = cell.getDate() === 1;
       const firstCls   = isFirstOfMonth ? 'first-of-month' : '';
-      // Vertical line at month change, horizontal line spanning from change to end of row
+      // Step-shaped boundary at month change: bottom under the previous-month
+      // tail, vertical at the change, top across the new-month head.
       const dividerClasses = [];
       if (isFirstOfMonth && idx > 0) dividerClasses.push('month-divider-left');
       if (monthChangeIdx > 0 && idx >= monthChangeIdx) dividerClasses.push('month-divider-top');
+      if (monthChangeIdx > 0 && idx < monthChangeIdx) dividerClasses.push('month-divider-bottom');
       const dividerCls = dividerClasses.join(' ');
       const monthLabel = isFirstOfMonth
         ? `<div class="month-marker">${monthsShort[cell.getMonth()]}</div>`