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>