Template C – Legacy-CSS Checklist

Pixel-perfect workflow for the public Template C website (apps/center-website/components/templates/mec-template-c). Sources are the live MEC template (mec-templates/site_templates/templates/template_c/*.tpl + mec-templates/sites/assets/css/template_c.css and template_c_teaser.css).

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

Procedure per Block

1. Read the original: What selectors and values does template_c.css / template_c_teaser.css set? Which parts will be overridden later?
2. Effective end state: One line per token (color, spacing, font, dimension, z-index) – the value after merging the layers.
3. A clean rule: Under [data-template="mec-template-c"] in the template-specific template-c-home.css. Custom name classes with prefix mec-c-… for new components (e.g., .mec-c-hero-arrow); original classes (.teaser_headline, .teaser-titel, .notice, .shop-slider.big) remain intact so that the style applies.
4. React markup: Adopt original classes from the markup when the style rule requires them.
5. Status update: Update or add a new row for the status.

Status per UI Block

Block	Legacy Selectors / File	Status
Hero Carousel (#mainCarousel.carousel.slide)	template_c.css .carousel, .carousel-inner, .carousel-inner > .item { transition: 0.6s ease-in-out left }, .carousel-inner > .active { display: block; left: 0 }, .carousel-indicators { position: absolute; top: 550; right: 0; z-index: 60 } (lines 1347–1535)	done – HeroCarousel (own component) renders the original markup (<div id="mainCarousel" class="carousel slide"><div class="carousel-inner"><div class="item active">…</div></div></div> + <ol class="carousel-indicators">). Auto-Advance 5s as original data-interval="5000". Deliberate deviation: Arrows (.mec-c-hero-arrow) are cockpit add-on – Slick original does not show them.
.teaser_headline (Slide content)	template_c.css lines 1619–1632 (width: 100%; padding-right: 250px, > div { width: 680px; z-index: 1 })	done – Original class adopted 1:1. Background image as CSS background:url(...) on an inner .mec-c-hero-slide-bg layer (Bootstrap original used style="background:url(...)" directly on .teaser_headline).
.teaser-titel (large headline image)	template_c.css lines 1602–1607, 1614 (z-index: 1; position: relative; right: 0; max-height: 365px (≤768))	done – Original class, position: absolute; left: 0; top: 50%; max-height: 80%; max-width: 60%, mobile responsive.
.teaser-motiv (person/motif on the right)	template_c_teaser.css lines 1–5 (position: absolute; top: 0; right: -20px), Mobile (lines 25–53) – top: 10%; right: -6%; max-height: 270px	done – Original class, same tokens. next/image instead of <img>, otherwise pixel-perfect.
.notice (description box, overlay)	template_c_teaser.css lines 13–24 (background: gray; color: #fff; font-size: 14; font-weight: bold; line-height: 22; padding: 25 80 15 15; width: 505; position: absolute; top: 444; left: 33)	done (default) – Default .notice with original tokens (color #808080, padding/font identical). Position bottom: 30px instead of top: 444 (responsive to all hero heights). Per slide noticeColor overrides the background (e.g., #cc232d like .notice.rot-zweizeilig). Deliberate deviation: Hundreds of per-slide classes (see below) are not reproducible.
<ol class="carousel-indicators"> (dots at the bottom right)	template_c.css lines 1512–1535 (position: absolute; top: 550; right: 0; z-index: 60, li { width: 12; height: 12 }, .active { background-image: dot-black.png })	done – <ol class="carousel-indicators mec-c-hero-indicators"> with <li class="active"> for active slide. Black dots, original size 12×12 px. Position bottom: 16; right: 24 (original top: 550 is absolute based on a 600 px hero → equivalent).
.shop-slider.big (logo strip below the hero, max 20 logos)	template_c.css lines 2477–2628 (.shop-slider.big { height: 85px; box-shadow: 0 8 23 -2 #00000070 }, img { max-width: 120; max-height: 60 }, mobile <768: filter: grayscale(0%))	done – MecTemplateCShopStrip uses _mec-shared/footer-shop-logo-slider with classPrefix="mec-c". Original classes .shop-slider.big + .shop-slider-item-inner (over prefix). 8/6/4/3 visible (1280/960/480 px), Embla loop + autoplay 2s, hover-pause. Box-shadow + max image sizes 1:1 adopted.
Featured Shops Carousel	n/a	Cockpit add-on – not in the original. Remains as an optional section (Tailwind-based, primary color accents).
Highlights Grid	n/a	Cockpit add-on – not in the original. Remains as an optional section. Control via mec-template-c.highlights.enabled.
Info Section	n/a	Cockpit add-on – not in the original. Remains as an optional section (Tailwind, primary color accents). Renders only if mec-template-c.info.text is set.
Header (.newheader, logo column 283 px left)	template_c.css lines 497–522, 815–823 (.newheader { z-index: 1; height: 100% }, .logo { width: 283; padding: 20 0; background: logo-new-bg.png }, .logo-shadow { width: 283; height: 22; background: logo-new-shadow.png })	open / deliberately pragmatic – The original is a Bootstrap-3 construction with .home_container_dummy { width: 428; min-width: 430 } (spacer for the fixed logo column on the left) + .home_container { position: absolute }. We deliberately use a modern header with horizontal nav (./components/header.tsx); the logo column on the left as a spacer would be too invasive.
Footer (.column-1, .column-2, border-right: 1px #888)	template_c.css lines 921–1032 (min-height: 200px, three columns .column-1, .column-2 { width: 33%; border-right }, font-size: 14; color: #7a7c7c)	open / deliberately pragmatic – Current footer is its own component. The original column structure could be mapped in a subsequent iteration as an additional CSS layer if necessary.

Deliberate Deviations from the Original

Element	Status	Reasoning
Per-Slide Notice Classes (.notice.weihnachten, .facebook, .corona-cl2, …)	not adopted	template_c_teaser.css contains ~100 classes per campaign with individual top/background-color/width values. In Cockpit-OS, slides come from the dashboard – slot classes are not available. Per slide can control the background color with noticeColor, the default .notice (lines 13–24) is used.
Slick Slider → Embla	technically cleaner	Slick requires jQuery; Embla is React-native and provides the same loop/autoplay function. Class names .shop-slider.big, .shop-slider-item-inner will still be kept for aesthetics (via _mec-shared-classPrefix="mec-c").
Bootstrap Carousel → React-State Carousel	technically cleaner	Original data-ride="carousel" needs jQuery plugin. Our component uses the same DOM classes (carousel, slide, carousel-inner, item active, carousel-indicators), so style selectors remain the same. Auto-Advance 5s as original (data-interval="5000").
Hero Arrows (.mec-c-hero-arrow)	Cockpit add-on	The original Slick shows no arrows; only indicator dots. We additionally offer arrows for keyboard/touch interaction. Aesthetically subtle (rgba), not intrusive.
.notice top: bottom-30 instead of top: 444px	deliberate	The original position top: 444 assumes a 600 px hero; with our responsive hero height (600/540/420/380/300 px), the notice box would be misplaced. bottom: 30px keeps it stable at the bottom.
.newheader + .home_container_dummy (Bootstrap-3-Layout)	not adopted	Would reduce the entire layout context (flex grid with a fixed logo column 428 px left) to a header-only construction – refactoring risk is too high. Modern header is UX equivalent.

Quality Check Before Merge

• Appearance of the affected blocks cross-checked against template_c.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 passes.

See also

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