fix(handy): gleiches Logo, schiebbare Apps, Widgets in voller Breite

Drei Sachen, die Marc aufgefallen sind:

Das Quadrat im Logo war in der HoneyBar in voller Groesse, in der Menueleiste
klein und angehoben — nebeneinander sah das wie zwei verschiedene Logos aus.
Jetzt beide 10px.

Bei vielen Apps quetschte das Flex-Raster die Namen zusammen, statt den Streifen
schiebbar zu machen: flex-shrink stand auf 1. Jetzt schiebt man seitwaerts, in
beiden Leisten, mit einem Schatten am rechten Rand als Hinweis. Am Handy war
das der Unterschied zwischen "sechs Apps erreichbar" und "drei Buchstabenreste".

Und die Widgets waren einspaltig auf 320px begrenzt, waehrend das Systemfenster
die volle Breite nahm — drei verschieden breite Kaesten untereinander sehen aus
wie ein Fehler. Dazu wird aus der Kachelwand am Handy eine Liste: sechs Apps
passen jetzt auf einen Bildschirm statt auf drei.

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

IDEAS.md

@@ -281,6 +281,56 @@ Zu prüfen ist dabei, was sonst noch inline gesetzt wird: die Lage der HoneyBar
 selbst und der Innenabstand, den sie der Seite verpasst. Über die CSSOM gesetzte
 Stile (`el.style.x = …`) fallen nicht unter die CSP — was im Markup steht, schon.
 
+### Bild-Widget — Marcs Idee (29.08.2026)
+
+Ein Widget, das ein Bild zeigt: hochgeladen oder als Adresse eingetragen. Genau
+**eines je Nutzer**; ein neues ersetzt das alte, ohne Verwaltung und ohne Liste.
+
+Reizvoll daran ist, dass es das erste Widget wäre, das nichts abfragt, sondern
+etwas *ist* — der Schreibtisch bekommt damit einen persönlichen Zug, den keine
+Datenanzeige liefert.
+
+Zu klären, wenn es soweit ist:
+
+- **Ablegen.** HoneyOS speichert bisher nur eine JSON-Datei. Ein Bild heisst:
+  Ordner unter `/data`, Grössengrenze, erlaubte Typen. SVG ist heikel — es kann
+  Skripte enthalten und darf nicht einfach durchgereicht werden.
+- **Ausliefern** mit Versionsanteil in der Adresse, sonst bleibt beim Austausch
+  das alte im Zwischenspeicher hängen.
+- **Adresse statt Upload** ist billiger zu bauen, holt aber eine fremde Anfrage
+  auf jede Seite mit HoneyBar. Für den Schreibtisch unkritisch; sollte das Bild
+  je in die HoneyBar wandern, wäre es eine Anfrage aus jeder App.
+- **Zuschneiden?** Ein Bild in einem festen Rahmen ist entweder verzerrt oder
+  beschnitten. `object-fit: cover` und gut — Zuschneiden von Hand ist ein
+  eigenes Stück Arbeit.
+- Passt zum Aufnehmen eigener App-Logos (1.3): dieselbe Ablage, dasselbe
+  Ausliefern. Zusammen bauen spart die Hälfte.
+
+### Widgets verschieben, Reihenfolge im Server — Marcs Idee (29.08.2026)
+
+Widgets per Ziehen umsortieren, die Reihenfolge liegt beim Nutzer auf dem
+Server — also auf jedem Gerät gleich.
+
+**Der Haken ist nicht das Ziehen, sondern die zwei Betriebsarten.** Im
+Terminal-Modus stehen die Widgets in einer Spalte (eine Reihenfolge), im
+Desktop-Modus als Schilder auf der Fläche (dort wären Koordinaten das
+Natürliche). Eine gemeinsame Liste für beides ist die einfachere Zusage: eine
+Reihenfolge, in beiden Ansichten dieselbe. Freie Plätze auf dem Schreibtisch
+wären das schönere Ziel, aber dann liegen zwei Anordnungen im Server, und beim
+Wechsel muss man sich entscheiden, welche gilt.
+
+→ **Vorschlag: eine Liste, beide Ansichten folgen ihr.** Freie Plätze später,
+falls sie je fehlen.
+
+Am Handy: **Ziehen ist dort kein Standard** — HTML5-Drag löst per Berührung
+nicht aus. Entweder Zeigerereignisse selbst behandeln (wie beim Fensterziehen
+schon gebaut) oder am Handy Pfeiltasten statt Ziehen anbieten. Nicht vergessen:
+Ohne das ist die Funktion am Handy schlicht nicht da.
+
+Voraussetzung ist ein Widget-Verzeichnis — heute stehen Benutzer und Wetter
+fest im HTML. Sinnvoll zusammen mit dem Widget-Rahmen (1.6) zu bauen, nicht
+davor.
+
 ### Widgets in der HoneyBar selbst
 
 Bisher sind Widgets als Fenster auf dem Schreibtisch gedacht. Der Schreibtisch

web/honeybar/honeybar.js

@@ -144,10 +144,24 @@
       }
       .home { letter-spacing: .14em; color: var(--p); padding-left: 2px; }
       .home b { color: var(--p-mid); font-weight: 400; }
+      /* Dasselbe Quadrat wie in der Menüleiste des Schreibtischs: dort ist es
+         klein und leicht angehoben. Ein Zeichen in voller Größe sah daneben
+         wie ein anderes Logo aus. */
+      .home .hex { font-size: 10px; vertical-align: 2px; }
       .home:hover { border-color: var(--p-dim); }
-      .apps { display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; }
+      /* Bei vielen Apps schiebt man den Streifen seitwärts. Ohne
+         flex-shrink:0 an den Knöpfen quetscht das Raster sie stattdessen
+         zusammen, bis nur noch Buchstabenreste dastehen — am Handy sofort.
+         Der Schatten rechts zeigt an, dass es weitergeht. */
+      .apps {
+        display: flex; gap: 4px; flex: 1 1 auto; min-width: 0;
+        overflow-x: auto; scrollbar-width: none;
+        -webkit-overflow-scrolling: touch;
+        scroll-snap-type: x proximity;
+        mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
+      }
       .apps::-webkit-scrollbar { display: none; }
-      .app { color: var(--p-mid); letter-spacing: .08em; }
+      .app { color: var(--p-mid); letter-spacing: .08em; flex: 0 0 auto; scroll-snap-align: end; }
       .app:hover { color: var(--p); border-color: var(--p-dim); }
       .app[aria-current="page"] {
         background: var(--p); border-color: var(--p); color: var(--bg); text-shadow: none;
@@ -182,7 +196,7 @@
     </style>
 
     <div class="bar">
-      <a class="home" id="home" title="HoneyOS">&#9632; HONEY<b>OS</b></a>
+      <a class="home" id="home" title="HoneyOS"><span class="hex">&#9632;</span> HONEY<b>OS</b></a>
       <nav class="apps" id="apps"></nav>
       <div class="right">
         <span class="wx" id="wx" hidden></span>

web/style.css

@@ -203,11 +203,18 @@ body {
   gap: 4px;
   overflow-x: auto;
   scrollbar-width: none;
-  flex: 1;
+  /* Wie in der HoneyBar: Bei vielen Apps schiebt man seitwärts, statt dass die
+     Namen zusammengequetscht werden. Der Schatten rechts zeigt, dass es
+     weitergeht. */
+  flex: 1 1 auto;
+  min-width: 0;
+  -webkit-overflow-scrolling: touch;
+  mask-image: linear-gradient(90deg, #000 calc(100% - 18px), transparent);
 }
 .mb-apps::-webkit-scrollbar { display: none; }
 
 .mb-app {
+  flex: 0 0 auto;
   background: none;
   border: 1px solid transparent;
   color: var(--p-mid);
@@ -426,6 +433,28 @@ body {
 
 @media (max-width: 620px) {
   .statusbar { display: none; }
+
+  /* Am Handy wird aus der Kachelwand eine Liste. Sechs Kacheln zu je 168 px
+     sind ein Bildschirm Gescrolle, bevor man die dritte App sieht — das Raster
+     ist für den grossen Schirm gedacht, hier zählt der Überblick.
+     Symbol links, Name und Zustand rechts, eine Zeile pro App. */
+  .tiles { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+  .tile {
+    display: grid;
+    grid-template-columns: 40px minmax(0, 1fr) auto;
+    grid-template-areas: "symbol name zustand" "symbol unter zustand";
+    align-items: center;
+    column-gap: 12px;
+    row-gap: 0;
+    min-height: 0;
+    padding: 10px 12px;
+  }
+  .tile-icon { grid-area: symbol; width: 32px; height: 32px; }
+  .tile-name { grid-area: name; }
+  .tile-sub { grid-area: unter; }
+  .tile-state { grid-area: zustand; margin: 0; white-space: nowrap; }
+  /* Die Zifferntaste hilft nur mit Tastatur. */
+  .tile-key { display: none; }
 }
 
 /* ── Modal ─────────────────────────────────────────────────────────────── */
@@ -912,6 +941,7 @@ body {
    volle Breite gezogen sähe eine Temperatur nach Bekanntmachung aus. */
 .win-weather { max-width: 320px; align-self: start; }
 
+
 /* Schreibtisch-Modus: schwebendes Schild, rechts unter der Menüleiste. Nicht
    verschiebbar wie ein Fenster — ein Widget, das man erst suchen muss, ist
    keins. */
@@ -982,6 +1012,15 @@ body {
 .uw-host { color: var(--p-dim); font-size: 12px; }
 .win-user { max-width: 320px; align-self: start; }
 
+/* Einspaltig (Handy, schmales Fenster) sollen die Widgets so breit sein wie das
+   Systemfenster. Drei verschieden breite Kästen untereinander sehen aus wie ein
+   Fehler, nicht wie Absicht. Muss hinter den Regeln stehen, die es aufhebt —
+   eine Medienabfrage erhöht die Spezifität nicht. */
+@media (max-width: 859px) {
+  .win-weather,
+  .win-user { max-width: none; }
+}
+
 /* Die Schilder auf dem Schreibtisch stapeln sich oben rechts. */
 .deskwidgets {
   position: absolute;