frontend/css/app.css

@@ -1811,13 +1811,15 @@ a { color: var(--primary); text-decoration: none; }
   justify-content: space-between;
   gap: 12px;
   padding: 8px 16px;
-  background: rgba(66, 133, 244, 0.12);
+  background: var(--bg-surface); /* fallback for browsers without color-mix */
-  border-bottom: 1px solid var(--border);
+  background: color-mix(in srgb, var(--accent) 15%, var(--bg-app));
+  border-bottom: 1px solid var(--accent);
   font-size: 14px;
   color: var(--text-1);
 }
 .group-item-active {
-  background: rgba(66, 133, 244, 0.15);
+  background: var(--bg-surface);
+  background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-radius: 8px;
 }
 .group-item .cal-item-name { cursor: pointer; flex: 1; }

frontend/index.html

@@ -218,6 +218,8 @@
     <main class="main-view" id="main-view">
       <div id="group-view-banner" class="group-view-banner hidden">
         <span id="group-view-label"></span>
+        <div style="flex:1"></div>
+        <button class="btn btn-primary btn-sm" id="group-view-new-event" data-i18n="group_new_event">+ Gruppentermin</button>
         <button class="btn btn-ghost btn-sm" id="group-view-exit" data-i18n="group_exit">Gruppenansicht verlassen</button>
       </div>
       <div id="view-container"></div>

frontend/js/calendar.js

@@ -2293,6 +2293,16 @@ function renderGroupList() {
   });
 }
 
+// Open the new-event editor preselected to the active group's shared calendar.
+function openGroupEventModal() {
+  const g = state.groups.find(x => x.id === state.activeGroupId);
+  if (!g || !g.group_calendar_id) { showToast(t('groups_none'), true); return; }
+  openNewEventModal(state.selectedDate || state.currentDate);
+  const sel = document.getElementById('ev-calendar');
+  sel.value = `local-${g.group_calendar_id}`;
+  updatePrivateRow(false);
+}
+
 function enterGroupView(groupId) {
   state.activeGroupId = groupId;
   const g = state.groups.find(x => x.id === groupId);
@@ -2387,6 +2397,8 @@ function bindGroupUI() {
   if (addBtn) addBtn.onclick = () => openGroupModal(null);
   const exitBtn = document.getElementById('group-view-exit');
   if (exitBtn) exitBtn.onclick = exitGroupView;
+  const newEvtBtn = document.getElementById('group-view-new-event');
+  if (newEvtBtn) newEvtBtn.onclick = openGroupEventModal;
 
   document.getElementById('group-save').onclick = async () => {
     const modal = document.getElementById('modal-group');

frontend/js/i18n.js

@@ -123,6 +123,7 @@ const translations = {
     group_exit: 'Gruppenansicht verlassen',
     group_icon: 'Icon',
     group_visible_flag: 'Für deine Gruppen sichtbar',
+    group_new_event: '+ Gruppentermin',
     upload_too_large: 'Datei zu groß (Server-Limit). Bitte Upload-Limit erhöhen.',
     shared_with_me: 'Mit dir geteilt',
     settings_calendars: 'Kalender',
@@ -389,6 +390,7 @@ const translations = {
     group_exit: 'Exit group view',
     group_icon: 'Icon',
     group_visible_flag: 'Visible to your groups',
+    group_new_event: '+ Group event',
     upload_too_large: 'File too large (server limit). Please raise the upload limit.',
     shared_with_me: 'Shared with me',
     settings_calendars: 'Calendars',

frontend/js/version.js

@@ -1,2 +1,2 @@
 // Increment APP_VERSION with every code change
-export const APP_VERSION = 'v34';
+export const APP_VERSION = 'v35';