Center-Website App – Übersicht

Die Center-Website ist die öffentliche, mehrsprachige Web-App für Shopping Center im cockpitOS-Ökosystem. Pro Center wird eine eigene Instanz über Subdomain ({slug}.cockpit-os.de) oder Custom Domain (z. B. www.palais-vest.de) ausgeliefert – eine App, viele Center.

---

Was ist der Feature-Katalog?

Der Feature-Katalog listet alle Funktionen und Bereiche der Center-Website-App mit Versionierung:

• Übersicht: Welche Seiten, Module und technischen Features es gibt
• Versionierung: Der Katalog wird mit der Dokumentation versioniert (siehe Versionierung)
• Showcase: Ideal für Vertrieb, Onboarding und Release-Notes

---

Schnellzugriff

Bereich	Kurzbeschreibung
MEC Template A (Rot)	Legacy-Startseitenstruktur, templateContent-Felder
Feature-Katalog	Vollständiger Katalog aller Features
SEO, AI-Sichtbarkeit & GEO	Erklärung zu SEO, lokaler Suche (Geo), GEO und AI-Sichtbarkeit
FAQs auf der Services-Seite	Anleitung: FAQ-Bereich pro Center befüllen (AEO/GEO/SEO)
Versionierung	Wie Versionen der Doku (und des Katalogs) gepflegt werden
Medien & Performance (Redaktion)	Bilder/Videos, Dateigröße, HandBrake – für Content-Teams

---

Technische Einordnung

• Stack: Next.js (App Router), React, TypeScript
• Hosting: Multi-Tenant (Subdomain oder Custom Domain pro Center)
• Daten: Inhalte kommen aus dem cockpitOS-Dashboard (API)
• Apps: apps/center-website im Monorepo

Weitere technische Details finden sich im Developer Guide und in den Templates.

Barrierefreiheit (BFSG / WCAG) – technische Leitplanken

Für die öffentliche Center-Website gelten u. a. folgende technische Vorgaben im Code (Root-Layout und geteilte Bundles betreffen alle Center-Templates):

• Viewport: Zoom darf nicht per maximum-scale=1 / user-scalable=no blockiert werden (u. a. WCAG 1.4.4). Das Root-Layout setzt nur width=device-width, initial-scale=1 und viewport-fit=cover wo nötig.
• Formulare / Suche: Sichtbare Eingabefelder ohne sichtbares Label erhalten einen programmatischen Namen (z. B. aria-label), z. B. in RotatingSearchInput (Prop inputAriaLabel, Standard: „Suche“).
• Wayfinding / Centerplan: Klickbare Legenden-Einträge sind als <button> innerhalb von <li> umgesetzt, nicht als role="button" auf der Liste. Etagen-Umschalter nutzen zusätzlich ein sprechendes aria-label neben der Kurzbezeichnung (UG/EG/…).

Schwächere Endgeräte (z. B. ältere Tablets)

Die Basis-Startseite (CenterHomepage / HeroSection) passt die Darstellung clientseitig an, wenn eine Kombination aus Zugriffshilfen („Bewegung reduzieren“), Datensparmodus, wenig RAM (deviceMemory < 4, wo der Browser es meldet), wenigen CPU-Kernen (≤ 3) oder sehr langsamem Netz (effectiveType 2g / slow-2g) erkannt wird:

• Animierter Seitenhintergrund bleibt dann bei statischen Verläufen (keine „Orbs“, kein Maus-Gradient, kein spin).
• Hero-Videos werden durch das Poster-/Hero-Bild ersetzt (wenn konfiguriert); laufende Videos nutzen preload="none" statt frühem Metadaten-Download.
• Framer-Motion-Animationen werden reduziert bzw. umgangen, wenn der Nutzer systemweit „Bewegung reduzieren“ aktiviert hat oder die obige Heuristik greift.

Redaktionell hilft ein scharfes, komprimiertes Poster für jedes Hero-Video (siehe Medien & Performance).