App-Ansicht iOS-App: undurchsichtige Statusleiste, Tab-Leiste wieder ganz unten

Der Fix aus bd7b1fc (Seite mindestens bildschirmhoch) hat nicht gewirkt
und wird zurueckgenommen. Die Ursache ist nicht die Seitenhoehe:
Bei black-translucent ist der Bereich fuer fixierte Elemente in der
installierten iOS-App um die Statusleiste (59 pt) kuerzer als der
Bildschirm. Solange die Seite oben steht, klebt dieser Bereich oben, und
die Tab-Leiste haengt ueber dem unteren Rand. Nach dem Herunterscrollen
sitzt sie richtig, deshalb sah es nur im Chat gut aus.

Mit undurchsichtiger Statusleiste (black) beginnt die App unterhalb der
Statusleiste, und der Bereich ist korrekt bemessen. Nachteil: Der lila
Schimmer reicht nicht mehr hinter die Uhrzeit. Die Abstaende oben kommen
weiter aus env(safe-area-inset-top), das dann 0 ist.

Browser, Android und Desktop unveraendert (pixelgleich).

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

public/app.js

@@ -1678,20 +1678,6 @@ function preventIosFocusZoom() {
 }
 preventIosFocusZoom()
 
-// Installierte App auf dem iPhone: Mit durchsichtiger Statusleiste (black-translucent) ist der
-// Layout-Bereich oft um die Hoehe der Statusleiste kuerzer als der Bildschirm (bekannter WebKit-Fehler).
-// Ist die Seite kuerzer als der Bildschirm, haengen fixierte Leisten dann so weit ueber dem unteren Rand.
-// Abhilfe: Seite mindestens bildschirmhoch (--kb-screen-h in login.css/kundenbereich.css). Die Hoehe
-// kommt aus screen.*, weil innerHeight/100dvh in diesem Zustand selbst zu kurz sein koennen.
-function syncIosStandaloneHeight() {
-  if (!isIosDevice() || !isStandaloneApp()) return
-  const landscape = window.matchMedia('(orientation: landscape)').matches
-  const full = landscape ? Math.min(screen.width, screen.height) : Math.max(screen.width, screen.height)
-  if (full > 0) document.documentElement.style.setProperty('--kb-screen-h', `${full}px`)
-}
-syncIosStandaloneHeight()
-window.addEventListener('resize', syncIosStandaloneHeight)
-
 // App-Installation (Homescreen) und Offline-Seite; zwischengespeichert wird nur die Offline-Seite (sw.js)
 if ('serviceWorker' in navigator && window.isSecureContext) {
   window.addEventListener('load', () => {

public/dashboard.html

@@ -12,7 +12,9 @@
   <meta name="theme-color" content="#000000">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <!-- Undurchsichtige Statusleiste: bei black-translucent ist der Bereich fuer fixierte Elemente in der
+       installierten iOS-App um die Statusleiste zu kurz (Tab-Leiste haengt ~59 px ueber dem Rand) -->
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="apple-mobile-web-app-title" content="WEBklar">
 
   <link rel="stylesheet" href="/login.css">

public/kundenbereich.css

@@ -590,12 +590,11 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
   .kb-invoices .inv-actions .btn-link:first-child:not(:last-child) { flex: 1.7; }
 
   /* Chat: fuellt den Platz zwischen App-Leiste und Tab-Leiste. 100dvh folgt auf Android der Tastatur
-     (interactive-widget=resizes-content); auf iOS bleibt die Hoehe, Safari schiebt das Feld selbst hoch.
-     Installierte App auf dem iPhone: Bildschirmhoehe (--kb-screen-h), dvh ist dort teils zu kurz */
+     (interactive-widget=resizes-content); auf iOS bleibt die Hoehe, Safari schiebt das Feld selbst hoch */
   #view-chat.active {
     display: flex; flex-direction: column;
     height: calc(100vh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
-    height: calc(max(100dvh, var(--kb-screen-h, 0px)) - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
+    height: calc(100dvh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
   }
   #view-chat .kb-head { flex: none; margin-bottom: 12px; }
   #view-chat .chat-box { flex: 1 1 auto; min-height: 0; height: auto; padding: 10px; border-radius: 20px; }

public/login.css

@@ -11,9 +11,6 @@
   --glass: rgba(255, 255, 255, 0.25);
   --glass-border: rgba(255, 255, 255, 0.12);
   min-height: 100svh;
-  /* Installierte App auf dem iPhone: mindestens bildschirmhoch, sonst haengen fixierte Leisten
-     ueber dem unteren Rand (iOS-Fehler bei black-translucent, siehe syncIosStandaloneHeight in app.js) */
-  min-height: max(100svh, var(--kb-screen-h, 0px));
   margin: 0;
   background: #0a0a0a;
   color: #fff;

public/login.html

@@ -12,7 +12,9 @@
   <meta name="theme-color" content="#09090b">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <!-- Undurchsichtige Statusleiste: bei black-translucent ist der Bereich fuer fixierte Elemente in der
+       installierten iOS-App um die Statusleiste zu kurz (Tab-Leiste haengt ~59 px ueber dem Rand) -->
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
   <meta name="apple-mobile-web-app-title" content="WEBklar">
   <link rel="stylesheet" href="/login.css">
 </head>