Kundenansicht neu: Wasser-Leiste am Handy (Glas-Pille mit Wassertropfen)

Die Handy-Leiste ist jetzt eine schwebende Glas-Pille mit vier Symbolen
(Website, Funktionen, Chat, Verträge) nach der Komponente „Nimbus UI ·
Liquid Navbar – Waterline“ (guglielmogiannattasio.it), ohne React
nachgebaut: Wassertropfen per WebGL-Shader unter dem aktiven Bereich,
Tröpfchen bei langen Sprüngen, Wellen beim Tippen, eine Szene je Symbol.
Ohne WebGL ein CSS-Tropfen, bei „Bewegung reduzieren“ ohne Bewegung.
Das Wasser ruht außerhalb des Bildes und 6 s nach der letzten Bedienung.

Unterseiten zeigen „Zurück“ und Reiter als gläserne Pille, der aktive
Reiter im Tropfen. Abstände (Blatt, Chat, Streifen, Inhalt) rechnen mit
der neuen Zone über --kn-wl-zone. Desktop unverändert.

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

public/neu/leiste.js

@@ -3,7 +3,8 @@
    (Leiste und Streifen verschwinden nur bei Texteingabe) und seine Verdrahtung mit visualViewport, focusin und focusout. */
 
 import { h, leeren } from './dom.js'
-import { baueReiter, anzeigeText } from './reiter.js'
+import { anzeigeText } from './reiter.js'
+import { baueWasserLeiste } from './wasser-leiste.js'
 
 // Genau einmal in JS; das CSS führt dieselbe Abfrage (basis.css, huelle.css).
 export const HANDY_ABFRAGE = '(max-width: 880px), (pointer: coarse) and (max-height: 500px)'
@@ -22,9 +23,10 @@ const beschriftung = (wort, anzeige) => {
   return `${wort.label}, ${text}${wort.einheit ? ` ${wort.einheit}` : ''}`
 }
 
-/** Fahrstuhl-Zeile in `haupt` und Menü in `menue` bauen. onWahl(bereich) wird bei Klick auf ein Wort gerufen. */
+/** Handy-Leiste in `haupt` und Menü in `menue` bauen. onWahl(bereich) wird bei Klick auf ein Wort gerufen.
+ *  Am Handy ist die Hauptzeile die Wasser-Leiste (wasser-leiste.js): eine Glas-Pille mit Symbolen statt der vier Wörter mit Balken. */
 export function baueNavigation({ haupt, menue, onWahl }) {
-  const reiter = baueReiter({ eintraege: WOERTER, aktiv: '', art: 'balken', ariaLabel: 'Bereiche', bei: (key) => onWahl(key) })
+  const reiter = baueWasserLeiste({ eintraege: WOERTER, aktiv: '', ariaLabel: 'Bereiche', bei: (key) => onWahl(key) })
   leeren(haupt).append(reiter)
 
   const knoepfe = Object.fromEntries(WOERTER.map((w) => [w.key, h('button', { class: 'kn-nav-item', type: 'button', 'data-bereich': w.key, on: { click: () => onWahl(w.key) } }, h('span', { class: 'kn-nav-text' }, w.label))]))