refactor: improve mobile layout for plan changer

- Stack title and controls vertically on mobile
- Separate admin actions into own row below
- No more absolute positioning or fragile layout
- Show date labels on prev/next buttons only on desktop
- Cleaner responsive breakpoint at 800px

public/src/components/GroupView.vue

@@ -133,31 +133,33 @@ function dateToValueString(time) {
 
 <template>
     <div class="bar">
-        <div class="controls">
+        <div class="top-row">
-            <button class="flat left" v-if="prev != null && prev <= groups.length - 1" @click="back">
+            <button class="flat arrow" v-if="prev != null && prev <= groups.length - 1" @click="back">
                 <i>arrow_left_alt</i>
-                <span class="hide-mobile">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
+                <span class="date-label">{{ formatDateShort(get(prev).from) }} - {{ formatDateShort(get(prev).to) }}</span>
             </button>
-            <div class="width: 100%"/>
+
-            <button class="flat right" v-if="next != null && next > 0" @click="forward">
+            <div class="title">
-                <span class="hide-mobile">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
+                <template v-if="groups.length > 0">
+                    <span class="prefix">Miniplan vom</span>
+                    {{ formatDate(get(cur).from) }} – {{ formatDate(get(cur).to) }}
+                </template>
+                <span v-else>Keine Gottesdienstgruppen vorhanden</span>
+            </div>
+
+            <button class="flat arrow" v-if="next != null && next > 0" @click="forward">
+                <span class="date-label">{{ formatDateShort(get(next).from) }} - {{ formatDateShort(get(next).to) }}</span>
                 <i>arrow_right_alt</i>
             </button>
-            <button class="flat right" v-if="(next == null || next <= 0) && admin" style="margin-right: 20px"
+
-                    @click="$emit('new')">
+            <div class="spacer" v-if="next == null || next <= 0"></div>
-                <i>add</i> Neuer plan
+        </div>
-            </button>
+
+        <div class="admin-row" v-if="admin && groups.length > 0">
+            <button class="flat" @click="$emit('new')"><i>add</i> Neuer Plan</button>
+            <button class="flat icon" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
+            <button class="flat icon" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
         </div>
-        <template v-if="groups.length > 0">
-            <span style="z-index: 1"><span class="hide-mobile">Miniplan vom </span> {{ formatDate(get(cur).from) }} bis {{ formatDate(get(cur).to) }}</span>
-            <span v-if="admin" style="display: flex; align-items: center; z-index: 1">
-                <button class="icon flat" @click="$emit('delete', get(cur).id)"><i>delete</i></button>
-                <button class="icon flat" @click="$emit('edit', get(cur).id)"><i>edit</i></button>
-            </span>
-        </template>
-        <span v-else>
-            Keine Gottesdienstgruppen vorhanden
-        </span>
     </div>
 </template>
 
@@ -165,56 +167,127 @@ function dateToValueString(time) {
 
 .bar {
     display: flex;
-    width: calc(100% - 30px);
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
     border-bottom: 1px solid #d7d5d5;
     z-index: 10;
-    padding: 15px;
+    padding: 8px 12px;
-    position: relative;
+    gap: 6px;
 
-    .controls {
+    .top-row {
         display: flex;
-        justify-content: space-between;
+        align-items: center;
-        position: absolute;
+        justify-content: center;
-        top: 0;
+        width: 100%;
-        left: 0;
+        gap: 6px;
-        width: calc(100% - 10px);
-        height: calc(100% - 10px);
-        padding: 5px;
     }
 
-    .left, .right{
+    .arrow {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex-shrink: 0;
+        padding: 6px 8px 6px 6px;
+
+        i {
+            font-size: 22px;
+        }
+
+        .date-label {
+            display: none;
+        }
+    }
+
+    .spacer {
+        width: 42px;
         flex-shrink: 0;
     }
 
-    .left {
+    .title {
-        margin-left: 10px;
+        flex: 1;
-    }
+        text-align: center;
-
-    .right {
-        i {
-            margin-left: 10px;
-        }
-    }
-
-    span {
         font-weight: 700;
-    }
+        font-size: 14px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        min-width: 0;
 
-    button {
+        .prefix {
-        margin-right: 10px;
-    }
-
-    .input {
-        margin: 0 10px
-    }
-
-    @media(max-width: 800px) {
-        .hide-mobile {
             display: none;
         }
+    }
 
+    .admin-row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        width: 100%;
+        padding-top: 4px;
+        border-top: 1px solid #eee;
+
+        button {
+            font-size: 13px;
+            padding: 4px 10px 4px 6px;
+
+            i {
+                font-size: 18px;
+                margin-right: 4px;
+            }
+
+            &.icon {
+                padding: 4px 8px;
+
+                i {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    @media(min-width: 800px) {
+        flex-direction: row;
+        padding: 10px 16px;
+        gap: 0;
+
+        .top-row {
+            flex: 1;
+            gap: 10px;
+        }
+
+        .arrow {
+            padding: 6px 14px 6px 10px;
+
+            .date-label {
+                display: inline;
+                font-size: 13px;
+                font-weight: 600;
+                white-space: nowrap;
+            }
+        }
+
+        .spacer {
+            width: auto;
+        }
+
+        .title {
+            font-size: 16px;
+            white-space: normal;
+
+            .prefix {
+                display: inline;
+                font-weight: 400;
+                color: #777;
+            }
+        }
+
+        .admin-row {
+            width: auto;
+            border-top: none;
+            padding-top: 0;
+            margin-left: 12px;
+        }
     }
 
 }