Schublade in der HoneyBar: Kacheln trugen das Polster der Listenpunkte

.menu a ist spezifischer als .d-app — die Kacheln bekamen dadurch
padding 6px 8px und text-align left statt ihrer eigenen Werte. Das faellt
in der HoneyBar auf, nicht auf dem Schreibtisch: dort steht die
Schublade in .startmenu und wird spezifisch genug angesprochen.
Reihenfolge half nicht, nur Spezifitaet.

Dazu ein Waechter: Ein Backtick in einem Kommentar von honeybar.js
beendet die Vorlagenzeichenkette mitten im CSS und zerlegt die Datei —
zweimal passiert, jetzt bricht der Test.

web/honeybar/honeybar.js

@@ -188,6 +188,12 @@
         color: var(--p); text-shadow: var(--glow);
       }
       .menu[data-open="1"] { display: flex; }
+      /* Die Listenpunkte des Systemmenues. Sie stehen VOR der Schublade:
+         Die Regel "menu a" ist spezifischer als die Klasse der Kachel, und
+         danach gewaehlt haetten die Kacheln Polster und Ausrichtung der Liste
+         geerbt statt ihrer eigenen. Genau das war passiert. */
+      .menu a, .menu button { text-align: left; padding: 6px 8px; color: var(--p-mid); }
+      .menu a:hover, .menu button:hover { background: var(--p-faint); color: var(--p); }
       /* Die Schublade: Symbol, Name, Untertitel. Sie wird absichtlich
          aufgemacht, weil man etwas sucht — also wird gelesen, nicht nur
          wiedererkannt. Deshalb stehen hier immer Namen, anders als im
@@ -196,7 +202,11 @@
       /* minmax(0, 1fr): Ohne das darf eine lange Beschreibung ihre Spalte
          auseinanderdruecken, und die Schublade wird breiter als der Schirm. */
       .drawer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
-      .d-app {
+      /* .menu .d-app, nicht .d-app: Die Kachel ist ein <a> im Menue, und
+         "menu a" oben ist spezifischer als eine einzelne Klasse — die
+         Kacheln trugen dadurch Polster und Ausrichtung der Listenpunkte.
+         Reihenfolge hilft dagegen nicht, nur Spezifitaet. */
+      .menu .d-app {
         display: flex; flex-direction: column; align-items: center; gap: 5px;
         padding: 9px 4px; text-align: center; color: var(--p-mid);
         border: 1px solid transparent; min-width: 0;
@@ -204,23 +214,21 @@
       /* Die Regel fuer a und button oben setzt nowrap — richtig fuer den
          Streifen, falsch
          hier: Der Untertitel soll umbrechen statt abgeschnitten zu werden. */
-      .d-name, .d-sub { max-width: 100%; }
-      .d-sub { white-space: normal; }
-      .d-name { overflow: hidden; text-overflow: ellipsis; }
-      .d-app:hover { border-color: var(--p-dim); color: var(--p); }
-      .d-app[aria-current="page"] { border-color: var(--p); color: var(--p); }
-      .d-app .ico { width: 24px; height: 24px; }
-      .d-app .ico svg { width: 24px; height: 24px; }
-      .d-name { letter-spacing: .08em; }
+      .menu .d-name, .menu .d-sub { max-width: 100%; }
+      .menu .d-sub { white-space: normal; }
+      .menu .d-name { overflow: hidden; text-overflow: ellipsis; }
+      .menu .d-app:hover { background: none; border-color: var(--p-dim); color: var(--p); }
+      .menu .d-app[aria-current="page"] { border-color: var(--p); color: var(--p); }
+      .menu .d-app .ico { width: 24px; height: 24px; }
+      .menu .d-app .ico svg { width: 24px; height: 24px; }
+      .menu .d-name { letter-spacing: .08em; }
       /* Der Untertitel darf umbrechen, aber nicht wachsen — sonst stehen die
          Kacheln unterschiedlich hoch. */
-      .d-sub {
+      .menu .d-sub {
         font-size: 10px; line-height: 1.25; color: var(--p-dim);
         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
         overflow: hidden;
       }
-      .menu a, .menu button { text-align: left; padding: 6px 8px; color: var(--p-mid); }
-      .menu a:hover, .menu button:hover { background: var(--p-faint); color: var(--p); }
       .menu hr { border: 0; border-top: 1px solid var(--p-faint); margin: 3px 0; }
       .menu .head {
         padding: 4px 8px; font-size: 10px; letter-spacing: .18em;