Template Grooss (MEC „beige") – Legacy-CSS-Checkliste

Pixel-Treue-Workflow für die öffentliche Template-Grooss-Website (apps/center-website/components/templates/mec-template-grooss). Quelle ist die Live-MEC-Vorlage (mec-templates/site_templates/templates/template_grooss/*.tpl + mec-templates/sites/assets/css/template_grooss.css und template_grooss_teaser.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-grooss/template-grooss-home.css unter [data-template="mec-template-grooss"], klare React-Komponenten, keine !important-Kaskaden außer wo das Original sie selbst nutzt.

Vorgehen pro Block

1. Original lesen: Welche Selektoren und Werte setzt template_grooss.css / template_grooss_teaser.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-grooss"] in der Template-eigenen template-grooss-home.css. Eigenname-Klassen mit Präfix mec-grooss-… für neue Bausteine (z. B. .mec-grooss-angebote-track).
4. React-Markup: Legacy-Klassen aus dem Markup übernehmen, wenn die Stilregel sie braucht (z. B. .home-infobox-top .box, .box-title, .home-infobox-angebote-content .item-price). Sonst eigene mec-grooss-…-Klassen.
5. Status nachziehen: Tabellenzeile aktualisieren oder neue Zeile ergänzen.

Status pro UI-Block

Block	Legacy-Selektoren / Datei	Status
Hero-Slider (.home-slider)	template_grooss_teaser.css .home-slider { height: 680px }, .home-slider-item { height: 680 }, .home-slider-title { font-size: 100; "Blog" }, .home-slider-text { font-size: 24 }, Slick-Dots rechts unten (right: 60; bottom: 25; weiß 20×20 border 3 #fff)	bewusst aus D wiederverwendet – Center-spezifische Style-Klassen pro Slide (.ostern-b-tuete, .weihnachten, …) sind nicht reproduzierbar; Template D liefert dafür eine generische Hero-Komponente
Erste Top-Reihe (.home-infobox-top)	template_grooss.css .home-infobox-top .box { width: 50%; padding-bottom: 25%; float: left; background: #fff }, img { width: 100% }	fertig – InfoTilesGrooss, Original-Klassen, Aspect-Ratio 2:1
Angebote-Slider (.home-infobox-angebote)	template_grooss.css .home-infobox-angebote-title { top: 95; left: 60; font-size: 52; "Blog"; width: 140 }, -link { bottom: 35; left: 60; font-size: 24; #EF4741 }, .item-price { width 122; height 122; rund; #EF4741 }, .item-price.offer-green { #A4C556 }, .item-image img { max 320×320 }, Slick-Dots zentriert unten	fertig – MecGroossAngeboteSlider (Embla-Loop, Dots reagieren auf selectedScrollSnap); Item-Markup 1:1 (Preis-Kreis, Image-Block, Text-Block)
Zweite Top-Reihe (.home-infobox-top Index 2)	gleiche Regeln wie Reihe 1	fertig – wird durch dasselbe Box-Markup gerendert
Bottom-Reihe (.home-infobox-bottom)	template_grooss.css .home-infobox-bottom .box { width: 25%; padding-bottom: 25%; cursor: pointer; float: left }, p { position: absolute; bottom: 0; text-align: center; width: 100%; font-size: 24 }	fertig – Box-Markup mit variant="bottom", zentrierter Untertitel ohne Title (Original: nur <p> + <img>)
.box-title (Top-Box-Titel)	template_grooss.css .box-title { position: absolute; font-size: 68px; font-family: "Blog"; bottom: 60; left: 60 }	fertig – statisch positioniert, var(--font-mec-blog)
Header (heller Header, Sticky, weißer Logo-Balken + transparente Nav)	template_grooss.css Z. 148–207 (header { position: fixed; max-width: 1440; height 134/96/60 }, #logo-container { display: table }), Z. 669–771 (nav { height: 170; absolute }, nav:hover { rgba(0,0,0,.5) }, li.current/active/a:hover { border-bottom: 1px #fff }, nav.subpage { display: none }, @media max-1024 { nav { display: none }})	fertig – Sticky-Header, Logo-Balken, transparente Nav 134/96/60 px übernommen; active/current Highlight per usePathname (1:1 Original-Look mit weißem Border-Bottom). Bewusste Abweichung: kein dunkler Submenü-Streifen auf Subpages (Original nav.subpage), Suchfeld in Nav (#search-row) und 5 Hamburger-Varianten weggelassen – stattdessen ein moderner Hamburger + Mobile-Menü (siehe Abweichungstabelle).
Footer (heller Footer mit Navigation + Beschreibung + Logo + Social)	template_grooss.css Z. 776–882, 952–986 (footer { background: #E5E5E5; padding: 55 0 205 0 }, #footer-row-1 { width: 320; border-right: 1 #808080 }, #footer-row-2 { color #808080; border-right; uppercase title }, #footer-row-3 { width: 270; logo grayscale; social runde 40×40 #808080 }, mobile &lt;960: stacking, padding 12 0 18)	fertig – Original-IDs (#footer-row-1/2/3), Maße 320/flex/270, Trennlinien #808080, Logo-Box 170×80 mit border-bottom, runde Social-Buttons. Padding-Bottom auf 55 px gekürzt (Original 205 px für absolute Goto-Top-Bubble; nicht relevant, da kein Goto-Top mehr).
Footer-Shop-Logo-Streifen (.shop-slider, max 35 Logos, Grayscale → Hover-Color)	template_grooss.css Z. 3827–3911 (.shop-slider { padding: 0 75; bg #fff; }, .shop-slider-item { height: 150 }, .shop-slider-item img { max 120×120 }) + Slick-Loop aus template_grooss.js (6/3/2 sichtbar, Autoplay 2 s)	fertig – _mec-shared/footer-shop-logo-slider mit classPrefix="grooss", max 35 Logos (wie Original if index == 35 break), padding: 0 75/50/30 px und flex 1/6 → 1/3 → 1/2 Stufen (1:1 Slick-Verhalten). Embla-Loop + Autoplay 2 s, Hover-Pause; keine sichtbaren Pfeile (Slick-Default), Padding lässt seitlich Luft.
Responsive Reduktionen	@media (961-1200): title 40+49, @media (max-960): bottom 50% 50%, top 100% 50%, @media (max-670): font-size 14/24/16, item-price 62×62, @media (max-480): item-image top 45	fertig – Stufen 1200 / 1024 / 960 / 670 / 480 px 1:1 nachgezogen

Bewusste Abweichungen vom Original

Element	Status	Begründung
Hero-Slider per-Slide-Styles (.ostern-b-tuete, .weihnachten, .facebook, …)	nicht übernommen	Sind redaktionell gepflegte CSS-Snippets pro Slide; bei Cockpit kommen Slides aus dem Dashboard – pixel-perfektes Pro-Slide-Styling lässt sich dort nicht nachbilden ohne den vollen Style-Katalog.
Slick-Slider → Embla	technisch sauberer	Slick benötigt jQuery; Embla ist react-nativ und liefert dieselbe Loop/Autoplay-Funktion. Klassennamen .slick-dots, .slick-active werden weiterhin für Optik beibehalten.
Original-Tailwind-Angebote-Block aus erstem Wurf	entfernt	Lag zusätzlich zwischen Hero und Info-Boxen. Original hat den Slider innerhalb der ersten Top-Box; das ist jetzt 1:1 umgesetzt.
Bottom-Box-Cursor pointer immer	wie Original	Auch wenn keine link gesetzt ist – Verhalten wie im Original belassen, da dort Klick-Targets über Smarty-Helfer immer existieren.
Header-Suchfeld (#search-row in der Nav)	weggelassen	Die globale Such-UX wird im Cockpit auf einer eigenen Such-Seite gelöst, keine Inline-Suche im Header. Original-Stilregeln existieren weiter (Z. 233–288), werden aber nicht mehr referenziert.
5 unterschiedliche Hamburger-Icons (#sticky-nav-icon, #subpage-nav-icon, #mobile-nav-icon, …)	eine Komponente	Original schaltet je nach Seite und Scroll zwischen drei Hamburger-DOM-Knoten. Modernes Pattern: eine Hamburger-Schaltfläche mit lucide-react-Icon, identisches Mobile-Off-Canvas-Menü überall.
nav.subpage { background: rgba(0,0,0,.5) }	weggelassen	Auf Subpages bleibt die Nav transparent (hover macht sie weiterhin dunkel). Das spart einen optischen Bruch zwischen Hero-Slider-Seite und z. B. Shop-Detail; die aktive Navigation wird stattdessen klar per current/active-Border-Bottom markiert.
Footer-Shop-Slider: keine Slick-Pfeile	bewusst	Original Slick rendert links/rechts kleine Chevron-Pfeile. Embla-Loop läuft hier auto + hover-pause; das Padding 0 75 px lässt die Optik des Originals (seitliche „Spalten") erhalten.
Footer-Bottom-Padding 55 px statt 205 px	bewusst	Im Original macht der Padding-Bottom Platz für eine absolute „Goto-Top"-Bubble (#goto-top { right: 40; top: 45 }). Die Bubble ist im Cockpit nicht reproduziert; entsprechend keine 150 px tote Fläche unter dem Footer.

Qualitätscheck vor Merge

• Optik der betroffenen Blöcke gegen template_grooss.css und Live-Site abgeglichen.
• Kein neues !important ohne Begründung (Original nutzt !important an wenigen Stellen, die bewusst übernommen wurden).
• 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-A Legacy-CSS-Checkliste – Schwester-Checkliste, gleicher Workflow
• Template-D Legacy-CSS-Checkliste
• Gemeinsame MEC-Bausteine (_mec-shared/)