MEC Template Green – Source Reference (TPL → CSS → Cockpit)

This page maps original sources (templates_green/, template_green/_*.css) to the Cockpit implementation (mec-template-green/ + _mec-shared/). It serves as the working basis for pixel audits – always check with computed styles, not just read HTML/TPL (CSS overrides can make elements invisible, even if they are present in the DOM).

Classification: Fork of Grooss/D

Template Green is not a greenfield, but a design fork of the Grooss/D line:

Relation	TPL Files (byte-identical)
Grooss	`angebote`, `content`, `datenschutz`, `einkaufswelt`, `geschaefte-a-z`, `gutschein`, `hotspot`, `impressum`, `master`, `rechtliche-hinweise`, `teilnahmebedingungen`
D	additionally `content`, `geschaefte-a-z`, `master` (overlap with Grooss)

Green self-development: new hero system (.page-header, 440px, olive block #AFB584 + background image), revised home.tpl, modularized CSS under template_green/_*.css.

Source Paths

Type	Path
Smarty-TPL	`mec-templates/site_templates/templates_green/*.tpl`
CSS Partials	`mec-templates/sites/assets/css/template_green/_*.css`
JS	`mec-templates/sites/assets/js/template_green.js`
Demo Assets	`mec-templates/sites/assets/img/template_green/` (e.g., `demo5.png` … `demo9.png`)
Live Reference	elisenpark.de (Elisen Park Greifswald)
Cockpit CSS	`apps/center-website/components/templates/mec-template-green/template-green-{home,pages,footer}.css`
Shared Pages	`apps/center-website/components/templates/_mec-shared/pages/` + `shared-pages.css`

Hero Patterns (Original)

Pattern	CSS	Height	Pages
`.page-header`	`_content.css`, `_grid.css`	440px	kontakt, jobs, service, oeffnungszeiten, impressionen
`.subpage-header`	`_grid.css`, `_utilities.css`	360px	gutschein (like Grooss/D)
no hero	–	–	home (custom slider), angebote, anfahrt, nachrichten, geschaefte-a-z, legal, einkaufswelt

Default images in TPL show_template branch → Cockpit fallback in mec-green-subpage-hero-defaults.ts (CMS fields take precedence).

Page Reference

Legend: Shared = logic in _mec-shared/; Hero Component = Green-specific.

Route / Slug	Original TPL	Hero (Original)	Body Markup (Original)	CSS Partials (Legacy)	Cockpit Page	Shared	Compared to Grooss/D
`/` (Home)	`home.tpl`	`.home-slider`	`.home-infobox-top/bottom`, `.box-*`	`_home.css`, `_slider.css`, `_info-boxes.css`	`index.tsx` + `hero-slider.tsx`, `info-boxes.tsx`, `offers-box.tsx`	–	Home structure ≈ Grooss, Green skin
`/aktuelles`, `/nachrichten`	`nachrichten.tpl`	none	`.news-flex`, `.news-flex-main-left/right`	`_shops.css` (`.news-flex-*`)	`pages/aktuelles.tsx`	`MecAktuellesPage` (`layout=flex`)	≈ D/Grooss (12 lines diff to Grooss)
`/angebote`	`angebote.tpl`	none	`.offers-flex`, `.offer-detail`	`_shops.css`, `_offers.css`	`pages/angebote.tsx`	`MecAngebotePage` (`layout=flex`)	= Grooss
`/einkaufswelt`, Centerplan	`einkaufswelt.tpl`	none	`#centerplan`, `#shop-details`	`_centerplan.css`, `_shops.css`	`pages/einkaufswelt.tsx`	`MecEinkaufsweltPage`	= Grooss
`/shops`, `/geschaefte-a-z`	`geschaefte-a-z.tpl`	none	`.main.content-cms`, two `.shop-list` columns	`_shops.css`, `_grid.css`	`pages/geschaefte-a-z.tsx`	`MecGeschaefteAZPage` (`dual-column`)	= Grooss/D
`/oeffnungszeiten`	`oeffnungszeiten.tpl`	`.page-header`	`#times-main`, `#times-weekdays`, `#times-shops`	`_times.css`, `_content.css`	`pages/opening-hours.tsx`	`MecOpeningHoursPage`	Body ≈ Grooss, Hero Green-only
`/anfahrt`	`anfahrt.tpl`	none	`#map-router`, `.verkehrsmittel`	`_google-maps.css`, `_verkehrsmittel.css`	`pages/anfahrt.tsx`	`MecAnfahrtPage`	≈ Grooss/D (empty slider)
`/kontakt`	`kontakt.tpl`	`.page-header`	`#contact-head`, `#contact-form`	`_contact.css`, `_content.css`	`pages/kontakt.tsx`	`MecKontaktPage`	Body custom structure, Hero Green-only
`/service`	`service.tpl`	`.page-header`	`.services` / `.service` tiles	`_service.css`, `_content.css`	`pages/service.tsx`	`MecServicePage` (`layout=green`)	Hero Green-only
`/jobs`	`jobs.tpl`	`.page-header`	`.content-jobs`, `.job`, `.job-wrapper`	`_jobs.css`, `_content.css`	`pages/jobs.tsx`	`MecJobsPage` (`layout=grooss`)	Hero Green-only
`/impressionen`	`impressionen.tpl`	`.page-header`	`.impressionen-slider`, `.slider-nav`	`_content.css`, `_news.css`	`pages/impressionen.tsx`	`MecImpressionenPage`	Hero Green-only
`/gutschein`	`gutschein.tpl`	`.subpage-header`	`.main.content-cms`, h1 + texts	`_grid.css`, `_utilities.css`	`pages/gutschein.tsx`	`MecGutscheinPage`	= Grooss (header type)
`/impressum`	`impressum.tpl`	none	`.main.content-cms.impressum`	`_content.css`	`pages/impressum.tsx`	`MecCmsContentClassicPage`	= Grooss
`/datenschutz`	`datenschutz.tpl`	none	`.main.content-cms`	`_content.css`	`pages/datenschutz.tsx`	`MecCmsContentClassicPage`	= Grooss
`/rechtliche-hinweise`	`rechtliche-hinweise.tpl`	none	`.main.content-cms`	`_content.css`	`pages/rechtliche-hinweise.tsx`	`MecCmsContentClassicPage`	= Grooss
`/teilnahmebedingungen`	`teilnahmebedingungen.tpl`	none	`.main.content-cms`	`_content.css`	`pages/teilnahmebedingungen.tsx`	`MecCmsContentClassicPage`	= Grooss
News/Offer Detail	`nachrichten.tpl` / `angebote.tpl`	none	`.news-flex-detail` / `.offer-detail`	`_shops.css`	`pages/content-detail.tsx`	`MecContentDetailPage`	≈ D/Grooss
Shop Detail	`einkaufswelt.tpl`	none	`#shop-details`	`_shops.css`	`pages/shop-detail.tsx`	`MecSharedShopDetailPage`	≈ Grooss
`/vermietung`	– (only nav-link in `header.tpl`)	–	–	–	`pages/vermietung.tsx`	`MecVermietungPage`	Cockpit invention (external MEC link in original)

Layout Shell (all pages)

Area	Original	Cockpit
Header	`header.tpl` + `_header.css`, `_navigation.css`, `_mobile-nav.css`	`components/header.tsx` → `_mec-shared/components/mec-legacy-header.tsx`
Page Chrome	Hero before `{block body}` in TPL	`mec-template-green-page-chrome.tsx` (`renderHero` slot)
Hero `.page-header`	`_content.css`	`components/page-hero.tsx` → `MecTemplateGreenPageHero`
Hero `.subpage-header`	`_grid.css`, `_utilities.css`	`MecTemplateGreenSubpageHero` (only Gutschein)
Home Page Hero	`.home-slider` + `_slider.css` / live-`teaser.css`	`components/hero-slider.tsx` + tab Hero Slider (`mec-green-hero-editor.tsx`)
Footer	`footer.tpl` + `_footer.css`	`components/footer.tsx` + `template-green-footer.css`
Tokens / Scope	`template_green.css` (bundle)	`[data-template="mec-template-green"]` in `template-green-pages.css`

CSS Partial Index (`template_green/_*.css`)

File	Content / Affected Pages
`_base.css`	Reset, body, container
`_fonts.css`	Karla, Roboto
`_header.css`	`#header-bg`, logo, nav heights
`_navigation.css`	Desktop nav `.subpage` / `.mainpage`
`_mobile-nav.css`	`#mobile-nav`, SVG hamburger
`_footer.css`	Footer columns, social
`_home.css`	Home page general
`_slider.css`	`.home-slider`, `.home-slider-item`
`_info-boxes.css`	`.box-times`, `.box-einkaufswelt`, hover
`_content.css`	`.page-header` (Green-only, 440px, `#AFB584`)
`_grid.css`	`.page-header`, `.subpage-header`, shop list grid
`_shops.css`	`.shop-list`, `.offers-flex`, *`.news-flex-`**, shop detail
`_offers.css`	offer detail, price badges
`_times.css`	`#times-main`, `#times-weekdays`, shop time bars
`_contact.css`	`#contact-head`, `#contact-form`
`_service.css`	`.services`, `.service` tiles
`_jobs.css`	`.content-jobs`, `.job-title`
`_verkehrsmittel.css`	`.verkehrsmittel` (access)
`_google-maps.css`	`#map-router`
`_centerplan.css`	`#centerplan`, `#centerplan-navigation`
`_news.css`	news gallery, impressions slider
`_utilities.css`	`.subpage-header-background` (360px), utility classes

Cockpit selectively ports these rules to template-green-*.css and _mec-shared/shared-pages.css – not every legacy line is adopted 1:1 (see Legacy CSS Checklist).

Home Hero (Dashboard)

Storage: templateContent['mec-template-green'].hero.slides[].

Field	Meaning
`backgroundImage`	Full-background image (mandatory for new slides)
`title.line1` / `line2`	Two-line title, each with its own color and optional px size
`subtitle.text`	Subtitle under the title (italic, own color/size)
`contentBox.color` / `opacity`	Transparent box left behind title + subtitle (default: olive `#AFB584`, 70%)
`startDate` / `endDate`	Slide temporal in/out display
`link`, `badge`	Optional

Legacy slides with HTML title (<span class="white"> …) will be migrated when loading the dashboard; on the website, legacy HTML remains supported as fallback.

Hero Defaults (Subpages)

pageSlug	Legacy File (TPL)	Default URL (Cockpit)
`kontakt`	`demo5.png`	`…/demo5.png` + title “CONTACT”, subtitle “We are here for you."
`oeffnungszeiten`	`demo6.png`	`…/demo6.png`
`jobs`	`demo8.png`	`…/demo8.png`
`service`	`header-services.png`	`…/header-services.png`
`impressionen`	`demo9.png`	`…/demo9.png`
`gutschein`	CMS only (subpage-header)	`header_gutscheine.svg` (MEC legacy path)

Base URL images: https://elisenpark.de/assets/img/template_green/ (see mec-green-subpage-hero-defaults.ts).

Audit Notes

Don't just read TPL: for example, nav.subpage is present in the DOM but can have display:none or height:0; #map-router has inline 650px, computed often 360px.
Green ≠ Grooss for Heroes: applying Grooss SubpageHeader defaults to Green is incorrect – there .page-header has 440px and an olive block.
Shared Pages: reuse body logic in _mec-shared, aesthetics via Green CSS + hero components.
Pixel Audit Script: scripts/audit-mec-pixel-parity.py (template green).

Classification: Fork of Grooss/D​

Source Paths​

Hero Patterns (Original)​

Page Reference​

Layout Shell (all pages)​

CSS Partial Index (template_green/_*.css)​

Home Hero (Dashboard)​

Hero Defaults (Subpages)​

Audit Notes​

See also​