Template A (MEC „rot") – Legacy-CSS-Checkliste

Pixel-Treue-Workflow für die öffentliche Template-A-Website (apps/center-website/components/templates/mec-template-a). Quelle ist die Live-MEC-Vorlage (mec-templates/site_templates/templates/template_a/*.tpl + mec-templates/sites/assets/css/template_a2.css).

Ziel: Optisch identisch zum Original (Reihenfolge, Farben, Maße, Schriften, Hover/Active-States). Technisch sauber: eine Regel pro Block in apps/center-website/components/templates/mec-template-a/template-a-home.css unter [data-template="mec-template-a"], klare React-Komponenten, keine !important-Kaskaden.

Vorgehen pro Block

1. Original lesen: Welche Selektoren und Werte setzt template_a2.css? Welche Stellen werden später überschrieben?
2. Effektiver Endzustand: Eine Zeile pro Token (Farbe, Abstand, Schrift, Maß, Z-Index) – der Wert nach Zusammenführung der Layer.
3. Eine saubere Regel: Unter [data-template="mec-template-a"] in der Template-eigenen template-a-home.css. Eigenname-Klassen mit Präfix mec-a-… für neue Blöcke (z. B. .mec-a-mobile-nav).
4. React-Markup: Legacy-Klassen aus dem Markup übernehmen, wenn die globals.css-Regel sie braucht (z. B. #header-bg, #header-main, #search-row, nav > div#navigation-wrapper > ul > li > a). Sonst eigene mec-a-…-Klassen.
5. Status nachziehen: Tabellenzeile aktualisieren oder neue Zeile ergänzen.

Status pro UI-Block

Block	Legacy-Selektoren / Datei	Status
Seitenraster #container	body, #container (template_a2.css), Hintergrund #eae9e7, weiße Spalte max-width: 1440px	fertig – mec-a-site-column + Layout-Wrapper
Fixierter weißer Header	header, header div#header-main, #header-bg, #header-placeholder (Höhe 96 / 60 px)	fertig – .mec-a-fixed-header, .mec-a-header-inner, #header-placeholder
Logo (Header)	#logo-container (table), #logo-picture (table-cell), #logo-picture img (height 70 / 44 px, margin 13 / 5)	fertig – Flex-Variante äquivalent zur table-/table-cell-Vertikalzentrierung
Suche #search-row Desktop	position: absolute; right: 0, input 176 × 28 px / border #d7d7d7, runder Button #e20018	fertig – Funktion + Optik passen
Hamburger ≤ 991 px	#hamburger-icon { position: absolute; right: 0; top: 13px; width: 30px; height: 30px; display: block } (in @media (max-width: 991px))	fertig – Original-Breakpoint übernommen, Active-State (line-1/line-3 rotieren) wie Original
Desktop-Hauptnavigation (rote Leiste)	nav { background: #e20018 }, #navigation-wrapper { max-width: 1060px }, Items line-height: 42; padding: 0 21; font-size: 14; letter-spacing: 2.5; uppercase; weiß; bold	fertig – inkl. li.current > a / li.active > a für Active-Highlight (Pfad-Match, Eltern-Match, Hash-Variante)
Vertikale Trennstriche zwischen Nav-Items	nav ul li > a::before { width: 1px; height: 36px; right: 0; background: #fff }; letztes Item transparent	fertig
Sub-Menüs (rot, 250 px, mittig)	nav ul ul { width: 250px; left: 50%; margin-left: -125px; top: 42px; background: #e20018 }; weiße Trennlinien ::after	fertig – Active-Pfad öffnet das Submenü ohne Hover (Original-li.active ul)
Mobile-Navigation (Slide-In)	#mobile-nav { position: fixed; left: 100% → 0; top: 60 / 94 px; background: #e20018; width: 100%; height: 100% }; Items max-height 55 → opened (.opened); Akkordeon	fertig – Komponente MecTemplateAMobileNav, Original-Breakpoints (961px → display:none, 481-768 → top: 94), Body-Scroll-Lock, Akkordeon mit transition: max-height
Mobile-Nav-Header (Suche + Social)	#mobile-nav-search-row { padding: 13px 0; margin: 0 15px; border-bottom: 1px solid #fff } mit Sucheingabe + a.search-row-icon-Liste	fertig – integriert in MecTemplateAMobileNav, Social-Icons optional über Layout-Prop mobileNavSocialIcons
Hero #header-slider (Desktop)	header_slider-Bereich + template_a2.css (Höhe 485 px / kleinere Bruchwerte)	fertig – Hero-Slider-Komponente, freie + Legacy-Variante
Shop-Logo-Streifen (Home)	template_a2.css .shop-slider, .shop-slider-item (Slick 6/3/2, Autoplay 2 s, Pfeile .slick-arrow)	fertig – MecTemplateAShopSlider (Embla-Loop, Original-Markup <div class="shop-slider main"><div class="shop-slider-item">…</div></div>, Slick-Pfeile 20 × 32 px, gemeinsamer Loop-Helfer aus _mec-shared/lib/multiply-logos-for-loop.ts)
Anfahrt-Quicklink (#home-anfahrt)	template_a2.css #home-anfahrt { display: none; background: #e20018; padding: 12px 0 15px }, a { color: #fff; font-size: 22px }, ≤ 960 px display: block	fertig – Komponente HomeAnfahrtQuickLink, Lucide-Pin (50 × 50, text-white) statt Original-PNG anfahrt-icon.png (siehe bewusste Abweichungen)
.info-box-Aspekt + Hover-Overlays	template_a2.css .info-box::before { padding-top: 80% }, .background { z-index: 2 cover }, .content { transition: background 0.5s ease }, img { height: 70; margin-top: 33% }, div { font-size: 42; bold; weiß }, p { font-size: 24; width: 80% } + ≤ 770 px Reduktionen	fertig – Pixel-genau, inkl. info-box { width: 100% !important } ≤ 770 px
Info-Zeile 1 #home-times	template_a2.css #home-times-left/right { float: left; width: 50% }, .content Hover-Verläufe (links rot→gold 0.5/0.8, rechts orange 0.5/0.8)	fertig – Komponente HomeInfoTimesRow, Hover-Backgrounds 1:1
Angebote-Kacheln (zwischen Info-Zeilen)	template_a2.css .offers li { width: 25%; padding: 25px; border-left: 1 #dedede }, :hover { background: #f3f3f3 }, div.title { font-size: 20; height: 90 }, div.price { font-size: 40; weiß bold }, div.price span { color: #000; font-size: 20; uppercase }, nth-last-child(2) { border-right }, ≤ 960 px width: 50%, ≤ 770 px Title 18 + Logo display: none + Preis 30/16, ≤ 400 px Title 16 + Preis 22/12	fertig – OffersHomeLegacy, Flexbox statt table-cell (visuell identisch), neue Stufen ≤ 960 / ≤ 770 / ≤ 400 px ergänzt, text-transform: uppercase für .price span und border-right für letztes Element nachgezogen
Info-Zeile 2 #home-categories	template_a2.css #home-categories-left/right { float: left; width: 50% }, .content Hover-Backgrounds (links rot 0.5/0.8, rechts grau 68/68/68 0.5/0.8)	fertig – Komponente HomeInfoCategoriesRow, Hover-Werte 1:1
Welcome-Teaser (mit Service-Icons)	home.tpl willkommen, template_a2.css #home-welcome-teaser { padding: 60px 0; weiß; zentriert }, > div { font-size: 38; bold }, p { font-size: 22; width: 70%; left }, ul { width: 70%; }, ul li { width: 25% }, img { margin-top: 50; height: 70; margin-bottom: 15 }, a { text-decoration: none }, ≤ 960 px Title 24 / Lead 21 / li 50 %, ≤ 480 px li 100 %	fertig – WelcomeTeaserSection, Service-Icons-Margins 1:1 nachgezogen
Graue Welcome-Sektion	home.tpl einkaufen_im_center, template_a2.css #home-welcome { background: #f3f3f3 }, #home-welcome-text { padding: 40px 25px 40px 150px; width: calc(50% - 175px) }, div { color: #e20018; uppercase }, p { font-weight: 300; font-size: 16; line-height: 24px }	fertig – WelcomeGraySection (siehe bewusste Abweichungen für Title-Bold und fehlendes gallery.png-Icon)
Footer (rote Karte + dunkler Balken)	footer.tpl, template_a2.css footer { height: 250px; padding: 35px 0 40px; background: #525357 }, drei display: table-cell-Spalten (#footer-row-1 191 px, #footer-row-2 356 px / padding: 0 5px 0 55px, #footer-row-3), .siegel { float: right; max 250×250 }, #goto-top { right: 40; top: 45 }	fertig – Maße, Trennlinien, Spaltenbreiten und ≤991 px-Stack identisch; Marker-Pfeil bei left: 30px (Desktop) bzw. -15px (≤960 px) wie Original
Footer-Karte (Embed + Bubble + Teaser)	template_a2.css #footer-red-map { height: 450px }, #footer-purchases { right: 330; bottom: -50 }, #footer-teaser .main > div { font-size: 42; width: 60%; bold weiß }, > p { font-size: 21; max-width: 60% }, > a { uppercase; weiß; border-bottom: 2 #fff }	fertig – Werte 1:1, ≤991 px verbirgt Subtext + Purchases, ≤480 px Karte 350 px

Bewusste Abweichungen vom Original

Element	Status	Begründung
Öffnungszeiten-Pille rechts im Header	entfernt – auf User-Wunsch zurück zu strikt Original (nur Suche + Hamburger)	–
Footer-Logo-Slider als Embla statt Slick	technisch sauberer, optisch identisch	gemeinsame Komponente in _mec-shared/
.shop-slider-item Breite 16,666 % / 33,333 % / 50 % statt Original 60 %	Slick injiziert zur Laufzeit width: 100% / slidesToShow als Inline-Style. Embla bekommt die Breite direkt im CSS, damit 6 / 3 / 2 sichtbare Slides genau wie im Original entstehen.	–
Footer-Inhalt zentriert auf max-width: 1200px mit padding: 0 30px	Original-footer .main ist width: 100% ohne max-width. Auf sehr breiten Screens würde der Inhalt sonst seltsam linksbündig sitzen. Die zentrierte Variante folgt der Hero/Nav-Spalte (max-width: 1060–1200) und wirkt visuell konsistent.	–
#goto-top als weiße Pille mit dunklem SVG-Pfeil statt nacktem 44 px-Glyph	Bessere Sichtbarkeit / Klick-Zielgröße, Original-Glyph wäre nur ein dünnes Icon ohne Hintergrund.	–
#home-anfahrt-Icon: Lucide MapPin statt anfahrt-icon.png	Original-PNG liegt nur unter mec-templates/sites/assets/img/; Lucide-SVG behält gleiche Höhe (50 px) und sieht in der Optik äquivalent aus.	–
Welcome-Teaser-Items als Flexbox statt klassischer float: left	Das Original verwendet float: left mit :after { clear: both }. Flexbox liefert dasselbe Layout, ist aber robuster bei dynamischen Item-Anzahlen.	–
Angebots-Kacheln als Flexbox statt display: table-cell + float: left	Identische Spaltenaufteilung 25 % / 50 % bei vier Items, aber ohne Float-Clearing-Kaskade; visuelle Pixel-Treue bleibt erhalten.	–
#home-welcome-text ohne gallery.png-Hintergrund (background: url(../img/gallery.png) 30px 20px no-repeat)	Original-Asset liegt nicht im Cockpit-Repo. Würde nur dekorativ neben dem Title sitzen, daher weglassen statt mit Platzhalter.	–
mec-a-gray-title mit zusätzlichem font-weight: 700	Original hat keine explizite Bold-Regel, der MetaCompPro-Default wirkt aber bereits halbfett. Auf Cockpit-Schriften ohne diese Stilvariante würde der Title sonst zu schwach lesbar sein.	–

Qualitätscheck vor Merge

• Optik der betroffenen Blöcke gegen template_a2.css und Live-Site abgeglichen.
• Kein neues !important ohne Begründung.
• Markup verwendet die dokumentierten Klassen / IDs (keine duplizierten Inline-Styles für statische Werte).
• Diese Datei aktualisiert (Status / neue Zeile).
• npx tsc --noEmit im apps/center-website-Paket grün.

Siehe auch

• Template-D Legacy-CSS-Checkliste – Schwester-Checkliste, gleicher Workflow
• Gemeinsame MEC-Bausteine (_mec-shared/)
• MEC Template A (Public-Doku)