Tagesblick: eine Kachel fuer offene Punkte und die Termine des Tages

Wunsch Filipe, 05.09.2026, mit Bildschirmfoto der Hinweisliste: "eine
ganze kachel wo links die sachen sind die du da schon siehst und rechts
in der kachel die termine vom tag. in der mitte gesplittet. mach das
richtig geil und hochwertig."

WARUM DIE BEIDEN ZUSAMMENGEHOEREN

Links steht, was zu TUN ist, rechts, was schon FESTSTEHT. Zusammen
ergeben sie die einzige Frage, die man morgens hat -- wie sieht mein Tag
aus. Untereinander musste man scrollen, um sie zu beantworten.

Eine Kachel und nicht zwei nebeneinander: Zwei Rahmen lesen sich als
zwei Themen. Der Trenner laeuft oben und unten aus, statt von Kante zu
Kante durchzuschneiden -- eine harte Linie macht aus einer Kachel wieder
zwei.

Die rechte Haelfte ist ein Zeitstrahl, kein Kalenderauszug:
  * Was als NAECHSTES dran ist, wird hervorgehoben. Beim Ueberfliegen
    ist das die Auskunft, die man sucht -- nicht "der erste des Tages".
  * Vorbei heisst nicht weg. Erledigtes tritt zurueck, bleibt aber
    sichtbar; man will sehen, was man schon hinter sich hat.
  * Dieselben vier Farben wie im Kalender. Eine Farbe, die hier etwas
    anderes bedeutete, muesste man zweimal lernen.

Die Daten kommen aus der Kalender-Schnittstelle mit tage=1 -- keine
zweite Abfrage, keine zweite Sichtbarkeitsregel. Was jemand im Kalender
nicht sehen darf, kommt hier gar nicht erst an.

DREI FEHLER, DIE DABEI AUFFIELEN

1. Die rechte Haelfte war 38 statt 579 Pixel breit. Die versteckte
   Ueberschrift fuer Vorleseprogramme zaehlt als Kind im Raster und hat
   alles um eine Spalte verschoben, sodass "Heute" in der Ein-Pixel-
   Spalte des Trenners landete. Die Spalten sind jetzt ausdruecklich
   zugewiesen -- damit verschiebt auch ein spaeteres viertes Element
   nichts mehr.

2. Die Plaketten (CALL, TERMIN, REVIEW) hatten 10,56 px. Die Hausgrenze
   liegt bei 11,5 -- darunter liest auf einem Handy niemand mehr.
   Gemeldet von pruef-handy auf allen drei Geraeteklassen UND von
   pruef-grosscheck bei allen vier Rollen. Ein Fix, zwei Pruefungen.

3. Am Handy stand die Uhrzeit mittig zur Zeile, waehrend der Titel oben
   begann -- sie fluchteten nicht, sobald die Plakette unter den Text
   rutschte.

Die Kachel bleibt ganz weg, wenn BEIDE Haelften leer sind, und zeigt
sonst auf der leeren Seite einen Satz. Vorher haette jemand ohne offene
Punkte, aber mit drei Calls seinen Tagesplan nicht gesehen: Das
Verstecken hing an der linken Haelfte allein.

ZWEI PRUEFUNGEN, DIE SICH SELBST IM WEG STANDEN

pruef-tempo-workspace meldete "Layout springt: bereich.html 0,703".
Nachgemessen: derselbe Wert schwankt zwischen den Laeufen um den Faktor
zwei (aufgaben.html 0,478 / 0,262 / 0,262; bereich.html 0,703 dann
0,347). Er haengt davon ab, ob die Daten ankommen, waehrend das Geruest
noch aufgebaut wird. Eine Pruefung, die zufaellig rot wird, ist so
wertlos wie eine, die nie anschlaegt -- man klickt sie weg, und mit ihr
die echte Warnung. Statt die Grenze anzuheben (das haette sie stumpf
gemacht) wird ein Ausschlag jetzt durch WIEDERHOLUNG bestaetigt, und
gemeldet wird der zweite Wert, nicht der kleinere. Ein echter Sprung
kommt bei jedem Lauf und uebersteht das muehelos. Die neue Kachel selbst
springt uebrigens gar nicht: start.html steht bei 0.

pruef-push-weg meldete "ALLES IN ORDNUNG" und stuerzte danach ab
(libuv: UV_HANDLE_CLOSING, Rueckgabewert 3221226505). Ursache war
process.exit() mitten im Schliessen der fetch-Verbindungen. Jetzt
process.exitCode -- Node raeumt zu Ende. Fuenf Laeufe hintereinander
sauber. Eine Pruefung, die inhaltlich besteht und trotzdem rot ist, ist
das Schlimmste von beidem.

Gesamtlauf: 1994 von 1994 Punkten (1973 vorher + 21 der neuen Pruefung).

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/assets/css/start.css

@@ -3151,3 +3151,302 @@ body[data-fremde-sicht="ja"]::after {
   color: var(--text-still);
   max-width: 76ch;
 }
+
+/* =====================================================================
+   DER TAGESBLICK — eine Kachel, in der Mitte geteilt
+   =====================================================================
+
+   Wunsch Filipe, 05.09.2026: eine ganze Kachel, links die Hinweise,
+   rechts die Termine des Tages, in der Mitte geteilt -- "richtig geil
+   und hochwertig".
+
+   WAS "HOCHWERTIG" HIER HEISST — und was nicht:
+
+   Nicht mehr Effekte. Der Eindruck entsteht aus drei Dingen, die man
+   einzeln kaum bemerkt und zusammen sofort:
+
+     1. EINE Kante um beides statt zwei Kacheln nebeneinander. Zwei
+        Rahmen lesen sich als zwei Themen; einer sagt "zwei Seiten
+        derselben Sache".
+     2. Ein Trenner, der oben und unten AUSLÄUFT statt durchzuschneiden.
+        Eine harte Linie zerteilt die Kachel, ein Verlauf gliedert sie.
+     3. Ruhe. Der Hintergrund bleibt fast schwarz, die Farbe steckt in
+        wenigen kleinen Flächen -- den Punkten auf dem Zeitstrahl. Wo
+        alles leuchtet, leuchtet nichts.
+
+   Augenschonend ist Hausregel: keine harten Weißflächen, keine
+   Neonränder, Bewegung nur als kurze Blende.
+
+   AUFBAU: ein Raster mit drei Spalten -- Inhalt, Trenner, Inhalt. Der
+   Trenner ist eine eigene Spalte und kein Rand, damit er unabhängig von
+   der Höhe beider Seiten auf voller Länge sitzt und auslaufen kann. */
+
+.tagesblick {
+  display: grid;
+  grid-template-columns: 1fr 1px 1fr;
+  gap: 0;
+  margin-bottom: 30px;
+  border: 1px solid var(--rand);
+  border-radius: var(--radius);
+  background:
+    /* Ein sehr flacher Schein von links oben -- er gibt der Fläche
+       Tiefe, ohne als Farbe aufzufallen. */
+    radial-gradient(120% 90% at 0% 0%,
+      rgba(255, 255, 255, .035), transparent 58%),
+    var(--flaeche);
+  overflow: hidden;
+}
+
+/* Die Überschrift der ganzen Kachel ist für Vorleseprogramme da --
+   auf dem Schirm sagen die beiden Schilder schon alles, und eine
+   dritte Überschrift darüber wäre eine Zeile ohne Inhalt. */
+.tagesblick__titel {
+  position: absolute;
+  width: 1px; height: 1px; margin: -1px; padding: 0;
+  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
+}
+
+/* DIE SPALTEN WERDEN AUSDRÜCKLICH ZUGEWIESEN (05.09.2026).
+
+   Ohne das rutschte die rechte Hälfte in die 1-Pixel-Spalte des
+   Trenners und war 38 statt 579 Pixel breit. Grund: Die Kachel hat drei
+   Kinder -- die versteckte Überschrift, links, rechts -- und ein Raster
+   verteilt sie der Reihe nach. `position: absolute` an der Überschrift
+   nimmt sie zwar aus dem Fluss, aber verlassen sollte man sich darauf
+   nicht: Wer später ein viertes Kind einfügt (einen Ladebalken, einen
+   Hinweis), verschiebt sonst wieder alles um eine Spalte, ohne dass
+   irgendwo ein Fehler erscheint.
+
+   Mit `grid-column` ist die Zuordnung an die Sache gebunden statt an
+   die Reihenfolge im Dokument. */
+.tagesblick__seite--dran  { grid-column: 1; }
+.tagesblick__seite--heute { grid-column: 3; }
+
+.tagesblick__seite {
+  display: flex; flex-direction: column;
+  padding: 17px 19px 19px;
+  min-width: 0;                 /* sonst sprengt ein langer Titel die Spalte */
+}
+
+/* DER TRENNER. Oben und unten durchsichtig: Eine Linie, die die Kachel
+   von Kante zu Kante durchschneidet, macht aus einer Kachel zwei. Eine,
+   die ausläuft, gliedert sie nur. */
+.tagesblick__seite--heute { position: relative; }
+.tagesblick__seite--heute::before {
+  content: "";
+  position: absolute; left: -1px; top: 14px; bottom: 14px; width: 1px;
+  background: linear-gradient(180deg,
+    transparent,
+    var(--rand-hell) 18%,
+    var(--rand-hell) 82%,
+    transparent);
+}
+
+.tagesblick__kopf { margin-bottom: 12px; }
+
+/* Der Kalender-Verweis rechts oben. Still, bis man ihn braucht. */
+.tagesblick__mehr {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: .78rem;
+  text-decoration: none;
+}
+.tagesblick__mehr-pfeil { width: 14px; height: 14px; }
+.tagesblick__mehr:hover .tagesblick__mehr-pfeil { transform: translateX(2px); }
+
+/* Der Satz, wenn eine Hälfte nichts zu zeigen hat. Er steht in der
+   Fläche, die sonst die Liste füllt -- ohne ihn sähe die Seite aus,
+   als hätte sie nicht geladen. */
+.tagesblick__leer {
+  flex: 1;
+  display: flex; align-items: center;
+  margin: 0; padding: 14px 0;
+  font-size: .84rem; color: var(--text-still);
+}
+
+/* ---------- Die Termine als Zeitstrahl ---------------------------------- */
+
+.tagesliste {
+  display: grid; gap: 2px;
+  margin: 0; padding: 0; list-style: none;
+  position: relative;
+}
+
+/* Die senkrechte Linie hinter den Punkten. Sie beginnt am ersten und
+   endet am letzten Punkt -- eine Linie, die über den letzten Termin
+   hinausläuft, verspricht etwas, das nicht kommt. */
+.tagesliste::before {
+  content: "";
+  position: absolute; left: 61px; top: 18px; bottom: 18px; width: 1px;
+  background: linear-gradient(180deg,
+    transparent, var(--rand-hell) 12%, var(--rand-hell) 88%, transparent);
+}
+
+.tagesliste__punkt {
+  --ton: #8a76ff;
+  position: relative;
+  display: grid;
+  grid-template-columns: 46px 16px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  padding: 9px 10px 9px 0;
+  border-radius: var(--radius-klein);
+  transition: background .18s ease;
+}
+/* Dieselben vier Farben wie im Kalender (ARTFARBE in kalender.js).
+   Eine Farbe, die hier etwas anderes bedeutete als dort, müsste man
+   zweimal lernen. */
+.tagesliste__punkt[data-art="call"]   { --ton: #3fbdf5; }
+.tagesliste__punkt[data-art="termin"] { --ton: #8a76ff; }
+.tagesliste__punkt[data-art="review"] { --ton: #50a752; }
+.tagesliste__punkt[data-art="frist"]  { --ton: #d17717; }
+
+.tagesliste__zeit {
+  display: flex; flex-direction: column; align-items: flex-end;
+  gap: 1px;
+  /* Tabellenziffern: Sonst tanzen die Uhrzeiten untereinander, weil
+     die 1 schmaler ist als die 8. */
+  font-variant-numeric: tabular-nums;
+}
+.tagesliste__stunde {
+  font-size: .88rem; font-weight: 650; color: var(--text-leise);
+  letter-spacing: .01em;
+}
+/* 0,74 rem = 11,84 px. NICHT kleiner: Unter 11,5 px meldet die
+   Geräteprüfung zu Recht "zu kleine Schrift" -- und was auf dem Handy
+   niemand liest, ist auf dem Rechner nur Zierde. Der erste Entwurf
+   hatte 0,68 rem (10,88 px). */
+.tagesliste__dauer { font-size: .74rem; color: var(--text-still); }
+
+/* Der Punkt auf der Linie. Ein Ring, kein Klecks -- er soll die Linie
+   markieren, nicht überdecken. */
+.tagesliste__marke {
+  justify-self: center;
+  width: 9px; height: 9px; border-radius: 50%;
+  background: #0b0f16;
+  border: 2px solid var(--ton);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 12%, transparent);
+}
+
+.tagesliste__text { min-width: 0; }
+.tagesliste__titel {
+  margin: 0;
+  font-size: .89rem; font-weight: 600; color: var(--text-leise);
+  /* Ein langer Titel darf die Kachel nicht breiter machen. */
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.tagesliste__unter {
+  margin: 2px 0 0;
+  font-size: .75rem; color: var(--text-still);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+
+.tagesliste__art {
+  padding: 2px 9px; border-radius: 999px;
+  /* 11,84 px statt der ursprünglichen 10,56. Gemeldet von pruef-handy
+     auf allen drei Geräteklassen: "zu kleine Schrift: Call 10.56px".
+     Großbuchstaben mit Sperrung wirken kleiner als sie sind -- gerade
+     deshalb ist die Grenze hier nicht verhandelbar. */
+  font-size: .74rem; font-weight: 700;
+  letter-spacing: .05em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--ton) 72%, #ffffff);
+  background: color-mix(in srgb, var(--ton) 11%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ton) 26%, transparent);
+  white-space: nowrap;
+}
+
+/* Der ganze Eintrag ist anklickbar, ohne dass ein <a> um alles liegt:
+   Ein Link, der Überschrift, Zeit und Marke umschließt, liest sich für
+   ein Vorleseprogramm als ein einziger langer Name. So bleibt die
+   Struktur erhalten, und das aria-label sagt den ganzen Satz. */
+.tagesliste__link {
+  position: absolute; inset: 0;
+  border-radius: var(--radius-klein);
+}
+.tagesliste__link:focus-visible {
+  outline: 2px solid var(--ton); outline-offset: -2px;
+}
+.tagesliste__punkt:hover { background: rgba(255, 255, 255, .035); }
+
+/* WAS ALS NÄCHSTES DRAN IST. Beim Überfliegen ist das die eigentliche
+   Auskunft -- nicht "der erste Termin des Tages". */
+.tagesliste__punkt[data-naechster="ja"] {
+  background: color-mix(in srgb, var(--ton) 7%, transparent);
+}
+.tagesliste__punkt[data-naechster="ja"] .tagesliste__titel { color: var(--text); }
+.tagesliste__punkt[data-naechster="ja"] .tagesliste__stunde { color: var(--text); }
+.tagesliste__punkt[data-naechster="ja"] .tagesliste__marke {
+  background: var(--ton);
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ton) 16%, transparent);
+}
+
+/* VORBEI heißt nicht weg. Man will sehen, was man heute schon hinter
+   sich hat -- es tritt nur zurück. */
+.tagesliste__punkt[data-vorbei="ja"] { opacity: .45; }
+.tagesliste__punkt[data-vorbei="ja"]:hover { opacity: .75; }
+.tagesliste__punkt[data-vorbei="ja"] .tagesliste__marke {
+  border-color: var(--text-still);
+  box-shadow: none;
+}
+
+/* ---------- Schmale Schirme --------------------------------------------
+
+   Untereinander statt nebeneinander -- und der Trenner wird waagerecht.
+   Zwei Spalten auf einem Handy hieße zwei halbe Zeilen, in denen jeder
+   Titel abgeschnitten ist. */
+@media (max-width: 900px) {
+  .tagesblick { grid-template-columns: 1fr; }
+  /* Die feste Spaltenzuweisung von oben muss hier zurückgenommen
+     werden -- "Spalte 3" gibt es in einem einspaltigen Raster nicht,
+     und der Browser legt dann stillschweigend zwei leere Spalten an. */
+  .tagesblick__seite--dran,
+  .tagesblick__seite--heute { grid-column: 1; }
+  .tagesblick__seite--heute::before {
+    left: 14px; right: 14px; top: -1px; bottom: auto;
+    width: auto; height: 1px;
+    background: linear-gradient(90deg,
+      transparent, var(--rand-hell) 18%, var(--rand-hell) 82%, transparent);
+  }
+  .tagesblick__seite { padding: 15px 16px 17px; }
+  .tagesblick__seite--heute { padding-top: 17px; }
+}
+
+@media (max-width: 460px) {
+  /* Die Dauer entfällt zuerst -- sie ist die Angabe, die man am
+     seltensten braucht, und schafft Platz für den Titel. */
+  .tagesliste__dauer { display: none; }
+  .tagesliste__punkt {
+    grid-template-columns: 40px 14px 1fr;
+    gap: 8px;
+    /* OBEN AUSRICHTEN, nicht mittig. Sobald die Plakette unter den
+       Titel rutscht, wird die Zeile hoch -- eine mittig gesetzte
+       Uhrzeit steht dann auf Höhe der zweiten Zeile und fluchtet mit
+       gar nichts. Am Rechner bleibt es mittig, dort ist die Zeile
+       einzeilig. */
+    align-items: start;
+  }
+  /* Die Zeit und der Punkt auf der Linie rücken auf die Höhe des
+     Titels -- die drei gehören optisch zusammen. */
+  .tagesliste__zeit { padding-top: 1px; }
+  .tagesliste__marke { margin-top: 6px; }
+  /* Die Art steht dann unter dem Titel statt daneben. */
+  .tagesliste__art {
+    grid-column: 3; justify-self: start;
+    margin-top: 6px;
+  }
+  .tagesliste::before { left: 54px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tagesliste__punkt, .tagesblick__mehr-pfeil { transition: none; }
+}
+
+/* Ohne Farbverläufe tragen Kante und Ring allein. Der Trenner wird zur
+   echten Linie -- ein Verlauf, den es nicht gibt, wäre sonst gar nichts. */
+@media (forced-colors: active) {
+  .tagesblick { border: 1px solid CanvasText; }
+  .tagesblick__seite--heute::before { background: CanvasText; }
+  .tagesliste::before { background: CanvasText; }
+  .tagesliste__marke { border-color: CanvasText; }
+  .tagesliste__art { border: 1px solid CanvasText; }
+  .tagesliste__punkt[data-vorbei="ja"] { opacity: 1; }
+}