MEC Template A („Rot“ / Legacy template_a)

Das Website-Template mec-template-a orientiert sich an der klassischen MEC-Startseite (Reihenfolge der Sektionen und DOM-Struktur wie home.tpl / template_a2.css), wird technisch aber als React/Next.js-Implementierung unter apps/center-website/components/templates/mec-template-a gepflegt.

---

Globales Layout (wie header.tpl / #container)

• Fixierter weißer Kopf (Logo, Öffnungsstatus, Geschäftssuche wie legacy #search-row) bis max. 1440px Breite, darunter Platzhalter (#header-placeholder, 96px / mobil 60px).
• Hero bzw. Seiten-Teaser im Bereich #header-slider / #slider-wrapper (Startseite: Slider; Unterseiten: farbiger Balken).
• Rote Hauptnavigation direkt unter dem Hero-Bereich (Desktop ≥960px; mobil Flyout unter dem Hamburger). Technisch: MecTemplateAPageChrome auf allen Template-A-Seiten.
• Inhaltsspalte weiß, maximal 1440px, zentriert – Seitenrand #eae9e7 wie im Original.

---

Startseite: Reihenfolge der Bereiche

1. Hero-Slider (wenn hero.slides gesetzt) – Details unter Hero: frei positioniert
2. Rote Hauptnavigation (unter dem Slider)
3. Shop-Leiste (weißer Streifen mit Logos, wenn Shops vorhanden)
4. Anfahrt-Quicklink (sichtbar unterhalb der Shop-Leiste unter ~960px Breite)
5. Erste Info-Zeile #home-times – zwei Infokacheln (infoboxen 0–1)
6. Angebote (optional, bis zu vier Kacheln) – nur wenn im Cockpit Angebote/Highlights existieren; zwischen den Infokachel-Zeilen
7. Zweite Info-Zeile #home-categories – Infokacheln 2–3
8. Willkommen-Teaser (#home-welcome-teaser) – Titel, Text, drei Service-Icons, Link zur Service-Seite
9. Graue Willkommens-Sektion (#home-welcome / welcomeGray; Fallback: veraltetes welcome)

Akzentfarbe und Footer-Karte nutzen die Primärfarbe (primaryColor, Standard #e20018).

---

Hero (Homepage)

Template Rot nutzt auf der Homepage das klassische Flexslider-Layout aus template_a2.css (feste Positionen, keine freie %-Platzierung):

• Titel = immer Grafik (titleImage / API-Feld titel als Bild-URL) – entspricht <div class="title"><img …></div> im Original.
• Untertitel = Fließtext (subtitle / description / beschreibung), optional mit <br>.
• Motiv = Bild rechts (motivImage / image / API motiv).

Im Dashboard-Reiter Hero Slider heißt das Feld bei Template Rot Titel-Grafik (Upload), nicht Fließtext-Titel.

Layout-Felder (titleLayout, …) aus dem Hero-Editor v2 werden auf der Homepage nicht angewendet – Subpages können weiterhin eigene Hero-Konfigurationen haben.

---

Infokacheln (Homepage)

Vier Kacheln im 2×2-Raster (wie template_a/home.tpl):

Position	DOM-ID	Standard-Inhalt
Oben links	#home-times-left	Öffnungszeiten
Oben rechts	#home-times-right	Unsere Geschäfte
Unten links	#home-categories-left	Schenken leicht gemacht
Unten rechts	#home-categories-right	Geniessen leicht gemacht

Dashboard-Reiter „Info-Kacheln“: pro Kachel Titel, Untertitel (mehrzeilig), Icon, Hintergrundbild, Link. Button Original-Standard stellt die MEC-Live-Fallbacks wieder her (Breisgau-Standard).

Standard-Assets (Icons + Hintergrundbilder) liegen gebündelt unter public/templates/mec-template-a/infobox/ und werden ohne Upload vorausgefüllt – Markup und CSS entsprechen template_a2.css (.info-box, Icon mit margin-top: 33%, Titel als <div>, Untertitel in <p>).

Diese vier Kacheln sind immer auf der Startseite sichtbar (mit Fallbacks) – unabhängig von Angeboten im Cockpit.

---

Angebote auf der Startseite (optional, zusätzlich)

Getrennt von den Infokacheln: Bis zu vier Angebots-Kacheln (.offers.home) erscheinen nur, wenn im Cockpit aktive Angebote/Highlights vom Typ „Angebot“ vorhanden sind. Sie liegen zwischen #home-times und #home-categories – exakt wie im Legacy-home.tpl.

• Keine Angebote im Cockpit → der Block wird nicht gerendert; die zweite Infokachel-Zeile schließt direkt an die erste an (bzw. an die Shop-Leiste, wenn keine Angebote dazwischen liegen).
• Mit Angeboten → vier Kacheln mit Titel, Shop-Logo, Bild und Preis/% aus den Cockpit-Daten.

Konfiguration erfolgt nicht im Reiter „Info-Kacheln“, sondern über die Angebots-/Highlight-Pflege im Cockpit.

---

Willkommen-Teaser (Homepage)

Unter den vier Infokacheln erscheint der weiße Bereich #home-welcome-teaser (wie home.tpl / template_a2.css):

Element	Beschreibung
Titel	z. B. „Willkommen im Breisgau-Center“
Text	Fließtext (zentriert, 70 % Breite auf Desktop)
Service 1–3	Icon + Bezeichnung (optional mit Link)
Service 4	More-Icon verlinkt auf /service (oder konfiguriertes Ziel); Bezeichnung darunter (z. B. „weitere Services“)

Dashboard-Reiter „Willkommen“: Titel, Text, drei Services (Icon + Label, optional Link) und vierter Eintrag (Icon, Label, Service-Link). Leere Felder nutzen den MEC-Original-Standard (Breisgau-Assets). Ohne Cockpit-Daten wird der Bereich trotzdem mit Fallbacks gerendert – der Centername fließt automatisch in den Standard-Titel ein (Willkommen im …).

Graue Sektion darunter (#home-welcome / welcomeGray): Überschrift optional im Reiter „Willkommen“; Fließtext aus der Center-Beschreibung (Stammdaten); Bild aus dem Titelbild des Centers. Zeilenumbrüche und HTML aus der Beschreibung werden übernommen.

---

Einkaufswelt (/einkaufswelt)

Die Shop-Übersicht im MEC-Original ist die Einkaufswelt: Centerplan, Sidebar (Geschäfte A–Z, Kategorien), Shop-Detail-Panel. Implementierung: _mec-shared/pages/einkaufswelt.tsx (Thin Wrapper pro Template).

• /shops leitet bei Template Rot permanent auf /einkaufswelt um (kein separates Tailwind-Shops-Layout mehr).
• Shop-Detailseiten bleiben unter /shops/{slug} (Cockpit-Routing).
• Dashboard-Reiter „Seite: Einkaufswelt“ speichert Page-Content unter pageType: einkaufswelt (Titel u. a. für die Seite).

---

• Logo oben links (#logo-container), Suche + Social-Icons oben rechts (#search-row), wie template_a/header.tpl.
• Social-Links stammen aus footer.social (Facebook, Twitter, Instagram) bzw. den Center-Social-Daten; Icons wie im MEC-Original (graue Kreise).

---

Hero: frei positioniert (Dashboard – nur Subpages / künftig)

Der Reiter Hero Slider speichert pro Slide Layout-Felder des Hero-Slider-Editors v2. Auf der Homepage bleibt die Darstellung beim Fest-Layout oben; die freie Platzierung ist für andere Kontexte vorgesehen.

• Mit Layout-Daten in titleLayout, …: in anderen Templates / künftigen Erweiterungen frei positioniert.
• Auf der Template-A-Homepage gilt weiterhin: Titel-Grafik + feste CSS-Positionen.

backgroundImage dient primär als Hintergrund; das Motiv rechts kommt aus motivImage / image.

---

Footer (rote Karte + dunkler Balken)

Der Footer entspricht der klassischen MEC-Optik (z. B. Breisgau-Referenz):

1. Oberer Bereich (#footer-red-map), nur wenn eine Karte eingebunden ist: Google-Maps-Embed (Fallback-URL aus der Kontaktadresse des Centers, sofern Straße/Ort gesetzt). Hinter dem iframe liegt die Primärfarbe; per CSS-Filter wirkt die Karte wie eine rote Kartenfläche. Links der Teaser (Überschrift, optionaler Untertitel, Link zum Anfahrt-Ziel – konfigurierbar über footerMapTeaser). Rechts eine weiße Sprechblase mit Center-Name und Adresse (nur wenn mindestens Straße oder PLZ/Ort vorliegen). Optional überlagerndes Bild am Übergang zur Fußzeile (footerPurchasesImage). Auf schmalen Viewports wird die Blase ausgeblendet (wie viele Legacy-Layouts).
2. Unterer Bereich (footer.mec-a-site-footer): dunkelgrauer Block mit drei Spalten und hellen Trennlinien – Navigation (Standard wie Legacy: News, Angebote, …), Rechts-Links (Impressum, Datenschutz, …), optional Siegel. Oben rechts „Nach oben“: weißer Kreis mit dunklem Chevron, sanftes Scrollen nach oben.

---

Dashboard (Webseiten-Tab)

Bei aktiviertem Template MEC 1 Rot stehen u. a. diese Reiter zur Verfügung (siehe auch Navigation und Module):

Reiter	Inhalt
Hero Slider	Slides in templateContent.mec-template-a.hero.slides
Info-Kacheln	Vier Kacheln (infoboxen 0–3), siehe Infokacheln
Willkommen	#home-welcome-teaser + graue Sektion #home-welcome – siehe Willkommen-Teaser
Header & Navigation	u. a. header.navItems, logoLinksEnabled; Social-Icons in der Kopfzeile aus footer.social
Vermietung	Navigationspunkt: externer Link (Standard) oder /vermietung – siehe MEC Webseiten-Tab
Footer	Beschreibung, Social-Links, Footer-Navigation (footer.*)
Seite: Einkaufswelt / Aktuelles	Hero/SEO für /einkaufswelt (Centerplan; /shops leitet dorthin um) bzw. Aktuelles

Die rote Karten-Sektion im Footer (footerMapEmbedUrl, footerMapTeaser, footerPurchasesImage) ist in der Live-Website ausgewertet, hat derzeit aber keine eigenen Dashboard-Felder – sie kann über templateContent (API / JSON) gesetzt werden.

---

templateContent['mec-template-a'] – Überblick

Schlüssel	Bedeutung
primaryColor	Akzentfarbe (CSS-Variable --mec-primary)
hero.slides	Slides: image, motivImage, backgroundImage, backgroundColor, title, titleImage, subtitle, subtitleHtml, link, ctaUrl, ctaLabel, titleColor, subtitleColor; optional frei positioniert mit titleLayout, subtitleLayout, motivLayout, ctaLayout (wie Hero-Slider-Editor v2), siehe Hero: frei positioniert
infoboxen	Vier Homepage-Kacheln (0–1: #home-times, 2–3: #home-categories); Felder: title, subtitle, icon, image, link. Leere Werte → MEC-Original-Fallback (Breisgau-Standard). Kachel 2 verlinkt bei einkaufsgutscheineActive auf /gutschein.
einkaufsgutscheineActive	Wenn true, verweist die zweite Info-Kachel standardmäßig auf /gutschein statt /einkaufswelt
header.navItems, header.logoLinksEnabled	Navigation; bei logoLinksEnabled verlinken Shop-Logos zur Shop-Detailseite
header.vermietung	Nav „Vermietung“: externalUrl, useInternalPage, label, enabled
welcomeTeaser	title, text, services (Array: icon, label, optional href), moreServices (icon, label, href – Standard /service). Leere Werte → MEC-Fallback.
welcomeGray	Optionale title-Überschrift; text/image nur bei Override. Standard: text = Center-Beschreibung, image = Center-Titelbild
welcome	Veraltet; gleiche Felder wie welcomeGray
footer	navItems, social, siegel, showTeilnahmebedingungen, …
footerMapEmbedUrl	Optional: iFrame-URL der Kartensektion; sonst Fallback aus Kontaktadresse
footerMapTeaser	Optional: title, subtitle, ctaLabel, ctaPath neben der Karte
footerPurchasesImage	Optional: Bild-URL im Footer-Bereich „Einkäufe“

Der alternative Schlüssel mecTemplateA wird aus Kompatibilitätsgründen ebenfalls gelesen.

---

Technische Referenz

• Layout & globale Styles: layout.tsx, template-a-home.css
• Homepage: index.tsx
• Entwickler: Feature-Katalog (Center-Website-Module), Öffentliche API für templateContent