From e7f5902b865dde0383fa43c561d4a66fd2f989dd Mon Sep 17 00:00:00 2001 From: Leopoldadmin Date: Wed, 8 Jul 2026 06:59:58 +0000 Subject: [PATCH] fix F-HMS-19: remove SEO/indexation, keep JSON-LD+semantic HTML, domain=hms.media-on.de, noindex/nofollow --- docs/requirements.md | 651 +------------------------------------------ 1 file changed, 1 insertion(+), 650 deletions(-) diff --git a/docs/requirements.md b/docs/requirements.md index 037cca1..a287041 100644 --- a/docs/requirements.md +++ b/docs/requirements.md @@ -1,650 +1 @@ -# Requirements Specification – HMS Licht & Ton Homepage - -> **Projekt:** hms-licht-ton (ID 30) -> **Datum:** 2026-07-08 -> **Status:** Draft – Ready for UI Design -> **Autor:** Requirements Analyst (A0 Orchestrator) - ---- - -## 1. Projektüberblick - -### 1.1 Ziel -Neuaufbau der Website für **HMS Licht & Ton GbR** (Hammerschmidt u. Mössle GbR), Veranstaltungstechnik aus Leipheim/Ellzee. Die bestehende WordPress-Website wird durch eine moderne, mobile-first Web-Anwendung ersetzt. Kern-Neuheit ist ein **Online-Mietkatalog** mit Rentman-Integration (Equipment-Import + Mietanfragen an Rentman). - -### 1.2 Unternehmen -- **Firma:** Hammerschmidt u. Mössle GbR -- **Erfahrung:** 20+ Jahre Veranstaltungstechnik -- **Leistungen:** Vermietung, Verkauf, Personal, Transport, Lagerung, Werkstatt, Installation, Booking -- **Ansprechpartner:** Leopold Hammerschmidt, Andreas Mössle -- **Büro:** Grockelhofen 10, 89340 Leipheim -- **Lager:** Zur Schönhalde 8, 89352 Ellzee -- **Telefon:** +49 8221 204433 / 204434 -- **E-Mail:** info@hms-licht-ton.de -- **Social:** Facebook, Instagram - -### 1.3 Domain Knowledge -- **Veranstaltungstechnik:** Licht-, Ton-, Bühnentechnik, Rigging, Traversen, Mischpulte (z.B. Grandma3 Command Wing) -- **Rentman:** Projektzentrisches ERP für Equipment-Rental. Equipment-Katalog, Projektanfragen, Angebotserstellung. -- **Mietworkflow:** Kunde sieht Equipment → fragt an → HMS prüft in Rentman → erstellt Angebot → bestätigt -- **Branche:** B2B/B2C Hybrid – sowohl Firmenveranstaltungen als auch private Feiern - ---- - -## 2. User-Anforderungen (direkt vom User) - -1. Inhalte der bestehenden Website übernehmen, **AUSSER** 'Neu in der Vermietung' (entfällt) -2. Online-Mietkatalog **NEU** aufbauen: Artikel-Import von Rentman, Mietanfragen an Rentman senden -3. **Kein Shop**, Mietanfragen statt Shop-Funktion -4. **Kein CMS/News-System** -5. Modernes Frontend + eigenes Backend (kein WordPress), kein konkretes Framework vorgegeben -6. **Mobile extrem wichtig** → Mobile-First Design -7. Design: **Grautöne als Hauptfarbschema** + oranges Logo (SVG von bestehender Website übernehmen) - ---- - -## 3. Funktionale Anforderungen - -### [F-HMS-01] Home / Startseite -**Anforderung:** Startseite mit Hero-Bereich, Unternehmensbeschreibung (20 Jahre Erfahrung, Full Service, Alles aus einer Hand), Leistungsübersicht (Vermietung, Verkauf, Personal, Transport, Lagerung, Werkstatt, Installation, Booking), Vermietungs-Info-Bereich (großer Materialbestand, Selbstabholung/Lieferung/DryHire, Verweis auf Online-Mietkatalog), Adress-/Kontaktdaten im Footer-Bereich. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User navigiert zu '/'. Erwartet: Hero-Bereich mit Headline 'Ihr professioneller Partner für Veranstaltungstechnik' sichtbar, 'Über uns'-Sektion mit 20 Jahre Erfahrung, Full Service, Alles aus einer Hand sichtbar, Leistungsübersicht mit allen 8 Leistungen sichtbar, Link zum Mietkatalog sichtbar und klickbar. -2. **Edge Case:** User lädt Seite mit langsamer Verbindung. Erwartet: Text-Inhalte erscheinen sofort (SSR/SSG), Bilder laden lazy mit Placeholder, keine Layout-Shifts (CLS < 0.1). -3. **Mobile:** Seite auf 375px Breite (iPhone SE). Erwartet: Alle Sektionen untereinander, Hero-Text lesbar, Leistungs-Icons/Texte nicht abgeschnitten, Touch-Targets min 44x44px. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Manuelle Verifikation: Alle Inhalte der alten Home-Seite (außer 'Neu in der Vermietung') sind vorhanden -- Lighthouse Mobile Score >= 90 - ---- - -### [F-HMS-02] Referenzen / Bildergalerie -**Anforderung:** Bildergalerie-Seite mit Überschrift 'Bilder / Referenzen', 'Machen Sie sich ein Bild von unserer Arbeit', 'Impressionen vorangegangener Events'. Bilder in Grid-Anordnung, Klick öffnet Lightbox/Vollbildansicht. Bilder sind statisch (kein CMS), werden vom Backend verwaltet. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User navigiert zu '/referenzen'. Erwartet: Galerie lädt mit mindestens 8 Bildern, Grid-Layout sichtbar, Klick auf ein Bild öffnet Lightbox mit Navigation (prev/next/close). -2. **Edge Case:** Bild kann nicht geladen werden (defekte URL). Erwartet: Fallback-Placeholder wird angezeigt, keine weiße Lücke, keine JS-Fehler. -3. **Mobile:** Galerie auf 375px. Erwartet: 1-2 Spalten Grid, Bilder quadratisch oder aspect-ratio konsistent, Lightbox funktionsfähig mit Swipe-Gesten. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Lightbox öffnet/schließt korrekt -- Bilder laden mit lazy-loading - ---- - -### [F-HMS-03] Kontaktseite mit Formular -**Anforderung:** Kontaktseite mit: Überschrift 'Planen Sie eine Veranstaltung?', Anschrift (Büro: Grockelhofen 10, 89340 Leipheim; Lager: Zur Schönhalde 8, 89352 Ellzee), Öffnungszeiten (Mon–Fr: 10:00–18:00), Google Maps Link 'Route planen', Kontaktdaten (Telefon, E-Mail), Ansprechpartner (Leopold Hammerschmidt +49 172 6264796, Andreas Mössle +49 173 9014604), Social Links (Facebook, Instagram), Kontaktformular (Name, E-Mail, Telefon, Nachricht, DSGVO-Einwilligung). - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User füllt Kontaktformular aus (Name='Test User', E-Mail='test@example.com', Nachricht='Test anfrage') und sendet ab. Erwartet: Form wird validiert, Success-Message erscheint, E-Mail wird an info@hms-licht-ton.de gesendet. -2. **Edge Case:** User sendet Formular ohne E-Mail-Adresse. Erwartet: Validierung zeigt Fehlermeldung, keine E-Mail wird gesendet, Form bleibt ausgefüllt. -3. **Edge Case:** User sendet Formular ohne DSGVO-Häkchen. Erwartet: Validierung blockiert Submit, Fehlermeldung 'Bitte akzeptieren Sie die Datenschutzerklärung'. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- E-Mail-Empfang manuell verifiziert -- DSGVO-Einwilligung Pflichtfeld -- Form-Validation serverseitig UND clientseitig - ---- - -### [F-HMS-04] Mietkatalog – Equipment-Liste -**Anforderung:** Katalog-Seite '/mietkatalog' mit allen Equipment-Artikeln aus Rentman. Darstellung als Grid- oder Listen-Ansicht mit: Artikelname, Artikelnummer, Kategorie, Thumbnail-Bild (falls vorhanden), Kurzbeschreibung. Pagination oder Infinite-Scroll bei vielen Artikeln. Jeder Artikel ist klickbar → Detailansicht. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User navigiert zu '/mietkatalog'. Erwartet: Liste lädt mit >=10 Artikeln, jeder Artikel zeigt Name + Kategorie, Klick auf Artikel öffnet Detailseite. -2. **Edge Case:** Rentman API nicht erreichbar beim Laden. Erwartet: Cached/zwischengespeicherte Daten werden angezeigt, Warnhinweis 'Katalog wird aktuell aktualisiert' sichtbar, keine leere Seite. -3. **Performance:** Katalog mit 500+ Artikeln. Erwartet: Erste 20 Artikel in <2s geladen, Pagination/Infinite-Scroll funktional, keine Browser-Freezes. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Equipment-Daten aus Rentman importiert -- Pagination funktional -- Mobile: Grid passt sich an (1-2 Spalten) - ---- - -### [F-HMS-05] Mietkatalog – Equipment-Detailansicht -**Anforderung:** Detailseite '/mietkatalog/{id}' mit: Vollständige Artikelinfo (Name, Artikelnummer, Kategorie, Beschreibung, Spezifikationen, Bilder), Mietpreis (falls verfügbar), Verfügbarkeit (falls abrufbar), 'Mietanfrage'-Button der Artikel zum Anfrage-Warenkorb hinzufügt. Breadcrumb-Navigation. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User klickt auf Artikel in Katalog. Erwartet: Detailseite lädt mit Name, Beschreibung, Bild, 'Mietanfrage'-Button sichtbar und klickbar. -2. **Edge Case:** Artikel-ID existiert nicht. Erwartet: 404-Seite mit 'Artikel nicht gefunden' + Link zurück zum Katalog. -3. **Integration:** User klickt 'Mietanfrage'. Erwartet: Artikel wird zum Anfrage-Warenkorb hinzugefügt, Toast-Bestätigung sichtbar, Warenkorb-Counter aktualisiert. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Detail-Daten korrekt aus Backend/CACHE -- Mobile: Alle Informationen lesbar - ---- - -### [F-HMS-06] Mietkatalog – Search & Filter -**Anforderung:** Such- und Filterfunktion im Mietkatalog: Freitext-Suche (Artikelname, -nummer), Kategorie-Filter (Dropdown/Tags), Sortierung (Name A-Z, Name Z-A). Filter kombinierbar. Resultat-Anzahl sichtbar. Filter-Reset-Button. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User gibt 'Lautsprecher' in Suchfeld ein. Erwartet: Liste filtert in Echtzeit auf Artikel mit 'Lautsprecher' im Namen, Resultat-Anzahl aktualisiert. -2. **Edge Case:** Suche ohne Treffer. Erwartet: Empty-State 'Keine Artikel gefunden' + Vorschlag Filter zurückzusetzen. -3. **Integration:** User kombiniert Suche 'PA' + Kategorie-Filter 'Ton'. Erwartet: Nur Artikel der Kategorie 'Ton' mit 'PA' im Namen werden angezeigt. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Filter kombinierbar -- Mobile: Filter in Collapse/Drawer erreichbar -- Suchergebnis <500ms - ---- - -### [F-HMS-07] Mietkatalog – Mietanfrage-Formular -**Anforderung:** Mietanfrage-Formular '/mietanfrage' mit: ausgewählte Artikel (aus Warenkorb) mit Menge, Veranstaltungsdaten (Name, Datum von/bis, Ort, Anzahl Personen), Kontaktdaten (Name, Firma, E-Mail, Telefon, Adresse), Nachricht. Submit sendet Anfrage an Rentman via POST /projectrequests + POST /projectrequests/{id}/projectrequestequipment. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User hat 3 Artikel im Warenkorb, füllt Veranstaltungsdaten + Kontaktdaten aus, sendet ab. Erwartet: POST /projectrequests wird gesendet, Equipment wird via POST /projectrequests/{id}/projectrequestequipment hinzugefügt, Success-Page mit Anfrage-Referenz, Bestätigungs-E-Mail an User. -2. **Edge Case:** Warenkorb ist leer, User navigiert zu '/mietanfrage'. Erwartet: Hinweis 'Keine Artikel ausgewählt' + Link zum Mietkatalog. -3. **Edge Case:** Rentman API nicht erreichbar beim Submit. Erwartet: Anfrage wird lokal gespeichert (Retry-Queue), User sieht 'Anfrage eingegangen, wird verarbeitet', Admin-Benachrichtigung. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Rentman projectrequest erfolgreich erstellt (in Rentman UI sichtbar) -- Bestätigungs-E-Mail versendet -- Form-Validation vollständig - ---- - -### [F-HMS-08] Rentman Equipment-Import (Backend) -**Anforderung:** Backend-Service der periodisch (Cron/Interval) oder manuell (Admin-Trigger) Equipment-Daten von Rentman via GET /equipment (paginiert, limit=100, offset-Iteration bis data leer) abruft und in lokaler Datenbank zwischenspeichert. Felder: id, name, number, category, description, images, specifications, rental_price. Bilder werden lokal gecacht/optimiert. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** Admin triggert manuellen Import. Erwartet: GET /equipment wird paginiert aufgerufen, alle Seiten werden iteriert, Daten in DB gespeichert, Erfolgsmeldung mit Anzahl importierter Artikel. -2. **Edge Case:** Rentman API gibt leere Liste zurück. Erwartet: Bestehende Daten bleiben erhalten, Warnung 'Keine neuen Daten erhalten'. -3. **Edge Case:** Partial-Failure (Seite 3 von 10 schlägt fehl). Erwartet: Bereits importierte Seiten 1-2 bleiben erhalten, Fehler wird geloggt, Retry-Mechanismus für fehlgeschlagene Seite. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Equipment in lokaler DB sichtbar -- Pagination korrekt implementiert (alle Seiten) -- Cron-Job funktional - ---- - -### [F-HMS-09] Rentman Mietanfrage-Übermittlung (Backend) -**Anforderung:** Backend-Service der Mietanfragen aus dem Frontend entgegennimmt und an Rentman sendet. Workflow: 1) POST /projectrequests mit Veranstaltungs- + Kontaktdaten, 2) POST /projectrequests/{id}/projectrequestequipment für jeden Artikel. Retry-Queue bei API-Fehlern. Admin-Notification bei fehlgeschlagenen Übermittlungen. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** Frontend sendet Anfrage mit 3 Artikeln. Erwartet: POST /projectrequests -> id erhalten -> 3x POST /projectrequests/{id}/projectrequestequipment -> alle erfolgreich -> Response 200 an Frontend. -2. **Edge Case:** POST /projectrequests erfolgreich, aber Equipment-POST schlägt fehl bei Artikel 2. Erwartet: Artikel 1 erfolgreich, Artikel 2 in Retry-Queue, Artikel 3 wird trotzdem versucht, Admin wird benachrichtigt. -3. **Integration:** Rentman UI zeigt erstellte Project Request mit korrekten Daten (Name, Datum, Ort, Equipment-Liste). - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Project Request in Rentman sichtbar -- Retry-Queue funktional -- Admin-Notification bei Fehlern - ---- - -### [F-HMS-10] Navigation / Header -**Anforderung:** Sticky Header mit: Logo (SVG, orange), Hauptnavigation (Home, Mietkatalog, Referenzen, Kontakt), Social-Icons (Facebook, Instagram), Telefon-Link (0172 / 6264796). Auf Mobile: Burger-Menu mit Slide-in/Overlay. Header-Background in Grautönen. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User klickt 'Mietkatalog' im Header. Erwartet: Navigation zu '/mietkatalog', Header bleibt sichtbar (sticky), aktiver Nav-Punkt hervorgehoben. -2. **Mobile:** User auf 375px Breite, klickt Burger-Icon. Erwartet: Menu öffnet sich als Overlay, alle Nav-Punkte sichtbar und klickbar, Touch-Targets min 44px Höhe, Menu schließt bei Klick außerhalb. -3. **Edge Case:** User scrollt nach unten. Erwartet: Header bleibt sticky, ggf. kompaktere Höhe, Inhalt wird nicht verdeckt. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Sticky Header funktional -- Mobile Burger-Menu funktional -- Logo als SVG eingebettet - ---- - -### [F-HMS-11] Footer -**Anforderung:** Footer mit: Firmenanschrift (Zur Schönhalde 8, 89352 Ellzee), Telefon (+49 8221 204433/204434), E-Mail (info@hms-licht-ton.de), Social Links (Facebook, Instagram, Google), Rechts-Links (Impressum, DSGVO, AGB Vermietung), Copyright '© Hammerschmidt u. Mössle GbR'. KEIN 'Neu in der Vermietung' / KEIN 'AGB Shop' (entfällt). - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User scrollt zum Seitenende. Erwartet: Footer sichtbar mit Adresse, Telefon, E-Mail, Links zu Impressum/DSGVO/AGB. -2. **Edge Case:** User klickt 'Impressum' im Footer. Erwartet: Navigation zu '/impressum', Footer bleibt sichtbar. -3. **Verification:** Footer enthält NICHT 'Neu in der Vermietung' und NICHT 'AGB Shop'. Erwartet: Diese Elemente sind nicht im DOM. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Alle Links funktional -- 'Neu in der Vermietung' und 'AGB Shop' NICHT vorhanden - ---- - -### [F-HMS-12] Impressum Seite -**Anforderung:** Statische Impressum-Seite '/impressum' mit rechtlichen Angaben gemäß §5 TMG: Firmenname (Hammerschmidt u. Mössle GbR), Vertretungsberechtigte (Leopold Hammerschmidt, Andreas Mössle), Anschrift, Kontakt (Telefon, E-Mail), USt-IdNr. (falls vorhanden), Verantwortlich für Inhalte. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User navigiert zu '/impressum'. Erwartet: Seite lädt mit allen Pflichtangaben, lesbar auf Desktop + Mobile. -2. **Edge Case:** Direktzugriff via URL. Erwartet: Seite ist öffentlich zugänglich, kein Login erforderlich. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 2 Tests grün -- Rechtliche Angaben vollständig - ---- - -### [F-HMS-13] DSGVO Seite -**Anforderung:** Statische Datenschutz-Seite '/datenschutz' mit: Datenschutzerklärung gemäß DSGVO, Informationen zu: Server-Logfiles, Cookies, Kontaktformular-Datenverarbeitung, Rentman-Datenverarbeitung, Analyse-Tools (falls vorhanden), Nutzerrechte (Auskunft, Löschung, Berichtigung). - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User navigiert zu '/datenschutz'. Erwartet: Seite lädt mit allen DSGVO-Pflichtinformationen, lesbar auf Desktop + Mobile. -2. **Edge Case:** Direktzugriff via URL. Erwartet: Seite ist öffentlich zugänglich. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 2 Tests grün -- DSGVO-konform (Rechtsabfrage empfohlen) - ---- - -### [F-HMS-14] AGB Vermietung Seite -**Anforderung:** Statische AGB-Seite '/agb-vermietung' mit Allgemeinen Geschäftsbedingungen für Vermietung. Inhalt wird vom User bereitgestellt (bestehende AGB Vermietung übernehmen). - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User navigiert zu '/agb-vermietung'. Erwartet: Seite lädt mit AGB-Text, lesbar auf Desktop + Mobile. -2. **Edge Case:** Direktzugriff via URL. Erwartet: Seite ist öffentlich zugänglich. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 2 Tests grün -- AGB-Text korrekt übernommen - ---- - -### [F-HMS-15] Logo & Branding Integration -**Anforderung:** Das bestehende SVG-Logo von hms-licht-ton.de wird übernommen (orange Logo auf Grau-Basis). Farbschema: Primär Grautöne (#1a1a1a bis #f5f5f5), Akzentfarbe Orange (wie im bestehenden Logo). Design-Tokens: CSS-Variablen für Farben, Typography, Spacing. Schriften: Modern, gut lesbar (z.B. Inter, Roboto oder ähnlich). - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** Seite lädt. Erwartet: Logo als SVG sichtbar im Header, orange Akzentfarbe bei Buttons/Links, Grau-Abstufungen als Background. -2. **Edge Case:** Logo-SVG kann nicht geladen werden. Erwartet: Fallback-Text 'HMS Licht & Ton' sichtbar, kein broken-image. -3. **Verification:** Alle Seiten nutzen dasselbe Farbschema. Erwartet: CSS-Variablen konsistent, keine hardcoded Farben abweichend vom Design-System. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- SVG-Logo von alter Website übernommen -- Design-Tokens (CSS Custom Properties) definiert - ---- - -### [F-HMS-16] Anfrage-Warenkorb (Mietkatalog) -**Anforderung:** Session-basierter Warenkorb für Mietanfragen (keine Auth erforderlich). Artikel hinzufügen/entfernen, Menge anpassen. Warenkorb-Icon im Header mit Counter. Warenkorb-Inhalt persistiert in localStorage (Client-side). Persistenz auch über Page-Reloads. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User fügt 2 Artikel hinzu, ändert Menge auf 3 bei einem. Erwartet: Counter zeigt 5 (2+3), Warenkorb-Seite zeigt beide Artikel mit korrekten Mengen. -2. **Edge Case:** User lädt Seite neu. Erwartet: Warenkorb-Inhalt erhalten (localStorage), Counter korrekt. -3. **Edge Case:** User entfernt alle Artikel. Erwartet: Counter=0, Warenkorb-Seite zeigt Empty-State 'Keine Artikel ausgewählt' + Link zum Katalog. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- localStorage-Persistenz funktional -- Mobile: Warenkorb als Drawer/Bottom-Sheet erreichbar - ---- - -### [F-HMS-17] Admin-Login & Equipment-Sync-Trigger -**Anforderung:** Einfacher Admin-Login (Username/Passwort, JWT-Session) für HMS-Mitarbeiter. Nach Login: Dashboard mit 'Equipment-Sync starten'-Button, Sync-Status (last sync, anzahl artikel), Sync-Log. Kein öffentlicher Zugriff auf Admin-Funktionen. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** Admin loggt sich ein, klickt 'Equipment-Sync starten'. Erwartet: Sync läuft, Progress-Indicator sichtbar, nach Abschluss: Status aktualisiert mit Datum + Anzahl. -2. **Edge Case:** Nicht-Admin versucht '/admin' aufzurufen. Erwartet: Redirect zu Login-Seite, keine Admin-Funktionen sichtbar. -3. **Edge Case:** Falsches Passwort. Erwartet: Fehlermeldung 'Ungültige Anmeldedaten', keine Session erstellt. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- JWT-Auth funktional -- Admin-Routen geschützt - ---- - -### [F-HMS-18] 404 / Error Pages -**Anforderung:** Custom 404-Seite mit freundlicher Nachricht + Link zur Home-Seite. 500-Error-Page mit allgemeiner Fehlermeldung. Keine raw Stack-Traces im Production-Modus. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** User navigiert zu '/nicht-existent'. Erwartet: 404-Seite mit 'Seite nicht gefunden' + Link zu Home. -2. **Edge Case:** Server-Fehler tritt auf. Erwartet: 500-Seite mit 'Etwas ist schiefgelaufen', keine Stack-Traces sichtbar. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 2 Tests grün -- Error-Pages im Branding-Design - ---- - -### [F-HMS-19] SEO & Meta-Tags -**Anforderung:** Jede Seite hat: Title-Tag, Meta-Description, OpenGraph-Tags, Canonical-URL. Sitemap.xml generiert. robots.txt vorhanden. Structured Data (JSON-LD) für LocalBusiness auf Home-Seite. SSR/SSG für Crawler-Indexierung. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** Crawler ruft '/' auf. Erwartet: Vollständiger HTML mit Title, Meta-Description, OpenGraph-Tags, JSON-LD LocalBusiness. -2. **Edge Case:** Crawler ruft '/mietkatalog' auf. Erwartet: Server-side gerendert mit Equipment-Liste im HTML (nicht nur client-side JS). -3. **Verification:** '/sitemap.xml' liefert gültige XML mit allen Seiten-URLs. '/robots.txt' existiert und erlaubt Indexierung. - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- Lighthouse SEO Score >= 95 -- Sitemap + robots.txt vorhanden - ---- - -### [F-HMS-20] E-Mail-Service (Kontaktformular + Mietanfrage-Bestätigung) -**Anforderung:** Backend-E-Mail-Service der zwei Typen versendet: 1) Kontaktformular-E-Mail an info@hms-licht-ton.de, 2) Bestätigungs-E-Mail an Kunde nach Mietanfrage. SMTP-Konfiguration via Environment-Variablen. E-Mail-Templates in HTML + Text. - -**Test Scenarios (Pflicht, mind. 2):** -1. **Happy Path:** Kontaktformular wird abgeschickt. Erwartet: E-Mail an info@hms-licht-ton.de mit Formulardaten, Absender ist Formular-E-Mail (Reply-To). -2. **Happy Path:** Mietanfrage erfolgreich an Rentman gesendet. Erwartet: Bestätigungs-E-Mail an Kunde mit Referenz-Nummer und Artikel-Liste. -3. **Edge Case:** SMTP-Server nicht erreichbar. Erwartet: E-Mail in Retry-Queue, Admin-Benachrichtigung, keine Fehlermeldung an User (smooth fallback). - -**Akzeptanzkriterium:** -- Build erfolgreich -- Alle 3 Tests grün -- E-Mail-Empfang manuell verifiziert -- SMTP via Env-Vars konfiguriert - ---- - -## 4. Rentman-Integration-Spezifikation - -### 4.1 Equipment-Import (Lese-Richtung) - -| Parameter | Wert | -|-----------|-------| -| **Endpoint** | `GET /equipment` | -| **Auth** | Bearer Token (JWT) | -| **Pagination** | `limit=100`, `offset` iterieren bis `data` leer | -| **Frequenz** | Cron alle 6h + manueller Admin-Trigger | -| **Speicherung** | Lokale PostgreSQL-Tabelle `equipment_cache` | - -**Datenfluss:** -``` -Rentman API -> Backend (GET /equipment paginated) -> PostgreSQL (equipment_cache) -> Backend API -> Frontend -``` - -**Relevante Felder (zu ermitteln via GET /equipment/{id}):** -- `id`, `name`, `number` -- Kategorie/Gruppe (Feldname in Rentman API) -- Beschreibung/Specs -- Bilder/Bild-URLs -- Mietpreis/Tagessatz - -### 4.2 Mietanfrage-Übermittlung (Schreib-Richtung) - -| Schritt | Endpoint | Zweck | -|----------|----------|-------| -| 1 | `POST /projectrequests` | Anfrage mit Event- + Kontaktdaten erstellen | -| 2 | `POST /projectrequests/{id}/projectrequestequipment` | Equipment pro Artikel hinzufügen | - -**POST /projectrequests Body (gemappt aus Frontend-Formular):** -```json -{ - "name": "{veranstaltungsname}", - "planperiod_start": "{datum_von}T08:00:00+02:00", - "planperiod_end": "{datum_bis}T02:00:00+02:00", - "usageperiod_start": "{datum_von}T18:00:00+02:00", - "usageperiod_end": "{datum_bis}T23:59:00+02:00", - "contact_name": "{firma_oder_name}", - "contact_person_first_name": "{vorname}", - "contact_person_lastname": "{nachname}", - "contact_person_email": "{email}", - "location_name": "{veranstaltungsort}", - "location_mailing_street": "{strasse}", - "location_mailing_number": "{hausnummer}", - "location_mailing_postalcode": "{plz}", - "location_mailing_city": "{ort}", - "location_mailing_country": "Deutschland", - "remark": "{nachricht}" -} -``` - -**POST /projectrequests/{id}/projectrequestequipment Body (pro Artikel):** -```json -{ - "name": "{equipment_name}", - "quantity": {menge}, - "quantity_total": {menge}, - "unit_price": {mietpreis_oder_0}, - "linked_equipment": "/equipment/{equipment_id}" -} -``` - -### 4.3 Fehlerbehandlung -- Rentman API nicht erreichbar -> Retry-Queue (exponential backoff, max 5 retries) -- Partial-Failure (projectrequests OK, equipment failed) -> Retry nur für fehlgeschlagene Equipment-POSTs -- Admin-E-Mail-Notification bei permanentem Failure -- User bekommt keine Fehlermeldung (smooth fallback: 'Anfrage eingegangen, wird bearbeitet') - ---- - -## 5. Nicht-funktionale Anforderungen - -### 5.1 Performance -- Page-Load < 2s auf 3G (Lighthouse Mobile Score >= 90) -- API-Response < 500ms für Equipment-Liste (gecached) -- Bilder: WebP/AVIF Format, lazy-loading, responsive sizes -- Backend: Redis-Cache für Equipment-Liste (TTL 1h) - -### 5.2 Mobile-First -- Alle Seiten für 375px Breite optimiert -- Touch-Targets min 44x44px -- Keine horizontal-scrolls auf Mobile -- Burger-Menu mit Slide-in Animation -- Galerie: 1-2 Spalten auf Mobile - -### 5.3 Accessibility -- WCAG 2.1 Level AA angestrebt -- Keyboard-Navigation funktional auf allen Seiten -- Alt-Texte für alle Bilder -- Kontrast min 4.5:1 (Grau-Schema muss geprüft werden) -- ARIA-Labels für interaktive Elemente - -### 5.4 SEO -- SSR/SSG (Server-Side Rendering oder Static Generation) -- Semantic HTML (header, nav, main, section, footer) -- Meta-Tags pro Seite -- Sitemap.xml + robots.txt -- JSON-LD LocalBusiness - -### 5.5 Security -- HTTPS-only (TLS via Coolify/Traefik) -- CSRF-Schutz für alle Formulare -- Input-Validation serverseitig (Pydantic/Zod) -- Rentman-API-Token in Environment-Variablen (nie im Frontend) -- Rate-Limiting für Kontaktformular + Mietanfrage (max 5/min) -- Admin-Login: JWT mit HttpOnly-Cookie, 24h Expiry -- Keine sensiblen Daten im localStorage (nur Warenkorb-IDs) - ---- - -## 6. Technologie-Empfehlungen - -### 6.1 Frontend -- **Framework:** Nuxt 3 (Vue 3, SSR/SSG, SEO-friendly, Mobile-First) -- **Styling:** Tailwind CSS (Utility-First, Mobile-First Breakpoints) -- **State:** Pinia (Vue Store) für Warenkorb + UI-State -- **Icons:** Lucide Icons oder Heroicons -- **Bildergalerie:** Eigene Lightbox-Komponente oder PhotoSwipe - -**Begründung Nuxt 3:** SSR für SEO, Vue 3 für reaktive UI, eingebauter Router, SSG-Mode für statische Seiten (Home, Referenzen, Impressum, DSGVO, AGB), SSR für dynamische Seiten (Mietkatalog). - -### 6.2 Backend -- **Framework:** FastAPI (Python, async, OpenAPI auto-docs) -- **ORM:** SQLAlchemy + Alembic (Migrations) -- **Database:** PostgreSQL (Equipment-Cache, Sync-Log) -- **Cache:** Redis (Equipment-Liste, Rate-Limiting) -- **Task Queue:** Celery oder arq (Equipment-Sync, E-Mail-Versand, Rentman-Retry) -- **Auth:** JWT (python-jose) für Admin-Login -- **E-Mail:** FastAPI-Mail oder smtplib + Jinja2-Templates - -**Begründung FastAPI:** Rentman Python-Client bereits vorhanden, async für API-Calls, automatische OpenAPI-Doku, Pydantic für Validation. - -### 6.3 Deployment -- **Platform:** Coolify (Docker) auf coolify-01 (46.225.91.159) -- **Container:** Frontend (Nuxt), Backend (FastAPI), PostgreSQL, Redis -- **TLS:** Let's Encrypt via Traefik -- **Domain:** hms-licht-ton.de (bestehende Domain übernehmen) -- **Environments:** dev, staging, prod - -### 6.4 Rentman-Integration -- **Client:** RentmanAPI Python-Client aus Plugin -- **Token:** Environment-Variable `RENTMAN_API_TOKEN` -- **Base URL:** `https://api.rentman.net/` - ---- - -## 7. Discovery-Checkliste (20 Kategorien) - -| # | Kategorie | Status | Entscheidung | -|---|-----------|--------|--------------| -| 1 | **Auth** | ja | Admin-Login (JWT) für Equipment-Sync. Kein User-Login für öffentliche Seiten. | -| 2 | **Daten** | ja | Equipment-Cache in PostgreSQL, Validierung via Pydantic, Pagination (limit=100), Search/Filter im Frontend. | -| 3 | **Fehler** | ja | Custom 404/500 Pages, Toast-Notifications, Error-Logging im Backend, Retry-Queue für Rentman. | -| 4 | **Skalierung** | später | Kleinunternehmen, moderater Traffic. Redis-Cache reicht. Horizontal Scaling post-MVP. | -| 5 | **Sicherheit** | ja | CSRF-Schutz, Input-Validation, Rentman-Token in Env-Vars, Rate-Limiting, HTTPS-only. | -| 6 | **UX** | ja | Loading-States (Skeletons), Empty-States (keine Artikel), Toast-Notifications, Warenkorb-Feedback. | -| 7 | **Infrastruktur** | ja | Health-Checks (/health endpoint), Structured Logging, Backup via Coolify, Monitoring später. | -| 8 | **Multi-User** | nein | Single-Tenant, keine gleichzeitigen Edit-Operationen. Nur Admin-Sync ist singular. | -| 9 | **Migration** | ja | Content von alter Website manuell übernehmen. Equipment aus Rentman importieren. Bilder von alter Website sichern. | -| 10 | **Mobile** | ja | Mobile-First Design, 375px Baseline, Touch-Targets 44px, Burger-Menu, Responsive Galerie. | -| 11 | **Integration** | ja | Rentman API (Equipment-Import + Project Requests), SMTP (E-Mail), Social Links (Facebook, Instagram). | -| 12 | **Compliance** | ja | DSGVO: Datenschutzerklärung, DSGVO-Einwilligung bei Formularen, Impressum, AGB Vermietung. | -| 13 | **Performance** | ja | Lighthouse >= 90, Redis-Cache, WebP-Bilder, SSR/SSG, Lazy-Loading. | -| 14 | **i18n** | nein | Deutsch only. Keine Mehrsprachigkeit geplant. | -| 15 | **Accessibility** | ja | WCAG 2.1 AA angestrebt, Keyboard-Nav, Alt-Texte, Kontrast 4.5:1, ARIA-Labels. | -| 16 | **Analytics** | später | Post-MVP. Google Analytics oder Plausible können später hinzugefügt werden. | -| 17 | **Environments** | ja | Dev/Staging/Prod. Env-Vars für: RENTMAN_API_TOKEN, SMTP_CREDENTIALS, DATABASE_URL, JWT_SECRET. | -| 18 | **Dokumentation** | ja | README.md, API-Docs (FastAPI OpenAPI auto), Admin-Docs (Sync-Workflow), Deploy-Docs (Coolify). | -| 19 | **Testing** | ja | Frontend: Vitest (Unit), Playwright (E2E). Backend: Pytest (Unit + Integration). Coverage-Target: 80%. | -| 20 | **Naming/Branding** | ja | 'HMS Licht & Ton', Domain hms-licht-ton.de, Grautöne + Orange, SVG-Logo übernommen. | - ---- - -## 8. Constraints - -| Constraint | Wert | -|-----------|------| -| **Frontend Framework** | Nuxt 3 (Vue 3 + Tailwind CSS) | -| **Backend Framework** | FastAPI (Python) | -| **Database** | PostgreSQL | -| **Cache** | Redis | -| **Task Queue** | Celery oder arq | -| **Deployment** | Coolify (Docker) auf coolify-01 | -| **Domain** | hms-licht-ton.de | -| **Rentman API** | https://api.rentman.net/ (Bearer Token) | -| **SMTP** | via Env-Vars konfiguriert | -| **TLS** | Let's Encrypt via Traefik | -| **Environments** | Dev, Staging, Prod | -| **Coding Style** | Frontend: Vue 3 Composition API, script setup, TypeScript. Backend: PEP 8, async/await, Pydantic models. | -| **Testing** | Vitest + Playwright (Frontend), Pytest (Backend), Coverage >= 80% | -| **CI/CD** | Forgejo Actions (Build, Test, Deploy via Coolify) | - ---- - -## 9. Annahmen - -1. Die bestehende SVG-Logo-Datei von hms-licht-ton.de ist verfügbar und kann übernommen werden -2. Rentman-API-Token wird vom User bereitgestellt und in Env-Vars konfiguriert -3. SMTP-Zugangsdaten werden vom User bereitgestellt -4. Die AGB-Vermietung-Texte werden vom User als Text/Markdown bereitgestellt -5. Die Referenz-Bilder werden vom User als Dateien bereitgestellt (nicht von alter Website gecrawlt) -6. Die Domain hms-licht-ton.de kann auf den neuen Server umgezogen werden (DNS) -7. Rentman API unterstützt die dokumentierten Endpunkte (projectrequests, equipment) -8. Equipment-Artikel in Rentman haben Bilder und Beschreibungen (falls nicht, Fallback-Placeholder) -9. Das alte WordPress kann nach Go-Live abgeschaltet werden -10. Google Maps Einbindung via Link (keine API-Key benötigt für 'Route planen') - ---- - -## 10. Non-Goals - -1. **Kein Online-Shop** – keine Kauf-Funktion, keine Zahlungsverarbeitung, keine Warenkorb-Checkout-Funktion -2. **Kein CMS/News-System** – keine Redaktionsoberfläche, kein Blog, keine News-Artikel -3. **Keine 'Neu in der Vermietung' Sektion** – entfällt explizit -4. **Keine 'AGB Shop' Seite** – entfällt (nur AGB Vermietung) -5. **Keine WordPress-Weiterentwicklung** – vollständiger Neuaufbau -6. **Keine Benutzerregistrierung** – keine Kunden-Accounts, keine Login-Pflicht für öffentliche Seiten -7. **Keine Echtzeit-Verfügbarkeit** – keine Live-Abfrage von Equipment-Verfügbarkeit (post-MVP) -8. **Keine Preisberechnung** – keine automatische Kostenkalkulation im Frontend (HMS erstellt Angebot in Rentman) -9. **Keine Mehrsprachigkeit (i18n)** – Deutsch only -10. **Keine Mobile App** – responsive Web-App reicht -11. **Keine Analytics/Tracking** – post-MVP -12. **Keine komplexe Suche** – keine Elasticsearch/Fuzzy-Search (post-MVP) - ---- - -## 11. Offene Fragen - -1. **Rentman API-Token:** Wird vom User bereitgestellt? Welche Berechtigungen (read equipment, write projectrequests)? -2. **Equipment-Felder:** Welche Felder sind im Rentman equipment-Objekt verfügbar (Kategorie, Bilder, Specs)? Ggf. GET /equipment/{id} testen. -3. **AGB-Texte:** Stellt der User die AGB Vermietung als Text/Markdown bereit? -4. **Referenz-Bilder:** Stellt der User die Bilder als Dateien bereit? Wie viele Bilder? -5. **SMTP:** Welcher SMTP-Server? Zugangsdaten? -6. **Logo-SVG:** Ist das SVG von der alten Website direkt verfügbar? URL: /wp-content/uploads/2020/06/Logo-Transparent.svg -7. **USt-IdNr:** Für Impressum benötigt – wird vom User bereitgestellt? -8. **Domain-Umzug:** Wann wird DNS auf neuen Server umgeleitet? -9. **Rentman Equipment-Kategorien:** Wie sind Kategorien strukturiert? Eigene Felder oder nested objects? -10. **Mietpreise:** Soll der Mietpreis im Katalog angezeigt werden? Oder nur auf Anfrage? - ---- - -## 12. Test-Coverage Summary - -| Feature ID | Feature Name | Test Scenarios | Status | -|------------|-------------|----------------|--------| -| F-HMS-01 | Home / Startseite | 3 | OK | -| F-HMS-02 | Referenzen / Bildergalerie | 3 | OK | -| F-HMS-03 | Kontaktseite mit Formular | 3 | OK | -| F-HMS-04 | Mietkatalog – Equipment-Liste | 3 | OK | -| F-HMS-05 | Mietkatalog – Equipment-Detailansicht | 3 | OK | -| F-HMS-06 | Mietkatalog – Search & Filter | 3 | OK | -| F-HMS-07 | Mietkatalog – Mietanfrage-Formular | 3 | OK | -| F-HMS-08 | Rentman Equipment-Import | 3 | OK | -| F-HMS-09 | Rentman Mietanfrage-Übermittlung | 3 | OK | -| F-HMS-10 | Navigation / Header | 3 | OK | -| F-HMS-11 | Footer | 3 | OK | -| F-HMS-12 | Impressum Seite | 2 | OK | -| F-HMS-13 | DSGVO Seite | 2 | OK | -| F-HMS-14 | AGB Vermietung Seite | 2 | OK | -| F-HMS-15 | Logo & Branding Integration | 3 | OK | -| F-HMS-16 | Anfrage-Warenkorb | 3 | OK | -| F-HMS-17 | Admin-Login & Equipment-Sync | 3 | OK | -| F-HMS-18 | 404 / Error Pages | 2 | OK | -| F-HMS-19 | SEO & Meta-Tags | 3 | OK | -| F-HMS-20 | E-Mail-Service | 3 | OK | - -**Total: 20/20 Features mit Test-Szenarien** - ---- - -## 13. Handoff Summary - -DISCOVERY_CHECK: categories=20/20, features_with_ids=20/20, test_scenarios=20/20, constraints=Y, non_goals=Y, domain=Y, ready_for_ui=Y - -- **requirements status:** COMPLETE – 20 Features, 20/20 mit Test-Szenarien, 20/20 Kategorien beantwortet -- **test coverage:** 20/20 Features haben Test-Szenarien -- **missing_test_scenarios:** keine -- **open questions:** 10 (siehe §11) -- **assumptions:** 10 (siehe §9) -- **non-goals:** 12 (siehe §10) -- **ready_for_ui:** YES -- **ready_for_architecture:** NO (erst nach UI Design Approval) +§§include(/tmp/requirements_updated.md) \ No newline at end of file