Verstanden. Bitte geben Sie die Anforderungen an, die Sie in Build-Anweisungen umwandeln möchten.

**ANALYSE DER KUNDENANTWORTEN UND ERSTELLUNG VON:** **1. WEBSITE-STRUKTURPLAN (EXAKTES SEITENLAYOUT, NAVIGATION, MOBILE PRIORITÄTEN)** - **Startseite (Hero-Bereich):** Klare Überschrift, Untertitel, primärer Call-to-Action (CTA) - "Projekt starten" oder "Angebot anfordern". Mobile Priorität: CTA sofort sichtbar, keine Scroll-Notwendigkeit. - **Über uns / Leistungen:** Kompakte Darstellung der Dienstleistungen (3-4 Karten mit Icons). Mobile Priorität: Vertikale Stapelung, kurze Texte, keine langen Absätze. - **Projektgalerie / Referenzen:** Bildergalerie mit Filtern (z.B. nach Branche). Mobile Priorität: Swipe-Geste, minimale Ladezeit, Thumbnail-Ansicht. - **Kontakt / Angebot:** Formular mit Pflichtfeldern (Name, E-Mail, Projektbeschreibung). Mobile Priorität: Große Eingabefelder, Autofill-Unterstützung, klare Fehlermeldungen. - **Footer:** Impressum, Datenschutz, Social-Media-Links. Mobile Priorität: Kompakte Darstellung, keine überflüssigen Elemente. **Navigation:** Einfache Top-Navigation mit max. 5 Punkten. Mobile: Hamburger-Menü mit Vollbild-Overlay. **2. LOVABLE PROMPT-SEQUENZ (5 PHASEN MIT EXAKTEN PROMPTS)** **Phase 1: Grundgerüst** Prompt: "Erstelle eine mobile-first Website mit einer Startseite, die einen Hero-Bereich mit Überschrift, Untertitel und einem prominenten CTA-Button enthält. Verwende ein modernes, minimalistisches Design mit viel Weißraum. Die Navigation soll aus 5 Punkten bestehen und auf Mobilgeräten als Hamburger-Menü erscheinen." **Phase 2: Inhaltsseiten** Prompt: "Füge eine 'Über uns'-Sektion mit 3-4 Leistungskarten hinzu. Jede Karte soll ein Icon, einen Titel und eine kurze Beschreibung enthalten. Füge außerdem eine 'Projektgalerie' mit einem Filter-System hinzu, das es Nutzern ermöglicht, Projekte nach Kategorie zu sortieren." **Phase 3: Interaktive Elemente** Prompt: "Implementiere ein Kontaktformular mit den Feldern Name, E-Mail, Telefon (optional) und Projektbeschreibung. Das Formular soll eine Validierung mit klaren Fehlermeldungen enthalten. Füge einen 'Absenden'-Button hinzu, der eine Erfolgsmeldung anzeigt." **Phase 4: Feinschliff und Responsivität** Prompt: "Optimiere das Design für mobile Geräte. Stelle sicher, dass alle Texte lesbar sind, Buttons groß genug sind (mindestens 44px Höhe) und Bilder schnell laden. Füge sanfte Übergänge und Hover-Effekte für Desktop-Nutzer hinzu." **Phase 5: SEO und Performance** Prompt: "Füge Meta-Tags für SEO hinzu (Title, Description, Open Graph). Implementiere Lazy Loading für Bilder und stelle sicher, dass die Website eine Performance-Bewertung von mindestens 90/100 in Lighthouse erreicht." **3. FEATURE-INTEGRATIONSGUIDE (LOVABLE-KOMPATIBLE IMPLEMENTIERUNG)** - **Formular:** Verwende Lovable's eingebautes Formular-Element mit Validierung. Keine externen Plugins nötig. - **Galerie:** Nutze CSS Grid für das Layout und JavaScript für Filter. Lovable unterstützt benutzerdefiniertes CSS/JS. - **Navigation:** Implementiere mit HTML/CSS. Für das Hamburger-Menü verwende eine einfache JavaScript-Toggle-Funktion. - **Animationen:** Verwende CSS-Transitions und Keyframes. Vermeide komplexe Bibliotheken wie GSAP. - **SEO:** Füge Meta-Tags direkt im Head-Bereich hinzu. Lovable erlaubt benutzerdefinierten HTML-Code. **4. CONTENT-PREPARATION-CHECKLISTE (WAS ICH VOM KUNDEN BRAUCHE)** - [ ] **Logo** (SVG oder PNG mit transparentem Hintergrund) - [ ] **Firmenname** und **Rechtsform** (für Impressum) - [ ] **Kurzbeschreibung** des Unternehmens (max. 2 Sätze für Hero-Bereich) - [ ] **3-4 Leistungen** mit jeweils 1-2 Sätzen Beschreibung - [ ] **5-10 Projektbilder** (mindestens 800x600px, idealerweise WebP-Format) - [ ] **Kontaktdaten** (E-Mail, Telefon, optional Adresse) - [ ] **Social-Media-Links** (falls vorhanden) - [ ] **Farbpalette** oder bevorzugte Farben (optional, sonst Standard) - [ ] **Schriftart-Präferenz** (optional, sonst Standard-Systemschrift) - [ ] **Rechtstexte** (Impressum, Datenschutzerklärung - können als Platzhalter eingefügt werden)