Kundenansicht neu: Wasser-Leiste breiter mit Wörtern, Unterseiten im Vollbild

Wunsch vom 29.10. nach dem ersten Blick am iPhone:
- Die Leiste nutzt die Breite (12 px Rand, höchstens 480 px), Symbol über
  dem Wort, und steht ganz über dem Wisch-Balken des iPhones
  (Safe-Area plus 6 px statt minus 10 px).
- Unterseiten öffnen sich ganz und werden mit Unschärfe eingeblendet statt
  hochzufahren. Oben links die Überschrift, oben rechts „Zurück“ als
  Glasknopf, der beim Scrollen stehen bleibt (neuer Platz
  #kn-blatt-zurueck).
- Reiter einer Funktion stehen unten in derselben Wasser-Leiste (Art
  'reiter', Kurzwörter, kleinere Schrift wenn es eng wird), ohne Zurück.
  Ohne Reiter bleibt unten nichts. Die alte Leiste gibt beim Neuaufbau
  ihren WebGL-Kontext frei.

Glas und Unschärfe stehen weiter allein in wasser-leiste.css; huelle.css
bleibt ohne Glas. Desktop unverändert.

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

public/neu/huelle.css

@@ -1,4 +1,5 @@
-/* Kundenansicht neu: Hülle (Menü, Kopf, Blatt, Leiste, Streifen, Konto). Weiß, Haarlinie, Schwarz; keine Verläufe, kein Glas.
+/* Kundenansicht neu: Hülle (Menü, Kopf, Blatt, Leiste, Streifen, Konto). Weiß, Haarlinie, Schwarz; keine Verläufe, kein Glas (das Glas der Handy-Leiste
+   und des Zurück-Knopfs steht allein in wasser-leiste.css).
    Die Grundregeln gelten am Desktop, die Handy-Abfrage überschreibt für das Handy. */
 
 /* ---------- Blatt (Etage 2) ---------- */
@@ -13,20 +14,28 @@
 
 .kn-zurueck { position: relative; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 6px; font-size: 15px; font-weight: 600; color: var(--kn-text); }
 .kn-zurueck::before { content: ""; width: 9px; height: 9px; margin-left: 4px; border: solid; border-width: 0 0 2px 2px; transform: rotate(45deg); }
-.kn-zurueck--voll { flex: 1; }
 .kn-zurueck .kn-l { position: relative; line-height: 20px; }
-.kn-vl { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--kn-line); }
+.kn-blatt-zurueck { display: none; } /* „Zurück“ der Unterseite, nur am Handy (etage.js); der Desktop hat die Brotkrume */
 .kn-punkt { position: absolute; top: -2px; left: 100%; width: 9px; height: 9px; margin-left: 2px; border-radius: 50%; background: #b3093c; box-shadow: 0 0 0 2px var(--kn-bg); }
 
 @media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
   .kn { --kn-unten: calc(var(--kn-zeile-h) + env(safe-area-inset-bottom)); }
+  /* Die Unterseite öffnet sich ganz (unter der Statusleiste) und wird eingeblendet (die Unschärfe dazu in wasser-leiste.css). Oben links die
+     Überschrift, oben rechts „Zurück“; er bleibt beim Scrollen stehen. Reiter stehen unten in der Wasser-Leiste. */
+  .kn { --kn-zurueck-oben: 17px; } /* so steht der 40 px hohe Knopf auf der Mitte der ersten Zeile der Überschrift */
   .kn-blatt {
-    position: fixed; inset: calc(var(--kn-banner-h) + var(--kn-kopf-h) + env(safe-area-inset-top)) 0 var(--kn-unten, var(--kn-zeile-h)); z-index: 20;
-    overflow-y: auto; overscroll-behavior: contain; border-radius: 12px 12px 0 0;
-    box-shadow: 0 0 0 1px rgba(26,31,54,.06), 0 -8px 24px rgba(26,31,54,.1);
-    transform: translateY(100%); transition: transform 550ms var(--kn-bremse);
+    position: fixed; inset: calc(var(--kn-banner-h) + env(safe-area-inset-top)) 0 0; z-index: 20; overflow-y: auto; overscroll-behavior: contain;
+    opacity: 0; transition: opacity 380ms ease;
   }
-  .kn-blatt--auf { transform: none; }
+  .kn-blatt--auf { opacity: 1; }
+  .kn-blatt > .kn-titel { padding-right: 108px; }
+  .kn-blatt-zurueck {
+    display: block; position: fixed; top: calc(var(--kn-banner-h) + env(safe-area-inset-top) + var(--kn-zurueck-oben)); right: max(16px, env(safe-area-inset-right)); z-index: 25;
+    visibility: hidden; opacity: 0; transition: opacity 380ms ease, visibility 0s 380ms;
+  }
+  .kn-blatt--auf ~ .kn-blatt-zurueck { visibility: visible; opacity: 1; transition-delay: 0s; }
+  .kn-blatt-zurueck .kn-zurueck { height: 40px; padding: 0 16px 0 10px; border-radius: 999px; background: var(--kn-bg); box-shadow: var(--kn-shadow-pop); }
+  .kn .kn-blatt-zurueck .kn-zurueck:focus-visible { outline-offset: 2px; }
   .kn-haupt[inert] { display: block; } /* am Handy bleibt die Hauptseite unter dem Blatt stehen */
   .kn-brot { display: none; }
 }
@@ -131,7 +140,7 @@
   .kn-kopf-titel { display: block; font-size: 15px; line-height: 22px; font-weight: 600; opacity: 0; transform: translateY(5px); transition: opacity 250ms, transform 250ms; }
   .kn-titled .kn-kopf-titel { opacity: 1; transform: none; }
   .kn-haupt { max-width: none; padding: 2px max(16px, env(safe-area-inset-right)) calc(var(--kn-zeile-h) + env(safe-area-inset-bottom) + 28px) max(16px, env(safe-area-inset-left)); }
-  .kn-blatt { max-width: none; padding: 0 max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
+  .kn-blatt { max-width: none; padding: 14px max(16px, env(safe-area-inset-right)) calc(var(--kn-unten, var(--kn-zeile-h)) + 24px) max(16px, env(safe-area-inset-left)); }
   .kn-haupt .kn-titel, .kn-blatt .kn-titel { margin: 6px 0 10px; font-size: 28px; line-height: 34px; }
   .kn-banner button { min-height: 44px; }
   #kn-fehler { margin: 12px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
@@ -204,7 +213,9 @@
 @media (max-height: 500px) and (max-width: 880px), (max-height: 500px) and (pointer: coarse) {
   .kn { --kn-zeile-h: 44px; --kn-kopf-h: 44px; }
   .kn-leiste-reel[data-etage="offen"] .kn-rw { transform: translateY(-44px); }
-  .kn-haupt .kn-titel, .kn-blatt .kn-titel { display: none; }
+  .kn-haupt .kn-titel { display: none; }
+  .kn-blatt .kn-titel { margin: 0 0 6px; font-size: 20px; line-height: 26px; } /* die Unterseite deckt den Kopf ab: ihre Überschrift bleibt, kleiner */
+  .kn { --kn-zurueck-oben: 7px; }
   .kn-kopf-titel { opacity: 1; transform: none; }
 }
 
@@ -217,6 +228,8 @@
   .kn-leiste-reel[data-etage="offen"] #kn-zeile-haupt, .kn-leiste-reel:not([data-etage="offen"]) #kn-zeile-etage { transition: none; }
   .kn-blatt { transform: none; opacity: 0; transition: opacity 150ms; }
   .kn-blatt--auf { opacity: 1; }
+  .kn-blatt-zurueck { transition: opacity 150ms, visibility 0s 150ms; }
+  .kn-blatt--auf ~ .kn-blatt-zurueck { transition: opacity 150ms; }
   .kn-konto-scrim, .kn-konto { animation: kn-einblenden 150ms ease-out; }
   .kn-zahl { animation: none; }
   .kn-zahl--weg { transition: none; }