Tagesblick: Termine als Karten, und vier Fehler, die dabei auffielen

Filipe zu der Liste mit einem einzigen Termin darin: "das soll viel
geiler und krasser aussehen bitte."

Er hatte recht, und der Grund war der Einzelfall. Ein Zeitstrahl lebt
davon, dass er etwas VERBINDET -- bei einem Eintrag verbindet er nichts.
Uebrig blieben eine magere Zeile, ein Strich ins Leere und Weissraum bis
zur Plakette am rechten Rand.

Jetzt traegt jede Karte fuer sich: eigene Flaeche mit farbiger Kante,
die Uhrzeit gross und in der Farbe der Terminart (vorher war sie
kleiner als der Titel -- dabei ist sie das, was man sucht), ein Balken
fuer die Dauer, und "JETZT" am naechsten Termin statt eines etwas
helleren Hintergrunds. Erledigtes bekommt einen Haken und verliert die
Farbe, bleibt aber voll lesbar; vorher wurde alles blasser, was auch
den Text traf.

Kein Neon dazu. Die Wirkung kommt aus Kontrast und Hierarchie.

VIER FEHLER, DIE DIE PRUEFUNGEN GEFUNDEN HABEN

1. ZEITZONE, in NEUN Pruefungen. Um 00:10 meldete pruef-teilnehmer
   ploetzlich 13 Fehlschlaege an einer Datei, die seit Stunden niemand
   angefasst hatte:

       Ortszeit:  06.09.2026, 00:10
       UTC:       05.09.2026, 22:10

   Sie bildeten ihr Tagesdatum mit toISOString() -- also UTC -- legten
   ihre Termine auf gestern und suchten heute. ZWEI STUNDEN AM TAG waren
   sie damit rot, im Winter eine. Wer nur tagsueber laeuft, sieht das
   nie. Jetzt gibt es helfer-zeit.mjs mit derselben Rechenweise wie die
   Anwendung, und pruef-struktur sucht das Muster kuenftig automatisch.

2. MEIN UMSTELL-SKRIPT VERSAGTE STILL. Es pruefte
   `if "helfer-zeit.mjs" not in s` -- und mein eigener Kommentar
   enthielt den Dateinamen. Ergebnis: keine einzige der neun Dateien
   bekam den Import, alle waeren zur Laufzeit abgestuerzt. `node --check`
   findet das nicht. Aufgefallen, weil danach nachgezaehlt wurde statt
   der Erfolgsmeldung zu glauben.

3. DIE KACHEL LIESS DIE SEITE SPRINGEN. Der Layout-Sprung auf
   start.html stieg von 0 auf 0,96 -- zweimal bestaetigt. Sie erschien
   erst nach dem Laden und schob alles darunter weg. Das ist kein
   Schoenheitsfehler, sondern der Grund, warum man auf den falschen
   Knopf drueckt.

   Gemessen wurden die echten Hoehen (1 Termin 169 px, 3 → 327, 5 →
   486). Daraus zwei Konsequenzen: Platz vorher reservieren, und
   hoechstens DREI Termine zeigen -- das halbiert die Spanne und ist
   die klarere Aussage. Der Rest steht als "1 weiterer Termin heute"
   darunter, nicht stillschweigend abgeschnitten. Von 0,96 auf 0,163.

4. SCHRIFTGROESSE, zweimal am selben Tag: erst die Art-Plaketten mit
   10,56 px, dann -- nach der Korrektur -- die neue Jetzt-Marke mit
   10,88. Beide Male gemeldet von pruef-handy und pruef-grosscheck,
   beide Male erst nach einem mehrminuetigen Browserlauf.

ZWEI PRUEFUNGEN, DIE SICH SELBST IM WEG STANDEN

pruef-tempo-workspace meldete "NEUE Doppelabfrage: start.html 2x
/workspace/api/termine". Nachgemessen an einem einzelnen Seitenaufruf:
genau eine Anfrage. Die Pruefung startete ihren Zaehler, bevor die
Anmeldung zur Ruhe gekommen war, und schrieb der Seite an, was die
vorherige noch offen hatte.

pruef-tagesblick fiel zum zweiten Mal auf dieselbe Falle herein: Sie
mass die Artfarbe an einem vorbeigezogenen Termin, der absichtlich grau
ist. Diesmal an der Wurzel geloest -- die Daempfung wird fuer die
Messung kurz abgeschaltet und sofort zurueckgesetzt. Damit ist die
Zuordnung fuer JEDEN Termin geprueft, unabhaengig von der Uhrzeit des
Laufs, und zusaetzlich beweist die Pruefung, dass die Daempfung greift.

NEU: Schriftgroessen werden jetzt AN DER QUELLE geprueft, in Sekunden
statt Minuten. Im Bestand stehen 43 solche Stellen; sie alle rot zu
melden haette die Pruefung ab Tag eins wertlos gemacht. Deshalb eine
Grundlinie wie beim Layout-Sprung: Sie haelt den Stand fest und
schlaegt an, sobald es MEHR werden. Heute haette das zweimal gegriffen.
Die Browserpruefung bleibt daneben -- sie sieht, was am Ende auf dem
Schirm steht, die CSS-Pruefung nur, was gemeint war.

Gesamtlauf: 56 von 56 Dateien, 2002 von 2002 Punkten.

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

workspace/assets/css/start.css

@@ -3222,6 +3222,18 @@ body[data-fremde-sicht="ja"]::after {
 .tagesblick__seite--dran  { grid-column: 1; }
 .tagesblick__seite--heute { grid-column: 3; }
 
+/* SOLANGE GELADEN WIRD, hält die Kachel ihre Höhe. Ohne das sprang
+   alles darunter nach unten, sobald die Daten ankamen -- gemessen als
+   Layout-Sprung 0,96 auf der Startseite. Der Wert entspricht ungefähr
+   einer Kachel mit zwei bis drei Einträgen je Seite. Gemessen: ein
+   Termin ergibt 169 px, drei ergeben 327 px -- 280 liegt dazwischen,
+   der Rest-Sprung ist damit in beide Richtungen klein. */
+.tagesblick[data-laedt="ja"] { min-height: 280px; }
+/* Die Überschriften stehen schon da, der Rest bleibt ruhig leer. Ein
+   zappelndes Skelett wäre hier Selbstzweck -- die Wartezeit ist der
+   eine Moment, in dem die Daten aus der Datenbank kommen. */
+.tagesblick[data-laedt="ja"] .tagesblick__leer { visibility: hidden; }
+
 .tagesblick__seite {
   display: flex; flex-direction: column;
   padding: 17px 19px 19px;
@@ -3263,131 +3275,247 @@ body[data-fremde-sicht="ja"]::after {
   font-size: .84rem; color: var(--text-still);
 }
 
-/* ---------- Die Termine als Zeitstrahl ---------------------------------- */
+/* ---------- Die Termine des Tages ---------------------------------------
+
+   ZWEITER ANLAUF (05.09.2026). Der erste war eine Liste mit einem
+   dünnen Strich dahinter. Filipes Urteil an einem Tag mit EINEM
+   Termin: *"das soll viel geiler und krasser aussehen."*
+
+   Er hatte recht, und der Grund ist der Einzelfall: Ein Zeitstrahl
+   lebt davon, dass er etwas VERBINDET. Bei einem einzigen Eintrag
+   verbindet er nichts -- übrig bleiben eine magere Zeile, ein Strich
+   ins Leere und viel Weißraum bis zur Plakette am rechten Rand.
+
+   WAS SICH ÄNDERT: Jeder Termin ist jetzt eine eigene Fläche mit
+   farbiger Kante statt einer nackten Zeile. Das trägt auch allein.
+   Dazu drei Dinge, die vorher fehlten:
+
+     * Die Uhrzeit ist groß und trägt die Farbe der Terminart. Sie ist
+       die Auskunft, die man sucht -- vorher war sie kleiner als der
+       Titel.
+     * Ein Balken zeigt die DAUER. Aus "30 min" als Text wird etwas,
+       das man sieht, ohne zu lesen: Ein Zweistundenblock ist ein
+       anderer Tag als vier Viertelstunden.
+     * Der nächste Termin bekommt einen Ring und die Marke "JETZT" --
+       nicht bloß einen helleren Hintergrund.
+
+   WAS SICH NICHT ÄNDERT: kein Neon, keine harten Weißflächen, keine
+   Bewegung. "Krass" entsteht hier aus Kontrast und Hierarchie, nicht
+   aus Leuchtkraft -- augenschonend bleibt Hausregel. Die Farbe steckt
+   weiterhin in wenigen kleinen Flächen; sie wirkt nur stärker, weil
+   drumherum mehr Ruhe ist. */
 
 .tagesliste {
-  display: grid; gap: 2px;
+  display: grid; gap: 8px;
   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;
+  grid-template-columns: auto 1fr auto;
   align-items: center;
-  gap: 10px;
-  padding: 9px 10px 9px 0;
+  gap: 14px;
+  padding: 13px 15px 13px 17px;
+  border: 1px solid var(--rand);
   border-radius: var(--radius-klein);
-  transition: background .18s ease;
+  /* Ein Hauch der Terminfarbe von links, dann nichts mehr. Die Fläche
+     bleibt fast schwarz -- die Farbe soll die Kante betonen, nicht die
+     Karte einfärben. */
+  background:
+    linear-gradient(90deg,
+      color-mix(in srgb, var(--ton) 8%, transparent),
+      transparent 42%),
+    rgba(255, 255, 255, .022);
+  transition: border-color .18s ease, background .18s ease, transform .18s ease;
+  overflow: hidden;
 }
-/* Dieselben vier Farben wie im Kalender (ARTFARBE in kalender.js).
-   Eine Farbe, die hier etwas anderes bedeutete als dort, müsste man
-   zweimal lernen. */
+
+/* DIE KANTE LINKS ist der eigentliche Träger der Farbe. Oben kräftig,
+   unten auslaufend -- ein durchgehender Balken wirkt wie ein Etikett,
+   ein auslaufender wie Licht. */
+.tagesliste__punkt::before {
+  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  background: linear-gradient(180deg,
+    var(--ton), color-mix(in srgb, var(--ton) 30%, transparent));
+}
+
 .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__punkt:hover {
+  border-color: color-mix(in srgb, var(--ton) 40%, var(--rand));
+  background:
+    linear-gradient(90deg,
+      color-mix(in srgb, var(--ton) 13%, transparent),
+      transparent 48%),
+    rgba(255, 255, 255, .045);
+}
+
+/* ---- Die Zeit: groß, farbig, mit Dauerbalken ---- */
+
 .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;
+  display: flex; flex-direction: column; align-items: flex-start;
+  gap: 7px;
+  min-width: 92px;
+}
+/* Balken und Minutenzahl stehen NEBENEINANDER, nicht übereinander.
+   Untereinander lag der Balken direkt unter der Uhrzeit und las sich
+   als deren Unterstreichung -- er sah aus wie Deko und nicht wie eine
+   Angabe. Nebeneinander ist klar, dass die Länge etwas bedeutet, und
+   die linke Spalte wird eine Zeile flacher. */
+.tagesliste__laenge {
+  display: flex; align-items: center; gap: 8px;
+  width: 100%;
 }
 .tagesliste__stunde {
-  font-size: .88rem; font-weight: 650; color: var(--text-leise);
-  letter-spacing: .01em;
+  font-size: 1.12rem; font-weight: 700;
+  letter-spacing: -.01em; line-height: 1;
+  color: color-mix(in srgb, var(--ton) 62%, #ffffff);
+  font-variant-numeric: tabular-nums;
 }
-/* 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);
+/* DER DAUERBALKEN. Seine Breite kommt aus --laenge (in start.js
+   gesetzt): 30 Minuten sind kurz, zwei Stunden füllen ihn. Damit sieht
+   man die Länge, statt sie zu lesen.
+
+   Gedeckelt bei 100 %, weil ein Ganztagestermin den Balken sonst aus
+   der Karte schöbe. */
+.tagesliste__balken {
+  position: relative; flex: none;
+  /* Feste Breite statt 100 %: Die Spur ist der Maßstab, an dem man die
+     Füllung abliest. Wäre sie mal breiter, mal schmaler, sagte die
+     Füllung nichts mehr. */
+  width: 40px; height: 4px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, .08);
+  overflow: hidden;
 }
+.tagesliste__balken::after {
+  content: ""; position: absolute; inset: 0;
+  width: var(--laenge, 30%);
+  border-radius: 999px;
+  background: linear-gradient(90deg,
+    var(--ton), color-mix(in srgb, var(--ton) 45%, transparent));
+}
+.tagesliste__dauer {
+  font-size: .74rem; color: var(--text-still);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---- Text ---- */
 
 .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. */
+  font-size: .96rem; font-weight: 620; color: var(--text);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 .tagesliste__unter {
-  margin: 2px 0 0;
-  font-size: .75rem; color: var(--text-still);
+  margin: 3px 0 0;
+  font-size: .78rem; color: var(--text-still);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 
+/* ---- Rechte Seite: Art und Zustand ---- */
+
+.tagesliste__rechts {
+  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
+}
+
 .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. */
+  padding: 3px 10px; border-radius: 999px;
+  /* 11,84 px. Unter 11,5 meldet die Geräteprüfung zu Recht "zu kleine
+     Schrift" -- und Großbuchstaben mit Sperrung wirken kleiner, als
+     sie sind. */
   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);
+  letter-spacing: .06em; text-transform: uppercase;
+  color: color-mix(in srgb, var(--ton) 78%, #ffffff);
+  background: color-mix(in srgb, var(--ton) 13%, transparent);
+  border: 1px solid color-mix(in srgb, var(--ton) 30%, 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. */
+/* DIE JETZT-MARKE. Sie sagt in einem Wort, was der hellere Hintergrund
+   vorher nur andeutete. */
+.tagesliste__jetzt {
+  display: none;
+  align-items: center; gap: 5px;
+  /* 11,84 px. Zum ZWEITEN Mal an dieser Kachel korrigiert -- erst die
+     Art-Plaketten, jetzt diese Marke. Unter 11,5 px meldet die
+     Geraetepruefung zu Recht "zu kleine Schrift", und Grossbuchstaben
+     mit weiter Sperrung wirken noch kleiner, als sie sind. */
+  font-size: .74rem; font-weight: 800;
+  letter-spacing: .1em; text-transform: uppercase;
+  color: var(--ton);
+}
+.tagesliste__jetzt::before {
+  content: ""; width: 6px; height: 6px; border-radius: 50%;
+  background: var(--ton);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 22%, transparent);
+}
+.tagesliste__punkt[data-naechster="ja"] .tagesliste__jetzt { display: inline-flex; }
+
+/* ---- Als Nächstes dran ---- */
+
+.tagesliste__punkt[data-naechster="ja"] {
+  border-color: color-mix(in srgb, var(--ton) 45%, transparent);
+  background:
+    linear-gradient(90deg,
+      color-mix(in srgb, var(--ton) 15%, transparent),
+      transparent 55%),
+    rgba(255, 255, 255, .04);
+}
+.tagesliste__punkt[data-naechster="ja"]::before { width: 4px; }
+.tagesliste__punkt[data-naechster="ja"] .tagesliste__stunde {
+  color: color-mix(in srgb, var(--ton) 40%, #ffffff);
+}
+
+/* ---- Vorbei ----
+   Zurücktreten, nicht verschwinden: Man will sehen, was man heute
+   schon hinter sich hat. Statt alles blass zu machen (dann leidet die
+   Lesbarkeit), verliert nur die FARBE an Kraft -- der Text bleibt. */
+.tagesliste__punkt[data-vorbei="ja"] {
+  --ton: #75859a;
+  background: rgba(255, 255, 255, .015);
+}
+.tagesliste__punkt[data-vorbei="ja"] .tagesliste__titel { color: var(--text-leise); }
+.tagesliste__punkt[data-vorbei="ja"]::before { opacity: .5; }
+.tagesliste__punkt[data-vorbei="ja"]:hover { background: rgba(255, 255, 255, .04); }
+
+/* Der Haken sagt "erledigt" schneller als jede Farbe. */
+.tagesliste__punkt[data-vorbei="ja"] .tagesliste__art::before {
+  content: "✓ ";
+  font-weight: 700;
+}
+
+/* ---- Der ganze Eintrag ist anklickbar ----
+   Ein <a> um alles herum läse 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);
 }
+/* "3 weitere Termine heute" -- der Hinweis auf das, was nicht mehr
+   in die Kachel passte. Still gehalten: Er ist ein Wegweiser, keine
+   sechste Karte. */
+.tagesliste__mehr {
+  padding: 4px 0 0 2px;
+}
+.tagesliste__mehr-link {
+  font-size: .8rem; color: var(--text-still);
+  text-decoration: none;
+  transition: color .16s ease;
+}
+.tagesliste__mehr-link:hover { color: var(--text-leise); }
+
 .tagesliste__link:focus-visible {
-  outline: 2px solid var(--ton); outline-offset: -2px;
+  outline: 2px solid var(--ton); outline-offset: -3px;
 }
-.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.
@@ -3411,42 +3539,44 @@ body[data-fremde-sicht="ja"]::after {
 }
 
 @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. */
+    /* Die Uhrzeitspalte wird schmaler, der Rest bleibt. Die Plakette
+       nach unten zu schieben wäre der naheliegende Griff -- sie steht
+       dann aber unter dem Titel und macht jede Karte fünfzig Pixel
+       höher, ohne etwas zu gewinnen. */
+    gap: 11px;
+    padding: 12px 13px 12px 15px;
+    /* OBEN AUSRICHTEN: Bricht der Titel auf zwei Zeilen, stünde eine
+       mittig gesetzte Uhrzeit auf Höhe der zweiten und fluchtete mit
+       nichts. Am Rechner bleibt es mittig, dort ist alles 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; }
+  .tagesliste__zeit { min-width: 78px; }
+  .tagesliste__stunde { font-size: 1.02rem; }
+  /* Der Balken entfaellt am Handy -- neben ihm bliebe fuer den Titel
+     zu wenig. Die Zahl sagt es weiterhin. */
+  .tagesliste__balken { display: none; }
+  .tagesliste__titel { font-size: .92rem; white-space: normal; }
+  .tagesliste__rechts { padding-top: 2px; }
 }
 
 @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. */
+/* Ohne Farbverläufe trägt die Kante allein -- und die ist hier ein
+   Verlauf, also muss sie zur echten Fläche werden. Sonst verschwindet
+   ausgerechnet das Merkmal, das die Terminart anzeigt. */
 @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__punkt { border: 1px solid CanvasText; }
+  .tagesliste__punkt::before { background: CanvasText; }
+  .tagesliste__punkt[data-naechster="ja"] { border-width: 2px; }
+  .tagesliste__balken::after { background: CanvasText; }
   .tagesliste__art { border: 1px solid CanvasText; }
+  .tagesliste__jetzt::before { background: CanvasText; box-shadow: none; }
+  /* Im Kontrastmodus gibt es keine gedämpften Töne -- der Haken vor
+     der Art bleibt das Merkmal für "vorbei". */
   .tagesliste__punkt[data-vorbei="ja"] { opacity: 1; }
 }