diff --git a/public/bg_pf24.png b/public/bg_pf24.png
new file mode 100644
index 0000000..8a6cf2d
Binary files /dev/null and b/public/bg_pf24.png differ
diff --git a/public/css/style.css b/public/css/style.css
index 783ef03..443e9b3 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -29,6 +29,27 @@ body {
   flex-direction: column;
 }
 
+/* Hintergrundbild auf öffentlichen Seiten */
+body:not(.admin-body) {
+  background-image: url('/bg_pf24.png');
+  background-size: cover;
+  background-position: center top;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+}
+body:not(.admin-body)::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.82);
+  z-index: 0;
+  pointer-events: none;
+}
+body:not(.admin-body) > * {
+  position: relative;
+  z-index: 1;
+}
+
 /* ---- HEADER ---- */
 .site-header {
   border-bottom: 1px solid var(--border);
diff --git a/routes/admin.js b/routes/admin.js
index 6003f4e..810e7ba 100644
--- a/routes/admin.js
+++ b/routes/admin.js
@@ -221,15 +221,23 @@ router.post('/members/:id/update', requireAdmin, async (req, res) => {
 
 // ===== AUSZEITEN =====
 router.post('/members/:id/pauses/add', requireAdmin, async (req, res) => {
-  const { pause_start, pause_end, pause_months, reason } = req.body;
+  const { pause_start, pause_end, reason } = req.body;
   const memberId = req.params.id;
   try {
-    if (!pause_start || !pause_end || !pause_months) {
-      return res.redirect(`/admin/members/${memberId}?error=Bitte+alle+Pflichtfelder+ausfüllen`);
+    if (!pause_start || !pause_end) {
+      return res.redirect(`/admin/members/${memberId}?error=Bitte+Von+und+Bis+ausfüllen`);
     }
-    if (new Date(pause_end) <= new Date(pause_start)) {
+    const start = new Date(pause_start);
+    const end   = new Date(pause_end);
+    if (end <= start) {
       return res.redirect(`/admin/members/${memberId}?error=Enddatum+muss+nach+Startdatum+liegen`);
     }
+    // Monate automatisch berechnen (aufgerundet)
+    const pause_months = Math.ceil(
+      (end.getFullYear() - start.getFullYear()) * 12 +
+      (end.getMonth() - start.getMonth()) +
+      (end.getDate() > start.getDate() ? 1 : 0)
+    );
     // Auszeit eintragen
     await db.query(
       'INSERT INTO membership_pauses (membership_id, pause_start, pause_end, pause_months, reason) VALUES (?, ?, ?, ?, ?)',
diff --git a/views/admin/member-detail.ejs b/views/admin/member-detail.ejs
index 6e1eef4..4628ccc 100644
--- a/views/admin/member-detail.ejs
+++ b/views/admin/member-detail.ejs
@@ -128,7 +128,7 @@
         </div>
 
         <!-- ===== KARTE 3: Vertrag ===== -->
-        <div class="karte karte-full">
+        <div class="karte">
           <div class="karte-header"><span class="karte-icon">📄</span><h3>Vertrag</h3></div>
           <div class="karte-body">
 
@@ -154,12 +154,14 @@
                 <label>Vertragsbeginn</label>
                 <input type="text" value="<%= member.contract_start ? new Date(member.contract_start).toLocaleDateString('de-DE') : '–' %>" disabled class="karte-input karte-readonly">
               </div>
+            </div>
+            <div class="karte-row">
               <div class="karte-field">
                 <label>Vertragsende</label>
                 <input type="text" value="<%= member.contract_end ? new Date(member.contract_end).toLocaleDateString('de-DE') : '–' %>" disabled class="karte-input karte-readonly">
               </div>
               <div class="karte-field">
-                <label>Eff. Vertragsende <small>(inkl. Auszeit)</small></label>
+                <label>Eff. Ende <small>(inkl. Auszeit)</small></label>
                 <input type="text" value="<%= member.effective_end ? new Date(member.effective_end).toLocaleDateString('de-DE') : '–' %>" disabled class="karte-input karte-readonly">
               </div>
             </div>
@@ -173,6 +175,8 @@
                 <label>Erster Betrag</label>
                 <input type="text" value="<%= member.first_payment_amt ? Number(member.first_payment_amt).toFixed(2) + ' €' : '–' %>" disabled class="karte-input karte-readonly">
               </div>
+            </div>
+            <div class="karte-row">
               <div class="karte-field">
                 <label>Status</label>
                 <select name="status" disabled class="karte-input">
@@ -240,10 +244,6 @@
                       <label>Bis *</label>
                       <input type="date" name="pause_end" required class="karte-input">
                     </div>
-                    <div class="karte-field" style="max-width:120px">
-                      <label>Monate *</label>
-                      <input type="number" name="pause_months" min="1" max="12" required class="karte-input" placeholder="z.B. 2">
-                    </div>
                     <div class="karte-field">
                       <label>Grund</label>
                       <input type="text" name="reason" class="karte-input" placeholder="z.B. Urlaub, Verletzung...">
@@ -260,7 +260,7 @@
         </div>
 
         <!-- ===== KARTE 4: Bankdaten ===== -->
-        <div class="karte karte-full">
+        <div class="karte">
           <div class="karte-header"><span class="karte-icon">🏦</span><h3>Bankdaten / SEPA</h3></div>
           <div class="karte-body">
             <div class="karte-row">
@@ -272,6 +272,8 @@
                 <label>Kontoinhaber</label>
                 <input type="text" name="account_holder" value="<%= member.account_holder || '' %>" disabled class="karte-input">
               </div>
+            </div>
+            <div class="karte-row">
               <div class="karte-field">
                 <label>SEPA akzeptiert</label>
                 <input type="text" value="<%= member.sepa_accepted ? '✅ Ja' : '❌ Nein' %>" disabled class="karte-input karte-readonly">