Buchungskalender: Verdrahtung, Router-Gerüste und API-Vertrag

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

public/app.js

@@ -139,7 +139,7 @@ function projectState(project) {
   return ['kb-state-off', 'Noch keine Website']
 }
 
-const FEATURE_LABELS = { preview: 'Vorschau', chat: 'Chat', invoices: 'Rechnungen', news: 'News-Pinnwand', termine: 'Terminplaner', shop: 'Webshop', zeiten: 'Öffnungszeiten' }
+const FEATURE_LABELS = { preview: 'Vorschau', chat: 'Chat', invoices: 'Rechnungen', news: 'News-Pinnwand', termine: 'Terminplaner', shop: 'Webshop', unterkunft: 'Buchungskalender', zeiten: 'Öffnungszeiten' }
 
 function renderProjectCard(project, features) {
   const li = document.createElement('li')
@@ -1910,7 +1910,7 @@ function initPasswordView() {
 // "projekt" (Projektdetails als eigene Seite) gibt es ebenfalls nur in der App-Ansicht.
 // "passwort" oeffnet das Konto-Menue (Profilbild). #fortschritt fuehrt zu Projekte und scrollt zum Abschnitt
 // "Was wir zuletzt erledigt haben" (#pj-activity); hinter dem Hash darf ein Query stehen (#news?bestellt=1, Rueckkehr von Stripe).
-const VIEW_HASHES = { projects: '', funktionen: 'funktionen', news: 'news', analyse: 'analyse', termine: 'termine', invoices: 'rechnungen', chat: 'chat', vertraege: 'vertraege', stunden: 'stunden', 'bestellen-hosting': 'bestellen-hosting', 'bestellen-wartung': 'bestellen-wartung', wechsel: 'wechsel', takeover: 'gutschrift', projekt: 'projekt', passwort: 'passwort', webshop: 'webshop', zeiten: 'zeiten' }
+const VIEW_HASHES = { projects: '', funktionen: 'funktionen', news: 'news', analyse: 'analyse', termine: 'termine', invoices: 'rechnungen', chat: 'chat', vertraege: 'vertraege', stunden: 'stunden', 'bestellen-hosting': 'bestellen-hosting', 'bestellen-wartung': 'bestellen-wartung', wechsel: 'wechsel', takeover: 'gutschrift', projekt: 'projekt', passwort: 'passwort', webshop: 'webshop', buchungen: 'buchungen', zeiten: 'zeiten' }
 const HASH_ALIASES = { wartung: 'vertraege', abo: 'vertraege' }
 const viewLoaders = { chat: initChat }
 // Funktionen und News laden bei jedem Oeffnen neu (Zustand aendert sich durch Bestellung und Freischaltung); Modul erst dann laden
@@ -1920,6 +1920,7 @@ const viewRefreshers = {
   analyse: () => import('/analyse.js').then((m) => m.initAnalyse(document.getElementById('analyse-body'))),
   termine: () => import('/termine.js').then((m) => m.initTermine(document.getElementById('termine-body'))),
   webshop: () => import('/shop.js').then((m) => m.initShop(document.getElementById('webshop-body'))),
+  buchungen: () => import('/buchungen.js').then((m) => m.initBuchungen(document.getElementById('buchungen-body'))),
   // baut sich bei gleichem Projekt und Stand nicht neu auf, solange der Editor steht (ungespeicherte Eingaben bleiben; zeiten.js, initZeiten)
   zeiten: () => import('/zeiten.js').then((m) => m.initZeiten(document.getElementById('zeiten-body'))),
 }
@@ -2114,7 +2115,7 @@ const appLayout = window.matchMedia('(max-width: 880px), (pointer: coarse) and (
 const coarsePointer = window.matchMedia('(pointer: coarse)')
 // Unterseite -> Tab, zu dem sie gehoert (und Text neben dem Zurueck-Pfeil).
 // "passwort" setzt onAppViewShown: die Ansicht, aus der das Konto-Menue geoeffnet wurde.
-const APP_PARENT = { news: 'funktionen', analyse: 'funktionen', termine: 'funktionen', stunden: 'vertraege', 'bestellen-hosting': 'vertraege', 'bestellen-wartung': 'vertraege', wechsel: 'vertraege', takeover: 'vertraege', projekt: 'projects', webshop: 'funktionen', zeiten: 'funktionen' }
+const APP_PARENT = { news: 'funktionen', analyse: 'funktionen', termine: 'funktionen', stunden: 'vertraege', 'bestellen-hosting': 'vertraege', 'bestellen-wartung': 'vertraege', wechsel: 'vertraege', takeover: 'vertraege', projekt: 'projects', webshop: 'funktionen', buchungen: 'funktionen', zeiten: 'funktionen' }
 const APP_PARENT_LABEL = { vertraege: 'Verträge', projects: 'Projekte', funktionen: 'Funktionen', invoices: 'Rechnungen', chat: 'Chat' }
 const appShell = { view: 'projects', scroll: {}, fromHistory: false, sideCards: [], installPrompt: null }
 const TEXT_INPUT = 'textarea, input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=date]):not([type=button]):not([type=submit]):not([type=range]):not([type=color])'

public/buchungen.js

@@ -0,0 +1,4 @@
+// Buchungskalender (Reiter #buchungen). Platzhalter; die Oberflaeche baut Strang 4.
+export function initBuchungen(el) {
+  el.textContent = 'Buchungskalender wird geladen …'
+}

public/dashboard.html

@@ -207,6 +207,15 @@
         <div id="webshop-body"><p class="kb-empty">Lade…</p></div>
       </section>
 
+      <!-- Buchungskalender: Unterkünfte, Preise, Anfragen, Rechnungen, Einstellungen (buchungen.js, initBuchungen); Unterseite von Funktionen -->
+      <section class="kb-view" id="view-buchungen">
+        <header class="kb-head">
+          <h1>Buchungskalender</h1>
+          <p>Anfragen und Buchungen für deine Unterkünfte – mit Belegungskalender und Rechnungen für deine Gäste.</p>
+        </header>
+        <div id="buchungen-body"><p class="kb-empty">Lade…</p></div>
+      </section>
+
       <!-- Öffnungszeiten live: Einschalten oder Bestellen, Status und Editor (zeiten.js, initZeiten); Unterseite von Funktionen. Kein aria-live am Bereich -->
       <section class="kb-view" id="view-zeiten">
         <header class="kb-head">