Add zenith times for sun and moon to info panel

index.html

@@ -307,6 +307,12 @@
             </div>
             <div class="info-content"><span class="info-label">Untergang</span><span><span class="info-value" id="sunset-value">--:--</span><span class="info-sub" id="sunset-when"></span></span></div>
         </div>
+        <div class="info-row">
+            <div class="info-icon">
+                <svg viewBox="0 0 24 24" fill="#e0914f"><circle cx="12" cy="12" r="4"/><line x1="12" y1="12" x2="12" y2="3" stroke="#e0914f" stroke-width="2"/></svg>
+            </div>
+            <div class="info-content"><span class="info-label">Zenit Sonne</span><span><span class="info-value" id="sun-zenith-value">--:--</span><span class="info-sub" id="sun-zenith-when"></span></span></div>
+        </div>
         <div class="info-row">
             <div class="info-icon">
                 <svg id="moon-phase-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#1c1b1f"/></svg>
@@ -319,6 +325,12 @@
             </div>
             <div class="info-content"><span class="info-label">Mond auf</span><span><span class="info-value" id="moonrise-value">--:--</span><span class="info-sub" id="moonrise-when"></span></span></div>
         </div>
+        <div class="info-row">
+            <div class="info-icon">
+                <svg viewBox="0 0 24 24" fill="#b0a89a"><path d="M12 2 a10 10 0 1 0 0 20 a8 8 0 1 1 0 -16 a6 6 0 1 1 0 8"/></svg>
+            </div>
+            <div class="info-content"><span class="info-label">Zenit Mond</span><span><span class="info-value" id="moon-zenith-value">--:--</span><span class="info-sub" id="moon-zenith-when"></span></span></div>
+        </div>
         <div class="info-row">
             <div class="info-icon">
                 <svg viewBox="0 0 24 24" fill="none" stroke="#b0a89a" stroke-width="2"><path d="M3 12 A9 9 0 0 1 21 22 Z"/></svg>
@@ -774,6 +786,18 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
             document.getElementById('sunset-value').textContent = formatTimeHM(sunsetNext.date);
             document.getElementById('sunset-when').textContent = sunsetNext.label ? '· ' + sunsetNext.label : '';
 
+            // Sun zenith (solar noon) - find next occurrence
+            var sunZenith = sunTimes.solarNoon;
+            var sunZenithWhen = sunZenith > now ? 'heute' : 'morgen';
+            if (sunZenith <= now) {
+                var tomorrow = new Date(now);
+                tomorrow.setDate(tomorrow.getDate() + 1);
+                sunZenith = SunCalc.getTimes(tomorrow, PASSAU_LAT, PASSAU_LON).solarNoon;
+                sunZenithWhen = formatDateLong(tomorrow);
+            }
+            document.getElementById('sun-zenith-value').textContent = formatTimeHM(sunZenith);
+            document.getElementById('sun-zenith-when').textContent = '· ' + sunZenithWhen;
+
             // Moon times
             var moonTimes = SunCalc.getMoonTimes(now, PASSAU_LAT, PASSAU_LON);
             var moonriseNext = getNextEvent(moonTimes.rise, now, PASSAU_LAT, PASSAU_LON, 'moonrise');
@@ -850,6 +874,18 @@ var effect = (VANTA.CLOUDS2 || VANTA.CLOUDS)({
                 getMoonPhaseText(moonIllum.phase) + ' ' + Math.round(moonIllum.fraction * 100) + '%';
             renderMoonPhaseIcon(moonIllum.phase, moonIllum.fraction);
             renderRpgMoon(moonIllum.phase, moonIllum.fraction);
+
+            // Moon zenith - cache for 1 hour to save CPU
+            if (!window._moonZenithCache || Date.now() - window._moonZenithCache.time > 3600000) {
+                window._moonZenithCache = {
+                    time: Date.now(),
+                    zenith: findMoonZenith(now)
+                };
+            }
+            var moonZenith = window._moonZenithCache.zenith;
+            var moonZenithWhen = moonZenith && moonZenith > now ? formatDateLong(moonZenith) : '';
+            document.getElementById('moon-zenith-value').textContent = moonZenith ? formatTimeHM(moonZenith) : '--:--';
+            document.getElementById('moon-zenith-when').textContent = moonZenithWhen ? '· ' + moonZenithWhen : '';
         }
 
         var startTime = Date.now();
@@ -972,6 +1008,25 @@ var weatherThemes = {
             return (now.getTime() - startOfDay.getTime()) / 86400000;
         }
 
+        function findMoonZenith(now) {
+            // Sample moon altitude every 15 minutes over next 36 hours
+            var maxAlt = -Math.PI;
+            var zenith = null;
+            for (var i = 0; i < 144; i++) {
+                var sample = new Date(now.getTime() + i * 15 * 60 * 1000);
+                var pos = SunCalc.getMoonPosition(sample, PASSAU_LAT, PASSAU_LON);
+                if (pos.altitude > maxAlt) {
+                    maxAlt = pos.altitude;
+                    zenith = sample;
+                }
+                // Stop early if we found a peak and started rising again
+                if (i > 4 && zenith && pos.altitude < maxAlt - 0.1) {
+                    break;
+                }
+            }
+            return zenith;
+        }
+
         function updateDebug(t, palette, vantaColors, themeName) {
             try {
             var now = new Date();