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>

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;