MEC-Templates: gemeinsame Bausteine (_mec-shared/)

Mehrere MEC-Templates (A, C, D, Grooss, Green – nicht MEC Shopbox) teilen sich Datenfluss und Bedien-Patterns. Damit wir die heutigen Pixel-Treue-Regeln nicht doppeln, liegen logische Helfer und Embla-/Daten-Komponenten zentral unter apps/center-website/components/templates/_mec-shared/. Das Aussehen bleibt pro Template unter [data-template="mec-template-X"] in apps/center-website/app/globals.css.

Prinzipien

• Logik gemeinsam, Optik pro Template. Wiederverwendbare React-Komponenten exponieren einen classPrefix-Prop oder layout-/ renderHero-Slots. Die DOM-Klassen und das Aussehen steuert jedes Template unter [data-template="mec-template-X"] in globals.css bzw. template-*-*.css.
• Optik ist maßgeblich, Original-Code nicht. Besucher sollen das Live-Ergebnis sehen – nicht jeden Smarty-/jQuery-/CSS-Hack aus dem Legacy 1:1. Technisch kaputte Original-Lösungen (Doppel- Scrollbalken, height:100%+top-Overflow, Viewport-translateX-Drift) nicht blind übernehmen; bewusst sauber lösen, solange es optisch passt.
• Keine Pflicht-1:1-Pixel aus schlampiger Original-Umsetzung. Kleine Abweichungen, die nur aus Legacy-Inkonsistenzen kommen, sind ok, wenn das Ergebnis stimmt.
• Schichten (von oben nach unten): mec-template-shell.css (D/Grooss/Green: Scroll, Mobile-Nav, Hamburger-Basis) → legacy-header.css + MecLegacyHeader → template-*-header.css (Tokens, Nav-Verhalten) → Layout → Shared Pages → template-spezifische Optik.
• Keine versteckten Defaults. Maße, Farben, Schriften kommen aus --mec-lh-*-Tokens und template-eigenen CSS-Blöcken – kein gemeinsames !important-CSS ohne Grund.
• Keine voreilige Konsolidierung. Bausteine wandern erst nach _mec-shared/, wenn mindestens zwei MEC-Templates identische Logik benötigen – aber die Header-Familie D/Grooss/Green gilt als eine Familie mit gemeinsamer Shell.

Cursor-Regel für Assistenten: .cursor/rules/mec-shared-template-architecture.mdc.

Aktuelle Bausteine

Datei	Inhalt
_mec-shared/mec-template-shell.css	Gemeinsame Layout-/Header-Baseline für D, Grooss, Green: ein Scroll-Container, Mobile-Nav-Höhe, Hamburger rechts am header#cc-parent, #container boxed
_mec-shared/legacy-header.css	Header-CSS mit Original-IDs; Basis für MecLegacyHeader
_mec-shared/components/mec-legacy-header.tsx	React-Header (Grooss/D/Green-Familie); --mec-boxed-left/width aus #container
_mec-shared/lib/multiply-logos-for-loop.ts	multiplyLogosForEmblaLoop, MEC_SHOP_SLIDER_AUTOPLAY_MS, MEC_SHOP_SLIDER_MIN_SLIDES, Typ MecFooterSliderLogo
_mec-shared/lib/shop-utils.ts	firstLetter, splitIntoColumns, groupShopsByLetter, sortLettersDe, sortShopsByNameDe, groupShopsByCategory
_mec-shared/footer-shop-logo-slider.tsx	Embla-Logo-Slider mit classPrefix, Hover-Pause, Autoplay (Default 2 s wie Slick im Original)
_mec-shared/data/cms-content.ts	extractCmsContent({ pageContent, centerConfig, defaultTitle, legalKey }) – einheitliche Daten-Extraktion für CMS-Content-Pages (Title-Quelle, HTML-Body-Quelle, Fallback aus centerConfig.legalTexts[key]/rechtliches[key])
_mec-shared/components/cms-html-body.tsx	<MecCmsHtmlBody html fallback className fallbackClassName /> – sanitiertes HTML-Rendering (über SafeHtmlContent) mit Fallback-Knoten
_mec-shared/pages/cms-content-classic.tsx	MecCmsContentClassicPage – generische CMS-Content-Page mit dem Original-<div class="content-white"> / <div class="main content-cms"> / <h1.main-title>-Markup. Render-Slots: renderHero (Template A), renderBody (strukturierte Bodies wie ImpressumPageClient), renderAfterInner (z. B. Shop-Slider unter dem Body bei Template C), bodyWrapperClassName (extra-Wrapper wie <div class="articletext"> bei C).
_mec-shared/pages/cms-content-card.tsx	MecCmsContentCardPage – Tailwind-Card-Variante (min-h-screen bg-… + Header-Slot + rounded-xl shadow Card). Wird aktuell nicht in den 5 MEC-Templates verwendet (alle CMS-Pages nutzen cms-content-classic), bleibt als Baustein für künftige Templates mit Card-Look.
_mec-shared/pages/shop-detail.tsx	MecSharedShopDetailPage – Original-Markup-Renderer für Shop-Detailseiten (<div id="shop-details" class="content-white"><div class="main"><div id="shop-details-informations">…</div><div id="shop-details-content" class="content-cms">…</div></div></div>). Render-Slots: renderHero, PageChrome. Texte (Center-Plan-Link, „Öffnungszeiten", „Kontaktdetails", „Anbieterinformationen") sind über Props anpassbar. CSS-Treue über _mec-shared/shared-pages.css.
_mec-shared/pages/angebote.tsx	MecAngebotePage – Listing für Angebote, mit Layout-Prop 'classic' | 'flex'. 'classic' (Template A): offers multi + offer-item mit Inline-Detail-Panel; 'flex' (Grooss/Green/D): offers-flex + item mit Preis-Badge. Template D: Thin Wrapper mit layout="flex" + SubpageHeader.
_mec-shared/pages/jobs.tsx	MecJobsPage – Akkordeon-Liste, mit Layout-Prop 'classic' | 'grooss'. 'classic' (Template A): main content-cms indent_bottom indent_top + <h2> im job-title; 'grooss' (Grooss/Green/D): main content-cms content-jobs + job-breaks Trenner + job-wrapper. Template D: Thin Wrapper mit layout="grooss" + SubpageHeader.
_mec-shared/pages/service.tsx	MecServicePage – Service-Karten mit Layout-Prop 'classic' | 'grooss' | 'green'. Template D: Thin Wrapper mit layout="grooss" + optional mainClassName="content-service".
_mec-shared/pages/geschaefte-a-z.tsx	MecGeschaefteAZPage – Shop-Übersicht A–Z. Layout-Prop 'classic-a' | 'dual-column': A/Grooss nutzen .main.geschaefte-a-z + CSS-Spalten; D/Green nutzen .main.content-cms + zwei Flex-Spalten. Props: showPageTitle, mainClassName.
_mec-shared/pages/impressionen.tsx	MecImpressionenPage – Foto-Galerie (.impressionen-slider.slider-for + .slider-nav). Props: renderHero, showPageTitle (Green: false), mainClassName (D: content-impressionen).
_mec-shared/pages/gutschein.tsx	MecGutscheinPage – Gutschein-Seite. Template D: Thin Wrapper mit mainClassName="content-gutschein".
_mec-shared/pages/content-detail.tsx	MecContentDetailPage – Original-Markup-Renderer für News-/Events-/Angebote-Detailseiten. Type-Dispatch auf content.type: 'news' | 'events' rendert das nachrichten.tpl-{if isset($detail)}-Markup (variant='classic' für Template A: <div class="content-white"><div class="main"><div class="news-content">…; variant='flex' für D / Grooss / Green: <div class="news-detail content-white"><div class="news-detail-image"/><div class="news-flex-detail"><div class="main content-cms"><div class="news-flex-date"/><div class="news-flex-detail-title"/>…</div></div></div>); 'angebote' rendert <div class="content-white content-offers"><div class="main content-cms"><div class="offer-detail-image"/><div class="offer-detail-text"/></div></div> (analog template_d/angebote.tpl {if isset($data['active_offer'])}); 'jobs' Fallback <div class="content-white"><div class="main content-cms">. Render-Slots: PageChrome, hero.

Verwendung – Beispiel: Footer-Shop-Logo-Slider

import {
  MecFooterShopLogoSlider,
  type MecFooterSliderLogo,
} from '@/components/templates/_mec-shared/footer-shop-logo-slider';

const sliderLogos: MecFooterSliderLogo[] = shops
  .filter((s) => s.logo)
  .map((s) => ({ key: s.id, url: s.logo!, alt: s.name }));

<div className="shop-slider mec-d-footer-shop-slider w-full shrink-0">
  <MecFooterShopLogoSlider logos={sliderLogos} classPrefix="mec-d" />
</div>

Ergibt im DOM die Klassen mec-d-shop-logo-slider, mec-d-shop-logo-slider__track, mec-d-shop-logo-slider__slide, mec-d-shop-slider-item-inner, mec-d-shop-slider-link – genau wie heute in app/globals.css adressiert.

Wann etwas hier rein gehört

• Datenfunktionen (Sortieren, Gruppieren, Slug-Helper) → ja, sobald zwei Templates es nutzen
• Embla-/Slick-Loops mit identischem Verhalten (z. B. Logo-Slider) → ja, mit classPrefix
• CMS-Mapping-Helfer (z. B. templateContent['mec-template-X']-Zugriffe) → ja, wenn zwei Templates identische Strukturen haben
• Generische Pages mit Header-/Body-Render-Slots (z. B. CMS-Content-Pages) → ja, wenn ≥3 Templates dasselbe Page-Pattern haben und sich nur in Layout-Details (Outer-Wrapper-Klassen, Header-Variante) unterscheiden. Die Templates bleiben als thin wrappers (10–25 Zeilen) erhalten und konfigurieren die generische Page über Props/Render-Slots.
• Subpage-Header / Hero-Slider / Footer-Optik → schrittweise (Phase B-1.18): gemeinsame Shell/Chrome, wo Optik übereinstimmt; sonst thin wrapper + Addon-CSS. Nicht drei parallele Implementierungen pflegen.

Phase-B-1.18: Shared-Shell Rollout (D / Grooss / Green, von oben nach unten)

Ziel: Eine Header-Familie, eine technische Baseline (mec-template-shell.css), template-lokale Addons nur für echte Optik-Unterschiede. Original-Hacks nicht blind kopieren.

Status-Legende: ✅ erledigt · 🔄 in Arbeit · ⬜ offen

1. Layout-Shell (Seitenrahmen)

Punkt	D	Grooss	Green	Status
mec-template-shell.css importiert	✅	✅	✅	✅
Ein Scroll-Container (html, nicht html+body)	✅	✅	✅	✅
#container max 1440px, zentriert	✅	✅	✅	✅
#header-placeholder (fixed Header)	✅	✅	✅ Desktop ≥1445px	✅
--mec-boxed-left/width (JS)	✅	✅	✅	✅

2. Header + Navigation

Punkt	D	Grooss	Green	Status
MecLegacyHeader + legacy-header.css	✅	✅	✅	✅
Hamburger rechts am Header-Rand (Shell)	✅	✅	✅	✅
Mobile-Nav ohne height:100%-Overflow	✅	✅	✅	✅
Header fixed + boxed (ohne translateX-Drift)	✅	✅	✅ Desktop	✅
Nav-Verhalten (Overlay / Sticky / Breakpoints)	Addon template-d-header.css	Addon template-grooss-header.css	Addon template-green-header.css	✅ getrennt

3. Startseite

Punkt	D	Grooss	Green	Status
Hero-Slider Markup	eigen (v3-Editor)	eigen (strukturierter Editor)	eigen (strukturierter Editor)	✅ je Template
Infoboxen / Bento	eigen	eigen	eigen	✅ Shared Data + Angebote-Slider
Footer-Shop-Slider	Shared Embla	Shared	Shared	✅

Startseiten-Hero – Dashboard (hero.slides[]):

Template	Editor	Kernelemente	Zeitraum	Vorlagen
D	mec-d-hero / v3	Hintergrundfarbe, Titel (2 Schnitte, tauschbar dünn/fett), Textkasten, Motiv rechts	Start + Ende	Reiter „Vorlagen“ (Presets)
Grooss	mec-grooss-hero-editor	Hintergrundfarbe, Titel links oben (Blog-Schrift), Untertitel links unten, Motiv rechts	Start + Ende	Layout-Vorlagen (Presets)
Green	mec-green-hero-editor	Vollbild-Hintergrund, zweifarbiges Titelpaar + Untertitel im transparenten Kasten links	Start + Ende	Layout-Vorlagen (Presets)

Gemeinsame Datumslogik: _mec-shared/lib/hero-slide-utils.ts (filterHeroSlidesByDate).

Legacy/v2-Slides werden beim Öffnen im Dashboard migriert; auf der Website bleiben HTML-Legacy-Fallbacks aktiv.

Startseiten-Infoboxen – Shared Layer (Mai 2026):

Baustein	Pfad	Nutzung
Tile-Typen	_mec-shared/lib/mec-home-info-tile-types.ts	D/Grooss infoTiles[], Green infoboxen{}
Grooss-Motiv-Defaults	mec-template-grooss/lib/mec-grooss-infobox-assets.ts + public/templates/mec-template-grooss/infobox/	Lokale Original-SVG/PNG
MEC-Legacy-Assets (CDN-Ersatz)	_mec-shared/lib/mec-legacy-asset-urls.ts + public/templates/mec-legacy/uploads/	Header-SVGs, Template-A-Subpage-Hero, Welcome-Teaser, Social-Icons; Download: bash scripts/mirror-mec-legacy-assets.sh
Green-Infobox-Assets	mec-template-green/lib/mec-green-infobox-assets.ts + public/templates/mec-template-green/infobox/	demo1/demo2, placeholder, Anfahrt-Muster-SVG
Link + Tile-Reader	_mec-shared/lib/mec-home-info-tile-utils.ts	readMecInfoTileAt, resolveMecHomeLink
Highlights → Angebote	_mec-shared/lib/mec-angebote-from-highlights.ts	Preis-Parsing, mapHighlightsToAngeboteItems
Angebote-Slider UI	_mec-shared/components/mec-home-angebote-slider.tsx	variant: template-d | grooss | green

Box-Markup (Lottie bei D, .box-times bei Green, …) bleibt in den Template-Komponenten; Optik in template-*-home.css.

4. Footer

Punkt	D	Grooss	Green	Status
Markup-IDs	template-eigen	template-eigen	template-eigen	⬜
Logo-Slider	Shared	Shared	Shared	✅

5. Unterseiten (Page-Chrome + Shared Pages)

Bereich	Shared Page	D	Grooss	Green
CMS Legal (Impressum, …)	cms-content-classic	✅	✅	✅
Kontakt, Öffnungszeiten, Anfahrt	Shared pages	✅	✅	✅
Jobs, Service, Angebote	Shared + layout prop	✅	✅	✅
Geschäfte A–Z	Shared + layout	dual-column	classic-a	dual-column
Shop-Detail	MecSharedShopDetailPage	✅	✅	✅
Content-Detail	MecContentDetailPage	✅	✅	✅
Einkaufswelt / Centerplan	Shared	✅	✅	✅
Subpage-Hero	teils Shared	SubpageHeader	MecTemplateGroossSubpageHero	MecTemplateGreenPageHero

Nächste Schritte (Reihenfolge):

1. Grooss/Green: fixierte Nav/Header auf --mec-boxed-* statt translateX(-50%) (Header ✅, Mai 2026).
2. Subpage-Hero: gemeinsame MecSubpageHero-Basis + Template-Tokens (D/Grooss/Green thin wrapper).
3. Startseiten-Hero ✅ (D/Grooss/Green, Mai 2026) · Infoboxen: gemeinsame Daten-Schicht + Angebote-Slider ✅ (Mai 2026); Box-Rendering bleibt template-spezifisch.
4. Footer-Markup prüfen, ob 2-von-3-Konsolidierung möglich.

Phase-B-1: CMS-Content-Pages konsolidiert (Mai 2026)

Ziel: Optisch wie das Original, technisch sauberer. Die 20 CMS-Content-Pages (5 Templates × impressum/datenschutz/rechtliche-hinweise/teilnahmebedingungen) wurden zu thin wrappers (15–60 Zeilen) reduziert. Die Page-Logik (Title-Auflösung, HTML-Body-Rendering, Sanitization, Fallback-Strategie) lebt einmalig in _mec-shared/data/cms-content.ts + _mec-shared/components/cms-html-body.tsx + _mec-shared/pages/cms-content-classic.tsx.

Architektur: Pro Template gibt es eine schlanke template-X-pages.css mit CSS-Variablen-Tokens (Brand-Farbe, Schriften, etc.). Die generischen Subpage-Styles (.content-white, .main, .content-cms, <h1.main-title>) liegen einmalig in _mec-shared/shared-pages.css und sind über [data-template^="mec-"] gescoped – sie wirken auf alle Templates und nutzen die Tokens des jeweiligen Templates.

Mapping Template → Original-Markup:

Template	Outer-Wrapper	Inner-Wrapper	Body-Wrapper	Hero (auf CMS-Pages)	Brand
mec-template-a	content-white	main content-cms	–	kein (Original {block name=header_slider}{/block} leer)	#e20018
mec-template-d	content-white {slug}	main content-cms [{slug}]	–	kein	#EF4741
mec-template-grooss	content-white {slug}	main content-cms [{slug}]	–	kein	#EF4741
mec-template-green	content-white {slug}	main content-cms [{slug}]	–	kein	#AFB584
mec-template-c	content-white	content-wrappe margin_left_38 {slug}	articletext	kein	#003366 (Title in #000)

Alle Templates rendern jetzt das Original-.tpl-Markup (siehe mec-templates/site_templates/templates_*/{impressum,datenschutz,rechtliche-hinweise,teilnahmebedingungen}.tpl), nur mit Cockpit-pageContent/legalTexts-Datenquellen statt Smarty-Variablen.

Strukturierte Bodies: Bei impressum/datenschutz rendern A, Grooss, Green und C den strukturierten ImpressumPageClient/DatenschutzPageClient mit contentOnly mecShopBox über den renderBody-Slot. Das gibt Centern auch ohne CMS-Inhalt eine sinnvolle Standard-Seite (Adresse + Verantwortliche aus centerConfig). D rendert reines pageContent.htmlContent mit Fallback aus centerConfig.legalTexts.

Korrektur gegenüber Phase B-1 erste Iteration: Die initiale Cockpit-Card-Variante (cms-content-card.tsx mit Tailwind-Hero) für Grooss/Green/C wurde verworfen, weil sie visuell vom Original abwich. Ergebnis: alle 5 Templates teilen sich jetzt dasselbe Original-Markup, nur die Tokens (Farben, Schriften) unterscheiden sich.

Phase-B-1.6: Grooss-Re-Exports + Hero-Render-Slot (Mai 2026)

Auslöser: Audit zeigte, dass mec-template-grooss/pages/{aktuelles,kontakt,opening-hours,shops}.tsx Re-Exports vom Fremd-Template mec-shopbox waren – also weder Original-Grooss-Markup noch eigenständige Implementierung. Zusätzlich war mec-template-grooss/pages/geschaefte-a-z.tsx eine Cockpit-Tailwind-Erfindung (dunkles Layout, Card-Look) statt Original-.tpl-Markup.

Lösung:

1. MecTemplateGroossPageChrome (mec-template-grooss/mec-template-grooss-page-chrome.tsx) – schlankes Page-Chrome, das nur den optionalen Hero rendert (Header/Footer kommen aus mec-template-grooss/layout.tsx, anders als bei Template A, wo MecTemplateAPageChrome zusätzlich die rote Hauptnavigation rendert).
2. MecTemplateGroossSubpageHero (mec-template-grooss/components/subpage-hero.tsx) – Original-Markup <div class="subpage-header"> mit subpage-header-background-Div (Background-Image über style={background:url(...)}) und <div class="title"><div>{Titel}</div></div>. Wird nur gerendert, wenn pageContent.heroImage gesetzt ist (sonst kein leerer 360 px-Block). CSS-Klassen liegen in template-grooss-pages.css (1:1 aus mec-templates/sites/assets/css/template_grooss.css).
3. renderHero-Render-Slot in _mec-shared/pages/{kontakt,opening-hours,aktuelles}.tsx – Default rendert MecSubpageHero (Template-A-Stil). Pro Template kann der Wrapper den Hero überschreiben oder mit () => null ganz unterdrücken (z. B. wenn das Original-.tpl einen leeren header_slider-Block hat, wie nachrichten.tpl und geschaefte-a-z.tpl).

Mapping nach Phase B-1.6:

Page	Hero im Original	Hero im Wrapper	Markup-Quelle
aktuelles (nachrichten.tpl)	leer	renderHero={() => null}	_mec-shared/pages/aktuelles.tsx (<div id="news">)
kontakt	<div class="subpage-header">	MecTemplateGroossSubpageHero aus pageContent.heroImage	_mec-shared/pages/kontakt.tsx (<div class="content-white">…<div id="contact-head">…)
opening-hours/oeffnungszeiten	<div class="subpage-header">	MecTemplateGroossSubpageHero aus pageContent.heroImage	_mec-shared/pages/opening-hours.tsx (<div class="content-white">…id="times-main")
shops (Cockpit-Routing)	leer	– (keiner)	_mec-shared/pages/geschaefte-a-z.tsx (<ul class="shop-list">)
geschaefte-a-z	leer	– (keiner)	_mec-shared/pages/geschaefte-a-z.tsx

shops und geschaefte-a-z zeigen denselben Original-Markup, weil Original-Grooss nur eine einzige Shop-Übersicht (geschaefte-a-z.tpl) kennt; die shops-Route bleibt aus Routing-Kompatibilität erhalten.

Noch offen (Phase B-1.7+): 9 weitere Grooss-Pages (anfahrt, angebote, einkaufswelt, gutschein, impressionen, jobs, service, vermietung) sind noch Cockpit-Tailwind-Erfindungen mit dunklem Theme – die werden in Folgeschritten auf Original-Markup umgestellt. Die Templates D, Green, C werden anschließend analog auditiert.

Phase-B-1.7: Grooss restliche Pages auf Original-Markup (Mai 2026)

Auslöser: 8 weitere Grooss-Pages waren Cockpit-Tailwind-Erfindungen mit dunklem Theme (bg-[#0f1720] text-white) und/oder Imports aus mec-shopbox/components/ (z. B. anfahrt-section, vermietung-section). Beides weicht visuell vom Original-.tpl ab.

Lösung: renderHero-Slot zusätzlich in _mec-shared/pages/{anfahrt,angebote,gutschein, jobs,service}.tsx ergänzt. Pro Grooss-Page ein thin wrapper, der die Logik aus _mec-shared/pages/<page>.tsx mit MecTemplateGroossPageChrome und – wenn das Original einen Hero hat – mit MecTemplateGroossSubpageHero kombiniert.

Mapping nach Phase B-1.7:

Page	Hero im Original	Wrapper-Hero	Markup-Quelle
anfahrt	leer	() => null	_mec-shared/pages/anfahrt.tsx (<div id="map-router"> + .verkehrsmittel)
angebote	leer	() => null	_mec-shared/pages/angebote.tsx (.offers.multi)
einkaufswelt	leer (Centerplan)	– (kein Hero im Shared)	_mec-shared/pages/einkaufswelt.tsx (<div id="centerplan">)
gutschein	subpage-header	MecTemplateGroossSubpageHero aus pageContent.heroImage	_mec-shared/pages/gutschein.tsx
jobs	subpage-header	MecTemplateGroossSubpageHero aus pageContent.heroImage	_mec-shared/pages/jobs.tsx (.job / .job-title / .job-subtitle)
service	subpage-header	MecTemplateGroossSubpageHero aus pageContent.heroImage	_mec-shared/pages/service.tsx (.service / .icon / .titel)
impressionen	subpage-header	MecTemplateGroossSubpageHero aus pageContent.heroImage	eigene Grooss-Page mit Original-Markup <div class="impressionen-slider slider-for/nav"> (Slick-Animation durch React-State ersetzt)
vermietung	– (Original hat keine vermietung.tpl)	–	_mec-shared/pages/vermietung.tsx (Cockpit-Tailwind, identisch zu Template A)

Spot-Check bethanien-center-neubrandenburg: Alle 8 Pages liefern data-template="mec-template-grooss", kein dunkles bg-[#0f1720] mehr, und je nach Page Original-Klassen (map-router, main content-cms, main-title, .service, .job, .offers.multi).

Impressionen-Slider: Original nutzt Slick.js mit .slider-for (Hauptbild) und .slider-nav (Thumbnails). Im Cockpit ersetzen wir Slick durch eine simple React-State-Variante (activeIdx); die Original-CSS-Selektoren (.impressionen-slider, .impressionen-slider-item, .impressionen-slider-image) liegen 1:1 in template-grooss-pages.css – Optik bleibt erhalten, nur die Slick-Animation entfällt.

Vermietung: existiert nicht im Original-Grooss-Template (vermietung.tpl fehlt unter mec-templates/site_templates/templates/template_grooss/); wir nutzen deshalb das gleiche generische Tailwind-Layout aus _mec-shared/pages/vermietung.tsx wie Template A – konsistent über beide Templates, Brand-Farbe via --mec-primary.

Navigation Vermietung: Der Menüpunkt wird zentral über _mec-shared/lib/vermietung-nav.ts aufgelöst (header.vermietung in templateContent, Dashboard-Reiter „Vermietung“). Standard: externer Link (MEC-Portal, neuer Tab). Mit useInternalPage: true → /vermietung. Legacy header.vermietungUrl (Template D) wird weiter gelesen.

Noch offen (Phase B-1.8+): Templates D, Green, C analog auditieren.

Phase-B-1.8: Template D – nur shops.tsx umgeleitet (Mai 2026)

Audit-Ergebnis: Template D hat 14 Pages. 13 davon sind bereits eigene Original-treue Implementations mit Original-Klassen (content-white, main content-cms, news-flex, news-text, news-title, shop-list, map-router, verkehrsmittel, …) und Tailwind-Utility-Klassen nur als Layout-Helper (kein dunkles Cockpit-Theme, kein bg-[#0f1720]/bg-[#1e2733], kein mec-shopbox-Import, keine modernen Card-Klassen wie rounded-xl/shadow-md). Die D-eigenen Implementations sind hybrid: Original-Klassen + Tailwind-Layout-Klassen – das CSS aus template_d.css wirkt zusätzlich auf die Original-Klassen.

Einzige Änderung: pages/shops.tsx war ein Re-Export von @/components/templates/mec-shopbox/pages/shops (Cockpit-Tailwind-Cards). Im Original-Template-D existiert nur geschaefte-a-z.tpl – keine separate shops.tpl. shops.tsx ist daher ein Re-Export auf die D-eigene geschaefte-a-z.tsx (rendert <ul class="shop-list">).

Spot-Check oro-schwabach (einziger aktiver D-Center): /shops, /geschaefte-a-z, /aktuelles, /anfahrt liefern alle data-template="mec-template-d", kein dunkles Theme, keine modernen Card-Klassen; /shops und /geschaefte-a-z rendern jetzt beide <ul class="shop-list"> mit Buchstaben-Headern (Original-Markup aus geschaefte-a-z.tpl).

Hinweis – _mec-shared-Pages werden in Template D nicht verwendet: Die generischen Pages aus _mec-shared/pages/*.tsx rendern Template-A-Markup (z. B. news-left/news-right statt D-Original news-flex-main-left/ news-flex-main-right). Templates B/D haben eigene Original-Layouts mit eigenen CSS-Klassen, die zu ihrem eigenen template_X.css gehören; ein Umstellen auf _mec-shared würde das visuelle Layout brechen.

Phase-B-1.9: Template Green – Erste Pages auf Original-Markup (Mai 2026)

Status: Aktiv genutzt von einem Center (elisen-park-greifswald). User-Priorität laut Briefing: „nicht mehr im Einsatz, aber auch umsetzen zur Sicherheit – hinten angestellt".

Audit-Ergebnis: Template Green hat 13 Subpages (zusätzlich zu den vier CMS-Pages aus Phase B-1.5). 11 davon sind Cockpit-Tailwind-Erfindungen mit min-h-screen bg-gray-50, <PageHeader>-Split-Komponente, modernen Card-Klassen (rounded-xl, shadow-sm) und Modal-Dialogen für News/Shop-Details. Im Gegensatz zu Grooss kein dunkles Theme – aber visuell stark abweichend von templates_green/*.tpl (Original rendert wie Template D mit news-flex-main-left/right, news-text, shop-list).

Geliefert in B-1.9 (minimaler Scope):

• pages/geschaefte-a-z.tsx rendert jetzt Original-Markup (<div class="content-white"><div class="main content-cms"><ul class="shop-list">…) – identisch zur D-Implementierung, weil templates_green/geschaefte-a-z.tpl und templates/template_d/geschaefte-a-z.tpl byte-identisch sind.
• pages/shops.tsx ist ein Re-Export von ./geschaefte-a-z (Original hat keine separate shops.tpl).
• Brand-Farbe und Karla-Font kommen automatisch aus template-green-pages.css (--mec-color-primary = #AFB584 Olive).

Spot-Check elisen-park-greifswald: /shops und /geschaefte-a-z liefern beide data-template="mec-template-green", content-white, main content-cms, shop-list; kein min-h-screen bg-gray-50 mehr, kein Cockpit-PageHeader.

Erledigt in Phase B-1.9b (Mai 2026): Siehe Sektion „Phase-B-1.9b" weiter unten – alle 11 Pages sind jetzt auf Original-Markup gezogen.

Ursprünglich offen (vor B-1.9b):

Page	Original-Markup-Hinweis
aktuelles	templates_green/nachrichten.tpl ≈ Template-D (news-flex-main-left/right, news-text, news-title, news-subtitle); 18 Zeilen Diff zu D
anfahrt	29 Zeilen Diff zu D-Original; <div id="map-router"> + .verkehrsmittel
angebote	485 Zeilen Diff – Green hat zusätzliche real_food-Sektion und Active-Offer-Detail
einkaufswelt	64 Zeilen Diff – Centerplan-Variante, <div id="centerplan">
gutschein	49 Zeilen Diff – <div class="content-white"><div class="main content-cms">
impressionen	68 Zeilen Diff – Galerie ähnlich Grooss (impressionen-slider)
jobs	173 Zeilen Diff – .job / .job-title / .job-subtitle
kontakt	272 Zeilen Diff – Green-eigenes Kontakt-Layout
opening-hours	119 Zeilen Diff – .times-main, .times-weekdays
service	104 Zeilen Diff – .service / .icon / .titel
vermietung	Existiert nicht im Original-Green – Cockpit-Erfindung darf bleiben

Diese Pages wurden in Phase B-1.9b systematisch auf Original-Markup gezogen (siehe nächste Sektion).

Phase-B-1.9b: Template Green – Restliche Pages auf Original-Markup (Mai 2026)

Erledigt: Alle 11 Pages aus der B-1.9-TODO-Liste sind jetzt auf Original-Markup; keine Cockpit-Tailwind-Erfindung mehr in mec-template-green/pages/*.tsx (außer vermietung, weil das Original keine vermietung.tpl enthält).

Neue Bausteine in mec-template-green/:

• mec-template-green-page-chrome.tsx – analog zu Grooss: nur Hero + Children, weil layout.tsx bereits Header/Footer rendert.
• components/page-hero.tsx – exportiert zwei Original-Hero-Varianten:
  • MecTemplateGreenPageHero rendert <div class="page-header"> (Split-Hero: Olive-Block links + Bild rechts, identisch zum Original template_green/_content.css).
  • MecTemplateGreenSubpageHero rendert <div class="subpage-header"> (klassischer überlagerter Header, im Green-Original nur für gutschein.tpl).
• template-green-pages.css um .page-header, .subpage-header und .impressionen-slider erweitert (Quellen: _content.css + _news.css aus template_green/).

Mapping nach Phase B-1.9b:

Page	Hero-Quelle (Original)	Wrapper-Hero	Markup-Quelle
aktuelles	leer	() => null	_mec-shared/pages/aktuelles.tsx (Template-A-Markup news-left/right; Green-Original nutzt news-flex-main-left/right – TODO B-1.9c bei Bedarf)
anfahrt	leer	() => null	_mec-shared/pages/anfahrt.tsx (<div id="map-router"> + .verkehrsmittel)
angebote	leer	() => null	_mec-shared/pages/angebote.tsx (.offers.multi; Green-Specials wie real_food und Active-Offer-Detail noch nicht abgebildet – TODO B-1.9c)
einkaufswelt	leer (Centerplan)	–	_mec-shared/pages/einkaufswelt.tsx (<div id="centerplan">)
gutschein	subpage-header	MecTemplateGreenSubpageHero aus pageContent.heroImage	_mec-shared/pages/gutschein.tsx
jobs	page-header	MecTemplateGreenPageHero (heroImage + heroTitle + heroDescription)	_mec-shared/pages/jobs.tsx (.job / .job-title / .job-subtitle)
service	page-header	MecTemplateGreenPageHero	_mec-shared/pages/service.tsx (.service / .icon / .titel)
kontakt	page-header	MecTemplateGreenPageHero	_mec-shared/pages/kontakt.tsx (#contact-head, #contact-form)
opening-hours	page-header	MecTemplateGreenPageHero	_mec-shared/pages/opening-hours.tsx (.times-main, .times-weekdays, #times-shops)
impressionen	page-header	MecTemplateGreenPageHero	eigene Green-Page mit Original <div class="impressionen-slider slider-for/nav">; Slick-Animation durch React-State (activeIdx) ersetzt
vermietung	– (Original existiert nicht)	–	_mec-shared/pages/vermietung.tsx (Cockpit-Tailwind, identisch zu Grooss/Template A)

Spot-Check elisen-park-greifswald: Alle 11 Pages liefern data-template="mec-template-green", kein dunkles Theme, kein min-h-screen bg-gray-50 Cockpit-Wrapper, kein <PageHeader>-Split mehr. Markup-Klassen content-white, main content-cms, .service, .job, times-main/times-weekdays, contact-head/contact-form sind gerendert.

Hinweis zum Hero: Wird kein heroImage im pageContent gepflegt, rendert die jeweilige Page keinen Hero (analog zum Original-Smarty, wo der header_slider-Block ohne passenden Slider-Eintrag leer bleibt). Im Dashboard kann das Bild im Reiter „Webseite" → entsprechende Page → Hero gepflegt werden.

Restliche Restposten (TODO B-1.9c, optional):

1. aktuelles rendert aktuell Template-A-Markup (news-left/right). Green-Original nutzt news-flex-main-left/right. Visuelle Differenz gering, weil Green-CSS für news-left/right ebenfalls existiert.
2. angebote rendert Standard-Offers-Grid. Green-Original hat zusätzlich real_food-Sektion und Active-Offer-Detail-Ansicht (485 Zeilen Diff zu Template A). Sub-Sektionen werden in Cockpit derzeit nicht abgebildet.

Diese beiden Punkte sind keine Cockpit-Erfindung mehr (kein dunkles Theme, kein Tailwind-Card-Layout) – sondern nur fehlende Original- Specials. Aktivierung von B-1.9c ist nicht zwingend, weil das Theme aktuell visuell akzeptabel ist.

Phase-B-1.10: Template C – Audit (Mai 2026)

Status: Keine aktiven Center; laut User-Briefing „hinten angestellt". Kein Code-Refactor in B-1.10 – nur Audit & TODO-Liste, weil das Risiko-/Aufwand-Verhältnis bei null Nutzern ungünstig ist und ein zukünftiger Refactor erst sinnvoll wird, wenn ein Center auf C wechselt.

Audit-Ergebnis: Template C hat 14 Subpages (zusätzlich zu den vier CMS-Pages aus Phase B-1.5).

• 4 CMS-Pages (impressum, datenschutz, rechtliche-hinweise, teilnahmebedingungen) sind seit Phase B-1.5 Original-treu (MecCmsContentClassicPage).
• 13 weitere Pages sind Cockpit-Tailwind-Erfindungen mit min-h-screen
  • modernen Card-Klassen (rounded-xl, shadow-sm/shadow-md), ähnlich Green B-1.9. Kein dunkles Theme – das visuelle Risiko ist niedrig, weil das Theme hell bleibt.

Original-Template-C ist strukturell anders als A/B/D/Green:

• Keine geschaefte-a-z.tpl (anders als alle anderen Templates) – Shops werden in template_c/einkaufswelt.tpl und über die spezifischen centerplan.tpl, kategorien.tpl, shopslider.tpl, shopslider_big.tpl abgebildet.
• Bootstrap-2-ähnliches Grid (flex_row, span5, span6, margin_left_38, hidden-phone) statt der A/D/Green-typischen content-white > main content-cms Klassen.
• Eigene Klassen: flex_column, backLinkWrap, selectshop, centerplan_page, …

Implikation: Ein Refactor von Template C auf Original-Markup erfordert ein eigenes Konzept (eigenes mec-template-c-page-chrome, eigene C-spezifische Komponenten für flex_row/span6, eigene Mapping- Schicht für Shops/Kategorien) – nicht kompatibel mit den _mec-shared-Pages aus A/Grooss.

Geliefert in B-1.10:

• Diese Audit-Sektion (Doku-Only).
• TODO B-1.10b: Wenn ein Center auf Template C umzieht, dedizierter Refactor-Sprint mit eigener Page-Chrome- und Komponenten-Bibliothek basierend auf template_c/*.tpl.

Keine Code-Änderungen an mec-template-c/pages/*.tsx in B-1.10. Die bestehende Cockpit-Implementation ist visuell akzeptabel (helles Theme, keine dunklen Cockpit-Erfindungen) und kann bleiben, bis ein Bedarf entsteht.

Phase-B-1.11: Header-Refactor auf Original-Markup (Mai 2026)

Auslöser: User-Feedback nach Abschluss von B-1.9b: „der Header ist noch nicht so wie die Original-Templates". Audit zeigte, dass Grooss und Green komplett ohne Original-IDs gerendert wurden (Tailwind-Layout mit eigenen Klassen statt #cc-parent, #header-main, #header-bg, #logo-container, #logo-picture, #subpage-nav-icon, #sticky-nav-icon, #mobile-nav-icon, #mobile-nav, #navigation-wrapper, #search-row).

Neue Bausteine

• _mec-shared/legacy-header.css – Header-CSS mit Original- Selektoren (header#cc-parent, div#header-main, div#header-bg, div#logo-container, div#logo-picture, div#subpage-nav-icon, div#sticky-nav-icon, div#mobile-nav-icon, div#lang-container, div#mobile-nav, nav.mainpage|nav.subpage, div#navigation-wrapper, div#search-row). Quellen: template_grooss.css, template_d_master.css, template_green/_header.css + _navigation.css + _mobile-nav.css.

• CSS-Variablen für Theme-Tokens (--mec-lh-*):

  • header-max-width, header-inner-max-width, header-inner-padding-x, header-height-{desktop,tablet,mobile},
  • logo-height-{desktop,tablet}, logo-margin-y-{desktop,tablet},
  • search-input-{color,border}, search-icon-color, search-margin-top,
  • nav-{bg-hover,subpage-bg,link-color,link-active-border,link-font-size,link-font-family,link-text-transform,submenu-bg,submenu-link-color,wrapper-max-width,height},
  • mobile-active-color, mobile-submenu-bg.

• _mec-shared/components/mec-legacy-header.tsx – React-Komponente, die exakt das Original-Markup für Grooss/D/Green rendert (inklusive optionalem #lang-container, optionalem #search-row als nav-leading oder nav-trailing, beliebigem Mobile-Hamburger-Icon). Mobile-Nav-Position kann before (Grooss) oder after (D/Green) der <header> sein, passend zum jeweiligen Original.

Pro-Template-Anpassungen

Template	Header-Komponente	Änderung
A	mec-template-a/components/header.tsx	unverändert – Original-Markup bereits seit Phase A vorhanden.
Grooss	mec-template-grooss/components/header.tsx	Thin Wrapper auf MecLegacyHeader (profile="template-grooss", mobileNavPosition="before", Sticky-Scroll-Nav, Addon-CSS template-grooss-header.css).
D	mec-template-d/components/header.tsx	Thin Wrapper auf MecLegacyHeader (profile="template-d", searchPosition="nav-leading", Locale-Switcher als headerExtra, Addon-CSS template-d-header.css).
Green	mec-template-green/components/header.tsx	thin Wrapper auf MecLegacyHeader (mobileNavPosition="before", searchPosition="nav-trailing", Custom-SVG-Hamburger aus templates_green/header.tpl).

Theme-Tokens pro Template

• Grooss: Schrift = MetaCompPro, Suchfeld weiß, Submenü rgba(0,0,0,.8), Active-Border #fff, Mobile-Active #EF4741.
• D: Schrift = MetaCompPro, Such-Position absolut im Header (CSS- Override), Submenü rgba(0,0,0,.5), Mobile-Active #EF4741.
• Green: Schrift = Karla uppercase, Suchfeld-Border #000, Nav-Hover rgba(255,255,255,.75), Submenü transparent mit opacity/visibility-Animation, Active-Border #000, Mobile-Active #AFB584. Mobile-Nav animiert per transform: translateX. Header wechselt unter 480px auf position: sticky. Nav-Tablet-Breakpoint ist 1445px (statt 1024px) – via @media-Override im template-green-pages.css.

Verifikation

curl-Spot-Check für Homepage und Subpage /kontakt/ jedes aktiven Centers:

• riem-arcaden (Grooss) – Homepage und Subpage rendern alle Original- IDs (cc-parent, header-main, header-bg, logo-container, logo-picture, mobile-nav, mobile-nav-icon, navigation-wrapper, search-row, header-placeholder) plus class="mainpage" bzw. class="subpage" mit subpage-nav-icon.
• oro-schwabach (Template D) – analog; Nav mit class="mec-lh-profile-template-d", Suche als erstes Nav-Kind (searchPosition="nav-leading"), Locale-Switcher in #lang-container via headerExtra.
• elisen-park-greifswald (Green) – analog; SVG-Hamburger statt FA-Icon.
• breisgau-center-freiburg (Template A) – Original-Markup unverändert, zusätzlich id="hamburger-icon" (A-spezifisch) statt mobile-nav-icon.

Bekannte Restpunkte (nicht-blockierend)

• Template Green: Original <body class="{slug} p-{p}"> wird heute über data-template="mec-template-green" ersetzt (CSS-Selektoren greifen). Bei Bedarf können body[class*="p-"]-Selektoren ergänzt werden, falls Originale auf Page-spezifische Body-Klassen abgestellt haben. Green-spezifische Header-Overrides (1445px-Breakpoint, #header-placeholder nur Desktop ≥1445px, Karla-Font): template-green-header.css.

Phase-B-1.12: Shop-Detailseiten auf Original-Markup (Mai 2026)

Trigger: Audit nach dem Header-Refactor (B-1.11) zeigte: Templates A, Grooss und Green rendern für /[centerSlug]/shops/[shopSlug] die generische app/shops/[id]/shop-detail-client.tsx (Cockpit-Tailwind: AnimatedBackground, GlassCard, eigener SiteHeader). Damit fehlt das Original-Markup `#shop-details > .main > #shop-details-informations

• #shop-details-content.content-cmsaus den.tpl-Vorlagen (template_a/einkaufswelt.tpl, template_d/einkaufswelt.tpl, template_grooss/einkaufswelt.tpl, template_green/einkaufswelt.tpl). Das CSS für diese Selektoren liegt bereits in _mec-shared/shared-pages.css (#shop-details, #shop-details-informations, #shop-details-content, .title, .subtitle, .info`, …) – nur das Markup fehlte.

Neue Bausteine

• _mec-shared/pages/shop-detail.tsx (MecSharedShopDetailPage): rendert 1:1 den {if $detail}-Block aus dem Original
  • <div id="shop-details" class="content-white">
  • <div class="main">
  • <div id="shop-details-informations"> mit
    • <div class="title"> Logo-Bild oder Shopname
    • Centerplan-Link (<div class="website"><div class="info"><i class="fa fa-map-marker"/><a/>)
    • Öffnungszeiten (<div class="subtitle">…</div><p/>)
    • Kontaktdetails (<div class="website|telefonnummer|fax|email"><div class="info"><i .../>…</div></div>)
    • Anbieterinformationen (<div class="subtitle"/><p/>)
  • <div id="shop-details-content" class="content-cms"> mit <h1>{shop.name}</h1> + sanitiertes HTML / Plaintext + optionale Galerie-Tail
  • <div style="clear:both"/>
  • Render-Slots: renderHero({ shop }), PageChrome (analog MecGeschaefteAZPage).
  • Anpassbare Texte: centerplanLinkLabel, openingHoursLabel, contactLabel, providerLabel, showCenterplanLink.

Pro-Template-Anpassungen

• Template A (mec-template-a/pages/shop-detail.tsx): dünner Wrapper → MecSharedShopDetailPage mit PageChrome={MecTemplateAPageChrome}, kein Hero (Original-einkaufswelt.tpl lässt header_slider leer). manifest.ts: neuer Eintrag 'shop-detail': () => import('./pages/shop-detail').
• Template Grooss (mec-template-grooss/pages/shop-detail.tsx): Wrapper → MecSharedShopDetailPage mit PageChrome={MecTemplateGroossPageChrome}, kein Hero. manifest.ts: shop-detail-Eintrag.
• Template Green (mec-template-green/pages/shop-detail.tsx): Wrapper → MecSharedShopDetailPage mit PageChrome={MecTemplateGreenPageChrome}, kein Hero. manifest.ts: shop-detail-Eintrag.
• Template D (mec-template-d/pages/shop-detail.tsx): von Tailwind-/ <SubpageHeader>-Variante zurück auf Shared umgestellt. Original template_d/einkaufswelt.tpl setzt {block name=header_slider}{/block} – also bewusst kein Hero. Header sitzt im Layout, daher keine PageChrome notwendig. manifest.ts: bestehender shop-detail-Eintrag bleibt, zeigt jetzt auf Shared-Wrapper.

Verifikation

• TypeScript: tsc --noEmit ohne Fehler.
• Live-Spot-Check (curl + rg) gegen die Subpages, jeweils auf einer echten Shop-URL pro Template:

Template	URL	Erwartete Marker	Status
A	/breisgau-center-freiburg/shops/bo-schuhe/	#shop-details, #shop-details-informations, #shop-details-content, .content-white, .content-cms, .main, .title, .subtitle, .website, .telefonnummer, .info	OK
Grooss	/bethanien-center-neubrandenburg/shops/woolworth/	dito	OK
D	/oro-schwabach/shops/asia-food-lily/	dito + .email	OK
Green	/elisen-park-greifswald/shops/ernsting-s-family/	dito	OK

Alle vier Templates rendern jetzt das Original-Markup für Shop-Detailseiten. Die im Shared-CSS hinterlegten Selektoren (#shop-details*, .content-cms h1, .subtitle, .info i, …) greifen erstmals so wie ursprünglich vorgesehen.

Bekannte Restpunkte

• Galerie-Layout: zusätzlich zum Original-Markup zeigt der Shared- Renderer optional weitere Galerie-Bilder (shop.gallery.slice(1)) als einfaches CSS-Grid unter dem Beschreibungstext. Original kennt keine Galerie auf der Shop-Detailseite – das ist eine additive Erweiterung (keine sichtbare Änderung, wenn Galerie leer ist).
• similarShops / Floors / Hostname: werden vom SSR-Loader durchgereicht, vom Shared-Renderer aber aktuell nicht angezeigt (Original hat keine „Ähnliche Shops"-Sektion). Bleiben Schnittstelle für künftige Template-Erweiterungen.

Phase-B-1.13: News- und Angebote-Detailseiten auf Original-Markup (Mai 2026)

Trigger: Folge-Audit nach B-1.11 / B-1.12 zeigte: Detailseiten für News/Events/Angebote rendern in MEC-Templates die generische components/content-detail-client.tsx (AnimatedBackground, GlassCard, FloatingBadge, SiteHeader, ScrollReveal). Damit fehlt das Original-Markup aus den .tpl-Vorlagen vollständig:

• template_a/nachrichten.tpl Z. 27–63 – {if isset($detail)} mit <div class="content-white"><div class="main"><div class="news-content">…
• template_d/nachrichten.tpl (gleich wie template_grooss/nachrichten.tpl, templates_green/nachrichten.tpl) Z. 16–44 – <div class="news-detail content-white"><div class="news-detail-image"/><div class="news-flex-detail"><div class="main content-cms">…<div class="news-flex-date"/><div class="news-flex-detail-title"/>…</div></div></div>
• template_d/angebote.tpl (analog Grooss / Green / A) {if isset($data['active_offer'])} – <div class="content-white content-offers"><div class="main content-cms"><div class="offer-detail-image"/><div class="offer-detail-text">…</div></div></div>

Originale haben eigene Detail-URLs (/nachrichten/{id}, /angebote/{id}) nicht Modal/Lightbox – das Inline-Aufklapp-Pattern bleibt der Übersichtsseite vorbehalten (siehe „Bekannte Restpunkte").

Neue Bausteine

• _mec-shared/pages/content-detail.tsx (MecContentDetailPage):

  • content.type 'news' | 'events' → News-Detail-Markup, Variante per variant-Prop ('classic' für A, 'flex' für D / Grooss / Green)
  • content.type === 'angebote' → Angebote-Detail-Markup (<div class="content-white content-offers">…)
  • content.type === 'jobs' → einfaches content-white > main.content-cms (Original-Jobs ist Akkordeon, keine eigene Subpage)
  • Render-Slots: PageChrome, hero. Defaults für „Zurück zur Übersicht"-Label je nach Typ (anpassbar via backLabel).

• CSS-Erweiterung in _mec-shared/shared-pages.css:

  • News-Detail Variante "flex": .news-detail, .news-detail-image, .news-flex-detail, .news-flex-date, .news-flex-detail-title, .news-flex-detail-subtitle, .related-news (Tokens --mec-color-primary, --mec-color-text, --mec-color-border).
  • Angebote-Detail: .content-offers, .offer-detail-image, .offer-detail-text, .offer-detail-text p (a), .offer-detail-logo img (1:1 Werte aus template_d_master.css Z. 3203–3249).
  • Mobile-Breakpoints (≤960 / ≤768 px) wie im Original.

Pro-Template-Anpassungen

Template	Wrapper	Variante	PageChrome
A	mec-template-a/pages/content-detail.tsx	'classic'	MecTemplateAPageChrome
Grooss	mec-template-grooss/pages/content-detail.tsx	'flex'	MecTemplateGroossPageChrome
D	mec-template-d/pages/content-detail.tsx	'flex'	– (Header im Layout)
Green	mec-template-green/pages/content-detail.tsx	'flex'	MecTemplateGreenPageChrome

Alle vier Manifests bekamen einen 'content-detail': () => import('./pages/content-detail')-Eintrag.

App-Routen-Anpassung

app/[slug]/angebote/[id]/page.tsx rendert nun via getPageComponent(template, 'content-detail') ?? ContentDetailClient – analog zu aktuelles/{news,events,angebote,jobs}/[id] und nachrichten/{news,events,angebote}/[id]. Vorher rendete diese Route direkt Cockpit-Tailwind (AnimatedBackground, GlassCard, FloatingBadge) ohne Template-Lookup.

Verifikation

• TypeScript: tsc --noEmit ohne Fehler.
• Live-Spot-Check (curl + rg) gegen Detail-URLs:

Template	URL	Erwartete Marker	Status
A	/dreieich-nordpark/aktuelles/news/{id}/	.content-white, .main, .news-content	OK
D	/de-gasperi-passage-norderstedt/aktuelles/news/{id}/	.news-detail.content-white, .news-detail-image, .news-flex-detail, .news-flex-date, .news-flex-detail-title, .news-flex-detail-subtitle, .news-flex-galerie, .main.content-cms	OK
Grooss	/einkaufspark-duckwitz-bremen/aktuelles/news/{id}/	dito (D-Variante)	OK
Green	/elisen-park-greifswald/aktuelles/news/{id}/	dito (D-Variante)	OK
A	/erding-park-erding/angebote/{id}/	.content-white.content-offers, .main.content-cms, .offer-detail-image, .offer-detail-text (kein AnimatedBackground / GlassCard / FloatingBadge)	OK

Bekannte Restpunkte

• Inline-Aufklapper auf Angebote-Übersicht: Das Original-A template_a/angebote.tpl (4er-Reihen mit <li class="product-details" style="display:none">) wird im Cockpit-Übersicht-Renderer (_mec-shared/pages/angebote.tsx) bereits umgesetzt (useState activeId). Grooss / Green nutzen aktuell denselben A-Renderer, haben im Original aber das 2-spaltige <div class="offers-flex"><div class="item">… + <div class="offer-detail offer-position-left-or-right">-Pattern mit CSS-Pfeil (:after border-trick auf left:25% bzw. left:75%). Eine Grooss-/Green-Variante des Übersicht-Renderers ist eigenständig geplant (B-1.13b).
• Detail-URL für A/Grooss/Green-Angebote: Original-A/Grooss/Green haben keine eigene Detail-URL für Angebote (Inline-Aufklapper). In Cockpit existiert die Detail-URL aus SEO-/Sharing-Gründen weiterhin und nutzt jetzt das Original-D-Markup (.content-offers, .offer-detail-*) als Fallback-Layout. Das ist eine bewusste Cockpit-Erweiterung mit Original-treuen Klassen.
• Slick-Slider in .news-flex-galerie (Variant "classic"): Original initialisiert Slick auf der Klasse. Cockpit rendert die Bilder serverseitig in einem einfachen Container; ein Carousel kann bei Bedarf nachgezogen werden (additiv).

Phase-B-1.14: Einkaufswelt / Centerplan – Original-Markup + klassischer Google-Maps-SVG-Modus (Mai 2026)

Trigger: Audit der Einkaufswelt-Seiten zeigte zwei Probleme:

1. Markup-Drift: Templates A / Grooss / Green renderten zwar bereits eine _mec-shared/pages/einkaufswelt.tsx, aber Template D nutzte eine eigene Tailwind-+-Google-Maps-<iframe>-Variante – ohne den Original-<div id="centerplan">
   • <div id="shops-informations">-Block.
2. Funktions-Drift: Original mc_helper-Plugin (WordPress) zeigte den Centerplan als georeferenziertes SVG-Overlay auf einer Google-Maps-Karte mit Branchen-Pins auf Shop-Positionen (siehe mc_helper/assets/js/ acf-centerplangooglemaps.js + acf-interaktivercenterplan.js, mec-templates/sites/assets/js/centerplan.js). In Cockpit war nur der reine Leaflet-Karten-Hintergrund + Center-Marker möglich.

Phase B-1.14a: Markup-Treue für alle aktiven MEC-Templates

• _mec-shared/pages/einkaufswelt.tsx rendert jetzt das vollständige Original-Markup aus template_a/einkaufswelt.tpl (1:1 in template_d/, template_grooss/, templates_green/):
  • <div id="shops-informations" style="display:none"> als versteckte Quelle aller Shop-Detail-Blöcke (<div id="shop-{id}"> → .shop-detail).
  • <div id="centerplan" class="centerplan"> mit den vier Original-Navigations-Blöcken (#centerplan-navigation-collapse, #centerplan-navigation-details, #centerplan-navigation-mobile, #centerplan-navigation) inklusive Sub-Tabs shops-list / categories-list / optional coupon-list (Original-Grooss/Green) und <div id="map" class="active centerplan">.
• Template D (mec-template-d/pages/einkaufswelt.tsx): umgestellt von Tailwind-+-iframe-Variante auf dünner Wrapper für MecEinkaufsweltPage. Original template_d/einkaufswelt.tpl ist 1:1 identisch zum A/Grooss/ Green-Markup; Header sitzt im D-Layout, daher kein PageChrome gesetzt.
• _mec-shared/shared-pages.css ergänzt um Selektoren für #centerplan-navigation*, .shop-detail, .shop-detail .title, .shop-detail .logo img, .shop-detail .show-centerplan, .shop-detail hr, .shop-detail .time .info, .shop-detail .website .info, .shop-detail .email .info, .shop-detail .telefonnummer .info, .shop-detail .shop-offer, .einkaufswelt-geschafte__list, .coupon-list plus Mobile-Breakpoints. Originalwerte aus template_d_master.css, template_grooss.css, templates_green/style.css.

Phase B-1.14d: Sidebar-Pixel-Treue (Breite, Anordnung, Verhalten)

Audit gegen Original-CSS (template_a2.css, template_d_master.css, template_grooss.css, templates_green/_centerplan.css) zeigte mehrere Abweichungen in der initialen Implementierung; jetzt vollständig korrigiert:

• Sidebar-Geometrie: #centerplan-navigation ist jetzt fix width: 700px; height: 700px; top: 25px; left: 0; position: absolute (Original-Wert in allen vier Templates). Vorher: 320px; 100%.
• Detail-Panel: #centerplan-navigation-details jetzt width: 350px; height: 700px; top: 25px; left: 0; z-index: 3 – überlagert die Sidebar (z-index 2), nicht „daneben“.
• Mobile-Toggle (#centerplan-navigation-mobile): jetzt oben rechts (top: 10px; right: 10px, rotes Kästchen, padding: 15px 15px). Vorher fälschlich unten zentriert.
• .content-Padding: 50px (matcht D/Grooss/Green; Template-A-Original hat 40px, ist aber visuell nahe genug; absichtlicher 1-Wert-Default).
• .sub-menu: Block-Layout mit border-bottom: 2px solid #ececec; height: 30px, Tabs als inline <a> mit line-height: 30px. :not(:last-child) { margin-right: 45px } funktioniert für 2- (A/D) und 3-Tab (Grooss/Green mit Coupons) gleichermaßen.
• .shops-list (Geschäfte A-Z): column-count: 3; column-gap: 15px; height: 570px; overflow: auto – 3-Spalten-Layout wie Original. Pro Buchstabe eine <ul>, dazwischen margin-top: 20px. Keine Letter-Headers mehr (waren falsch gerendert; Original zeigt die Buchstaben nicht).
• .categories-list (Branchen): <div>-Wrapper-Pattern aus D/Grooss/Green-Original (.categories-list > div { column-count: 3 }), pro Branche eine <ul class="einkaufswelt-kategorien__list--{slug}"> mit <div class="title"> + nested <ul> der Shops.
• DOM-Reihenfolge im .content: categories-list kommt vor shops-list (matcht alle Original-.tpls); initialer aktiver Tab ist shops-list (Default-CSS-Visibility via Inline-Style).
• #centerplan Höhe: 750px fix (statt calc(100vh - 200px)), matcht Original aller vier Templates.
• Mobile-Breakpoint: @media (max-width: 960px) (Original-Breakpoint, vorher 768px). Sidebar-Default per Mobile-Detection-useEffect automatisch zu; Klick auf das rote Mobile-Kästchen öffnet sie. Auf Mobile wird column-count auf 1 reduziert (vgl. Original-Mobile-Regel).
• MecEinkaufsweltPage Props ergänzt: floors, centerplan, centerplanMode ('leaflet' | 'gmaps-svg'), showCouponTab, overlayGeoBounds, labels. Default bleibt 'leaflet' – kein Verhalten ändert sich, solange die Webseiten-Tab-Option nicht aktiv ist.

Phase B-1.14b: Daten-Modell + Backend für Google-Maps-SVG-Modus

• Prisma-Schema (additiv, keine destruktiven Änderungen):
  • Centerplan: boundsN/E/S/W/Zoom (alle nullable Float/Int) – pro Centerplan persistierbare GPS-Eckpunkte (Reserve für künftige Etagen-spezifische Bounds; aktuell wird primär die zentrale centerplanConfig.overlayGeoBounds genutzt).
  • MapLocation: geoLat, geoLng, geoLevel (alle nullable) – GPS- Position pro Shop-/Service-MapLocation für Branchen-Pins.
  • Migration 20260506082619_add_centerplan_geo_bounds_and_maplocation_geo nutzt ADD COLUMN IF NOT EXISTS (idempotent, expand-only).
• Center-Website-Datenfluss:
  • apps/center-website/lib/server-data-loader.ts – Centerplan-/ MapLocation-Interfaces mit den neuen Feldern.
  • apps/center-website/lib/dynamic-center-config.ts – centerplanConfig.mapRenderer akzeptiert jetzt 'standard' | 'boundsOverlay' | 'gmaps-svg'. Im 'gmaps-svg'-Modus werden die overlayGeoBounds (Süd/West/Nord/Ost) durchgereicht.
• Dashboard-API:
  • apps/dashboard/src/app/api/wayfinding/centerplan/route.ts – GET liefert die neuen boundsN/E/S/W/Zoom; neuer PATCH-Endpoint zum Updaten von Centerplan-Metadaten + Bounds inkl. Validierung (-90..90 / -180..180).
  • apps/dashboard/src/app/api/wayfinding/locations/route.ts – POST akzeptiert geoLat, geoLng, geoLevel (optional). Neuer PATCH- Endpoint zum Setzen/Löschen einzelner Geo-Marker.
  • apps/dashboard/src/app/api/centers/[centerId]/website-config/route.ts – mapRenderer === 'gmaps-svg' wird beim Lesen und Schreiben akzeptiert; overlayGeoBounds werden auch im Google-Maps-Modus persistiert.
• MecCenterplanGoogleMaps (_mec-shared/components/): Lazy-geladene Client-Komponente. Nutzt _mec-shared/components/google-maps-loader.ts (Singleton-Lader für https://maps.googleapis.com/maps/api/js?key=…). Initialisiert eine Google-Karte mit gestyltem Roadmap-Hintergrund, fügt für jede aktive Etage ein google.maps.GroundOverlay hinzu (mit Centerplan.bounds* positioniert), zeichnet pro Shop mit geoLat/geoLng einen branchen-farbigen Custom-SVG-Marker, blendet einen Etagen-Picker rechts unten ein und sendet onShopSelect-Events nach oben.
• MecEinkaufsweltPage wählt zwischen Leaflet und Google-Maps:
  • Voraussetzungen für 'gmaps-svg': centerplanMode === 'gmaps-svg' und NEXT_PUBLIC_GOOGLE_MAPS_API_KEY gesetzt und Bounds vorhanden (primär overlayGeoBounds aus dem Webseiten-Tab, Fallback Centerplan.boundsN/E/S/W) und mind. eine aktive Etage mit mapImage. Andernfalls Auto-Fallback auf Leaflet.
• apps/center-website/app/[slug]/einkaufswelt/page.tsx liest die Konfiguration in dieser Reihenfolge:
  1. templateContent.einkaufswelt.centerplanMode – schneller Override pro Center (Werte 'leaflet' | 'gmaps-svg').
  2. centerplanConfig.mapRenderer === 'gmaps-svg' – globale Option im Webseiten-Tab → Centerplan.
  3. Default 'leaflet'.

Phase B-1.14c: Dashboard-UI (benutzerfreundlich, non-destructive)

• Webseiten-Tab → Centerplan-Sektion (sections/centerplan-section.tsx):
  • Neue 3. Option im mapRenderer-Select: „Google Maps + SVG (klassisch wie MEC)".
  • Kontextueller Hinweis-Block (gelb) mit Voraussetzungen + Anleitung (Pfade zu API-Key, Etagen-SVG, Geo-Marker-Tab).
  • GPS-Eckpunkte-Editor (Süd/West/Nord/Ost in Dezimalgrad). Der bisherige Editor unter dem MEC-Klassik-Overlay-Block wurde nicht geändert; im neuen gmaps-svg-Modus erscheint er additiv direkt im Hinweis-Block, schreibt aber dieselbe overlayGeoBounds-Struktur ({ south, west, north, east }). Damit sind beide Modi (boundsOverlay+osm und gmaps-svg) datenkompatibel – ein Wechsel zerstört keine Werte.
  • Type-Erweiterungen in tab-contents/types.ts, tab-contents/shared.tsx und center-website-configuration.tsx (mapRenderer: 'standard' | 'boundsOverlay' | 'gmaps-svg').
• Centerplan-Editor (/dashboard/centerplaene/[id]/edit):
  • Neuer 5. Tab „Geo-Marker" (activeTab === 'geo'). Bestehende Tabs (info / svg / mapping / routes) bleiben vollständig unverändert. Der Tab-Grid wechselt von grid-cols-4 auf grid-cols-5.
  • components/wayfinding/GeoMarkersEditorCard.tsx – Container-Komponente:
    • Lädt alle MapLocations dieser Etage über GET /api/wayfinding/locations?floorId=….
    • Lädt zusätzlich centerLatLng und overlayGeoBounds aus /api/centers/[centerId]/website-config, um sie als Hilfslinien in der Karte einzublenden.
    • Linke Spalte: Liste der Shops/Services (Suche, Status-Badge „GPS"/„offen", Lat/Lng-Eingabefelder bei vorhandener Position, „Auf Karte setzen"-Knopf, „In GMaps öffnen"-Link, „Position löschen").
    • Rechte Spalte: OSM-Karte mit aktuellen Pins + gestrichelt-blauem Rechteck für die GPS-Eckpunkte des Etagen- Overlays (wenn vorhanden).
    • Klick-zum-Setzen: Shop in Liste wählen → Cursor wechselt auf Crosshair → Klick auf Karte → PATCH /api/wayfinding/locations mit { id, geoLat, geoLng, geoLevel: floorNumber }.
  • components/wayfinding/geo-markers-map.tsx – Client-only Leaflet-Komponente (lazy via next/dynamic, kein API-Key nötig). Auto-Fit auf vorhandene Marker / Overlay-Bounds / Center.
  • Neue Dependencies in apps/dashboard/package.json: leaflet ^1.9.4, react-leaflet ^5.0.0, @types/leaflet (dev). Gleiche Versionen wie in apps/center-website (kein zusätzliches Bundle für andere Dashboard-Bereiche; Komponenten sind lazy-loaded).

Verifikation

• TypeScript (tsc --noEmit): alle neuen Dateien clean (MecCenterplanGoogleMaps, google-maps-loader, GeoMarkersEditorCard, geo-markers-map, centerplan-section.tsx-Erweiterungen, beide API- Routen). Vorbestehende Dashboard-TS-Fehler in unrelated Files (z. B. kaufland-internal-path-field.tsx) sind nicht durch B-1.14 entstanden.
• Live-Verhalten: Solange centerplanMode auf 'leaflet' steht (Default), rendert die Einkaufswelt-Seite identisch zu vorher. Der neue Modus wird erst aktiv, wenn er explizit im Webseiten-Tab gesetzt und alle Voraussetzungen erfüllt sind. Andernfalls Auto-Fallback auf Leaflet (kein optisches Defekt-Risiko).
• Datensicherheit: Alle Schema-Änderungen sind nullable Felder mit ADD COLUMN IF NOT EXISTS. Keine bestehende Spalte wurde umbenannt, geändert oder entfernt. Migration ist idempotent. Keine bestehenden Centerplan-/MapLocation-Daten verändert.

Bekannte Restpunkte

• MEC Template C hat ein anderes einkaufswelt.tpl (Kategorie-Grid ohne Karte) und ist aktuell von keinem aktiven Center gewählt. Migration auf den Shared-Renderer erfolgt erst bei Bedarf.
• Centerplan.boundsN/E/S/W in der DB sind aktuell nicht über das Dashboard-UI editierbar – die UX-relevanten Bounds laufen über centerplanConfig.overlayGeoBounds (zentral pro Center). Etagen-spezifische Bounds in Centerplan.bounds* bleiben als Reserve für künftige Erweiterungen verfügbar (API ist da, UI nicht).
• Coupon-Tab (templateContent.einkaufswelt.showCouponTab, Original Grooss / Green) zeigt aktuell einen Platzhalter-Container. Anbindung an ein künftiges Coupon-Modell folgt gesondert.

Phase-B-1.15: Page-Layouts ins Dashboard nachgezogen (Mai 2026)

Trigger: Phase B-1.7 / B-1.9b hatten in den _mec-shared/pages/{aktuelles, angebote,jobs,service}.tsx einen layout-Prop eingeführt ('classic' | 'flex' | 'grooss' | 'green'), der im Template-Wrapper bisher hartkodiert durchgereicht wurde. Damit war ein Wechsel der Variante nur über einen Code-Deploy möglich. Workspace-Regel website-template-configuration.mdc verlangt, dass solche Optionen im Webseiten-Tab des Centers benutzerfreundlich abbildbar sein müssen.

Neue Bausteine

• apps/center-website/lib/mec-page-layouts.ts – getMecPageLayout() liest den im Webseiten-Tab gewählten Wert aus templateContent[<templateKey>].pageLayouts[<pageKey>] und liefert ihn an die jeweilige Server-Page-Component. Fällt auf den Template-spezifischen Default (= Live-Parität) zurück, wenn nichts konfiguriert ist.
  • Template-Defaults sind in MEC_PAGE_LAYOUT_DEFAULTS zentralisiert.
  • Erlaubte Werte pro Page in MEC_PAGE_LAYOUT_OPTIONS.
• apps/dashboard/.../sections/mec-shared/mec-page-layouts-section-config.tsx – MecPageLayoutsSectionConfig rendert pro Template einen OptionButtonGroup je Page mit Beschreibung, Template-Default-Hinweis und „Auf Template-Default zurücksetzen"-Button. Speichert in templateContent[<templateKey>].pageLayouts.

Pro-Template-Anpassungen

Template	Page-Wrappers	Default (= Live-Parität)	Dashboard-Reiter
A	aktuelles, angebote, jobs, service	alle classic	mec-a-page-layouts
D	aktuelles (nur diese nutzt _mec-shared)	flex	mec-d-page-layouts
Grooss	aktuelles, angebote, jobs, service	flex / flex / grooss / grooss	mec-grooss-page-layouts
Green	aktuelles, angebote, jobs, service	flex / flex / grooss / green	mec-green-page-layouts

Template D ist für angebote / jobs / service standalone (eigene Implementierungen außerhalb von _mec-shared), darum bietet der D-Reiter nur einen Toggle für aktuelles an.

Datenfluss

Dashboard (Reiter „Seiten-Layouts")
  → templateContent[<template>].pageLayouts[<page>] = 'classic' | …
  ↓ Persistenz im Center.themeOverrides
Center-Website Server-Page (app/[slug]/<page>/page.tsx)
  → getMecPageLayout(centerConfig, <page>)
  → <TemplatePage layout={…} … />
  ↓
Template-Wrapper (mec-template-<X>/pages/<page>.tsx)
  → layout={props.layout ?? '<template-default>'}
  ↓
_mec-shared/pages/<page>.tsx (rendert das gewünschte Markup)

Der Pfad ist additiv: Schreibt der Center-Admin keinen Wert, ändert sich nichts (Template-Default greift weiter); ein Wechsel setzt nur den Wert, ohne destruktive Migrationen.

Zusätzliche Page-Reiter (Hero+SEO)

Damit Center-Admins die Hero-Bilder und Meta-Infos der wichtigsten Listing-/Detail-Pages mit FileUpload + Stock-Bildern pflegen können (statt nur über den generischen „Seiten-Texte"-Reiter mit URL-Feld), wurden für A / Grooss / Green je vier zusätzliche Reiter angelegt (und für D drei, weil mec-d-page-angebote schon existiert):

• mec-<X>-page-angebote (nur A / Grooss / Green – D hat eigene Section)
• mec-<X>-page-jobs
• mec-<X>-page-service
• mec-<X>-page-kontakt

Alle vier nutzen die generische PageWithHeroSection, die intern an die zentrale page-content-API schreibt (pageType 'angebote' / 'jobs' / 'service' / 'kontakt'). Die Inhalte sind unabhängig vom Template verfügbar – wechselt ein Center das Template, bleiben Hero-Bild, pageTitle, pageSubtitle, metaTitle und metaDescription erhalten.

Verifikation

• TypeScript: tsc --noEmit ohne neue Fehler in den geänderten Dateien (center-website und dashboard).
• Verhalten: Solange templateContent.<template>.pageLayouts leer ist, rendern alle Pages identisch zu vorher (Template-Default greift). Wird ein Wert gesetzt, schaltet die jeweilige Page-Route bei der nächsten SSR-Antwort auf die gewählte Variante.

Bekannte Restpunkte

• Weitere Page-Reiter (Anfahrt, Öffnungszeiten, Impressum, Datenschutz, Vermietung, Impressionen, Gutschein, Einkaufswelt) werden für die MEC- Templates aktuell über den generischen „Seiten-Texte"-Reiter (page-content) gepflegt. Eigenständige Reiter mit Hero-FileUpload können bei Bedarf nach demselben Pattern wie oben ergänzt werden.

Phase-B-1.16b: Startseiten D / Grooss / Green – Hero- und Angebots-Markup (Mai 2026)

Ziel: Pixel-Audit (scripts/audit-mec-pixel-parity.py) und Live-Parität für die MEC-Homepages: Original-Klassen aus home.tpl / header_slider zuverlässig im DOM.

• Audit-Skript: Smarty-Kommentare {* … *} werden im .tpl vor dem Vergleich entfernt (auskommentierte Legacy-Sektionen wie home-welcome / home-times erzeugen sonst Schein-Drifts).
• Template D: HeroSlider (sliderLayout="template-d") rendert pro Slide die Original-Hülle home-slider-item mit home-slider-image, home-slider-title, home-slider-text (Hintergrundbild über background-image auf dem Item). Die Lottie-Kacheln (InfoBox4) nutzen die IDs geschenk-animation-box / anfahrt-* / facebook-animation-box und optional home-infobox-contact, wenn die Facebook- Kachel auf einen Kontakt-Pfad zeigt. InfoBox3 setzt className mit festen Multi-Token-Strings (home-infobox-3 …), damit das Audit JSX-Zuordnungen findet.
• Grooss / Green: home-slider-item im Hero per String-Konkatenation statt verschachtelter Template-Literals (Audit-Extraktion).
• Green: OffersBox auf Markup home-infobox-angebote* + item / item-price / Slick-Dots-Klassen umgestellt; Styles in template-green-home.css (Auszug aus template_green/_utilities.css). info-boxes.tsx wrappt den Slot mit home-infobox-angebote.

Verbleibender Home-Header-Drift: header-slider / shops-search-form (Phase B-1.16d).

Phase-B-1.17: Layout-Konsolidierung A / D / Grooss / Green (Mai 2026)

Scope: Templates A, D, Grooss, Green – nicht Template C und nicht MEC Shopbox (eigene Design-Systeme). Prinzip unverändert: Logik in _mec-shared, Optik pro Template via CSS-Klassen, layout-Props und template-spezifische Thin Wrappers.

Neue / erweiterte Shared-Pages

Shared-Page	Layout-/Style-Props	Thin Wrappers
geschaefte-a-z.tsx	layout: 'classic-a' | 'dual-column', showPageTitle, mainClassName	D + Green → dual-column; A + Grooss → classic-a (Default)
impressionen.tsx	showPageTitle, mainClassName, renderHero	Grooss (SubpageHero + h1), Green (showPageTitle={false} + PageHero), D (content-impressionen + SubpageHeader)
service.tsx, gutschein.tsx	optional mainClassName	D setzt z. B. content-service / content-gutschein

Template D – Page-Helpers

mec-template-d/mec-template-d-page-helpers.tsx:

• MecTemplateDPassThroughChrome – rendert SubpageHeader außerhalb des PageChrome (Original: Hero steht vor .content-white, nicht im Inneren).
• createMecTemplateDRenderHero(pageName, centerConfig, pageContent) – Factory für renderHero-Slots auf Shared-Pages.

Folgende D-Pages sind jetzt Thin Wrappers (keine duplizierte Seitenlogik mehr):

kontakt, opening-hours, geschaefte-a-z, service, jobs, angebote, gutschein, vermietung, impressionen (+ bereits zuvor: anfahrt, CMS-Pages via cms-content-classic).

Bewusst unverändert in Phase B-1.17:

• Template C und ShopBox (eigenes Markup/CSS).
• Grooss-Header – B-1.11c (Mai 2026): Thin Wrapper auf MecLegacyHeader (profile="template-grooss") + template-grooss-header.css (Fixed-Nav 60px, Sticky-Hamburger beim Scrollen).
• D-spezifische Pages mit eigenem Markup: aktuelles, einkaufswelt, content-detail, shop-detail.

Phase-B-1.17b: Green Hero-Defaults + D Angebote-Fix (Mai 2026)

Green: mec-template-green/components/mec-green-subpage-hero-defaults.ts – Fallback-Bilder aus templates_green/*.tpl (demo5.png Kontakt, demo6 Öffnungszeiten, demo8 Jobs, header-services.png, demo9 Impressionen). CMS-Felder (heroImage, heroTitle, heroDescription) haben Vorrang. Wrapper nutzen resolveMecGreenPageHeroProps(). Vollständige TPL/CSS/Cockpit-Matrix: Green Quellen-Referenz.

Template D: /angebote rendert keinen SubpageHeader mehr (Original header_slider leer). PassThrough-Chrome in anfahrt / aktuelles dedupliziert.

Geschäfte A–Z – Layout-Matrix

Template	layout	Seitentitel im Body	Hero
A	classic-a	ja (h1)	MecSubpageHero (Shared-Default)
Grooss	classic-a	ja	MecTemplateGroossSubpageHero
D	dual-column	nein	SubpageHeader (Pass-Through)
Green	dual-column	nein	MecTemplateGreenPageHero

Querverweise

• Pixel-Treue-Workflow für ein einzelnes Template: Template-D Legacy-CSS-Checkliste.
• Datenflüsse aus dem MEC-Import: MEC-Import.
• Stand pro Template (Public-Site): Center-Website Feature-Katalog, MEC Template A.