/* TASK-570: hier standen vier @import auf jsDelivr (@fontsource/inter
5.0.16, Gewichte 400/600/700/800). Diese Datei wird auf JEDER Seite per
geladen -- damit ging die IP jedes Besuchers vor jeder Einwilligung
an einen US-CDN. Inter kommt jetzt lokal von dieser Instanz; eingebunden
genau einmal im Topic MtsThemeGlobal (head_html_tag) als
/Modules/MoveToShop.Connector/fonts/inter.css.
Hier bewusst KEIN Ersatz-@import: ein @import in einer per
geladenen Datei serialisiert den Ladepfad (HTML -> css -> css -> woff2)
und war genau der Grund, warum die Schrift vorher an vier Stellen haengen
konnte, ohne dass es jemandem auffiel. */
:root {
--mts-bg:#ffffff;
--mts-bg-soft:#fafafa;
--mts-bg-dark:#0a0a0a;
--mts-text:#1d1d1f;
--mts-text-muted:#6e6e73;
--mts-line:#e5e5e7;
/* --mts-accent stand hier als hartes `#5f8175` - die Multicycle-Markenfarbe,
in einer Datei, die auf JEDE Instanz ausgeliefert wird. Entfernt am
2026-08-03 (TASK-594.01 AC#5: genau eine Quelle je Variable).
Sie hat nie getragen, das ist gemessen und nicht gefolgert. An beiden
laufenden Instanzen mit einer Computed-Style-Sonde nachgesehen:
store.movetoshop.de html --mts-accent = #00787a (theme.css `html:root`
0,1,1 plus der Marken-Layer im Dokument schlagen
dieses `:root` 0,1,0)
mc.movetoshop.com html --mts-accent = #5f8175 (aus theme.css, nicht
von hier - derselbe Wert, andere Quelle)
Und dort, wo weder Theme noch Marken-Layer etwas sagen, gewinnt ohnehin
`storefront.css :root { --mts-accent: var(--mts-c-primary) }`: gleiche
Spezifitaet, aber storefront.css ist auf beiden Instanzen das ZULETZT
geladene der beiden (Dokumentreihenfolge nachgezaehlt: theme.css ->
mts-theme-global.css -> Marken-Layer -> storefront.css).
Die 53 `var(--mts-accent)`-Stellen in dieser Datei bleiben damit versorgt.
Gegenprobe, dass die Versorgung nicht an einer Seitenart haengt:
storefront.css und mts-theme-global.css sind auf `/`, `/filialen`,
`/cart` und `/cube` beide eingebunden. */
--mts-accent-hover:#4d6b60;
/* !important ist hier KEIN Spezifitaets-Trick, sondern die Absicherung
einer Reihenfolge (TASK-577, 2026-07-27).
`storefront.css` (Modul-wwwroot, geladen von der MtsAssets-ViewComponent)
setzt in seinem eigenen `:root` `--mts-radius: 0.55rem`. Gleiche
Spezifitaet - es entscheidet allein, welche Datei spaeter geladen wird.
Bis heute gewann diese Datei, weil beide im lagen und die Topics
nach der ViewComponent kamen.
Mit dem Umzug der Topics in die echte -Zone dreht sich das um: die
Topic-Styles stehen dann VOR storefront.css, und 29 Regeln in beiden
Dateien haetten ploetzlich 8,8 px statt 18 px Radius bekommen - eine
sichtbare Aenderung an fast jeder Kachel, ausgeloest von einer reinen
Zonen-Korrektur. Gemessen am 2026-07-27 vor dem Umzug: 18 px.
Nur DIESE eine Variable braucht den Riegel. Alle anderen Kollisionen
zwischen den beiden Dateien sind klassen-gescopet (`.mts-page`,
`.mts-store`) und damit ohnehin reihenfolge-unabhaengig; `--mts-accent`
loest beidseitig auf #5f8175 auf.
Sauber waere, auch storefront.css in den zu heben - das braucht
einen Modul-Rebuild (Zone steht in Module.cs). Bis dahin steht hier
ausdruecklich, was vorher nur zufaellig galt. */
--mts-radius:18px !important;
--mts-radius-lg:24px;
--mts-shadow:0 30px 60px -15px rgba(0,0,0,0.18);
--mts-shadow-soft:0 12px 30px rgba(0,0,0,0.06);
--mts-font:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
--mts-font-display:'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
}
body, html { font-family: var(--mts-font) !important; color: var(--mts-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #fff !important; }
h1, h2, h3, h4, h5, .heading-title, .pd-name, .cat-page-title, .page-title { font-family: var(--mts-font-display) !important; letter-spacing: -0.02em; font-weight: 700; }
/* ===== CONTAINER ===== */
.container, .megamenu-container, .footer-main, .footer-bottom, .footer-social { max-width: 1680px !important; padding-left: 32px !important; padding-right: 32px !important; }
@media (max-width: 700px) { .container, .megamenu-container, .footer-main, .footer-bottom, .footer-social { padding-left: 20px !important; padding-right: 20px !important; } }
/* ===== HEADER — kompakter, solid weiß ===== */
/* z-index 1050: Bootstrap-Modal-Backdrop = 1040, Smartstore .artlist .art Hover = no
explicit z-index aber via transform neuer Stacking-Context. Header MUSS drueber
bleiben — daher 1050. Offcanvas (z-index 9999) und PD-Modal (9998) bleiben oben. */
/* TASK-442 Iter 4: border-bottom entfernt (User: Trennlinie unter dem Header
auf ALLEN Seiten weg); der Scroll-Shadow uebernimmt die Abgrenzung. */
header#header { background: #ffffff !important; border-bottom: 0; position: sticky; top: 0; z-index: 1050 !important; transition: box-shadow 0.3s ease; isolation: isolate; }
/* Kompletten Header inkl. aller Sub-Sektionen aus dem Stacking-Context der Karten heben.
z-index pro Section GESTAFFELT (3/2/1), damit Bootstrap-Dropdowns aus der menubar
(oben: Service/Kontakt/Anmelden) die nachfolgenden Sections shopbar/megamenu nicht
visuell verdeckt bekommen. Vorher: alle drei = 1 → Source-Order entscheidet, und
shopbar (DOM-Index 1) + megamenu (DOM-Index 2) lagen über menubar-Dropdowns.
.megamenu-dropdown-container (Sibling unter header, z-index 1040) bleibt unberührt
über allem. */
header#header .menubar-section { position: relative; z-index: 3; }
header#header .shopbar-section { position: relative; z-index: 2; }
header#header .megamenu-section { position: relative; z-index: 1; }
/* Listing-/Carousel-Karten erzeugen via transform/will-change einen Stacking-Context.
Wir lassen ihn bestehen (fuer Hover-Lift), zwingen aber via z-index niedriger als Header. */
.mts-store .mts-pcard,
.mts-store .mts-tile,
.mts-store .mts-mtile,
.artlist .art,
.product-card { z-index: 0 !important; }
.mts-store .mts-pcard:hover,
.mts-store .mts-tile:hover,
.mts-store .mts-mtile:hover,
.artlist .art:hover { z-index: 1 !important; }
header#header.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
/* ALLE Header-Sub-Sections explizit weiß — Smartstore-Default ist .navbar-light grau (#f7f7f9) */
header#header,
header#header .navbar,
header#header .navbar-light,
header#header .megamenu-section,
header#header .megamenu-section .navbar,
header#header .megamenu-section .navbar-light,
header#header .menubar-section,
header#header .menubar-light,
header#header .shopbar-section,
header#header .shopbar { background-color: #ffffff !important; }
/* Top-bar (KONTAKT/SERVICE/ANMELDEN) */
header#header .menubar-section, header#header .menubar-light { background: #ffffff !important; border: 0 !important; padding: 1px 0 !important; min-height: 0 !important; }
header#header .menubar { padding: 0 !important; min-height: 0 !important; }
.menubar-link { color: var(--mts-text) !important; font-weight: 500 !important; font-size: 12px !important; padding: 4px 10px !important; border-radius: 999px; line-height: 1.2; }
/* Marke als Text auf weißer Menubar -> Textton statt Flächenton.
Die Kette fällt bewusst auf --mts-accent zurück: --mts-accent-text ist nur
unter data-mts-brand="multicycle" definiert, das Theme der Demo kennt es
nicht (nachgemessen an theme.css: nur --mts-accent + --mts-accent-hover).
Ohne den zweiten Schritt wäre die Regel dort ungültig und der Hover-Akzent
stillschweigend weg. Gilt für alle Textton-Umstellungen in dieser Datei. */
.menubar-link:hover { color: var(--mts-accent-text, var(--mts-accent)) !important; background: transparent !important; }
/* Shopbar (Logo + Search + Cart). border-bottom: Theme-Default 1px war die
"graue Trennlinie unter dem Header" (TASK-442 Iter 4, alle Seiten). */
header#header .shopbar-section { padding: 1px 0 2px !important; min-height: 0 !important; border-bottom: 0 !important; }
header#header .shopbar { padding: 0 !important; min-height: 0 !important; background: transparent !important; }
header#header .shopbar-container { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Logo: maximal 56px hoch, contain — verhindert dass quadratische User-Logos die Headerleiste sprengen */
header#header .shop-logo a.brand,
header#header .shop-logo .brand { display: inline-flex; align-items: center; }
header#header .shop-logo img,
header#header .shopbar img.img-fluid {
max-height: 56px !important;
width: auto !important;
height: auto !important;
max-width: 220px !important;
object-fit: contain !important;
}
/* Megamenu (Bikes, Cube, ...) — kompakt + horizontal zentriert.
Iter 18 Bugfix: Dropdown-Position folgte dem zentrierten
nicht.
Ursache: smartstore.megamenu.js -> alignDrop() rechnet
left = popper.position().left + parseInt(nav.css('margin-inline-start'))
Mit `margin: 0 auto` auf ul#menu-main blieb margin-inline-start im
computed style "auto" -> parseInt('auto') = NaN -> NaNpx wird vom
Browser ignoriert -> Dropdown bleibt auf alter Inline-left-Position.
Fix: margin auf 0 setzen, Zentrierung ueber justify-content im
Flex-Container (.megamenu / .cms-menu) erledigen. */
header#header .megamenu-section { padding: 0 !important; min-height: 0 !important; }
header#header .megamenu-section .navbar { padding: 0 !important; min-height: 0 !important; height: auto !important; }
header#header .megamenu-section .megamenu-container { min-height: 0 !important; height: auto !important; display: flex !important; justify-content: center !important; }
header#header .megamenu-section .megamenu { width: 100% !important; max-width: 100% !important; display: flex !important; justify-content: center !important; }
header#header .megamenu-section .cms-menu,
header#header .megamenu-section .cms-menu-navbar {
padding: 0 !important; margin: 0 !important;
display: flex !important; justify-content: center !important;
width: 100% !important;
}
/* ul#menu-main: KEIN margin:auto (das brach alignDrop), Zentrierung
erledigt der .cms-menu Flex-Container darueber.
position:static ist KRITISCH: Smartstore alignDrop() rechnet
`popper.position().left` (= LI relativ zum naechsten positionierten
Vorfahren). Wenn das
position:relative ist, liefert das nur den
Offset des LI INNERHALB des UL — unsere Flex-Zentrierung des UL geht
dabei verloren. Mit position:static wandert die Bezugsbasis hoch zu
.megamenu (position:relative) und das LI-Offset enthaelt die Zentrierung. */
header#header .megamenu-section ul.navbar-nav#menu-main,
header#header .megamenu-section .navbar-nav,
header#header .megamenu-section .nav-slider {
margin: 0 !important;
justify-content: center !important;
flex-wrap: wrap !important;
position: static !important;
}
header#header .megamenu-section .nav-link { padding: 10px 14px !important; }
/* Slider-Navigation-Pfeile (megamenu-nav-btn) sollen Menue-Zentrierung nicht stoeren */
header#header .megamenu-section .megamenu-nav { position: absolute !important; top: 0 !important; }
header#header .megamenu-section .megamenu-nav.alpha { left: 0 !important; }
header#header .megamenu-section .megamenu-nav.omega { right: 0 !important; }
header#header .megamenu-section .megamenu { position: relative !important; }
/* Default-rendered Dropdown-Container darunter ist leer + 48px tall — collapse,
ABER: nur solange KEIN inneres .dropdown-menu offen (.show) ist. Smartstore
setzt .show auf das innere
, NICHT auf den
.megamenu-dropdown-container selbst (Iter 17 hatte das vertauscht ->
Dropdowns oeffneten gar nicht mehr).
Iter 19 Bugfix: Header-Bar wuchs beim Oeffnen eines Dropdowns mit.
Ursache: .megamenu-dropdown-container ist Schwester-Element (NICHT Kind)
von .megamenu-section und liegt im normalen Flow des Header-Wrappers.
Iter-18-CSS schaltete height von 0 auf auto im show-Zustand -> Header
bekam zusaetzliche Pixel.
Fix: Container aus dem Flow nehmen (position:absolute, oben am Header
verankert via top:100%). Naechster positionierter Vorfahre ist
header#header (position:sticky etabliert containing block).
Im geschlossenen Zustand zusaetzlich pointer-events:none, damit der
unsichtbare Container keine Hover-Targets im Viewport blockiert. */
header#header .megamenu-dropdown-container {
padding: 0 !important;
min-height: 0 !important;
height: 0 !important;
overflow: hidden !important;
border: 0 !important;
box-shadow: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1040 !important;
pointer-events: none !important;
}
header#header .megamenu-dropdown-container:has(> div.show),
header#header .megamenu-dropdown-container:has(.dropdown-menu.show),
header#header .megamenu-dropdown-container.show,
header#header .megamenu-dropdown-container.in,
header#header .megamenu-dropdown-container[aria-expanded='true'] {
height: auto !important; overflow: visible !important;
padding: 24px !important; background: #fff !important;
box-shadow: 0 30px 60px -15px rgba(0,0,0,0.18) !important;
border-radius: var(--mts-radius) !important;
pointer-events: auto !important;
}
/* Header-Wrapper darf das absolut positionierte Dropdown nicht clippen */
header#header { overflow: visible !important; }
header#header .megamenu-section { overflow: visible !important; }
/* ===== SALE!-Menueintrag rot (Iter 19) ===== */
/* Robuster Selektor: stabile URL /sale-/ statt Text-Match.
Underline-/Active-States des Standardmenues bleiben erhalten,
nur Farbe + Background-on-hover werden roetlich ueberschrieben. */
header#header ul#menu-main a.nav-link[href*="/sale-" i],
header#header ul#menu-main a.nav-link[href*="/sale-" i] > span {
color: #ff3b30 !important;
font-weight: 700 !important;
}
header#header ul#menu-main a.nav-link[href*="/sale-" i]:hover,
header#header ul#menu-main a.nav-link[href*="/sale-" i]:focus {
color: #d70015 !important;
background: rgba(255, 59, 48, 0.08) !important;
}
header#header ul#menu-main a.nav-link[href*="/sale-" i]:hover > span,
header#header ul#menu-main a.nav-link[href*="/sale-" i]:focus > span {
color: #d70015 !important;
}
/* Search field: Lupe sitzt rechts; Padding genug vorhalten */
.instasearch-form { background: var(--mts-bg-soft) !important; border-radius: 999px !important; border: 0 !important; box-shadow: none !important; position: relative; overflow: hidden; }
.instasearch-form:focus-within { background: #fff !important; box-shadow: 0 0 0 2px var(--mts-accent) !important; }
.instasearch-form .instasearch-term, .instasearch-term.form-control { border: 0 !important; background: transparent !important; font-size: 14px !important; padding: 11px 48px 11px 18px !important; box-shadow: none !important; }
.instasearch-icon, .input-group-icon.instasearch-icon, .instasearch-addon { position: absolute !important; right: 8px !important; top: 50%; transform: translateY(-50%); color: var(--mts-text-muted) !important; background: transparent !important; left: auto !important; padding: 0 !important; pointer-events: none; }
.instasearch-submit, button.instasearch-submit {
position: absolute !important;
right: 0 !important; top: 0 !important; bottom: 0 !important; left: auto !important;
width: 44px !important;
height: 100% !important; /* Smartstore-Default 20px ueberschreiben */
min-height: 100% !important;
padding: 0 !important; margin: 0 !important;
background: transparent !important;
border: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.instasearch-submit i, .instasearch-submit svg { font-size: 16px !important; color: var(--mts-text-muted) !important; }
.shopbar-icon, .menubar-icon { color: var(--mts-text) !important; transition: color 0.18s ease, transform 0.18s ease; }
.shopbar-icon:hover { color: var(--mts-accent) !important; transform: translateY(-1px); }
.badge.cart-badge, .badge.wishlist-badge { background: var(--mts-accent) !important; color: #fff !important; font-weight: 600 !important; }
/* Megamenu */
.megamenu .nav-link, .megamenu .nav-item > a { font-weight: 500 !important; color: var(--mts-text) !important; padding: 10px 16px !important; border-radius: 999px !important; }
/* Nav-Label auf hellem Hover-Grund -> Textton (Kette wie oben). */
.megamenu .nav-link:hover, .megamenu .nav-item > a:hover { background: var(--mts-bg-soft) !important; color: var(--mts-accent-text, var(--mts-accent)) !important; }
.megamenu-dropdown-container { border: 0 !important; box-shadow: 0 30px 60px -15px rgba(0,0,0,0.18) !important; border-radius: var(--mts-radius) !important; padding: 24px !important; }
/* ===== FOOTER ===== */
footer#footer { background: var(--mts-bg-dark) !important; color: rgba(255,255,255,0.75) !important; padding: 80px 0 40px !important; margin-top: 80px; }
/* iPad-Round-2 P9: Auf der Homepage endet der Content mit einer DUNKLEN
Sektion (CTA). Der 80px-margin-top des Footers belichtete dort den weissen
Page-Bg -> sichtbarer weisser Spalt zwischen CTA und Footer. Auf body.home
den Margin entfernen -> dunkle CTA flieesst nahtlos in den dunklen Footer.
Andere Seiten (Kategorie/PDP/Cart enden hell) behalten den 80px-Abstand. */
body.home footer#footer,
body:has(.home-page) footer#footer {
margin-top: 0 !important;
}
footer#footer * { color: rgba(255,255,255,0.75); }
footer#footer h1, footer#footer h2, footer#footer h3, footer#footer h4, footer#footer h5 { color: #fff !important; font-weight: 600 !important; margin-bottom: 18px !important; }
footer#footer a { color: rgba(255,255,255,0.75) !important; }
footer#footer a:hover { color: #fff !important; text-decoration: none !important; }
/* Newsletter form on dark footer — sauberer Pill-Container (kein .shadow-xs Halo, kein weißer Addon-Bg) */
footer#footer .footer-newsletter .input-group {
background: rgba(255,255,255,0.08) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
border-radius: 999px !important;
box-shadow: none !important;
padding: 4px !important;
align-items: stretch !important;
overflow: hidden;
flex-wrap: nowrap !important;
position: relative;
}
footer#footer .footer-newsletter .input-group .form-control,
footer#footer .footer-newsletter input[type='email'],
footer#footer .footer-newsletter input.rounded-start-pill {
background: transparent !important;
color: #fff !important;
border: 0 !important;
border-radius: 0 !important;
padding: 12px 14px 12px 44px !important;
box-shadow: none !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
footer#footer .footer-newsletter input::placeholder { color: rgba(255,255,255,0.55) !important; }
/* Envelope-Icon links statt rechts ueber dem Text */
footer#footer .footer-newsletter .input-group-icon {
position: absolute !important;
left: 18px !important; right: auto !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: rgba(255,255,255,0.5) !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
z-index: 2;
pointer-events: none;
--inline-icon-offset: 0 !important;
}
/* Addon-Wrapper transparent (war weiß und erzeugte den Halo um den orangenen Button) */
footer#footer .footer-newsletter .input-group-append,
footer#footer .footer-newsletter .input-group-inline-addon {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
display: flex !important;
align-items: stretch !important;
}
/* Newsletter submit button — orange, fluid pill am rechten Rand des Pills */
footer#footer #newsletter-subscribe-button,
footer#footer .footer-newsletter button[type='submit'],
footer#footer .footer-newsletter .btn,
footer#footer .btn-primary {
background: var(--mts-accent) !important;
border: 0 !important;
color: #fff !important;
border-radius: 999px !important;
font-weight: 600 !important;
padding: 10px 24px !important;
margin: 0 !important;
box-shadow: none !important;
line-height: 1.3 !important;
}
footer#footer #newsletter-subscribe-button:hover,
footer#footer .footer-newsletter .btn:hover,
footer#footer .btn-primary:hover { background: var(--mts-accent-hover) !important; transform: none !important; }
/* Subscribe-only — Abbestellen-Radio + komplette „Aktion wählen" fieldset weg */
footer#footer .footer-newsletter fieldset,
footer#footer .footer-newsletter fieldset.mb-2 { display: none !important; }
/* GDPR-Checkbox-Block bleibt sichtbar (war via fieldset hidden? nein, ist ausserhalb) */
footer#footer .footer-newsletter .form-group.gdpr-consent { margin-top: 14px !important; }
.footer-social .btn { background: rgba(255,255,255,0.08) !important; color: #fff !important; border: 0 !important; width: 44px !important; height: 44px !important; margin: 0 6px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; transition: all 0.2s cubic-bezier(.22,.61,.36,1) !important; }
.footer-social .btn i, .footer-social .btn svg { color: #fff !important; font-size: 16px !important; line-height: 1 !important; }
.footer-social .btn:hover { background: var(--mts-accent) !important; color: #fff !important; transform: translateY(-2px); }
.footer-social-wrapper { padding: 24px 0 !important; border-top: 1px solid rgba(255,255,255,0.08) !important; margin-top: 24px !important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.08) !important; padding-top: 32px !important; margin-top: 40px !important; }
/* ===== BUTTONS ===== */
/* Die rgba-Schreibweise 95,129,117 war #5f8175 fest verdrahtet - dieselbe
Marke, nur in anderer Notation, in einer Datei die auch die Bidex-Demo
bekommt (dort stand damit ein grüner Schimmer neben einem türkisen
Rand). Bewusst NICHT var(--mts-accent): das ist deckend, hier braucht es
die Deckkraft. --mts-c-primary-rgb trägt beide Instanzen. 2026-08-15 */
.btn-primary, .btn.btn-primary, button.btn-primary {
background: var(--mts-accent) !important; border-color: var(--mts-accent) !important; color: #fff !important;
border-radius: 999px !important; font-weight: 600 !important; padding: 12px 28px !important;
box-shadow: 0 8px 20px rgba(var(--mts-c-primary-rgb),0.3); transition: all 0.18s cubic-bezier(.22,.61,.36,1);
}
.btn-primary:hover, .btn.btn-primary:hover, button.btn-primary:hover {
background: var(--mts-accent-hover) !important; border-color: var(--mts-accent-hover) !important; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(var(--mts-c-primary-rgb),0.4);
}
.btn-secondary, .btn.btn-secondary, button.btn-secondary { background: var(--mts-text) !important; border-color: var(--mts-text) !important; color: #fff !important; border-radius: 999px !important; font-weight: 600 !important; padding: 12px 28px !important; }
.btn-secondary:hover { background: #000 !important; transform: translateY(-2px); }
.btn-outline-primary { border-radius: 999px !important; font-weight: 600 !important; }
/* Icon-Buttons vom Text-Button-Padding ausnehmen (2026-07-29).
Die drei Regeln darueber setzen `padding: 12px 28px !important` fuer JEDEN
`.btn-primary`/`.btn-secondary`. Ein `.btn-icon` ist aber kein Textbutton:
der Core gibt ihm `padding: 0` und eine feste Kantenlaenge
(`width/height/min-width: var(--btn-height)`). Unser `!important` schlaegt
dieses nicht-wichtige `padding: 0` aus — und weil `box-sizing: border-box`
gilt, sprengt das Padding die feste Kantenlaenge: der Rahmen waechst auf
die Padding-Summe, der Inhaltskasten schrumpft auf 0.
GEMESSEN (Sonde im echten Live-DOM, 2026-07-29):
.btn-custom-range (Preisfilter "uebernehmen", Listing + Suche)
vorher 58 x 42 px statt 36 x 36 — ein gestrecktes Pill dort, wo
storefront.css ausdruecklich einen runden Button
wollte (`.facet-range-container .btn`, Radius 9999px)
nachher 36 x 36 px
.btn-edit-story (PageBuilder-Zahnrad, siehe naechster Block)
vorher 58 x 48 px, nachher 48 x 48 px
Nur `padding` wird zurueckgesetzt, bewusst NICHT width/height: Buttons, die
ihre Groesse selbst setzen, sollen sie behalten. Wer abweichendes Padding
braucht, setzt es weiterhin spezifischer — z. B. der Papierkorb im
Warenkorb (`storefront.css`, `body.shopping-cart-page .cart-item-actions
.btn.btn-secondary.btn-icon`, Spezifitaet (0,4,1) schlaegt die (0,2,0) hier).
Gegengeprueft auf Home/Kategorie/Suche/Warenkorb: sonst traegt kein
`.btn-icon` gleichzeitig `.btn-primary`/`.btn-secondary`. */
.btn.btn-icon, button.btn.btn-icon { padding: 0 !important; }
/* PageBuilder-Edit-Button (das Zahnrad auf der Buehne, nur fuer angemeldete
Redakteure sichtbar) — Icon zurueck in die Mitte.
Markup (Smartstore.PageBuilder, Views/Shared/Components/Story/Default.cshtml):
a.btn.btn-lg.btn-icon.btn-primary.btn-no-border.rounded-0.btn-edit-story > i.far.fa-cog
Das Padding erledigt die Regel darueber. Hier bleiben die zwei Punkte, die
nur diesen Button betreffen:
1) FORM. `.btn-primary` setzt `border-radius: 999px !important` (0,2,0) und
schlaegt damit das `.rounded-0` (0,1,0) aus dem Core-Markup. Statt den
quadratischen Tab zurueckzuholen, bleibt der Button hier bewusst rund —
das passt zum uebrigen Storefront und zum zweiten schwebenden Knopf
unten rechts.
2) ZENTRIERUNG. Der Core blendet den Button per `.g-stage:hover &` mit
`display: block` ein. Damit ist die Flex-Zentrierung von `.btn-icon`
wirkungslos und `text-align` ist die EINZIGE horizontale Zentrierung.
`align-items`/`justify-content` stehen trotzdem mit drin, damit die
Regel auch dann noch stimmt, wenn der Core auf Flex umstellt.
`display` wird bewusst NICHT gesetzt: `.btn-edit-story` ist per Default
`display: none`; ein `display`-Wert hier wuerde das Zahnrad dauerhaft
einblenden statt nur beim Hover ueber die Buehne.
GEMESSEN (2026-07-29, Versatz am gerenderten Pixel bestimmt, nicht am
Element-Rechteck — die Glyphe sitzt im Inline-Kasten nicht mittig, eine
DOM-Messung haette hier gelogen):
vorher : Zahnrad dx=+12,5 px / dy=+12,0 px, haengt unten rechts heraus
nachher: dx=+0,5 px / dy=+1,5 px (Rest = Glyphenmetrik der fa-cog,
unterhalb der Wahrnehmungsschwelle) */
.btn.btn-edit-story {
text-align: center !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
/* Statt des gruenen Halos aus der .btn-primary-Regel: neutraler Schatten.
Der Button liegt auf dem Hero-Foto, gruen auf gruen verwischt dort. */
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22) !important;
}
/* ===== LISTING (`.art`) — Category, Search, Recently-Viewed: gleiches Look-and-Feel
wie die Home-Carousel-Karten (.mts-pcard). Reines Weiss, links-buendig,
Bild GANZ sichtbar (contain), Buttons IMMER unten am Karten-Fuss sichtbar. ===== */
.artlist { gap: 24px !important; align-items: stretch !important; }
.artlist-grid .art, .artlist .art {
background: #fff !important;
border: 0 !important;
border-bottom: 0 !important;
border-radius: var(--mts-radius) !important;
overflow: visible !important; /* art-drop nicht mehr clippen — Buttons sichtbar */
box-shadow: var(--mts-shadow-soft) !important;
transition: transform 0.3s cubic-bezier(.22,.61,.36,1), box-shadow 0.3s ease !important;
padding: 0 !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
position: relative;
height: auto !important;
/* WICHTIG: Smartstore-Default `.artlist-4-cols .art { width: 25% }` ueberschreiben.
Ohne diesen Override schrumpft die Karte auf 25% der Grid-Zelle (~81px) zusammen. */
width: 100% !important;
max-width: 100% !important;
flex: 1 1 auto !important;
}
.artlist .art:hover { transform: translateY(-6px); box-shadow: var(--mts-shadow) !important; }
/* Bild-Container: 4:3 (Bikes sind landscape), reines Weiss — KEIN Grau mehr.
flex-shrink:0 damit der Container in flex-Eltern (Slick-Carousel) nicht
zusammenklappt; aspect-ratio allein reichte da nicht. */
.art-picture-block, .art .art-picture-block {
background: #ffffff !important;
border: 0 !important;
aspect-ratio: 4/3 !important;
padding: 0 !important;
margin: 0 !important;
display: block !important;
border-radius: var(--mts-radius) var(--mts-radius) 0 0;
overflow: hidden;
position: relative !important;
width: 100% !important;
flex: 0 0 auto !important;
flex-shrink: 0 !important;
}
/* Inner anchor (.art-picture) — Smartstore-Default setzt `height: 0` (aspect-ratio
ueber padding-bottom%-Trick). Das ueberschreiben wir mit explizitem 100% damit
das absolute Layer wirklich die Picture-Block-Hoehe (244px @ 4:3) ausfuellt. */
.art-picture-block .art-picture, .art-picture-block > a, .art-picture.img-center-container {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
display: block !important;
background: transparent !important;
border: 0 !important;
aspect-ratio: auto !important;
padding: 0 !important;
margin: 0 !important;
}
/* Bild GANZ sichtbar — fixe Kanten via absolute inset:0, contain, nie cropped.
`width:auto/height:auto` kollabiert in flex-Eltern auf 0px (Browser-Quirk),
daher hier explizit width:100%/height:100% mit object-fit:contain. */
/* SCOPE: nur Listing-Cards (.art), NIEMALS img.file-img global. Sonst wird
u. a. .pd-brand-picture.file-img (PDP-Brand-Logo) absolut positioniert
und kollidiert mit dem Titel. */
.art-picture img, .art-picture .file-img, .art-picture-block img, .art img.file-img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center !important;
padding: 14px 18px !important;
box-sizing: border-box !important;
transition: transform 0.5s cubic-bezier(.22,.61,.36,1);
}
/* Defensive: PDP-Brand-Picture darf NIE absolute sein, immer inline */
.pd-brand-picture, .pd-brand-block img, .pd-info .pd-brand img {
position: static !important;
inset: auto !important;
padding: 0 !important;
}
.artlist .art:hover .art-picture img { transform: scale(1.04); }
/* Brand-Logo (Cube etc.) — links-buendig, schoen platziert ueber dem Titel */
.art-brand, .art-vendor, .pd-brand, .pd-brand-name {
font-size: 11px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
color: var(--mts-text-muted) !important;
font-weight: 500 !important;
padding: 14px 18px 0 !important;
text-align: left !important;
margin: 0 !important;
display: block;
}
.art-brand img.mts-brand-img, .art-vendor img.mts-brand-img, .pd-brand img.mts-brand-img {
height: 24px !important; width: auto !important; max-width: 100px;
object-fit: contain; display: inline-block; vertical-align: middle;
}
/* PD-Brand-Picture (Manufacturer-Logo auf der Produktdetailseite) — gut sichtbar */
.pd-brand-picture, .pd-brand img, .pd-brand-block img,
.product-page .pd-brand img, .product-page [class*="brand"] img {
max-height: 64px !important;
max-width: 200px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
display: inline-block !important;
vertical-align: middle !important;
}
.pd-brand-block, .pd-brand {
display: inline-flex !important;
align-items: center;
margin-bottom: 16px;
}
/* Titel — IMMER links-buendig, voller Name sichtbar, kein Truncate */
.art-genericname, .art-name {
margin: 0 !important; padding: 0 !important;
font-family: var(--mts-font-display) !important;
text-align: left !important;
min-height: auto !important;
}
.art-name-link, .art-name a {
display: block !important;
padding: 6px 18px 4px !important;
text-align: left !important;
font-weight: 600 !important;
color: var(--mts-text) !important;
font-size: 1rem !important;
line-height: 1.35 !important;
overflow: visible !important; /* Smartstore-Default clippt 2. Zeile -> aufheben */
max-height: none !important;
height: auto !important;
-webkit-line-clamp: unset !important;
text-overflow: clip !important;
white-space: normal !important;
}
.art-name-link span, .art-name span, .art-genericname span {
text-align: left !important;
display: block;
overflow: visible;
text-overflow: clip;
white-space: normal;
}
.art-info, .art-meta, .art-brand-block { padding: 0 18px !important; text-align: left !important; }
.art-delivery-info {
font-size: 12px !important; color: var(--mts-text-muted) !important;
padding: 0 18px !important; margin: 0 0 4px !important;
text-align: left !important;
}
/* Preis — links-buendig mit feinem Trenner darueber.
Iter 9 Phase B: `margin-top:auto` damit der Preis IMMER auf Card-Bottom
sitzt — egal ob Single-Size-Badge / Specs-Tags vorhanden sind oder nicht.
Sicherstellt gleiche Preis-Y-Position in einer Reihe. */
.art-price-block {
font-family: var(--mts-font-display) !important;
padding: 10px 18px 14px !important;
text-align: left !important;
margin: 8px 0 0 !important;
margin-top: auto !important;
/* Iter 12 Phase A: trennlinie zwischen specs/single-size und preis WEG.
Nur Whitespace trennt. */
border-top: 0 !important;
}
/* Card-Body (Smartstore: .art-data-block enthaelt info + actions) muss
ebenfalls als flex-column wachsen damit margin-top:auto greift. */
.artlist .art .art-data-block {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
min-height: 0 !important;
}
.artlist .art .art-actions-block {
margin-top: auto !important;
}
.art-price-block .art-price, .art-finalprice, .art-price-value, .price {
font-family: var(--mts-font-display) !important;
font-weight: 700 !important;
color: var(--mts-text) !important;
font-size: 1.3rem !important;
letter-spacing: -0.01em;
text-align: left !important;
display: block;
}
/* Iter 14 Phase C: Grid (NICHT Lines) -> Preis-Block + Rating + Steuer-Hinweis
ZENTRIERT (User: "ich will bei raster ansicht das dass zentriert noch ist
ab 3.899,00 €"). Nur fuer Grid-Layout, Lines hat eigene right-aligned-Regel. */
.artlist:not(.artlist-lines) .art .art-price-block,
.artlist:not(.artlist-lines) .art .art-price,
.artlist:not(.artlist-lines) .art .art-finalprice,
.artlist:not(.artlist-lines) .art .art-price-value,
.artlist:not(.artlist-lines) .art .art-old-price,
.artlist:not(.artlist-lines) .art .art-baseprice,
.artlist:not(.artlist-lines) .art .art-legalinfo,
.artlist:not(.artlist-lines) .art .art-rating-block,
.artlist:not(.artlist-lines) .art .art-rating,
.artlist:not(.artlist-lines) .art .product-rating {
text-align: center !important;
justify-content: center !important;
}
.artlist:not(.artlist-lines) .art .art-rating-block,
.artlist:not(.artlist-lines) .art .art-rating {
display: flex !important;
align-items: center !important;
}
.art-old-price, .price-old, .art-baseprice, s, del {
color: var(--mts-text-muted) !important;
text-decoration: line-through;
font-weight: 500 !important;
font-size: 0.9rem !important;
}
/* CRITICAL: art-drop IMMER sichtbar — kein hover-overlay, fester Footer der Karte.
Smartstore-Default setzt `z-index: -1` (Drop-Layer hinter der Karte), das
ueberschreiben wir auf z-index:1 damit die Buttons klickbar bleiben. */
.art-drop {
position: static !important;
visibility: visible !important;
opacity: 1 !important;
display: block !important;
padding: 0 18px 18px !important;
margin: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
height: auto !important;
width: 100% !important;
pointer-events: auto !important;
z-index: 1 !important;
}
/* iPad-Round-2 P10: Karten-Compare-Button (nativ + injiziert) entfernt.
Button-Grid daher 3 Spalten (Cart + Wunschliste + Beschreibung) statt 4
-> keine Luecke. Der native Compare-Button ist via display:none raus
(Regel unten), das Grid zaehlt ihn dann nicht mehr als Spalte. */
/* C2: Smartstore-Flex Grid-Divider (--art-divider-color #dee2e6) neutralisieren
-> keine graue Trennlinie zwischen Produkt-Reihen. Nur Grid, Lines bleibt. */
.artlist:not(.artlist-lines), .artlist-grid {
--art-divider-color: transparent !important;
}
.artlist-grid > .art,
.category-page .artlist .art,
.product-list .artlist .art {
border-bottom: 0 !important;
border-bottom-color: transparent !important;
}
.art-drop .art-btn-group, .art-drop .row.no-gutters {
display: grid !important;
grid-template-columns: 1fr 44px;
gap: 6px !important;
margin: 0 !important;
width: 100% !important;
}
/* P10: nativen Smartstore-Karten-Compare-Button ("Vergleichen") aus dem
Button-Grid nehmen (Desktop + alle Breakpoints). PDP-Compare bleibt. */
.art-drop .art-btn-group .add-to-compare-list-button,
.art-drop .row.no-gutters .add-to-compare-list-button,
.artlist .art .add-to-compare-list-button {
display: none !important;
}
/* C5: grauen Info-/Beschreibung-Button (fa-info, a.product-details-button)
aus der Karte nehmen. Cart-Button spannt dann 1fr (freie Spalte). */
.art-drop .art-btn-group .product-details-button,
.art-drop .row.no-gutters .product-details-button,
.artlist .art .product-details-button {
display: none !important;
}
/* Compare-Restore (a2): Overlay-Card-Compare wieder sichtbar (Hide entfernt);
nativer Smartstore-Card-Compare (.add-to-compare-list-button) bleibt aus. */
.art-drop .art-btn, .art-drop .btn {
height: 44px !important;
min-height: 44px !important;
width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 12px !important;
font-size: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: none !important;
box-shadow: none !important;
}
.art-drop .add-to-cart-button {
border-radius: 999px !important;
background: var(--mts-accent) !important;
border-color: var(--mts-accent) !important;
color: #fff !important;
box-shadow: 0 6px 14px rgba(var(--mts-c-primary-rgb),0.25) !important;
}
.art-drop .add-to-cart-button:hover {
background: var(--mts-accent-hover) !important;
border-color: var(--mts-accent-hover) !important;
}
.art-drop .btn-secondary {
background: var(--mts-bg-soft) !important;
color: var(--mts-text) !important;
border: 1px solid var(--mts-line) !important;
}
.art-drop .btn-secondary:hover {
background: var(--mts-text) !important;
color: #fff !important;
}
/* Screenreader-Toggle (war 415px tall und blockierte Layout) — visuell weg, fuer SR ok */
.art .sr-toggle {
position: absolute !important;
width: 1px !important; height: 1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0);
margin: -1px;
padding: 0;
border: 0;
pointer-events: none;
}
/* Recently-Viewed Carousel — sieht aus wie die Home-Featured-Carousel:
full-width Section ohne grauen Block-Background, ohne Border, 4 Karten/View
mit grossen Pfeilbuttons rechts unten wie Home. */
/* Section-Container: NUR die recently-viewed-Box (NICHT alle .product-grid /
.block-boxed sonst breche ich Cart-/Wishlist-/Compare-Widgets). */
.recently-viewed-product-grid {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Full-bleed-Variante (vom JS gesetzt nachdem das Element an body verschoben wurde) */
body > .recently-viewed-product-grid.mts-rv-fullbleed,
.mts-rv-fullbleed {
width: 100% !important;
margin: 0 0 0 0 !important;
padding: 80px 0 96px !important;
/* TASK-RV: Section-Hintergrund weiss (vorher var(--mts-bg-soft)=#fafafa).
User-Feedback: kein grauer Block-/Kachel-Hintergrund. Die Karten sind
bereits weiss; das Grau kam allein von dieser Section-Flaeche und schien
in den Luecken zwischen den Karten durch. */
background: #ffffff !important;
border-top: 1px solid var(--mts-line) !important;
}
.mts-rv-fullbleed .block-title {
max-width: 1680px !important;
margin: 0 auto 48px !important;
padding: 0 40px !important;
text-align: center !important;
}
.mts-rv-fullbleed .block-title h3, .mts-rv-fullbleed h3 {
font-family: var(--mts-font-display) !important;
font-size: clamp(2rem, 4vw, 3.2rem) !important;
font-weight: 700 !important;
color: var(--mts-text) !important;
letter-spacing: -0.025em !important;
margin: 0 !important;
}
.mts-rv-fullbleed .block-body {
max-width: 1680px !important;
margin: 0 auto !important;
padding: 0 40px !important;
}
@media (max-width:700px) {
.mts-rv-fullbleed { padding: 56px 0 72px !important; }
.mts-rv-fullbleed .block-title, .mts-rv-fullbleed .block-body { padding: 0 20px !important; }
}
.recently-viewed-product-grid .block-body, .product-grid .block-body { padding: 0 !important; background: transparent !important; }
.recently-viewed-product-grid .block-title, .product-grid .block-title {
border: 0 !important; background: transparent !important;
text-align: center !important;
margin-bottom: 32px !important;
}
.recently-viewed-product-grid h3, .product-grid h3 {
font-family: var(--mts-font-display) !important;
font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
font-weight: 700 !important;
color: var(--mts-text) !important;
letter-spacing: -0.025em !important;
margin: 0 !important;
}
/* Carousel: Slick laeuft, Slides nehmen 1/4 Breite, kein Border */
.artlist-carousel { width: 100% !important; position: relative; padding-bottom: 80px !important; }
.artlist-carousel .slick-list { overflow: hidden !important; padding: 0 !important; margin: 0 -12px !important; }
.artlist-carousel .slick-track { display: flex !important; align-items: stretch !important; }
.artlist-carousel .slick-slide {
padding: 0 12px !important;
box-sizing: border-box !important;
height: auto !important;
max-width: none !important;
}
.artlist-carousel .slick-slide > div { height: 100% !important; }
.artlist-carousel .slick-slide .art {
width: 100% !important;
max-width: none !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
border: 0 !important;
background: #fff !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.04) !important;
}
.artlist-carousel .slick-slide:only-child { max-width: 360px !important; flex: 0 0 360px !important; }
/* Custom-Arrows wie Home-Featured: NUR fuer .artlist-carousel + recently-viewed.
NICHT global auf .product-grid (broke Cart-/Wishlist-Widgets) */
.artlist-carousel .slick-prev,
.artlist-carousel .slick-next,
.recently-viewed-product-grid .slick-prev,
.recently-viewed-product-grid .slick-next {
position: absolute !important;
top: auto !important;
bottom: 16px !important;
transform: none !important;
width: 48px !important; height: 48px !important;
border-radius: 50% !important;
background: #fff !important;
color: var(--mts-text) !important;
border: 1px solid var(--mts-line) !important;
box-shadow: var(--mts-shadow-soft) !important;
z-index: 10 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
visibility: visible !important;
opacity: 1 !important;
cursor: pointer;
font-size: 0;
}
.artlist-carousel .slick-prev::before,
.artlist-carousel .slick-next::before,
.recently-viewed-product-grid .slick-prev::before,
.recently-viewed-product-grid .slick-next::before {
color: var(--mts-text) !important;
opacity: 1 !important;
font-size: 18px !important;
font-family: 'slick','FontAwesome', sans-serif !important;
}
.artlist-carousel .slick-prev,
.recently-viewed-product-grid .slick-prev { right: 132px !important; left: auto !important; }
.artlist-carousel .slick-next,
.recently-viewed-product-grid .slick-next { right: 72px !important; left: auto !important; }
.artlist-carousel .slick-prev:hover,
.artlist-carousel .slick-next:hover,
.recently-viewed-product-grid .slick-prev:hover,
.recently-viewed-product-grid .slick-next:hover {
background: var(--mts-text) !important;
border-color: var(--mts-text) !important;
}
.artlist-carousel .slick-prev:hover::before,
.artlist-carousel .slick-next:hover::before {
color: #fff !important;
}
/* Slick Carousel Pfeile — sichtbar machen (Smartstore-Default versteckt sie) */
.artlist-carousel .slick-prev, .artlist-carousel .slick-next,
.product-grid .slick-prev, .product-grid .slick-next {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
width: 48px !important; height: 48px !important;
background: #fff !important;
border: 1px solid var(--mts-line) !important;
border-radius: 50% !important;
color: var(--mts-text) !important;
box-shadow: var(--mts-shadow-soft) !important;
align-items: center; justify-content: center;
position: absolute !important;
top: 50% !important;
transform: translateY(-50%);
z-index: 5;
cursor: pointer;
}
.artlist-carousel .slick-prev, .product-grid .slick-prev { left: -24px !important; right: auto !important; }
.artlist-carousel .slick-next, .product-grid .slick-next { right: -24px !important; left: auto !important; }
.artlist-carousel .slick-prev:hover, .artlist-carousel .slick-next:hover,
.product-grid .slick-prev:hover, .product-grid .slick-next:hover {
background: var(--mts-text) !important; color: #fff !important; border-color: var(--mts-text) !important;
}
.artlist-carousel .slick-prev::before, .artlist-carousel .slick-next::before,
.product-grid .slick-prev::before, .product-grid .slick-next::before {
color: inherit !important; opacity: 1 !important; font-size: 18px !important;
}
/* Recently-Viewed-Block-Container ohne Border (NUR recently-viewed,
andere .product-grid bleiben wie Smartstore sie liefert) */
.recently-viewed-product-grid,
.recently-viewed-product-grid .block {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.recently-viewed-product-grid .block-title {
border: 0 !important; background: transparent !important;
}
/* ===== CATEGORY-LISTING GRID — Iter 10 Phase B =====
User-Feedback Iter 9: "ich moechte das pro reihe nur 4 Produkte sind und
die Produktekarten groesser bzw die Produktbilder viel groesser".
Strategie: 4 Spalten ab Mid-Desktop (>=1280px). Damit die Cards trotzdem
gross wirken, oeffnet die Category-Page den Container weit auf
`max-width: min(1880px, calc(100vw - 32px))` (siehe Container-Override
unten). Mobile bleibt 2-Spaltig. Negation `:not(.artlist-lines)` schuetzt
den Smartstore-List-View ?v=list. */
.artlist:not(.slick-initialized):not(.artlist-lines) {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 20px !important;
}
@media (min-width: 560px) {
.artlist:not(.slick-initialized):not(.artlist-lines) { gap: 24px !important; }
}
/* Iter 11 (2026-08-17): Spaltenzahl im Standard-Zustand (Filter sichtbar,
KEIN body.mts-filter-collapsed) kommt jetzt dynamisch aus der nativen
Katalog-Einstellung "Spaltenbreite Raster-Ansicht"
(CatalogSettings.GridStyleListColumnSpan) statt der iPad-Round-2-
Fixierung auf 3. Product.List.cshtml:42-43 setzt dafuer bereits die
Klasse `.artlist-{N}-cols` auf dasselbe Element. Verifiziert 2026-08-17
read-only gegen die Multicycle-Box: aktueller Wert = Max4Cols (4).
WICHTIG: die native Flex-Theme-SCSS (_artlist.scss) setzt fuer diese
Klasse Bootstrap-Flex-Spalten (make-art-col) mit EIGENEN Breakpoints
(3 Spalten erst ab lg=992px, 4 erst ab xl=1200px) UND ohne `display:
grid` - kollidiert also mit `display:grid !important` weiter oben in
dieser Datei (das ganze Overlay ist laengst auf CSS-Grid umgebaut).
Ein einfaches Entfernen des !important-Overrides wuerde deshalb NICHT
"die native Regel greifen lassen", sondern das Grid ohne Spalten-
Definition zuruecklassen (kaputtes Layout) und zusaetzlich einen
unerwuenschten 3-Spalten-Zwischenzustand bei 992-1199px einfuehren.
Deshalb hier: dieselbe Grid-Strategie wie bisher, aber die Spaltenzahl
liest sich aus der vom Server bereits gesetzten Klasse statt hart
codiert zu sein - aendert sich GridStyleListColumnSpan im Admin
(Katalog -> Einstellungen), greift das hier automatisch mit, ohne
Code-Aenderung. Eingeklappter Zustand bleibt unveraendert fest bei 3
(Regel weiter unten, `body.mts-filter-collapsed .artlist...`, hoehere
Spezifitaet gewinnt dort weiterhin) - groessere Karten, wenn die
Sidebar weg ist. */
@media (min-width: 992px) {
.artlist.artlist-2-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 28px !important;
}
.artlist.artlist-3-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 28px !important;
}
.artlist.artlist-4-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 28px !important;
}
.artlist.artlist-5-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 28px !important;
}
.artlist.artlist-6-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 28px !important;
}
}
@media (min-width: 1280px) {
.artlist.artlist-2-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 32px !important;
}
.artlist.artlist-3-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 32px !important;
}
.artlist.artlist-4-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 32px !important;
}
.artlist.artlist-5-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
gap: 32px !important;
}
.artlist.artlist-6-cols:not(.slick-initialized):not(.artlist-lines) {
grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
gap: 32px !important;
}
}
/* ITER 10 Phase B — Category-Page Container weit oeffnen, damit 4 Cards
auch ohne Filter-Collapse spuerbar gross sind. `.category-page` ist Kind
von `` -> wir treffen den Bootstrap-`.container` ueber den
`body.lyt-cols-2 + Page hat .category-page` Verbund. Da .category-page
ein div weit unten im DOM ist, wird der Selektor ueber :has() zugeordnet,
mit Fallback auf body[data-pagetype="category"] (zur Vorsicht setzen wir
auch den Body-Marker per JS). */
body.lyt-cols-2:has(.category-page) > .container,
body.mts-cat-page > .container,
body.lyt-cols-2:has(.category-page) .container.menubar-container,
body.lyt-cols-2:has(.category-page) > div > .container:not(.menubar-container):not(.shopbar-container):not(.megamenu-container):not(.footer-main):not(.footer-bottom):not(.footer-social) {
max-width: min(1880px, calc(100vw - 32px)) !important;
}
/* Bild-Aspect 5:4 auf Listing — mehr Bildflaeche pro Card als 4:3 ohne
dass die Card zu hoch wird */
body.lyt-cols-2:has(.category-page) .artlist .art .art-picture-block,
body.mts-cat-page .artlist .art .art-picture-block {
aspect-ratio: 5 / 4 !important;
}
/* PHASE-1 BUGFIX: a11y skip-link nicht als Grid-Item rendern.
Smartstore packt einen sichtbar=opacity:0 aber `display:block; width:100%`
`
` als ERSTES Kind ins .artlist Grid.
Damit verbraucht er Slot #1 und die erste Produktkarte landet in Slot #2.
Loesung: aus dem Grid-Flow nehmen via standard sr-only-Pattern, Fokus
bleibt erreichbar (clip-path:none on focus). */
.artlist > .skip-content-container,
.artlist .skip-content-container,
.product-list-container > .skip-content-container {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
/* Aus dem Grid-Flow: span 0 cells */
display: block !important;
grid-column: 1 / 2 !important;
grid-row: 1 / 2 !important;
pointer-events: none !important;
}
/* Auf Tastatur-Fokus wieder sichtbar */
.artlist > .skip-content-container:focus-within,
.product-list-container > .skip-content-container:focus-within {
position: fixed !important;
top: 80px !important;
left: 24px !important;
width: auto !important;
height: auto !important;
clip: auto !important;
margin: 0 !important;
z-index: 9999 !important;
pointer-events: auto !important;
}
/* Card-Border + Subline auf Category-Page sichtbar machen */
.artlist .art, .artlist-grid .art {
border: 0 !important;
outline: 0 !important;
}
/* ITER 10 PHASE A — Specs auf Listing-Cards komplett entfernt
(User-Feedback: "ich moechte das du das ganz entfernst aus der produktekarte:
Rahmen / Motor / Schaltung..."). Slot bleibt im DOM (JS-Pipeline braucht die
Daten weiter fuer Hover-Image + Single-Size), aber visuell unsichtbar. */
.artlist .art .mts-card-specs,
.artlist .art .mts-card-specs.is-loading,
.artlist .art .mts-card-specs.is-empty,
.artlist.artlist-lines .art .mts-card-specs {
display: none !important;
}
/* ===== Iter 9 Phase D — List-View-Layout (Smartstore ?v=list)
Markup: