Kundenbereich: „Wartung“ heißt jetzt „Verträge“, auch am Desktop in der Navigation

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

public/dashboard.html

@@ -30,10 +30,10 @@
   <div class="kb-glow" aria-hidden="true"></div>
 
   <header class="kb-header">
-    <!-- App-Ansicht: Zurueck aus Unterseiten (Wartung, Projektdetails; Text setzt updateAppBar), Seitentitel beim Scrollen (initAppShell) -->
-    <button type="button" class="kb-back hidden" id="kb-back" aria-label="Zurück zu Wartung">
+    <!-- App-Ansicht: Zurueck aus Unterseiten (Verträge, Projektdetails; Text setzt updateAppBar), Seitentitel beim Scrollen (initAppShell) -->
+    <button type="button" class="kb-back hidden" id="kb-back" aria-label="Zurück zu Verträge">
       <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6"/></svg>
-      <span>Wartung</span>
+      <span>Verträge</span>
     </button>
     <div class="kb-bar-title">
       <a class="kb-logo" href="/dashboard.html"><svg class="kb-logo-mark" viewBox="0 0 512 512" aria-hidden="true"><rect width="512" height="512" fill="#fff"/><g transform="translate(256 256) scale(0.9) translate(-256 -256)"><ellipse cx="256" cy="256" rx="210" ry="150" fill="#111" transform="rotate(-28 256 256)"/><circle cx="356" cy="172" r="18" fill="#fff"/><path transform="translate(256 256) rotate(-28)" d="M 0,-170 C 22,-105 60,-72 120,-56 C 60,-40 22,-8 0,64 C -22,-8 -60,-40 -120,-56 C -60,-72 -22,-105 0,-170 Z" fill="#fff"/></g></svg>WEBKLAR</a>
@@ -50,7 +50,7 @@
 
   <!-- Konto: auf dem Handy als Bottom-Sheet, am Desktop als Popover unter dem Avatar (initAccountSheet).
        Alles zu den Verträgen und "Abmelden" steht im Kundenbereich nur hier. Einzige Ausnahme: während
-       der Widerrufsfrist zeigt die Wartungskarte "Vertrag widerrufen" (§ 356a BGB: hervorgehoben platziert).
+       der Widerrufsfrist zeigt die Vertragskarte "Vertrag widerrufen" (§ 356a BGB: hervorgehoben platziert).
        Öffentlich, ohne Anmeldung: Login-Seite und Footer von webklar.com. -->
   <dialog class="kb-sheet" id="kb-sheet" aria-label="Mein Konto">
     <div class="kb-sheet-panel">
@@ -70,9 +70,10 @@
       <div class="kb-install hidden" data-install></div>
       <p class="kb-label kb-sheet-label">Verträge</p>
       <nav class="kb-sheet-links" aria-label="Verträge">
-        <!-- Nur mit Wartungs-Abo: Stripe-Kundenportal; Name wie in den Bedingungen § 7 ("Abo verwalten") -->
+        <button type="button" data-view="vertraege">Mein Vertrag</button>
+        <!-- Nur mit Abo: Stripe-Kundenportal; Name wie in den Bedingungen § 7 ("Abo verwalten") -->
         <button type="button" class="kb-sheet-ext hidden" id="kb-sheet-abo">Abo verwalten &amp; Rechnungen</button>
-        <a href="/abo-bedingungen.html" target="_blank" rel="noopener">Vertragsbedingungen</a>
+        <a href="/abo-bedingungen.html" target="_blank" rel="noopener" id="kb-sheet-terms">Vertragsbedingungen</a>
         <a class="legal-strong" href="/kuendigen.html">Verträge hier kündigen</a>
         <a class="legal-strong" href="/widerrufen.html">Vertrag widerrufen</a>
       </nav>
@@ -90,8 +91,8 @@
   </dialog>
 
   <div class="kb-shell dashboard-content-reveal">
-    <!-- Seitenleiste: Navigation, Ansprechpartner, Wartungs-Abo. In der App-Ansicht (Handy)
-         wird die Navigation zur Tab-Leiste unten; die Karten wandern in Konto-Sheet bzw. Tab "Wartung". -->
+    <!-- Seitenleiste: Navigation, Ansprechpartner, Abo-Karte. In der App-Ansicht (Handy)
+         wird die Navigation zur Tab-Leiste unten; die Karten wandern in Konto-Sheet bzw. Tab "Verträge". -->
     <aside class="kb-side">
       <p class="kb-label">Kundenbereich</p>
       <nav class="kb-nav" aria-label="Kundenbereich">
@@ -107,10 +108,9 @@
         <button type="button" class="kb-nav-item" data-view="chat">
           <svg class="kb-tab-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5a2.5 2.5 0 0 1-2.5 2.5H8l-4 4V5.5A2.5 2.5 0 0 1 6.5 3h11A2.5 2.5 0 0 1 20 5.5z"/></svg>
           <span class="kb-tab-label">Chat</span> <span class="kb-badge hidden" id="chat-badge" title="ungelesene Nachrichten"></span></button>
-        <!-- Nur App-Ansicht; am Desktop steht die Wartung als Karte in der Seitenleiste -->
-        <button type="button" class="kb-nav-item kb-tab-wartung hidden" data-view="wartung" id="kb-tab-wartung">
+        <button type="button" class="kb-nav-item kb-tab-vertraege" data-view="vertraege" id="kb-tab-vertraege">
           <svg class="kb-tab-ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l7 3v5.5c0 4.3-2.9 8.1-7 9.5-4.1-1.4-7-5.2-7-9.5V6z"/><path d="M9 12l2 2 4-4"/></svg>
-          <span class="kb-tab-label">Wartung</span> <span class="kb-badge hidden" id="kb-tab-wartung-badge"></span></button>
+          <span class="kb-tab-label">Verträge</span> <span class="kb-badge hidden" id="kb-tab-vertraege-badge"></span></button>
       </nav>
 
       <section class="kb-card kb-contact" aria-label="Ansprechpartner">
@@ -120,7 +120,7 @@
         <button type="button" data-view="chat">Nachricht schreiben</button>
       </section>
 
-      <!-- Wartungs-Abo: Angebot bzw. Status (app.js) -->
+      <!-- Abo: Angebot bzw. Status (app.js) -->
       <section class="kb-abo hidden" id="abo-card" aria-live="polite"></section>
     </aside>
 
@@ -184,18 +184,21 @@
         </div>
       </section>
 
-      <!-- App-Ansicht, Tab "Wartung": die Abo-Karte der Seitenleiste als Übersicht;
-           Stundenkonto bzw. Bestellung und Übernahmegutschrift öffnen sich als Unterseiten -->
-      <section class="kb-view" id="view-wartung">
+      <!-- Tab "Verträge": die Abo-Karte der Seitenleiste als Übersicht (App-Ansicht);
+           Stundenkonto, Bestellung, Wechsel und Übernahmegutschrift öffnen sich als Unterseiten -->
+      <section class="kb-view" id="view-vertraege">
         <header class="kb-head">
-          <h1>Wartung</h1>
-          <p>Betrieb, Pflege und Support für Ihre Website.</p>
+          <h1>Verträge</h1>
+          <p>Ihre Verträge mit WEBklar: Hosting, Wartung und Zusatzspeicher.</p>
         </header>
         <div id="kb-abo-slot"><p class="kb-empty">Lade…</p></div>
       </section>
 
-      <!-- Wartungs-Abo: Bestellung bzw. Stundenkonto (app.js) -->
-      <section class="kb-view" id="view-abo" aria-live="polite"></section>
+      <!-- Stundenkonto (Wartungs-Abo), Bestellungen und Wechsel (app.js, Aufgaben 15 bis 18) -->
+      <section class="kb-view" id="view-stunden" aria-live="polite"></section>
+      <section class="kb-view" id="view-bestellen-hosting" aria-live="polite"></section>
+      <section class="kb-view" id="view-bestellen-wartung" aria-live="polite"></section>
+      <section class="kb-view" id="view-wechsel" aria-live="polite"></section>
 
       <!-- Übernahmegutschrift (app.js) -->
       <section class="kb-view" id="view-takeover">