MEC-Template Green – Legacy-CSS-Checkliste
Diese Seite dokumentiert den Stand der Pixel-Treue des Cockpit-MEC-Templates Green gegenüber dem Original (Live-Referenz: Elisen Park Greifswald).
Quellen:
mec-templates/site_templates/templates_green/home.tplmec-templates/sites/assets/css/template_green/_home.cssmec-templates/sites/assets/css/template_green/_info-boxes.cssmec-templates/sites/assets/css/template_green/_slider.css- Cockpit-Implementierung:
apps/center-website/components/templates/mec-template-green/
Die zugehörige CSS-Datei in der Cockpit-Implementierung:
apps/center-website/components/templates/mec-template-green/template-green-home.css– alle Original-Tokens unter[data-template="mec-template-green"].
Konzept
Wie bei Template A/D/Grooss/C werden die Original-Klassen (.box, .box-times,
.box-einkaufswelt, .box-news, .box-gutschein, .box-anfahrt,
.box-einkaufswelt-kategorien, .box-facebook, .box-title, .home-infobox-top,
.home-infobox-bottom, .home-slider, .home-slider-item, .home-slider-content,
.home-slider-title, .home-slider-text, .home-slider-image, .home-slider-badge)
in der Cockpit-Komponente verwendet, sodass die zentralen Stilregeln in
template-green-home.css greifen.
Inline-Styles in info-boxes.tsx bleiben als Sicherheitsnetz erhalten, weil die
Komponente bereits stark an's Original angelehnt war (#859599, #AFB584, Karla,
Aspect-Ratios). Die zusätzlichen Klassen sind ein Hook für zukünftige
CSS-Anpassungen.
Statusübersicht
| Bereich | Status | Anmerkungen |
|---|---|---|
Hero-Slider (.home-slider) | Konzeptionell | Modernes Hintergrundbild + Overlay (Cockpit), Original ist Motiv-rechts mit weißem Titel-Bereich (124px Blog-Schrift, 50%/50%-Aufteilung). Bewusste UX-Abweichung. |
| Hero-Pfeile/Dots | OK | Modern (runde Buttons + Dots) statt der originalen .slider-navigation. Kosmetische Abweichung. |
Info-Boxen Reihe 1 (box-times + box-einkaufswelt) | OK | #859599/#AFB584, Karla, Titel/Subtitle in Original-Position. SVG-Icons aus home.tpl. |
Info-Boxen Reihe 2 (Foto-Tile box-einkaufswelt/box-news) | OK | padding-bottom-Trick (50%/50%, 25% padding), Hintergrundfoto mit object-cover. |
Info-Boxen Reihe 3 (box-gutschein/box-anfahrt/box-einkaufswelt-kategorien/box-facebook) | OK | 4×25% Aspect-Ratio 1:1, alle SVG-Icons (Ribbon, MapPin, Bag, Steps) 1:1 aus home.tpl. |
Box-Titel (.box-title) | OK | Karla, Uppercase, weiß auf farbigen, schwarz auf weißen Boxen, top: 50px / left: 50px (Desktop), responsive. |
| Box-Subtitle | OK | Karla 300, top: 95px / left: 50px (Desktop), responsive. |
| Hover-Verhalten | OK | filter: brightness(0.9) (Original _info-boxes.css Z. 35–37). |
| Responsive ≤768px | OK | Box-Titles top: 25px, Subtitles mit margin-top: 25px !important, h2 bottom: 32px (≤768) bzw. 28px (Anfahrt). |
| Responsive ≤670px | OK | Subtitle-Schriftgröße 14px, Subtitles mit margin-top: 15px !important, box-times svg { bottom: 15px; right: 15px; height: 50% }. |
| Responsive ≤480px | OK | Bottom-Boxen width: 100% !important, flex-wrap: wrap. |
Bewusste Abweichungen
| Bereich | Abweichung | Begründung |
|---|---|---|
| Hero-Slider Optik | Hintergrundbild + dunkler Overlay statt Original "Motiv-rechts + 124px Blog-Schrift links" | Aktuelle Cockpit-Center-Daten enthalten Hero-Bilder, die als Hintergrund gedacht sind. Original-Look mit 124px Blog-Schrift wäre nur sinnvoll, wenn die Center auch entsprechende Daten pflegen. CSS-Tokens sind in template-green-home.css vorbereitet, sodass eine spätere Umstellung möglich ist (.home-slider-title, .home-slider-text, .home-slider-image). |
| Hero-Slider-Schrift | clamp(48px, 8vw, 124px) statt fest 124px Blog-Font | Pragmatisch responsive ohne Blog-Font-Setup. Original-Schrift Blog ist nicht in apps/center-website/styles/fonts geladen. Optional als spätere Erweiterung. |
| Angebote-Box | fertig – Shared MecHomeAngeboteSlider (variant="green") in der ersten .home-infobox-top-Box, Markup wie home.tpl | Live-Parität mit Slider, grünem %-Badge, Dots; CTA /angebote |
| Shop-Logo-Streifen | fertig – Shared MecFooterShopLogoSlider (classPrefix="mec-green"), Grayscale wie Live | Gleiche Embla-Komponente wie D/Grooss/C; kein Tailwind-Card-Slider mehr |
.slider-navigation runde Buttons | Modern: Chevron-Icons in bg-black/30-Buttons | Bessere UX (Touchscreen-Targets), Original hat runde 32px-Buttons mit border: 2px solid #AFB584. Original-Stil ist in CSS vorbereitet (.home-slider-arrow). |
| Header & Footer | Eigenständige Cockpit-Komponenten (modern) | Header/Footer-Pixel-Treue ist nicht Teil dieser Phase (Startseite). |
Zukünftige Tasks (nice-to-have)
- Hero-Slider 1:1:
Blog-Font lokal einbinden + Slider-Komponente mit Original-Layout (Motiv rechts, weißer Bereich links) als Variante hinter Config-Flag. - Angebote-Slider in erster Top-Box: erledigt via Shared-Slider +
info-boxes.tsx. **.slider-navigationrunde Buttons**: Hero-Pfeile auf Original-Stil umstellen (runde Buttons mitborder: 2px solid var(--mec-green)).- Header & Footer pixel-genau gegen
template_green/_header.css/_footer.css.
Siehe auch
Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /developer-guide/mec-template-green-legacy-css-checklist