Kundenansicht neu P1: weiße Seite, Manifest und leere Ansichten für P2 und P3

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

public/neu/dashboard.html

@@ -2,31 +2,87 @@
 <html lang="de">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
   <meta name="kn-seite" content="neu">
   <title>Kundenbereich – WEBklar</title>
-  <style>
-    body.kn { margin: 0; background: #fff; color: #1a1f36; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
-    body.kn main { max-width: 640px; margin: 0 auto; padding: 48px 16px; }
-    body.kn h1 { margin: 0 0 8px; font-size: 22px; font-weight: 600; }
-    body.kn p { margin: 0 0 8px; color: #5e6678; }
-  </style>
+  <!-- Weiße Kundenansicht (Pilot): Als App auf den Homescreen, helle Statusleiste -->
+  <link rel="manifest" href="/neu/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="#ffffff">
+  <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="default">
+  <meta name="apple-mobile-web-app-title" content="WEBklar">
+
+  <link rel="stylesheet" href="/neu/tokens.css">
+  <link rel="stylesheet" href="/neu/basis.css">
+  <link rel="stylesheet" href="/neu/huelle.css">
+  <link rel="stylesheet" href="/neu/ansichten.css">
+  <link rel="stylesheet" href="/neu/funktionen.css">
+  <link rel="stylesheet" href="/neu/module.css">
 </head>
 <body class="kn">
-  <main data-kn-platzhalter>
-    <h1>Kundenansicht neu</h1>
-    <p>Platzhalter bis P1</p>
-    <p>Ansicht: <span id="kn-platzhalter-ansicht"></span></p>
-  </main>
-  <script>
-    (function () {
-      var ziel = document.getElementById('kn-platzhalter-ansicht')
-      function zeige(text) { ziel.textContent = text }
-      fetch('/api/auth/me', { credentials: 'same-origin' })
-        .then(function (r) { return r.json() })
-        .then(function (me) { zeige(me && me.authenticated === false ? 'abgemeldet' : (me && typeof me.ansicht === 'string' ? me.ansicht : '')) })
-        .catch(function () { zeige('Fehler') })
-    })()
-  </script>
+  <a class="kn-skip" href="#kn-inhalt">Zum Inhalt</a>
+  <div id="kn-banner" class="kn-banner" hidden></div>
+
+  <div class="kn-huelle">
+    <nav id="kn-menue" class="kn-menue" aria-label="Hauptnavigation"></nav>
+
+    <div class="kn-spalte">
+      <header id="kn-kopf" class="kn-kopf">
+        <p id="kn-kopf-titel" class="kn-kopf-titel"></p>
+        <div id="kn-kopf-konto"></div>
+      </header>
+      <div id="kn-streifen" class="kn-streifen" hidden></div>
+      <p id="kn-fehler" class="kn-fehler" role="alert" hidden></p>
+
+      <main id="kn-inhalt" class="kn-haupt" tabindex="-1">
+        <section id="bereich-website" hidden>
+          <h1 class="kn-titel">Website</h1>
+          <div id="website-body"></div>
+        </section>
+        <section id="bereich-funktionen" hidden>
+          <h1 class="kn-titel">Funktionen</h1>
+          <div id="funktionen-body"></div>
+        </section>
+        <section id="bereich-chat" hidden>
+          <h1 class="kn-titel">Chat</h1>
+          <div id="chat-body"></div>
+        </section>
+        <section id="bereich-vertraege" hidden>
+          <h1 class="kn-titel">Verträge</h1>
+          <div id="vertraege-body"></div>
+        </section>
+      </main>
+
+      <div id="kn-blatt" class="kn-blatt" hidden>
+        <nav id="kn-brot" class="kn-brot" aria-label="Brotkrume"></nav>
+        <h1 id="kn-etage-titel" class="kn-titel"></h1>
+        <div id="kn-reiter-slot"></div>
+        <section data-etage="news" hidden><div id="news-body"></div></section>
+        <section data-etage="termine" hidden><div id="termine-body"></div></section>
+        <section data-etage="webshop" hidden><div id="webshop-body"></div></section>
+        <section data-etage="buchungen" hidden><div id="buchungen-body"></div></section>
+        <section data-etage="zeiten" hidden><div id="zeiten-body"></div></section>
+        <section data-etage="analyse" hidden><div id="analyse-body"></div></section>
+        <section data-etage="seite" hidden><div id="etage-body"></div></section>
+      </div>
+    </div>
+  </div>
+
+  <nav id="kn-leiste" class="kn-leiste" aria-label="Hauptnavigation">
+    <div class="kn-leiste-reel">
+      <div id="kn-zeile-haupt" class="kn-rw"></div>
+      <div id="kn-zeile-etage" class="kn-rw"></div>
+    </div>
+  </nav>
+
+  <div id="kn-konto-wurzel"></div>
+  <div id="kn-ansage" class="kn-nur-leser" aria-live="polite"></div>
+
+  <script src="/kundenansicht.js"></script>
+  <script type="module" src="/neu/huelle.js"></script>
 </body>
 </html>