Datum plus und minus ingebaut Planetensichtbarkeit

public/planetensichtbarkeit.php

@@ -109,12 +109,16 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && (string) ($_POST['ajax'] ?? '') ===
 <?php else: ?>
     <section class="card planetvis-card">
         <p class="planetvis-intro">
-            Sichtbarkeit der Planeten und des Mondes über 24 Stunden fuer deinen Standard-Standort aus der Datenbank.
+            Sichtbarkeit der Planeten und des Mondes über 24 Stunden für deinen Standard-Standort aus der Datenbank.
         </p>
 
         <div class="date-section">
             <span class="date-lbl">Datum:</span>
+            <button class="btn btn-secondary btn-sm" id="btnPrevMonth">-1 Monat</button>
+            <button class="btn btn-secondary btn-sm" id="btnPrevDay">-1 Tag</button>
             <input type="date" id="datePicker">
+            <button class="btn btn-secondary btn-sm" id="btnNextDay">+1 Tag</button>
+            <button class="btn btn-secondary btn-sm" id="btnNextMonth">+1 Monat</button>
             <button class="btn btn-secondary" id="btnToday">Heute</button>
         </div>
     </section>
@@ -292,12 +296,41 @@ function addBest(bar, from, to, def) {
 
 const tooltip = document.getElementById('tooltip');
 const datePicker = document.getElementById('datePicker');
+const btnPrevMonth = document.getElementById('btnPrevMonth');
+const btnPrevDay = document.getElementById('btnPrevDay');
+const btnNextDay = document.getElementById('btnNextDay');
+const btnNextMonth = document.getElementById('btnNextMonth');
 const localDateStr = d => `${d.getFullYear()}-${fmt2(d.getMonth() + 1)}-${fmt2(d.getDate())}`;
 const pickerDate = () => {
   const [y, m, d] = datePicker.value.split('-').map(Number);
   return new Date(y, m - 1, d, 12);
 };
 
+function daysInMonth(year, monthIndex) {
+  return new Date(year, monthIndex + 1, 0).getDate();
+}
+
+function shiftPickerByDays(days) {
+  const base = pickerDate();
+  base.setDate(base.getDate() + days);
+  datePicker.value = localDateStr(base);
+  renderChart(base);
+}
+
+function shiftPickerByMonths(months) {
+  const base = pickerDate();
+  const year = base.getFullYear();
+  const monthIndex = base.getMonth();
+  const day = base.getDate();
+  const targetMonthIndex = monthIndex + months;
+  const targetYear = year + Math.floor(targetMonthIndex / 12);
+  const normalizedMonthIndex = ((targetMonthIndex % 12) + 12) % 12;
+  const clampedDay = Math.min(day, daysInMonth(targetYear, normalizedMonthIndex));
+  const shifted = new Date(targetYear, normalizedMonthIndex, clampedDay, 12);
+  datePicker.value = localDateStr(shifted);
+  renderChart(shifted);
+}
+
 async function fetchVisibilityData(localDate) {
   const formData = new FormData();
   formData.set('ajax', '1');
@@ -403,7 +436,7 @@ function renderInfoCards(localDate, data) {
   infoDiv.innerHTML = `
     <div class="info-card"><strong>Standort</strong><br>${SITE_LOCATION.name}<br>${LAT.toFixed(3)}deg N | ${LNG.toFixed(3)}deg O | ${ELEV} m</div>
     <div class="info-card"><strong>Sonne (${fmtDate(localDate)})</strong><br>Aufgang: ${hF(tw.sunRiseH)}<br>Untergang: ${hF(tw.sunSetH)}</div>
-    <div class="info-card"><strong>Dämmerung</strong><br>Buergerlich: ${hF(tw.civDawnH)} / ${hF(tw.civDuskH)}<br>Nautisch: ${hF(tw.nautDawnH)} / ${hF(tw.nautDuskH)}<br>Astronomisch: ${hF(tw.astroDawnH)} / ${hF(tw.astroDuskH)}</div>
+    <div class="info-card"><strong>Dämmerung</strong><br>Bürgerlich: ${hF(tw.civDawnH)} / ${hF(tw.civDuskH)}<br>Nautisch: ${hF(tw.nautDawnH)} / ${hF(tw.nautDuskH)}<br>Astronomisch: ${hF(tw.astroDawnH)} / ${hF(tw.astroDuskH)}</div>
     <div class="info-card"><strong>Mond (${fmtDate(localDate)})</strong><br>${Math.round((moon.illum || 0) * 100)}% ${moon.waning ? 'abnehmend' : 'zunehmend'}<br>Phase: ${typeof moon.phase === 'number' ? moon.phase.toFixed(1) : '--'}deg</div>
     <div class="info-card"><strong>Zeitzone</strong><br>${tzLabel}<br>${SITE_LOCATION.timezone}</div>
   `;
@@ -437,6 +470,22 @@ document.getElementById('btnToday').addEventListener('click', () => {
   renderChart(new Date(t.getFullYear(), t.getMonth(), t.getDate(), 12));
 });
 
+btnPrevDay.addEventListener('click', () => {
+  shiftPickerByDays(-1);
+});
+
+btnNextDay.addEventListener('click', () => {
+  shiftPickerByDays(1);
+});
+
+btnPrevMonth.addEventListener('click', () => {
+  shiftPickerByMonths(-1);
+});
+
+btnNextMonth.addEventListener('click', () => {
+  shiftPickerByMonths(1);
+});
+
 datePicker.addEventListener('input', () => {
   if (datePicker.value) {
     renderChart(pickerDate());