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>

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>