Template D (MEC) – Legacy-CSS-Checkliste

Für Abgleich der öffentlichen Template-D-Website (apps/center-website) mit dem historic Mall-Template (template_d_master.css, template_d/style.css). Ziel ist ein konsistenter Endzustand im Code – nicht eine 1:1-Nachbildung der Legacy-!important-Schichten.

Prinzip (immer gleich)

1. Legacy einlesen: Welche Selektoren und Werte setzt template_d_master.css? Was überschreibt template_d/style.css (oder andere Seiten-CSS) – insbesondere bei gleichen Breakpoints?
2. Konflikt notieren: Wenn zwei Quellen widersprechen, welche gilt visuell auf der Referenz-Site (oder welche Datei ist später geladen und gewinnt)?
3. Endzustand dokumentieren: Eine Zeile pro Token (Farbe, Abstand, Schrift, Größe, Z-Index) – der effektive Wert nach Zusammenführung.
4. Eine saubere Regel: Unter [data-template="mec-template-d"] in apps/center-website/app/globals.css (oder gezielt in Komponenten-Tailwind, wenn es nur Layout betrifft). Vermeiden von breiten !important-Kaskaden; Spezifität bewusst wählen.
5. React-Markup: Klassen aus dem Legacy-Namensschema nur, wenn sinnvoll; sonst Präfix mec-d-… für neue, klar zugeordnete Blöcke (z. B. .mec-d-angebot-val). Inline-Styles nur für dynamische Werte (z. B. Hero-Farben).

Breakpoints und Reihenfolge

• Legacy nutzt häufig überlappende max-width-Medienqueries (z. B. ≤670px und 481px–670px).
• Spätere oder spezifischere Regeln im eigenen Stylesheet müssen in globals.css nach den breiteren Queries stehen, wenn der effektive Live-Zustand dem „engeren“ Override entspricht.
• Kurz im CSS kommentieren: „Zuerst …, danach …, damit … gewinnt.“

Quellen im Repo (Referenz)

• Master: typischerweise template_d_master.css (Projekt-Import / Theme-Referenz).
• Overrides: template_d/style.css.

Konkrete Pfade können je nach Arbeitskopie variieren; für die Suche im Projekt nach home-infobox-angebote, item-price, mec-d-, template_d greifen.

Checkliste pro UI-Block

Block	Legacy-Selektoren (Stichworte)	Status / Hinweis
Seitenraster #container	body, #container, Hintergrund #eae9e7	Siehe mec-import.md
Header + Sprache	header, #header-main, #lang-container (template_d/style.css: top/left, nicht rechts)	Geboxt wie #container: header fixed mit max-width: 1440, left: 0, right: 0, margin: 0 auto (zentrierter Streifen auf breiten Viewports). Sprachumschalter: erstes Kind von header#cc-parent wie header.tpl. Logo: #logo-container table / #logo-picture table-cell
Desktop-Navigation	.navigation, Dropdown, aktiver Zustand	Effektivregel: .mec-d-nav-link u. a.
Angebots-Box Überschrift	.home-infobox-angebote-title, Link „Zum Angebot“	Master + style.css zusammengeführt
Angebots-Box Kachel	.item-price, .offer-green, .item-text, .item-image, Slick-Dots	Klassen: .mec-d-angebot-val, -caption, -old-price, ul.mec-d-angebote-dots, li.is-active
Hero-Slider	.home-slider, .home-slider-badge, .slick-dots, teaser.css Titel/Text	sliderLayout="template-d": section .home-slider, Dots .mec-d-home-slider-dots / .mec-d-home-slider-dot, Badge .home-slider-badge, Pfeile aus; Titel/Position weiter CMS-basiert
Drei große Infokacheln	.home-infobox-3, .box-title, .home-infobox-3 p, SVG-Illustration	Master .box-title bringt bottom: 60px mit — für .home-infobox-3 .box-title in globals.css bottom: auto, sonst wirkt Abstand Titel↔Unterzeile falsch. Zeilenführung wie Legacy (line-height: normal). Titel/P links, max-width ~52%; 30px/700, 18px/400; SVG unverändert
Vier Lottie-Kacheln	.home-infobox-4, Anim-IDs	Live-Referenz: splitInfobox4Title (Wort 1 / Rest oder \n), CSS mec-d-infobox4-line1, line2, sub (nicht style.css 30px/30px)
Footer Logo-Slider	template_d_master.css .shop-slider (145px, padding 75px, weiß); template_grooss.js Slick 6/3/2, autoplay 2000ms	.mec-d-footer-shop-slider + Embla (footer.tsx); Maße & Breakpoints in globals.css
Shop-Listen A–Z	.shop-list (template_d_master.css)	globals.css unter .content-cms ul.shop-list
Service-Kacheln	.service, .icon, .titel; style.css #808080	service.tsx nur Icon + Titel; globals.css (250px / 200px ≤960px, titel 14px ≤960px)
Unterseiten-Header	.subpage-header 360px, .title, svg 360×360 rechts	subpage-header.tsx: Höhe 360 Desktop, SVG am äußeren Header right 0; .title 70px / top 60px / -10deg, Zeile 1 800, Folge 300
Shop-Detail / Einkaufswelt	#shop-details, .offer-*, …	Bei Bedarf nachziehen (teilweise bereits eigene Komponenten)

Neuen Block bearbeiten: Zeile in der Tabelle ergänzen, Legacy-Stichworte eintragen, nach Umsetzung Status auf „erledigt“ setzen oder Verweis auf PR/Issue.

Qualitätscheck vor Merge

• Kein unnötiges !important; bei Konflikt mit Tailwind kurz begründen.
• Markup verwendet die dokumentierten Klassen (keine duplizierten Inline-Styles für statische Werte).
• mec-import.md nur bei nutzersichtbarem Verhalten ergänzen (ein Satz reicht oft).
• npx tsc --noEmit im betroffenen App-Paket grün.

Siehe auch

• MEC-Import – Datenfluss und Feature-Überblick