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; }

test/knWasserLeiste.test.js

@@ -119,11 +119,12 @@ test('wasser-leiste.css: Pille wie die Vorlage, am Handy schwebend über dem Inh
   assert.match(css, /\.kn-wl\[data-art="reiter"\]\[data-eng\] \.kn-wl-item\s*\{[^}]*font-size:\s*12px/)
   for (const fx of ['pop', 'plane', 'drop', 'spin', 'glow', 'wave']) assert.match(css, new RegExp(`\\.kn-wl-ico\\[data-fx="${fx}"\\] svg\\s*\\{[^}]*animation:`))
   assert.ok(handy.startsWith(HANDY))
-  assert.match(handy, /\.kn\s*\{[^}]*--kn-wl-luft:\s*max\(14px, calc\(env\(safe-area-inset-bottom\) \+ 6px\)\)[^}]*--kn-unten:\s*var\(--kn-wl-zone\)/s)   // ganz über dem Wisch-Balken des iPhones
+  assert.match(handy, /\.kn\s*\{[^}]*--kn-wl-luft:\s*max\(18px, calc\(env\(safe-area-inset-bottom\) - 6px\)\)[^}]*--kn-unten:\s*var\(--kn-wl-zone\)/s)   // iPhone rund 28 px über dem Rand
   assert.match(handy, /\.kn\.kn-hat-streifen\s*\{\s*--kn-unten:\s*calc\(var\(--kn-wl-zone\) \+ 44px\)/)
   assert.ok(handy.indexOf('.kn.kn-tastatur') > handy.indexOf('.kn.kn-hat-streifen')) // Tastatur schlägt den Streifen
   assert.match(handy, /\.kn-leiste\s*\{[^}]*background:\s*none[^}]*pointer-events:\s*none/s)
-  assert.match(handy, /\.kn-leiste \.kn-rw\s*\{[^}]*right:\s*12px;[^}]*left:\s*12px;[^}]*max-width:\s*480px/s)   // breit: Rand 12 px, höchstens 480 px
+  assert.match(handy, /\.kn-leiste \.kn-rw\s*\{[^}]*right:\s*max\(var\(--kn-wl-luft\), env\(safe-area-inset-right\)\);[^}]*left:\s*max\(var\(--kn-wl-luft\), env\(safe-area-inset-left\)\);[^}]*max-width:\s*480px/s)   // seitlich derselbe Abstand wie unten, höchstens 480 px breit
+  assert.match(handy, /\.kn-leiste\s*\{[^}]*padding-bottom:\s*var\(--kn-wl-luft\)/)
   assert.match(handy, /\.kn-leiste \.kn-wl\s*\{\s*display:\s*flex;\s*width:\s*100%/)
   assert.match(handy, /\.kn-leiste \.kn-rw\s*\{[^}]*pointer-events:\s*none/s); assert.match(handy, /\.kn-leiste \.kn-rw > \*\s*\{\s*pointer-events:\s*auto/)
   assert.match(css, /@media \(prefers-reduced-motion: reduce\)\s*\{[^@]*animation:\s*none !important/s)