Template A (MEC "rot") – Legacy CSS Checklist

Pixel-perfect workflow for the public Template A website (apps/center-website/components/templates/mec-template-a). Source is the live MEC template (mec-templates/site_templates/templates/template_a/*.tpl + mec-templates/sites/assets/css/template_a2.css).

Goal: Visually identical to the original (order, colors, dimensions, fonts, hover/active states). Technically clean: one rule per block in apps/center-website/components/templates/mec-template-a/template-a-home.css under [data-template="mec-template-a"], clear React components, no !important cascades.

Procedure per Block

1. Read Original: What selectors and values does template_a2.css set? Which parts will later be overwritten?
2. Effective Final State: One line per token (color, spacing, font, size, z-index) – the value after merging the layers.
3. A Clean Rule: Under [data-template="mec-template-a"] in the template's own template-a-home.css. Custom classes prefixed with mec-a-… for new blocks (e.g., .mec-a-mobile-nav).
4. React Markup: Adopt legacy classes from the markup if the globals.css rule requires them (e.g., #header-bg, #header-main, #search-row, nav > div#navigation-wrapper > ul > li > a). Otherwise, use custom mec-a-… classes.
5. Status Update: Update the table row or add a new row.

Status per UI Block

Block	Legacy Selectors / File	Status
Page Grid #container	body, #container (template_a2.css), background #eae9e7, white column max-width: 1440px	done – mec-a-site-column + layout wrapper
Fixed White Header	header, header div#header-main, #header-bg, #header-placeholder (height 96 / 60 px)	done – .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)	done – Flex variant equivalent to table/table-cell vertical centering
Search #search-row Desktop	position: absolute; right: 0, input 176 × 28 px / border #d7d7d7, round button #e20018	done – Function + appearance match
Hamburger ≤ 991 px	#hamburger-icon { position: absolute; right: 0; top: 13px; width: 30px; height: 30px; display: block } (in @media (max-width: 991px))	done – Original breakpoint adopted, Active state (line-1/line-3 rotation) as original
Desktop Main Navigation (Red Bar)	nav { background: #e20018 }, #navigation-wrapper { max-width: 1060px }, Items line-height: 42; padding: 0 21; font-size: 14; letter-spacing: 2.5; uppercase; white; bold	done – including li.current > a / li.active > a for active highlight (path match, parent match, hash variant)
Vertical Dividers Between Nav Items	nav ul li > a::before { width: 1px; height: 36px; right: 0; background: #fff }; last item transparent	done
Sub-Menus (Red, 250 px, Centered)	nav ul ul { width: 250px; left: 50%; margin-left: -125px; top: 42px; background: #e20018 }; white dividers ::after	done – Active path opens submenu without 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); accordion	done – Component MecTemplateAMobileNav, original breakpoints (961px → display:none, 481-768 → top: 94), body scroll lock, accordion with transition: max-height
Mobile Nav Header (Search + Social)	#mobile-nav-search-row { padding: 13px 0; margin: 0 15px; border-bottom: 1px solid #fff } with search input + a.search-row-icon list	done – integrated into MecTemplateAMobileNav, social icons optional via layout prop mobileNavSocialIcons
Hero #header-slider (Desktop)	header_slider area + template_a2.css (height 485 px / smaller breakpoints)	done – Hero slider component, free + legacy variant
Shop Logo Strip (Home)	template_a2.css .shop-slider, .shop-slider-item (Slick 6/3/2, autoplay 2 s, arrows .slick-arrow)	done – MecTemplateAShopSlider (Embla loop, original markup <div class="shop-slider main"><div class="shop-slider-item">…</div></div>, Slick arrows 20 × 32 px, shared loop helper from _mec-shared/lib/multiply-logos-for-loop.ts)
Directions Quick Link (#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	done – Component HomeAnfahrtQuickLink, Lucide pin (50 × 50, text-white) instead of original PNG anfahrt-icon.png (see intentional deviations)
.info-box Aspect + 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; white }, p { font-size: 24; width: 80% } + ≤ 770 px reductions	done – Pixel-perfect, including info-box { width: 100% !important } ≤ 770 px
Info Row 1 #home-times	template_a2.css #home-times-left/right { float: left; width: 50% }, .content hover gradients (left red→gold 0.5/0.8, right orange 0.5/0.8)	done – Component HomeInfoTimesRow, hover backgrounds 1:1
Offers Tiles (Between Info Rows)	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; white 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 + price 30/16, ≤ 400 px title 16 + price 22/12	done – OffersHomeLegacy, flexbox instead of table-cell (visually identical), new breakpoints ≤ 960 / ≤ 770 / ≤ 400 px added, text-transform: uppercase for .price span and border-right for last element matched
Info Row 2 #home-categories	template_a2.css #home-categories-left/right { float: left; width: 50% }, .content hover backgrounds (left red 0.5/0.8, right gray 68/68/68 0.5/0.8)	done – Component HomeInfoCategoriesRow, hover values 1:1
Welcome Teaser (with Service Icons)	home.tpl willkommen, template_a2.css #home-welcome-teaser { padding: 60px 0; white; centered }, > 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 %	done – WelcomeTeaserSection, service icons margins matched 1:1
Gray Welcome Section	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 }	done – WelcomeGraySection (see intentional deviations for title bold and missing gallery.png icon)
Footer (Red Map + Dark Bar)	footer.tpl, template_a2.css footer { height: 250px; padding: 35px 0 40px; background: #525357 }, three display: table-cell columns (#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 }	done – Measurements, dividers, column widths and ≤991 px stack identical; marker arrow at left: 30px (desktop) or -15px (≤960 px) as original
Footer Map (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 white }, > p { font-size: 21; max-width: 60% }, > a { uppercase; white; border-bottom: 2 #fff }	done – Values 1:1, ≤991 px hides subtext + purchases, ≤480 px map 350 px

Intentional Deviations from the Original

Element	Status	Justification
Opening Hours Pill on Right in Header	removed – at user's request reverted to strict original (only search + hamburger)	–
Footer Logo Slider as Embla instead of Slick	technically cleaner, visually identical	shared component in _mec-shared/
.shop-slider-item width 16.666% / 33.333% / 50% instead of original 60%	Slick injects runtime width: 100% / slidesToShow as inline style. Embla gets its width directly in CSS to create exactly 6 / 3 / 2 visible slides as in the original.	–
Footer content centered on max-width: 1200px with padding: 0 30px	Original footer .main is width: 100% without max-width. On very wide screens, the content would otherwise sit strangely left-aligned. The centered variant follows the hero/nav column (max-width: 1060–1200) and appears visually consistent.	–
#goto-top as white pill with dark SVG arrow instead of plain 44 px glyph	Better visibility / click target size, original glyph would be just a thin icon without background.	–
#home-anfahrt icon: Lucide MapPin instead of anfahrt-icon.png	Original PNG only exists under mec-templates/sites/assets/img/; Lucide SVG retains the same height (50 px) and looks visually equivalent.	–
Welcome Teaser Items as Flexbox instead of classic float: left	The original uses float: left with :after { clear: both }. Flexbox provides the same layout but is more robust with dynamic item counts.	–
Offer Tiles as Flexbox instead of display: table-cell + float: left	Identical column distribution 25% / 50% with four items, but without float clearing cascade; visual pixel fidelity is maintained.	–
#home-welcome-text without gallery.png background (background: url(../img/gallery.png) 30px 20px no-repeat)	Original asset not in Cockpit repo. Would only sit decoratively next to the title, so omitted instead of using a placeholder.	–
mec-a-gray-title with additional font-weight: 700	Original does not have an explicit bold rule, but the MetaCompPro default looks semi-bold. Without this style variation on Cockpit fonts, the title would otherwise be too weakly readable.	–

Quality Check Before Merge

• Checked the appearance of the affected blocks against template_a2.css and live site.
• No new !important without justification.
• Markup uses documented classes/IDs (no duplicated inline styles for static values).
• This file updated (status / new row).
• npx tsc --noEmit in the apps/center-website package green.

See Also

• Template D Legacy CSS Checklist – Sister checklist, same workflow
• Shared MEC Components (_mec-shared/)
• MEC Template A (Public Docs)