Kundenbereich: App-Ansicht fuers Handy (Tab-Leiste, Konto-Sheet, installierbar)

Auf dem Handy (unter 880 px und Handys quer) sieht der Kundenbereich aus wie
eine App; der Desktop bleibt pixelgleich.

- Kopfzeile als App-Leiste: Logo, beim Scrollen der Seitentitel, Avatar
- Navigation als Tab-Leiste unten mit Symbolen und Zaehlern; neuer Tab
  "Wartung" mit der Abo-Karte, Stundenkonto/Bestellung und
  Uebernahmegutschrift als Unterseiten mit Zurueck (auch Android-Geste)
- Konto als Bottom-Sheet (Ansprechpartner, Vertraege kuendigen/widerrufen,
  Rechtliches, Abmelden), am Desktop als Popover unter dem Avatar
- Rechnungen als Karten, Fortschritt als Zeitleiste, Chat fuellt den
  Bildschirm; bei offener Tastatur verschwindet die Tab-Leiste (kommt auch
  nach der Android-Zurueck-Geste wieder)
- Installierbar: Manifest, App-Icons (WEBklar-Logo), Favicon, Hinweis
  "Zum Home-Bildschirm"; Service Worker nur fuer die Offline-Seite,
  Kundendaten werden nicht zwischengespeichert
- Installierte App: Kuendigen/Widerrufen mit Link zurueck in den
  Kundenbereich (nur dort sichtbar, Texte unveraendert); Login-Links zu
  Bedingungen/Datenschutz/Impressum oeffnen wie im Dashboard ein neues Fenster
- Login mit App-Icon und Abstaenden fuer Statusleiste/Home-Balken
- Hinweise "in der Seitenleiste" haben auf dem Handy eine eigene Fassung

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

public/login.html

@@ -2,8 +2,18 @@
 <html lang="de">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <title>Anmelden – Webklar Kundenbereich</title>
+  <!-- Als App auf den Homescreen (siehe dashboard.html) -->
+  <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="icon" href="/favicon.ico" sizes="32x32">
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+  <link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
+  <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">
+  <meta name="apple-mobile-web-app-title" content="WEBklar">
   <link rel="stylesheet" href="/login.css">
 </head>
 <body class="portal-page login-page">
@@ -18,6 +28,11 @@
   <main class="login-main">
     <div class="login-panel">
       <div class="AuthForm login-content-reveal">
+        <!-- Handy: App-Icon wie beim Start einer App -->
+        <div class="login-app-brand">
+          <img src="/img/app-icon-192.png" alt="" width="64" height="64">
+          <span>WEBklar Kundenbereich</span>
+        </div>
         <div class="login-section">
           <p class="auth-label">Anmelden</p>
           <form id="login-form" class="login-form" novalidate>
@@ -29,6 +44,9 @@
               placeholder="E-Mail"
               required
               autocomplete="username"
+              autocapitalize="none"
+              spellcheck="false"
+              enterkeyhint="next"
             >
             <input
               class="auth-input"
@@ -38,6 +56,7 @@
               placeholder="Passwort"
               required
               autocomplete="current-password"
+              enterkeyhint="go"
             >
             <p id="login-error" class="error hidden"></p>
             <button type="submit" id="login-btn" class="auth-button login-button">
@@ -57,9 +76,9 @@
         <p class="login-hint">
           <a href="/kuendigen.html" style="color:#fff;font-weight:700">Verträge hier kündigen</a> ·
           <a href="/widerrufen.html" style="color:#fff;font-weight:700">Vertrag widerrufen</a><br>
-          <a href="/abo-bedingungen.html" style="color:inherit">Vertragsbedingungen</a> ·
-          <a href="/datenschutz.html" style="color:inherit">Datenschutz</a> ·
-          <a href="https://webklar.com/impressum" style="color:inherit">Impressum</a>
+          <a href="/abo-bedingungen.html" target="_blank" rel="noopener" style="color:inherit">Vertragsbedingungen</a> ·
+          <a href="/datenschutz.html" target="_blank" rel="noopener" style="color:inherit">Datenschutz</a> ·
+          <a href="https://webklar.com/impressum" target="_blank" rel="noopener" style="color:inherit">Impressum</a>
         </p>
       </div>
     </div>