/*
* blechblaeser-2 — brand layer over stock APEX (Bootstrap 5). doc/13 Track C.
*
* Delivery trick (no template override needed): APEX's layout/base.html.twig loads
* `getResourceUrl('css/styles.min.css')`, and OXID resolves theme assets CHILD-FIRST (verified) —
* so this file shadows APEX's stylesheet. We @import APEX's compiled CSS first (relative to THIS
* file's URL, so its own url() refs still resolve), then layer the MSB brand on top. Scope is
* deliberately small: recolour + brand typeface + the few F7 overflow fixes. Goal is information
* parity, not a pixel rebuild.
*
* Brand identity (extracted from the historical out/blechblaeser/src/css/styles.css):
* primary #009EC0 (MSB cyan-blue) · accent #FC6621 (orange) · type Raleway
*
* Raleway is SELF-HOSTED (no Google-Fonts CDN — GDPR, doc/07). The variable woff2 (one file, all
* weights 100–900) is shipped under ../fonts/ — The League of Moveable Type, SIL OFL 1.1
* (../fonts/Raleway-OFL.md). @import must precede all other statements, so it stays first; the
* @font-face declarations follow it, then the brand overrides.
*/
@import url("../../../apex/src/css/styles.min.css");
@font-face {
font-family: "Raleway";
src: url("../fonts/Raleway-VF.woff2") format("woff2") tech("variations"),
url("../fonts/Raleway-VF.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Raleway";
src: url("../fonts/Raleway-Italic-VF.woff2") format("woff2") tech("variations"),
url("../fonts/Raleway-Italic-VF.woff2") format("woff2-variations");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
:root {
--msb-primary: #009EC0;
--msb-primary-dark: #007e9a;
--msb-primary-darker: #006379;
--msb-accent: #FC6621;
--bs-primary: var(--msb-primary);
--bs-primary-rgb: 0, 158, 192;
--bs-link-color: var(--msb-primary);
--bs-link-color-rgb: 0, 158, 192;
--bs-link-hover-color: var(--msb-primary-darker);
--bs-link-hover-color-rgb: 0, 99, 121;
--bs-body-font-family: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
}
/* APEX ships Oswald for headings; the historical theme used Raleway throughout. Keep one face. */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--bs-body-font-family);
}
.text-primary { color: var(--msb-primary) !important; }
.bg-primary { background-color: var(--msb-primary) !important; }
.border-primary { border-color: var(--msb-primary) !important; }
a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }
/* Buttons — BS5.2+ resolves colours via per-component --bs-btn-* vars. */
.btn-primary {
--bs-btn-bg: var(--msb-primary);
--bs-btn-border-color: var(--msb-primary);
--bs-btn-hover-bg: var(--msb-primary-dark);
--bs-btn-hover-border-color: var(--msb-primary-dark);
--bs-btn-active-bg: var(--msb-primary-darker);
--bs-btn-active-border-color: var(--msb-primary-darker);
--bs-btn-disabled-bg: var(--msb-primary);
--bs-btn-disabled-border-color: var(--msb-primary);
--bs-btn-focus-shadow-rgb: 0, 158, 192;
}
.btn-outline-primary {
--bs-btn-color: var(--msb-primary);
--bs-btn-border-color: var(--msb-primary);
--bs-btn-hover-bg: var(--msb-primary);
--bs-btn-hover-border-color: var(--msb-primary);
--bs-btn-active-bg: var(--msb-primary);
--bs-btn-active-border-color: var(--msb-primary);
--bs-btn-focus-shadow-rgb: 0, 158, 192;
}
/* Accent: secondary badges (cart / wishlist counters) pick up the brand orange. */
.badge.bg-secondary { background-color: var(--msb-accent) !important; }
/* Brand-coloured active indicator on the start-page hero. */
.promoslider .carousel-indicators [class].active { background-color: var(--msb-primary); }
/* --- F7: small layout niggles bare APEX surfaced (doc/12) --- */
.details-title, .product-title, .card-title,
h1#productTitle, .list-item .title {
overflow-wrap: anywhere;
word-break: break-word;
}
.vat-info-text, .price-tax-info, .text-tax { white-space: normal; }
/* --- Side breathing room on medium/large screens --------------------------------------------
* The whole site (header, nav, content, breadcrumbs, footer) wraps in `.container-xxl`. APEX ships
* it with only a ~5px side gutter (`--bs-gutter-x:.625rem`) and gives it NO max-width until APEX's
* own xxl breakpoint at 1700px (max-width 1620px) — so on 992–1700px viewports everything sits
* flush to the screen edges. `--msb-side-pad` is the single source of truth for the horizontal
* inset (base = APEX's own 5px gutter, growing on wider viewports); the carousel below reuses it
* so the products line up with the content. The inset starts at the lg breakpoint (992px), where
* the nav also switches from burger to the horizontal mega-nav; below that the tight gutter is
* left as-is (appropriate on small screens). Full-bleed shortcode teaser rows keep `padding:0` via
* their more specific `.dd-shortcode-*-row .container-xxl` rule, so they are unaffected. */
:root { --msb-side-pad: 0.3125rem; }
@media (min-width: 992px) { :root { --msb-side-pad: 2rem; } }
@media (min-width: 1400px) { :root { --msb-side-pad: 4rem; } }
.container-xxl { padding-left: var(--msb-side-pad); padding-right: var(--msb-side-pad); }
/* Front-page product carousels: APEX renders `.slider-container` (and its absolutely-positioned
* prev/next arrows) full-bleed to the viewport. Constrain them to the same content width as
* everything else. The inset is a horizontal MARGIN, not padding: `.slider-container` is an
* overflow-x scroller, so padding would inset only the first card while the scroll content still
* clips at the element's (full-viewport) edge — a margin makes the scroller box itself narrower,
* so both ends clip at the content boundary. The arrows are absolutely positioned within
* `.article-slider`, so pulling them in by the same amount lands them on that boundary. Scoped to
* `.article-slider` (our start-page wrapper), so the promoslider hero stays full-bleed and other
* list sliders are untouched. The slider's head is already a `.container-xxl`, so it lines up for
* free. */
.article-slider .slider-container {
margin-left: var(--msb-side-pad);
margin-right: var(--msb-side-pad);
padding-left: 0;
padding-right: 0;
}
.article-slider .slide-left { left: var(--msb-side-pad); }
.article-slider .slide-right { right: var(--msb-side-pad); }
/* At ≥1700px APEX caps `.container-xxl` at max-width 1620px and centres it, so the rest of the
* content stops growing. Match that for the carousel: cap the scroller at the same content width
* (1620 minus the two side insets), centre it, and place the arrows on that centred edge — so on
* large monitors the products don't run wider than everything else. */
@media (min-width: 1700px) {
.article-slider .slider-container {
max-width: calc(1620px - 2 * var(--msb-side-pad));
margin-left: auto;
margin-right: auto;
}
.article-slider .slide-left { left: calc((100% - 1620px) / 2 + var(--msb-side-pad)); }
.article-slider .slide-right { right: calc((100% - 1620px) / 2 + var(--msb-side-pad)); }
}
/* --- Front-page slider headings centred (matches the deployed shop) --------------------------
* The newest ("Frisch eingetroffen") / top / bargain sliders on the start page render their
* head + subhead via APEX's list-slider widget as an +
inside a `.container-xxl`. Centre
* them — start page ONLY (`body.cl-start`); the same widget is reused, left-aligned, for
* cross-selling on detail/cart pages, so this must not leak there.
*/
body.cl-start .article-slider > .container-xxl > h2,
body.cl-start .article-slider > .container-xxl > p {
text-align: center;
}
/* --- Category tiles on list pages: card layout (page/list/list.html.twig override) -----------
* Supersedes the doc/22 N3 CSS-only `.cat-list` grid. The override emits `.cat-cards` cards
* instead of APEX's round-avatar strip: a centred title block (icon + category name as a
* heading) over a list of that category's own subcategories. Bootstrap col-* classes in the
* template handle the grid + responsiveness (incl. one column on phones), so this is only the
* look. The SAME template renders every category-list level, so these cards recur down the tree
* (Instrumente → Trompete → …) until the subcategories are leaves and the card is title-only.
*/
.cat-card {
border: 1px solid #dee2e6;
border-radius: 0.25rem;
overflow: hidden;
background: #fff;
}
.cat-card-head {
display: block;
padding: 1rem 0.75rem;
text-align: center;
text-decoration: none;
color: inherit;
border-bottom: 1px solid #dee2e6;
}
/* leaf card (no subcategory list): the head is the whole card, so drop its divider. */
.cat-card-head:last-child { border-bottom: 0; }
.cat-card-head:hover .cat-card-title,
.cat-card-head:focus .cat-card-title { color: var(--msb-primary); }
.cat-card-img {
display: block;
max-width: 100%;
height: auto;
max-height: 140px;
margin: 0 auto 0.75rem;
object-fit: contain;
}
/* Category name printed in an
style, capped so long deep-level names stay readable in the
* card grid. */
.cat-card-title {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
overflow-wrap: anywhere;
}
.cat-card-list {
margin: 0;
padding: 0.25rem 0;
}
.cat-card-list li { margin: 0; }
.cat-card-list a {
display: block;
padding: 0.4rem 1rem;
text-decoration: none;
border-bottom: 1px solid #f0f2f4;
}
.cat-card-list li:last-child a { border-bottom: 0; }
.cat-card-list a:hover,
.cat-card-list a:focus { background: #f6f8f9; }
/* --- N2: the main-nav dropdown (doc/22 M5) ---------------------------------
* The nav shows the top level plus ONE level of subcategories, matching the deployed shop
* (see the template override widget/header/categorylist.html.twig for why the deeper levels
* are cut from the markup rather than hidden here).
*
* What is left to CSS is the shape of the panel. APEX styles `.nav-level-2` as a FULL-BLEED
* mega-menu bar (`position:absolute; left:0; right:0`) spanning the viewport, which is sized for
* a three-column layout with a promo slot beside the list. This shop's dropdowns hold 1–10
* items and have no promo slot, so a full-width white band would be mostly empty. The deployed
* shop uses a narrow panel anchored under its parent item; that is what these rules produce.
*
* lg+ only: below that breakpoint APEX renders the level as an indented inline list in the
* burger menu (its `position:absolute` rule is itself lg-and-up), and that behaviour is right —
* 5 top-level + 18 children reads fine as a flat list. */
@media (min-width: 992px) {
/* Give the panel a containing block so it anchors to its own nav item instead of the bar. */
#mainnav .navbar-nav-mega .nav-item.has-subs { position: relative; }
#mainnav .navbar-nav-mega .nav-level-2 {
top: 100%;
left: 0;
right: auto; /* undo APEX's full-bleed stretch */
min-width: 14rem;
padding: 0.5rem 0;
border: 1px solid #dee2e6;
border-radius: 0 0 0.25rem 0.25rem;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.15);
}
/* APEX's mega-menu item spacing assumes a wide multi-column panel. */
#mainnav .navbar-nav-mega .nav-level-2 .nav-item-2 .nav-link {
padding: 0.35rem 1rem;
white-space: nowrap;
}
}
/* ---------------------------------------------------------------------------
* Language/currency trigger: a readable label beside the globe.
* Client, 2026-07-28 check-in item (b); workspace doc/00 P1.
*
* The markup half is in views/tpl/layout/header.html.twig, which explains why the outer globe
* button — not the language widget inside the dropdown — was the unclear part. This is only the
* type treatment: APEX's `.dropdowns .btn` is sized for an icon alone, so an unstyled abbreviation
* sits too large and too far from the glyph.
* ------------------------------------------------------------------------- */
.header .dropdowns .btn .lang-abbr {
margin-left: 0.3rem;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.02em;
vertical-align: middle;
}
/* The label follows the globe's colours exactly. APEX colours the glyph through `fill` only
* (`.meta svg` white, `#487c84` on hover/focus/open), so text beside it got the button's own
* colours instead: black at rest, white on hover — the inverse of the glyph. Same selectors as
* APEX's glyph rules, so the two can never disagree about which state the button is in. */
.meta .btn .lang-abbr {
color: #fff;
}
.meta .btn:hover .lang-abbr,
.meta .btn:focus .lang-abbr,
.meta .btn.show .lang-abbr {
color: #487c84;
}