MEC Template A – Subpages Checklist

This checklist documents the status of the 1:1 replication of the subpages of MEC Template A compared to the original. Unlike the homepage, here DOM structure and CSS classes must be explicitly aligned, not just the visual effect.

Sources

• Original Markup (Smarty/PHP): mec-templates/site_templates/templates/template_a/*.tpl
• Original CSS (≈ 3777 lines): 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)

Most subpages follow the schema from master.tpl:

<!-- optional 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>

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

The containers are ALWAYS:

• .content-white – white background wrapper
• .main – centered container, max-width: 1060 px, padding: 0 30 px
• optionally .content-cms, .geschaefte-a-z, .indent_top, .indent_bottom – modifiers

Status Matrix

Subpage	Status	Priority	Remarks
geschaefte-a-z	✅ 1:1	–	.shop-list with column-count: 2, .stripe letters, sorted alphabetically.
service	✅ 1:1	–	.service > .icon + .title + .subtitle, 4×24% grid.
jobs	✅ 1:1	–	.job > .job-title h2 + .job-subtitle (accordion) + .job-content.
gutschein / einkaufsgutscheine	✅ 1:1	–	Generic content-cms structure with <h1> + texts.
impressum	✅ 1:1	–	content-cms with ImpressumPageClient (contentOnly).
datenschutz	✅ 1:1	–	content-cms with DatenschutzPageClient (contentOnly).
teilnahmebedingungen	✅ 1:1	–	Generic content-cms structure.
rechtliche-hinweise	✅ 1:1	–	Generic content-cms structure.
oeffnungszeiten	✅ 1:1	–	#times-weekdays tabs + #times-shops with .shop-time/.lines/.time-wrapper + #times-chars character list. Width/right calculation from getOpeningHoursBarSegments (Window 5–22 hours, 17 slots). Special opening times: MecSpecialDaysGrid above right next to the center line (h2), visually highlighted (prominentAside, border/accent), when upcoming appointments are maintained in the cockpit.
nachrichten (Current Events)	✅ 1:1	–	4-item grid (#news-left, …). Cockpit: mixed current events under /nachrichten (News + Events + Offers + Jobs). ILG /aktuelles: only news; separate routes for offers/jobs/events.
angebote	✅ 1:1	–	.offers.multi > ul > .offer-item in groups of 4 + inline .product-details (click opens, click closes).
impressionen	❌ does not exist	–	Subpage does not exist in either the original template A or the cockpit template – nothing to refactor.
kontakt	✅ 1:1	–	#contact-head with .address + .name (center manager) + .links and #contact-form-element with all original fields. Spam protection: Cloudflare Turnstile (NEXT_PUBLIC_TURNSTILE_SITE_KEY + TURNSTILE_SECRET_KEY) instead of Google reCAPTCHA.
anfahrt	✅ 1:1	–	#map-router with Leaflet+OSM (height 650 px, bottom border red like original) + .verkehrsmittel list with .title + .textblock. Center coordinates from wayfindingMap.latitude/longitude.
einkaufswelt	✅ 1:1 (Hybrid)	–	#centerplan fullscreen layout: #centerplan-navigation sidebar with tabs (STORES A-Z / CATEGORIES) + shop detail panel + #map (Leaflet+OSM). ⚠ Conscious deviation: Shop pins require geocoding/SVG positions per shop, which are not guaranteed in the cockpit – the map only shows the center marker; shop clicks open a detail panel instead of jumping to the map.

Legend: ✅ = 1:1 completed · ⏳ = open · ⚠ = conscious deviation

Conscious Deviations / Pragmatic Solutions

• Accordion animation jobs: The original arrow uses the font mec-cm-icons (Glyph \e905). We use a simple Unicode triangle with transform: rotateX, as the icon font is not available in the cockpit. Visually nearly identical.
• max-height for accordion content: Original limited to 275 px – we leave it to expand indefinitely, as the job contents are often longer.
• #times-shops data model: The original uses a generated .lines pattern per shop with 17 daily time slots. Cockpit shops have structured opening hours – we map them to the original structure (see oeffnungszeiten.tsx).

Architectural Decisions (set)

Area	Decision	Sources / Configuration
Center Plan (Shopping World)	Leaflet + OpenStreetMap	No API key required. Markers loaded from centerConfig.shops[].position (Lat/Lng) and category JSON. Tile server: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png.
Directions (#map-router)	Interactive Leaflet Map	Same engine as center plan. Center coordinates from centerConfig.address.coordinates. Additionally, the list of transportation modes as static CMS content.
Contact Form Spam Protection	Cloudflare Turnstile	NEXT_PUBLIC_TURNSTILE_SITE_KEY (env) and TURNSTILE_SECRET_KEY (server-only). Verification server-side via /api/contact/verify. Drop-in replacement for reCAPTCHA, data protection friendly.

Implementation Order

1. Phase 1 (✅ completed): Foundation CSS + basic subpages (geschaefte-a-z, service, jobs, legal pages).
2. Phase 2 (✅ completed): Lists + current events (oeffnungszeiten, nachrichten, angebote). impressionen is excluded.
3. Phase 3 (✅ completed): Interactive subpages – contact with Cloudflare Turnstile, directions with Leaflet, shopping world with center plan hybrid (sidebar + OSM map).

Required Center Configuration

For the interactive subpages to function fully, the following values should be set per center:

• wayfindingMap.latitude/longitude – Geo-coordinates of the center (for anfahrt and einkaufswelt).
• wayfindingMap.mapZoomLevel – Zoom level (Default: 15 for anfahrt, 17 for einkaufswelt).
• templateContent['mec-template-a'].anfahrt.verkehrsmittel (or .blocks) – Travel indications with icon, title, and text blocks.
• Env vars NEXT_PUBLIC_TURNSTILE_SITE_KEY and TURNSTILE_SECRET_KEY – Cloudflare Turnstile for the contact form. Without keys, spam protection will be skipped (Dev mode).

Centers where wayfindingMap is not provided will see a notification block instead of the map, prompting for configuration. The remaining subpage contents (address, contact form, shop list) will still render correctly.