fix(ui): Kopfleiste auf dem Handy hatte 0px Abstand nach oben

Die Regeln der schmalen Ansicht griffen nie: Ein Inline-Stil schlägt
jede Klassenregel, und `padding: '0 14px'` samt `paddingTop:
var(--safe-top)` stand genau dort. Gemessen kam padding-top als 0px an
statt als 8px - Titel und Nutzerbereich klebten am oberen Fensterrand.
Alle Abstaende stehen jetzt im CSS-Block, schmal 14px oben und 10px
unten.

Dazu das mitgelieferte App-Symbol neu gezeichnet: Die drei PNG lagen
als Graustufen vor, der indigo Verlauf war zu Schwarz eingeebnet. Die
Wolke besteht jetzt aus drei Kreisen und einem Rechteck dazwischen -
gerade Unterkante, keine Kerben in der Silhouette.

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

TESTING.md

@@ -1309,6 +1309,33 @@ Geprüft mit Go-Tests, nicht am laufenden Anbieter:
 - [ ] Bild in PocketID entfernen → das alte bleibt hier stehen (so gebaut:
       gelöscht wird nur beim Austausch, nicht auf Verdacht)
 
+## Kopfleiste auf dem Handy (24.08.2026)
+
+Gemessen bei 412×915, angemeldet:
+
+| | vorher | nachher |
+|---|---|---|
+| `padding-top` | **0px** | 14px |
+| `padding-bottom` | **0px** | 10px |
+| Oberkante Titel | 8px | 22px |
+
+Ursache war nicht der gewählte Wert, sondern dass die Regel nie griff: Der
+Inline-Stil (`padding: '0 14px'`, `paddingTop: 'var(--safe-top)'`) schlug die
+Klassenregel der schmalen Ansicht. Alle Abstände stehen jetzt im CSS-Block.
+
+- [ ] Auf dem Handy gegenprüfen, installiert **und** im Browser-Tab – nur
+      installiert ist `--safe-top` ungleich 0.
+
+## Mitgeliefertes App-Symbol (24.08.2026)
+
+Die drei PNG lagen als **Graustufen** vor: Der indigo Verlauf war zu Schwarz
+eingeebnet, die Unterkante der Wolke lief schief aus. Neu gezeichnet (drei
+Kreise plus Rechteck dazwischen, keine Freihandkurve) und in RGBA gerendert.
+
+- [ ] Nach `docker compose pull` erscheint das neue Symbol im Tab
+- [ ] Auf dem Startbildschirm frühestens nach Neu-Installieren (Chrome hält
+      eine eigene Kopie)
+
 ## Automatisiert geprüft (22.08.2026)
 
 Diese Punkte hat Claude per API/`curl` gegen Wegwerf-Konten durchgespielt; sie

frontend/public/icon.svg

@@ -6,7 +6,16 @@
     </linearGradient>
   </defs>
   <rect width="512" height="512" rx="114" fill="url(#bg)"/>
-  <!-- Wolke: zwei Kuppen auf einer Grundfläche, bewusst flächig statt Kontur,
-       damit das Motiv auch bei 48 px noch als Wolke lesbar bleibt. -->
-  <path fill="#ffffff" d="M170 356q-46 0-78-32t-32-78q0-42 27-73t68-37q19-36 54-58t77-22q54 0 93 36t44 89q35 4 58 30t23 61q0 38-27 66t-66 28z"/>
+  <!-- Wolke aus drei Kreisen und einem Rechteck dazwischen.
+       Der Trick gegen Kerben in der Silhouette: Das Rechteck reicht **von
+       Mittelpunkt zu Mittelpunkt** der beiden äußeren Kreise und endet unten
+       auf derselben Höhe wie sie. So kreuzen sich nirgends zwei Ränder – die
+       Unterkante ist gerade, die Seiten sind rund. Eine abgerundete
+       Grundfläche ergab genau dort zwei kleine Dellen. -->
+  <g fill="#ffffff" transform="translate(0 17)">
+    <rect x="164" y="280" width="186" height="62"/>
+    <circle cx="256" cy="228" r="92"/>
+    <circle cx="164" cy="280" r="62"/>
+    <circle cx="350" cy="280" r="62"/>
+  </g>
 </svg>

frontend/src/components/PageHeader.tsx

@@ -42,12 +42,14 @@ export default function PageHeader({ icon, title, meta, left, children }: Props)
   const openSidebar = useSidebarToggle()
   return (
     <div className="aether-header" style={{
-      // Feste Höhe nur auf breiten Schirmen (siehe CSS unten). Auf dem Handy
-      // wächst die Leiste auf zwei Zeilen, statt ihren Inhalt zu verstecken.
-      padding: '0 14px',
-      // Statusleiste der installierten App. Die Kopfleiste ist jetzt die
-      // oberste Zeile der Anwendung – vorher lag darüber noch eine zweite.
-      paddingTop: 'var(--safe-top)',
+      // **Kein padding hier.** Die Abstände stehen samt und sonders im
+      // CSS-Block unten.
+      //
+      // Grund, gemessen: Ein Inline-Stil schlägt jede Klassenregel. Solange
+      // hier `padding: '0 14px'` und `paddingTop: 'var(--safe-top)'` standen,
+      // waren die Regeln der schmalen Ansicht wirkungslos – `padding-top`
+      // kam als 0px an statt als 8px, und die Titelzeile klebte am oberen
+      // Rand des Fensters. Im Browser fiel es auf, weil dort --safe-top 0 ist.
       background: 'var(--color-surface)',
       borderBottom: '1px solid var(--color-border)',
       display: 'flex', alignItems: 'center', gap: 10,
@@ -146,7 +148,13 @@ export default function PageHeader({ icon, title, meta, left, children }: Props)
       </div>
 
       <style>{`
-        .aether-header { min-height: ${headerHeight - 1}px; }
+        /* Grundabstände. Oben kommt der Bereich der Statusleiste dazu –
+           in der installierten App ist die Kopfleiste die oberste Zeile. */
+        .aether-header {
+          min-height: ${headerHeight - 1}px;
+          padding: 0 14px;
+          padding-top: var(--safe-top);
+        }
 
         /* Breit: erst die Bedienelemente der Ansicht, dann – durch eine
            Trennlinie abgesetzt – der Nutzerbereich, ganz rechts. */
@@ -157,9 +165,11 @@ export default function PageHeader({ icon, title, meta, left, children }: Props)
         }
 
         @media not all and ${wideEnough} {
+          /* Schmal braucht die Zeile echte Luft: Ohne sie stoßen Titel und
+             Nutzerbereich direkt an die Adressleiste des Browsers. */
           .aether-header {
-            padding-top: calc(8px + var(--safe-top));
-            padding-bottom: 8px;
+            padding-top: calc(14px + var(--safe-top));
+            padding-bottom: 10px;
           }
           /* Schmal: Nutzerbereich noch in der Titelzeile ganz rechts, die
              Bedienelemente darunter über die volle Breite.