/* ===================================================================== BeeServed — Canonical Design System --------------------------------------------------------------------- B2B food-service consumables shop (beeserved.de). Locale de_DE, Sie-Form. Direction "Premium" (Juni 2026) — derived from the most polished page, pages/product.html. Supersedes the old "Werkstatt" design-system.css. • Typo: DM Sans (Titel/Body) + JetBrains Mono (Preise/SKU/Eyebrows/Zahlen) • Farbe: Teal #0E5A6B · Accent/Gelb #F4C20D · Tinte #16181A · Papier #F3F5F6 • Form: großzügige Abstände, weiche Radien (10–14px), sanfte Schatten SELF-CONTAINED. Keine WordPress/Woo-Abhängigkeit. Alles ist unter der Wrapper-Klasse .bs-scope gescoped (auf ODER ein Container legen), damit das System die WP-Admin-Bar / Elementor nicht verschmutzt. FONTS — eine der beiden Varianten in den legen: (Das @import unten lädt sie zur Not selbst — der ist aber schneller.) ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ===================================================================== 1. TOKENS ===================================================================== */ .bs-scope { /* --- Brand --- */ --bs-teal: #0E5A6B; /* primärer Markenton — CTAs, dunkle Bänder, Akzentlinien */ --bs-teal-hover: #0A4956; /* Button/Link hover */ --bs-teal-dark: #0A4651; /* tiefster Teal (Footer) */ --bs-teal-tint: #E6F0F2; /* sehr helle Teal-Fläche (Chips, Icon-Kacheln) */ --bs-teal-tint-2: #E9F2F3; /* alternative helle Teal-Fläche */ --bs-accent: #F4C20D; /* Gelb — Akzent: on-dark CTA, Step-Zahlen, Highlights */ --bs-accent-hover: #DDA800; --bs-accent-tint: #FBEFC4; /* helles Gelb (Kompatibilitäts-Chip) */ /* --- Ink / neutrals --- */ --bs-ink: #16181A; /* Haupttext, Titel */ --bs-ink-2: #4A4F54; /* sekundärer Text (Fließtext gedämpft) */ --bs-graphite: #7A8087; /* Tertiärtext, Captions, Meta */ --bs-line: #E2E6E8; /* Standard-Hairline (Karten, Tabellen) */ --bs-line-2: #EEF1F2; /* sehr leichte Trennlinie (Zeilen innerhalb Karten) */ --bs-line-3: #E6E9EB; /* Header / dashed Trenner */ --bs-paper: #F3F5F6; /* Seitenhintergrund (kühles Hellgrau) */ --bs-white: #FFFFFF; --bs-surface: #FFFFFF; /* Karten-/Panelfläche */ /* --- Status --- */ --bs-success: #1F8A4D; /* Erfolg / Ersparnis */ --bs-success-tint: #EFF7F1; --bs-success-line: #C5E2CE; --bs-error: #C0392B; /* Fehler / Validierung */ --bs-error-tint: #FDECEA; --bs-error-line: #E6B0AA; --bs-warn: #8A6D00; /* Warnung (Versandhinweis) Text */ --bs-warn-tint: #FBF4DD; --bs-warn-line: #EAD9A0; --bs-info: var(--bs-teal); --bs-info-tint: var(--bs-teal-tint); --bs-info-line: #CFE0E4; /* --- Typography --- */ --bs-font: 'DM Sans', Arial, "Helvetica Neue", system-ui, sans-serif; --bs-font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace; --bs-fs-eyebrow: 12px; /* mono eyebrow / labels */ --bs-fs-caption: 13px; /* captions, meta */ --bs-fs-sm: 14.5px; /* kleiner Body */ --bs-fs-body: 16px; /* Body */ --bs-fs-lead: 16.5px; /* Lead */ --bs-fs-h3: 20px; --bs-fs-h2: 25px; --bs-fs-h2-lg: 30px; /* Section-Titel */ --bs-fs-h1: clamp(28px, 2rem + 1.2vw, 38px); --bs-fs-display: 34px; /* Hero-Titel auf dunklem Band */ --bs-lh-tight: 1.1; --bs-lh-snug: 1.3; --bs-lh-body: 1.65; /* --- Spacing (generous) --- */ --bs-1: 4px; --bs-2: 8px; --bs-3: 12px; --bs-4: 16px; --bs-5: 24px; --bs-6: 32px; --bs-7: 48px; --bs-8: 64px; --bs-9: 80px; --bs-10: 96px; /* --- Radius --- */ --bs-radius: 10px; /* Standard (Karten, Inputs, Buttons) */ --bs-radius-lg: 14px; /* große Panels / Empty-States */ --bs-radius-sm: 8px; /* kleine Elemente (Thumbs, Qty) */ --bs-radius-pill: 999px; /* --- Shadow (soft) --- */ --bs-shadow-xs: 0 1px 2px rgba(16,24,40,.04); --bs-shadow-sm: 0 1px 4px rgba(16,24,40,.06); --bs-shadow: 0 6px 22px rgba(16,24,40,.08); --bs-shadow-lg: 0 14px 40px rgba(16,24,40,.12); /* --- Layout --- */ --bs-maxw: 1180px; /* Standard-Container (Hero/Produkt) */ --bs-maxw-narrow: 1080px; /* Konto / schmalere Inhalte */ --bs-maxw-text: 760px; /* Langtext / Legal */ --bs-gutter: 28px; --bs-header-h: 80px; /* --- Base --- */ margin: 0; overflow-x: hidden; /* guard against incidental horizontal scroll on mobile */ font-family: var(--bs-font); font-size: var(--bs-fs-body); line-height: var(--bs-lh-body); color: var(--bs-ink); background: var(--bs-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ===================================================================== 2. BASE / RESET (scoped) ===================================================================== */ .bs-scope *, .bs-scope *::before, .bs-scope *::after { box-sizing: border-box; } .bs-scope h1, .bs-scope h2, .bs-scope h3, .bs-scope h4 { margin: 0 0 var(--bs-4); line-height: var(--bs-lh-tight); letter-spacing: -.02em; font-weight: 700; color: var(--bs-ink); } .bs-scope h1 { font-size: var(--bs-fs-h1); } .bs-scope h2 { font-size: var(--bs-fs-h2); letter-spacing: -.01em; } .bs-scope h3 { font-size: var(--bs-fs-h3); } .bs-scope p { margin: 0 0 var(--bs-4); color: var(--bs-ink-2); } .bs-scope a { color: inherit; } .bs-scope img { max-width: 100%; } .bs-scope strong { color: var(--bs-ink); } /* mono helper — numerals/SKU/Preise */ .bs-scope .bs-mono, .bs-scope .mono { font-family: var(--bs-font-mono); font-variant-numeric: tabular-nums; } /* ===================================================================== 3. LAYOUT — container / sections / grid / rhythm utilities ===================================================================== */ .bs-container { max-width: var(--bs-maxw); margin-inline: auto; padding-inline: var(--bs-gutter); } .bs-container--narrow { max-width: var(--bs-maxw-narrow); } .bs-container--text { max-width: var(--bs-maxw-text); } /* Vertical rhythm — keeps pages from looking empty: dense, default, airy */ .bs-section { padding-block: var(--bs-9); } .bs-section--tight { padding-block: var(--bs-7); } .bs-section--airy { padding-block: var(--bs-10); } .bs-section--flush-top { padding-top: 0; } .bs-grid { display: grid; gap: var(--bs-5); } .bs-grid--2 { grid-template-columns: repeat(2, 1fr); } .bs-grid--3 { grid-template-columns: repeat(3, 1fr); } .bs-grid--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .bs-grid--3, .bs-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .bs-grid--2, .bs-grid--3, .bs-grid--4 { grid-template-columns: minmax(0, 1fr); } } /* split layouts (main + sidebar) */ .bs-split { display: grid; grid-template-columns: 1.45fr .55fr; gap: var(--bs-7); align-items: start; } .bs-split--equal { grid-template-columns: 1fr 1fr; align-items: stretch; } .bs-split--sidebar-r { grid-template-columns: 1fr 360px; } @media (max-width: 900px) { .bs-split, .bs-split--equal, .bs-split--sidebar-r { grid-template-columns: minmax(0, 1fr); gap: var(--bs-6); } } /* mobile overflow guard: grid/flex children must be allowed to shrink below their content's min-content width (prevents horizontal page overflow on small screens) */ .bs-grid > *, .bs-split > *, .bs-account > *, .bs-tiles > *, .bs-cat-grid > *, .bs-steps > *, .bs-legal-layout > *, .bs-footer__cols > *, .pdp > *, .pdp-desc > * { min-width: 0; } .bs-scope h1, .bs-scope h2, .bs-scope h3, .bs-scope h4, .bs-scope p { overflow-wrap: break-word; hyphens: auto; } .bs-center { text-align: center; } /* accessible heading bridge — present in the a11y tree, no visual footprint */ .bs-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .bs-stack > * + * { margin-top: var(--bs-4); } /* simple vertical gap */ .bs-stack-lg > * + * { margin-top: var(--bs-6); } /* sticky sidebar (cart/quote summary) — clears the sticky header */ .bs-sticky { position: sticky; top: calc(var(--bs-header-h) + var(--bs-2)); } @media (max-width: 900px) { .bs-sticky { position: static; } } .bs-divider { height: 1px; background: var(--bs-line); border: 0; margin: var(--bs-6) 0; } .bs-mt-0 { margin-top: 0 !important; } .bs-mt-2 { margin-top: var(--bs-2) !important; } .bs-mt-4 { margin-top: var(--bs-4) !important; } .bs-mt-6 { margin-top: var(--bs-6) !important; } /* ===================================================================== 4. TYPE PRIMITIVES — eyebrow / lead / display ===================================================================== */ .bs-eyebrow { display: inline-block; margin: 0 0 var(--bs-3); font: 600 var(--bs-fs-eyebrow)/1 var(--bs-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bs-teal); } .bs-lead { font-size: var(--bs-fs-lead); color: var(--bs-ink-2); line-height: var(--bs-lh-body); max-width: 60ch; margin: var(--bs-3) 0 0; } .bs-display { font-size: var(--bs-fs-display); } .bs-muted { color: var(--bs-ink-2); } .bs-fineprint { font-size: var(--bs-fs-caption); color: var(--bs-graphite); line-height: 1.55; } /* ===================================================================== 5. BUTTONS ===================================================================== */ .bs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--bs-2); font: 700 15.5px/1 var(--bs-font); text-decoration: none; cursor: pointer; padding: 14px 24px; border: 1.5px solid transparent; border-radius: var(--bs-radius); transition: background .15s ease, border-color .15s ease, color .15s ease, transform .08s ease; white-space: nowrap; } .bs-btn:active { transform: translateY(1px); } .bs-scope .bs-btn--primary { background: var(--bs-teal); color: var(--bs-white); } .bs-btn--primary:hover { background: var(--bs-teal-hover); } .bs-scope .bs-btn--ghost { background: var(--bs-white); color: var(--bs-ink); border-color: var(--bs-line); } .bs-btn--ghost:hover { border-color: var(--bs-ink); } .bs-scope .bs-btn--ghost-teal { background: var(--bs-white); color: var(--bs-teal); border-color: var(--bs-teal); } .bs-btn--ghost-teal:hover { background: var(--bs-teal); color: var(--bs-white); } .bs-scope .bs-btn--on-dark { background: var(--bs-accent); color: var(--bs-ink); } .bs-btn--on-dark:hover { background: var(--bs-accent-hover); } /* confirmed "already in quote list" state — green, locked */ .bs-scope .bs-btn--inlist { background: var(--bs-success-tint); color: var(--bs-success); border-color: var(--bs-success-line); pointer-events: none; } .bs-btn--inlist svg { width: 17px; height: 17px; } .bs-btn--lg { font-size: 16px; padding: 16px 36px; } .bs-btn--sm { font-size: 14px; padding: 10px 18px; } .bs-btn--block { display: flex; width: 100%; } .bs-btn[disabled], .bs-btn.is-disabled { background: #9BB6BD; border-color: transparent; color: var(--bs-white); pointer-events: none; cursor: default; } .bs-btn--ghost[disabled], .bs-btn--ghost.is-disabled { background: var(--bs-paper); color: var(--bs-graphite); } /* ===================================================================== 6. HEADER / NAV / LOGO ===================================================================== */ .bs-header { background: var(--bs-white); border-bottom: 1px solid var(--bs-line-3); position: sticky; top: 0; z-index: 50; } .bs-header__inner { height: var(--bs-header-h); display: flex; align-items: center; gap: var(--bs-6); position: relative; } .bs-logo { display: inline-flex; align-items: center; text-decoration: none; } .bs-scope .bs-logo__img { height: 42px; width: auto; display: block; } .bs-scope .bs-logo__img--lg { height: 48px; } .bs-nav { display: flex; align-items: center; gap: 34px; margin-left: var(--bs-5); flex: 1; } .bs-nav__links { display: flex; gap: 34px; } .bs-nav__links a { text-decoration: none; font-size: 15.5px; font-weight: 500; color: var(--bs-ink); } .bs-nav__links a:hover { color: var(--bs-teal); } .bs-nav__spacer { margin-left: auto; } /* push the right cluster */ .bs-nav__actions { margin-left: auto; display: flex; align-items: center; gap: 20px; } .bs-nav__icons { display: flex; align-items: center; gap: 26px; } .bs-nav__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--bs-radius-sm); color: var(--bs-ink); text-decoration: none; } .bs-nav__icon:hover { color: var(--bs-teal); background: var(--bs-paper); } .bs-nav__icon svg { width: 21px; height: 21px; } .bs-nav__badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: var(--bs-accent); color: var(--bs-ink); font: 600 10px/1 var(--bs-font-mono); border-radius: var(--bs-radius-pill); } /* --- responsive burger (checkbox-hack, no JS) --- */ .bs-nav-toggle { display: none; } /* hidden checkbox (state holder) */ .bs-burger { display: none; /* hidden on desktop */ flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 9px; margin-left: auto; border-radius: var(--bs-radius-sm); cursor: pointer; background: transparent; border: 1px solid var(--bs-line); } .bs-burger:hover { background: var(--bs-paper); } .bs-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--bs-ink); transition: transform .2s ease, opacity .15s ease; } @media (max-width: 820px) { .bs-burger { display: flex; } /* show burger */ /* nav becomes a dropdown panel under the header */ .bs-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin-left: 0; padding: var(--bs-3) var(--bs-gutter) var(--bs-4); background: var(--bs-white); border-bottom: 1px solid var(--bs-line); box-shadow: var(--bs-shadow-md, var(--bs-shadow)); display: none; z-index: 60; } .bs-nav-toggle:checked ~ .bs-nav { display: flex; } /* links stacked full width with separators */ .bs-nav__links { flex-direction: column; gap: 0; } .bs-nav__links a { display: block; padding: 14px 2px; font-size: 16px; border-bottom: 1px solid var(--bs-line-2); } /* "Angebot anfordern" CTA full width */ .bs-nav > .bs-btn { display: flex; width: 100%; margin-top: var(--bs-3); } .bs-nav__actions { margin-left: 0; margin-top: var(--bs-3); justify-content: flex-start; } /* burger → cross when checked */ .bs-nav-toggle:checked ~ .bs-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .bs-nav-toggle:checked ~ .bs-burger span:nth-child(2) { opacity: 0; } .bs-nav-toggle:checked ~ .bs-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* ===================================================================== 7. BREADCRUMB ===================================================================== */ .bs-crumb { font: 600 var(--bs-fs-eyebrow)/1 var(--bs-font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--bs-graphite); margin: 0 0 18px; } .bs-crumb a { color: var(--bs-graphite); text-decoration: none; } .bs-crumb a:hover { color: var(--bs-teal); } .bs-crumb__sep { margin: 0 8px; } /* ===================================================================== 8. CARDS / PANELS ===================================================================== */ .bs-card { background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-lg); padding: var(--bs-6); box-shadow: var(--bs-shadow-xs); } .bs-card--pad-sm { padding: var(--bs-5); } .bs-card + .bs-card { margin-top: var(--bs-5); } .bs-grid > .bs-card + .bs-card, .bs-split > .bs-card + .bs-card { margin-top: 0; } .bs-card__title { font-size: var(--bs-fs-h3); font-weight: 700; margin: 0 0 var(--bs-3); } /* feature card (icon + title + text) */ .bs-feature { display: flex; flex-direction: column; gap: var(--bs-2); } .bs-feature__icon { width: 44px; height: 44px; border-radius: var(--bs-radius); display: grid; place-items: center; background: var(--bs-teal-tint); color: var(--bs-teal); margin-bottom: var(--bs-2); } .bs-feature__icon svg { width: 22px; height: 22px; } .bs-feature h3 { font-size: 16px; margin: 0; } .bs-feature p { font-size: var(--bs-fs-sm); margin: 0; color: var(--bs-ink-2); } /* success confirmation icon pastille (e.g. "Nachricht gesendet") */ .bs-conf-icon { width: 64px; height: 64px; border-radius: var(--bs-radius-pill); background: var(--bs-success-tint); border: 1.5px solid var(--bs-success-line); display: grid; place-items: center; margin: 0 0 var(--bs-4); } .bs-conf-icon svg { width: 32px; height: 32px; color: var(--bs-success); } /* tile (linked feature card, e.g. account dashboard) */ .bs-tile { display: flex; flex-direction: column; gap: var(--bs-1); padding: 22px; background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius); text-decoration: none; color: var(--bs-ink); transition: border-color .12s, transform .12s; } .bs-tile:hover { border-color: var(--bs-teal); transform: translateY(-2px); } .bs-tile__icon { width: 40px; height: 40px; border-radius: var(--bs-radius); background: var(--bs-teal-tint-2); color: var(--bs-teal); display: grid; place-items: center; margin-bottom: var(--bs-1); } .bs-tile__icon svg { width: 21px; height: 21px; } .bs-tile b { font-size: 16px; font-weight: 700; } .bs-tile span { font-size: 14px; color: var(--bs-ink-2); line-height: 1.5; } /* "B2B insert" / soft promo box to fill space intelligently */ .bs-insert { background: var(--bs-teal-tint); border: 1px solid var(--bs-info-line); border-radius: var(--bs-radius-lg); padding: var(--bs-6); display: flex; gap: var(--bs-5); align-items: center; flex-wrap: wrap; } .bs-insert__body { flex: 1; min-width: 220px; } .bs-insert h3 { margin: 0 0 var(--bs-2); } .bs-insert p { margin: 0; } /* ===================================================================== 9. BADGES / PILLS / CHIPS ===================================================================== */ .bs-badge { display: inline-flex; align-items: center; gap: var(--bs-2); font: 600 12.5px/1 var(--bs-font-mono); letter-spacing: .03em; padding: 7px 12px; border-radius: var(--bs-radius-pill); background: var(--bs-teal-tint); color: var(--bs-teal); border: 1px solid #C5DEE2; } .bs-badge--accent { background: var(--bs-accent-tint); color: #4A3F17; border-color: #EAD9A0; } .bs-badge--success { background: var(--bs-success-tint); color: var(--bs-success); border-color: var(--bs-success-line); } .bs-badge--soon { background: var(--bs-paper); color: var(--bs-graphite); border-color: var(--bs-line); } .bs-badge .bs-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* compat chip (yellow, JULIA · NONA · DIVA) */ .bs-compat { display: inline-block; font: 600 12px/1 var(--bs-font-mono); letter-spacing: .02em; color: #4A3F17; background: var(--bs-accent-tint); border-radius: var(--bs-radius-pill); padding: 7px 16px; } .bs-compat--teal { color: var(--bs-teal); background: var(--bs-teal-tint); } /* pill on dark band (outline) */ .bs-pill { display: inline-flex; align-items: center; gap: var(--bs-2); font: 500 13px/1 var(--bs-font-mono); color: var(--bs-white); border: 1px solid rgba(255,255,255,.4); border-radius: var(--bs-radius-pill); padding: 8px 18px; } .bs-pill--solid { color: var(--bs-teal); background: var(--bs-white); border-color: var(--bs-white); } /* status badge (wait / ok / etc.) */ .bs-status { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1 var(--bs-font-mono); letter-spacing: .03em; padding: 7px 12px; border-radius: var(--bs-radius-pill); background: var(--bs-warn-tint); color: var(--bs-warn); border: 1px solid #F2DFA0; } .bs-status .bs-dot { width: 7px; height: 7px; border-radius: 50%; background: #E0A800; } .bs-status--ok { background: var(--bs-success-tint); color: var(--bs-success); border-color: var(--bs-success-line); } .bs-status--ok .bs-dot { background: var(--bs-success); } .bs-status--info { background: var(--bs-teal-tint); color: var(--bs-teal); border-color: var(--bs-info-line); } .bs-status--info .bs-dot { background: var(--bs-teal); } .bs-status--err { background: var(--bs-error-tint); color: var(--bs-error); border-color: var(--bs-error-line); } .bs-status--err .bs-dot { background: var(--bs-error); } /* ===================================================================== 10. PRODUCT CARD + CATEGORY GRID ===================================================================== */ .bs-cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--bs-5); flex-wrap: wrap; } .bs-cat-count { font: 500 var(--bs-fs-eyebrow)/1 var(--bs-font-mono); color: var(--bs-graphite); } .bs-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bs-5); } @media (max-width: 900px) { .bs-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .bs-cat-grid { grid-template-columns: minmax(0, 1fr); } } .bs-pcard { display: flex; flex-direction: column; background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-lg); overflow: hidden; box-shadow: var(--bs-shadow-xs); transition: transform .12s ease, box-shadow .12s ease; } .bs-pcard:hover { transform: translateY(-3px); box-shadow: var(--bs-shadow); } .bs-pcard__media { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--bs-teal-tint); } .bs-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .bs-pcard__tag { position: absolute; top: var(--bs-3); left: var(--bs-3); } .bs-pcard__body { display: flex; flex-direction: column; gap: var(--bs-2); padding: var(--bs-5); flex: 1; } .bs-pcard__title { font-size: 16px; font-weight: 700; margin: 0; line-height: var(--bs-lh-snug); } .bs-pcard__title a { text-decoration: none; } .bs-pcard__compat { font: 500 var(--bs-fs-caption)/1.4 var(--bs-font); color: var(--bs-graphite); margin: 0; } .bs-pcard__price { margin-top: auto; padding-top: var(--bs-3); } .bs-pcard__price b { font-family: var(--bs-font-mono); font-size: var(--bs-fs-h3); font-weight: 600; } .bs-pcard__price small { color: var(--bs-graphite); } .bs-pcard__foot { padding: 0 var(--bs-5) var(--bs-5); } .bs-pcard__foot .bs-btn { width: 100%; } /* "coming soon" variant — fills the grid intelligently */ .bs-pcard--soon { opacity: .8; } .bs-pcard--soon .bs-pcard__media { display: grid; place-items: center; font-size: 2.4rem; color: var(--bs-graphite); } .bs-pcard--soon .bs-pcard__foot .bs-btn { pointer-events: none; } /* category facts + filter bar */ .bs-cat-facts { display: flex; flex-wrap: wrap; gap: var(--bs-2); margin-top: var(--bs-4); } .bs-filterbar { display: flex; flex-wrap: wrap; gap: var(--bs-2); margin: var(--bs-5) 0 0; } .bs-filter { font: 500 var(--bs-fs-caption)/1 var(--bs-font-mono); padding: 9px 15px; border-radius: var(--bs-radius-pill); border: 1px solid var(--bs-line); background: var(--bs-white); color: var(--bs-ink-2); text-decoration: none; } .bs-filter:hover { border-color: var(--bs-ink); } .bs-filter--active, .bs-scope a.bs-filter--active { background: var(--bs-teal); color: var(--bs-white); border-color: var(--bs-teal); } .bs-filter--soon { color: var(--bs-graphite); cursor: default; } /* ===================================================================== 11. PRODUCT PAGE — gallery / lightbox / Auf-einen-Blick / specs / SKU ===================================================================== */ /* PDP layout glue (image column + detail column, title, chips, description) */ .pdp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bs-7); align-items: start; } @media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: var(--bs-6); } } .pdp__title { font-size: 31px; font-weight: 700; letter-spacing: -.01em; margin: 16px 0 0; } .pdp__chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pdp__strike { color: var(--bs-graphite); text-decoration: line-through; text-decoration-thickness: 1.5px; } .pdp-desc { margin-top: var(--bs-7); padding-top: var(--bs-7); border-top: 1px solid var(--bs-line); display: grid; grid-template-columns: .9fr 1.4fr; gap: var(--bs-7); } @media (max-width: 900px) { .pdp-desc { grid-template-columns: 1fr; gap: var(--bs-5); } } /* "Benachrichtigen" inline form (out-of-stock product) */ .bs-notify-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--bs-2); } .bs-notify-form .bs-input { flex: 1 1 200px; min-width: 0; } .bs-notify-form .bs-btn { flex: none; } .bs-gallery { position: relative; display: block; } .bs-gallery__main { position: relative; aspect-ratio: 1 / 1; border-radius: var(--bs-radius); overflow: hidden; border: 1px solid var(--bs-line); background: var(--bs-white); } .bs-gallery__main img { width: 100%; height: 100%; object-fit: cover; display: block; } .bs-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: var(--bs-shadow-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; } .bs-gallery__nav--prev { left: 14px; } .bs-gallery__nav--next { right: 14px; } .bs-gallery__zoom { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: var(--bs-radius-sm); background: rgba(255,255,255,.92); box-shadow: var(--bs-shadow-sm); cursor: zoom-in; display: flex; align-items: center; justify-content: center; } .bs-gallery__zoom:hover { background: #fff; } .bs-gallery__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bs-3); margin-top: var(--bs-3); } .bs-gallery__thumb { aspect-ratio: 1 / 1; border: 0; padding: 0; cursor: pointer; overflow: hidden; border-radius: var(--bs-radius-sm); outline: 1px solid var(--bs-line); outline-offset: -1px; } .bs-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bs-gallery__thumb.is-active { outline: 2px solid var(--bs-accent); outline-offset: -2px; } /* fullscreen lightbox */ .bs-lightbox { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(10,18,22,.92); align-items: center; justify-content: center; padding: 32px; } .bs-lightbox.is-open { display: flex; } .bs-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--bs-radius); } .bs-lightbox__close, .bs-lightbox__nav { position: absolute; background: rgba(255,255,255,.12); border: 0; color: #fff; cursor: pointer; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .bs-lightbox__close { top: 24px; right: 24px; } .bs-lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); } .bs-lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); } .bs-lightbox__counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #cfe0e4; font: 500 13px/1 var(--bs-font-mono); } /* lightbox stage + thumbnail strip */ .bs-lightbox__stage { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 1100px; width: 100%; } .bs-lightbox__thumbs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .bs-lightbox__thumb { width: 60px; height: 60px; border-radius: 6px; border: 0; padding: 0; overflow: hidden; cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; opacity: .55; transition: opacity .12s; } .bs-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .bs-lightbox__thumb.is-active { opacity: 1; outline-color: var(--bs-accent); } /* "Auf einen Blick" key-facts card */ .bs-facts { background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-lg); padding: var(--bs-5); box-shadow: var(--bs-shadow-xs); } .bs-facts__title { font-size: 17px; font-weight: 700; margin: 0 0 var(--bs-3); } .bs-facts__row { display: flex; align-items: center; gap: 13px; padding: 11px 0; border-bottom: 1px dashed var(--bs-line-3); font-size: var(--bs-fs-sm); color: #3A3F43; } .bs-facts__row:last-of-type { border-bottom: 0; } .bs-facts__row::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--bs-teal); } /* spec list (bordered key/value) */ .bs-specs { list-style: none; margin: 0; padding: 0; } .bs-specs li { display: flex; gap: var(--bs-4); align-items: baseline; padding: 12px 0; border-bottom: 1px dashed var(--bs-line-3); } .bs-specs li:last-child { border-bottom: 0; } .bs-specs dt, .bs-specs__k { flex: 0 0 9em; font: 600 var(--bs-fs-eyebrow)/1.4 var(--bs-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--bs-graphite); margin: 0; } .bs-specs dd, .bs-specs__v { margin: 0; color: var(--bs-ink); font-size: var(--bs-fs-sm); } /* summary lines (cart / quote sidebar: Zwischensumme · Versand · Gesamt) */ .bs-sumline { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bs-4); padding: 11px 0; font-size: var(--bs-fs-sm); border-bottom: 1px solid var(--bs-line-2); } .bs-sumline > span:last-child { font-family: var(--bs-font-mono); font-variant-numeric: tabular-nums; color: var(--bs-ink); } .bs-sumline__muted { color: var(--bs-graphite); font-family: var(--bs-font-mono); font-size: var(--bs-fs-caption); } .bs-sumtotal { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bs-4); padding: 16px 0 4px; font-weight: 700; } .bs-sumtotal > span:first-child { font-size: var(--bs-fs-body); } .bs-sumtotal__amount { font-family: var(--bs-font-mono); font-variant-numeric: tabular-nums; font-size: var(--bs-fs-h3); } /* product price display */ .bs-price { display: flex; align-items: baseline; gap: var(--bs-3); flex-wrap: wrap; } .bs-price__amount { font-family: var(--bs-font-mono); font-size: 31px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; } .bs-price__note { font-size: var(--bs-fs-caption); color: var(--bs-graphite); } /* SKU / meta rows */ .bs-meta { display: grid; gap: var(--bs-4); } .bs-meta__row { display: flex; gap: var(--bs-4); align-items: baseline; } .bs-meta__k { width: 108px; flex: none; font: 500 var(--bs-fs-eyebrow)/1.4 var(--bs-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-graphite); } .bs-meta__v { font-size: var(--bs-fs-sm); color: var(--bs-ink); line-height: 1.55; flex: 1; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .bs-meta__v a { color: var(--bs-teal); text-decoration: none; } .bs-meta__v a:hover { text-decoration: underline; } /* ===================================================================== 12. STAFFELPREISE / DATA TABLES (mono tabular numerals = "B2B technical") ===================================================================== */ .bs-table-wrap { border: 1px solid var(--bs-line); border-radius: var(--bs-radius); overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Aligné sur .bs-dtable (tableaux du compte) : en-têtes mono majuscules, bordures propres, sans zébrures. */ .bs-pricetable { width: 100%; border-collapse: collapse; font-size: 15px; } .bs-pricetable th, .bs-pricetable td { padding: 14px 16px; text-align: left; vertical-align: middle; border: 0; border-bottom: 1px solid var(--bs-line); background: transparent; } .bs-pricetable thead th { font: 600 11.5px/1.2 var(--bs-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-graphite); } .bs-pricetable tr, .bs-pricetable thead th, .bs-pricetable tbody td { background: transparent !important; } .bs-pricetable tbody td { color: var(--bs-ink); } .bs-pricetable tbody tr:last-child td { border-bottom: 0; } .bs-pricetable .bs-num, .bs-pricetable th.bs-num { font-family: var(--bs-font-mono); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .bs-pricetable .bs-save { color: var(--bs-success); font-weight: 600; white-space: nowrap; font-family: var(--bs-font-mono); } /* generic data table (orders / detail) */ .bs-dtable { width: 100%; border-collapse: collapse; font-size: 15px; } .bs-dtable th, .bs-dtable td { padding: 14px 4px; text-align: left; border-bottom: 1px solid var(--bs-line); vertical-align: top; } .bs-dtable thead th { font: 600 11.5px/1.2 var(--bs-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-graphite); } .bs-dtable .bs-num, .bs-dtable th.bs-num { font-family: var(--bs-font-mono); text-align: right; white-space: nowrap; } .bs-dtable tbody tr:last-child td { border-bottom: 0; } .bs-dtable tfoot td { border-bottom: 0; border-top: 1px solid var(--bs-line); font-weight: 600; } .bs-dtable tfoot tr:last-child td { font-size: 17px; font-weight: 700; border-top: 2px solid var(--bs-ink); } .bs-dtable a { color: var(--bs-teal); text-decoration: none; font-weight: 600; } /* sub-lines inside data-table cells (Artikelname + Beschreibung + Stückpreis-Notiz) */ .bs-dtable__name { font-weight: 700; color: var(--bs-ink); } .bs-dtable__sub { display: block; margin-top: 3px; font-size: 13.5px; color: var(--bs-ink-2); line-height: 1.5; } .bs-dtable__sub--mono { font-family: var(--bs-font-mono); font-size: 13px; color: var(--bs-graphite); } .bs-dtable__pernote { display: block; margin-top: 2px; font: 400 12px/1 var(--bs-font-mono); color: var(--bs-graphite); } /* mobile: let the generic data table scroll horizontally instead of breaking the page */ @media (max-width: 640px) { .bs-dtable { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; } .bs-dtable thead, .bs-dtable tbody, .bs-dtable tfoot, .bs-dtable tr { width: 100%; } } /* ===================================================================== 13. SHIP NOTE + NOTICES / ALERTS (success / error / info / warn) ===================================================================== */ .bs-ship-note { margin: var(--bs-5) 0 0; padding: 15px 18px; border-radius: var(--bs-radius); font-size: var(--bs-fs-sm); line-height: 1.5; border: 1px solid transparent; } .bs-ship-note a { font-weight: 600; text-decoration: underline; white-space: nowrap; } .bs-ship-note--warn { background: var(--bs-warn-tint); border-color: var(--bs-warn-line); color: #6A5318; } .bs-ship-note--warn a { color: var(--bs-warn); } .bs-ship-note--ok { background: var(--bs-success-tint); border-color: var(--bs-success-line); color: #2F6A45; } .bs-ship-note--ok a { color: var(--bs-success); } .bs-notice { margin: 0 0 var(--bs-5); padding: 14px 16px; border-radius: var(--bs-radius); font-size: var(--bs-fs-sm); line-height: 1.55; border: 1px solid transparent; } .bs-notice strong { color: inherit; } .bs-notice a { font-weight: 600; text-decoration: underline; } .bs-notice--success { background: var(--bs-success-tint); border-color: var(--bs-success-line); color: var(--bs-success); } .bs-notice--error { background: var(--bs-error-tint); border-color: var(--bs-error-line); border-left: 3px solid var(--bs-error); color: #922B21; } .bs-notice--error strong { color: #7B241C; } .bs-notice--info { background: var(--bs-teal-tint); border-color: var(--bs-info-line); color: var(--bs-teal); } .bs-notice--warn { background: var(--bs-warn-tint); border-color: var(--bs-warn-line); color: #6A5318; } /* "already in quote list" inline confirmation (YITH) */ .bs-inlist-note { margin: var(--bs-3) 0 0; padding: 15px 18px; border-radius: var(--bs-radius); font: 700 15.5px/1.4 var(--bs-font); text-align: center; background: var(--bs-success-tint); border: 1px solid var(--bs-success-line); color: var(--bs-success); } .bs-inlist-note a { color: var(--bs-success); text-decoration: underline; text-underline-offset: 3px; } /* ===================================================================== 14. FORMS — labels / inputs / textarea / focus / errors / help / checkbox ===================================================================== */ .bs-field { margin-bottom: 20px; } .bs-field--row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .bs-field--row2 { grid-template-columns: 1fr; } } .bs-label { display: block; font-size: 13px; font-weight: 600; color: var(--bs-ink); margin: 0 0 7px; } .bs-label .bs-req { color: var(--bs-error); } .bs-scope .bs-input, .bs-scope .bs-textarea, .bs-scope .bs-select { width: 100%; border: 1.5px solid var(--bs-line); border-radius: var(--bs-radius); padding: 13px 15px; font: 400 15.5px/1.3 var(--bs-font); color: var(--bs-ink); background: var(--bs-white); transition: border-color .12s; box-shadow: none; } .bs-scope .bs-textarea { line-height: 1.5; resize: vertical; } .bs-scope .bs-input:focus, .bs-scope .bs-textarea:focus, .bs-scope .bs-select:focus { outline: none; border-color: var(--bs-teal); } .bs-scope .bs-input.is-invalid, .bs-scope .bs-textarea.is-invalid { border-color: var(--bs-error); background: #FDF3F2; } .bs-scope .bs-input[disabled], .bs-scope .bs-textarea[disabled] { background: var(--bs-paper); color: var(--bs-graphite); cursor: not-allowed; } .bs-fielderr { display: flex; gap: 6px; align-items: flex-start; margin-top: 7px; font-size: var(--bs-fs-caption); color: var(--bs-error); font-weight: 600; line-height: 1.4; } .bs-fielderr svg { width: 15px; height: 15px; flex: none; margin-top: 1px; } .bs-hint { margin-top: 7px; font-size: var(--bs-fs-caption); color: var(--bs-graphite); line-height: 1.45; } .bs-check { display: flex; align-items: center; gap: 9px; font-size: var(--bs-fs-sm); color: var(--bs-ink-2); font-weight: 500; cursor: pointer; } .bs-check input { width: 17px; height: 17px; accent-color: var(--bs-teal); margin: 0; } .bs-forgot { display: block; text-align: center; margin: 16px 0 0; font-size: 14px; font-weight: 600; color: var(--bs-teal); text-decoration: none; } .bs-forgot:hover { text-decoration: underline; } /* quantity stepper */ .bs-qty { display: inline-flex; align-items: stretch; border: 1.5px solid #D7DCDE; border-radius: var(--bs-radius-sm); overflow: hidden; background: var(--bs-white); } .bs-qty button { width: 34px; border: 0; background: var(--bs-white); color: var(--bs-ink); font-size: 18px; line-height: 1; cursor: pointer; transition: background .12s; } .bs-qty button:hover { background: var(--bs-paper); } .bs-qty button:disabled { color: #C2C7CC; pointer-events: none; } .bs-qty input { width: 46px; border: 0; border-left: 1px solid var(--bs-line-2); border-right: 1px solid var(--bs-line-2); text-align: center; font: 600 15px/1 var(--bs-font-mono); color: var(--bs-ink); -moz-appearance: textfield; } .bs-qty input::-webkit-outer-spin-button, .bs-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* ===================================================================== 15. SPINNERS / SENDING / SKELETON (loading states) ===================================================================== */ .bs-spinner { display: inline-block; width: 1.05em; height: 1.05em; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: bs-spin .7s linear infinite; vertical-align: -.18em; margin-right: 8px; } .bs-spinner--teal { width: 15px; height: 15px; border-color: #CFE0E4; border-top-color: var(--bs-teal); vertical-align: -2px; } @keyframes bs-spin { to { transform: rotate(360deg); } } .bs-sending-note { display: flex; align-items: center; font: 600 13px/1 var(--bs-font); color: var(--bs-teal); background: var(--bs-teal-tint); border: 1px solid var(--bs-info-line); border-radius: var(--bs-radius-sm); padding: 11px 14px; margin: 0 0 18px; } .bs-skel { display: inline-block; border-radius: 5px; color: transparent !important; background: linear-gradient(100deg, var(--bs-line-2) 30%, var(--bs-line) 50%, var(--bs-line-2) 70%); background-size: 200% 100%; animation: bs-shimmer 1.1s ease-in-out infinite; } .bs-skel--amount { width: 84px; height: 18px; vertical-align: middle; } .bs-skel--amount-lg { width: 108px; height: 24px; vertical-align: middle; } @keyframes bs-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .bs-skel, .bs-spinner, .bs-spinner--teal { animation: none; } } /* ===================================================================== 16. EMPTY STATES (cart empty / 0 orders / 0 results / quote start) ===================================================================== */ .bs-empty { background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-lg); padding: 56px 32px; text-align: center; max-width: 620px; margin: 8px auto 0; } .bs-empty__icon { width: 72px; height: 72px; border-radius: 18px; background: var(--bs-teal-tint); color: var(--bs-teal); display: grid; place-items: center; margin: 0 auto 22px; } .bs-empty__icon svg { width: 36px; height: 36px; } .bs-empty h2 { font-size: 23px; font-weight: 700; margin: 0; letter-spacing: -.01em; } .bs-empty p { font-size: 15.5px; color: var(--bs-ink-2); line-height: var(--bs-lh-body); margin: 12px auto 0; max-width: 44ch; } .bs-empty__actions { display: flex; gap: var(--bs-3); justify-content: center; flex-wrap: wrap; margin-top: 26px; } /* compact empty state (inside account panels) */ .bs-empty--inset { border: 0; padding: 54px 28px; box-shadow: none; max-width: none; margin: 0; } /* suggestion card to fill empty states intelligently */ .bs-suggest { margin: 34px auto 0; max-width: 620px; } .bs-suggest__label { font: 600 12px/1 var(--bs-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bs-graphite); text-align: center; margin: 0 0 14px; } .bs-suggest__card { display: flex; gap: 18px; align-items: center; background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius); padding: 16px; text-align: left; } .bs-suggest__card img { width: 110px; height: 82px; flex: none; object-fit: cover; border-radius: var(--bs-radius-sm); background: var(--bs-paper); } .bs-suggest__body { flex: 1; min-width: 0; } .bs-suggest__body h3 { font-size: 16px; font-weight: 700; margin: 0; } .bs-suggest__body p { font-size: 13px; color: var(--bs-graphite); margin: 5px 0 0; line-height: 1.5; } .bs-suggest__price { font: 600 16px/1 var(--bs-font-mono); color: var(--bs-ink); margin-top: 8px; display: block; } .bs-suggest__link { flex: none; align-self: center; font: 700 14px/1 var(--bs-font); color: var(--bs-teal); text-decoration: none; white-space: nowrap; } .bs-suggest__link:hover { text-decoration: underline; } @media (max-width: 560px) { .bs-suggest__card { flex-direction: column; align-items: stretch; text-align: center; } .bs-suggest__card img { width: 100%; height: 140px; } } /* ===================================================================== 17. STEPS (1-2-3 process) ===================================================================== */ .bs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--bs-7); } @media (max-width: 900px) { .bs-steps { grid-template-columns: minmax(0, 1fr); gap: var(--bs-6); } } .bs-step__n { display: block; font: 600 38px/1 var(--bs-font-mono); color: var(--bs-accent); } .bs-step h3 { font-size: var(--bs-fs-h3); font-weight: 700; margin: 18px 0 0; } .bs-step p { font-size: 15px; color: var(--bs-ink-2); line-height: var(--bs-lh-body); margin: 10px 0 0; } /* compact stacked variant (sidebar) */ .bs-step--stack { display: flex; gap: var(--bs-4); align-items: flex-start; padding: 10px 0; } .bs-step--stack .bs-step__n { font-size: var(--bs-fs-h3); flex: 0 0 1.6em; } .bs-step--stack p { margin: 0; } /* numbered next-steps (counter) */ .bs-nextsteps { list-style: none; margin: var(--bs-5) 0 0; padding: 0; display: grid; gap: var(--bs-4); counter-reset: bs-ns; } .bs-nextsteps li { display: flex; gap: var(--bs-4); align-items: flex-start; } .bs-nextsteps li::before { counter-increment: bs-ns; content: counter(bs-ns, decimal-leading-zero); font: 700 18px/1 var(--bs-font-mono); color: var(--bs-accent-hover); flex: 0 0 1.8em; } .bs-nextsteps b { display: block; color: var(--bs-ink); margin-bottom: 2px; } .bs-nextsteps span { color: var(--bs-ink-2); font-size: var(--bs-fs-caption); } /* checklist (register benefits etc.) */ .bs-checklist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; } .bs-checklist li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--bs-ink-2); line-height: 1.55; } .bs-checklist svg { width: 19px; height: 19px; flex: none; color: var(--bs-success); margin-top: 1px; } /* ===================================================================== 18. DARK BANDS (hero alt / CTA band / footer) — teal ===================================================================== */ .bs-dark { background: var(--bs-teal); color: #BCD6DC; } .bs-dark h1, .bs-dark h2, .bs-dark h3 { color: var(--bs-white); } .bs-dark p { color: #BCD6DC; } .bs-dark .bs-eyebrow { color: var(--bs-accent); } .bs-dark a { color: var(--bs-white); } .bs-band { text-align: center; } .bs-band__pills { display: flex; gap: var(--bs-3); justify-content: center; margin-top: 28px; flex-wrap: wrap; } /* ===================================================================== 19. ACCOUNT LAYOUT (sidebar nav + content panels) ===================================================================== */ .bs-account { display: grid; grid-template-columns: 200px 1fr; gap: var(--bs-6); align-items: start; margin-top: 40px; } @media (max-width: 820px) { .bs-account { grid-template-columns: minmax(0, 1fr); gap: var(--bs-5); } .bs-accnav { position: static; top: auto; } } .bs-accnav { background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-lg); overflow: hidden; position: sticky; top: 90px; } .bs-accnav a { display: flex; align-items: center; gap: 11px; padding: 14px 18px; text-decoration: none; color: var(--bs-ink); font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--bs-line); transition: background .12s; } .bs-accnav a:last-child { border-bottom: 0; } .bs-accnav a svg { width: 18px; height: 18px; flex: none; color: #9AA0A4; } .bs-accnav a:hover { background: #F6F8F9; } .bs-accnav a.is-active { background: var(--bs-teal); color: var(--bs-white); } .bs-accnav a.is-active svg { color: var(--bs-white); } .bs-accnav a.bs-accnav__logout { color: var(--bs-warn); } .bs-accnav a.bs-accnav__logout svg { color: #CAA53A; } .bs-accnav a.bs-accnav__logout:hover { background: var(--bs-ink); color: var(--bs-white); } .bs-accnav a.bs-accnav__logout:hover svg { color: var(--bs-white); } /* Neutralise les largeurs/floats natifs WooCommerce dans le layout compte v2 (sinon nav 30% / contenu 70% rétrécis) */ .bs-scope .bs-account .woocommerce-MyAccount-navigation, .bs-scope .bs-account .bs-accnav { width: auto; float: none; margin: 0; } .bs-scope .bs-account .woocommerce-MyAccount-content { width: auto; float: none; margin: 0; } /* tiles grid (dashboard) */ .bs-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: var(--bs-5); } @media (max-width: 680px) { .bs-tiles { grid-template-columns: minmax(0, 1fr); } } /* meta row (order detail header) */ .bs-metarow { display: flex; flex-wrap: wrap; gap: 28px; margin: 0 0 var(--bs-5); } .bs-metarow .bs-metarow__k { font: 600 11.5px/1.4 var(--bs-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--bs-graphite); margin: 0 0 4px; } .bs-metarow .bs-metarow__v { font-size: 15.5px; font-weight: 600; } .bs-back { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--bs-teal); text-decoration: none; margin-bottom: 18px; } .bs-back:hover { text-decoration: underline; } .bs-address { font-size: 15px; line-height: 1.7; color: var(--bs-ink-2); font-style: normal; margin: 0; } .bs-address strong { color: var(--bs-ink); } /* ===================================================================== 20. FOOTER + Markenhinweis ===================================================================== */ .bs-footer { background: var(--bs-teal-dark); color: #CFE0E4; } .bs-footer .bs-container { padding-top: 54px; padding-bottom: 30px; } .bs-footer__cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } @media (max-width: 760px) { .bs-footer__cols { grid-template-columns: 1fr; gap: 28px; } } .bs-footer h3, .bs-footer__h { font-size: 14px; font-weight: 700; color: var(--bs-white); margin: 0 0 16px; } .bs-footer a { color: #9CC0C8; text-decoration: none; font-size: 14.5px; } .bs-footer a:hover { color: var(--bs-white); } .bs-footer__link { display: block; margin-bottom: 11px; } .bs-footer__tagline { font-size: 14.5px; color: var(--bs-white); margin: 20px 0 0; max-width: 30ch; line-height: 1.55; } /* Force le blanc : le thème hello-biz applique une couleur grise générique aux

du footer. */ .bs-scope .bs-footer p.bs-footer__tagline, .bs-footer p.bs-footer__tagline { color: var(--bs-white) !important; } .bs-footer__legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 0; } .bs-footer__legal-inner { font-size: 12.5px; color: #7BA4AD; padding: 22px 0; line-height: 1.6; } .bs-footer__markenhinweis { display: inline-block; margin-top: .5em; opacity: .85; max-width: 90ch; } /* ===================================================================== 21. LEGAL / LONG-FORM (Impressum / Datenschutz / AGB) ===================================================================== */ .bs-legal { max-width: var(--bs-maxw-text); } .bs-legal h2 { font-size: var(--bs-fs-h2); margin: var(--bs-7) 0 var(--bs-3); padding-top: var(--bs-5); border-top: 1px solid var(--bs-line); } .bs-legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: var(--bs-5); } .bs-legal h3 { font-size: var(--bs-fs-h3); margin: var(--bs-5) 0 var(--bs-2); } .bs-legal p, .bs-legal li { color: var(--bs-ink-2); } .bs-legal ul { padding-left: 1.2em; } .bs-legal ul li { margin-bottom: var(--bs-2); } .bs-legal a { color: var(--bs-teal); } .bs-legal address { font-style: normal; line-height: var(--bs-lh-body); } .bs-legal__toc { background: var(--bs-surface); border: 1px solid var(--bs-line); border-radius: var(--bs-radius); padding: var(--bs-4) var(--bs-5); margin: var(--bs-5) 0; } .bs-legal__toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: var(--bs-6); } .bs-legal__toc a { text-decoration: none; } .bs-legal__toc a:hover { text-decoration: underline; } @media (max-width: 600px) { .bs-legal__toc ol { columns: 1; } } /* sidebar-TOC layout for long legal text (AGB / Datenschutz) */ .bs-legal-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--bs-7); align-items: start; } .bs-legal-layout .bs-legal { max-width: var(--bs-maxw-text); } .bs-legal-aside { position: sticky; top: calc(var(--bs-header-h) + var(--bs-4)); } .bs-legal-aside .bs-legal__toc { margin: 0; } .bs-legal-aside .bs-legal__toc ol { columns: 1; padding-left: 1.3em; display: grid; gap: 9px; } .bs-legal-aside .bs-legal__toc a { color: var(--bs-ink-2); font-size: 14px; } .bs-legal-aside .bs-legal__toc a:hover { color: var(--bs-teal); } @media (max-width: 900px) { .bs-legal-layout { grid-template-columns: 1fr; gap: var(--bs-5); } .bs-legal-aside { position: static; } .bs-legal-aside .bs-legal__toc ol { columns: 2; } } @media (max-width: 600px) { .bs-legal-aside .bs-legal__toc ol { columns: 1; } } /* ============================================================ WooCommerce — skin natif v2 (order-pay, checkout, tables, boutons) Scopé :not(.bs-dtable)/:not(.bs-btn) → ne touche PAS nos composants v2. ============================================================ */ .bs-scope .woocommerce .button:not(.bs-btn), .bs-scope .woocommerce button.button:not(.bs-btn), .bs-scope .woocommerce input.button:not(.bs-btn), .bs-scope .woocommerce a.button:not(.bs-btn), .bs-scope .woocommerce #place_order { background: var(--bs-teal); color: var(--bs-white); border: 0; border-radius: var(--bs-radius); font: 600 15px/1 var(--bs-font); padding: 14px 26px; cursor: pointer; box-shadow: none; text-shadow: none; transition: background .15s; } .bs-scope .woocommerce .button:not(.bs-btn):hover, .bs-scope .woocommerce button.button:not(.bs-btn):hover, .bs-scope .woocommerce #place_order:hover { background: var(--bs-teal-hover); color: var(--bs-white); } .bs-scope .woocommerce table.shop_table:not(.bs-dtable) { border: 1px solid var(--bs-line); border-radius: var(--bs-radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--bs-surface); margin-bottom: 28px; } .bs-scope .woocommerce table.shop_table:not(.bs-dtable) th { background: var(--bs-paper); border: 0; border-bottom: 1px solid var(--bs-line); padding: 13px 16px; text-align: left; font: 600 11.5px/1.2 var(--bs-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bs-graphite); } .bs-scope .woocommerce table.shop_table:not(.bs-dtable) td { border: 0; border-bottom: 1px solid var(--bs-line-2); padding: 13px 16px; vertical-align: top; } .bs-scope .woocommerce table.shop_table:not(.bs-dtable) tbody tr:last-child td { border-bottom: 1px solid var(--bs-line); } .bs-scope .woocommerce table.shop_table:not(.bs-dtable) tfoot th, .bs-scope .woocommerce table.shop_table:not(.bs-dtable) tfoot td { border-bottom: 1px solid var(--bs-line-2); font-weight: 600; background: transparent; } .bs-scope .woocommerce table.shop_table:not(.bs-dtable) tfoot tr:last-child th, .bs-scope .woocommerce table.shop_table:not(.bs-dtable) tfoot tr:last-child td { border-bottom: 0; font-size: 16px; } .bs-scope .woocommerce table.shop_table:not(.bs-dtable) .amount { font-family: var(--bs-font-mono); } .bs-scope .woocommerce table.shop_table:not(.bs-dtable) a { color: var(--bs-teal); text-decoration: none; font-weight: 600; } .bs-scope .woocommerce-checkout-payment, .bs-scope #payment { background: var(--bs-paper); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-lg); padding: 0; } .bs-scope #payment ul.payment_methods { border-bottom: 1px solid var(--bs-line); padding: 14px 20px; margin: 0; } .bs-scope #payment ul.payment_methods li { list-style: none; } .bs-scope #payment div.payment_box { background: var(--bs-surface); border-radius: var(--bs-radius); color: var(--bs-ink-2); } .bs-scope #payment div.payment_box::before { border-bottom-color: var(--bs-surface) !important; } .bs-scope #payment .form-row.place-order { padding: 18px 20px; border-top: 0; margin: 0; } .bs-scope .woocommerce form .form-row input.input-text, .bs-scope .woocommerce form .form-row textarea, .bs-scope .woocommerce form .form-row select, .bs-scope .woocommerce-account form input[type="text"], .bs-scope .woocommerce-account form input[type="email"], .bs-scope .woocommerce-account form input[type="password"], .bs-scope .woocommerce-account form input[type="tel"] { border: 1px solid var(--bs-line); border-radius: var(--bs-radius); padding: 11px 13px; font: 400 15px/1.4 var(--bs-font); background: var(--bs-surface); color: var(--bs-ink); } .bs-scope .woocommerce form .form-row label { font-weight: 600; font-size: 14px; } .bs-scope .woocommerce-info, .bs-scope .woocommerce-message { border-top-color: var(--bs-teal); } /* Réaffirme nos composants v2 quand ils portent AUSSI des classes WC core (.shop_table/.button) → bat le CSS core de WooCommerce (bordures de table, boutons gris). */ .bs-scope .woocommerce table.bs-dtable { border: 0; border-collapse: collapse; background: transparent; border-radius: 0; } .bs-scope .woocommerce table.bs-dtable th, .bs-scope .woocommerce table.bs-dtable td { border: 0; border-bottom: 1px solid var(--bs-line); background: transparent; } .bs-scope .woocommerce table.bs-dtable thead th { background: transparent; } .bs-scope .woocommerce a.bs-btn, .bs-scope .woocommerce button.bs-btn, .bs-scope .woocommerce input.bs-btn { text-decoration: none; } .bs-scope .woocommerce a.bs-btn--primary, .bs-scope .woocommerce button.bs-btn--primary { background: var(--bs-teal); color: var(--bs-white); border: 0; } .bs-scope .woocommerce a.bs-btn--primary:hover, .bs-scope .woocommerce button.bs-btn--primary:hover { background: var(--bs-teal-hover); color: var(--bs-white); } .bs-scope .woocommerce a.bs-btn--ghost, .bs-scope .woocommerce button.bs-btn--ghost { background: transparent; color: var(--bs-ink); border: 1px solid var(--bs-line); } .bs-scope .woocommerce a.bs-btn--ghost:hover, .bs-scope .woocommerce button.bs-btn--ghost:hover { background: var(--bs-paper); color: var(--bs-ink); border-color: var(--bs-ink); } .bs-scope .woocommerce a.bs-btn--ghost-teal { background: transparent; color: var(--bs-teal); border: 1px solid var(--bs-teal); } /* Sidebar devis : espace clair entre les cartes et le ship-note */ .bs-stack-lg > .bs-ship-note { margin-top: var(--bs-6); } /* Stepper quantité (.bs-qty) — réaffirme le design system par-dessus le CSS core WC/YITH */ .bs-scope .woocommerce .bs-qty { display: inline-flex; align-items: stretch; border: 1.5px solid #D7DCDE; border-radius: var(--bs-radius-sm); overflow: hidden; background: var(--bs-white); } .bs-scope .woocommerce .bs-qty button { width: 34px; min-width: 34px; border: 0; background: var(--bs-white); color: var(--bs-ink); font-size: 18px; line-height: 1; padding: 0; cursor: pointer; box-shadow: none; } .bs-scope .woocommerce .bs-qty button:hover { background: var(--bs-paper); color: var(--bs-ink); } .bs-scope .woocommerce .bs-qty input.qty { width: 46px; border: 0; border-left: 1px solid var(--bs-line-2); border-right: 1px solid var(--bs-line-2); border-radius: 0; text-align: center; font: 600 15px/1 var(--bs-font-mono); color: var(--bs-ink); background: var(--bs-white); padding: 0; min-height: 0; } /* Sélecteur d'adresse du formulaire devis (cartes radio) */ .bs-addr-list { display: grid; gap: 10px; } .bs-addr-option { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border: 1.5px solid var(--bs-line); border-radius: var(--bs-radius); cursor: pointer; transition: border-color .12s, background .12s; } .bs-addr-option:hover { border-color: var(--bs-graphite); } .bs-addr-option input { margin-top: 3px; accent-color: var(--bs-teal); flex: none; } .bs-addr-option:has(input:checked) { border-color: var(--bs-teal); background: var(--bs-paper); } .bs-addr-option__body { display: flex; flex-direction: column; gap: 3px; } .bs-addr-option__label { font-weight: 700; font-size: 13.5px; color: var(--bs-ink); } .bs-addr-option__lines { font-size: 13.5px; color: var(--bs-ink-2); line-height: 1.55; } /* Reset-Passwort : empiler les deux champs (WC les met côte à côte via form-row-first/last) */ .bs-scope .woocommerce-ResetPassword .form-row-first, .bs-scope .woocommerce-ResetPassword .form-row-last, .bs-scope .woocommerce-ResetPassword .woocommerce-form-row--first, .bs-scope .woocommerce-ResetPassword .woocommerce-form-row--last { width: 100%; float: none; margin-right: 0; } .bs-scope .woocommerce-ResetPassword .password-input, .bs-scope .woocommerce-ResetPassword .form-row input.input-text { width: 100%; } .bs-scope .woocommerce-ResetPassword .clear { display: none; } /* Modal réutilisable (popup) */ .bs-modal[hidden] { display: none; } .bs-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 1rem; } .bs-modal__backdrop { position: absolute; inset: 0; background: rgba(16,16,15,.55); } .bs-modal__card { position: relative; background: var(--bs-white); border: 1px solid var(--bs-line); border-radius: var(--bs-radius-lg); max-width: 460px; width: 100%; padding: 28px; box-shadow: 0 24px 60px rgba(16,16,15,.28); } .bs-modal__x { position: absolute; top: 10px; right: 14px; border: 0; background: none; font-size: 26px; line-height: 1; cursor: pointer; color: var(--bs-graphite); } .bs-modal__card h3 { margin: 0 0 8px; font-size: 21px; color: var(--bs-ink); } .bs-modal__sub { margin: 0 0 20px; color: var(--bs-ink-2); font-size: 14.5px; line-height: 1.55; } /* Anfrageliste (YITH quote view) — layout mobile propre : cartes empilées label/valeur (le shop_table_responsive de WC se cassait avec nos styles bs-dtable). */ @media (max-width: 640px) { #yith-ywrq-table-list { display: block; overflow: visible; white-space: normal; } #yith-ywrq-table-list thead { display: none; } #yith-ywrq-table-list tbody, #yith-ywrq-table-list tfoot { display: block; } #yith-ywrq-table-list tbody tr { display: block; border: 1px solid var(--bs-line); border-radius: var(--bs-radius); padding: 6px 14px; margin: 0 0 14px; } #yith-ywrq-table-list tbody td { display: flex; justify-content: space-between; align-items: center; gap: 14px; width: auto; border: 0 !important; padding: 8px 0; text-align: right; } #yith-ywrq-table-list tbody td::before { content: attr(data-title); flex: none; font: 600 11px/1.3 var(--bs-font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--bs-graphite); text-align: left; white-space: nowrap; } #yith-ywrq-table-list td.product-remove { justify-content: flex-end; padding: 2px 0 0; } #yith-ywrq-table-list td.product-remove::before { display: none; } #yith-ywrq-table-list td.product-name { display: block; text-align: left; } #yith-ywrq-table-list td.product-name::before { display: block; margin-bottom: 4px; } #yith-ywrq-table-list td.product-name img { max-width: 64px; height: auto; } #yith-ywrq-table-list td.product-quantity .bs-qty { margin-left: auto; } #yith-ywrq-table-list tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 2px 0; font-weight: 700; } #yith-ywrq-table-list tfoot td { display: block; border: 0 !important; padding: 0; width: auto; } #yith-ywrq-table-list tfoot td::before { display: none; } } /* Anfrageliste mobile — cellule Menge en bloc (label au-dessus) pour le stepper +/- complet. */ @media (max-width: 640px) { #yith-ywrq-table-list td.product-quantity { display: block; text-align: left; } #yith-ywrq-table-list td.product-quantity::before { display: block; margin-bottom: 6px; } #yith-ywrq-table-list td.product-quantity .bs-qty { margin-left: 0; } } /* my-account : nav NON sticky en mobile (sinon elle reste collée en haut et masque le contenu). Placé en fin de fichier pour passer APRÈS la règle de base .bs-accnav (ordre source). */ @media (max-width: 820px) { .bs-accnav, .bs-account .bs-accnav { position: static !important; top: auto !important; } } /* Sélecteur de langue — dropdown avec drapeaux */ .bs-lang { position: relative; margin-right: 4px; } .bs-lang > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 9px; border: 1px solid var(--bs-line); border-radius: 9px; background: var(--bs-white); color: var(--bs-ink); transition: border-color .15s; } .bs-lang > summary::-webkit-details-marker { display: none; } .bs-lang > summary::marker { content: ''; } .bs-lang > summary:hover { border-color: var(--bs-teal); } .bs-lang__code { font: 600 12px/1 var(--bs-font-mono); letter-spacing: .04em; } .bs-lang__chev { width: 13px; height: 13px; color: var(--bs-graphite); transition: transform .18s ease; } .bs-lang[open] .bs-lang__chev { transform: rotate(180deg); } .bs-flag { width: 19px; height: 13px; border-radius: 2px; overflow: hidden; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); } .bs-flag__svg { display: block; width: 100%; height: 100%; } .bs-lang__menu { position: absolute; right: 0; top: calc(100% + 7px); min-width: 168px; background: var(--bs-white); border: 1px solid var(--bs-line); border-radius: 12px; box-shadow: 0 10px 30px rgba(15,40,45,.13); padding: 5px; z-index: 70; } .bs-lang__item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; text-decoration: none; color: var(--bs-ink); font: 500 13.5px/1 var(--bs-font); white-space: nowrap; transition: background .12s; } .bs-lang__item:hover { background: var(--bs-surface); } .bs-lang__item.is-active { color: var(--bs-teal); font-weight: 700; } /* Mobile (burger) : le switcher est à gauche → ouvrir le menu vers la DROITE (sinon il sort de l'écran). */ @media (max-width: 820px) { .bs-lang__menu { left: 0; right: auto; } }