Website Templates erstellen

Erstelle Templates für öffentliche Center-Websites (z.B. palais-vest.de) mit v0.

Was sind Website Templates?

Website Templates sind fertige Designs für Center-Websites – gleiche Seiten (Startseite, Shops, Events, Kontakt …), anderes Aussehen.

• Gleiche Struktur: Alle wichtigen Seiten (Start, Shops, Centerplan, Services, News, Impressum, etc.)
• Gleiche Inhalte: Centerplan, Chatbot und Daten kommen von CockpitOS
• Dein Design: Wie es oben, in der Mitte und unten aussieht – Farben, Bilder, Schrift

Du bestimmst das Aussehen, nicht die Technik. v0 hilft dir, ein neues Design zu erstellen.

Vollständige Architektur: Full-Site Template Architektur – Datenfluss, PageTypes, Registry, Workflow.

Globale Komponenten (bereits im Layout)

• AI Chat (Chatbot): ChatTrigger, FloatingAIIcon, SearchInterface, Consent – alles global eingebunden. Templates implementieren keinen eigenen Chatbot.
• Centerplan: WayfindingMap wird injiziert – Template stellt nur Slot/Layout bereit.

---

So erstellst du ein neues Template (3 Schritte)

Du brauchst keine technischen Vorkenntnisse. Kopieren, einfügen, beschreiben – fertig.

Schritt 1: Prompt kopieren

1. Öffne Website Template Prompt
2. Klicke auf „Prompt kopieren“ oder markiere den Block ab „WICHTIG: Nutzer verstehen“ und kopiere ihn

Schritt 2: In v0 einfügen

1. v0.dev öffnen → Neuer Chat
2. Zuerst Screenshots einfügen – z.B. von Websites, die dir gefallen:
   • Oben: großes Bild mit Center-Namen
   • Mitte: Kacheln für Shops oder Events
   • Unten: Kontakt, Öffnungszeiten, Impressum
3. Dann den Prompt einfügen
4. Optional mit eigenen Worten nachbessern, z.B.:
   • „Das Bild oben soll höher sein“
   • „Die Kacheln sollen größer und mit Schatten“
   • „Dunkleres Design, weniger bunt“

Du musst keine Fachbegriffe kennen – beschreibe einfach, wie es aussehen soll. v0 versteht deine Absicht und macht daraus das bestmögliche Ergebnis: modern, mit Animationen, hochwertig.

Tipp: Ein Screenshot pro Bereich (oben, Mitte, unten) funktioniert oft besser als eine ganze Seite.

Schritt 3: ZIP herunterladen und weitergeben

Wenn das Ergebnis passt: v0 → Download → als ZIP speichern.

Option A – Im Dashboard hochladen:

1. Dashboard → Templates → Template hochladen
2. Template-Typ: Website Template
3. ZIP-Datei hochladen
4. Name vergeben (z.B. „mein-neues-template“)
5. Einreichen → Template wird geprüft und übernommen

Option B – Per E-Mail schicken:
ZIP-Datei an dein Team schicken – sie laden es für dich hoch.

---

Technische Integration: Die Anbindung ans Dashboard und Preview-URLs übernimmt die Codebase – siehe Website Template Prompt (Technischer Hintergrund).

Template-Struktur (Full-Site)

Ein vollständiges Website-Template enthält pro Seite eine eigene Komponente:

components/templates/[template-name]/
├── index.tsx                    # Homepage
├── layout.tsx                   # Header + Footer (umschließt alle Seiten)
├── sections/                    # Wiederverwendbare Sections
│   ├── Header.tsx
│   ├── Hero.tsx
│   ├── Footer.tsx
│   └── ...
├── pages/
│   ├── shops.tsx
│   ├── shop-detail.tsx
│   ├── aktuelles.tsx
│   ├── news-detail.tsx, event-detail.tsx, offer-detail.tsx
│   ├── services.tsx, service-detail.tsx
│   ├── gastronomy.tsx, restaurant-detail.tsx
│   ├── wayfinding.tsx
│   ├── offices.tsx, parking.tsx, opening-hours.tsx
│   ├── impressum.tsx, datenschutz.tsx, kontakt.tsx
│   └── to-go.tsx
├── types.ts
├── DATA_REQUIREMENTS.md
└── IMPLEMENTATION_NOTES.md

Details und Props pro Seite: Website Template Prompt

Wichtige Anforderungen

• Gleiche Seitenstruktur wie CockpitOS (Home, Shops, Centerplan, Services, News + Unterseiten)
• Links mit {slug}-Prefix (z.B. /{slug}/wayfinding, /{slug}/shops)
• Server Component (kein 'use client' im Haupt-Template)
• next/link für interne Links
• next/image für Bilder
• Platzhalter für Centerplan – echte WayfindingMap wird bei Integration injiziert
• openingHours typisiert (kein any)
• Keine hardcoded Daten (alles aus Props)
• Fallbacks implementiert (für fehlende Daten)

Integration bestehender v0-Templates: Auch Templates ohne Slots können genutzt werden. Platzhalter (z.B. Centerplan-Seite mit statischem Bild) werden bei der Integration durch CockpitOS-Komponenten ersetzt.

v0 Power-Features

v0 mit Cursor nutzen

Du kannst v0 direkt in Cursor als Modell verwenden:

1. Cursor Settings → Models → OpenAI API Key
2. v0 API Key aus v0 Settings eintragen
3. Override OpenAI Base URL: https://api.v0.dev/v1
4. Add Custom Model: v0-1.5-md oder v0-1.5-lg

Dann generierst du direkt im Projekt statt in v0.dev.

Schrittweise generieren (optional)

Wenn du unsicher bist oder ein komplexes Design willst: Lass v0 Stück für Stück arbeiten:

1. Erst: Oben (Logo, Navigation) + unten (Kontakt, Impressum)
2. Dann: Startseite mit großem Bild und Kacheln
3. Dann: Übersichtsseiten (Shops, Events, Services)
4. Zum Schluss: Detailseiten für einzelne Shops, Events, etc.

Jeden Schritt als eigenen Prompt in v0 senden – mit dem gleichen CockpitOS-Prompt als Basis.

Dashboard: Template-Auswahl und Template-Inhalte

• Template-Selector: Im Dashboard unter Center → Website → Tab „Aktivierung“ kann pro Center ein Website-Template ausgewählt werden (z.B. CEV-AI-Theme, Standard).

• Template-Inhalte: Bei ausgewähltem Template erscheint der Tab „Template-Inhalte“ – dort werden pro Template konfigurierbare Texte gepflegt (Hero, Sections, CTAs, etc.). Das Formular wird schema-basiert aus apps/dashboard/src/lib/template-content-schemas.ts generiert. Neue Templates: Schema-Eintrag hinzufügen → Formular wird automatisch erzeugt. Platzhalter wie {{centerName}} werden dynamisch ersetzt. MEC Template D (Hero-Slider): Im Bereich Website → Hero-Slider liegt die Vorschau zuerst. Sie rendert einen Referenz-Canvas in den offiziellen Pixelmaßen pro Breakpoint (Mobil 390×380, Tablet 768×645, Desktop 1440×680) – identisch zur Live-Seite – und skaliert ihn per ResizeObserver in die Breite der Dashboard-Spalte (Maßstab ≤100 %, mindestens ~12 % für schmale Spalten). So bleiben Seitenverhältnis, Umbrüche und prozentuale Positionen redaktionell vergleichbar mit dem Live-Hero; der angezeigte Maßstab ist unter der Vorschau ablesbar. Maximale Textbreite (Titel und Beschreibung getrennt): Schmal / Standard / Breit für Redaktions-Layouts ohne CSS. Reiter: Hintergrund, Inhalt, Motiv, Extras inkl. Vorlagen (Local Storage).

Öffentliche Website: Kontakt- und Vermietungsformular (Resend)

Die Center-Website leitet Formular-Posts an das Dashboard weiter (/api/kontakt bzw. /api/vermietung → send-contact-inquiry / send-rental-inquiry). Empfänger-Logik:

Template	Konfiguration im Dashboard	Speicherort in themeOverrides.templateContent
Kaufland	Reiter „Seite: Kontakt“ / „Seite: Vermietung“	kaufland.kontakt.contactFormRecipient, kaufland.vermietung.recipientEmail
Goldbeck	Reiter „Kontaktformular (Anfahrt & Kontakt)“ / Vermietung	goldbeck.kontakt.contactFormRecipient, goldbeck.vermietung.recipientEmail
ILG	(kein separater Formular-Empfänger)	immer Kontakt-E-Mail der Center-Stammdaten
RGW (Deine Galerie)	Reiter „Seite: Kontakt“ (Formular) + „Kontakt: Impressionen“ (Galerie)	rgw.kontakt (u. a. Formular), rgw.kontaktImpressionen (Bilder & Texte; leere Kachel-Liste = Standard-Galerie)

Ist ein konfigurierbares Feld leer, gilt die Kontakt-E-Mail der Center-Stammdaten als Fallback.

v0 / Sonderformulare (z. B. Seifenkisten-Anmeldung): Zusätzliche Empfänger ohne neues Dashboard-Reiter-UI über templateContent.formRecipients — z. B. { "seifenkisten": "mu@schickma.de" }. Die v0-Proxy-Route sendet formKey: "seifenkisten" an POST …/send-contact-inquiry. Ein bloßes customRecipient im Body ohne Cockpit-Eintrag wird aus Sicherheitsgründen abgelehnt (kein offenes E-Mail-Relay).

RGW nutzt denselben Versandweg (/api/kontakt → send-contact-inquiry) wie Kaufland/Goldbeck; die Impressionen (Menü „Deine Galerie“ → /kontakt) sind im Dashboard unter Website → Kontakt: Impressionen mit Bunny-Upload und Kategorien pflegbar. Darunter auf derselben Seite erscheinen automatisch alle News mit Schalter „Baustellen-Tagebuch“ (Content → News bearbeiten); es gibt keinen separaten Galerie-Schalter dafür.

RGW – weitere Cockpit-Reiter (Auswahl):

AgencyOS / v0 / MCP (alle Templates): Pro Reiter liefert cockpit_agencyos_website_config_schema die exakten Pfade unter tabs[].fields — z. B. templateContent.goldbeck.hero.title, templateContent.mec-shopbox.bento.tiles oder customContent.ilg.anfahrtBoxes. Schreiben immer partial nach vorherigem GET.

Reiter	Zweck
Optionen (Seiten ein/aus)	templateContent.rgw.pageVisibility – deaktivierte Seiten → 404, keine Nav-/Footer-Links
Footer: Logo-Laufleiste	templateContent.rgw.footer.logoSlider – Shop-Logos oder manuelle Logos über dem Footer (Laufleiste), statt Text-Marquee
Kontakt: Impressionen	templateContent.rgw.kontaktImpressionen – Galerie auf Deine Galerie (/kontakt); Baustellen-Tagebuch-News (Cockpit: Schalter am News-Beitrag) erscheinen als Kacheln und im Block „Aktuelle Updates“ (Titel/Text optional: constructionUpdatesTitle, constructionUpdatesDescription)
Seite: Drinks & Snacks	Hero/SEO + Shop-Auswahl (customContent.rgw.drinksSnacks.shopIds); leer = Gastronomie-Themen
Seite: Anfahrt & Parken	Hero/SEO; Parken/ÖPNV zusätzlich unter Center → Parken
Galerie-Kompass	Hybrid-Centerplan aus dem Cockpit (Wayfinding); ohne Daten statische Kompass-Seite

Goldbeck – kein Referenz-Marketing auf leeren Centern: Ohne Einträge in den Goldbeck-Webseiten-Reitern zeigt die Startseite keine fest eingebauten Hero-Slides, Intro-Fließtexte oder Social-Überschriften aus der Vorlage; leere „Aktuelles“- und Social-Sektionen werden ausgeblendet. Die Vermietungsseite nutzt keine Weinheim-Referenztexte mehr, solange unter templateContent.goldbeck.vermietung keine redaktionellen Inhalte erkennbar sind; sobald dort mindestens ein relevantes Feld befüllt ist, dient die bisherige Referenzbasis wie gewohnt als Fallback für noch leere Felder (bestehende produktiv gepflegte Center). Header-Navigation und Footer bleiben grundsätzlich nutzbar.

Goldbeck – Seiten ein- und ausblenden: Unter Website → Inhalte ganz unten bei den Goldbeck-Reitern: „Optionen (Seiten ein/aus)“ (nur Template Goldbeck). Dort können einzelne öffentliche Seiten deaktiviert werden (Standard: alle aktiv). Die Einstellung liegt in templateContent.goldbeck.pageVisibility (nur explizit ausgeschaltete Seiten werden gespeichert). Header und Footer zeigen keine Links mehr auf deaktivierte Seiten; direkte URLs liefern 404. Es werden keine Inhalte gelöscht – nur die Sichtbarkeit gesteuert.

Goldbeck – Schriftfarbe Inhaltsseiten: Im selben Reiter Optionen optional Schriftfarbe Inhalt (templateContent.goldbeck.typography.contentTextColor). Standard leer → Primärfarbe des Centers für Überschriften/Text im Hauptbereich (Weinheim unverändert blau). Mit Wert z. B. #374151 wirken Datenschutz, Öffnungszeiten usw. weniger „rot“, während Header/Footer/Markenflächen die Center-Farbe behalten.

Hinweis: Bei Kaufland wurden historisch fehlerhafte Verschachtelungen in der JSON-Konfiguration mit ausgeräumt; nach einem Deploy ggf. einmal Website speichern im betreffenden Reiter, damit alles auf der erwarteten Struktur liegt.

ILG – Navigation: Die v0-Seiten mappen v0-Pfade (z. B. „Aktuelle News“, „Geschäfte“) über ilg/lib/ilg-paths auf die CockpitOS-Routen (z. B. /aktuelle-news → /aktuelles); Links und „Zurück“-Hinweise werden mit centerSlug und Host-Header per generatePath gebaut, damit Slug-Routing, Subdomain und Custom Domain stimmen. Die Seite Aktuelles (/aktuelles) nutzt im ILG-Template die eigene ILG-Ansicht (Hero + Kachelraster nur News) im ILG-Layout (Header/Footer). Angebote (/angebote), Jobs (/jobs) und Events (/events) haben je eine eigene Übersichtsseite. Hauptmenü: Hat ein Eintrag nach den ILG-Schaltern im Cockpit (z. B. ausgeblendete Angebote/Jobs) keine sichtbaren Untermenüpunkte mehr, wird kein Dropdown (Desktop) und kein Aufklapp-„+“ (Mobil) angezeigt – der Punkt verhält sich wie ein normaler Link. Bleibt genau ein Unterpunkt und er führt zur gleichen Route wie der Tab selbst (z. B. GESCHÄFTE mit nur Geschäfte nach Ausblenden von Ärzte & Gesundheit), wird das Dropdown ebenfalls unterdrückt, damit nicht doppelt gewirkt wird.

ILG – Header (Mobil): Social-Media-Icons (Center-Stammdaten bzw. templateContent.ilg.header, sofern showSocialIcons nicht deaktiviert ist) stehen in der fixierten Kopfzeile auch auf kleinen Bildschirmen neben Logo und Menü; sie sind nicht nur im aufgeklappten Menü gebündelt. Die Suche (Icon in der Kopfzeile bzw. Eintrag im Mobilmenü) öffnet ein Overlay (unter document.body, hoher z-index); die Anfrage läuft mit der Center-ID aus dem Layout an /api/search. Such-Icon und Leiste im Overlay nutzen die Primärfarbe des Center-Brandings (primary / primary-foreground).

ILG – Header (Desktop, volle Breite & Promotion): Die Hauptleiste ist über die volle Viewport-Breite angelegt (ohne max-w-screen-xl); Logo und Nav-Abstände sind etwas kompakter, damit die Hauptnavigation mehr horizontalen Raum hat. Der CTA „Fläche flexibel mieten“ (Desktop und Mobilmenü) sowie die Hero- und Akzentflächen der Seiten /promotionflaeche und /promotionflaeche-mieten (inkl. Formular-Buttons) nutzen die feste Farbe #821550, unabhängig vom globalen Theme-primary – Konstante ILG_PROMOTION_BRAND_HEX in ilg/lib/ilg-promotion-brand.ts.

ILG – Startseite (Hero-Slider): Unter Website → Startseite (ILG-Template) lassen sich mehrere Hero-Slides anlegen (Slide hinzufügen, Reihenfolge, bis zu zehn Folien). Die öffentliche Hero-Slideshow dimmt die Bilder nicht mit einem Vollflächen-Overlay (Textballon bleibt im eigenen, halbtransparenten Kreis lesbar). Hero-Höhe: Im selben Reiter wählbar (kompakt, Standard, hoch, extra hoch); gespeichert als templateContent.ilg.hero.sectionHeightPreset, technisch als responsive clamp()-Höhe des Bildbereichs (Mindesthöhen auf 8px-Raster, Standard = bisheriger Default). Technisch werden die Slides als templateContent.ilg.hero.slides gespeichert; die ältere Struktur slide1–slide3 bleibt parallel gepflegt und wird von der Website genutzt, solange kein nicht-leeres slides-Array existiert (kein Datenbruch für bestehende Center). Sind in einem Slide Headline, Subline und Fließtext leer, bleibt die Website ohne Text in der Magenta-Kugel (kein erzwungener v0-Platzhalter). Fehlt unter der Legacy-Logik ein kompletter Slide im Cockpit, gelten weiter die Template-Standardbilder/-texte für diesen Slot.

ILG – Job-Detail (/jobs/[id]): Stellen-Details nutzen dieselbe ILG-Detailansicht wie News und Angebote (IlgContentDetailClient), nicht das generische Basistemplate-Overlay. Der farbige Hero oben nutzt das Seitenverhältnis 2560 × 1182 (Breite : Höhe). Das Job-/Stellen-Logo unter dem Hero wird proportioniert begrenzt (object-contain), damit breite Markenlogos nicht mehr die ganze Fläche füllen. Eine Meta-Box (Gehalt, Standort, Shop) erscheint nur, wenn mindestens ein Eintrag gepflegt ist — ohne Inhalt gibt es keine leere graue Karte. Ist eine PDF-Stellenanzeige im Cockpit hinterlegt, erscheint ein zusätzlicher Button „PDF herunterladen“.

ILG – Anfahrt (/anfahrt): Unter Website → Seite: Anfahrt pflegen Sie Hero (Seitentitel, Untertitel, optionales Hero-Bild), SEO und im Bereich „Anreise-Karten & Parken“ die vier Infokarten (Überschrift + Stichpunkte je Karte) sowie Überschrift und Text des Parken-Blocks – pro Center, gespeichert unter customContent.ilg.anfahrtBoxes (Page-Content pageType: anfahrt). Auf der Website erscheinen nur Karten mit mindestens einem Stichpunkt; leere Spalten und unveränderte Template-Platzhalter (z. B. „Mit der Bahn …“ ohne eigene Pflege) werden nicht angezeigt. Beim Speichern im Cockpit werden leere Karten nicht mehr mit Standardtext befüllt. Feld „Beschreibung“ (HTML): bleibt optional; ist es befüllt, ersetzt der HTML-Block unter der Karte die Karten und den Parken-Teil (Vollersatz, wie bisher). Hero-Titel/-Untertitel allein schalten die Karten nicht ab. Der Reiter „Anfahrt & Parken“ (parkingConfig) wird von dieser ILG-Route nicht ausgelesen.

ILG – Suche (/search): Das Lupen-Icon im Header öffnet die Suchergebnisseite (Geschäfte, News, Angebote, Events, Services, Jobs). Mindestens 2 Zeichen; Treffer werden nach Typ gruppiert. URL-Parameter ?q=… für direkte Links und Teilen. Vorschaubilder (Shop-Logos, Angebots-Teaser) werden in der Ergebnisliste vollständig sichtbar dargestellt (object-contain, nicht beschnitten).

ILG – Geschäfte / Filialen (Cover & Logo): In der Shop-Übersicht und auf der Detailseite gilt für Filialen: Es wird nur ein eigenes Filial-Cover (ShopLocation.coverImage) als Stimmungsbild angezeigt. Hat die Filiale kein Cover, erscheint an dieser Stelle das Shop-Logo der Kette — nicht das Cover der Kette. Einzelshops nutzen weiter ihr eigenes coverImage.

ILG – Seiten ein/aus (Wohnen, Parken & Galerie): Wohnen, Parken und Galerie aktivieren Sie im Reiter „Seiten“ unter Spezial-Seiten (Schalter „Wohnen (ILG)“ / „Parken (ILG)“ / „Galerie (ILG)“) — dieselbe Einstellung ist auch unter Optionen (Seiten & Recht) verfügbar (pagesConfig und templateContent.ilg.pageVisibility werden beim Speichern synchronisiert). Standard: aus; nur bei Aktivierung sind /wohnen, /parken und /galerie erreichbar (sonst Next.js-404, oft mit HTTP 200). Im Header erscheinen Wohnen/Parken im Dropdown des Center-Namens (erster Menüpunkt), direkt nach Jobangebote — nicht als eigene Hauptnav-Punkte. Galerie erscheint bei Aktivierung unter NEWS im Header und im Footer. Weitere ILG-Seiten (Gutschein, Datenschutz, …) weiterhin über Optionen oder Seiten.

ILG – Lageplan / Centerplan: Unter Website → Optionen (Seiten & Recht) den Schalter „Lageplan / Centerplan“ (templateContent.ilg.pageVisibility.lageplan). Standard: an (Navigation, Startseiten-Kachel, Routen /lageplan bzw. /centerplan, Cockpit-Reiter „Seite: Centerplan“). Aus blendet Lageplan-Links und die zugehörigen Website-Reiter aus; die Route liefert 404. Center ohne Wayfinding-Plan (z. B. EKZ, Helvetia Parc): Lageplan ist standardmäßig aus, bis Sie ihn explizit aktivieren (Name/Slug-Erkennung im System).

CMS-Texte (alle Templates, inkl. ILG): Fließtexte aus dem Cockpit/WYSIWYG werden auf der Website über @mall-os/html-plain-text und SafeHtmlContent bereinigt: HTML-Entities decodieren, Steuerzeichen (C0/C1, Zero-Width) entfernen, HTML sicher rendern. Sichtbare <p>-Reste oder „komische“ Zeichen im Frontend deuten meist auf Rohdaten außerhalb dieser Pfade hin (z. B. reine Template-Strings im Hero-Slider — dort ebenfalls bereinigt).

ILG – Wohnen (/wohnen): Nur für Center mit aktivierter Seite. Inhalte unter Website → Seite: Wohnen (templateContent.ilg.wohnen): Intro, Liste der Wohnungsangebote (Bild, Mietdaten, Exposé-Link, Ansprechpartner), optionales Kontaktformular am Seitenende. Leerzustände auf der Live-Website sind besucherfreundlich formuliert (ohne Cockpit-Hinweise).

Öffentliche Texte (alle Templates): Leerzustände und Platzhalter auf der Live-Website richten sich an Besucher, nicht an Redaktion (keine Hinweise wie „im Cockpit/Dashboard pflegen“). Betroffen u. a. ILG, RGW, Ree Carrée, Kaufland, Goldbeck, MEC (shared/ShopBox), Social Lounge One, Event Lounge One sowie Basis-Routen (Kontakt, AGB, eingebettete Seiten). Redaktions-Hilfen stehen ausschließlich im Dashboard.

ILG – Parken (/parken): Eigene Parken-Seite, getrennt von /anfahrt (Anfahrt-Template und anfahrtBoxes bleiben unverändert). Pflege unter Website → Seite: Parken: Seitentitel, Parkgebühren-Tabelle, Partner-Spalten (Logos/Texte, z. B. Handelspartner-Aktionen) und optionale Fotogalerie für Parkinfos — analog zu Referenz-Inhalten auf bestehenden Center-Websites.

ILG – Galerie (/galerie): Veranstaltungs- und Impressionen-Fotos (z. B. Ring Center). Nur mit aktivierter Seite erreichbar. Pflege unter Website → Seite: Galerie (templateContent.ilg.galerie): Seitentitel, Einleitung, manuelle Kacheln (Upload) sowie optional Bilder aus Veranstaltungen (veröffentlichte Events: Titelbild + Galerie aus dem Cockpit). Besucher können nach „Alle“, „Veranstaltungen“ und „Weitere Impressionen“ filtern; Klick öffnet eine Lightbox.

ILG – Rechtstexte (parametrisiert): Datenschutz (Haupttab), Haftungsausschluss und Cookie-Richtlinie (EU) nutzen für alle ILG-Center denselben Wortlaut im Template; ersetzt werden Center-Name, Website-URL, Kontakt-E-Mail und verantwortliche Stelle aus den Center-Stammdaten. Optional kann im Reiter Seite: Datenschutz der Haupttab per Freitext überschrieben werden (sonst Template-Standard). Details und Platzhalter siehe Reiter Optionen (Seiten & Recht).

ILG – Jobs (/jobs): Die Übersicht bezieht ihre Einträge aus dem Cockpit (Aktuelles → Jobs, veröffentlichte Stellen). Links führen zur Detailseite /jobs/[slug|id] bzw. bei gesetzter externen URL zur Bewerbung außerhalb der Website. Hero, Teaser-Text und SEO pflegen Sie unter Website → Seite: Jobangebote (Page-Content pageType: jobs). Einleitungstext unter dem Hero kommt nur aus der Seitenbeschreibung dieses Page-Contents; es gibt keinen festen Template-Hinweis mehr auf Cockpit oder Center-Management. Ist eine Stelle mit einem Shop (eigenständig oder Filiale/Kette) verknüpft, erscheint das Shop-Logo in der Kachel; ansonsten das Job-Logo aus der Pflege.

ILG – Angebote-Übersicht (/angebote): Hero (inkl. optionalem Hintergrundbild), Untertitel und SEO unter Website → Seite: Angebote. Die Kachel-Liste ergänzt weiterhin CMS-Angebote und feste Themenkacheln je nach Seitenkonfiguration. Angebots-Detail: Die Überschrift zeigt nicht doppelt „Angebot · Angebot“; Aktions- und Veröffentlichungsdaten werden auf der Detailseite nicht angezeigt (nur Rabatt und Shop, falls gepflegt). Auf Übersichtskacheln (/angebote) erscheinen ebenfalls keine Datumszeilen.

ILG – Service & Gesundheit (/services, /offices): Hero, Teaser und SEO für die Serviceeinrichtungen-Übersicht pflegen Sie unter Website → Seite: Service & Einrichtungen (pageType: service). Für Ärzte & Gesundheit (/offices) nutzen Sie Website → Seite: Ärzte & Gesundheit (pageType: offices). Ohne CMS-Einträge gelten die bisherigen Standardüberschriften; bei Ärzte & Gesundheit bleibt der zweizeilige Fallback-Titel erhalten, solange kein eigener Seitentitel gesetzt ist.

ILG – Hausordnung (/hausordnung): Unter Website → Seite: Hausordnung pflegen Sie Hero (Seitentitel, Untertitel, optionales Hero-Bild), SEO und die Seitenbeschreibung (HTML möglich, wie bei anderen Seiten). Ist die Seitenbeschreibung befüllt, bildet sie den alleinigen Hauptinhalt unter dem Hero (keine Template-Einleitung, keine Regelblöcke 01–08). Sind nur Titel/Untertitel aus dem Cockpit gesetzt, erscheinen die Regelblöcke ohne zusätzliche Einleitung. Der optionale Einleitungstext (unter dem Seiten-Reiter, Block „Einleitungstext“) wird auch dann angezeigt, wenn Hero/Titel bereits aus dem Cockpit kommen; für nur eigenen Fließtext ohne Regelblöcke 01–08 ist die Seitenbeschreibung maßgeblich. Ohne Cockpit-Texte gelten die Standard-Einleitung und die Regelblöcke; der Kontakt-Hinweis am Seitenende bleibt.

ILG – Öffnungszeiten (/oeffnungszeiten): Die Passage wird als Wochentabelle (Mo–So) je Zeile dargestellt (keine kompakte „Kernzeiten“-Einzeile mehr). Fußnote unter der Tabelle ist besucherorientiert formuliert (Kernzeiten der Passage vs. individuelle Ladenzeiten). Sonderöffnungen / besondere Tage des Centers erscheinen – sofern Daten vorliegen – direkt daneben (Desktop: rechts neben der Tabelle; Mobil: darunter). Geschäfte mit anderen Kernzeiten oder strukturierten Sonderöffnungen (specialDays): darüber liegt ein hervorgehobener Kasten mit Schnellliste; darunter die vollständige Aufstellung Geschäfte / Services / Büros. Büros & Praxen: liegen im Cockpit strukturierte Wochenzeiten vor, erscheint pro Wochentag eine Zeile; für Geschäfte/Services bleibt die kompakte Textform, jedoch ohne angehängtes „Uhr“ in der ILG-Ansicht.

ILG – Teilnahmebedingungen (/teilnahmebedingungen): Pflege im Cockpit unter Website → Seite: Teilnahmebedingungen (Hero, SEO, Seiteninhalt im Rich-Text-Editor – Absätze, H2/H3, Listen, Fett, Links; gleiche Technik wie bei ausführlichen Shop-Beschreibungen). Ist der Inhalt leer, nutzt die öffentliche Seite die eingebaute Standardvorlage (Gewinnspiel-Hinweise). Bereits als Plaintext gespeicherte Texte werden beim Öffnen im Editor in Absätze umgewandelt; nach dem Speichern liegt HTML in der Datenbank. Die Route ist für ILG wie für MEC-Templates aktiv (kein 404 nur wegen Template-Familie). Beim Speichern wird derselbe pageType wie im Dashboard verwendet (teilnahmebedingungen); die zentrale Page-Content-API des Cockpits akzeptiert ihn neben den übrigen Seiten-Reiter-Typen.

ILG – Shops & Services & Inhalte: Im Template-Manifest sind u. a. shops, shop-detail, services, service-detail und content-detail hinterlegt. Geschäftsübersicht und Shop-Detail erscheinen im ILG-Stil (Hero, Kacheln, Detail mit Kontaktzeilen; Shop-Detail: bei gesetztem Titelbild im Cockpit (coverImage) links als Stimmungsbild in der Kachel mit object-cover, Logo rechtsbündig über dem Shopnamen) mit Cockpit-Daten, nicht mit der generischen ShopsPageClient-/ShopDetailClient-Oberfläche. Auf kleinen Bildschirmen bietet die Geschäftsübersicht zusätzlich eine Textsuche (Name, Kategorie, Etage, Kurz-/Langbeschreibung), horizontal scrollbare Kategorie-Chips mit größeren Tap-Zielen und eine Listenansicht pro Shop (Logo, Text, Chevron); ab sm bleibt das Kachelraster. Services-Übersicht (/services, Nav „Serviceeinrichtungen“) zeigt alle Einträge in einem Logo-/Icon-Kachelgitter ohne Kategorie-Filter; ein Klick öffnet ein Modal mit Icon, Titel und Beschreibung (bevorzugt Langtext, sonst Kurzbeschreibung; HTML aus dem Cockpit wird wie üblich sanitisiert). Service-Detail entsprechend. News- und Angebots-Detailseiten unter /aktuelles/... nutzen dieselbe ILG-Detailansicht (content-detail) mit zweispaltigem Aufbau (Titel und Text links, Teaserbild rechts, orientiert am MEC-Angebots-/Nachrichten-Detail; Galerie optional darunter in voller Breite). Event- und Job-Detailseiten nutzen ebenfalls content-detail, mit Hero-Bereich oben und Bild im Anschluss wie bisher. Überall gilt: ILG statt generischem ContentDetailClient (Basistemplate mit extrahiertem SiteHeader).

ILG – Footer (untere Leiste): Unter Website → ILG: Header & Footer sind Verwaltungstext (footer.managementBannerText) und zwei Partner-Logos (Bunny) einstellbar. Auf der Seite erscheinen die Logos weiß (Filter) und mit vertikaler Trennlinie; ohne Upload nutzt das Template SVG-Platzhalter. Der Link Cookie-Richtlinie (EU) führt auf /cookies; das ILG-Template bringt dafür eine eigene Seite mit (v0-Pfad /cookie-richtlinie-eu wird ebenfalls auf /cookies abgebildet, ohne Umleitung auf die Datenschutzseite).

ILG – Seite „Über uns“ (/ueber-uns): Unter Website → Seite: Über uns pflegen Sie den Hero (Seitentitel, optionaler Untertitel, optionales Hero-Bild als Hintergrund), danach auf hellem Grund die Seitenbeschreibung (Feld „Seitenbeschreibung (unter dem Hero)“), SEO sowie die ILG-Zusatzkarten im selben Reiter: Fakten-Zeile (drei Kennzahlen), Story-Block (Eyebrow, Überschrift, zwei Absätze, Story-Bild – ohne eigenes Bild wird optional das Hero-Bild genutzt, sonst ein Standardmotiv), Kontakt-Hinweis mit Link zum Kontaktformular und Signaturzeile. Technisch: pageType: ueber-uns in der Page-Content-API; Zusatzdaten unter customContent.ilg.ueberUns. Ohne individuelle Einträge gelten sinnvolle Standardtexte der ILG-Vorlage.

ILG – Center Gutschein (Guthabenabfrage): Unter Website → Seite: Center Gutschein tragen Sie den Wunscherfüller Center-Code ein (z. B. wunscherfueller-kpn, wunscherfueller-lpl – kein Iframe, kein voller Skript-Tag) und pflegen dort u. a. den Bild-Text-Banner (linkes Bild per Upload oder URL, Überschrift und Absätze, teilnehmende Shops, CTA-Texte, AGB-Link). Speicherort Bannerbild: templateContent.ilg.gutschein.bannerImage; leer = Standardmotiv der Vorlage. Die Seite Der Center Gutschein bindet daraus die Guthabenabfrage (ACG/Wunscherfüller) ein; erklärender Text und Eingabehilfen kommen nur aus dem Widget bzw. der ACG-Einbettung – unterhalb gibt es keinen zusätzlichen statischen Erklärblock mehr. Technisch muss das eingefügte Modulskript die feste Element-ID wdg_script tragen (Vorgabe ACG; sonst würde das Widget fälschlich Ressourcen von der eigenen Website-URL laden statt von acg.tp-de.net → leere/graue Fläche, 404 in der Konsole). Ohne gültigen Code (templateContent.ilg.gutschein.wunscherfuellerCode) wird der Abschnitt Guthabenabfrage auf der öffentlichen Seite nicht dargestellt (kein Platzhalter für Besucher).

ILG – Seite „Promotionfläche mieten“: Unter Website → Seite: Promotionfläche mieten pflegen Sie Hero (Titel, Untertitel, optionales Hintergrundbild) und SEO (pageType: promotionflaeche); dieselben Inhalte erscheinen auch im Hero der Kurzroute /promotionflaeche (Kontaktformular). Zusätzlich können Sie ein Bild für den runden Ablauf-Kreis (die vier Schritte) hochladen. Speicherort: templateContent.ilg.promotionFlaeche.circleImage. Ohne Bild bleibt die bisherige einfarbige Kreisfläche in der Promotion-Farbe #821550 (siehe ilg/lib/ilg-promotion-brand.ts).

ILG – Centerplan (/centerplan): Die Seite nutzt dieselbe Wayfinding-Oberfläche wie das Basistemplate (interaktive Karte bzw. Gesamtübersicht), sobald mindestens eine Etage im Cockpit unter Centerplan & Wegfindung eine Kartengrafik (SVG oder Bild) hat. Hero (Titel, Untertitel, optionales Hintergrundbild) und SEO pflegen Sie unter Website → Seite: Centerplan / Lageplan. Ohne solche Grafik können Sie unter Website → ILG: Lageplan-Bild (Fallback) ein statisches Plan-Bild hinterlegen (templateContent.ilg.lageplan.fallbackImage); das wird dann auf der Seite „Lageplan“ angezeigt. Die Ansicht Gesamtübersicht wird weiter über Website → Centerplan (centerplanConfig.layoutMode = overview) gesteuert.

MEC ShopBox: Geschäfte-Seite

Auf der öffentlichen Seite Geschäfte öffnet ein Klick auf eine Shop-Kachel ein scrollbares Modal mit Logo, Kategorie, Etage, Kontakt (Telefon, E-Mail, Website), Öffnungszeiten und der vollständigen Shop-Beschreibung – ohne Link zur separaten Detailseite. Auf Highlights (News, Events, Angebote, Jobs) gilt dasselbe: Klick auf eine Kachel zeigt den gesamten CMS-Text im Modal, nicht nur einen Teaser und keinen Sprung zu /aktuelles/….

MEC ShopBox: Öffnungszeiten-Seite

Die Seite Öffnungszeiten nutzt dasselbe Karten-Layout wie die Geschäfte-Seite (Logo links, Pastell-Bereich rechts, Raster). Oben erklärt ein Block „Passage & Zugang“, dass die Passage in der Regel zugänglich ist und die Geschäfte die maßgeblichen Öffnungszeiten haben. Vom Center im Cockpit gepflegte Zeiten erscheinen nur als zusätzlicher Hinweis, wenn Daten vorliegen. Darunter folgen Geschäfts-Öffnungszeiten und ggf. Services & weitere Standorte.

Header-Pille „Öffnungszeiten“: Statische Beschriftung (kein Live-Status wie „Jetzt geöffnet“ / „Bis 23:59“). Öffnet ein Modal mit den Center-Zeiten (Mo–So zeilenweise, ohne Hervorhebung des heutigen Tages). Kurzer Hinweis und Button verweisen auf die Seite Öffnungszeiten mit den Geschäftszeiten. Durchgehende Öffnung (24h) wird als „Durchgehend geöffnet“ statt technischer Uhrzeiten angezeigt.

Kontakt (/kontakt): Ansprechpartner-Karten erscheinen nur, wenn im Cockpit Name und E-Mail hinterlegt sind. Ohne Einträge gibt es keinen Hinweis-Kasten mit Dashboard-Anleitung für Besucher.

Offene Punkte

• Kontaktformular – Mail-Versand: Die Kontaktsektion (z.B. CEV-AI-Theme ContactSection) zeigt ein Formular (Name, E-Mail, Nachricht) und reCAPTCHA-Platzhalter. Der tatsächliche Mail-Versand ist noch nicht implementiert. Geplant: API-Route für Formular-Submit, reCAPTCHA-Validierung, Empfänger aus centerConfig.contact.email oder konfigurierbar. Relevant für alle zukünftigen Templates mit Kontaktformular.

Weiterführende Dokumentation

• Website Template Prompt – Vollständiger Prompt für v0
• Template Scaffold – Referenz-Struktur
• Review Checkliste – Checkliste für Review

v0 allgemein (offizielle Quellen): v0 Instructions, Design Systems, Vercel: How to prompt v0. Kurze CockpitOS-Tipps (Sources, Cursor): Template hochladen.

Nicht verwechseln: Wer eine eigenständige Website/App gegen die öffentliche Dashboard-API baut (ohne ZIP-Upload ins Cockpit), nutzt den Developer Guide — API-Vertrag (Read) („Copy-Paste: Kontext für v0 / KI“) — das ist ein anderer Workflow als dieser ZIP-Template-Prompt.