Erstellen Sie eine Webseite basierend auf den vom Benutzer bereitgestellten Inhalten. Die Anforderungen an den Webseitenstil sind wie folgt:

### I. Visuelle Stilpositionierung – **Künstlerischer, handgezeichneter Stil**: Verwendung eines Linienkunststils, der modernes digitales Design mit traditioneller, handgezeichneter Ästhetik verbindet. – **Farbschema**: Verwendung neutraler Farben (Cremeweiß/Hellgrau) als Basis, kombiniert mit dunkelgrauem Haupttext und Orangerot (Akzentfarbe) als visueller Fokus. – **Markenton**: Raffiniert, künstlerisch und warm, für eine anspruchsvolle Zielgruppe. ### II. Layout-Strukturprinzipien **Hero-Bereich (Design des ersten Bildschirms)** - Links-Rechts-Spaltenlayout (60:40 Goldener Schnitt) - Linke Seite: - Übergroßer Titel (Display-Schriftart, 72-96px), dunkle Schrift, starke visuelle Wirkung - Wichtige Daten in Akzentfarbe hervorgehoben (z. B. „15 Städte, 4749 Standorte“) - Prägnanter und aussagekräftiger Untertitel, der das zentrale Wertversprechen darlegt - Viel Weißraum für ein hochwertiges Erscheinungsbild - Rechte Seite: - Individuelle, handgezeichnete Illustrationen, die 50 % des visuellen Raums einnehmen - Einheitlicher Illustrationsstil: Strichzeichnung + lokale Farbakzente - Illustrationsinhalte eng mit der Markengeschichte verknüpft - **Design der Navigationsleiste** - Minimalistische Top-Navigation, feste Positionierung - Logo + 2-3 Hauptmenüpunkte - Symbolgruppe rechts (Suche/Favoriten/Menü) - Transparenter oder reinweißer Hintergrund mit dezenten Schatten - **Bereich der Inhaltskarten** - Kartenraster-Layout (3-4 Spalten, responsiv) - Jede Karte enthält: - Titel (Überschrift 3, 32–40 px) – Beschreibung (2–3 Zeilen, 16–18 px, Zeilenhöhe 1,6) – Begleitende handgezeichnete Illustration (passend zum visuellen Hauptstil) – Heller Hintergrund (#F5F3F0), abgerundete Ecken (8–12 px) – Hover-Effekt: Leicht ansteigend + vertiefter Schatten – ### III. Spezifikationen des Illustrationssystems **Richtlinien für die Illustrationserstellung** 1. 2. **Linienverarbeitung**: – Verwenden Sie 1–2 px lange, unregelmäßige, handgezeichnete Linien, um eine realistische Malstruktur zu simulieren. – Achten Sie auf glatte Linien mit einem Hauch von Künstlichkeit und vermeiden Sie übermäßige Mechanischeität. 3. **Farbverwendung:** - 80 % graue Linien + 20 % Markenfarbe - Orangerot wird nur zur Hervorhebung von Elementen (Personen, Fenster, wichtige Gebäude) verwendet - Hintergrund mit beigem Farbverlauf (#FDFBF7 → #F5F1EB) - 5. **Szenenkomposition:** - Stadtszenen: Kombination von markanten Gebäuden und Alltagsszenen - Draufsicht oder isometrische Perspektive - Hinzufügen kleiner Figuren zur Verstärkung der Erzählung und Schaffung von Nähe - 7. **Detaildichte:** - Detailreicher Vordergrund, leicht vereinfachter Mittelgrund und umrissener Hintergrund - Beibehaltung der visuellen Hierarchie, um den Blick auf wichtige Informationen zu lenken - 9. ### IV. Schriftartsystem – **Schriftart (Titel):** Serifenschrift, fett und ausdrucksstark (z. B. Freight Display, Tiempos) – **Schriftart (Textkörper):** Serifenlose Schrift, gut lesbar (z. B. Inter, Manrope) – **Schriftgrößenverhältnis:** Modulares Skalierungsmodell (1,25 oder 1,333) – **Schriftstärken:** Light (300) / Regular (400) / Medium (500) / Bold (700) – ### V. Interaktionsdetails – **Mikroanimationen:** Karten heben sich beim Überfahren mit der Maus um 4–8 Pixel an, Übergangszeit 300–400 ms – **Ladestatus:** Geschütztes Layout für einheitliches Branding – **Responsive Breakpoints:** Desktop: ab 1440 Pixel – Tablet: 768–1439 Pixel – Mobilgerät: 375-767px - - ### VI. Anforderungen an die Designausgabe Jede Designausgabe sollte Folgendes beinhalten: 1. 2. Klare visuelle Hierarchie (erreicht durch Größe/Farbe/Weißraum) 3. 4. Mindestens eine individuelle Illustration (eng mit dem Inhalt verbunden, erstellt mit Nano Banana Pro) 5. 6. 2-3 Akzentfarben (maximal 7). 8. Ausreichend Freiraum (Abstandsabstand ≥ 120px) 9. 10. Klare Benutzerführung 11. --- **Designphilosophie**: Verwenden Sie eine künstlerische Bildsprache, um die Einzigartigkeit und Wärme der Marke zu vermitteln. Jedes Pixel erzählt eine Geschichte und dient nicht nur der Darstellung von Funktionalität. Das Design soll den Nutzern das Gefühl vermitteln: „Das ist für Menschen, die das Leben schätzen“, und nicht das Gefühl vermitteln, ein kaltes, kommerzielles Produkt zu sein.

Die Illustrationen auf der Webseite wurden alle mit Nano Banana Pro erstellt.