/* ==========================================================================
   bmb: bmb-home.css — Startseiten-Styles fuer den TPL-Umbau (ersetzt OPC).
   Komplett gescoped unter .bmb-home / .bmb-topbar — kein Bleed auf andere
   Seiten, obwohl die Datei global ins admorris.css-Bundle gemerged wird
   (JTL 5.2.4 kennt kein PageType-CSS, siehe CLAUDE.md/Plan).
   Mobil-Layout < 992px (PDF-Mockup), Desktop-Layout >= 992px (Ist-Stand).
   ========================================================================== */

/* --------------------------------------------------------------------------
   bmb: 1. Design-Tokens — Markenfarben aus bilder/intern/shoplogo/logo.svg
   (#0074A3 Blau, #F5A700 Blitz-Gelb) + xplugin_admorris_pro_theme (custom).
   -------------------------------------------------------------------------- */
.bmb-home,
.bmb-topbar {
    --bmb-blue: #0074a3;
    --bmb-blue-dark: #00567a;
    --bmb-ink: #06354b;            /* bmb: tiefes Blau-Schwarz fuer Headlines */
    --bmb-accent: #f5a700;         /* bmb: Blitz-Gelb (Logo) fuer CTAs */
    --bmb-accent-dark: #d99300;
    --bmb-text: rgba(0, 0, 0, 0.82);
    --bmb-muted: #5d6b75;
    --bmb-bg-soft: #f3f7fa;        /* bmb: blaustichiges Hellgrau fuer Section-Wechsel */
    --bmb-line: #e3ebf1;
    --bmb-radius-lg: 16px;
    --bmb-radius: 12px;
    --bmb-radius-sm: 8px;
    --bmb-shadow: 0 2px 10px rgba(2, 62, 89, 0.08);
    --bmb-shadow-hover: 0 14px 30px rgba(2, 62, 89, 0.16);
    --bmb-section-y: clamp(2.25rem, 5vw, 4.25rem);
}

/* --------------------------------------------------------------------------
   bmb: 2. Basis — Section-Rhythmus, Full-Bleed-Helper, Headlines, Buttons
   -------------------------------------------------------------------------- */
.bmb-home {
    display: block;
    color: var(--bmb-text);
}

/* bmb: Full-Bleed-Ausbruch aus dem Bootstrap-Container (ATE-Muster);
   der overflow-x-Guard liegt als Critical-Inline-CSS im TPL. */
.bmb-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.bmb-section {
    padding: var(--bmb-section-y) 0;
}

/* bmb: Section-Headline mit angeschraegtem Blitz-Akzent (Markenmotiv) —
   ersetzt die alten OPC-Divider ("Top Angebote", "Ideale Bueromoebel ...") */
.bmb-section__title {
    margin: 0 0 0.5em;
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--bmb-ink);
    text-align: center;
}
.bmb-section__title::after {
    content: "";
    display: block;
    width: 52px;
    height: 5px;
    margin: 0.45em auto 0;
    background: var(--bmb-accent);
    transform: skewX(-18deg);
    border-radius: 2px;
}

/* bmb: Akzent-CTA (Blitz-Gelb) — bewusst eigenstaendig neben .btn-primary (blau) */
.bmb-btn--accent {
    display: inline-block;
    padding: 0.8em 2.1em;
    border: 0;
    border-radius: 999px;
    background: var(--bmb-accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(245, 167, 0, 0.38);
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.bmb-btn--accent:hover,
.bmb-btn--accent:focus {
    background: var(--bmb-accent-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(217, 147, 0, 0.42);
}

/* bmb: Inline-SVG-Icons (neue Sektionen nutzen SVG statt FA4/FA5-Mix) */
.bmb-icon {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
    vertical-align: -0.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   bmb: 3. Ueber-Header (nur mobil, PDF-Mockup) — 3 Pills:
   Oeffnungszeiten | Hotline | CTA "Angebot anfragen"
   -------------------------------------------------------------------------- */
.bmb-topbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    /* bmb: Topbar bricht selbst full-bleed aus dem Container aus */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 10px 12px;
    background: var(--bmb-bg-soft);
    border-bottom: 1px solid var(--bmb-line);
}
.bmb-topbar__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1.5px solid var(--bmb-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--bmb-blue);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}
.bmb-topbar__pill:hover,
.bmb-topbar__pill:focus {
    color: var(--bmb-blue-dark);
    border-color: var(--bmb-blue-dark);
    text-decoration: none;
}
/* bmb: CTA-Pill gefuellt in Blitz-Gelb (PDF: oranger Button) */
.bmb-topbar__pill--cta {
    border-color: var(--bmb-accent);
    background: var(--bmb-accent);
    color: #fff;
    box-shadow: 0 3px 10px rgba(245, 167, 0, 0.35);
}
.bmb-topbar__pill--cta:hover,
.bmb-topbar__pill--cta:focus {
    border-color: var(--bmb-accent-dark);
    background: var(--bmb-accent-dark);
    color: #fff;
}

/* --------------------------------------------------------------------------
   bmb: 4. Hero — mobil Text-Hero (PDF), desktop 9-Slide-Slick-Slider
   -------------------------------------------------------------------------- */
.bmb-hero {
    position: relative;
}

/* bmb: Mobil — Hero selbst traegt den Verlauf (full-bleed), damit die H1
   (liegt ausserhalb von .bmb-hero__mobile, s. TPL) mit im Farbband sitzt */
@media (max-width: 991px) {
    .bmb-hero {
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding: clamp(2rem, 7vw, 3rem) 16px 1.75rem;
        text-align: center;
        /* bmb: sanfter Verlauf statt hartem Weiss — Atmosphaere ohne Bild */
        background:
            radial-gradient(ellipse 120% 80% at 50% -20%, rgba(0, 116, 163, 0.10), transparent 60%),
            linear-gradient(180deg, #fff 0%, var(--bmb-bg-soft) 100%);
    }
}
.bmb-hero__title {
    margin: 0 auto 0.5em;
    max-width: 22ch;
    font-size: clamp(1.65rem, 6.5vw, 2.3rem);
    font-weight: 800;
    line-height: 1.18;
    color: var(--bmb-blue);
}
.bmb-hero__sub {
    margin: 0 auto 1.4em;
    max-width: 38ch;
    font-size: 1rem;
    color: var(--bmb-muted);
}
.bmb-hero__exp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 1.3em 0 1.1em;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bmb-ink);
}
.bmb-hero__exp .bmb-icon {
    color: var(--bmb-accent);
}
.bmb-hero__badges {
    display: flex;
    justify-content: center;
    gap: clamp(14px, 6vw, 36px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.bmb-hero__badges li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bmb-muted);
    max-width: 86px;
    text-align: center;
}
.bmb-hero__badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    color: var(--bmb-blue);
    box-shadow: var(--bmb-shadow);
}
.bmb-hero__badge-icon .bmb-icon {
    width: 22px;
    height: 22px;
}

/* bmb: Desktop-Hero-Slider — Nachbau des OPC-nivoSliders mit Slick,
   1920x400-Slides, Kategorie-Links 1:1. aspect-ratio gegen CLS. */
.bmb-hero__slider {
    padding: clamp(1.25rem, 2.5vw, 2.25rem) 0 0;
}
/* bmb: position:relative als Anker fuer die absoluten Arrows; KEIN overflow
   hier (sonst werden die unter dem Bild stehenden Dots geclippt) */
.bmb-hero-slick {
    position: relative;
}
/* bmb: Rundung/Clip/Schatten auf die slick-list (= reine Bildflaeche),
   damit die Dots darunter frei stehen koennen */
.bmb-hero-slick .slick-list {
    border-radius: var(--bmb-radius-lg, 16px);
    overflow: hidden;
    box-shadow: var(--bmb-shadow);
    line-height: 0;          /* bmb: killt den ~6px Baseline-Sliver unter dem Bild */
}
.bmb-hero-slick .slick-track {
    line-height: 0;
}
.bmb-hero-slick__slide,
.bmb-hero-slick__slide picture {
    display: block;
}
.bmb-hero-slick__slide img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 400;   /* bmb: reserviert Hoehe vor Slick-Init (CLS) */
    object-fit: cover;
    transition: transform 0.45s ease, filter 0.3s ease;
}
/* bmb: dezenter Hover — leichtes Zoomen + minimale Abdunklung (klickbar-Signal,
   kein Weiss, kein Text). Zoom bleibt im runden Rahmen (.slick-list clippt). */
.bmb-hero-slick__slide:hover img {
    transform: scale(1.04);
    filter: brightness(0.93);
}
/* bmb: Parent-Theme fadet ALLE Links per a:hover:not(.btn){opacity:0.7} — dadurch
   wurde das Hero-Bild beim Hovern "weiss" (Seitenhintergrund schien durch). Hier mit
   hoeherer Spezifitaet (0,3,0 > Parent 0,2,1) auf volle Deckkraft zurueckholen. */
.bmb-hero-slick .bmb-hero-slick__slide:hover {
    opacity: 1;
}
/* bmb: vor Slick-Init nur ersten Slide zeigen (kein Slide-Stapel-Flash) */
.bmb-hero-slick:not(.slick-initialized) .bmb-hero-slick__slide:not(:first-child) {
    display: none;
}
/* bmb: Slick-Dots — via appendDots UNTER das Bild (.bmb-hero__dots),
   weil die Marketing-Banner eingebackene Textbalken am unteren Rand haben */
.bmb-hero__dots {
    display: flex;
    justify-content: center;
    margin-top: 18px;          /* bmb: etwas mehr Luft zwischen Bild und Dots */
}
.bmb-hero__dots .slick-dots {
    position: static;
    display: flex;
    justify-content: center;
    gap: 6px;                  /* bmb: enger gesetzt — wirkt ruhiger als 8px */
    margin: 0;
    padding: 0;
    list-style: none;
}
.bmb-hero__dots .slick-dots li {
    margin: 0;
    line-height: 0;
}
/* bmb: schlanke Striche statt breiter Balken — feiner & dezenter */
.bmb-hero__dots .slick-dots button {
    display: block;
    width: 16px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--bmb-line);
    font-size: 0;
    cursor: pointer;
    transition: background 0.18s ease, width 0.18s ease;
}
/* bmb: Parent zeichnet zusaetzlich einen FA-Kreis (button:before content:'\f111')
   -> doppelte Punktreihe unter den Strichen. Hier ausblenden. */
.bmb-hero__dots .slick-dots button:before {
    display: none;
    content: none;
}
.bmb-hero__dots .slick-dots li:hover button {
    background: #c5d3dd;
}
.bmb-hero__dots .slick-dots li.slick-active button {
    width: 22px;
    background: var(--bmb-accent);
}
/* bmb: runde Arrow-Buttons (Markup kommt aus $.evo.options.sliderArrows);
   relativ zu .bmb-hero-slick zentriert = exakt auf der Bildmitte, da die
   Dots ausserhalb (.bmb-hero__dots) liegen */
.bmb-hero-slick .slick-prev,
.bmb-hero-slick .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: var(--bmb-ink);
    box-shadow: var(--bmb-shadow);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.bmb-hero-slick .slick-prev { left: 18px; }
.bmb-hero-slick .slick-next { right: 18px; }
/* bmb: Parent-theme.css erzwingt auf .slick-*__custom-icon svg ein
   fill: rgba(0,0,0,.25) !important — hier mit hoeherer Spezifitaet
   zurueckholen, damit Button-color (inkl. Hover-Weiss) wieder greift */
.bmb-hero-slick .slick-prev svg,
.bmb-hero-slick .slick-next svg {
    fill: currentColor !important;
}
.bmb-hero-slick .slick-prev:hover,
.bmb-hero-slick .slick-next:hover {
    background: var(--bmb-blue);
    color: #fff;
    transform: translateY(-50%) scale(1.08);
}

/* --------------------------------------------------------------------------
   bmb: 5. Produkt-Slider — Karten-Modernisierung rein per Scoping
   (Markup bleibt snippets/product_slider.tpl + item_slider.tpl)
   -------------------------------------------------------------------------- */
.bmb-home .product-slider {
    margin-top: 0;
}
/* bmb: Slider-Heading sichtbar machen — Parent-theme.css versteckt es
   (.product-slider--start .product-slider__heading{display:none}); hier mit
   gleicher/hoeherer Spezifitaet + spaeterer Cascade zurueckholen, damit die
   Section-Titel ("Top-Angebot"/"Unsere Bestseller") modern strukturiert sind. */
.bmb-products .product-slider--start .product-slider__heading,
.bmb-products .product-slider__heading {
    display: block;
    text-align: left;              /* bmb: Titelzeile linksbuendig (ueberschreibt text-center) */
    margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.bmb-home .product-slider__title {
    position: relative;
    display: inline-block;
    color: var(--bmb-ink);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
    line-height: 1.25;
    text-align: left;
}
/* bmb: kurzer Akzent-Strich direkt unter dem Titel-Text (Titel ist inline-block,
   width:100% = Titel-Textbreite) — bewusst kleiner als voll-breit, groesser als der
   alte 52px-Nub */
.bmb-products .product-slider--centered .product-slider__title::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    margin-top: 8px;
    background: var(--bmb-accent);
    border-radius: 2px;
}

/* bmb: ===== Gleiche Card-Hoehe (Slick-Equal-Height-Muster) =====
   DOM-Kette (verifiziert): .slick-track > .slick-slide > div > article.product-wrapper
   > .product-cell.thumbnail. Jede Ebene muss die Hoehe durchreichen, damit die
   Karte die hoechste der Reihe annimmt. Strikt unter .bmb-products gescoped. */
/* bmb: Hover-Schatten nicht abschneiden, ohne Slick-Geometrie zu aendern.
   - overflow-y: visible -> Schatten oben/UNTEN (0 14px 30px reicht ~44px runter) frei,
     vertikal gibt es keine Nachbar-Slides, also nichts Unerwuenschtes sichtbar.
   - overflow-x: clip + clip-margin 10px -> horizontaler Schatten-Spielraum, aber die
     Klon-Karte (endet exakt 10px ausserhalb der Kante) scheint NICHT durch. */
.bmb-products .evo-slider .slick-list {
    overflow: clip visible;
    overflow-clip-margin: 10px;
}
.bmb-products .slick-track {
    display: flex;
    align-items: stretch;
}
.bmb-products .slick-slide {
    height: auto;
}
.bmb-products .slick-slide > div {
    display: flex;
    height: 100%;
}
.bmb-products .slick-slide .product-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}
.bmb-products .product-cell.thumbnail {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--bmb-line);
    border-radius: var(--bmb-radius);
    background: #fff;
    box-shadow: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
/* bmb: kompakterer Hover-Schatten (statt var(--bmb-shadow-hover) = 0 14px 30px), damit
   er bei den Rand-Karten in den verfuegbaren Aussenraum (~20px = 10px Slide-Einzug +
   10px clip-margin) passt -> keine gekappte Schattenseite links/rechts, kein
   Klon-Durchscheinen. Variable bleibt unveraendert (Hero-Arrows/Tiles nutzen sie). */
.bmb-products .product-cell.thumbnail:hover {
    border-color: transparent;
    box-shadow: 0 10px 18px rgba(2, 62, 89, 0.18);
    transform: translateY(-4px);
}

/* bmb: einheitliche, quadratische Bildflaeche — Produktfotos vollstaendig
   (contain, kein Crop) auf Weiss, gleiche Hoehe in allen Karten */
.bmb-products .image-link-wrapper {
    margin-bottom: 12px;
}
.bmb-products .image-wrapper {
    position: relative;          /* bmb: Anker fuer das Rabatt-Badge (oben links) */
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: var(--bmb-radius-sm);
    background: #fff;
}
/* bmb: Rabatt-Badge "-X%" — Markup kommt aus dem Child-Override
   productlist/item_slider.tpl (Quelle: Preise->discountPercentage). Standard aus;
   nur auf der Startseite (.bmb-products) sichtbar/positioniert. */
.product-cell .bmb-card__discount {
    display: none;
}
.bmb-products .product-cell .bmb-card__discount {
    display: inline-flex;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bmb-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    box-shadow: var(--bmb-shadow);
}
.bmb-products .image-wrapper img,
.bmb-products .image-wrapper picture {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* bmb: Caption als Flex-Spalte — Titel oben (2 Zeilen geklemmt), Preis unten.
   padding:0 kappt das ~54px Parent-Padding (.product-cell__caption{padding:1.692rem
   1.154rem}) — Hauptgrund fuer die zu hohen Karten; der Karten-Inset kommt weiter
   vom .product-cell-Padding (12px). */
.bmb-products .product-cell__caption {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 0;
}
.bmb-products .product-cell__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;          /* bmb: reserviert 2 Zeilen -> kein Hoehen-Jitter */
    line-height: 1.3;
    font-size: 0.95rem;
    font-weight: 600;
}
.bmb-products .product-cell__title a {
    color: var(--bmb-ink);
}
.bmb-products .product-cell__title a:hover {
    color: var(--bmb-blue);
}
/* bmb: Preisblock (letztes Caption-Kind) an den Karten-Boden druecken */
.bmb-products .product-cell__caption > div:last-child {
    margin-top: auto;
    padding-top: 8px;
}

/* bmb: Slider-Preis dezenter — Markenorange bleibt, aber kleiner & leichter
   (Parent: .product-cell__price-wrapper .price{color:#F6A800;font-size:1.8rem;
   font-weight:500/bold} -> wirkte "viel zu dick"). Spezifitaet 0,3,0 schlaegt 0,2,0. */
.bmb-products .product-cell__price-wrapper .price {
    color: var(--bmb-accent);   /* #f5a700 — Markenorange */
    font-size: 1.2rem;
    font-weight: 600;
}
.bmb-products .product-cell__price-wrapper {
    margin-top: 6px;
    margin-bottom: 0;
}
/* bmb: NUR bei reduzierten Artikeln (mit altem Preis) den alten Preis ueber den
   aktuellen heben. Nicht-Angebote behalten ihr inline "ab 156,00 €" (kein Umbruch
   des "ab"-Labels). :has() ist im Shop bereits in Gebrauch (Critical-Inline-CSS
   in page/index.tpl). Ganze "Alter Preis: …"-Zeile durchgestrichen (s.u.). */
.bmb-products .product-cell__price-wrapper:has(.old-price) {
    display: flex;
    flex-direction: column;
}
.bmb-products .product-cell__price-wrapper:has(.old-price) .price-note {
    order: -1;
    margin: 0 0 2px;
}
.bmb-products .old-price small,
.bmb-products .instead-of small {
    text-decoration: line-through;
    color: var(--bmb-muted);
    font-size: 0.8rem;
}

/* bmb: Produkt-Slider-Pfeile "wie Shopify" — je ein runder Button links/rechts,
   vertikal mittig (~auf Bildhoehe, da .evo-slider nur die Kartenflaeche umfasst).
   Ersetzt die vom Parent oben-rechts gestapelten Arrows
   (.slick-prev{right:50px} .slick-next{right:0} top:-10px). Look = Hero-Arrows. */
.bmb-products .evo-slider {
    position: relative;
}
.bmb-products .evo-slider .slick-prev,
.bmb-products .evo-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.97);
    color: var(--bmb-ink);
    box-shadow: var(--bmb-shadow);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.bmb-products .evo-slider .slick-prev { left: -8px; right: auto; }
.bmb-products .evo-slider .slick-next { right: -8px; left: auto; }
/* bmb: Parent grayt die Pfeil-SVGs (fill:rgba(0,0,0,.25)!important) — zurueckholen */
.bmb-products .evo-slider .slick-prev svg,
.bmb-products .evo-slider .slick-next svg {
    fill: currentColor !important;
}
.bmb-products .evo-slider .slick-prev:hover,
.bmb-products .evo-slider .slick-next:hover {
    background: var(--bmb-blue);
    color: #fff;
    box-shadow: var(--bmb-shadow-hover);
    transform: translateY(-50%) scale(1.06);
}
.bmb-products .evo-slider .slick-prev.slick-disabled,
.bmb-products .evo-slider .slick-next.slick-disabled {
    opacity: 0;
    pointer-events: none;
}

/* bmb: "Alle anzeigen" als dezenter Text-Link mit Pfeil (kein Pillen-Button mehr),
   links unter den Produkten; mehr Luft zwischen Produkten und Link */
.bmb-products .product-slider__more {
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    text-align: left;
}
.bmb-home .product-slider__more-button.btn-primary {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--bmb-blue);
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.18s ease;
}
.bmb-home .product-slider__more-button.btn-primary::after {
    content: " →";
    margin-left: 4px;
    transition: transform 0.18s ease;
}
.bmb-home .product-slider__more-button.btn-primary:hover,
.bmb-home .product-slider__more-button.btn-primary:focus {
    background: transparent;
    color: var(--bmb-blue-dark);
    text-decoration: underline;
}
.bmb-home .product-slider__more-button.btn-primary:hover::after {
    transform: translateX(3px);
}

/* bmb: Sektions-Wrapper der Slider — Top-Produkte weiss, Rest soft im Wechsel */
.bmb-products {
    padding-top: var(--bmb-section-y);
}
/* bmb: Abstand zwischen den Slider-Boxen (= "Alle anzeigen"-Link -> naechste
   Ueberschrift). WICHTIG: jeder .product-slider ist einziges Kind seiner
   .bmb-products__box, also immer :last-child — Margin am .product-slider faellt
   dadurch stets auf 0. Der Abstand muss daher an der Box .bmb-products__box haengen. */
.bmb-products .bmb-products__box {
    margin-bottom: calc(var(--bmb-section-y) + 1.5rem);
}
.bmb-products .bmb-products__box:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   bmb: 6. Top-Kategorien (nur mobil, PDF) — 2x2-Icon-Grid
   -------------------------------------------------------------------------- */
.bmb-cats {
    background: var(--bmb-bg-soft);
}
.bmb-cats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 460px;
    margin: 0 auto;
    padding: 0 16px;
    list-style: none;
}
.bmb-cats__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 10px 16px;
    border-radius: var(--bmb-radius);
    background: #fff;
    color: var(--bmb-ink);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    box-shadow: var(--bmb-shadow);
    transition: box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease;
}
.bmb-cats__tile:hover,
.bmb-cats__tile:focus {
    color: var(--bmb-blue);
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: var(--bmb-shadow-hover);
}
.bmb-cats__tile .bmb-icon {
    width: 34px;
    height: 34px;
    color: var(--bmb-blue);
    stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   bmb: 7. SEO-Text "Reason to believe" — desktop 2-spaltig (wie OPC-Row 6+6),
   mobil geklemmt mit "Mehr lesen"-Toggle (PDF: kurzer Text + Pfeil)
   -------------------------------------------------------------------------- */
.bmb-seo {
    background: var(--bmb-bg-soft);
}
.bmb-seo__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}
.bmb-seo__cols {
    text-align: justify;   /* bmb: wie alte OPC-Klasse text-justify */
    font-size: 0.95rem;
    line-height: 1.7;
}
.bmb-seo__cols h3 {
    margin: 1.4em 0 0.5em;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bmb-ink);
    text-align: left;
}
.bmb-seo__cols a {
    color: var(--bmb-blue);
    font-weight: 600;
}
/* bmb: Mobil — Text einklappen, Verlaufs-Fade + Toggle-Button.
   Collapse-Styles bewusst NUR < 992px — desktop ist der Text immer voll. */
@media (max-width: 991px) {
    .bmb-seo__cols.bmb-is-collapsed {
        position: relative;
        max-height: 17rem;
        overflow: hidden;
    }
    .bmb-seo__cols.bmb-is-collapsed::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 5.5rem;
        background: linear-gradient(180deg, rgba(243, 247, 250, 0), var(--bmb-bg-soft) 85%);
    }
}
.bmb-seo__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0.75rem auto 0;
    padding: 8px 22px;
    border: 1.5px solid var(--bmb-blue);
    border-radius: 999px;
    background: #fff;
    color: var(--bmb-blue);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
/* bmb: Button zentrieren (inline-flex in zentriertem Block-Kontext) */
.bmb-seo__inner {
    text-align: center;
}
.bmb-seo__inner .bmb-seo__cols {
    text-align: justify;
}
.bmb-seo__more .bmb-icon {
    transition: transform 0.2s ease;
}
.bmb-seo__more[aria-expanded="true"] .bmb-icon {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   bmb: 8. Trust-Sektion — Hintergrundbild (alter OPC-Container pexels) +
   3 Cards (Icons + Captions 1:1 aus OPC), modernisiert als helle Karten
   -------------------------------------------------------------------------- */
.bmb-trust {
    position: relative;
    padding: var(--bmb-section-y) 16px;
    background:
        linear-gradient(180deg, rgba(4, 56, 80, 0.82), rgba(4, 56, 80, 0.66)),
        var(--bmb-trust-bg, var(--bmb-blue-dark)) center / cover no-repeat;
}
.bmb-trust__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 1000px;
    margin: 0 auto;
}
/* bmb: weisse Tiles auf dem dunklen Foto — Box voll-deckend #fff (statt 0.94), damit der
   weisse Bild-Hintergrund nahtlos in die Box uebergeht (kein Durchschimmern) */
.bmb-trust__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--bmb-radius);
    background: #fff;
    box-shadow: 0 8px 24px rgba(2, 40, 58, 0.25);
}
.bmb-trust__card img {
    width: 56px;
    height: auto;
    flex: 0 0 auto;
}
.bmb-trust__card p {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bmb-ink);
}

/* --------------------------------------------------------------------------
   bmb: 9. Responsive-Verteilung — Mobil-Layout < 992px, Desktop >= 992px
   (bewusst eigene Media-Queries statt der BS3-visible-/hidden-Utilities)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    /* bmb: Desktop-only-Bloecke mobil aus (Hero-Slider + uebrige Slider) */
    .bmb-only-desktop {
        display: none !important;
    }
    /* bmb: grosses Trust-Banner mobil aus — die 3 Trust-Items stehen mobil bereits als
       Hero-Badges (= Trust-Elemente im PDF-Header); PDF zeigt das Banner mobil nicht. */
    .bmb-trust {
        display: none;
    }
    /* bmb: Abstaende mobil straffen — Desktop-Werte erzeugen hier Riesenluecken. */
    .bmb-home {
        --bmb-section-y: 1.5rem;
    }
    .bmb-products .bmb-products__box {
        margin-bottom: 1rem;
    }
}

/* bmb: Tablet (560–991px) — das Mobil-Layout laeuft hier auf breiter Flaeche; zwei
   Stellen nutzen die Breite sonst schlecht. */
@media (min-width: 560px) and (max-width: 991px) {
    /* Top-Kategorien als 4er-Reihe (wie PDF) statt 460px-zentriertem 2x2 mit
       Riesen-Seitenraendern; 820px-Cap, damit es bei 991px nicht zu weit auseinanderzieht */
    .bmb-cats__grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 820px;
        gap: 14px;
    }
    /* SEO-Text auf lesbare Zeilenlaenge begrenzen (statt fast volle Tablet-Breite) */
    .bmb-seo__inner {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    /* bmb: Mobil-only-Bloecke (Topbar, Text-Hero, Kategorien) desktop aus */
    .bmb-only-mobile {
        display: none !important;
    }
    /* bmb: H1 bleibt im DOM (SEO — Desktop hatte bisher gar keine H1),
       wird aber visuell versteckt, weil der Slider den Hero stellt */
    .bmb-hero__title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
        border: 0;
    }
    /* bmb: Trust ueber die volle Inhaltsbreite (wie Produkte/SEO): Sektion 50px
       Seiten-Padding + Grid max-width 1680 -> min(100vw - 100px, 1680px) */
    .bmb-trust {
        padding-left: 50px;
        padding-right: 50px;
    }
    .bmb-trust__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        max-width: 1680px;
    }
    .bmb-trust__card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 26px 20px;
    }
    .bmb-trust__card img {
        width: 72px;
    }
    /* bmb: SEO-Text desktop 2-spaltig wie alte OPC-Row (6+6) */
    .bmb-seo__cols {
        column-count: 2;
        column-gap: 48px;
    }
    .bmb-seo__cols > div {
        break-inside: avoid-column;
    }
    /* bmb: SEO-Inhalt auf Produkt-/Container-Breite (vorher fix 1100px -> schmaler als
       die Produkte). Container ist fluid: Produktbreite = min(100vw - 100px, ~1680px)
       (gemessen 1180@1280 / 1340@1440 / 1680@1920). max-width 1780 (= 1680 Inhalt +
       2x50px Padding, border-box) + 50px Seiten-Padding ergibt Inhaltsbreite
       min(100vw - 100px, 1680px) -> fluchtet exakt mit den Produktkarten. */
    .bmb-seo__inner {
        max-width: 1780px;
        padding-left: 50px;
        padding-right: 50px;
    }
    /* bmb: Akzent-Strich nur ueber die Ueberschrift (Textbreite) statt voll-breit:
       Titel inline-block -> ::after width:100% = Textbreite; Sektion zentriert die
       inline-block-H2. Zentrierung/border-radius des Strichs aus der Basisregel. */
    .bmb-seo {
        text-align: center;
    }
    .bmb-seo .bmb-section__title {
        display: inline-block;
    }
    .bmb-seo .bmb-section__title::after {
        width: 100%;
        height: 3px;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   bmb: 10. Angebote-Sektion — vorbereitet, aktuell ungenutzt.
   Styles greifen erst, wenn der auskommentierte Block im TPL aktiviert wird.
   -------------------------------------------------------------------------- */
.bmb-offers {
    background: var(--bmb-bg-soft);
}