/* ========================================================================== bbb-theme — brand layer on top of the inherited o3-theme bundle. Loaded after out/o3-theme/src/css/main(.min).css, see tpl/layout/base.tpl. Why a plain CSS overlay instead of recompiling o3-theme's SCSS: the parent's green ($primary) is baked into exactly 24 compiled rules, all of which are Bootstrap component custom-property blocks. Redeclaring those is ~60 lines and stays correct across o3-theme updates, whereas forking build/scss/ would copy the parent's whole source tree into this repo. ponytail: CSS overlay, fork vendor/o3-shop/o3-theme/build/ into this theme and compile with gulp if the brand layer ever needs SCSS-level changes (grid/breakpoint/spacing scales, new components). Design tokens come from the mock-ups in html/ (Mehring GmbH). ========================================================================== */ /* Hanken Grotesk = display face of the brand. Self-hosted (SIL OFL 1.1) — never loaded from fonts.googleapis.com, the shop must not leak visitor IPs to Google. These are the designer's own files from html/fonts/, one file per weight; the theme previously carried a variable-axis subset pulled off gstatic. Latin subset, so German umlauts and ß are covered. Inter (body text) is not declared here: o3-theme already ships and self-hosts it. */ @font-face { font-family: "Hanken Grotesk"; src: url("../font/hanken-grotesk-v12-latin-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("../font/hanken-grotesk-v12-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("../font/hanken-grotesk-v12-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("../font/hanken-grotesk-v12-latin-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } :root { --bbb-navy: #00284d; --bbb-navy-dark: #001b35; --bbb-orange: #ff6b00; --bbb-orange-dark: #d95f00; --bbb-ice: #e1ffff; --bbb-surface: #f7f9fb; --bbb-surface-low: #f2f4f6; --bbb-border: #e2e8f0; /* The mock-ups' three text tones, which were literals in a dozen rules until now: `body { color: #191c1e }` (html/index.html), the `.text-muted` hung on every secondary line — rgba(33, 37, 41, .75) in Bootstrap 5.3 — and #43474e, which Wk2_2.html names --text-on-surface-variant and uses for form labels and long copy. */ --bbb-text: #191c1e; --bbb-text-muted: rgba(33, 37, 41, 0.75); --bbb-text-variant: #43474e; --bbb-font-display: "Hanken Grotesk", sans-serif; /* Material Symbols "info" (outlined, weight 300 — QM 2026-09-04: unfilled icons; the mock-up renders the same glyph, as a font). Inlined as a mask so it takes currentColor and needs no font from fonts.googleapis.com — the shop must not leak visitor IPs to Google, the same rule the self-hosted webfonts follow. */ --bbb-icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M450-290h60v-230h-60v230Zm52.92-307.75q9.39-9.29 9.39-23.02t-9.29-23.02q-9.29-9.28-23.02-9.28t-23.02 9.28q-9.29 9.29-9.29 23.02t9.39 23.02q9.38 9.29 22.92 9.29 13.54 0 22.92-9.29ZM480.07-100q-78.84 0-148.21-29.92t-120.68-81.21q-51.31-51.29-81.25-120.63Q100-401.1 100-479.93q0-78.84 29.92-148.21t81.21-120.68q51.29-51.31 120.63-81.25Q401.1-860 479.93-860q78.84 0 148.21 29.92t120.68 81.21q51.31 51.29 81.25 120.63Q860-558.9 860-480.07q0 78.84-29.92 148.21t-81.21 120.68q-51.29 51.31-120.63 81.25Q558.9-100 480.07-100Zm-.07-60q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E"); /* Height of the revealed header search field, and of the strip it sits in — one is the other plus the panel's 1rem top and bottom padding. Declared here rather than at the search rules because the room made for the strip is set on `
`, which is the header's *sibling*: a custom property inherits down from :root, never sideways. */ --bbb-search-field-h: 46px; --bbb-search-strip: calc(var(--bbb-search-field-h) + 2rem); /* Bootstrap only writes --bs-primary from the theme setting (see base.tpl); the -rgb triplet and the focus ring stay green unless set here too. */ --bs-primary: var(--bbb-navy); --bs-primary-rgb: 0, 40, 77; --bs-focus-ring-color: rgba(0, 40, 77, 0.25); --bs-link-color: var(--bbb-navy); --bs-link-color-rgb: 0, 40, 77; --bs-link-hover-color: var(--bbb-orange); --bs-link-hover-color-rgb: 255, 107, 0; --bs-btn-focus-shadow-rgb: 0, 40, 77; --bs-border-color: var(--bbb-border); /* o3-theme's body text is #121212; the mock-up's is #191c1e. It was the one colour of the design we never took, so everything that inherits — body copy, the top-level nav labels — has been two shades off all along. */ --bs-body-color: var(--bbb-text); --bs-body-color-rgb: 25, 28, 30; } /* -------------------------------------------------------------------------- Full-bleed bands -------------------------------------------------------------------------- o3-theme stretches three backgrounds past the container with a `width: 100vw` pseudo-element and a hand-computed negative `left`: left: calc((-100vw + rem - ) / 2) That subtracts the grid gutter once too often, so the band lands 15px too far left: it hangs 15px past the left edge and stops 15px short of the right one. On the parent's near-white palette nobody notices; with a navy top bar it is a white sliver in the top-right corner, and the left overhang is what made the page ~15px wider than the viewport. `left/right: calc(50% - 50vw)` with `width: auto` is the exact form: 50% resolves against the positioned ancestor (the container-width band itself), so the offset to each viewport edge is measured, not guessed, at any container width. */ .start__manufacturer::before { left: calc(50% - 50vw); right: calc(50% - 50vw); width: auto; } /* The top info bar cannot use that pseudo-element at all in this theme. o3-theme's works only because nothing in the header has a background: a `z-index: -1` child paints behind EVERY ancestor background up to the nearest stacking context, so the moment this theme painted the header white (the mock-up's header is white on an off-white page) the navy bleed vanished and the bar ended at the container edge. Making
a stacking context would fix the painting order but breaks something worse: oxwMiniBasket renders #offcanvas__basket inside
while Bootstrap appends its backdrop to , so the backdrop (z-index 1040) would paint over the trapped panel. So the bar bleeds itself — negative inline margins out to the viewport, matching inline padding to put its content back on the container edge. Percentages here resolve against the container's content box, so both halves are measured, not guessed. */ .header__topinfo { /* Sized explicitly rather than left to flex-grow: the parent's `flex: 1 1 100%` plus negative margins made the grown width come out 165px short. With the width pinned and growth switched off, outer width is exactly the container's, so it still takes its own line above the logo row. */ flex: 0 0 auto; width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } /* `content: none`, not `display: none`: the bar bleeds itself now (see above), so this pseudo-element should not exist at all rather than exist and be told not to paint. */ .header__topinfo::before { content: none; } /* Companion to every vw-based bleed above: 100vw counts the classic scrollbar that the layout viewport excludes, so on a scrollbar-drawing browser the bands would overhang half a scrollbar each side and re-introduce a horizontal scroll. `clip` rather than `hidden` because it does not create a scroll container, so position: sticky keeps working inside it. */ body { overflow-x: clip; } /* -------------------------------------------------------------------------- Measure -------------------------------------------------------------------------- The mock-ups force `.container { max-width: 1140px !important }`; o3-theme lays everything out in `.container-xxl`, which is 1320px. That 180px is the single biggest reason the page reads differently even when every element matches: at 1320px the columns are ~22% wider, so cards get bigger while the type stays the same size and the whole page feels looser than the design. One rule, and it applies shop-wide — which is right, the mock-ups use the same measure on every page. The one-row header still fits: 1140px of container leaves ~1110px of content against the ~975px that logo + nav + search + actions need. */ .container-xxl, /* o3-theme's `sEnable3xl` option widens the container to 1650px from 1720px viewports via `body.xxxl-enabled .container-xxl` (specificity 0,2,0 — it beat the rule above on wide monitors). The option is off in theme.php; this keeps the measure even if it is toggled. */ body.xxxl-enabled .container-xxl { max-width: 1140px; } /* o3-theme throws away the container's own side padding on the header and main containers: body > header > .container-xxl, body > main > .container-xxl { padding-inline: var(--content-inner-margin, 0) } and `--content-inner-margin` is only ever set for the boxed `body.has-bg-image` layout, so on this shop it resolves to 0. Above the container's max-width nobody notices, because there is whitespace outside it anyway — but on a phone the container edge *is* the viewport edge, so every heading and paragraph sat flush against the screen. The mock-up insets everything (12px, Bootstrap's default gutter half). Restored via the container's own gutter rather than a literal, so it tracks `--bs-gutter-x` and cancels the `.row` negative margins exactly. That is also what the footer's container has had all along — it is not a child of
, which is why the footer looked right on mobile while the page above it did not. Same specificity as the parent's rule, and this file loads after main.min.css, so the tie resolves here. The full-bleed bands are unaffected: they measure with `calc(50% - 50vw)`, where the 50% resolves against whatever the container's content box is. */ body > header > .container-xxl, body > main > .container-xxl { padding-inline: calc(var(--bs-gutter-x) * 0.5); } /* sBackgroundColor is now the mock-up's off-white, but o3-theme also paints the header from --page-bg, and the mock-up's header is white. Keep the two apart. `.header__search-button` used to be in here too; it is now the mock-up's navy pill button (see "Search bar" below) and paints itself. */ .header__mainnav { background-color: #fff !important; } header { background-color: #fff; } /* -------------------------------------------------------------------------- Sticky header — the mock-up's `
`, i.e. `position: sticky; top: 0; z-index: 1020` plus Bootstrap's shadow-sm and a hairline. One structural difference to work around: in the mock-up the navy utility bar is a **sibling before**
, so it scrolls away and only the white row pins. o3-theme puts it *inside* the header. Rather than restructure the template, the header sticks at `top: -36px` from md up — it scrolls up by exactly the bar's height and then pins, so the pinned strip is the white row alone, as in the mock-up. Below md the bar is not rendered at all, so there the offset has to be 0 or 36px of the logo row would be cut off. Sticky always creates a stacking context, so any offcanvas panel rendered inside
paints at the header's z-index — see the note on .header__topinfo above. That is why the category nav is a plain in-place collapse here and not a slide-in panel. `body { overflow-x: clip }` above is what keeps this working — `clip` does not create a scroll container, where `hidden` would have made the sticky never stick. */ header { position: sticky; top: 0; z-index: 1020; /* Shadow only, no hairline. The mock-up's header carries `shadow-sm border-bottom`, but its hero is a photo with a light top edge — on this shop the header sits directly above the **navy** hero band, where any hairline reads as a stray seam between white and navy instead of an edge. The shadow gives the separation the design is after. */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.075); } /* `:not(.is-minimal)` matters: header.tpl renders the utility bar only when it renders the search, which is exactly when the header is not minimal. On the reduced checkout header there is no bar to scroll away, so -36px would slice 36px off the logo row instead. */ @media (min-width: 768px) { header:not(.is-minimal) { top: -36px; } } /* Mock-up leaves 39px under the nav labels and 37px under the logo; o3-theme leaves 7px and 5px, which is what made the row look cramped against the content below it. Added on the container so it clears whichever of logo/nav/actions is tallest, rather than on one of them. QM: "Mittig, oben und unten gleich viel Platz." The space *above* the logo row is not padding at all — the utility bar is a flex item in this same container, so it is the wrap gap, and o3-theme's `gap: 15px` was answering a 32px padding below: 20px over the logo against 37px under it. Both sides are now 1.5rem, which puts the wordmark at 29/29 and keeps the white band within a few px of the mock-up's 113. `row-gap`, not `gap` — the 15px column gap is what separates logo, nav and actions across the row and has nothing to do with this. Only the full header: `header.is-minimal > .container-xxl` carries o3-theme's own 17px block padding at a higher specificity, and the checkout header is symmetric already (22/22). Kept in a custom property because the mega menu has to subtract it again — see `.megamenu { top: ... }` below. */ header > .container-xxl { --bbb-header-pad-b: 1.5rem; padding-bottom: var(--bbb-header-pad-b); row-gap: var(--bbb-header-pad-b); } /* Below lg the utility bar is not rendered (`d-none d-lg-flex`), so there is no wrap gap to carry the space above the logo and it sat flush against the top of the screen — the same imbalance, one breakpoint down. Padding, since here it is the container's own top edge; above lg it would push the navy bar down instead, that bar being a flex item of this container. */ @media (max-width: 991.98px) { header > .container-xxl { padding-top: var(--bbb-header-pad-b); } } /* -------------------------------------------------------------------------- Typography — body stays Inter (parent default), headings go display face. -------------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .footer__box-title, .component__productbox-title { font-family: var(--bbb-font-display); font-weight: 600; } /* o3-theme's section headings are 700; the mock-up's are 600. Worth matching — at 32px the extra weight is what makes our headings look heavier than the design. (The mock-up's h1 computes to 300, but it requests Hanken Grotesk with only wght@600;700;800 from Google, so 300 falls back to 600 — the *rendered* weight is 600 and this theme's self-hosted variable font must not take the 300 literally.) */ .title-big, .start__sectionhead h2 { font-weight: 600; } /* -------------------------------------------------------------------------- Bootstrap components that carry the parent's green as a literal value. -------------------------------------------------------------------------- */ /* QM: "Das Hover ist nicht orange. Jeder Button hovert orange." — and the mock-ups agree: `.btn-primary:hover` and `.btn-outline-primary:hover` both go to `--industrial-orange` (#FF6B00, our --bbb-orange) in Produktuerbersicht.html. The navy-on-navy hover this had was the odd one out, which is why the buttons the checkout and basket recolour by hand — Weiter, Warenkorb, the account navi — all already hover orange. One value here, not eight overrides. The accent-orange buttons keep their darker hover (--bbb-orange-dark): they are orange already, so orange-on-orange would be no hover at all. */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--bbb-navy); --bs-btn-border-color: var(--bbb-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bbb-orange); --bs-btn-hover-border-color: var(--bbb-orange); --bs-btn-focus-shadow-rgb: 0, 40, 77; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bbb-orange-dark); --bs-btn-active-border-color: var(--bbb-orange-dark); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--bbb-navy); --bs-btn-disabled-border-color: var(--bbb-navy); } .btn-outline-primary { --bs-btn-color: var(--bbb-navy); --bs-btn-border-color: var(--bbb-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bbb-orange); --bs-btn-hover-border-color: var(--bbb-orange); --bs-btn-focus-shadow-rgb: 0, 40, 77; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bbb-orange-dark); --bs-btn-active-border-color: var(--bbb-orange-dark); --bs-btn-disabled-color: var(--bbb-navy); --bs-btn-disabled-border-color: var(--bbb-navy); } /* The orange is the accent for promotional CTAs and badges, never a surface. */ .btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--bbb-orange); --bs-btn-border-color: var(--bbb-orange); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bbb-orange-dark); --bs-btn-hover-border-color: var(--bbb-orange-dark); --bs-btn-focus-shadow-rgb: 255, 107, 0; } .dropdown-menu, .dropdown-menu-dark { --bs-dropdown-link-active-bg: var(--bbb-navy); } .nav-pills { --bs-nav-pills-link-active-bg: var(--bbb-navy); } .pagination { --bs-pagination-active-bg: var(--bbb-navy); --bs-pagination-active-border-color: var(--bbb-navy); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 40, 77, 0.25); } .list-group { --bs-list-group-active-bg: var(--bbb-navy); --bs-list-group-active-border-color: var(--bbb-navy); } .progress, .progress-stacked { --bs-progress-bar-bg: var(--bbb-navy); } .accordion { --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(0, 40, 77, 0.25); } .btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(0, 40, 77, 0.25); } .form-control:focus, .form-select:focus, .form-check-input:focus, .nav-link:focus-visible { box-shadow: 0 0 0 0.25rem rgba(0, 40, 77, 0.25); border-color: var(--bbb-navy); } /* o3-theme squares every checkbox (`.form-check-input[type=checkbox] { border-radius: 0 }`); the mock-up keeps Bootstrap's rounded 0.25em. Nick, 2026-09-03, on step 4's AGB box: "a little bit round edges". Theme-wide on purpose: it is one control, not one page. */ .form-check-input[type=checkbox] { border-radius: 0.25em; } .form-check-input:checked, .form-check-input[type=checkbox]:indeterminate, .form-range::-webkit-slider-thumb, .form-range::-moz-range-thumb { background-color: var(--bbb-navy); border-color: var(--bbb-navy); } .component__tobasket-minus, .component__tobasket-plus { color: var(--bbb-navy); } .alist__orga-subcats .btn.active, .alist__orga-subcats .btn[aria-current=page] { background: rgba(0, 40, 77, 0.08); } /* QM: "Hover ist auf dieser Seite immer der Orangeton, hier ist das Hover blau." o3-theme fills the category chip with --bs-primary on hover, which this theme sets to the brand navy — so the one place the chips could signal interaction came out the same colour as the headings. Orange is this theme's interaction colour everywhere else (nav labels, mega menu links, footer links), and the chips are the outlier. */ .alist__orga-subcats .btn:hover, .alist__orga-subcats .btn:focus-visible { --chip-border: var(--bbb-orange); --chip-fg: #fff; background: var(--bbb-orange); } /* o3-theme paints the green into a few inline SVGs (manufacturers.tpl, product/tobasket.tpl) as presentation attributes. Matching on the literal colour recolours those without copying the templates. */ [fill="#82BA00"] { fill: var(--bbb-navy); } [stroke="#82BA00"] { stroke: var(--bbb-navy); } /* -------------------------------------------------------------------------- Header — the top info strip is the mock-up's navy utility bar. sAccentColor stays the light "ice blue" because o3-theme reuses it for alerts, the manufacturer band and slider pagination, so the bar is recoloured here instead of through the theme setting. -------------------------------------------------------------------------- */ .header__topinfo { background-color: var(--bbb-navy) !important; color: #fff; /* Measured off the mock-up's `.mh-utility-bar`, which the parent's defaults overshot: 13px text in a 36px bar with 16px icons; o3-theme inherits the 16px body size into a fixed 40px bar and sizes the icons at 20px, which made the strip read as a second navigation rather than a fine print line. */ font-size: 13px; /* Mock-up's `.utility-bar` is weight 500; at 400 the thin white text reads dim on navy. */ font-weight: 500; height: 36px; } /* The phone icon is inline SVG in header.tpl; the e-mail one is an carrying width/height attributes from the o3headerTopInfo CMS content, so it has to be resized here rather than in the markup — otherwise editing that content resets the size. */ .header__topinfo svg, .header__topinfo img { width: 16px; height: 16px; } .header__topinfo a, .header__topinfo .btn { color: #fff; } .header__topinfo a:hover, .header__topinfo .btn:hover { color: var(--bbb-orange); } .header__topinfo svg [stroke]:not([stroke="none"]) { stroke: currentColor; } /* Wishlist/basket counters are the mock-up's orange pills; o3-theme ties them to --bs-primary, which is now the navy and would vanish against the icons. */ .badge-counter { background-color: var(--bbb-orange); } /* -------------------------------------------------------------------------- Search bar — the mock-up's `.mh-search-input-group` (html/assets/css/shared-components.css). Mock-up shape: one full pill field with a round navy button floating inside its right edge, not the two attached segments o3-theme builds out of `.input-group`. Its values are taken over verbatim — 46px field, 2rem radius, 1.25rem/3rem padding, #E2E8F0 border, 36px button inset 5px, navy → orange on hover, and the 3px navy focus ring. The colours and the height are already tokens (--bbb-border / --bbb-navy / --bbb-orange / --bbb-search-field-h) holding exactly those values, so they are written as tokens. The panel is a wrapper this theme adds around the field + submit button (tpl/widget/header/search.tpl) so the pair can be revealed as one unit; here it doubles as the mock-up's positioning context. It is the `.input-group` child, so Bootstrap's `.input-group > *` radius and margin resets never reach the field or the button inside it — which is what lets the pill survive without fighting them. -------------------------------------------------------------------------- */ .header__search-panel { position: relative; /* Hidden until the magnifier is pressed (`.is-open` is set by the widget's own script). Was `flex` here and hidden again inside the xl block; now that the toggle is the control at every width, the closed state is the default one. */ display: none; flex: 1 1 auto; min-width: 0; } .header__search.is-open .header__search-panel { display: flex; } .header__search-panel > .form-control { flex: 1 1 auto; min-width: 0; height: var(--bbb-search-field-h); padding-left: 1.25rem; padding-right: 3rem; border: 1px solid var(--bbb-border); border-radius: 2rem; /* The mock-up declares no fill, i.e. Bootstrap's white. o3-theme tints the header field #f4f8f9, which on the white strip reads as a grey bar. */ background-color: #fff; } .header__search-panel > .form-control:focus { border-color: var(--bbb-navy); box-shadow: 0 0 0 3px rgba(0, 40, 77, 0.1); outline: none; } /* Selector carries the panel only to out-specify Bootstrap's `.input-group .btn {position:relative}`, which would otherwise keep the button in flow (0,2,0 beats 0,1,0) and leave it sitting beside the field instead of inside it. */ .header__search-panel > .header__search-button { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; /* `!important` only because o3-theme's own bundle carries `.header__search-button{background-color:var(--page-bg)!important}` and loads first — same specificity, so nothing but importance can beat it. */ background: var(--bbb-navy) !important; color: #fff; transition: background 0.2s ease; } .header__search-button:hover { background: var(--bbb-orange) !important; } /* The glyph is an inline SVG with a hard-coded near-black stroke (o3-theme's, kept in tpl/widget/header/search.tpl); a CSS `stroke` beats the presentation attribute, so the icon follows the button's own colour on both states without touching the template. */ .header__search-button svg { height: 18px; width: 18px; } .header__search-button svg path { stroke: currentColor; } /* The magnifier is the search control at EVERY width now — Nick, on the phone: "on mobile the nav needs to be like this in icons (mainly search, the other 2 are icons)". Below xl the collapsed panel used to carry a full-width open field on a row of its own above the account and basket glyphs, so the menu had two icons and one field where the design has three icons. It used to be xl-only, which is why this rule and the panel's `display: none` below moved up out of the xl block: one behaviour, two placements for the *opened* field (an absolute strip at xl, in flow below it — see both media blocks). Not done with d-none/d-xl-flex: o3-theme purges unused utilities out of main.min.css — the bundle the productive storefront loads — and no o3 template uses an xl display utility, so all d-xl-* classes are missing from it. */ .header__search-toggle { display: flex; align-items: center; justify-content: center; color: var(--bbb-navy); background: transparent; border: 0; } .header__search-toggle:hover { color: var(--bbb-orange); } /* Main nav: uppercase, tracked out, orange on hover (mock-up navbar). Tokens read off the mock-up's `.mh-nav-link`: 14px / 600 / uppercase / 0.05em tracking / padding 0.5rem 1rem. o3-theme's `.navbar-nav` sets `--bs-nav-link-padding-x: 0` and the weight comes out 400, which made the labels read as body text and packed them ~16px tighter per side than the design. */ .header__mainnav .nav-link, .header__mainnav > .container-xxl > ul > li > a { font-family: var(--bbb-font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; /* Not inherited: o3-theme pins `--bs-nav-link-color: #121212` (main.css:4440), so the new body colour does not reach these. The mock-up's `.mh-nav-link` is #191c1e. Hover keeps o3-theme's orange — its `:hover` rule out-specifies this one. */ color: var(--bbb-text); } /* QM: "Logo zu klein". o3-theme caps `.header__logo` at 150px, which renders the 500x179 mark 54px tall — the mock-up (html/index.html) sets the header logo to height="70", i.e. 196px wide at this aspect. */ .header__logo { max-width: 196px; } /* The one-row header's width budget, since three QM points all spend from it. The container is capped at 1140px, so from 1170px up the row always has the SAME 1110px of content — widening the window never buys space. Measured against the shop's five top-level categories: logo 196 + nav + magnifier 23 + actions 93 + gaps. The mock-up fits its nav in 690px; ours needs more for the same five labels because o3-theme puts a caret on *every* item with children, where the mock-up draws one on two of five. That is correct here — all five shop categories do have children — so the caret is made cheap instead (see .header__mainnav svg below) rather than the nav spacing being cut. Horizontal padding only: the vertical 0.875rem is what o3-theme measures the nav row and the megamenu's `top: 100%` from, and the row's height is set by the logo beside it anyway. */ .header__mainnav .navbar-nav > .nav-item > .nav-link { /* QM: "Abstände sind anders" — the mock-up's `.mh-nav-link` is `padding: 0.5rem 1rem`. This sat at 0.5rem purely to buy wrap safety, which the nav's `flex: 1 1 0` now provides structurally (see the media query below). */ padding-inline: 1rem; /* The nav box is the row's leftover, so it can end up a few px under the labels' natural width; without this "Über Uns" breaks onto a second line and doubles the header's height. */ white-space: nowrap; /* Caret cost, paid five times: o3-theme's is an 11px SVG with a 5px flex gap in front of it. Bootstrap's own `.dropdown-toggle::after` — which is what the mock-up's carets are — is 0.6em wide with a 0.255em margin, i.e. ~12px all in. Matching that frees ~20px of the budget above. */ gap: 3px; } /* Colour follows the label so caret and text turn orange together on hover. */ .header__mainnav .navbar-nav > .nav-item > .nav-link > svg { width: 9px; height: 9px; color: inherit; } .header__mainnav a:hover { color: var(--bbb-orange); } /* -------------------------------------------------------------------------- Mega menu panel — the mock-up's `.mh-mega-menu`. o3-theme paints the panel with `.megamenu::before`, and a late rule in its own bundle overrides that pseudo to `background: var(--page-bg); border-radius: 0`. Since pass 3h set the page background to the mock-up's off-white, the panel became a square off-white slab floating on the white header — no card, no radius. Restored to the mock-up's surface: near-opaque white, 8px radius, one soft deep shadow. -------------------------------------------------------------------------- */ .megamenu::before { background: rgba(255, 255, 255, 0.98); border-radius: 0.5rem; border: 0; box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); } /* The mock-up's panel has no pointer triangle. o3-theme's is drawn from --page-bg too, so it would now read as an off-white notch cut out of a white card. `content: none` so it is never generated, rather than generated and hidden. */ .megamenu::after { content: none; } /* Panel spans the container, as in the mock-up (`width: 100%; max-width: 1140px`, centred). Two things forced this rather than the parent's content-width panel, and both are the same root cause — the parent's grid is `repeat(auto-fit, minmax(180px, max-content))` inside a panel with `width: max-content`, and auto-fit needs a *definite* width to decide a column count: 1. With no definite width it always resolved to one column, so Verbrauchsmaterial's 11 subcategories were a single column **583px tall**. 2. Widening the panel to fit columns then made it grow rightwards from its own item — Ersatzteile ran to x=1410 on a 1440 viewport, 135px past the container. A container-width panel fixes both at once: the grid gets a definite width and spreads, and the panel can never stick out however wide its content is. It also matches the mock-up literally, which is the tie-breaker. Positioning context moves to the header's own container, so **three** ancestors between the panel and that container have to give up theirs — miss any one and the panel silently spans the nav (762px) instead of the container: - `.header__mainnav` — o3-theme sets `position: relative` - `nav.navbar` — *Bootstrap's* own `position: relative`, the easy one to overlook - the `
  • ` — o3-theme's `.mega-dropdown` NOT as safe as this comment first claimed: `.header__mainnav::after` (the nav hairline, already switched off here) was not the only thing anchored to those ancestors. o3-theme also puts the top-level active/hover underline on the `
  • ` — see the rule right below, which had to be dealt with. Below xl the whole nav is `display: none` behind the burger. */ header > .container-xxl { position: relative; } .header__mainnav, .header__mainnav nav.navbar, .header__mainnav .navbar-nav > .nav-item { position: static; } /* --- Fallout from that `position: static`, and my own regression ------------ o3-theme marks the current and hovered top-level item with an underline drawn on the **`
  • `**: [data-level=is-level-1].nav-item::after { content:""; position:absolute; bottom:8px; left:0; right:0; height:2px; background-color:transparent } …nav-item.active::after, …nav-item:hover::after { background-color: var(--bs-primary) } With the `
  • ` made static for the container-wide panel, that `left: 0; right: 0` no longer resolves against the item — it resolves against the header's container. So on any page where a nav item is `.active` (i.e. inside a category, which includes every product page) it painted a **2px navy bar 1140px wide** across the whole nav row, and hovering any label did the same. The start page never shows it because no item is active there, which is why it survived the earlier hairline sweep. Removed with `content: none` so it is never generated, not merely painted transparent. The indicator itself is not lost: the mock-up does not underline nav items at all, it marks them with the accent colour, so the active item takes that instead. Hover already did. */ .header__mainnav .navbar-nav > .nav-item::after { content: none; } .header__mainnav .navbar-nav > .nav-item.active > a { color: var(--bbb-orange); } /* Second selector repeats the parent's own, which right-anchors the last two items' panels — irrelevant now that every panel spans the container, but it would otherwise win on specificity and leave those two unstretched. */ .megamenu, .header__mainnav .navbar-nav > .nav-item:nth-last-child(-n + 2) > .megamenu { left: 0; right: 0; width: auto; max-width: none; /* THE DROPDOWN CLOSED ITSELF, and this is why: o3-theme positions the panel with `top: 100%`, which used to mean "just under the nav item" — but once the containing block became the header's container, 100% became the container's *padding box*, i.e. 32px of header padding lower. That left a 39px dead strip between the item and the panel: moving the pointer down crossed non-hoverable space, `.mega-dropdown:hover` ended and the panel vanished before the sub-categories could be reached. o3-theme's 12px `--bridge` covers a 12px gap, not 39. Subtracting the container's own bottom padding puts the panel back on the nav row's bottom edge, where the bridge does its job. Same custom property as the padding itself, so the two cannot drift apart. */ top: calc(100% - var(--bbb-header-pad-b, 0px)); } /* ...and the last 8px. `.header__mainnav` is shorter than the header row it sits in (the logo is the tallest item), so even with the panel on the row's bottom edge a strip remained between the *item* and the panel with nothing hoverable — enough for a diagonal mouse move to lose `.mega-dropdown:hover` and dismiss the panel. The nav item now reaches the row's bottom, so the pointer stays inside the hover target all the way down. `height: 100%` and not `align-self: stretch`: `.header__mainnav` is `display: block`, so its `nav.navbar` child is a block box and align-self does nothing to it — the chain stopped stretching there. Only at xl, which is the only width where this nav is rendered. */ @media (min-width: 1200px) { header:not(.is-minimal) .header__mainnav { align-self: stretch; } header:not(.is-minimal) .header__mainnav > nav, header:not(.is-minimal) .header__mainnav .navbar-collapse, header:not(.is-minimal) .header__mainnav .navbar-nav, header:not(.is-minimal) .header__mainnav .navbar-nav > .nav-item { height: 100%; } /* "Bündig": the nav labels sit on the wordmark's baseline, and the icons come with them. The whole right-hand side of the row drops by one number — the distance between the row's centre, where `align-items: center` puts everything, and the bottom of the wordmark's letters. The logo cannot meet the text half way: it stays centred for qms14's "oben und unten gleich viel Platz", and its ink ends 14.5px above the image box's bottom edge, because the `g` descender and the swash occupy that band (alpha profile of logo_bbb.png: the letters end at source row 90 of 127, rows 91..126 carry 76px of ink and nothing else). Hence 6px, measured rather than guessed: at the rendered 49.78px the letters end 35.3px into the image, i.e. 100.3 against a text baseline of 94.4. Labels move by padding, so the hover and underline target moves with them and the two values still sum to o3-theme's 28px — the row height and the mega menu's `top` are measured from that. Search and actions move by margin: doubled, because they are centred flex items and half of a top margin is what shifts a centred box. Both went the wrong way once before. Dropping the labels alone (a first pass at this same note) left them 6.6px below the icons standing next to them, which reads worse than the original misalignment — the mock-up keeps labels and icons on one line and lifts the LOGO instead (`transform: translateY(-15px)` on `.navbar-brand img`), which is this rule with the sign flipped and the logo's equal spacing spent. `:has(.header__mainnav)`, plus a `0px` fallback everywhere the property is read: the basket page keeps the full header class but renders no category nav at all, so there are no labels for the icons to line up with and they stay on the row's centre there. */ header:not(.is-minimal):has(.header__mainnav) > .container-xxl { --bbb-navrow-drop: 6px; } header:not(.is-minimal) .header__mainnav .navbar-nav > .nav-item > .nav-link { display: flex; align-items: center; height: 100%; padding-block: calc(14px + var(--bbb-navrow-drop, 0px)) calc(14px - var(--bbb-navrow-drop, 0px)); } /* Search and actions take the same drop, further down this file — both already have a `margin` there and a shorthand would reset whatever were set here. */ } /* -------------------------------------------------------------------------- Mega menu — opens on click, and shows the whole branch (QM, both points). o3-theme opens the panel from CSS alone: `.mega-dropdown:hover > .megamenu`, plus `:focus-within` so the keyboard can reach it. Both are switched off here and the panel is keyed to `.is-open`, which the script at the bottom of tpl/widget/header/categorylist.tpl toggles on click. `:focus-within` has to go too or tabbing onto the nav item would still open the panel, which is the hover behaviour by another name. -------------------------------------------------------------------------- */ .mega-dropdown:hover > .megamenu, .mega-dropdown:focus-within > .megamenu { display: none; } .mega-dropdown.is-open > .megamenu { display: block; animation: megamenu-reveal 0.18s ease-out; } /* Same for the caret flip — it belongs to the open state now, not to the pointer. */ .mega-dropdown:hover > .nav-link svg, .mega-dropdown:focus-within > .nav-link svg { transform: none; } .mega-dropdown.is-open > .nav-link svg { transform: rotate(180deg); } /* o3-theme dims the page from backdrop.js, which adds `.backdrop` to
    on mouseenter and drops it on mouseleave. With the panel no longer following the pointer that would dim on a hover that opens nothing, and un-dim while an opened panel is still up. Painted from the open panel itself instead, so the dim and the panel cannot disagree. */ main.backdrop::after { content: none; } /* xl only: below that the panel is an in-flow accordion inside the collapsed nav (see the max-width block further down), and dimming the page behind an element that pushes the page down instead of covering it just blacks out the whole phone screen. */ @media (min-width: 1200px) { body:has(.header__mainnav .mega-dropdown.is-open) main::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 40px); background-color: rgba(0, 0, 0, 0.5); z-index: 10; } } /* Mock-up: 2.5rem panel padding, 3rem between columns. CSS multi-column, not the parent's Bootstrap row: the branches are wildly uneven — Maschinen is one group of 17, Verbrauchsmaterial is eleven groups of 2-9 — and a wrapping flex row makes every row as tall as its tallest cell, which leaves ragged holes. Columns balance instead. Long groups may split across tracks (`break-inside: auto` is the default) so a single 17-item branch fills the panel width rather than running 500px down one side; the heading is pinned to its first item with `break-after: avoid`. */ .megamenu__inner { display: flex; gap: 3rem; /* Designer: "Das Logo soll bündig zu den Kategorien liegen ... es soll auf einer Linie sein." The panel card spans the container's border box, so its 2.5rem padding put the first category 40px in, while the logo and every other content edge on the page sit on the container's own 15px gutter — three different left edges. Vertically it keeps the mock-up's 2.5rem; horizontally it now takes the container's gutter, so the columns start on the logo's line and the Bestseller card ends on the page's right edge. */ padding: 2.5rem calc(var(--bs-gutter-x) * 0.5); /* With every level in the panel the biggest branch comes to 873px, and the panel hangs off a *sticky* header — anything past the viewport bottom cannot be scrolled to, it moves with the header. So the panel stops at the viewport and scrolls inside itself instead (10rem covers the header above it plus a little air). Measured on the panel, not guessed: 131px top + 740px = 871 in a 900px window. `overscroll-behavior` keeps the page still once the panel's own scroll runs out. */ max-height: calc(100vh - 10rem); overflow-y: auto; overscroll-behavior: contain; } .megamenu__groups { flex: 1 1 auto; min-width: 0; columns: 3; /* 2.5rem, not the mock-up's 3rem: at 3rem a column is 207px, and "Hydraulische Stapelschneider" needs 181 against the 179 a fifth-level row has left after two indents — it broke over two lines for two pixels. The narrower gutter buys each column 5px. */ column-gap: 2.5rem; /* Not `stretch` (the flex default): with the panel's height capped above, a stretched multicol box gets a *definite* height, and a multicol that runs out of block space fragments sideways — a fourth column appeared on top of the Bestseller card instead of the panel scrolling. At `flex-start` the box keeps its natural height, three columns stay three, and the overflow is vertical where .megamenu__inner can scroll it. */ align-self: flex-start; } .megamenu__group { margin-bottom: 1.75rem; } /* QM: "Abstände einrücken und Border weg" — the hairlines (a rule under every heading, a guide down every sub-list) drew a grid over a panel that already has three levels of indentation, so depth is carried by indent + weight alone now. */ .megamenu__grouptitle { display: block; margin-bottom: 0.5rem; padding-bottom: 0.4rem; /* Nick, trying it out: "nimm mal zum Test die underline bei der ersten Kategorie raus". The rule under every group heading is gone — the mock-up puts a plain Bootstrap `.border-bottom` there, but the heading is already the only 15px/800 navy line in its column, so the rule was saying a second time what the weight had said. Note it only ever spanned the TEXT, not the column: o3-theme's `.megamenu a { display: inline-block }` is (0,1,1) and outranks the `display: block` above, so each heading carried a different length of line — part of why the panel read as ruled rather than grouped. The `padding-bottom` stays: it is what keeps the heading off its first link, and dropping it with the border would close the gap by 7px in the same change. One line to put back. */ break-after: avoid; } .megamenu__links li { margin-bottom: 0.5rem; } /* Third level and below (QM: a mega menu carries every level), one size down so depth reads without needing a second heading style. QM: "Bündig zu Neumaschinen" — the third level sits flush with the column heading, so only the levels BELOW it step in; its own 700 against the heading's 800 carries that step. And the gap above a sub-list is tighter than the one below it ("etwas weniger" / "etwas größer"), so a category and its children read as one block with air before the next category. */ .megamenu__links .megamenu__links { margin: 0.1rem 0 1.1rem; padding-left: 0.9rem; } .megamenu__links .megamenu__links a { font-size: 13px; } /* QM: the gap between a fourth-level title and its own list, down to what the third level has. It was 5.6px against 1.6px and not a margin at all — the label is an inline-block, so its li's line box adds the strut's descender space under it, and that strut is 4px taller than the 13px label needs. Zeroing the li's line-height drops the strut; the label carries its own line-height (from .megamenu a), so nothing about the text changes and the row pitch stays 30px. Descendant, not child: a fifth-level branch gets the same treatment. */ .megamenu__links .megamenu__links .megamenu__branch { line-height: 0; } /* Level 5 stays at the base 13px/400: the 300 it briefly had is superseded by the colour ladder below (#121212 -> #484848), which separates it from level 4 without thinning the type at the smallest size in the panel. */ /* QM: "Gruppieren, etwas weniger Abstand als hier" — leaf rows sit closer than the branches they hang off, so a run of them reads as one block. xl only: below that these are accordion rows and a 3px gap between 21px labels is not a tap target. */ @media (min-width: 1200px) { .megamenu__links .megamenu__links li { margin-bottom: 0.2rem; } /* QM: the fifth level again tighter than the fourth, "damit man besser sieht das die zusammen gehören und nicht zu Ebene 4". The li margin alone cannot do it — it is 3.2px already. What actually sets the row pitch here is o3-theme's `4px 0` on the inline-block link (the underline sweep's box) plus the line-height, so both come down: 30px pitch to 21px, against an indent of only 14px between the two levels. */ .megamenu__links .megamenu__links .megamenu__links li { margin-bottom: 0.05rem; } .megamenu__links .megamenu__links .megamenu__links a { padding-top: 1px; padding-bottom: 1px; line-height: 1.3; } } /* `columns: 3` balances by content, so without this a category could be left in one track while the children it heads flow into the next. */ .megamenu__branch { break-inside: avoid; } /* Designer: "die Punkte rechts starten zu lassen und nicht links. Dann sitzen die Punkte alle an der blauen Box und nicht links am Rand." Downloads (4 groups) and Über uns (2) are short enough that the balanced box fills two of its three columns and leaves the third empty — 322px of white between the last entry and the Bestseller card, where Maschinen, Verbrauchsmaterial and Ersatzteile run right up to it. The mock-up solves the same case for the same menu with `justify-content: flex-end` over fixed thirds (shared-components.css:110, "let them keep a natural width and start from the right, leaving white space on the left"); this is that, against a multicol. The two values come from the script in tpl/widget/header/categorylist.tpl, because CSS has no predicate for "the content did not fill its columns" — a multicol box always claims the full width and always leaves the spare column on the fill side, and how many it actually used is only knowable once it is laid out. The column WIDTH is preserved, so the block still sits on the panel's three-column grid, just on its right-hand tracks. `direction: rtl` would have done the whole thing in two lines and was rejected: it fills from the right by reversing the column ORDER, so Downloads' four groups would read right-to-left. xl only — below that the panel is a single-column accordion with nothing to fit, and the class would otherwise survive a resize down. */ @media (min-width: 1200px) { .megamenu__groups--fitted { flex-grow: 0; columns: var(--bbb-mega-cols); width: var(--bbb-mega-width); margin-left: auto; } /* Designer: "warum sind bei Downloads eigentlich nicht drei in einer Reihe? Optisch macht es halt Sinn, weil die anderen ja auch 3 nebeneinander haben." Because a balanced multicol cannot do it. Downloads' four groups are a bare heading each — 39px, no children, unbreakable — so the shortest column height that fits them all in three tracks is two of them, and the balancer then fills greedily: 2 + 2 + 0. There is no 3 + 1 in that model, and the empty third track is the hole the fitted rule above was trimming off. A panel whose groups carry no sub-list at all is a flat list of links, and a flat list wants a fixed grid rather than balanced flow. `:has()` asks precisely that, so the three panels that do have sub-lists keep the multicol they need: Verbrauchsmaterial's eleven groups would rag badly over rigid rows, and Maschinen's Neumaschinen has to be free to flow across all three columns. QM, on Über uns ("Kategorien rechts starten" + "hier ist dann platz" over the empty left column): the tracks are content-width, not `1fr`, and the row is justified to the end. `1fr` gave three short CMS titles a third of the panel each, which spread them from the far left and left the white space *inside* the tracks, where it reads as a hole rather than as margin. Content-width tracks put that space back on the left in one piece and park the titles against the Bestseller card — the same thing the fitted rule does for the multicol panels, and the same thing the mock-up's `justify-content: flex-end` does for its Über-uns row (shared-components.css:110). Then, on both flat panels: "da muss mehr abstand zwischen. und vier in eine reihe." So the column count is dropped entirely — `grid-auto-flow: column` puts a flat panel's groups in ONE row however many there are, which is what finally answers the older "warum sind bei Downloads eigentlich nicht drei in einer Reihe?" for its fourth entry too. The gap goes to 4rem, from the 2.5rem the multicol panels use: those pack sub-lists under their headings, where a column gutter reads as structure, while here the headings ARE the content and 40px between two short words reads as a run-on. ponytail: 4rem is the widest that keeps Downloads' four titles on one line — 550px of text plus three gaps in a 782px box, i.e. 40px of slack. A fifth entry, or one longer than "Formulare/Datenblätter", overflows towards the Bestseller card rather than wrapping. If that happens, the honest fix is `grid-auto-flow: row` with `auto-fit` tracks, not a smaller gap — the gap is what QM asked for. */ .megamenu__groups:not(:has(.megamenu__links)) { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; justify-content: end; column-gap: 4rem; } /* "bei über uns würde ich die Abstände vergrößern. aber nur da, nicht bei den anderen Kategorien." Keyed to the entry count rather than to the category: a panel with no fourth group has room to spend, and the same rule keeps holding if a page is added or removed — naming Über uns would have made this a fact about the CMS tree instead of about the layout. Über uns' three titles carry 231px of text, so 10rem leaves them at 629..1180 with the Bestseller card still 48px clear and 231px of white on the left; Downloads has four and stays at 4rem, where it has 40px of slack (see the ponytail note above). Asked for twice — 6rem was the first answer and was not enough. */ .megamenu__groups:not(:has(.megamenu__links)):not(:has(> :nth-child(4))) { column-gap: 10rem; } } /* From xl the whole branch is open, so the accordion arrow has nothing to do. */ .megamenu__expand { display: none; } /* Mock-up sub-links: 14px / 400, muted, orange on hover. o3-theme has them at 15px / 500 / near-black, which competed with the top-level labels above them. */ .megamenu a { font-size: 14px; font-weight: 400; color: var(--bbb-text-muted); } /* The mock-up's column headings: navy, bold, uppercase-free, a size up from the links. */ .megamenu a.megamenu__grouptitle { font-size: 15px; font-weight: 800; color: var(--bbb-navy); } /* QM: heading 800, the level under it 700. With the hairlines gone the third level is what tells the eye where one branch stops and the next starts, so it carries the weight instead of a rule. Keyed to the data-level the recursive include already writes — the fourth level and below stay at the base 400. */ .megamenu a[data-level="is-level-3"] { font-weight: 700; } /* One colour per level, as specified: navy heading, then #191c1e / #121212 / #484848 going down. The base above stays for the panel's CMS-page links, which carry no data-level. #121212 is o3-theme's body colour and #484848 is neither theme's — both are here on purpose, the ladder is meant to be read as a ladder. */ .megamenu a[data-level="is-level-3"] { color: var(--bbb-text); } .megamenu a[data-level="is-level-4"] { color: #121212; } .megamenu a[data-level="is-level-5"] { color: #484848; } /* Bestseller card — the mock-up's `.mh-mega-highlight`: ice-blue panel, 12px radius, the orange CTA. Fixed basis rather than a share of the panel so the category columns beside it keep their width whether a branch has two groups or eleven. The fill is the mock-up's exactly: ice at 50% with a solid ice hairline around it (shared-components.css:125), not the flat ice this used to paint. */ .megamenu__promo { flex: 0 0 280px; align-self: flex-start; padding: 1.5rem; border-radius: 0.75rem; background: rgba(225, 255, 255, 0.5); border: 1px solid var(--bbb-ice); } .megamenu__promo p { margin-bottom: 0.5rem; } /* Navy, not orange: the mock-up's label is `text-primary-brand` (html/index.html:323). The orange in that card belongs to the CTA alone. */ .megamenu__promo-label { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bbb-navy); } .megamenu__promo-title { font-weight: 700; color: var(--bbb-navy); } .megamenu__promo-text { font-size: 14px; color: var(--bbb-text-muted); } .megamenu a.megamenu__promo-btn { margin-top: 0.5rem; padding: 0.5rem 1rem; font-size: 14px; font-weight: 700; color: #fff; background: var(--bbb-orange); border-radius: 0.375rem; } .megamenu a.megamenu__promo-btn:hover { color: #fff; background: var(--bbb-orange-dark); } /* o3-theme's underline sweep is on every `.megamenu a`; on a solid button it draws a bar across the label. */ .megamenu__promo-btn::after { content: none; } .megamenu a.current, .megamenu a:focus-visible, .megamenu a:hover { color: var(--bbb-orange); } /* o3-theme's underline sweep is keyed to --bs-primary; kept as the affordance but recoloured, since the mock-up's only hover signal is the orange text. */ .megamenu a::after { background: var(--bbb-orange); } /* -------------------------------------------------------------------------- Below xl: one burger that collapses the nav IN PLACE (mock-up html/index.html, which is a plain `navbar-expand-lg`). The header row is logo + burger; the panel that drops out of it carries the category nav, then the search field, then the action icons. QM: "Mobil ganz andere Navigation. Andere Struktur und Aufbau, Bewegungen." This used to be a slide-in offcanvas holding a *second* copy of the navigation — different markup, different motion. Now there is one nav (widget/header/categorylist.tpl) and one search field, shown here and hidden at xl, and the offcanvas is gone from tpl/layout/header.tpl entirely. Scoped to :not(.is-minimal): the reduced checkout header renders no search and no nav at all, so hiding its actions there would leave a logo and no way to reach the basket or the account. -------------------------------------------------------------------------- */ .header__burger { display: none; color: var(--bbb-navy); background: transparent; border: 0; padding: 0.5rem; } .header__burger:hover { color: var(--bbb-orange); } @media (max-width: 1199.98px) { /* `:has(.header__mainnav)` throughout this block: the basket page keeps the full header class but renders no category nav at all, so there is nothing for the burger to collapse and nothing to hide the search and actions behind. Without the guard that page loses its basket and account icons on a phone, with a burger that does nothing. */ header:not(.is-minimal):has(.header__mainnav) .header__burger { display: flex; align-items: center; order: 4; margin-left: auto; } /* Search and actions ride along in the collapsed panel, so they are tied to the nav's state rather than hidden outright. `:has()` on `.show`, which is what Bootstrap's collapse toggles; during the open/close transition it also sets `.collapsing`, hence both. */ header:not(.is-minimal):has(.header__mainnav) .header__search { display: none; } /* The actions container is NOT hidden with `display: none`, it is collapsed to nothing. oxwMiniBasket renders `#offcanvas__basket` *inside* it, and that panel is what confirms an add-to-cart — QM: "Wenn man mobil etwas in den Warenkorb legt braucht man Popup, mit Info dass das Produkt in den Warenkorb gelegt wurde und Link zum Warenkorb". With the container display:none the panel got `.show` and Bootstrap laid its backdrop over the page, but the panel itself never painted: a phone tap on "In den Warenkorb" greyed the screen and showed nothing. `position: fixed` takes the panel out of this zero-size box, so it is unaffected. */ header:not(.is-minimal):has(.header__mainnav) .header__actions { display: block; flex: 0 0 0; width: 0; height: 0; padding: 0; } header:not(.is-minimal):has(.header__mainnav) .header__actions > :not(.offcanvas) { display: none; } /* The magnifier joins the account and basket glyphs on ONE row (Nick's photo: three icons). `flex: 0 0 auto` instead of the `1 1 100%` this had, so it no longer claims a row of its own; `.header__actions` below it sits on the same line and the container's own 15px gap is what separates the search glyph from the account one. Order 7/8 keeps the search first. */ header:not(.is-minimal):has(#header__mainnav.show) .header__search, header:not(.is-minimal):has(#header__mainnav.collapsing) .header__search { /* The actions' own `padding-bottom` is mirrored here, or the glyph sits 5px under their line: that padding is the menu's bottom spacing and it shortens the actions' content box to exactly icon height, so a sibling without it is centred against a taller box. Still `block` — as a flex parent the unclassed
    inside stops filling the width and the opened field ends 67px short of the row. */ display: block; padding-bottom: 1rem; order: 7; flex: 0 0 auto; margin: 0; } /* Opened, the field needs the width, so the search takes the whole row and the icons wrap under it. In flow, NOT the absolute strip the xl header uses: with the menu open this header is `overflow-y: auto` (it has to be, or a tall menu cannot be scrolled — see the note further down), and an absolutely positioned panel at `top: 100%` lands outside that box, i.e. reachable only by scrolling the header itself. */ header:not(.is-minimal):has(#header__mainnav.show) .header__search.is-open, header:not(.is-minimal):has(#header__mainnav.collapsing) .header__search.is-open { flex: 1 1 100%; margin-bottom: 1rem; } /* The glyph keeps its own width beside the field rather than being squeezed by it. */ header:not(.is-minimal) .header__search .input-group { flex-wrap: nowrap; gap: 0.75rem; } /* `flex: 1 1 auto`, not the `1 1 100%` this had: the two glyphs share the search's line and grow into whatever is left of it. No `gap` either — the row is three icons now, so the global `.header__actions { gap: 1rem }` and the container's own 15px lead-in put all three at the same distance from each other. */ header:not(.is-minimal):has(#header__mainnav.show) .header__actions, header:not(.is-minimal):has(#header__mainnav.collapsing) .header__actions { display: flex; order: 8; flex: 1 1 auto; width: auto; height: auto; justify-content: flex-start; padding-bottom: 1rem; } header:not(.is-minimal):has(#header__mainnav.show) .header__actions > :not(.offcanvas), header:not(.is-minimal):has(#header__mainnav.collapsing) .header__actions > :not(.offcanvas) { display: flex; } /* Open the nav, open a category, open a branch and the header is 1435px tall in an 844px window — and it is `position: sticky; top: 0`, so it pins at the viewport top at EVERY scroll position. The 590px below the fold could never be reached: scrolling moved the page behind the menu instead. So while the collapse is shown the header stops at the viewport and scrolls inside itself. A flat 100dvh, not 100dvh + the 36px the header is pinned above the fold from md up: that offset only exists once the page HAS been scrolled, so at the top of the document the extra 36px would hang below the fold — and `overscroll-behavior` means the page cannot be nudged down to reach it. Being 36px short when pinned costs a sliver of menu height; being 36px long costs reachability. Scoped to `.show`, not `.collapse`: Bootstrap adds the class only after its height transition finishes (and drops it before the closing one starts), so the animation still runs against an uncapped box. `contain` keeps the page behind still once the menu's own scroll runs out. */ header:not(.is-minimal):has(#header__mainnav.show) { max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; } /* The nav takes the full width of a row of its own under the logo. Bootstrap's `.collapse:not(.show) { display: none }` handles the closed state and animates the height, which is the motion the mock-up has. */ header:not(.is-minimal) .header__mainnav { order: 6; flex: 1 1 100%; margin: 0; border-top: 1px solid var(--bbb-border); } /* o3-theme's own inner `.navbar-collapse` is a Bootstrap collapse too, and its `navbar-expand-sm` only forces it open from 576px up — below that it would collapse the list inside the panel we just opened. Held open here; the outer collapse is the one that toggles. */ header:not(.is-minimal) .header__mainnav .navbar-collapse { display: block !important; } header:not(.is-minimal) .header__mainnav .navbar { padding: 0; } /* One item per line, full width, with the caret pushed to the far end — the mock-up's stacked list rather than the desktop row. */ header:not(.is-minimal) .header__mainnav .navbar-nav { flex-direction: column; align-items: stretch; gap: 0; } /* The mock-up's collapsed navbar: the caret sits right after the label (it is a Bootstrap `.dropdown-toggle::after`, which has nowhere else to go) and nothing rules the rows off from each other — the open panel's own card is what separates them. `0.5rem 1rem` is `.mh-nav-link`'s padding verbatim, so the labels start 16px in from the logo, as drawn. */ header:not(.is-minimal) .header__mainnav .navbar-nav > .nav-item > .nav-link { justify-content: flex-start; padding: 0.5rem 1rem; } /* The mega menu panel is an absolutely positioned, container-wide card at xl. In a stacked list it has to be an ordinary block that pushes the items below it down, or it would cover them — but it stays a CARD: below lg the mock-up gives `.mh-mega-menu` the ice-grey surface, a 0.5rem radius and 1.25rem of padding, in flow under the label it belongs to (shared-components.css:147). That grey is what tells you where one category's panel ends and the next label starts, now that the rows carry no rules. */ header:not(.is-minimal) .megamenu { position: static; width: auto; max-width: none; margin: 0.5rem 0 0.75rem; padding: 0; background: var(--bbb-surface-low); border-radius: 0.5rem; } header:not(.is-minimal) .megamenu::before, header:not(.is-minimal) .megamenu::after { content: none; } header:not(.is-minimal) .megamenu__inner { display: block; padding: 1.25rem; /* The accordion is in the page flow and scrolls with it — a scroll box inside a scroll box is the one thing worse than a long list on a phone. */ max-height: none; overflow: visible; } header:not(.is-minimal) .megamenu__groups { columns: 1; padding: 0; } /* QM: "Mobil auch. Da gibt es dann pfeile." — the full branch is in the markup here too, but a stacked list of every level at once is 60 rows on a phone. So every row that has children collapses behind its own arrow: label and arrow share a line, the sub-list gets a line of its own. Closed is the default; the desktop panel is unaffected (the arrow is display:none there and the lists are always open). */ header:not(.is-minimal) .megamenu__group, header:not(.is-minimal) .megamenu__branch { display: flex; flex-wrap: wrap; align-items: center; } header:not(.is-minimal) .megamenu__group > a, header:not(.is-minimal) .megamenu__branch > a { flex: 1 1 auto; } /* Designer: "Diese Schrift, Größe und Farbe" — pointing from our rows at the mock-up's "Heftmaschinen", which is `.small` + `.text-muted`, i.e. 14px/400 muted. The mock-up's panel has exactly two type styles, a heading and that item, so everything under the heading takes it and the desktop ladder (700, then #121212 -> #484848 by level) stops at xl. Five levels side by side need the ladder; a stacked accordion where one branch is open at a time has the indent and the arrow to say the same thing. */ header:not(.is-minimal) .megamenu a[data-level="is-level-3"], header:not(.is-minimal) .megamenu a[data-level="is-level-4"], header:not(.is-minimal) .megamenu a[data-level="is-level-5"] { font-size: 14px; font-weight: 400; color: var(--bbb-text-muted); } /* The rule above out-specifies the panel's own hover/current orange (0,3,2 against 0,2,1), so that one is restated here rather than lost in the accordion. */ header:not(.is-minimal) .megamenu a.current, header:not(.is-minimal) .megamenu a:focus-visible, header:not(.is-minimal) .megamenu a:hover { color: var(--bbb-orange); } /* The heading keeps the mock-up's rule, and the arrow takes the SAME padding and border so the line runs under it too, as drawn. It also fixes the alignment the designer marked ("Mittig"): `align-items: center` centred the arrow's box against a heading box that was taller by its padding + rule, which dropped the arrow ~7px. Stretched and padded alike, the arrow centres in the content box, i.e. on the heading's own line. The 4px top is o3-theme's `.megamenu a { padding: 4px 0 }`, matched so both start on the same line. */ header:not(.is-minimal) .megamenu__grouptitle { margin-bottom: 0; padding-bottom: 0.5rem; } header:not(.is-minimal) .megamenu__group > .megamenu__expand { align-self: stretch; height: auto; padding: 4px 0 0.5rem; border-bottom: 1px solid var(--bbb-border); } /* Closed, a group is one row and needs no more air than the next one; open, the mock-up sets 1.5rem between a category block and the one after it. */ header:not(.is-minimal) .megamenu__group, header:not(.is-minimal) .megamenu__branch { margin-bottom: 0.25rem; } header:not(.is-minimal) .megamenu__group.is-expanded { margin-bottom: 1.5rem; } header:not(.is-minimal) .megamenu__links .megamenu__links { margin: 0 0 0.5rem; } /* One pitch for every row in the accordion: a leaf is 28.3px of line box (14px x 1.45 plus o3-theme's 4px above and below) and a branch is the 32px arrow, so 4px on the leaf makes both 32. Without it the leaves — the rows with no arrow — got the most air of anything in the list. */ header:not(.is-minimal) .megamenu__links li:not(.megamenu__branch) { margin-bottom: 0.25rem; } /* The 40px square was a tap target inside a 63px row; at the mock-up's pitch it IS the row height, so it comes down to 32 — the button keeps its 40px width, so the target stays well past the 24px minimum. */ header:not(.is-minimal) .megamenu__expand { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.5rem; height: 2rem; padding: 0; border: 0; background: transparent; color: var(--bbb-navy); } header:not(.is-minimal) .megamenu__expand svg { transition: transform 0.15s ease-out; } header:not(.is-minimal) .is-expanded > .megamenu__expand svg { transform: rotate(90deg); } header:not(.is-minimal) .megamenu__group > .megamenu__links, header:not(.is-minimal) .megamenu__branch > .megamenu__links { flex: 1 1 100%; display: none; /* Every level indents one step here, including the third — the desktop panel keeps that one flush with its heading ("Bündig zu Neumaschinen") because the heading's weight and colour already say where the level break is, and with all five levels side by side a fourth indent would eat the column. Under the heading every row is the same 14px muted list item, so the indent is what is left carrying depth. */ padding-left: 0.9rem; } /* The mock-up's `mb-3` under the heading, minus the `pb-2` the heading already spends on its rule — the gap from heading text to first item comes out at the drawn 24px either way. */ header:not(.is-minimal) .megamenu__group > .megamenu__links { margin-top: 1rem; } header:not(.is-minimal) .is-expanded > .megamenu__links { display: block; } /* The mock-up carries the Bestseller card into the collapsed navbar too — it is the last `col-md-4` in the row, so below lg it lands full width at the foot of the panel. `flex` and `align-self` are what gave it a column of its own beside the categories at xl; in this block container both are inert, so only the gap above it has to be said. */ header:not(.is-minimal) .megamenu__promo { margin-top: 1.5rem; } /* Logo hard left, burger hard right. The logo's parent basis is a percentage in o3-theme (it shares the row with the actions there), which would leave the burger floating mid-row. */ header:not(.is-minimal) .header__logo { flex: 0 1 auto; } } /* From xl the nav is a normal flex item again. Out-specifies Bootstrap's `.collapse:not(.show) { display: none }` (0,2,0), so no !important is needed — and deliberately not `display: flex`, the row is built from its `nav` child. `:not(.is-minimal)`: with `blDisableNavBars` off the category tree IS rendered on the order steps, and an unscoped rule would show the nav on the minimal checkout header from xl up while the burger — which those pages do not render — is the only way to reach it below. */ @media (min-width: 1200px) { header:not(.is-minimal) .header__mainnav.collapse { display: block; } } /* Utility bar (mock-up html/index.html): phone and e-mail grouped to the right. (The language/currency pickers used to sit here too; removed in header.tpl — the shop is German and Euro only.) o3-theme marks it `d-none d-lg-flex`, so it vanishes below 992px; the mock-up shows it from md up (`d-none d-md-block`) and it is the only navy element on a tablet-width page — losing it there is what made the header read as a different design. Revealed from md here rather than by editing header.tpl. */ @media (min-width: 768px) { /* Parent sets `display: grid !important` from lg; this file loads after main.min.css, so the tie on `.header__topinfo` resolves here regardless of query order. 1.5rem is the mock-up's `gap-4` between the phone and e-mail groups. */ .header__topinfo { display: flex !important; justify-content: flex-end; gap: 1.5rem; } /* The phone group is `d-none d-lg-flex` inside the bar, so revealing only the bar itself at md would leave just the e-mail in it. */ .header__topinfo > .d-none { display: flex !important; } .header__topinfo > div:last-child { grid-column: auto; } /* header.tpl wraps the o3headerTopInfo CMS slot in .flex-grow-1, which would swallow all free space and re-scatter the three groups across the bar. */ .header__topinfo > .flex-grow-1 { flex-grow: 0 !important; justify-content: flex-end !important; } } /* One-row header (mock-up html/index.html): logo | nav | search | actions. o3-theme already lays the header out as a wrapping flex row and orders the parts with `order`; it only stacks them because .header__mainnav asks for `flex: 1 1 100%`. So this is a flex-basis and order change, not a rebuild — no header.tpl override. .header__topinfo keeps its 100% basis and therefore still forms its own row above. Gated at xl, not lg, and measured rather than guessed: the three top-level category labels come to ~600px, so logo + nav + search icon + actions + gaps need ~975px of container. lg (992px) leaves ~962px — it misses by a hair and the action icons drop to a second row, which is exactly what this looked like at ~990px. xl leaves ~1140px, ~165px of slack, enough to absorb a fourth top-level category before it gets tight again. Below xl the parent's stacked rows take over: the nav gets its own full-width row there, so it can never wrap, and the search keeps its own row too — which is why the magnifier toggle in search.tpl is d-xl-flex rather than d-lg-flex. ponytail: a media query has to guess at the nav's width; if the category count keeps changing, swap this for a container query on
    and drop the fixed breakpoint. */ @media (min-width: 1200px) { /* QM: "Abstände sind anders, hier geht die Navigation viel weiter" — the row stopped ~75px short of the container's right edge because nothing claimed the free space. The mock-up hangs it on the nav (`me-auto` on the