MEC Template Green – Quellen-Referenz (TPL → CSS → Cockpit)

Diese Seite mappt Original-Quellen (templates_green/, template_green/_*.css) auf die Cockpit-Implementierung (mec-template-green/ + _mec-shared/). Sie ist die Arbeitsgrundlage für Pixel-Audits – immer mit Computed Styles prüfen, nicht nur HTML/TPL lesen (CSS-Overrides können Elemente unsichtbar machen, obwohl sie im DOM stehen).

Einordnung: Fork von Grooss/D

Template Green ist kein Greenfield, sondern ein Design-Fork der Grooss/D-Linie:

Verwandtschaft	TPL-Dateien (byte-identisch)
Grooss	`angebote`, `content`, `datenschutz`, `einkaufswelt`, `geschaefte-a-z`, `gutschein`, `hotspot`, `impressum`, `master`, `rechtliche-hinweise`, `teilnahmebedingungen`
D	zusätzlich `content`, `geschaefte-a-z`, `master` (Überschneidung mit Grooss)

Green-Eigenentwicklung: neues Hero-System (.page-header, 440px, Oliv-Block #AFB584 + Hintergrundbild), überarbeitetes home.tpl, modularisiertes CSS unter template_green/_*.css.

Quell-Pfade

Typ	Pfad
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/` (z. B. `demo5.png` … `demo9.png`)
Live-Referenz	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-Muster (Original)

Muster	CSS	Höhe	Seiten
`.page-header`	`_content.css`, `_grid.css`	440px	kontakt, jobs, service, oeffnungszeiten, impressionen
`.subpage-header`	`_grid.css`, `_utilities.css`	360px	gutschein (wie Grooss/D)
kein Hero	–	–	home (eigener Slider), angebote, anfahrt, nachrichten, geschaefte-a-z, legal, einkaufswelt

Default-Bilder im TPL-show_template-Zweig → Cockpit-Fallback in mec-green-subpage-hero-defaults.ts (CMS-Felder haben Vorrang).

Seiten-Referenz

Legende: Shared = Logik in _mec-shared/; Hero-Komponente = Green-spezifisch.

Route / Slug	Original-TPL	Hero (Original)	Body-Markup (Original)	CSS-Partials (Legacy)	Cockpit-Page	Shared	An 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-Struktur ≈ Grooss, Green-Skin
`/aktuelles`, `/nachrichten`	`nachrichten.tpl`	keiner	`.news-flex`, `.news-flex-main-left/right`	`_shops.css` (`.news-flex-*`)	`pages/aktuelles.tsx`	`MecAktuellesPage` (`layout=flex`)	≈ D/Grooss (12 Zeilen Diff zu Grooss)
`/angebote`	`angebote.tpl`	keiner	`.offers-flex`, `.offer-detail`	`_shops.css`, `_offers.css`	`pages/angebote.tsx`	`MecAngebotePage` (`layout=flex`)	= Grooss
`/einkaufswelt`, Centerplan	`einkaufswelt.tpl`	keiner	`#centerplan`, `#shop-details`	`_centerplan.css`, `_shops.css`	`pages/einkaufswelt.tsx`	`MecEinkaufsweltPage`	= Grooss
`/shops`, `/geschaefte-a-z`	`geschaefte-a-z.tpl`	keiner	`.main.content-cms`, zwei `.shop-list`-Spalten	`_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`	keiner	`#map-router`, `.verkehrsmittel`	`_google-maps.css`, `_verkehrsmittel.css`	`pages/anfahrt.tsx`	`MecAnfahrtPage`	≈ Grooss/D (leerer Slider)
`/kontakt`	`kontakt.tpl`	`.page-header`	`#contact-head`, `#contact-form`	`_contact.css`, `_content.css`	`pages/kontakt.tsx`	`MecKontaktPage`	Body eigene Struktur, Hero Green-only
`/service`	`service.tpl`	`.page-header`	`.services` / `.service` Kacheln	`_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 + Texte	`_grid.css`, `_utilities.css`	`pages/gutschein.tsx`	`MecGutscheinPage`	= Grooss (Header-Typ)
`/impressum`	`impressum.tpl`	keiner	`.main.content-cms.impressum`	`_content.css`	`pages/impressum.tsx`	`MecCmsContentClassicPage`	= Grooss
`/datenschutz`	`datenschutz.tpl`	keiner	`.main.content-cms`	`_content.css`	`pages/datenschutz.tsx`	`MecCmsContentClassicPage`	= Grooss
`/rechtliche-hinweise`	`rechtliche-hinweise.tpl`	keiner	`.main.content-cms`	`_content.css`	`pages/rechtliche-hinweise.tsx`	`MecCmsContentClassicPage`	= Grooss
`/teilnahmebedingungen`	`teilnahmebedingungen.tpl`	keiner	`.main.content-cms`	`_content.css`	`pages/teilnahmebedingungen.tsx`	`MecCmsContentClassicPage`	= Grooss
News/Angebot-Detail	`nachrichten.tpl` / `angebote.tpl`	keiner	`.news-flex-detail` / `.offer-detail`	`_shops.css`	`pages/content-detail.tsx`	`MecContentDetailPage`	≈ D/Grooss
Shop-Detail	`einkaufswelt.tpl`	keiner	`#shop-details`	`_shops.css`	`pages/shop-detail.tsx`	`MecSharedShopDetailPage`	≈ Grooss
`/vermietung`	– (nur Nav-Link in `header.tpl`)	–	–	–	`pages/vermietung.tsx`	`MecVermietungPage`	Cockpit-Erfindung (externer MEC-Link im Original)

Layout-Schale (alle Seiten)

Bereich	Original	Cockpit
Header	`header.tpl` + `_header.css`, `_navigation.css`, `_mobile-nav.css`	`components/header.tsx` → `_mec-shared/components/mec-legacy-header.tsx`
PageChrome	Hero vor `{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` (nur Gutschein)
Hero Startseite	`.home-slider` + `_slider.css` / Live-`teaser.css`	`components/hero-slider.tsx` + Reiter 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`)

Datei	Inhalt / betroffene Seiten
`_base.css`	Reset, Body, Container
`_fonts.css`	Karla, Roboto
`_header.css`	`#header-bg`, Logo, Nav-Höhen
`_navigation.css`	Desktop-Nav `.subpage` / `.mainpage`
`_mobile-nav.css`	`#mobile-nav`, SVG-Hamburger
`_footer.css`	Footer-Spalten, Social
`_home.css`	Startseite allgemein
`_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-Listen-Grid
`_shops.css`	`.shop-list`, `.offers-flex`, *`.news-flex-`**, Shop-Detail
`_offers.css`	Angebote-Detail, Preis-Badges
`_times.css`	`#times-main`, `#times-weekdays`, Shop-Zeitbalken
`_contact.css`	`#contact-head`, `#contact-form`
`_service.css`	`.services`, `.service` Kacheln
`_jobs.css`	`.content-jobs`, `.job-title`
`_verkehrsmittel.css`	`.verkehrsmittel` (Anfahrt)
`_google-maps.css`	`#map-router`
`_centerplan.css`	`#centerplan`, `#centerplan-navigation`
`_news.css`	News-Galerie, Impressionen-Slider
`_utilities.css`	`.subpage-header-background` (360px), Hilfsklassen

Cockpit portiert diese Regeln selektiv nach template-green-*.css und _mec-shared/shared-pages.css – nicht jede Legacy-Zeile ist 1:1 übernommen (siehe Legacy-CSS-Checkliste).

Startseiten-Hero (Dashboard)

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

Feld	Bedeutung
`backgroundImage`	Vollflächiges Hintergrundbild (Pflicht für neue Slides)
`title.line1` / `line2`	Zweizeiliger Titel, jeweils eigene Farbe und optional px-Größe
`subtitle.text`	Untertitel unter dem Titel (kursiv, eigene Farbe/Größe)
`contentBox.color` / `opacity`	Transparenter Kasten links hinter Titel + Untertitel (Standard: Olive `#AFB584`, 70 %)
`startDate` / `endDate`	Slide zeitlich ein-/ausblenden
`link`, `badge`	Optional

Legacy-Slides mit HTML-Titel (<span class="white"> …) werden beim Laden im Dashboard migriert; auf der Website bleibt Legacy-HTML als Fallback unterstützt.

Hero-Defaults (Subpages)

pageSlug	Legacy-Datei (TPL)	Default-URL (Cockpit)
`kontakt`	`demo5.png`	`…/demo5.png` + Titel „KONTAKT“, Untertitel „Wir sind für Sie da."
`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-Pfad)

Basis-URL Bilder: https://elisenpark.de/assets/img/template_green/ (siehe mec-green-subpage-hero-defaults.ts).

Audit-Hinweise

Nicht nur TPL lesen: z. B. nav.subpage steht im DOM, kann aber display:none oder height:0 haben; #map-router hat inline 650px, computed oft 360px.
Green ≠ Grooss bei Heroes: Grooss-SubpageHeader-Defaults auf Green anwenden ist falsch – dort .page-header mit 440px und Oliv-Block.
Shared-Pages: Body-Logik in _mec-shared wiederverwenden, Optik über Green-CSS + Hero-Komponenten.
Pixel-Audit-Skript: scripts/audit-mec-pixel-parity.py (Template green).

Siehe auch

MEC Template Green – Legacy-CSS-Checkliste
Gemeinsame MEC-Bausteine (_mec-shared/) – Phase B-1.9 / B-1.17b
MEC Pixel-Audit (Mai 2026)
Cockpit: apps/center-website/components/templates/mec-template-green/manifest.ts

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /developer-guide/mec-template-green-quellen-referenz

Einordnung: Fork von Grooss/D​

Quell-Pfade​

Hero-Muster (Original)​

Seiten-Referenz​

Layout-Schale (alle Seiten)​

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

Startseiten-Hero (Dashboard)​

Hero-Defaults (Subpages)​

Audit-Hinweise​

Siehe auch​