Automatismen als Zeitleiste des Tages, Liste bleibt umschaltbar

Die Uebersicht auf der Startseite zeigt die Automatiken jetzt als
Zeitleiste: eine Bahn je Geraeteart, die Spur ist der Tag. Der Umschalter
"Zeitleiste | Liste" oben in der Karte fuehrt zur bisherigen Tabelle
zurueck und wird im Browser gemerkt.

Jede Automatik erscheint genau einmal, nach festen Regeln
(restricted/zeitleiste.php), auch kuenftige:
- feste Uhrzeit oder Sonnenstand: Punkt; Zeitfenster mit Messwert: Balken;
  Kette: hinter ihrem Ausloeser, als gestrichelter Bogen verbunden
- ohne jede Zeit: Band "Jederzeit"; pausiert: Band "Pausiert"
- an diesem Tag nicht dran (Wochentag, Ferien, Feiertag, Vorabend, wie im
  Runner gerechnet): gestrichelt mit Grund, nie ausgeblendet
- Bahn aus den geschalteten Geraeten ueber bedienform(), Mehrheit gewinnt;
  Bewaesserung am Geraetetyp
- Zaehler "x von y" im Kopf

Dazu: Tag vor/zurueck, Etagen einzeln einblendbar (gemerkt), Jetzt-Linie
und Nachtschatten aus solarLog.daylight (spaetere Tage vom selben
Kalendertag eines Vorjahres), gelaufene Eintraege mit Uhrzeit aus
automation_log, Klick oeffnet den Editor. Schmal nur Symbole in den Bahnen
und Start bei der aktuellen Uhrzeit.

Auf einer Probeseite mit echten Daten geprueft: nichts ragt ueber, keine
ueberlappenden Etiketten, alle 22 Automatiken genau einmal, Filter,
Tageswechsel und Umschalter.

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

restricted/home.php

@@ -203,16 +203,23 @@ require_once(__DIR__ . "/reiter.php");
         </div>
         <div class="col-xxl-12 col-xl-12 col-lg-12 col-md-12 d-flex align-items-stretch">
           <div class="card p-0 mb-4" style="width:100%">
-            <div class="card-header pb-0 pt-1">
-              <h3 class="card-title">Automatismen</h3>
-              <div class="card-tools">
-                <button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
-                  <i class="bi bi-x-lg"></i>
-                </button>
+            <div class="card-header pb-1 pt-1 d-flex align-items-center gap-2 flex-wrap">
+              <h3 class="card-title me-auto">Automatismen</h3>
+              <!-- Zwei Ansichten derselben Automatiken. Die Zeitleiste zeigt den
+                   Tag (js/solar/zeitleiste.js), die Liste ist die bisherige
+                   Tabelle je Etage. Welche offen ist, merkt sich der Browser. -->
+              <div class="btn-group btn-group-sm zl-ansicht" role="group" aria-label="Ansicht">
+                <button type="button" class="btn btn-outline-secondary" data-ansicht="zeitleiste">
+                  <i class="bi bi-bar-chart-steps me-1"></i>Zeitleiste</button>
+                <button type="button" class="btn btn-outline-secondary" data-ansicht="liste">
+                  <i class="bi bi-list-ul me-1"></i>Liste</button>
               </div>
-              
+              <button type="button" class="btn btn-sm btn-success zl-neu" title="Neue Automatik">
+                <i class="bi bi-plus-lg"></i></button>
             </div>
-            <div class="card-body pb-1">
+            <div class="card-body pb-2">
+              <div id="zeitleiste" class="zl" hidden></div>
+              <div id="automatikListe">
 <?php
               /*
                * Eine Etage, ein Reiter. Gezeichnet von reiterLeiste() aus
@@ -244,6 +251,7 @@ require_once(__DIR__ . "/reiter.php");
                 <?= reiterFlaecheZu() ?>
 <?php endforeach; ?>
               </div>
+              </div><!-- /automatikListe -->
             </div>
           </div>
         </div>