test-2026-02-03-v1/prompts/master_prompt.md

Website-Build Masterprompt v2

Projekt: test | Branche: Digitale Dienstleistungen | Sprache: de

0. Research & Kontext

Nutze diese Insights als Fundament für alle Design- und Content-Entscheidungen.

Branchen-Insights

1. Digitalisierung: Unternehmen in Österreich setzen verstärkt auf digitale Transformation, um Prozesse zu optimieren und Kunden besser zu erreichen. 2. Nachhaltigkeit: Es gibt einen wachsenden Trend zu nachhaltigen Geschäftspraktiken, der auch die Online-Präsenz beeinflusst. 3. Personalisierung: Websites in der Branche bieten zunehmend personalisierte Inhalte und Erlebnisse, um die Kundenbindung zu stärken. 4. Mobile-First-Design: Da immer mehr Nutzer über mobile Geräte auf Websites zugreifen, ist ein responsives Design unerlässlich. 5. Datenschutz: Strengere Datenschutzbestimmungen erfordern transparente und sichere Datenverarbeitungspraktiken.

Wettbewerbsanalyse

Typische Websites in der Branche zeichnen sich durch klare, strukturierte Layouts mit einfacher Navigation aus. Häufige Features sind detaillierte Produkt- oder Dienstleistungsbeschreibungen, Kundenbewertungen und Kontaktformulare. Wettbewerber punkten oft mit ansprechendem Design und klaren Call-to-Actions, jedoch gibt es oft Lücken in der Personalisierung und Interaktivität.

Zielgruppen-Analyse

Die Zielgruppe besteht aus Personen im Alter von 25-55 Jahren mit fortgeschrittenem Wissensstand. Sie sind rational und treffen Entscheidungen basierend auf Fakten und logischen Argumenten. Ihre Bedürfnisse umfassen zuverlässige Informationen, Transparenz und effiziente Lösungen. Einwände könnten sich auf Preis-Leistungs-Verhältnisse und Servicequalität beziehen. Entscheidungskriterien sind oft Kosten, Nutzen und Zuverlässigkeit.

UX-Empfehlungen

Die Navigation sollte intuitiv und einfach sein, mit klaren Menüpunkten und einer logischen Struktur. Interaktive Elemente wie Chatbots oder FAQ-Bereiche können den fortgeschrittenen Wissensstand der Zielgruppe unterstützen. Eine klare und schnelle Informationsvermittlung ist entscheidend.

Conversion-Strategie

Um die rationale Zielgruppe zu überzeugen, sollten CTAs klar und direkt sein, wie z.B. 'Mehr erfahren' oder 'Jetzt kontaktieren'. Vertrauenselemente wie Kundenbewertungen, Zertifikate und Fallstudien sind wichtig. Die Argumentationsstruktur sollte auf Fakten, Nutzen und Effizienz basieren.

Vorgeschlagene Alleinstellungsmerkmale (USPs)

• Regionale Expertise in Österreich
• Nachhaltige und innovative Lösungen
• Personalisierte Dienstleistungen
• Hohe Effizienz und Zuverlässigkeit
• Starke Kundenorientierung

SEO-Keywords

Dienstleistungen Österreich, digitale Transformation, nachhaltige Geschäftspraktiken, Personalisierung, Mobile-First-Design, Datenschutz Österreich, KMU Österreich, regionale Dienstleistungen, kundenorientierte Lösungen, effiziente Prozesse, innovative Technologien, lokale Unternehmen, Österreich Markt, digitale Lösungen, kundenfreundliche Services

Content-Richtlinien

Die Kommunikation sollte freundlich und prägnant sein, mit einer klaren Ansprache in der Sie-Form. Die Botschaften sollten den Nutzen und die Effizienz der Dienstleistungen hervorheben, Vertrauen schaffen und die Rationalität der Zielgruppe ansprechen.

---

🚨 KI-KONTEXT (HÖCHSTE GEWICHTUNG)

KRITISCH: Diese Vorgaben haben die höchste Priorität und überschreiben ALLE anderen Regeln, sofern nicht mit SYSTEM_SKILLS kollidierend.

✅ Was bei dieser Website BESONDERS WICHTIG ist:

Kundenorientierung, Effizienz, Nachhaltigkeit

❌ Was AUF KEINEN FALL passieren darf:

Komplexität, Unklarheit

👍 Positive Referenzen (SO soll es sein):

• Klar strukturierte Navigation
• Personalisierte Inhalte

👎 Negative Referenzen (SO NICHT):

• Überladene Seiten
• Langsame Ladezeiten

WICHTIG: Prüfe bei JEDER Designentscheidung, ob sie mit diesem KI-Kontext übereinstimmt. Bei Konflikten: KI-Kontext hat Vorrang vor generischen Regeln.

---

1. Lesereihenfolge (PFLICHT)

Du MUSST die folgenden Dateien in dieser EXAKTEN Reihenfolge lesen, bevor du irgendeine Zeile Code schreibst:

1. READ_FIRST.md (Projektübersicht & Regeln)
2. skills/SYSTEM_SKILLS.md (globale System-Skills – nicht überschreibbar)
3. skills/UI_GUIDELINES.md (UI-Richtlinien – nicht überschreibbar)
4. skills/DEFINITION_OF_DONE.md (Definition of Done – nicht überschreibbar)
5. skills/CLIENT_OVERRIDES.md (kundenspezifische Ergänzungen)
6. spec/ProjectSpec.json (Projektspezifikation)
7. spec/design_tokens.json (Design-Token – Single Source of Truth)
8. theme/globals.css (CSS Custom Properties – Single Source of Truth)
9. theme/stylesheet.css (Strukturelles CSS-Framework)

Erst nach dem Lesen aller Dateien darfst du mit der Implementierung beginnen.

2. Strikte Regeln (Non-Negotiable)

VERBOTEN (sofortige Verletzung)

Die folgenden Praktiken sind absolut verboten und führen zu einem ungültigen Build:

1. Keine Inline-Styles: style={{ ... }} oder style="..." ist in JEDER Komponente verboten. Ausnahme: Dynamische Werte, die nur zur Laufzeit bekannt sind (z.B. style={{ '--progress': value }}). Alle anderen Styles kommen aus CSS-Klassen oder Tailwind-Utilities.
2. Keine harten Pixelwerte: Kein fontSize: 24px, kein padding: 40px, kein margin: 16px in Styles oder Tailwind-Klassen wie p-[40px]. Nutze IMMER Design-Token-Variablen.
3. Kein Content ohne Struktur: Kein Content darf direkt in <main>, <div> oder Root-Level landen. JEDER Content-Block MUSS in <section className="section"> → <div className="container"> eingebettet sein.
4. Keine wilde Button-Erstellung: Buttons dürfen NICHT mit eigenen bg/text-Farbkombinationen erzeugt werden. NUR die definierten Button-Varianten aus stylesheet.css verwenden: .btn-primary, .btn-secondary, .btn-outline, .btn-ghost.
5. Kein Lorem Ipsum: Niemals Lorem ipsum oder andere Dummy-Texte verwenden. Nutze stattdessen branchenspezifische, professionelle Platzhalter-Texte in der Sprache des Projekts.
6. Keine chaotischen Tailwind-Klassen: Keine Kombinationen, die Text- und Hintergrundfarbe kollidieren oder Kontrast zerstören. Keine className-Strings mit mehr als 10 Utility-Klassen – extrahiere in CSS-Klassen.

Strukturelle Pflichten

Section/Container-System (PFLICHT)

Jede Seite MUSS dieser Struktur folgen:

<main>
  <section className="section section--hero">
    <div className="container">
      {/* Hero-Content */}
    </div>
  </section>
  <section className="section">
    <div className="container">
      {/* Weitere Section */}
    </div>
  </section>
</main>

Verfügbare Section-Varianten:

• .section – Standard (padding: --spacing-section)
• .section--sm – Kompakt (padding: --spacing-2xl)
• .section--lg – Großzügig (padding: --spacing-5xl)
• .section--hero – Hero-Bereich (min-height: 80vh, vertikal zentriert)
• .section--flush – Kein Padding (für Bilder, Maps etc.)

Container-Varianten:

• .container – Standard (max-width: --spacing-container)
• .container--narrow – Schmaler (max-width: 48rem, für Text-Content)
• .container--wide – Breiter (max-width: 90rem, für Galerien)

Button-System (PFLICHT)

Buttons werden AUSSCHLIESSLICH über das Variant-System erzeugt:

// RICHTIG:
<button className="btn btn-primary">Jetzt starten</button>
<button className="btn btn-secondary btn-lg">Mehr erfahren</button>
<button className="btn btn-outline">Kontakt</button>
<a href="/kontakt" className="btn btn-ghost">Details →</a>

// FALSCH (VERBOTEN):
<button className="bg-blue-500 text-white px-4 py-2 rounded">Klick</button>
<button style={{ backgroundColor: "blue" }}>Klick</button>

Verfügbare Button-Varianten:

• .btn.btn-primary – Hauptaktion / CTA
• .btn.btn-secondary – Sekundäre Aktion
• .btn.btn-outline – Umrandung, transparent
• .btn.btn-ghost – Minimal, text-artig
• Größen: .btn-sm, .btn-lg

Typografie-System (PFLICHT)

Headlines und Texte MÜSSEN über das definierte System gestylt werden:

// RICHTIG: Nutze HTML-Heading-Tags (automatisch gestylt)
<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>
<p className="lead">Einleitungstext</p>
<p className="text-muted">Ergänzender Text</p>

// Oder Klassen, wenn semantisches Level abweicht:
<h3 className="heading-2">Visuell groß, semantisch h3</h3>

// FALSCH (VERBOTEN):
<p style={{ fontSize: "32px" }}>Groß</p>
<span className="text-[42px]">Riesig</span>

Vertikale Abstände (PFLICHT)

Verwende IMMER die Spacing-Utilities:

• .stack-xs bis .stack-2xl für vertikale Abstände zwischen Kind-Elementen
• Tailwind spacing mit Token-Werten: gap-[var(--spacing-md)], mb-[var(--spacing-lg)]
• NIEMALS: mb-[47px], gap-[23px], mt-[100px]

Design & Styling

• Keine Templates: Verwende KEINE vorgefertigten UI-Templates, Themes oder Section-Bibliotheken (kein shadcn, kein tailwindui, keine Copy-Paste-Sections).
• Design nur aus Tokens: Jede Farbe, jedes Spacing, jede Schriftgröße MUSS aus globals.css Custom Properties kommen. KEINE Hardcoded-Werte im Code.
• Keine UI-Libraries: Kein shadcn/ui, kein Material UI, kein Chakra UI, kein daisyUI. Nur native Tailwind CSS v4 + Custom Components.
• Tailwind v4: Nutze die neuen v4 Features (CSS-first config, @theme directive).
• Card-Komponente: Nutze .card aus stylesheet.css für Karten-Layouts. Keine eigenen border/shadow-Kombinationen.

Architecture

• Skill-Hierarchie: SYSTEM_SKILLS > UI_GUIDELINES > DEFINITION_OF_DONE > CLIENT_OVERRIDES
  • CLIENT_OVERRIDES dürfen globale Regeln NICHT brechen, nur ergänzen.
• TypeScript strict: Alle Dateien in TypeScript. strict: true in tsconfig. Keine any Types (außer bei externen Libraries ohne Types).
• Stack: Next.js 16 App Router, React 19, TypeScript 5+, Tailwind CSS v4, framer-motion (sparsam), lucide-react.
• File Structure: Folge der Next.js 16 App Router Convention. Routes in app/, Components in components/.
• No New Dependencies: Füge KEINE neuen npm packages ohne explizite Begründung hinzu. Nutze den vorhandenen Stack.

Qualitätsstandard: Launch-Ready

Die generierte Website MUSS so aussehen, als wäre sie 90 % fertig und bereit für den Go-Live – NICHT wie ein Prototyp oder eine Demo:

• Sinnvolle Abstände: Großzügiges Whitespace zwischen Sections. Keine gedrängten Inhalte.
• Professionelle Platzhalter: Wenn Inhalte fehlen, nutze branchenspezifische, realistische Texte. KEIN Lorem Ipsum, KEIN "Placeholder".
• Keine leeren Sections: Jede Section MUSS visuellen Wert bieten. Keine Sections mit nur einer Zeile Text.
• Visuelle Ruhe: Maximal 2 verschiedene Schriftgrößen pro Section. Einheitliche Ausrichtung. Konsistente Farbanwendung.
• Professionelle Bilder: Verwende hochwertige Placeholder-Bilder (Unsplash/Pexels via next/image mit blur placeholder).

Performance & Accessibility

• framer-motion sparsam: Nur für key interactions. Keine Animationen auf jedem Element.
• Lenis: NICHT aktivieren, es sei denn CLIENT_OVERRIDES fordert es explizit.
• Accessibility: Semantisches HTML5, ARIA-Labels wo nötig, Keyboard-Navigation, WCAG AA minimum.
• Performance: Keine unnötigen Client Components. Nutze Server Components wo möglich. Next.js Image für alle Bilder.

3. Projekt-Parameter & Identität

A) Unternehmensidentität & Kontext

• Kunde: test
• Slug: test
• Beschreibung: test
• Branche: Digitale Dienstleistungen
• Standort: Wien, Wien, Österreich
• Einzugsgebiet: regional
• Unternehmensgröße: kmu
• Reifegrad: etabliert
• Locale: de-AT
• Sprache: de (Alle Texte in dieser Sprache!)

B) Zielgruppe & Psychografie

• Hauptzielgruppe: Unternehmen und Fachkräfte im Bereich digitale Transformation
• Altersbereich: 25–55 Jahre
• Geschlecht: egal
• Entscheidertyp: rational
• Wissensstand: fortgeschritten
• Typische Einwände:
  • Preis-Leistungs-Verhältnis
  • Servicequalität
• Hauptprobleme der Zielgruppe:
  • Effizienzsteigerung
  • Nachhaltige Lösungen

C) Tonalität & Kommunikation

• Ansprache: sie
• Tonalität: freundlich
• Schreibstil: kurz_praegnant
• Emotionales Gefühl: vertrauensvoll

D) Angebot & Leistungsstruktur

• Angebotstyp: dienstleistung
• Anzahl Leistungen: 2
• Leistungen:
  • undefined: undefined
    • Nutzen: Optimierung von Geschäftsprozessen durch innovative digitale Lösungen
  • undefined: undefined
    • Nutzen: Reduzierung des ökologischen Fußabdrucks durch umweltfreundliche Technologien
• Preissensitivität: mittel

F) Marken- & Stilparameter

• Primärfarbe: #2563eb
• Sekundärfarbe: #64748b
• Akzentfarbe: #f59e0b
• Hintergrund: #ffffff
• Vordergrund: #0f172a
• Heading Font: Inter
• Body Font: Inter
• Stil-Adjektive: modern, klar, vertrauenswürdig
• Stil-Verbote: überladen, veraltet

G) UX & Interaktion

• Interaktionsniveau: moderat
• Animationen: dezent
• Scroll-Verhalten: smooth

H) Conversion & Vertrauen

• Primärer CTA: "Jetzt kontaktieren" → #kontakt
• Sekundärer CTA: "Mehr erfahren" → #leistungen
• Kontaktmethoden: formular, telefon
• Vertrauenselemente: Kundenbewertungen, Zertifikate, Fallstudien

4. Seitenstruktur & Anforderungen

Startseite (/)

Zweck: Informieren | Priorität: Hoch

Beschreibung: Entdecken Sie unsere digitalen Dienstleistungen für nachhaltige Transformation.

Content-Strategie: Fokus auf Wissensvermittlung, klare Struktur, leicht verständliche Sprache. Informationen vor CTAs.

Sections:

• Hero
• Leistungen
• Kundenbewertungen
• Kontakt

Route: app/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt kontaktieren" und "Mehr erfahren"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Über Uns (/ueber-uns)

Zweck: Informieren | Priorität: Mittel

Beschreibung: Erfahren Sie mehr über unser erfahrenes Team und unsere Mission.

Content-Strategie: Fokus auf Wissensvermittlung, klare Struktur, leicht verständliche Sprache. Informationen vor CTAs.

Sections:

• Team
• Geschichte
• Vision

Route: app/ueber-uns/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt kontaktieren" und "Mehr erfahren"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Leistungen (/leistungen)

Zweck: Überzeugen | Priorität: Hoch

Beschreibung: Unsere Dienstleistungen für Ihre digitale Transformation.

Content-Strategie: Fokus auf Argumentation & Nutzen, USPs hervorheben, Social Proof einbinden. Emotionale + rationale Ansprache.

Sections:

• Digitale Transformation
• Nachhaltige IT-Lösungen
• Personalisierte Beratung

Route: app/leistungen/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt kontaktieren" und "Mehr erfahren"
• Accessibility (ARIA labels, alt texts, keyboard nav)

Kontakt (/kontakt)

Zweck: Konvertieren | Priorität: Hoch

Beschreibung: Kontaktieren Sie uns für maßgeschneiderte digitale Lösungen.

Content-Strategie: Fokus auf Handlungsaufforderung, prominente CTAs, Einwände adressieren, Conversion-Elemente (Trust, Urgency).

Sections:

• Kontaktformular
• Standort
• Öffnungszeiten

Route: app/kontakt/page.tsx

Mindestanforderungen:

• Responsive (Mobile-first)
• Semantisches HTML (header, main, section, footer)
• SEO Meta Tags (title, description, og:tags)
• Call-to-Actions mit "Jetzt kontaktieren" und "Mehr erfahren"
• Accessibility (ARIA labels, alt texts, keyboard nav)

5. Technische Anforderungen

Features:

• Responsive Design
• SEO-Optimierung
• SSL-Verschlüsselung

Domain: www.test.at Analytics: Google Analytics Hosting: AWS

6. Implementierungs-Reihenfolge

Befolge diese Schritte in exakter Reihenfolge:

1. Plan erstellen: Kurzer Plan (3-5 Bullet Points) mit deinem Implementierungsansatz.
2. Layout-Components: Header, Footer, Navigation (in components/layout/). Header und Footer nutzen <div className="container"> für Content-Begrenzung.
3. Shared Components: Button-Komponente (nutzt .btn + Varianten-Klassen aus stylesheet.css), Card (nutzt .card), Form-Elemente (in components/ui/). KEINE eigenen Farb-/Spacing-Kombinationen.
4. Seiten implementieren: In der Reihenfolge der Seitenstruktur (Abschnitt 4). JEDE Seite folgt dem Section/Container-Muster. Jede Section nutzt <section className="section"> → <div className="container">.
5. Platzhalter-Inhalte: Fehlende Texte durch branchenspezifische, professionelle Platzhalter ersetzen. Fehlende Bilder durch thematisch passende Unsplash-URLs.
6. SEO & Metadata: Für jede Seite metadata export mit title, description, og:tags.
7. Accessibility Check: Semantisches HTML, ARIA, Keyboard-Navigation prüfen.
8. Qualitätscheck: Prüfe jede Seite auf: (a) Keine Inline-Styles, (b) Alle Sections in Section/Container, (c) Buttons nur über Varianten, (d) Typografie nur über System-Klassen, (e) Konsistente Abstände.
9. Performance Check: Unnötige Client Components zu Server Components refactoren.
10. Build & Lint: npm run build && npm run lint fehlerfrei. Bei Fehler: .next-Ordner löschen, erneut bauen.

7. Offene Fragen (mit Client klären)

Die folgenden Informationen fehlen und müssen mit dem Client geklärt werden:

• client.contact.email (contact): Wie lautet die offizielle Kontakt-E-Mail-Adresse?

WICHTIG: Für diese Felder darfst du NICHT raten. Frage den Client oder nutze Platzhalter-Werte mit klarer Kennzeichnung (z.B. "PLACEHOLDER: ...").

---

8. Definition of Done (Abnahme-Checkliste)

Bevor du die Implementierung als fertig markierst, MÜSSEN alle diese Punkte erfüllt sein:

Build & Code Quality

• npm run build läuft fehlerfrei durch (0 Errors, 0 Warnings)
• npm run lint meldet keine Fehler (0 Errors, Warnings OK)
• TypeScript strict mode aktiv, keine any types
• Alle Imports funktionieren, keine broken imports

Funktionalität

• Alle Seiten aus Seitenstruktur (Abschnitt 4) existieren und sind erreichbar
• Navigation funktioniert zwischen allen Seiten
• Alle CTAs ("Jetzt kontaktieren", "Mehr erfahren") funktional
• Kontaktformular (falls vorhanden) validiert Eingaben

Strukturelle Integrität

• KEINE Inline-Styles (style={{ }} / style="") im gesamten Code (Ausnahme: dynamische CSS-Variablen)
• JEDE Section nutzt <section className="section ..."> → <div className="container ...">
• KEIN Content direkt in <main> oder <div> ohne Section/Container-Wrapper
• ALLE Buttons nutzen .btn + Variante (.btn-primary, .btn-secondary, .btn-outline, .btn-ghost)
• KEINE eigenen bg/text-Farbkombinationen auf Buttons
• KEIN Lorem Ipsum – nur branchenspezifische Platzhalter-Texte

Design & Styling

• Alle Farben kommen aus globals.css Custom Properties (keine Hardcoded Colors)
• Alle Spacings nutzen Design Tokens (keine Magic Numbers, keine p-[47px])
• Typography nutzt Heading-Tags (h1–h6) oder .heading-* Klassen – KEINE harten Pixelwerte
• Brand-konform (Farben, Fonts, Tonalität)
• Visuelle Ruhe: Großzügige Abstände, keine gedrängten Sections
• Maximal 10 Tailwind-Klassen pro Element (sonst in CSS-Klasse extrahieren)

Responsive & Cross-Browser

• Mobile (320px - 767px): Layout funktioniert, Navigation collapsed
• Tablet (768px - 1023px): Layout angepasst
• Desktop (1024px+): Volle Breite, optimales Layout
• Touch-Targets mindestens 44x44px (Mobile)

Accessibility (WCAG AA)

• Semantisches HTML5 (header, nav, main, section, article, footer)
• Alle Bilder haben alt-Texte
• Farbkontraste min. 4.5:1 für Text, 3:1 für UI (automatisch geprüft)
• Keyboard-Navigation funktioniert (Tab, Enter, Escape)
• Focus-States sichtbar
• ARIA-Labels wo semantisches HTML nicht ausreicht

Performance

• Unnötige Client Components zu Server Components refactored
• Bilder nutzen Next.js <Image> Component
• Keine blocking Scripts in <head>
• framer-motion nur sparsam eingesetzt (nicht überall)

SEO

• Jede Seite hat metadata export (title, description)
• Open Graph Tags gesetzt (og:title, og:description, og:image)
• Strukturierte Daten (JSON-LD) für Organisation (Homepage)

Legal & Content

• Impressum-Seite vorhanden (falls in Seitenstruktur)
• Datenschutz-Seite vorhanden (falls in Seitenstruktur)
• Alle Texte auf de

9. Stop Conditions

In folgenden Situationen MUSST du stoppen und NICHT weitermachen:

1. Unklare Anforderungen: Wenn Spec-Felder "Nicht angegeben" enthalten oder unklar sind → Frage den Client (siehe Abschnitt 7).
2. Widersprüche: Wenn CLIENT_OVERRIDES gegen SYSTEM_SKILLS/UI_GUIDELINES verstoßen → Melde das Problem.
3. Fehlende Assets: Wenn Logo, Bilder oder andere Assets fehlen → Nutze Platzhalter mit klarer Kennzeichnung.
4. Build Errors: Wenn npm run build fehlschlägt und du es nicht beheben kannst → Melde den Fehler mit Stack Trace.

NIEMALS:

• Raten bei unklaren Requirements
• Globale Skills (SYSTEM_SKILLS/UI_GUIDELINES/DEFINITION_OF_DONE) ignorieren
• Neue Dependencies ohne Begründung hinzufügen
• UI-Templates oder Copy-Paste-Code nutzen
• Inline-Styles verwenden (style={{ }})
• Content ohne Section/Container-Struktur platzieren
• Buttons mit eigenen Farb-Kombinationen statt .btn-Varianten erzeugen
• Harte Pixelwerte für Schriftgrößen oder Abstände verwenden
• Lorem Ipsum oder generische Dummy-Texte einsetzen

---

Generiert von website-prototype-generator v2 am 2026-02-03.