Kundenansicht neu: Wasser-Leiste etwas tiefer, Seitenrand gleich Abstand nach unten

Wunsch vom 29.10.: Die Pille steht etwas tiefer (iPhone: Safe-Area minus
6 px, rund 28 px statt 40 px; ohne Home-Balken 18 px) und hält zu den
Seiten denselben Abstand wie nach unten (statt 12 px). Die 52 px hohen
Knöpfe liegen weiter über dem Wisch-Balken.

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

public/neu/wasser-leiste.css

@@ -81,13 +81,13 @@
 .kn-wl-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 
 /* ---------- Einbau in die Hülle (Handy) ----------
-   Die Pille schwebt mit --kn-wl-luft Abstand über dem unteren Rand: auf dem iPhone ganz über dem Wisch-Balken (Safe-Area plus 6 px), sonst 14 px.
-   Darüber 10 px Luft zum Inhalt. --kn-wl-zone ist die Höhe dieser Zone; --kn-unten (Blatt, Chat) und der Abstand unter dem Inhalt rechnen damit. */
+   Die Pille schwebt mit --kn-wl-luft Abstand über dem unteren Rand und hält denselben Abstand zu den Seiten (Wunsch 29.10.): auf dem iPhone
+   Safe-Area minus 6 px (rund 28 px; die 52 px hohen Knöpfe liegen trotzdem über dem Wisch-Balken), sonst 18 px. Darüber 10 px Luft zum Inhalt. --kn-wl-zone ist die Höhe dieser Zone; --kn-unten (Blatt, Chat) und der Abstand unter dem Inhalt rechnen damit. */
 
 .kn { --kn-wl-h: 64px; }
 
 @media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
-  .kn { --kn-zeile-h: calc(var(--kn-wl-h) + 10px); --kn-wl-luft: max(14px, calc(env(safe-area-inset-bottom) + 6px)); --kn-wl-zone: calc(var(--kn-zeile-h) + var(--kn-wl-luft)); --kn-unten: var(--kn-wl-zone); }
+  .kn { --kn-zeile-h: calc(var(--kn-wl-h) + 10px); --kn-wl-luft: max(18px, calc(env(safe-area-inset-bottom) - 6px)); --kn-wl-zone: calc(var(--kn-zeile-h) + var(--kn-wl-luft)); --kn-unten: var(--kn-wl-zone); }
   .kn.kn-hat-streifen { --kn-unten: calc(var(--kn-wl-zone) + 44px); }
   .kn.kn-tastatur { --kn-unten: 0px; }
 
@@ -98,7 +98,7 @@
   .kn-leiste { border-top: 0; background: none; padding-bottom: var(--kn-wl-luft); pointer-events: none; }
   .kn-leiste-reel { position: relative; overflow: visible; }
   .kn-leiste .kn-rw {
-    position: absolute; right: 12px; bottom: 0; left: 12px; max-width: 480px; height: var(--kn-wl-h); margin: 0 auto; padding: 0; align-items: flex-end;
+    position: absolute; right: max(var(--kn-wl-luft), env(safe-area-inset-right)); bottom: 0; left: max(var(--kn-wl-luft), env(safe-area-inset-left)); max-width: 480px; height: var(--kn-wl-h); margin: 0 auto; padding: 0; align-items: flex-end;
     pointer-events: none; transition: transform 450ms var(--kn-feder), opacity 250ms ease, visibility 0s;
   }
   .kn-leiste .kn-rw > * { pointer-events: auto; }