/*
* ============================================================
* BEMONTECH – Override Stylesheet
* Professional B2B Construction Supply Redesign
*
* PAGE-AGNOSTIC: All rules apply to every page. Same classes
* look the same wherever they appear.
*
* INTEGRATION: Add to this file AFTER all existing
* stylesheet tags in . Do not edit original CSS.
* ============================================================
*/
/* ── Design Tokens ── */
:root {
--bmt-red: #e40421;
--bmt-red-dark: #b5031a;
--bmt-dark: #1a1a1e;
--bmt-charcoal: #2d2d2d;
--bmt-grey: #4a4a4f;
--bmt-mid: #888;
--bmt-light: #f5f5f5;
--bmt-border: #e2e2e2;
--bmt-white: #ffffff;
--bmt-sh-sm: 0 2px 8px rgba(0,0,0,.07);
--bmt-sh-md: 0 4px 20px rgba(0,0,0,.12);
--bmt-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
--bmt-ease: .25s ease;
}
/* ══════════════════════════════════════════════════════════════
PAGE LAYOUT (#spaltenContainer = sidebar + content row)
══════════════════════════════════════════════════════════════ */
#spaltenContainer {
display: flex !important;
align-items: stretch !important;
max-width: 1420px !important;
margin: 0 auto !important;
padding: 20px 20px 48px !important;
gap: 0 !important;
}
#rechts {
flex: 1 !important;
min-width: 0 !important;
background: var(--bmt-light) !important;
padding: 0 !important;
display: block !important;
}
#content,
#content > form {
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
}
/* LEFT SIDEBAR (#links) + LEFT NAVIGATION (#leftNavi tree) reintegrated into scss/all.scss (after the menu/default.scss import) */
/* ══════════════════════════════════════════════════════════════
SUPPRESS ORIGINAL ELEMENTS (replaced by redesigned versions)
══════════════════════════════════════════════════════════════ */
h1.contentHeadline,
#content > form > h1,
.contactOptionsArea,
#content > form > p:not(#prodgrpintro),
#prodgrpintro,
.preisinfo,
.contentHeadRight {
display: none !important;
}
/* BREADCRUMB styles reintegrated into scss/all.scss (after the breadcrumbs/imageHidden.scss import) */
/* HERO SLIDER (#bmt-hero-slider + .bmt-slide*) and LEGACY BXSLIDER (#bannerslider) reintegrated into scss/all.scss (.startPage block) */
/* ══════════════════════════════════════════════════════════════
FIXED CONTACT SIDEBAR (right edge of viewport)
══════════════════════════════════════════════════════════════ */
#bmt-contact-sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 9990;
display: flex;
flex-direction: column;
gap: 2px;
}
.bmt-cpill {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
background: var(--bmt-red);
color: #fff !important;
text-decoration: none !important;
cursor: pointer;
box-shadow: -2px 2px 8px rgba(0,0,0,.2);
transition: background .2s;
}
.bmt-cpill:hover { background: var(--bmt-red-dark); }
.bmt-cpill-icon {
display: flex; align-items: center; justify-content: center;
width: 100%; height: 100%;
}
.bmt-cpill-icon svg {
width: 20px; height: 20px;
stroke: #fff; fill: none;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.bmt-cpill-label { display: none; }
/* ══════════════════════════════════════════════════════════════
ABOUT + STATS SECTION
══════════════════════════════════════════════════════════════ */
#bmt-about {
display: flex;
align-items: stretch;
background: var(--bmt-white);
border-top: 4px solid var(--bmt-red);
box-shadow: var(--bmt-sh-sm);
margin: 0 0 24px;
}
.bmt-about-text {
flex: 1;
padding: 28px 36px;
border-right: 1px solid var(--bmt-border);
}
.bmt-about-text h2 {
font-size: 16px !important;
font-weight: 800 !important;
color: var(--bmt-dark) !important;
text-transform: uppercase !important;
letter-spacing: .6px !important;
margin: 0 0 10px !important;
padding: 0 !important;
border: none !important;
}
.bmt-about-text p {
font-size: 14px !important;
color: var(--bmt-grey) !important;
line-height: 1.75 !important;
margin: 0 0 18px !important;
}
.bmt-about-link {
font-size: 11px !important;
font-weight: 800 !important;
color: var(--bmt-red) !important;
text-decoration: none !important;
text-transform: uppercase !important;
letter-spacing: 1.2px !important;
border-bottom: 2px solid var(--bmt-red) !important;
padding-bottom: 1px !important;
}
.bmt-about-link:hover {
color: var(--bmt-red-dark) !important;
border-color: var(--bmt-red-dark) !important;
}
.bmt-stats { display: flex; flex-shrink: 0; }
.bmt-stat {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 28px 40px;
border-right: 1px solid var(--bmt-border);
text-align: center; min-width: 140px;
}
.bmt-stat:last-child { border-right: none; }
.bmt-stat-number {
display: block;
font-size: 40px; font-weight: 900;
color: var(--bmt-red); line-height: 1;
margin-bottom: 6px; letter-spacing: -1px;
}
.bmt-stat-number sup { font-size: 20px; }
.bmt-stat-label {
display: block;
font-size: 10px; font-weight: 800;
color: var(--bmt-grey);
text-transform: uppercase; letter-spacing: 1.2px;
}
/* ══════════════════════════════════════════════════════════════
SECTION HEADERS
══════════════════════════════════════════════════════════════ */
.bmt-section-header {
display: flex; align-items: center; gap: 16px;
margin: 28px 0 16px;
}
.bmt-section-header h2 {
font-size: 10px !important; font-weight: 900 !important;
letter-spacing: 2.8px !important; text-transform: uppercase !important;
color: var(--bmt-dark) !important; white-space: nowrap;
margin: 0 !important; padding: 0 !important;
border: none !important; background: none !important;
}
.bmt-section-header-line {
flex: 1; height: 1px; background: var(--bmt-border);
}
/* Inner content padding wrapper */
.content-inner { padding: 20px 20px 24px !important; }
/* CATEGORY GRID: .productBox reintegrated into scss/all.scss (after the categoryBoxes/plain.scss import) */
/* ══════════════════════════════════════════════════════════════
3 MAIN TOPIC CARDS
══════════════════════════════════════════════════════════════ */
#bmt-topics { margin-bottom: 36px; }
.bmt-topics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.bmt-topic-card {
position: relative; display: block;
text-decoration: none !important;
overflow: hidden; height: 268px;
background: var(--bmt-dark);
}
.bmt-topic-card-bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
opacity: .2; filter: grayscale(.5) contrast(1.1);
transition: opacity .4s, transform .45s;
}
.bmt-topic-card:hover .bmt-topic-card-bg { opacity: .32; transform: scale(1.05); }
.bmt-topic-card::before {
content: ''; position: absolute;
top: 0; left: 0; width: 5px; height: 100%;
background: var(--bmt-red); z-index: 2;
transition: width .25s;
}
.bmt-topic-card:hover::before { width: 8px; }
.bmt-topic-card-body {
position: absolute; z-index: 3;
bottom: 0; left: 0; right: 0;
padding: 22px 22px 22px 26px;
background: linear-gradient(to top,
rgba(10,10,15,.93) 0%,
rgba(10,10,15,.55) 55%,
transparent 100%);
}
.bmt-topic-tag {
display: inline-block;
background: var(--bmt-red); color: #fff;
font-size: 9px; font-weight: 800;
text-transform: uppercase; letter-spacing: 2px;
padding: 4px 10px; margin-bottom: 10px;
}
.bmt-topic-title {
font-size: 22px; font-weight: 900;
color: var(--bmt-white); line-height: 1.2;
margin: 0 0 8px; letter-spacing: -.3px;
}
.bmt-topic-desc {
font-size: 13px; color: rgba(255,255,255,.62);
line-height: 1.55; margin: 0 0 14px;
}
.bmt-topic-link {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10px; font-weight: 800;
color: var(--bmt-red) !important;
text-transform: uppercase; letter-spacing: 1.5px;
text-decoration: none !important;
}
.bmt-topic-link svg { transition: transform .2s; }
.bmt-topic-card:hover .bmt-topic-link svg { transform: translateX(4px); }
/* ══════════════════════════════════════════════════════════════
PRODUCT / VARIANTS PAGE — TITLE + TWO-COLUMN LAYOUT
══════════════════════════════════════════════════════════════ */
h1.contentH1 {
font-size: 22px !important;
font-weight: 900 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1.2 !important;
letter-spacing: -.3px !important;
text-transform: uppercase !important;
border: none !important;
background: none !important;
}
/* Article details: #articleDetailsContainer > h1 reintegrated into scss/all.scss (body.articlePage block) */
#articleInformationContainer {
padding: 18px 20px !important;
flex: 1 !important;
overflow-y: auto !important;
}
.salesTextBox p {
font-size: 13px !important;
line-height: 1.75 !important;
color: var(--bmt-grey) !important;
margin: 0 0 12px !important;
}
.salesTextBox p:last-child { margin-bottom: 0 !important; }
/* ══════════════════════════════════════════════════════════════
VARIANTS TABLE
══════════════════════════════════════════════════════════════ */
.variantContainer {
background: var(--bmt-white) !important;
border: 1px solid var(--bmt-border) !important;
overflow: hidden !important;
margin-top: 20px !important;
}
/* .variantContainer > h1 reintegrated into scss/all.scss (#content block, below the variantTableFullWidth.scss import) */
/* .orderListe + .wkinputfield + input.addToCart reintegrated into scss/all.scss (below the variantTableFullWidth.scss import) */
/* ══════════════════════════════════════════════════════════════
ARTICLE LIST (.articleList / .articleBox)
══════════════════════════════════════════════════════════════ */
.articleBox {
border-radius: 0 !important;
border: 1px solid var(--bmt-border) !important;
border-bottom: 3px solid transparent !important;
background: var(--bmt-white) !important;
box-shadow: var(--bmt-sh-sm) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
transition: border-color var(--bmt-ease), box-shadow var(--bmt-ease), transform var(--bmt-ease) !important;
cursor: pointer !important;
}
.articleBox:hover {
border-bottom-color: var(--bmt-red) !important;
box-shadow: var(--bmt-sh-md) !important;
transform: translateY(-3px) !important;
}
.articleBoxContent {
display: flex !important;
flex-direction: column !important;
background: none !important;
}
/* Image area — direct child .articleLink only */
.articleBoxContent > .articleLink {
display: block !important;
background: var(--bmt-light) !important;
border-bottom: 1px solid var(--bmt-border) !important;
flex: 0 0 140px !important;
height: 140px !important;
min-height: 140px !important;
max-height: 140px !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.articleImage {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: none !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
}
.boxTitle {
padding: 11px 13px 6px !important;
min-height: 58px !important;
background: var(--bmt-white) !important;
flex: 1 !important;
}
.boxTitle .articleLink {
display: block !important;
background: none !important;
border: none !important;
height: auto !important;
padding: 0 !important;
text-decoration: none !important;
flex-shrink: unset !important;
}
.articleTitle {
display: block !important;
font-size: 11px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .5px !important;
color: var(--bmt-dark) !important;
line-height: 1.4 !important;
}
.articleBoxBottom {
padding: 10px 13px 12px !important;
border-top: 1px solid var(--bmt-border) !important;
background: var(--bmt-white) !important;
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
justify-content: center !important;
align-items: center;
margin-top: auto !important;
flex-shrink: 0 !important;
min-height: 88px !important;
box-sizing: border-box !important;
}
.articleBoxBottom .price {
display: flex !important;
align-items: baseline !important;
gap: 3px !important;
font-size: 16px !important;
font-weight: 900 !important;
color: var(--bmt-dark) !important;
line-height: 1 !important;
letter-spacing: -.3px !important;
}
.articleBoxBottom .price::before {
content: 'ab' !important;
font-size: 9px !important;
font-weight: 800 !important;
color: var(--bmt-mid) !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
align-self: center !important;
margin-right: 2px !important;
}
.oldPrice { display: none !important; }
.infoTextGrossNet {
display: block !important;
font-size: 9px !important;
font-weight: 600 !important;
color: var(--bmt-mid) !important;
text-transform: uppercase !important;
letter-spacing: .8px !important;
}
.stockInfo {
display: flex !important;
align-items: center !important;
gap: 5px !important;
margin-top: 2px !important;
}
.stockInfo img {
height: 13px !important;
width: auto !important;
}
.variantMasterHint { display: block !important; }
.variantMasterHint a {
display: inline-block !important;
background: var(--bmt-red) !important;
color: var(--bmt-white) !important;
font-size: 9px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 1.4px !important;
padding: 5px 12px !important;
text-decoration: none !important;
border: none !important;
transition: background var(--bmt-ease) !important;
}
.variantMasterHint a:hover {
background: var(--bmt-red-dark) !important;
color: var(--bmt-white) !important;
}
/* ══════════════════════════════════════════════════════════════
RESPONSIVE
══════════════════════════════════════════════════════════════ */
/* ── 1200px: tighten grids ── */
@media (max-width: 1200px) {
#bmt-hero-slider { height: 320px; width: 100%; margin: 0 0 20px; }
.bmt-slide-content h1,
.bmt-slide-content h2 { font-size: 26px !important; }
.bmt-stat { padding: 20px 24px; min-width: 110px; }
.bmt-stat-number { font-size: 32px; }
.bmt-topic-title { font-size: 18px; }
#footer .footer-cols {
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
padding: 0 24px 28px !important;
}
#contentArea {
grid-template-columns: 280px 1fr !important;
}
}
/* ── 960px: collapse sidebar, stack layouts ── */
@media (max-width: 960px) {
#links { display: none !important; }
#spaltenContainer { padding: 14px 14px 36px !important; }
#bmt-hero-slider { height: 260px; width: 100%; margin: 0 0 16px; }
.bmt-slide-content { left: 36px; max-width: 80%; }
.bmt-slide-content h1,
.bmt-slide-content h2 { font-size: 22px !important; }
.bmt-slide-content p { font-size: 13px; margin-bottom: 18px; }
.bmt-slider-controls { left: 36px; }
#bmt-about { flex-direction: column; }
.bmt-about-text { border-right: none; border-bottom: 1px solid var(--bmt-border); padding: 20px 24px; }
.bmt-stats { flex-wrap: wrap; }
.bmt-stat { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--bmt-border); padding: 18px 20px; }
.bmt-topics-grid { grid-template-columns: repeat(2, 1fr); }
.bmt-topic-card { height: 220px; }
/* Stack product picture above details */
#contentArea { grid-template-columns: 1fr !important; }
#contentColumns { grid-column: 1 !important; grid-row: 2 !important; }
#articleDetailsContainer { grid-column: 1 !important; grid-row: 3 !important; }
.contentHeadArea { grid-column: 1 !important; grid-row: 1 !important; }
li.articleMainImage { min-height: 200px !important; }
img.mainImage { max-height: 200px !important; }
}
/* ── 640px: mobile ── */
@media (max-width: 640px) {
#bmt-hero-slider { height: 210px; width: 100%; margin: 0 0 12px; }
.bmt-slide-content { left: 22px; max-width: 90%; }
.bmt-slide-content h1,
.bmt-slide-content h2 { font-size: 18px !important; }
.bmt-slide-content p { display: none; }
.bmt-slider-controls { left: 22px; bottom: 14px; }
.productBox .catPic1 { height: 110px !important; }
.bmt-topics-grid { grid-template-columns: 1fr; }
.bmt-topic-card { height: 180px; }
#spaltenContainer { padding: 10px 10px 28px !important; }
.content-inner { padding: 12px 12px 20px !important; }
h1.contentH1 { font-size: 17px !important; }
.contentHeadArea { padding: 16px 18px !important; }
.orderListe { overflow-x: auto !important; }
.orderListe table { min-width: 480px !important; }
#footer .footer-cols {
grid-template-columns: 1fr !important;
gap: 20px !important;
padding: 0 16px 24px !important;
}
.bmt-stat { flex: 1 1 100%; }
}