MEC Template A – Subpages-Checklist

Diese Checkliste dokumentiert den Status der 1:1-Replikation der Subpages von MEC Template A gegenüber dem Original. Anders als bei der Homepage sind hier DOM-Struktur und CSS-Klassen explizit gleichzuziehen, nicht nur die optische Wirkung.

Quellen

• Original-Markup (Smarty/PHP): mec-templates/site_templates/templates/template_a/*.tpl
• Original-CSS (≈ 3777 Zeilen): mec-templates/sites/assets/css/template_a2.css
• Foundation-CSS in Cockpit: apps/center-website/components/templates/mec-template-a/template-a-pages.css
• Subpage-Hero: apps/center-website/components/templates/mec-template-a/components/subpage-hero.tsx

Pattern (Original-DOM)

Die meisten Subpages folgen dem Schema aus master.tpl:

<!-- optionaler Subpage-Hero -->
<div class="mobile-header">{$pageTitle}</div>
<div class="flexslider-container" id="slider-wrapper">
  <div class="flexslider"><ul class="slides">…</ul></div>
  <div class="slider-navigation">…</div>
</div>

<!-- Inhaltsbereich -->
<div class="content-white {$slug}">
  <div class="main {$pageClass}">
    {$content}
  </div>
</div>

Die Container sind also IMMER:

• .content-white – weißer Hintergrund-Wrapper
• .main – zentrierter Container, max-width: 1060 px, padding: 0 30 px
• ggf. .content-cms, .geschaefte-a-z, .indent_top, .indent_bottom – Modifier

Status-Matrix

Subpage	Status	Priorität	Bemerkungen
geschaefte-a-z	✅ 1:1	–	.shop-list mit column-count: 2, .stripe-Buchstaben, alphabetisch sortiert.
service	✅ 1:1	–	.service > .icon + .titel + .untertitel, 4×24% Grid.
jobs	✅ 1:1	–	.job > .job-title h2 + .job-subtitle (Akkordeon) + .job-content.
gutschein / einkaufsgutscheine	✅ 1:1	–	Generische content-cms-Struktur mit <h1> + Texten.
impressum	✅ 1:1	–	content-cms mit ImpressumPageClient (contentOnly).
datenschutz	✅ 1:1	–	content-cms mit DatenschutzPageClient (contentOnly).
teilnahmebedingungen	✅ 1:1	–	Generische content-cms-Struktur.
rechtliche-hinweise	✅ 1:1	–	Generische content-cms-Struktur.
oeffnungszeiten	✅ 1:1	–	#times-weekdays Tabs + #times-shops mit .shop-time/.lines/.time-wrapper + #times-chars Char-Liste. Width/Right-Berechnung aus getOpeningHoursBarSegments (Fenster 5–22 Uhr, 17 Slots). Sonderöffnungszeiten: MecSpecialDaysGrid oben rechts neben der Center-Zeile (h2), optisch hervorgehoben (prominentAside, Rahmen/Akzent), wenn im Cockpit zukünftige Termine gepflegt sind.
nachrichten (Aktuelles)	✅ 1:1	–	4er-Grid (#news-left, …). Cockpit: unter /nachrichten gemischtes Aktuelles (News + Events + Angebote + Jobs). ILG /aktuelles: nur News; eigene Routen für Angebote/Jobs/Events.
angebote	✅ 1:1	–	.offers.multi > ul > .offer-item in 4er-Gruppen + Inline-.product-details (Klick öffnet, klickt-Schließen).
impressionen	❌ entfällt	–	Subpage existiert weder im Original-Template A noch im Cockpit-Template – nichts zu refactoren.
kontakt	✅ 1:1	–	#contact-head mit .address + .name (Centermanager) + .links und #contact-form-element mit allen Original-Feldern. Spam-Schutz: Cloudflare Turnstile (NEXT_PUBLIC_TURNSTILE_SITE_KEY + TURNSTILE_SECRET_KEY) statt Google reCAPTCHA.
anfahrt	✅ 1:1	–	#map-router mit Leaflet+OSM (Höhe 650 px, Border-Bottom rot wie Original) + .verkehrsmittel-Liste mit .titel + .textblock. Center-Koordinaten aus wayfindingMap.latitude/longitude.
einkaufswelt	✅ 1:1 (Hybrid)	–	#centerplan Vollbild-Layout: #centerplan-navigation Sidebar mit Tabs (GESCHÄFTE A-Z / KATEGORIEN) + Shop-Detail-Panel + #map (Leaflet+OSM). ⚠ Bewusste Abweichung: Shop-Pins benötigen Geocoding/SVG-Positionen pro Shop, die in Cockpit nicht garantiert sind – die Karte zeigt nur den Center-Marker, Shop-Klicks öffnen ein Detail-Panel statt Map-Sprung.

Legende: ✅ = 1:1 fertig · ⏳ = offen · ⚠ = bewusste Abweichung

Bewusste Abweichungen / Pragmatische Lösungen

• Akkordeon-Animation Jobs: Der Originalpfeil verwendet die Schriftart mec-cm-icons (Glyph \e905). Wir nutzen ein einfaches Unicode-Dreieck mit transform: rotateX, weil der Icon-Font in Cockpit nicht verfügbar ist. Optisch nahezu identisch.
• max-height für Akkordeon-Inhalte: Original begrenzt auf 275 px – wir lassen unbegrenzt expandieren, weil die Stelleninhalte oft länger sind.
• #times-shops Datenmodell: Das Original verwendet pro Shop ein generiertes .lines-Pattern mit 17 Tageszeitslots. Cockpit-Shops haben strukturierte Öffnungszeiten – wir mappen sie auf die Original-Struktur (siehe oeffnungszeiten.tsx).

Architektur-Entscheidungen (festgelegt)

Bereich	Entscheidung	Quellen / Konfiguration
Centerplan (Einkaufswelt)	Leaflet + OpenStreetMap	Kein API-Key. Marker werden aus centerConfig.shops[].position (Lat/Lng) und Kategorien-JSON geladen. Tile-Server: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png.
Anfahrt (#map-router)	Interaktive Leaflet-Karte	Gleiche Engine wie Centerplan. Center-Koordinaten aus centerConfig.address.coordinates. Zusätzlich Verkehrsmittel-Liste als statischer CMS-Content.
Kontaktformular Spam-Schutz	Cloudflare Turnstile	NEXT_PUBLIC_TURNSTILE_SITE_KEY (env) und TURNSTILE_SECRET_KEY (server-only). Verifikation server-side per /api/contact/verify. Drop-in-Replacement für reCAPTCHA, datenschutzfreundlicher.

Reihenfolge der Implementierung

1. Phase 1 (✅ erledigt): Foundation-CSS + einfache Subpages (geschaefte-a-z, service, jobs, legal-Seiten).
2. Phase 2 (✅ erledigt): Listen + Aktuelles (oeffnungszeiten, nachrichten, angebote). impressionen entfällt.
3. Phase 3 (✅ erledigt): Interaktive Subpages – kontakt mit Cloudflare Turnstile, anfahrt mit Leaflet, einkaufswelt mit Centerplan-Hybrid (Sidebar + OSM-Karte).

Erforderliche Center-Konfiguration

Damit die interaktiven Subpages voll funktionieren, sollten pro Center folgende Werte gesetzt sein:

• wayfindingMap.latitude/longitude – Geo-Koordinaten des Centers (für anfahrt und einkaufswelt).
• wayfindingMap.mapZoomLevel – Zoom-Level (Default: 15 für anfahrt, 17 für einkaufswelt).
• templateContent['mec-template-a'].anfahrt.verkehrsmittel (oder .blocks) – Anreise-Hinweise mit Icon, Titel und Textblöcken.
• Env-Vars NEXT_PUBLIC_TURNSTILE_SITE_KEY und TURNSTILE_SECRET_KEY – Cloudflare Turnstile für das Kontaktformular. Ohne Keys wird der Spam-Schutz übersprungen (Dev-Modus).

Center, bei denen wayfindingMap nicht hinterlegt ist, sehen statt der Karte einen Hinweis-Block mit Aufforderung zur Konfiguration. Die übrigen Subpage-Inhalte (Adresse, Kontaktformular, Shop-Liste) werden dennoch korrekt gerendert.