Apps lassen sich in Kategorien gruppieren

Ein Feld an der App, kein zweites Datenmodell: Eine Kategorie besteht genau
so lange, wie eine App sie traegt. Damit gibt es nichts anzulegen, nichts zu
loeschen und keine zweite Reihenfolge, die mit der bestehenden aus dem Tritt
geraten koennte.

Die Reihenfolge der Ueberschriften ist die ihres ersten Auftretens in der
Liste -- also ordnen dieselben Pfeile wie bisher beides. Am Rand einer Gruppe
haengt der Pfeil die App in die Nachbargruppe um, statt zu tauschen: derselbe
Knopf zum Sortieren und zum Umkategorisieren, und keine App kann zwischen
zwei Gruppen liegen bleiben.

Eingesammelt wird im Server, beim Schreiben wie beim Lesen. Das war nicht der
erste Entwurf: Zuerst sortierte die Oberflaeche und die HoneyBar setzte ihre
Ueberschriften beim Durchlaufen -- prompt stand eine App ohne Kategorie in der
HoneyBar unter der letzten Ueberschrift und auf dem Schreibtisch ganz oben.
Bei zwei Lesern derselben Liste gehoert die Reihenfolge dorthin, wo die Liste
liegt.

Ueberschriften erscheinen, wo man sucht: Kacheln, Schublade beider Leisten,
Programme-Fenster. Nicht im App-Streifen (32 Pixel) und nicht bei den
Schreibtischsymbolen.

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

web/css/style.css

@@ -1396,3 +1396,58 @@ body {
 @media (max-width: 620px) {
   .deskwidgets { position: static; align-items: stretch; margin: 10px; }
 }
+
+/* ── Kategorien ────────────────────────────────────────────────────────────
+ *
+ * Eine Überschrift je Gruppe, in derselben Sprache wie die übrigen Etiketten:
+ * klein, gesperrt, gedimmt. Sie soll die Kacheln gliedern, nicht mit ihnen um
+ * Aufmerksamkeit ringen.
+ */
+.tiles-kopf {
+  /* Bleibt ein Kind desselben Rasters und spannt über alle Spalten — ein
+     eigenes Raster je Gruppe hätte die Kacheln zweier Gruppen gegeneinander
+     verschoben. */
+  grid-column: 1 / -1;
+  margin: 6px 0 -4px;
+  font-size: 11px;
+  font-weight: normal;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: var(--p-dim);
+}
+.tiles-kopf:first-child { margin-top: 0; }
+
+.applist .al-kopf {
+  padding: 8px 8px 3px;
+  font-size: 10px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: var(--p-dim);
+}
+.applist .al-kopf:first-child { padding-top: 2px; }
+
+/* Im Editor trägt die Überschrift die Pfeile für die ganze Gruppe. */
+.ae-gruppe {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 4px 3px;
+  font-size: 10px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: var(--p-dim);
+}
+.ae-gruppe:first-of-type { padding-top: 2px; }
+
+/* Die Schublade ist ein Raster mit drei Spalten — die Überschrift spannt
+   darüber, sonst stünde sie als vierte Kachel neben den Apps. */
+.drawer .d-kopf {
+  grid-column: 1 / -1;
+  padding: 7px 4px 1px;
+  font-size: 10px;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: var(--p-dim);
+}
+.drawer .d-kopf:first-child { padding-top: 0; }