Bewaesserung: Ablaeufe zuerst; Zeitleiste: offene Karte uebersteht Neuzeichnen

Am Rechner liess die Karte die Bildlaufleiste erscheinen, die Zeitleiste
wurde schmaler und der ResizeObserver zeichnete sie samt Karte neu.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

ajax/watering.php

@@ -93,6 +93,17 @@ $ablaeufe = [
 ];
 ?>
 <div class="lade wasser">
+  <div class="lade-abschnitt">
+    <h3>Abläufe</h3>
+    <div class="lade-chips wasser-ablaeufe">
+<?php foreach ($ablaeufe as $ablauf): ?>
+      <button type="button" class="lade-chip" aria-pressed="false"
+              data-ablauf="<?= htmlspecialchars(json_encode($ablauf["modi"], JSON_UNESCAPED_SLASHES)) ?>"><?= htmlspecialchars($ablauf["label"]) ?></button>
+<?php endforeach; ?>
+    </div>
+    <div class="lade-erklaerung">Ein Ablauf gießt die Zonen nacheinander – antippen startet, nochmal antippen stoppt. Die Regenautomatik läuft davon unabhängig zum Sonnenaufgang.</div>
+  </div>
+
   <div class="wasser-zonen">
 <?php foreach ($zonen as $zone):
         $dauern = $zone["dauern"];
@@ -119,16 +130,5 @@ $ablaeufe = [
 <?php endforeach; ?>
   </div>
 
-  <div class="lade-abschnitt">
-    <h3>Abläufe</h3>
-    <div class="lade-chips wasser-ablaeufe">
-<?php foreach ($ablaeufe as $ablauf): ?>
-      <button type="button" class="lade-chip" aria-pressed="false"
-              data-ablauf="<?= htmlspecialchars(json_encode($ablauf["modi"], JSON_UNESCAPED_SLASHES)) ?>"><?= htmlspecialchars($ablauf["label"]) ?></button>
-<?php endforeach; ?>
-    </div>
-    <div class="lade-erklaerung">Ein Ablauf gießt die Zonen nacheinander – antippen startet, nochmal antippen stoppt. Die Regenautomatik läuft davon unabhängig zum Sonnenaufgang.</div>
-  </div>
-
   <div class="lade-meldung" data-w="meldung" aria-live="polite">Befehle gehen sofort an die Ventilsteuerung</div>
 </div>

js/solar/zeitleiste.js

@@ -309,6 +309,13 @@ function zeitleisteZeichnen() {
         + '<span><i class="bi bi-calendar-x zl-nichtdran"></i>an diesem Tag nicht dran</span>'
         + "</div>";
 
+  // Eine offene Karte übersteht das Neuzeichnen. Sonst verschwand sie am
+  // Rechner gleich wieder: ragt sie unten aus der Seite, erscheint die
+  // Bildlaufleiste, die Zeitleiste wird schmaler, und der ResizeObserver
+  // zeichnet neu. Auf dem Handy liegt die Bildlaufleiste über der Seite.
+  const offeneKarte = ziel.querySelector(".zl-karte");
+  const offenId = offeneKarte ? offeneKarte.dataset.id : null;
+
   ziel.innerHTML = html;
   zlKettenZeichnen(ziel);
 
@@ -325,6 +332,11 @@ function zeitleisteZeichnen() {
       zeitleiste.gescrollt = true;
     }
   }
+
+  if (offenId !== null) {
+    const anker = ziel.querySelector('.zl-ding[data-id="' + offenId + '"]');
+    if (anker) zlKarteOeffnen(anker, offenId);
+  }
 }
 
 /** Ein Eintrag in einer Bahn. */