Am Handy wird aus einer Kalenderpille ein Punkt

GEMESSEN, was dort wirklich stand:

    Fenster   Zelle   Pille   Platz fuer Text
     360 px   42 px   32 px   16 px  ->  1-2 Buchstaben
     390 px   46 px   36 px   20 px  ->  2-3 Buchstaben
     412 px   49 px   39 px   23 px  ->  3 Buchstaben
     768 px   95 px   85 px   69 px  ->  lesbar

"Content-Ideen sammeln" wurde zu "C…" -- eine Zeile, die Hoehe kostet
und nichts sagt. Drei Termine an einem Tag waren drei solche Zeilen.

JETZT: ein Punkt je Termin, nebeneinander. Man sieht, DASS an dem Tag
etwas ist und wie viel, und tippt den Tag an, um zu lesen, was. Der
Tagesdialog dafuer steht seit jeher, ist lesbar und hat 44-px-Zeilen;
er war nur schwer zu finden, solange das Raster so tat, als koenne man
dort lesen.

  - Zeitraum: bleibt ein durchgehender Balken. Ihn auch zu Punkten zu
    machen naehme genau das weg, wofuer er am 21.09. gebaut wurde.
  - Anlass (Feiertag u. a.): ein ECKIGES Zeichen, damit man es vom
    runden Termin unterscheidet. "DE…" fuer "Tag der Deutschen
    Einheit" sagt genauso wenig.
  - Erledigtes: hohl statt voll -- sonst saehe ein abgehakter Termin
    aus wie ein offener, und der Kalender loege.
  - Die Punkte sind NICHT einzeln antippbar (pointer-events: none).
    Ein 8-px-Link waere ein Nadeloehr; so faellt jeder Tipp auf die
    Zelle. Am Rechner bleibt die Pille ein Link.

DREI DINGE, DIE ERST DAS BILDSCHIRMFOTO GEZEIGT HAT:

(1) Die Zahlen sagten 8 x 8 -- und der Titel lief trotzdem quer ueber
    die Nachbarzellen. Ursache: start.css traegt eine Sammelregel
    `body.start .k-pille { font-size: .75rem }`, um ein Element
    spezifischer als `.k-tag .k-pille` (0,2,1 gegen 0,2,0). Sie
    gewinnt, egal welche Datei spaeter laedt. Aufgeklaert hat es die
    Frage an den Browser, WELCHE Regeln auf das Element passen.

(2) `.k-tag` traegt `container-type: inline-size` und ist damit der
    Behaelter fuer ihre KINDER. Eine Regel fuer `.k-tag` SELBST in
    `@container` wird gegen den naechsten Behaelter darueber geprueft
    und greift nie. Die Zelle blieb eine Flex-Spalte, jeder Punkt bekam
    eine eigene Zeile. Jetzt fragt die Zelle das Raster -- ein
    benannter Behaelter, Schwelle gerechnet: 46 + 8 + 7 x 60 = 474.

(3) Die Kinder der Pille (Uhrzeit, Wiederholzeichen) haben eine eigene
    Schriftgroesse und hielten den Punkt auf 26 px Hoehe. Ein 8 x 26
    grosser "Punkt" ist ein Strich.

pruef-kalender: 141/0 -- vorher 135 ok und 6 FEHL.

Die sechs waren KEIN Fehler am Kalender, und nur einer davon war neu:

  - Vier kamen von Screen 11 (Termin von-bis): Ein Eintrag ueber fuenf
    Tage setzt fuenf Marken, und die Pruefung zaehlte Marken statt
    Eintraege. Sie hatte am 17.09. schon gelernt, ihre Erwartung
    abzuleiten -- veraltet war diesmal nicht die Erwartung, sondern
    das, was gemessen wurde. Gezaehlt wird jetzt ueber den VERWEIS
    (`zeigen=eintrag-N`), der an jedem Tag derselbe ist. Der `title`
    ginge nicht: Er endet mit "(Tag 3 von 5)".
  - Zwei waren meine: Die Pruefung las die Farbe aus der linken Kante
    -- die faellt beim Punkt weg, also meldete sie "1 Farbe" statt 5.
    Gelesen wird jetzt `--pfarbe`, die Quelle selbst.

Neun neue Zusicherungen, darunter die, die beim Bauen gefehlt hat:
"nichts ragt ueber den Rand seiner Zelle hinaus". Groesse allein
genuegt nicht -- die Pille war bereits 8 x 8 und trug trotzdem Text.
Gegenprobe: Raster auf 1200 px aufziehen, Titel muss zurueckkommen.

Nachbarn gruen: pruef-tippziele 11/0 (sieht die 11 neuen Regeln, zaehlt
den Punkt richtig nicht als Tippziel), pruef-css-klassen 30/0,
pruef-zeitraum 16/0, pruef-terminregel 35/0.

workspace/assets/css/kalender.css

@@ -1714,3 +1714,171 @@
 .k-strahl .k-pille__brett { display: block; }
 .k-zeile .k-pille__brett { display: none; }
 
+
+/* =====================================================================
+   AM HANDY WIRD AUS EINER PILLE EIN PUNKT (21.09.2026)
+   =====================================================================
+
+   GEMESSEN, nicht geschaetzt. Eine Monatszelle und die Pille darin:
+
+       Fenster    Zelle    Pille    Platz fuer Text
+        360 px    42 px    32 px    16 px  ->  1-2 Buchstaben
+        390 px    46 px    36 px    20 px  ->  2-3 Buchstaben
+        412 px    49 px    39 px    23 px  ->  3 Buchstaben
+        768 px    95 px    85 px    69 px  ->  lesbar
+       1280 px   158 px   140 px   124 px  ->  lesbar
+
+   Der Platz fuer Text ist die Zellenbreite minus 34 px: 18 px
+   Zellenrand, 14 px Pillenrand, 2 px farbige Kante. Bei 11,5 px
+   Schrift sind das am Handy anderthalb Buchstaben und drei Punkte.
+   "Content-Ideen sammeln" wurde zu "C…" -- eine Zeile, die Hoehe
+   kostet und nichts sagt.
+
+   WAS GROSSE KALENDER AN DIESER STELLE TUN: einen Punkt. Man sieht,
+   DASS an dem Tag etwas ist und wie viel -- und tippt den Tag an, um
+   zu lesen, was. Der Tagesdialog dafuer steht seit jeher (tagOeffnen),
+   er ist lesbar und hat 44-px-Zeilen; er war nur schwer zu finden,
+   solange das Raster so tat, als koenne man dort lesen.
+
+   DIE SCHWELLE IST GERECHNET, NICHT GERATEN: Vier Buchstaben sind das
+   Wenigste, aus dem ein Mensch einen Hinweis zieht. 4 x 6,2 px = 25 px
+   Text + 34 px Rand = 59 px Zelle. Darum 60.
+
+   UND SIE MISST DIE ZELLE, NICHT DAS FENSTER -- wie die Regel fuer den
+   Brettnamen daneben. Eine Fensterschwelle waere wieder die Rechnung
+   von gestern und muesste bei jeder Aenderung am Raster nachgezogen
+   werden.
+
+   EIN ZEITRAUM BLEIBT EIN BALKEN. Ihn auch zu Punkten zu machen wuerde
+   genau das wegnehmen, wofuer er am 21.09. gebaut wurde: dass man
+   sieht, wie weit etwas laeuft. Ohne Text, aber durchgehend.
+
+   DIE PUNKTE SIND NICHT EINZELN ANTIPPBAR (`pointer-events: none`).
+   Ein 7-px-Link waere ein Nadeloehr -- die Hausregel sind 44 px. So
+   faellt jeder Tipp auf die ZELLE, und die oeffnet den Tagesdialog.
+   Am Rechner, wo eine Maus genau zielt, bleibt die Pille ein Link.
+   ===================================================================== */
+@container (max-width: 60px) {
+  /* WARUM HIER UEBERALL `body` DAVORSTEHT -- gemessen, nicht geschmueckt.
+
+     start.css traegt eine Sammelregel fuer schmale Fenster:
+         body.start .k-pille { font-size: .75rem }
+     Die ist um EIN Element spezifischer als `.k-tag .k-pille`
+     (0,2,1 gegen 0,2,0) und gewinnt damit, egal welche Datei spaeter
+     laedt. Folge ohne das `body`: Der Punkt bekam Groesse, Farbe und
+     `pointer-events` aus dieser Regel hier -- die Schriftgroesse aber
+     aus start.css. Er war 8 x 8 gross und trug trotzdem einen Titel,
+     der quer ueber die Nachbarzellen lief.
+
+     Aufgefallen ist das NICHT an den Zahlen (die sagten 8 x 8, alles
+     gut), sondern am Bildschirmfoto. Aufgeklaert hat es die Frage an
+     den Browser, WELCHE Regeln auf das Element passen -- statt zu
+     raten, welche gewinnen sollte.
+
+     `body` hebt auf denselben Wert (0,2,1) und gewinnt dann ueber die
+     Reihenfolge, weil kalender.css nach start.css laedt. Das ist der
+     kleinstmoegliche Schritt; `!important` waere die Tuer, durch die
+     beim naechsten Mal niemand mehr zurueckfindet. */
+
+  /* Die Zelle wird zum Block, damit die Punkte nebeneinander laufen
+     und umbrechen. Als Flex-Spalte saesse jeder Punkt in einer eigenen
+     Zeile -- drei Termine waeren dann hoeher als der ganze Tag. */
+
+  body .k-tag .k-pille {
+    display: inline-block;
+    width: 8px; height: 8px;
+    padding: 0;
+    margin: 0 3px 3px 0;
+    border-left: 0;
+    border-radius: 50%;
+    /* Voll deckend -- die 16-%-Fuellung der Pille waere als Punkt
+       kaum zu sehen. */
+    background: var(--pfarbe);
+    font-size: 0;            /* der Text geht, die Farbe bleibt */
+    line-height: 0;
+    min-height: 0;
+    overflow: visible;
+    pointer-events: none;    /* der Tipp gehoert der Zelle */
+    vertical-align: middle;
+  }
+
+  /* DIE KINDER AUCH. `font-size: 0` an der Pille nimmt nur den nackten
+     Textknoten mit -- die Uhrzeit und das Wiederholzeichen haben ihre
+     eigene Schriftgroesse und hielten den Punkt auf 26 px Hoehe. Ein
+     8 x 26 grosser "Punkt" ist ein Strich. Gemessen, nicht vermutet. */
+  body .k-tag .k-pille > * { display: none; }
+
+  /* Erledigtes bleibt erkennbar -- hohl statt voll. Ohne das saehe ein
+     abgehakter Termin aus wie ein offener, und der Kalender loege. */
+  body .k-tag .k-pille.erledigt {
+    background: transparent;
+    border: 2px solid var(--pfarbe);
+    opacity: .75;
+  }
+
+  /* EIN ANLASS WIRD EIN ECKIGES ZEICHEN -- rund waere er von einem
+     Termin nicht zu unterscheiden, und "DE…" fuer "Tag der Deutschen
+     Einheit" sagt genauso wenig wie "Co…" fuer eine Content-Idee.
+     Ganz weglassen geht nicht: Nur FEIERTAGE faerben die Zelle rosa,
+     andere Anlaesse nicht -- die waeren dann unsichtbar. Den Namen
+     nennt der Tagesdialog. */
+  body .k-tag .k-anlass {
+    display: inline-block;
+    width: 8px; height: 8px;
+    padding: 0; margin: 0 3px 3px 0;
+    border-left: 0;
+    border-radius: 2px;
+    background: var(--afarbe);
+    font-size: 0; line-height: 0; min-height: 0;
+    pointer-events: none;
+    vertical-align: middle;
+  }
+  body .k-tag .k-anlass > * { display: none; }
+
+  /* Der Zeitraum: durchgehender Balken statt Punkt. */
+  body .k-tag .k-pille[data-spanne] {
+    display: block;
+    width: auto; height: 5px;
+    margin: 0 0 3px;
+    border-radius: 3px;
+  }
+  /* Angeschnitten, wo er weiterlaeuft -- dieselbe Sprache wie in der
+     breiten Ansicht. */
+  body .k-tag .k-pille[data-spanne="mitte"],
+  body .k-tag .k-pille[data-spanne="ende"] { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+  body .k-tag .k-pille[data-spanne="mitte"],
+  body .k-tag .k-pille[data-spanne="start"] { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+}
+
+/* =====================================================================
+   DIE ZELLE KANN SICH NICHT SELBST ABFRAGEN (21.09.2026)
+   =====================================================================
+
+   `.k-tag` traegt `container-type: inline-size` und ist damit der
+   Behaelter fuer ihre KINDER. Eine Regel fuer `.k-tag` selbst, die in
+   `@container` steht, wird gegen den naechsten Behaelter DARUEBER
+   geprueft -- also nicht gegen die Zelle. Sie greift nie.
+
+   Genau das ist hier passiert: Die Punktregeln fuer `.k-pille` wirkten
+   (Groesse, Farbe, pointer-events -- alles gemessen), die Regel
+   `.k-tag { display: block }` daneben nicht. Ergebnis: Die Zelle blieb
+   eine Flex-SPALTE, und jeder Punkt bekam eine eigene Zeile.
+
+   Deshalb fragt die Zelle jetzt ihren Behaelter: das Raster.
+
+   DIE SCHWELLE IST GERECHNET. Das Raster ist
+       grid-template-columns: 46px repeat(7, minmax(0, 1fr))
+   mit 1 px Fugen. Eine Tagesspalte ist also
+       (Raster - 46 - 8) / 7
+   und wird bei 60 px schmal genug fuer Punkte (siehe die Rechnung
+   darueber). Umgestellt: Raster = 46 + 8 + 7 x 60 = 474.
+
+   Ein benannter Behaelter, damit die Abfrage nicht versehentlich bei
+   der Zelle haengenbleibt -- unbenannte Abfragen nehmen immer den
+   naechsten, und das waere hier der falsche. */
+.k-raster { container-type: inline-size; container-name: kalenderraster; }
+
+@container kalenderraster (max-width: 474px) {
+  .k-tag { display: block; }
+  .k-tag__kopf { margin-bottom: 5px; }
+}