/* ==========================================================================
   customdesign-responsive.css
   Responsive / Media-Query overrides for CustomDesign
   Extracted from customdesign.css
   ========================================================================== */

/* --- Mobile + Tablet: Prevent ALL horizontal overflow (clip, not hidden — preserves sticky) --- */
@media (max-width: 1199px) {
    html:not(:has(body.checkout-index-index)),
    body:not(.checkout-index-index) {
        overflow-x: clip !important;
        max-width: 100vw !important;
    }
    body:not(.checkout-index-index) .page-wrapper {
        overflow-x: clip !important;
        max-width: 100% !important;
    }
    body.checkout-index-index .page-wrapper,
    body.checkout-index-index .page-main {
        overflow-x: visible !important;
        overflow-y: visible !important;
        max-width: 100% !important;
    }
    .page-wrapper,
    .page-main,
    .columns,
    .column.main {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* Such-Submit: global img { height:auto } + Button (font-size/line-height 0, overflow hidden) — Lupe sonst auf manchen WebKit/Mobil-Layouts praktisch weg */
    .page-header .header-suche #search-button img {
        width: 22px !important;
        height: 22px !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
        display: block !important;
    }
    .category-description,
    .category-description p,
    .category-cms {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    .cat_overview {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /*
     * Merkliste (Seite): Inset nur auf der Kartenliste — nicht ganze .column.main,
     * sonst Titel/Toolbar schmaler als übriges Konto. 16px + Safe-Area:
     * - bei 4px lag der 2px-Border der Karte bündig auf der Inhaltskante des <ol>; unter
     *   overflow-x:clip (html/body/.page-wrapper, max-width:1023) wirkte das wie „abgeschnitten",
     *   und die Karte wirkte so breit wie der Container.
     * - 16px gibt links/rechts sichtbare Luft, ohne die Karte selbst zu verschmälern.
     */
    body.wishlist-index-index .products-grid.wishlist .product-items {
        padding-left: max(16px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
        box-sizing: border-box !important;
    }

    body.wishlist-index-index #wishlist-view-form.form-wishlist-items,
    body.wishlist-index-index .products-grid.wishlist {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   EOF OVERRIDE: Phone menu layout fix (must stay last)
   Keep nav list above, account/phone block below
   ============================================================ */
@media (max-width: 767px) {
    body.overflow #nav.bs-mega,
    body.overflow #nav.bs-mega-v2 {
        display: flex !important;
        flex-direction: column !important;
        min-height: 100% !important;
        height: 100% !important;
    }

    /* User-Wunsch 20.05.2026 (iPhone 12 Pro 390 px): Konto-/Telefon-Block soll
       direkt unter dem letzten Menuepunkt sitzen, nicht ans Drawer-Ende
       geschoben werden. `flex: 1 1 auto` blies `.nav-primary` auf die volle
       restliche Drawer-Hoehe auf (zusammen mit `margin-top: auto` am Phone-
       Block unten) — daraus entstand der grosse Leerraum. Mit `flex: 0 0 auto`
       nimmt die Liste nur ihre natuerliche Inhaltshoehe ein; das Scrolling
       uebernimmt der aussere `.nav-top-container` (Z. 149-162) ueber sein
       `overflow-y: auto; height: 100dvh`. */
    body.overflow #nav .nav-primary {
        order: 1 !important;
        flex: 0 0 auto !important;
        min-height: 0 !important;
        position: relative !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 0 !important;
    }

    body.overflow #nav .bs-mobile-phone-info {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: static !important;
        inset: auto !important;
        margin: 0 !important;
        z-index: 1 !important;
    }

    body.overflow #nav.bs-mega .nav-primary .alles.show-cols,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols,
    body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open {
        padding-bottom: 0 !important;
    }
}

/* PDP: Akkordeon-Köpfe (.cd-tabs-accordion) bis Tablet ohne Shop-Blau — Hintergrund #fff (nur wenn Accordion-Klasse gesetzt) */
@media (max-width: 1199px) {
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.cd-accordion-title,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.data-overlay,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.active,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.cd-accordion-title.active,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.data-overlay.active,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.cd-accordion-title,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.data-overlay,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.active,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.cd-accordion-title.active,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.data-overlay.active {
        background: #fff !important;
        border: none !important;
        color: var(--bs-blue, #00446a) !important;
        box-shadow: none !important;
    }
}

/* Phone hotfix: off-canvas menu must always be vertically scrollable */
@media (max-width: 767px) {
    html.overflow body.overflow .page-wrapper > .topmenu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }

    html.overflow body.overflow .page-wrapper > .topmenu .nav-top-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: none !important;
        touch-action: pan-y !important;
    }

    body.overflow #nav.bs-mega,
    body.overflow #nav.bs-mega-v2 {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
    }

    /* User-Wunsch 20.05.2026: `min-height: 100%` und reserviertes `padding-bottom:
       140px` raus. Beides wurde frueher benoetigt, als der Phone-Block per
       `position: absolute; bottom: 0` ueber die Liste gelegt war (das
       `padding-bottom` schuf Platz, damit der letzte Eintrag nicht hinter dem
       Block verschwand). Da der Phone-Block jetzt im normalen Flex-Flow direkt
       unter der Liste sitzt (kein absolute mehr), entfaellt diese Reserve.
       `padding-bottom: 16px` als minimaler Atemraum unter dem letzten Eintrag. */
    body.overflow #nav.bs-mega .nav-primary,
    body.overflow #nav.bs-mega-v2 .nav-primary {
        min-height: 0 !important;
        padding-bottom: 16px !important;
        box-sizing: border-box !important;
    }

    body.overflow #nav.bs-mega .nav-primary .alles.show-cols,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols,
    body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open {
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Phone: account/phone block must not overlay menu list (blocks touch scroll).
       User-Wunsch 20.05.2026: `margin-top: auto` raus — schob den Block frueher
       per Flex-Trick ans untere Ende des Drawers (Sticky-Footer-Verhalten,
       resultierte in grossem Leerraum zwischen Marken und Konto-Block). Mit
       `margin-top: 0` flowt der Block normal direkt unter `.nav-primary`. */
    body.overflow #nav .bs-mobile-phone-info,
    body.overflow .page-wrapper .topmenu #nav .bs-mobile-phone-info {
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: 1 !important;
        margin-top: 0 !important;
    }
    body.overflow #nav .nav-primary,
    body.overflow .page-wrapper .topmenu #nav .nav-primary {
        padding-bottom: 0 !important;
    }
    body.overflow #nav.bs-mega .nav-primary .alles.show-cols,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols,
    body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open {
        padding-bottom: 0 !important;
    }
}

/* ------------------------------------------------------------------ */
/* FINAL PHONE NAV OVERRIDE (must stay at file end)                   */
/* Prevent account/phone block from overlaying menu items             */
/* User-Wunsch 20.05.2026: `margin-top: auto` raus, damit Konto-Block  */
/* direkt unter dem letzten Menuepunkt sitzt (kein Sticky-Footer).     */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
    body.overflow #nav .bs-mobile-phone-info,
    body.overflow .page-wrapper .topmenu #nav .bs-mobile-phone-info {
        position: static !important;
        inset: auto !important;
        margin-top: 0 !important;
        z-index: 1 !important;
    }

    body.overflow #nav .nav-primary,
    body.overflow .page-wrapper .topmenu #nav .nav-primary {
        padding-bottom: 0 !important;
    }

    body.overflow #nav.bs-mega .nav-primary .alles.show-cols,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols,
    body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open {
        padding-bottom: 0 !important;
    }
}

/* --- Tablet: same overflow prevention --- */
@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper,
    .page-main,
    .columns,
    .column.main {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    .page-header .header-suche #search-button img {
        width: 22px !important;
        height: 22px !important;
        max-width: none !important;
        flex-shrink: 0 !important;
        object-fit: contain !important;
        display: block !important;
    }
    .cat_overview {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Tablet 768–1199: ausblenden wenn Admin „auf Tablet anzeigen“ = Nein */
@media (min-width: 768px) and (max-width: 1199px) {
    .bs-usp-bar.bs-usp-bar--no-tablet {
        display: none !important;
    }
}

/* Handy bis 767px: ausblenden wenn Admin „auf Handy anzeigen“ = Nein */
@media (max-width: 767px) {
    .bs-usp-bar.bs-usp-bar--no-phone {
        display: none !important;
    }
}

@media (max-width: 1199px) {
    .bs-usp-bar__list {
        gap: 4px 16px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 16px;
    }
    .bs-usp-bar__item {
        font-size: 11px;
    }
}

@media (max-width: 479px) {
    .bs-usp-bar {
        padding: 6px 8px;
    }
    .bs-usp-bar__list {
        gap: 2px 12px;
    }
    .bs-usp-bar__item {
        font-size: 10px;
        letter-spacing: 0;
        text-transform: none;
    }
    .bs-usp-bar__badge {
        display: none !important;
    }
}

@media (max-width: 380px) {
    .bs-usp-bar__list {
        gap: 2px 6px;
        flex-wrap: wrap;
    }
    .bs-usp-bar__item {
        font-size: 10px;
        white-space: normal;
    }
    .bs-usp-bar__icon {
        width: 14px !important;
        height: 14px !important;
    }
}

@media (max-width: 767px) {
    /* Aktionszeile + Countdown untereinander, Button darunter — kompakter Zeilenabstand */
    .bs-top-banner,
    .bs-sticky-banner__inner.bs-top-banner {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 5px !important;
        padding: 7px 14px !important;
        font-size: 14px !important;
        line-height: 1.25 !important;
    }
    .bs-top-banner__message {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        width: 100% !important;
        line-height: 1.25 !important;
    }
    .bs-top-banner__cta {
        margin-left: 0 !important;
        margin-top: 1px !important;
    }

    /* Kategorie/Startseite: Scroll-to-top + Footer-Reserve wenn Sticky-Banner sichtbar */
    body.bs-sticky-active.page-layout-2columns-left .page-bottom,
    body.bs-sticky-active.catalog-category-view .page-bottom,
    body.bs-sticky-active.cms-index-index .page-bottom {
        padding-bottom: 72px;
    }
}

@media (max-width: 479px) {
    .bs-top-banner,
    .bs-sticky-banner__inner.bs-top-banner {
        font-size: 14px !important;
        padding: 6px 12px !important;
        gap: 4px !important;
    }
    .bs-top-banner__cta {
        padding: 4px 14px;
        font-size: 11px;
    }
}

@media (min-width: 768px) {
    .bs-top-banner {
        flex-direction: row !important;
        font-size: 14px !important;
        padding: 8px 16px !important;
        gap: 10px;
        line-height: 1.3 !important;
    }
    .bs-top-banner__message {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: auto !important;
        gap: 6px !important;
        line-height: 1.3 !important;
    }
    .bs-top-banner__text {
        white-space: nowrap;
    }
    .bs-top-banner__cta {
        padding: 5px 20px;
        font-size: 13px;
    }
}


/* Overlay X-cursor on desktop (Shopify-style close hint) */
@media (min-width: 1200px) {
    .modals-overlay,
    .cs-ov,
    .bs-close-overlay,
    .ws-ov,
    .bs-ov {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg filter='url(%23s)'%3E%3Cline x1='16' y1='16' x2='40' y2='40' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3Cline x1='40' y1='16' x2='16' y2='40' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='s'%3E%3CfeDropShadow dx='0' dy='1' stdDeviation='2' flood-color='%23000' flood-opacity='.45'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") 28 28, pointer;
    }
    .mage-dropdown-dialog {
        z-index: 900 !important;
    }
    .modal-slide .modal-inner-wrap,
    .modal-popup .modal-inner-wrap,
    .cs-sb,
    .ws-sb,
    .bs-sb,
    .mage-dropdown-dialog {
        cursor: default;
    }
}

@media (max-width: 767px) {
    .page-header {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/* Phone + Tablet: collapsible search field (icon in bar opens second row on tablet via .bs-search-open) */
@media (max-width: 1199px) {
    .header-suche {
        display: none !important;
        grid-area: search;
        margin: 0 -30px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
        width: calc(100% + 60px) !important;
    }
    .header-suche.bs-search-open {
        display: flex !important;
        align-items: center;
    }
    .header-suche .suchleiste,
    .header-suche .search-wrapper {
        width: 100% !important;
        margin: 0 !important;
    }
    /* overflow:visible — sonst clippt overflow:hidden+fixe Höhe das Autocomplete unter der Zeile (Mobil/Tablet) */
    .header-suche .search-bar-wrapper {
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
        border-radius: 20px !important;
        -webkit-border-radius: 20px !important;
        -moz-border-radius: 20px !important;
        border: 1.5px solid var(--bs-blue, #00446a) !important;
        overflow: visible !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        height: 40px !important;
        background: #fff !important;
        position: relative !important;
        box-sizing: border-box !important;
    }
    .header-suche .search-bar-wrapper:focus-within {
        box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.25) !important;
    }
    .header-suche #search-input,
    .header-suche #search-input1 {
        width: 0 !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        border-radius: 18px 0 0 18px !important;
        -webkit-border-radius: 18px 0 0 18px !important;
        -moz-border-radius: 18px 0 0 18px !important;
        border: none !important;
        border-right: 0 !important;
        height: 100% !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        outline: none !important;
        box-shadow: none !important;
        background: #fff !important;
        -webkit-background-clip: padding-box !important;
        background-clip: padding-box !important;
        color: var(--bs-blue, #00446a) !important;
    }
    .header-suche .search-button-wrapper,
    .header-suche .search-button-wrapper.actions {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
        height: 100% !important;
        display: flex !important;
    }
    .header-suche #search-button {
        background-color: var(--bs-blue, #00446a) !important;
        border: none !important;
        border-radius: 0 18px 18px 0 !important;
        -webkit-border-radius: 0 18px 18px 0 !important;
        -webkit-border-top-right-radius: 18px !important;
        -webkit-border-bottom-right-radius: 18px !important;
        -moz-border-radius: 0 18px 18px 0 !important;
        -moz-border-top-right-radius: 18px !important;
        -moz-border-bottom-right-radius: 18px !important;
        height: 100% !important;
        width: 44px !important;
        min-width: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 8px !important;
        box-shadow: none !important;
    }
    .header-suche #search-results-wrapper {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 10050 !important;
    }
}


/*
 * Phone + Tablet (≤1199px): gleiche sichtbare Größe für Burger, Suche, Konto, Merkliste, Warenkorb.
 * Die SVGs haben unterschiedliche Viewports / Strichstärken — feste 32×32-Kachel + object-fit: contain.
 */
@media (max-width: 1199px) {
    .page-header .header-menu #resp-menu-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .page-header .header-menu #resp-menu-wrapper > img.pers-image,
    .page-header .icons-wrapper .pers-icon .pers-image,
    .page-header .icons-wrapper .minicart-wrapper .pers-image {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        object-fit: contain !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
    }

    .page-header .icons-wrapper .pers-icon,
    .page-header .icons-wrapper .minicart-wrapper a.action.showcart .pers-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    .page-header .icons-wrapper .minicart-wrapper a.action.showcart {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Lupe: Outline-Glyphe wirkt in 32×32 kleiner als Konto/Herz — leicht hochskalieren (Farbe im SVG) */
    .page-header .icons-wrapper #mobile-search-toggle .pers-image {
        transform: scale(1.14);
        transform-origin: center center;
    }
}


@media (max-width: 767px) {
    .page-header {
        grid-template-columns: 2fr 2fr 2fr !important;
        grid-template-rows: 6px 50px 4px 36px 4px !important;
        grid-template-areas:
            ". . ."
            ". logo ."
            ". . ."
            "menu icons icons"
            ". . ." !important;
    }
    .page-header.bs-search-expanded {
        grid-template-rows: 6px 50px 4px 36px 8px 40px 4px !important;
        grid-template-areas:
            ". . ."
            ". logo ."
            ". . ."
            "menu icons icons"
            ". . ."
            "search search search"
            ". . ." !important;
    }
    .logo-wrapper #logo img {
        display: none !important;
    }
    .logo-wrapper {
        text-align: left;
    }
    .logo-wrapper #logo {
        display: block;
        width: 178px;
        height: 48px;
        margin: 0 auto;
        background: url('../../images/header/logo_simpel.svg') no-repeat left;
        background-size: contain;
    }
    #mobile-search-toggle {
        display: flex !important;
    }
    /* Lupe: SVG nutzt #346A89 wie Konto/Warenkorb — kein Recolor-Filter */
    #mobile-search-toggle .pers-image {
        filter: none !important;
    }
    #telefon-wrapper {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .header-suche {
        margin: 0 -20px !important;
        width: calc(100% + 40px) !important;
    }
}


/* Tablet (768–1199): header row = Burger | Logo | Suche-Icon + Konto + Merkliste + Warenkorb; Nav wie Mobil per Off-Canvas */
@media (min-width: 768px) and (max-width: 1199px) {
    .page-header {
        /* Oben: Luft zum Aktionsbanner; unten: etwas enger zum Hero/Content */
        padding-top: 28px !important;
        padding-bottom: 14px !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        grid-template-areas: unset !important;
        box-sizing: border-box !important;
    }
    .header-menu {
        display: flex !important;
        align-items: center !important;
        flex: 0 0 auto !important;
        order: 1 !important;
        grid-area: unset !important;
    }
    .header-menu #resp-menu-wrapper,
    #resp-menu-wrapper {
        display: flex !important;
        margin: 0 !important;
    }
    /* Logo: nicht auf 0 schrumpfen (war flex-basis + min-width:0); mittig im freien Platz */
    .logo-wrapper {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 132px !important;
        max-width: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: visible !important;
        grid-area: unset !important;
    }
    /* Wie Mobil: vereinfachtes Logo ohne Slogan (CMS-Bild ausblenden) */
    .logo-wrapper #logo {
        display: block !important;
        width: 236px !important;
        max-width: min(280px, 52vw) !important;
        min-width: 180px !important;
        height: 66px !important;
        min-height: 66px !important;
        margin: 0 auto !important;
        background: url('../../images/header/logo_simpel.svg') no-repeat center !important;
        background-size: contain !important;
        box-sizing: border-box !important;
    }
    .logo-wrapper #logo img {
        display: none !important;
    }
    /* Falls CMS nur <a id="logo"> ohne .logo-wrapper als direktes Kind liefert */
    .page-header > a#logo {
        order: 2 !important;
        flex: 1 1 auto !important;
        min-width: 180px !important;
        max-width: min(280px, 52vw) !important;
        width: 236px !important;
        height: 66px !important;
        display: block !important;
        margin: 0 auto !important;
        background: url('../../images/header/logo_simpel.svg') no-repeat center !important;
        background-size: contain !important;
        box-sizing: border-box !important;
    }
    .page-header > a#logo img {
        display: none !important;
    }
    .icons-wrapper {
        order: 3 !important;
        margin-left: auto !important;
        display: flex !important;
        flex-direction: row !important;
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        grid-area: unset !important;
    }
    /* Theme: .icon-link-wrapper { width:100% } (Mobile-Grid) → auf Tablet Flex-Zeile sonst gequetscht */
    .page-header .icons-wrapper > div.icon-link-wrapper {
        width: auto !important;
        flex: 0 0 auto !important;
        min-width: 44px !important;
        max-width: none !important;
        padding: 8px 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #mobile-search-toggle {
        display: flex !important;
    }
    #mobile-search-toggle .pers-image {
        filter: none !important;
    }
    #telefon-wrapper {
        display: flex !important;
    }
    .header-suche {
        display: none !important;
        order: 4 !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        box-sizing: border-box !important;
        grid-area: unset !important;
    }
    .header-suche.bs-search-open {
        display: flex !important;
        align-items: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.bs-header-v2 #konto-wrapper,
    body.bs-header-v2 #merkliste-wrapper {
        display: flex !important;
    }
    #merkliste-wrapper {
        display: flex !important;
    }

    /* Keine sichtbare horizontale Mega-Leiste: Menü nur über Burger (wie Mobil) */
    .page-wrapper .topmenu {
        display: none;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999999999 !important;
        border: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    .page-wrapper .topmenu .nav-top-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: translateX(-105%);
        transition: transform 300ms ease !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }
    html.overflow,
    body.overflow {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    body.overflow {
        margin-left: 0 !important;
    }
    body.overflow .page-wrapper .topmenu .nav-top-container {
        transform: translateX(0) !important;
        box-shadow: 5px 0 20px rgba(0, 0, 0, 0.2) !important;
    }
    #nav.bs-mega {
        height: 99% !important;
    }

    /*
     * Tablet: Theme styles-l (#nav .nav-item-responsive{display:none}) + fehlende LESS-Ausgabe für #nav.bs-mega .navpar… in styles-l.
     * Ohne html.overflow (oder bei niedrigerer Spezifität) bleiben Untermenü-Zeilen leer / nur Trennlinien. Direkt 768–1199, !important.
     */
    #nav.bs-mega .nav-primary .alles.show-cols .nav-item-responsive:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-item-responsive:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .nav-item-responsive:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .nav-item-responsive:not(.top-nav-item) {
        display: block !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open .navitem:not(.top-nav-item) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
    }
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: block !important;
        color: var(--bs-blue, #00446a) !important;
    }
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem.prev-menu .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem.prev-menu .navitem:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem .navitem:not(.active-menu):not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem .navitem:not(.active-menu):not(.top-nav-item) {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        transition: none !important;
        overflow: visible !important;
    }
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open > div.level2,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > div.level2 {
        line-height: normal !important;
        height: auto !important;
        min-height: 0 !important;
        border-bottom: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}


@media (min-width: 1200px) {
    #mobile-search-toggle {
        display: none !important;
    }
    .bs-mobile-only {
        display: none !important;
    }
}


/* Desktop: collapse header to a single row */
@media (min-width: 1200px) {
    /* Sicherheitsnetz: ab Desktop kein horizontales Seiten-Scrollen mehr (der
       Schutz galt bisher nur <=1199px). `clip` erhaelt Sticky-Header; Mega-/
       Such-Dropdown oeffnen vertikal und bleiben nutzbar.
       Checkout ausnehmen: overflow-x:clip erzwingt overflow-y:auto und clippt die OPC-Sidebar. */
    html:not(:has(body.checkout-index-index)),
    body:not(.checkout-index-index) {
        overflow-x: clip !important;
        max-width: 100vw !important;
    }

    body.checkout-index-index .page-wrapper,
    body.checkout-index-index .page-main,
    body.checkout-index-index .columns,
    body.checkout-index-index .column.main,
    body.checkout-index-index .checkout-container,
    body.checkout-index-index #checkout {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }

    /* Such-Dropdown an den Viewport anpassen: `left:0` relativ zur Suchbox +
       feste 900px ragen auf schmalem Desktop (z. B. iPad Pro 1024px) rechts
       raus. Breite an verfuegbaren Platz koppeln (Produktvorschau bleibt, da
       >700px Container-Query-Schwelle). */
    #search-results-wrapper {
        width: min(900px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 16px) !important;
    }

    .page-header {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        grid-template-rows: auto !important;
        grid-template-areas: "logo search icons" !important;
        align-items: center !important;
        max-width: 1440px !important;
        margin: 20px auto 5px auto !important;
        column-gap: 36px !important;
    }
    .logo-wrapper {
        grid-area: logo;
    }
    .header-suche {
        grid-area: search;
        margin: 0 !important;
        display: flex;
        align-items: center;
    }
    .icons-wrapper {
        grid-area: icons;
        gap: 4px;
    }
    .icon-link-wrapper {
        padding: 10px 14px !important;
    }
    /* Hover-Hop nur auf dem Haupt-Glyph (.pers-image), nicht auf Haken/Wunschlisten-Zähler
       (die sitzen in derselben .pers-icon wie beim Konto/Herz; Warenkorb-Zähler ist Geschwister von .pers-icon). */
    .icon-link-wrapper .pers-icon {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Desktop ≥1200 (inkl. iPad Pro): alle Header-Glyphen in derselben 30×30-Kachel */
    .page-header .icons-wrapper .icon-link-wrapper .pers-icon,
    .page-header .icons-wrapper .minicart-wrapper a.action.showcart .pers-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        box-sizing: border-box !important;
    }
    .page-header .icons-wrapper .icon-link-wrapper .pers-image,
    .page-header .icons-wrapper .minicart-wrapper .pers-image {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        object-fit: contain !important;
        box-sizing: border-box !important;
        transition: transform 0.2s ease, filter 0.2s ease;
        filter: brightness(0) saturate(100%) invert(17%) sepia(60%) saturate(1500%) hue-rotate(175deg) brightness(95%);
    }
    .page-header .icons-wrapper .icon-link-wrapper:hover .pers-image,
    .page-header .icons-wrapper .minicart-wrapper:hover .pers-image {
        transform: translateY(-2px);
        filter: brightness(0) saturate(100%) invert(17%) sepia(80%) saturate(2000%) hue-rotate(175deg) brightness(90%);
    }
    #konto-wrapper .login-checkmark {
        width: 16px !important;
        height: 16px !important;
    }
    #konto-wrapper .login-checkmark .img-checkmark {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
    }
    .header-suche,
    .header-suche .suchleiste,
    .header-suche .search-wrapper {
        width: 100% !important;
    }
    .search-bar-wrapper {
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
        border-radius: 20px !important;
        border: 1.5px solid var(--bs-blue, #00446a) !important;
        overflow: visible !important;
        display: flex !important;
        align-items: stretch;
        height: 40px;
        background: #fff;
        position: relative;
        transition: box-shadow 0.2s ease;
    }
    .search-bar-wrapper:focus-within {
        box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.25) !important;
    }
    #search-input,
    #search-input1 {
        width: 100% !important;
        flex: 1 !important;
        border-radius: 18px 0 0 18px !important;
        border: none !important;
        height: 100% !important;
        padding: 0 16px !important;
        font-size: 14px !important;
        outline: none !important;
        box-shadow: none !important;
        background: #fff !important;
        -webkit-background-clip: padding-box !important;
        background-clip: padding-box !important;
    }
    #search-button {
        background-color: var(--bs-blue, #00446a) !important;
        border: none !important;
        border-radius: 0 18px 18px 0 !important;
        height: 100% !important;
        min-width: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .page-main {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .page-main {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

/* ============================================================
   Kontakt /kontakt (body.contact-index-index)
   Horizontal: wie üblich nur über globales .page-main (20 / 24 / 30px) — nicht zusätzlich in .column.main
   (vermeidet doppelten Rand). Vertikal: Abstand zu Header/Footer.
   Muss nach den .page-main Media Queries stehen (höhere Priorität nur für top/bottom).
   ============================================================ */
body.contact-index-index #maincontent.page-main,
body.contact-index-index .page-main {
    padding-top: 40px !important;
    padding-bottom: 96px !important;
}

body.contact-index-index .column.main {
    padding-left: 0 !important;
    padding-right: 0 !important;
}


/* --- Responsive Typography --- */
@media (max-width: 767px) {
    .page-wrapper h1, .page-wrapper .bs-h1, .column.main h1 { font-size: 26px; }
    .page-wrapper h2, .page-wrapper .bs-h2, .column.main h2 { font-size: 22px; }
    .page-wrapper h3, .page-wrapper .bs-h3, .column.main h3 { font-size: 18px; }
    .page-wrapper h4, .page-wrapper .bs-h4, .column.main h4 { font-size: 16px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper h1, .page-wrapper .bs-h1, .column.main h1 { font-size: 28px; }
    .page-wrapper h2, .page-wrapper .bs-h2, .column.main h2 { font-size: 24px; }
    .page-wrapper h3, .page-wrapper .bs-h3, .column.main h3 { font-size: 20px; }
    .page-wrapper h4, .page-wrapper .bs-h4, .column.main h4 { font-size: 17px; }
}

@media (max-width: 767px) {
    .page-wrapper .bs-btn-outline-accent,
    a.bs-btn-outline-accent {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }
}


/* --- Visibility --- */
@media (max-width: 767px) {
    .bs-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .bs-hide-desktop { display: none !important; }
}

@media (max-width: 767px) {
    .cms-index-index .bs-hero--v1,
    .cms-index-index .bs-hero--v2,
    .cms-index-index .bs-hero--v3 {
        margin-left: -20px !important;
        margin-right: -20px !important;
        max-width: calc(100% + 40px) !important;
    }
}

@media (max-width: 767px) {
    .page-wrapper .bs-hero--v1 {
        margin-left: -20px;
        margin-right: -20px;
        width: calc(100% + 40px);
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-hero--v1 .bs-hero__main > .bs-hero__media-wrap > picture img:not(.bs-hotspot__thumb),
    .page-wrapper .bs-hero--v1 .bs-hero__media-wrap > picture img:not(.bs-hotspot__thumb) {
        min-height: 530px;
        max-height: 650px;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper .bs-hero--v1 .bs-hero__overlay {
        padding: 36px 40px !important;
    }
}

@media (min-width: 1200px) {
    .page-wrapper .bs-hero--v1 .bs-hero__overlay {
        padding: 48px 60px !important;
    }
}

@media (max-width: 767px) {
    .page-wrapper .bs-hero--v1 .bs-hero__overlay .bs-hero__top .bs-hero__tagline,
    .page-wrapper .bs-hero--v1 .bs-hero__tagline,
    .cms-index-index .column.main .bs-hero--v1 .bs-hero__tagline {
        font-size: 36px !important;
    }
    .page-wrapper .bs-hero--v1 .bs-hero__top .bs-btn-accent,
    .page-wrapper .bs-hero--v1 .bs-hero__overlay .bs-btn-accent {
        width: 100% !important;
        text-align: center !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper .bs-hero--v1 .bs-hero__overlay .bs-hero__top .bs-hero__tagline,
    .page-wrapper .bs-hero--v1 .bs-hero__tagline,
    .cms-index-index .column.main .bs-hero--v1 .bs-hero__tagline {
        font-size: 48px !important;
    }
}

@media (max-width: 767px) {
    .page-wrapper .bs-hero--v1 h1.bs-hero__subline,
    .page-wrapper .bs-hero--v1 .bs-hero__subline strong,
    .cms-index-index .column.main .bs-hero--v1 h1.bs-hero__subline {
        font-size: 18px !important;
        margin: 0 !important;
        line-height: 1.25 !important;
    }
    /* Subline → Aktions-Slider: sichtbarer Abstand ca. 20px (70px overlay unten − 50px Fader-Überlappung) */
    .page-wrapper .bs-hero--v1 .bs-hero__overlay {
        padding: 24px 20px 70px 20px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper .bs-hero--v1 h1.bs-hero__subline,
    .page-wrapper .bs-hero--v1 .bs-hero__subline strong,
    .cms-index-index .column.main .bs-hero--v1 h1.bs-hero__subline {
        font-size: 26px !important;
    }
    .page-wrapper .bs-hero--v1 h1.bs-hero__subline {
        margin: 0 0 48px 0 !important;
    }
}

@media (min-width: 1200px) {
    .page-wrapper .bs-hero--v1 h1.bs-hero__subline,
    .page-wrapper .bs-hero--v1 .bs-hero__subline strong,
    .cms-index-index .column.main .bs-hero--v1 h1.bs-hero__subline {
        font-size: 36px !important;
    }
    .page-wrapper .bs-hero--v1 h1.bs-hero__subline {
        margin: 0 0 60px 0 !important;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-hero--v1 .bs-hero__fader {
        padding: 0 60px;
        margin-top: -70px;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-hero--v2 .bs-hero__media-wrap > picture img:not(.bs-hotspot__thumb) {
        min-height: 520px;
        max-height: 650px;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-hero--v2 .bs-hero__blob {
        width: 360px;
        height: 360px;
        left: auto;
        right: 18%;
        bottom: 10%;
        transform: none;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-hero--v2 .bs-hero__badge {
        width: 110px;
        height: 110px;
        right: 10%;
        top: 15%;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-hero--v3 .bs-hero__main > .bs-hero__media-wrap > picture img:not(.bs-hotspot__thumb),
    .page-wrapper .bs-hero--v3 .bs-hero__media-wrap > picture img:not(.bs-hotspot__thumb) {
        min-height: 360px;
        max-height: 500px;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-hero--v3 .bs-hero__overlay { padding: 40px 60px !important; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-hero--v3 .bs-hero__subline { font-size: 18px !important; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-aktionen__heading { margin: 32px 0 !important; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-aktionen__brand { padding: 20px 32px; gap: 24px; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-aktionen__brand-logo { width: 120px; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-aktionen__brand-body {
        flex-direction: row;
        align-items: center;
        gap: 24px;
        font-size: 17px;
    }
}

@media (max-width: 767px) {
    .page-wrapper .bs-aktionen__brand-btn {
        white-space: normal !important;
        font-size: 13px !important;
        padding: 8px 16px !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    .page-wrapper .bs-aktionen__row { flex-direction: column; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-kat { margin-top: 56px; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-kat__arrows { display: flex; }
}

/* Startseite mobil: Slider bis zum Seitenpadding (kein zusätzlicher Innenrand) */
@media (max-width: 767px) {
    .cms-index-index .page-wrapper .bs-kat--a .bs-kat__track {
        margin-left: -20px !important;
        margin-right: -20px !important;
        width: calc(100% + 40px) !important;
        max-width: none !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        scroll-padding-left: 20px !important;
        scroll-padding-right: 20px !important;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-kat--a .bs-kat__track {
        gap: 24px;
        max-width: none;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper .bs-kat--a .bs-kat__card {
        flex: 0 0 27%;
    }
}

@media (min-width: 1200px) {
    .page-wrapper .bs-kat--a .bs-kat__card {
        flex: 0 0 30%;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-kat__card-label { font-size: 20px; padding: 16px 4px; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-bento__row {
        flex-direction: row;
        align-items: stretch;
        gap: 32px;
        margin-bottom: 40px;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-bento__img { flex: 1.2; min-height: 300px; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-bento__text { flex: 0.8; padding: 16px 0; }
}

@media (max-width: 767px) {
    .page-wrapper .bs-bento__text h3 { font-size: 20px !important; }
}

@media (min-width: 768px) {
    .page-wrapper .bs-bento__row--reverse .bs-bento__img,
    .page-wrapper .bs-bento__row--reverse .bs-bento__img-wrap { order: 2; }
    .page-wrapper .bs-bento__row--reverse .bs-bento__text { order: 1; }
}

@media (max-width: 767px) {
    /* Wie Hero-CTA (.bs-btn-outline-accent unter 767px) */
    .page-wrapper .bs-bento__text .bs-btn-accent {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-bento__pair {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .page-wrapper .bs-kat--b .bs-bento__pair {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-bento__tile-label { font-size: 22px !important; padding: 24px; }
}

@media (max-width: 767px) {
    .page-wrapper .bs-bento__tile-label {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .page-wrapper .bs-bento__tile-btn {
        font-size: 12px !important;
        padding: 6px 14px !important;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-kat--b .bs-bento__pair .bs-bento__tile,
    .page-wrapper .bs-kat--b .bs-bento__pair .bs-bento__tile img {
        border-radius: var(--bs-radius-img, 12px) !important;
    }
    .page-wrapper .bs-bento__tile-btn { font-size: 14px !important; padding: 10px 24px; }
}

/* Schmal: Tooltip/Hotspot-Puls nicht vom Wrapper abschneiden; Bild wird am Link .bs-bento__img gerundet (Hotspot ist Geschwister, nicht im <a>) */
@media (max-width: 767px) {
    .page-wrapper .bs-bento__img-wrap {
        overflow: visible;
    }
    .page-wrapper .bs-bento__img-wrap .bs-bento__img {
        border-radius: var(--bs-radius-img, 20px);
        overflow: hidden;
    }
    .page-wrapper .bs-bento__img-wrap .bs-bento__img img {
        border-radius: var(--bs-radius-img, 20px);
    }
}

@media (min-width: 768px) {
    /* Desktop: Rundung nur am Wrapper + overflow hidden; innen eckig */
    .page-wrapper .bs-bento__img-wrap .bs-bento__img {
        border-radius: 0;
    }
    .page-wrapper .bs-bento__img-wrap .bs-bento__img img {
        border-radius: 0;
    }
    .page-wrapper .bs-bento__img-wrap { flex: 1.2; min-height: 300px; }
}

/* Maus / feiner Zeiger: Hover oder Tastatur-Fokus im Hotspot */
@media (hover: hover) and (pointer: fine) {
    .bs-hotspot:hover .bs-hotspot__tooltip,
    .bs-hotspot:focus-within .bs-hotspot__tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
}

/* Touch / Grobzeiger / schmales Fenster: Karte nur mit --open (per JS) */
@media (hover: none), (pointer: coarse) {
    .bs-hotspot.bs-hotspot--open .bs-hotspot__tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
}

@media (max-width: 767px) {
    .bs-hotspot.bs-hotspot--open .bs-hotspot__tooltip {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }
}


@media (max-width: 767px) {
    /* Tap-Fläche rund (kein hellblaues Quadrat durch 44×44-Button-Hintergrund) */
    .bs-hotspot__trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin: 0;
        border-radius: 50%;
        background: transparent !important;
    }
    .bs-hotspot__trigger .bs-hotspot__dot,
    .bs-hotspot__dot {
        width: 20px;
        height: 20px;
        border-width: 1px;
    }
    .bs-hotspot__tooltip {
        min-width: 180px;
        max-width: 240px;
        padding: 8px 10px 8px 8px;
        gap: 8px;
    }
    .bs-hotspot__tooltip-body {
        gap: 8px;
    }
    .bs-hotspot__thumb {
        width: 48px !important;
        height: 48px !important;
    }
    .bs-hotspot__tooltip-body > picture {
        flex: 0 0 48px;
        width: 48px;
        max-width: 48px;
    }
    .bs-hotspot__name { font-size: 12px; }
    .bs-hotspot__price { font-size: 12px; }
    a.bs-hotspot__cta {
        font-size: 13px;
        padding: 8px 12px;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service {
        margin-top: 64px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service .inner-container {
        padding: 56px 60px;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service .inner-container .highlight {
        font-size: 32px !important;
        margin: 0 0 48px 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index #service .service-grid {
        gap: 32px 24px !important;
    }
    .cms-index-index #service .service-grid .service-vorteil {
        width: calc(50% - 16px) !important;
    }
}

@media (min-width: 1200px) {
    .cms-index-index #service .service-grid {
        gap: 40px 32px !important;
    }
    .cms-index-index #service .service-grid .service-vorteil {
        width: calc(25% - 24px) !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service .service-vorteil .vorteil {
        font-size: 16px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service .service-vorteil .vorteil-text {
        font-size: 14px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service.bs-service--hscroll {
        padding: 56px 0 48px 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index #service.bs-service--hscroll .inner-container {
        padding: 0 !important;
    }
}

@media (max-width: 767px) {
    .cms-index-index #service.bs-service--hscroll .inner-container {
        padding: 0 !important;
    }
}

/* Mobil: Icon-Slot kleiner (40x40 statt 52x52) — die transform:scale-Regeln
   in customdesign.css gleichen die einzelnen Motiv-Höhen weiterhin an, da
   sie relativ zur tatsächlichen img-Größe skalieren. Greift im Slider- und
   im Kachel-Layout. Vorher wirkten die Icons (Beratung/Versand mit scale 1.35)
   auf schmalen Mobile-Karten überproportional groß. */
@media (max-width: 767px) {
    .cms-index-index #service .service-vorteil .vorteil-icon {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 10px auto !important;
    }
    .cms-index-index #service .service-vorteil .vorteil-icon img {
        max-width: 40px !important;
        max-height: 40px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service.bs-service--hscroll .inner-container .highlight,
    .cms-index-index #service.bs-service--hscroll .inner-container .bs-section-heading {
        font-size: 32px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index #service.bs-service--hscroll .bs-service__header {
        padding: 0 24px 16px 24px !important;
    }
}

@media (max-width: 767px) {
    .cms-index-index #service.bs-service--hscroll .bs-service__header {
        padding: 0 20px 32px 20px !important;
    }
}

/* Mobil: weniger blauer Leerraum unten am Service-Block + Cards etwas weiter
   nach unten gerueckt. Vorher: container padding-bottom 40px (zu viel
   Leerflaeche unter den Karten), header padding-bottom 16px (Karten klebten
   an der Headline + Pfeilen). Neu: weniger unten am Container, mehr Luft
   zwischen Headline/Chevrons und Karten. */
@media (max-width: 767px) {
    .cms-index-index #service.bs-service--hscroll {
        padding-bottom: 20px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service.bs-service--hscroll .bs-service__track {
        gap: 16px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index #service.bs-service--hscroll .bs-service__track {
        padding-left: 24px !important;
        scroll-padding-left: 24px !important;
    }
}

@media (max-width: 767px) {
    .cms-index-index #service.bs-service--hscroll .bs-service__track {
        padding-left: 20px !important;
        scroll-padding-left: 20px !important;
    }
}

/* Startseite mobil: horizontale Slider — Pfeil-Kreise (44px → 35px): „Unser Service“, „Unsere Themenwelten“ */
@media (max-width: 767px) {
    .cms-index-index #service.bs-service--hscroll .bs-slider-arrow,
    .cms-index-index #themenwelt .bs-slider-arrow {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
    }
    .cms-index-index #service.bs-service--hscroll .bs-slider-arrow::after,
    .cms-index-index #themenwelt .bs-slider-arrow::after {
        width: 9px !important;
        height: 9px !important;
        border-top-width: 2px !important;
        border-right-width: 2px !important;
    }
    .cms-index-index #service.bs-service--hscroll .bs-slider-arrow[data-dir="prev"]::after,
    .cms-index-index #themenwelt .bs-slider-arrow[data-dir="prev"]::after {
        margin-left: 2px !important;
    }
    .cms-index-index #service.bs-service--hscroll .bs-slider-arrow[data-dir="next"]::after,
    .cms-index-index #themenwelt .bs-slider-arrow[data-dir="next"]::after {
        margin-right: 2px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index #service.bs-service--hscroll .bs-service__card {
        flex: 0 0 30% !important;
        max-width: 30% !important;
    }
}

@media (min-width: 1200px) {
    .cms-index-index #service.bs-service--hscroll .bs-service__card {
        flex: 0 0 22% !important;
        max-width: 22% !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service.bs-service--hscroll .service-vorteil .vorteil {
        font-size: 16px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #service.bs-service--hscroll .service-vorteil .vorteil-text {
        font-size: 15px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #ausstellung {
        margin-top: 64px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #ausstellung .bs-ausstellung__inner {
        flex-direction: row !important;
        /* Vorher 320px — bei den alten Hochformat-Fotos (198×264) wurde der
           Container durch das Bild-Aspect ohnehin auf ~360-380px gestreckt.
           Die neuen Querformat-Bilder (1024×683) lassen ihn nur auf den
           min-Wert zusammenfallen → Block wirkt zu flach. Daher Mindesthoehe
           hoeher und mit !important festgesetzt, damit der Ausstellungsblock
           wieder die fruehere Praesenz hat. */
        min-height: 420px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #ausstellung .bs-ausstellung__text {
        flex: 0 0 40% !important;
        padding: 48px 40px !important;
    }
}

@media (min-width: 1200px) {
    .cms-index-index #ausstellung .bs-ausstellung__text {
        flex: 0 0 44% !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #ausstellung .bs-ausstellung__heading {
        font-size: 32px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #ausstellung .bs-ausstellung__body {
        font-size: 16px !important;
        margin: 0 0 32px 0 !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #ausstellung .bs-ausstellung__img {
        /* Vorher 320px — siehe Hinweis bei .bs-ausstellung__inner oben. */
        min-height: 420px !important;
    }
}

/* Ausstellungsfotos auch auf schmalen Phones nebeneinander (kein Einspalter) */
@media (max-width: 479px) {
    .cms-index-index #ausstellung .bs-ausstellung__heading {
        font-size: 24px !important;
    }
}

/* Marken: großzügiges Padding nur ab Desktop — Tablet/Handy sonst zu viel „grüner“ Abstand unter #marken */
@media (min-width: 1200px) {
    .cms-index-index #marken {
        padding: 64px 0 48px !important;
    }
}

@media (max-width: 1199px) {
    .cms-index-index #marken {
        padding-bottom: 0 !important;
    }
}

/* Handy: Marken-Slider über die volle Bildschirmbreite (kein seitlicher Rand) +
   spürbarer Abstand unter dem „Unsere Marken"-Button zur Badausstellung-Box.
   - #marken liegt in der mobil 20px-gepolsterten .column.main; wie Hero/Kategorie-
     Slider bricht der Slider mit margin -20px voll aus (overflow-x:clip am
     page-wrapper verhindert horizontalen Scroll). Nur der Slider wird voll-breit;
     Überschrift und Button bleiben im Innenrand.
   - Die obige (max-width:1199px)-Regel setzt padding-bottom:0 (Tablet sonst zu viel
     Leerraum). Auf Handy wird der Bodenabstand bewusst wieder hergestellt. */
@media (max-width: 767px) {
    .cms-index-index #marken.bs-marken--slider .bs-marken-slider {
        margin-left: -20px !important;
        margin-right: -20px !important;
        max-width: none !important;
        width: auto !important;
    }
    .cms-index-index #marken {
        padding-bottom: 40px !important;
    }
}

/* Tablet (768–1199px): Marken-Slider ebenfalls über die volle Bildschirmbreite.
   .page-main hat hier 24px seitliches Padding -> margin -24px bricht voll aus.
   Desktop (>=1200px) bleibt beim zentrierten max-width:1440px. */
@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index #marken.bs-marken--slider .bs-marken-slider {
        margin-left: -24px !important;
        margin-right: -24px !important;
        max-width: none !important;
        width: auto !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #marken .highlight {
        font-size: 32px !important;
        margin: 0 0 48px 0 !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index #marken .bs-marken-grid__item {
        width: calc((100% - 3 * 16px) / 4) !important;
    }
    .cms-index-index #marken.bs-marken--slider .bs-marken-slider__viewport {
        --bs-marken-cols: 4;
    }
}

@media (min-width: 1200px) {
    .cms-index-index #marken .bs-marken-grid__item {
        width: calc((100% - 5 * 16px) / 6) !important;
    }
    .cms-index-index #marken.bs-marken--slider .bs-marken-slider__viewport {
        --bs-marken-cols: 6;
    }
}

@media (min-width: 768px) {
    .cms-index-index #marken .bs-marken-button {
        margin-top: 40px !important;
    }
}

@media (max-width: 767px) {
    .page-wrapper .topmenu {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .nav-top-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}


/*
 * Desktop: Theme (#nav .nav-primary .alles { z-index: 1000 }) liegt sonst über dem 2px border-bottom der Tabs.
 * Nur bei gehoverter .level0: Panel leicht unter dem Tab (20 < 21), inaktive Tabs bleiben unter dem offenen Panel (auto < 20).
 */
@media (min-width: 1200px) {
    html:not(.overflow) body:not(.overflow) #nav.bs-mega .nav-primary > div.level0:hover .alles {
        z-index: 20 !important;
    }
    html:not(.overflow) body:not(.overflow) #nav.bs-mega .nav-primary > div.level0:hover > a {
        z-index: 21 !important;
    }
}


/* Desktop: Panel an Unterkante der Zeile (top:100%) — kein Spalt zur JS-mouseleave-Lücke.
   ::after bleibt als Zusatz-Brücke für Themes/Subpixel. */
@media (min-width: 1200px) {
    #nav.bs-mega .nav-primary > div.level0::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 18px;
        z-index: 1;
        background: transparent;
        pointer-events: auto;
    }
}


/* Tablet: flexible columns that fit within viewport */
@media (min-width: 768px) and (max-width: 1199px) {
    #nav.bs-mega .nav-column:not(.banner) {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
    }
    #nav.bs-mega .nav-column {
        padding: 0 10px !important;
    }
    #nav.bs-mega .nav-column:first-child {
        padding-left: 0 !important;
    }
    #nav.bs-mega .navcolumns {
        flex-wrap: nowrap !important;
        padding: 0 16px !important;
    }
    #nav.bs-mega .nav-primary .alles {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        overflow: hidden !important;
    }
}


/*
 * Desktop-Mega: kompakte Spaltenköpfe + Pill „Alles anzeigen“ + Flex-Spalte.
 * Nicht im Burger (≤1023): inline-block + order:-1 ließ Zeilen nebeneinander fließen → Überlappung mit erster Kategorie.
 */
@media (min-width: 1200px) {
    /* Level-1 category headers (excluding "Alles anzeigen" + Desktop-SALE-Karte) */
    #nav.bs-mega .nav-column > .level1.navitem:not(.alles-anzeigen):not(.bs-mega-sale),
    #nav.bs-mega-v2 .nav-column > .level1.navitem:not(.alles-anzeigen):not(.bs-mega-sale) {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        color: var(--bs-blue, #00446a) !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px;
        line-height: 1.4 !important;
        padding: 4px 0 !important;
        margin-bottom: 4px !important;
        border-bottom: none !important;
        display: inline-block;
    }
    #nav.bs-mega .nav-column > .level1.navitem:not(.alles-anzeigen):not(.bs-mega-sale):hover,
    #nav.bs-mega-v2 .nav-column > .level1.navitem:not(.alles-anzeigen):not(.bs-mega-sale):hover {
        color: #ec6608 !important;
    }

    /* "Alles anzeigen" — Link mit Unterstrich (orange / Hover blau), kein Pill-Rahmen */
    body:not(.overflow) #nav.bs-mega .navcolumns > .nav-column:first-child > .alles-anzeigen {
        display: inline-block !important;
        width: auto;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #ec6608 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 4px 0 !important;
        margin: 0 0 8px 0 !important;
        text-transform: none !important;
        text-align: left !important;
        letter-spacing: 0.3px;
        line-height: 1.4 !important;
        cursor: pointer;
        transition: color 0.2s ease, text-decoration-color 0.2s ease;
        order: -1;
        box-sizing: border-box;
        text-decoration: underline !important;
        text-decoration-color: #ec6608 !important;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }
    body:not(.overflow) #nav.bs-mega .navcolumns > .nav-column:first-child > .alles-anzeigen:focus-visible {
        outline: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a) !important;
        outline-offset: var(--bs-kb-focus-outline-offset, 2px) !important;
        box-shadow: none !important;
        color: var(--bs-kb-focus-color, #00446a) !important;
        text-decoration-color: var(--bs-kb-focus-color, #00446a) !important;
    }
    body:not(.overflow) #nav.bs-mega .navcolumns > .nav-column:first-child > .alles-anzeigen:hover,
    body:not(.overflow) #nav.bs-mega .navcolumns > .nav-column:first-child > .alles-anzeigen:active {
        background: transparent !important;
        color: var(--bs-blue, #00446a) !important;
        text-decoration-color: var(--bs-blue, #00446a) !important;
    }
    #nav.bs-mega .nav-column {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* Mobil: Vorschlagsliste — symmetrisch unter der Suchleiste, volle Breite im Header-Padding */
@media (max-width: 767px) {
    .page-header,
    body.bs-header-v2 .page-header {
        overflow: visible !important;
    }
    .header-suche,
    body.bs-header-v2 .header-suche {
        overflow: visible !important;
    }
    .header-suche .search-bar-wrapper,
    body.bs-header-v2 .header-suche .search-bar-wrapper {
        overflow: visible !important;
        position: relative !important;
    }
    #search-results-wrapper,
    .header-suche #search-results-wrapper,
    body.bs-header-v2 .header-suche #search-results-wrapper {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        z-index: 10050 !important;
    }
    #search-results-wrapper .search-autocomplete,
    .header-suche #search-results-wrapper .search-autocomplete,
    body.bs-header-v2 #search-results-wrapper .search-autocomplete {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }
    .searchsuggestions .products-section {
        display: none !important;
    }
    body.bs-header-v2 #search-results-wrapper .searchsuggestions .cls-layout-container,
    #search-results-wrapper .searchsuggestions .cls-layout-container,
    .searchsuggestions .cls-layout-container {
        flex-direction: column !important;
        gap: 0 !important;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        left: 0 !important;
        right: auto !important;
        top: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        clip-path: none !important;
        padding: 16px !important;
        overflow: visible !important;
    }
    .searchsuggestions .cls-layout-container .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: none !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
    }
    .searchsuggestions .cls-layout-container > .cls-showall {
        margin-top: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Browser-Autocomplete über der Liste unterdrücken */
    #search-input1::-webkit-contacts-auto-fill-button,
    #search-input1::-webkit-credentials-auto-fill-button,
    #search-input::-webkit-contacts-auto-fill-button,
    #search-input::-webkit-credentials-auto-fill-button {
        visibility: hidden !important;
        display: none !important;
        pointer-events: none !important;
    }
    #search-results-wrapper .search-autocomplete ul[role="listbox"],
    .search-autocomplete ul[role="listbox"] {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #search-results-wrapper,
    .header-suche #search-results-wrapper {
        width: auto !important;
        left: 0 !important;
        right: 0 !important;
        max-width: none !important;
    }
}

@media (max-width: 767px) {
    .searchsuggestions .cls-layout-container .sidebar {
        border-right: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }
}


/* ---- Mobile + Tablet menu drawer – cart-panel style ---- */
@media (max-width: 1199px) {
    /* Full-width drawer, no gap at top */
    .page-wrapper .topmenu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 100dvh !important;
        margin-top: 0 !important;
        padding: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
    }
    .page-wrapper .topmenu .nav-top-container,
    .nav-top-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        background: #fff !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
    }
    body.overflow {
        margin-left: 0 !important;
    }
    body.overflow .nav-top-container {
        box-shadow: none !important;
    }
    #nav.bs-mega {
        padding-top: 0 !important;
        margin-top: 0 !important;
        height: auto !important;
        min-height: 100% !important;
    }

    /* Hide old "Menü" header row and old close button */
    #nav .top-nav-item.resp-level0 {
        display: none !important;
    }
    #nav > .close-responsive-menu {
        display: none !important;
    }

    /* Blue header bar */
    .bs-menu-header {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: var(--bs-blue, #00446a) !important;
        padding: 16px 20px !important;
        position: relative;
        margin: 0 !important;
    }
    .bs-menu-header__title {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 2.5px !important;
        color: #fff !important;
        /* User-Wunsch 2026-05-19 18:17: auf 3. Ebene (mobil + tablet) muss die
           Überkategorie oben zentriert stehen statt linksbündig — kurze Titel
           (z. B. „BADMÖBEL") wirken durch flex-center bereits zentriert, lange
           umgebrochene Titel (z. B. „WASCHTISCHE MIT UNTERSCHRANK") brauchen
           explizit text-align:center, sonst defaulten umgebrochene Zeilen auf
           links. max-width hält den Titel-Block aus den 14px-absoluten Back/X-
           Buttons (jeweils ~22px svg + 14px Offset = ~36px → 40px Buffer). */
        text-align: center !important;
        max-width: calc(100% - 80px) !important;
        box-sizing: border-box !important;
    }
    .bs-menu-header__close {
        position: absolute !important;
        right: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: none !important;
        border: none !important;
        color: #fff !important;
        cursor: pointer !important;
        padding: 8px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        opacity: 0.9;
        transition: opacity 0.2s ease;
        font-size: 0 !important;
        width: auto !important;
        z-index: 10000 !important;
    }
    .bs-menu-header__close svg {
        width: 24px !important;
        height: 24px !important;
    }
    .bs-menu-header__close:hover,
    .bs-menu-header__close:active {
        opacity: 1;
    }

    /* Sub-level header rows (blue bar with back arrow) */
    #nav .top-nav-item.resp-level1,
    #nav .top-nav-item.resp-level2,
    #nav .top-nav-item.resp-level3,
    #nav .nav-primary .top-nav-item.resp-level1,
    #nav .nav-primary .top-nav-item.resp-level2,
    #nav .nav-primary .top-nav-item.resp-level3,
    #nav.bs-mega .nav-primary .top-nav-item.resp-level1,
    #nav.bs-mega .nav-primary .top-nav-item.resp-level2,
    #nav.bs-mega .nav-primary .top-nav-item.resp-level3,
    #nav.bs-mega .nav-column > .level1.navitem.top-nav-item,
    #nav.bs-mega .navpar .top-nav-item,
    #nav.bs-mega .nav-primary .alles .top-nav-item {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #fff !important;
        text-align: center !important;
        padding: 14px 50px !important;
        background: var(--bs-blue, #00446a) !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        line-height: 1.3 !important;
        border: none !important;
        position: relative !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        height: auto !important;
        display: block !important;
        transform: none !important;
        overflow: visible !important;
    }
    /* Remove stray borders between blue header bar and content */
    #nav.bs-mega .nav-primary .alles .navcolumns {
        border-top: none !important;
        border: none !important;
    }
    #nav.bs-mega .nav-primary .alles .navcolumns .nav-column {
        border-top: none !important;
    }
    /* Back arrow on sub-level headers: white, properly positioned */
    #nav .top-nav-item:before {
        filter: brightness(0) invert(1) !important;
        opacity: 0.85;
        top: 50% !important;
        margin-top: -12px !important;
        left: 14px !important;
        width: 24px !important;
        height: 24px !important;
        background-size: contain !important;
    }

    /* Menu items – base rules */
    #nav .nav-primary > div.level0 {
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
    #nav .nav-primary div:not(.top-nav-item,.alles-anzeigen,.navcolumns,.nav-column,.navpar) {
        border-bottom-color: rgba(74, 104, 134, 0.12) !important;
    }

    /* Phone info block: pinned to bottom of #nav, behind .alles panels */
    .bs-mobile-phone-info {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 500 !important;
        border-top: 1px solid rgba(74, 104, 134, 0.12) !important;
        padding: 24px 16px 32px !important;
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
        background: #f0f6fa !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    /* Ensure .nav-primary has bottom padding so items don't hide behind phone info (Mobile only) */
    @media (max-width: 767px) {
        #nav .nav-primary {
            padding-bottom: 100px !important;
        }
    }
    .bs-mobile-phone-link {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 20px !important;
        font-weight: 700 !important;
    }
    .bs-mobile-phone-icon {
        width: 24px !important;
        height: 24px !important;
    }
    .bs-mobile-phone-hours {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 13px !important;
    }

    /* Back-arrow button styles consolidated below (search: "Back arrow in drawer header") */
    /* Hide ALL separate sub-level blue header bars — back arrow is in the main header */
    #nav .alles.show-cols > .navitem.top-nav-item.nav-item-responsive:not(.alles-anzeigen),
    #nav .navpar.navpar-open > .navitem.top-nav-item.nav-parent,
    #nav .navpar.navpar-open > .navitem.top-nav-item.resp-level2,
    #nav .navpar.navpar-open > .navitem.top-nav-item.resp-level3,
    #nav .level2.navpar.navpar-open > .navitem.top-nav-item {
        display: none !important;
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* NEUHEITEN "Alle Neuheiten anzeigen": match orange alles-anzeigen style */
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column a.alles-anzeigen.bs-mega-v2-neuheit-link {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #ec6608 !important;
        padding: 14px 18px !important;
        text-align: left !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        display: block !important;
        background: transparent !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* TOP MARKEN: drawer styling — small containers, large logos, wrap at >2 */
    #nav.bs-mega-v2 .bs-mega-v2-top-brands,
    #nav.bs-mega-v2 .bs-mega-v2-top-brands-list {
        border-bottom: none !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brands {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 12px 14px 16px !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brands-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brand-item {
        min-width: 0 !important;
        flex: 0 1 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        padding: 14px 16px !important;
        min-height: 60px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brand-logo {
        max-width: 100% !important;
        max-height: 60px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Marken/long-list panels: bottom padding only Mobile (Phone-Block) — auf Tablet erzeugt 140px leeren Scroll-Raum */
    @media (max-width: 767px) {
        #nav.bs-mega .nav-primary .alles.show-cols,
        #nav.bs-mega-v2 .nav-primary .alles.show-cols,
        #nav.bs-mega .nav-primary .alles .navpar.navpar-open,
        #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open {
            padding-bottom: 140px !important;
        }
    }
}


/* ---- Responsive: comprehensive mobile + tablet menu reset ---- */
@media (max-width: 1199px) {
    /*
     * Tablet 768–1199: ältere/kompilierte Theme-CSS (styles-l) kann #resp-menu-wrapper auf display:none
     * setzen und .topmenu als 35px-Leiste lassen — ohne Slide-Hülle greifen customdesign + menuControl nicht.
     * Klasse setzt Solutioo_ServerSideTracking/js/customnavigation.js (refreshBsMegaTabletSlideBodyClass).
     */
    body.bs-mega-tablet-slide #resp-menu-wrapper {
        display: flex !important;
    }
    /*
     * NICHT display:none !important auf .topmenu — sonst kann jQuery .show() das Overlay nicht einblenden
     * (Inline-Display schlägt kein !important). Zu geschlossen: visibility; offen: .overflow (synchron zu JS).
     */
    body.bs-mega-tablet-slide .page-wrapper > .topmenu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9999999999 !important;
    }
    body.bs-mega-tablet-slide:not(.overflow) .page-wrapper > .topmenu {
        visibility: hidden !important;
        pointer-events: none !important;
    }
    body.bs-mega-tablet-slide.overflow .page-wrapper > .topmenu {
        visibility: visible !important;
        pointer-events: auto !important;
    }
    body.bs-mega-tablet-slide .page-wrapper > .topmenu .nav-top-container {
        width: 80% !important;
        max-width: 350px !important;
        height: 100% !important;
        min-height: 0 !important;
        background: #fff !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        transform: translateX(-150%) !important;
        transition: transform 300ms ease !important;
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }
    body.bs-mega-tablet-slide.overflow .page-wrapper > .topmenu .nav-top-container {
        transform: translateX(0) !important;
        box-shadow: 5px 0 20px rgba(0, 0, 0, 0.25) !important;
    }
    /* Sub-Drawer: nur inneres Panel scrollt — nicht doppelter Scroll auf .nav-top-container */
    body.bs-mega-tablet-slide.overflow .page-wrapper > .topmenu .nav-top-container:has(.alles.show-cols),
    body.bs-mega-tablet-slide.overflow .page-wrapper > .topmenu .nav-top-container:has(.navpar.navpar-open) {
        overflow-y: hidden !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols,
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open {
        padding-bottom: 0 !important;
    }
    html.overflow body.bs-mega-tablet-slide {
        overflow: hidden !important;
        position: fixed !important;
    }
    /* Kein margin-left: Overlay-Drawer — sonst springt der komplette Header/Content nach rechts */
    body.bs-mega-tablet-slide.overflow {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        margin-left: 0 !important;
        transition: none !important;
    }

    /* Let theme's #nav { height: 99% } work – needed for .alles height: 100% */
    #nav.bs-mega .nav-primary,
    #nav.bs-mega-v2 .nav-primary {
        display: block !important;
        position: relative !important;
        min-height: 100% !important;
    }

    /*
     * Desktop (#nav .nav-primary > div.level0 { position: relative }) macht .alles (absolute, height:100%)
     * nur so hoch wie eine Zeile — Unterpanel wirkt als Streifen unten. Im Slide-Drawer Bezug: .nav-primary.
     */
    #nav.bs-mega .nav-primary > div.level0,
    #nav.bs-mega-v2 .nav-primary > div.level0 {
        display: block !important;
        padding: 0 !important;
        position: static !important;
    }
    #nav.bs-mega .nav-primary > div.level0 > a,
    #nav.bs-mega-v2 .nav-primary > div.level0 > a {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--bs-blue, #00446a) !important;
        line-height: 1.4 !important;
        padding: 14px 40px 14px 16px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        border-bottom: none !important;
        background: transparent !important;
        display: block !important;
    }
    #nav.bs-mega .nav-primary > div.level0:hover > a,
    #nav.bs-mega-v2 .nav-primary > div.level0:hover > a {
        border-bottom: none !important;
        background: transparent !important;
    }

    /* Level-0-Kategorien verbergen wenn ein .alles-Panel offen ist (verhindert Durchbluten auf iPad).
       :not(:has(.alles.show-cols)) schließt das div.level0 aus, das das offene Panel enthält. */
    #nav.bs-mega .nav-primary:has(.alles.show-cols) > div.level0:not(:has(.alles.show-cols)),
    #nav.bs-mega-v2 .nav-primary:has(.alles.show-cols) > div.level0:not(:has(.alles.show-cols)) {
        display: none !important;
    }

    /*
     * Eigenen Level-0-Link (z. B. „Marken >“) ausblenden, solange .alles.show-cols offen ist.
     * Liegt im DOM unter dem absoluten Panel — iOS-Overscroll ganz oben blitzt sonst den Link auf.
     */
    body.overflow #nav.bs-mega .nav-primary > div.level0:has(.alles.show-cols) > a.navitem,
    body.overflow #nav.bs-mega-v2 .nav-primary > div.level0:has(.alles.show-cols) > a.navitem {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        border: none !important;
    }

    body.overflow #nav.bs-mega .nav-primary > div.level0:has(.alles.show-cols),
    body.overflow #nav.bs-mega-v2 .nav-primary > div.level0:has(.alles.show-cols) {
        overflow: hidden !important;
    }

    /* Dropdown panels: reset desktop positioning, keep slide */
    #nav.bs-mega .nav-primary .alles,
    #nav.bs-mega-v2 .nav-primary .alles {
        border-radius: 0 !important;
        box-shadow: none !important;
        clip-path: none !important;
        top: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
        transform: translateX(100%) !important;
        transition: transform 300ms !important;
        border: none !important;
        z-index: 1000 !important;
        left: 0 !important;
        box-sizing: border-box !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols {
        display: block !important;
        transform: translateX(0) !important;
        z-index: 60000 !important;
    }
    /* Folge-.level0-Zeilen liegen im Paint-Order über dem absoluten .alles — Klicks gingen an Geschwister statt ins Panel */
    #nav.bs-mega .nav-primary > div.level0.bs-mega-pe-block {
        pointer-events: none !important;
    }
    /* Top-Link muss trotzdem tippbar bleiben: andere Kategorie wählen / Panel wechseln (sonst „Klick tut nichts“) */
    #nav.bs-mega .nav-primary > div.level0.bs-mega-pe-block > a.navitem,
    #nav.bs-mega-v2 .nav-primary > div.level0.bs-mega-pe-block > a.navitem {
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative !important;
        z-index: 5 !important;
    }

    /* Theme (.navitem height:0 + translateX) breaks sub-panels on tablet; extend phone fix through 1199px */
    #nav.bs-mega .nav-primary .alles .navitem,
    #nav.bs-mega-v2 .nav-primary .alles .navitem {
        height: auto !important;
        transform: none !important;
        position: relative !important;
    }

    /* Hide desktop-only elements */
    #nav.bs-mega .bs-mega-brand-grid,
    #nav.bs-mega .bs-mega-brand-footer,
    #nav.bs-mega .bs-mega-featured-placeholder,
    #nav.bs-mega .bs-mega-featured,
    #nav.bs-mega .bs-mega-highlight-card,
    #nav.bs-mega .bs-mega-banner-wrap {
        display: none !important;
    }
    #nav.bs-mega .marken .nav-column {
        display: block !important;
    }

    /* Columns: stack vertically, full width */
    #nav.bs-mega .navcolumns {
        display: block !important;
        flex-direction: unset !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* V2: .navcolumns.bs-mega-v2-inner — gleiche Sichtbarkeit wie V1 im Drawer (768–1199 nutzte nur max-width 767-Block) */
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .bs-mega-v2-inner,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navcolumns.bs-mega-v2-inner {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /*
     * Theme _navigation_extend.less (min-width @screen__m): #nav .nav-item-responsive { display: none }
     * gilt ab 768px für die ganze Nav — blendet Inhalt im Burger-Drawer aus (leere 2. Ebene Tablet/Teile Handy).
     */
    #nav.bs-mega .nav-primary .alles.show-cols .nav-item-responsive:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-item-responsive:not(.top-nav-item) {
        display: block !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .bs-mega-v2-top-brands {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .bs-mega-v2-top-brands-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }
    /*
     * Theme _navigation_extend.less (Mobil): .navitem { height:0; transform:translateX(100%) };
     * .prev-menu { transform:translateX(-100%) } — nach Klick auf eine Unterkategorie werden ALLE .active-menu
     * zu .prev-menu: Zeilen rutschen aus dem Sichtfeld, es bleiben „leere“ Trennlinien; z-index/Overlap mit „Alles anzeigen“.
     * Im geöffneten .alles.show-cols-Panel: keine Slide-Transforms, nur normale Liste.
     */
    #nav.bs-mega .nav-primary .alles.show-cols .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navitem:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles.show-cols .more,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .more {
        transform: none !important;
        transition: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols .navitem.prev-menu:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navitem.prev-menu:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles.show-cols .navitem.active-menu:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navitem.active-menu:not(.top-nav-item) {
        transform: none !important;
        z-index: auto !important;
    }
    /* Theme: .navitem.prev-menu .navitem:not(.active-menu){display:none} — nur innere Kinder; Spaltenzeilen bleiben block */
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .navitem.prev-menu:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .navitem.prev-menu:not(.top-nav-item) {
        display: block !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols .navcolumns .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navcolumns .navitem:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles.show-cols .navcolumns .resp-click,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navcolumns .resp-click {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
    }
    #nav.bs-mega .nav-column,
    #nav.bs-mega .nav-column:not(.banner) {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        flex: none !important;
        flex-basis: auto !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
        border-left: none !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        /* Bezugsfläche für absolutes navpar = .alles (volle Panelhöhe), nicht die Spalte — sonst fehlt der blaue Titel / Abschnitt oben */
        position: static !important;
    }
    #nav.bs-mega .nav-column.banner,
    #nav.bs-mega .nav-column.bs-mega-featured {
        display: none !important;
    }

    /* navpar container: fully collapsed by default (exclude .alles which is the 2nd-level panel) */
    #nav .nav-column .navpar:not(.alles),
    #nav.bs-mega .nav-column .navpar:not(.alles),
    #nav.bs-mega .navcolumns .navpar:not(.alles),
    #nav.bs-mega .nav-primary .alles .navpar:not(.alles),
    #nav.bs-mega .nav-primary .alles div.level1.navpar,
    #nav.bs-mega .nav-primary .alles div.level2.navpar,
    #nav.bs-mega-v2 .nav-column .navpar:not(.alles),
    #nav.bs-mega-v2 .navcolumns .navpar:not(.alles),
    #nav.bs-mega-v2 .nav-primary .alles .navpar:not(.alles),
    #nav.bs-mega-v2 .nav-primary .alles div.level1.navpar,
    #nav.bs-mega-v2 .nav-primary .alles div.level2.navpar {
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
    }
    /* Sub-level panels: shown when JS adds navpar-open */
    #nav .nav-column .navpar.navpar-open,
    #nav.bs-mega .nav-column .navpar.navpar-open,
    #nav.bs-mega .navcolumns .navpar.navpar-open,
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open,
    #nav.bs-mega .nav-primary .alles div.level1.navpar.navpar-open,
    #nav.bs-mega .nav-primary .alles div.level2.navpar.navpar-open,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open,
    #nav.bs-mega-v2 .nav-primary .alles div.level1.navpar.navpar-open,
    #nav.bs-mega-v2 .nav-primary .alles div.level2.navpar.navpar-open {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        /* Theme kann .navpar als Flex + Kinder mit flex-grow aus Desktop/Mega übernehmen — erzeugt hohe leere Streifen */
        display: block !important;
        flex-direction: unset !important;
        flex-wrap: unset !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        opacity: 1 !important;
        background: #fff !important;
        z-index: 10 !important;
        pointer-events: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border: none !important;
    }
    /* Drill-down: kein Opacity/Height-Transition — verhindert Flash der darunterliegenden Spalten */
    #nav.bs-mega .nav-primary .alles .navpar:not(.alles),
    #nav.bs-mega-v2 .nav-primary .alles .navpar:not(.alles),
    #nav.bs-mega .nav-primary .alles div.level1.navpar,
    #nav.bs-mega-v2 .nav-primary .alles div.level1.navpar,
    #nav.bs-mega .nav-primary .alles div.level2.navpar,
    #nav.bs-mega-v2 .nav-primary .alles div.level2.navpar {
        transition: none !important;
    }
    /* Level-2-Panel offen: Spaltenliste darunter ausblenden (Tablet-Flash „Einzel…“ / „Wasch…“) */
    #nav.bs-mega .nav-primary .alles.show-cols .navcolumns:has(.level1.navpar.navpar-open) > .nav-column > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navcolumns:has(.level1.navpar.navpar-open) > .nav-column > .navitem:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles.show-cols .navcolumns:has(.level1.navpar.navpar-open) > .nav-column > .alles-anzeigen,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navcolumns:has(.level1.navpar.navpar-open) > .nav-column > .alles-anzeigen,
    #nav.bs-mega .nav-primary .alles.show-cols .navcolumns:has(.level1.navpar.navpar-open) > .nav-column > .more,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navcolumns:has(.level1.navpar.navpar-open) > .nav-column > .more,
    #nav.bs-mega .nav-primary .alles.show-cols .navcolumns:has(.level1.navpar.navpar-open) > .nav-column > div.level2:not(.navpar),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navcolumns:has(.level1.navpar.navpar-open) > .nav-column > div.level2:not(.navpar) {
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
    /* Level-3-Panel offen: Level-2-Liste im Parent ausblenden (Wrapper mit offenem .level2.navpar bleibt) */
    #nav.bs-mega .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > .navitem:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > .alles-anzeigen,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > .alles-anzeigen,
    #nav.bs-mega .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > .more,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > .more,
    #nav.bs-mega .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > div.level2:not(:has(.level2.navpar.navpar-open)),
    #nav.bs-mega-v2 .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > div.level2:not(:has(.level2.navpar.navpar-open)) {
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    /* Open sub-panels: force row content visible + consistent drawer item styling */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        transform: none !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: var(--bs-blue, #00446a) !important;
        padding: 12px 40px 12px 16px !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .more,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .more {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        transform: none !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        color: var(--bs-blue-gray, #4a6886) !important;
        padding: 12px 40px 12px 16px !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
    /* Wrapper rows (e.g. div.level2) that only wrap .nav-sub: show label text */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open > div:not(.navitem):not(.navpar) .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > div:not(.navitem):not(.navpar) .navitem:not(.top-nav-item) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        transform: none !important;
    }
    /* Theme .navitem height:0 — im geöffneten navpar alle Zeilen erzwingen; .top-nav-item bleibt versteckt */
    #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open .navitem:not(.top-nav-item) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        display: block !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /*
     * Theme _navigation_extend.less (≤767): .navitem.prev-menu .navitem:not(.active-menu){display:none}
     * — im geöffneten Unterpanel bleiben dadurch nur Trennlinien / halbe Zeilen sichtbar (Tablet + Handy).
     */
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem.prev-menu .navitem,
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem.prev-menu .navitem,
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem .navitem:not(.active-menu),
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem .navitem:not(.active-menu),
    html.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem.prev-menu .navitem,
    html.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem.prev-menu .navitem,
    html.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem .navitem:not(.active-menu),
    html.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem .navitem:not(.active-menu) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    /* Tablet: #nav .nav-item-responsive{display:none} — Unterpanel-Zeilen (.resp-level2/3) wieder sichtbar; .top-nav-item bleibt verborgen */
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles.show-cols .nav-item-responsive:not(.top-nav-item),
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-item-responsive:not(.top-nav-item),
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open .nav-item-responsive:not(.top-nav-item),
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .nav-item-responsive:not(.top-nav-item),
    html.overflow #nav.bs-mega .nav-primary .alles.show-cols .nav-item-responsive:not(.top-nav-item),
    html.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-item-responsive:not(.top-nav-item),
    html.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open .nav-item-responsive:not(.top-nav-item),
    html.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .nav-item-responsive:not(.top-nav-item) {
        display: block !important;
    }
    /* Sub-level .top-nav-item headers: hidden — back arrow is in the main .bs-menu-header (do NOT show these) */
    /*
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open > .top-nav-item.nav-item-responsive,
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > .top-nav-item.nav-item-responsive,
    html.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open > .top-nav-item.nav-item-responsive,
    html.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > .top-nav-item.nav-item-responsive {
        min-height: 48px !important;
        height: auto !important;
        overflow: visible !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
        line-height: 1.35 !important;
    }
    */
    /*
     * styles-m.css: #nav .navitem { height:0; transform:translateX(100%) } — nur .active-menu/.prev-menu height:auto.
     * Spezifität html+body+#nav.bs-mega* schlägt #nav .navitem, sonst bleiben Zeilen eingeklappt / halb sichtbar.
     */
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item),
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item),
    html.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item),
    html.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        transition: none !important;
        position: relative !important;
        overflow: visible !important;
    }
    /*
     * Theme: #nav .nav-primary div:not(.top-nav-item,.alles-anzeigen){ line-height:35px } trifft div.level2 —
     * leere/kaum sichtbare Wrapper wirken als hohe weiße Streifen zwischen Trennlinien.
     * :not(.navitem) — nur echte Wrapper-div.level2 (Sub2 mit Children), NICHT Leaf-Items
     * wie <div class="level2 navitem resp-click">Quadrat-Duschwannen</div>; sonst würden Leaf-Items
     * padding:0 + border:none erben und ohne Einrückung/Trennlinie erscheinen.
     */
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open > div.level2:not(.navitem),
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > div.level2:not(.navitem),
    html.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open > div.level2:not(.navitem),
    html.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > div.level2:not(.navitem) {
        line-height: normal !important;
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        overflow: visible !important;
        border-bottom: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Geister-Trennlinien: L1-Zeilen unter vollem navpar-Overlay ausblenden */
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column:has(> .navpar.navpar-open) > .navitem:not(.navpar),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column:has(> .navpar.navpar-open) > .navitem:not(.navpar) {
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }
    /* Wrapper divs inside navpar: remove theme's 5px left-padding — .more ausnehmen (sonst padding:0) */
    #nav .nav-column .navpar > div:not(.navitem):not(.navpar):not(.more),
    #nav.bs-mega .nav-column .navpar > div:not(.navitem):not(.navpar):not(.more),
    #nav.bs-mega-v2 .nav-column .navpar > div:not(.navitem):not(.navpar):not(.more) {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* „mehr »“ — gleiches Padding wie Sub-Kategorie-Zeilen (Wrapper-Regel oben setzte padding:0) */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open > div.level2.more,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > div.level2.more,
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open > .level2.more.resp-click,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > .level2.more.resp-click {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 40px 14px 16px !important;
        margin: 0 !important;
        font-family: 'Quicksand', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: var(--bs-blue-gray, #4a6886) !important;
        text-align: left !important;
        border: none !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        cursor: pointer !important;
    }

    /* All navitems & resp-click items inside .alles (2nd level) */
    #nav.bs-mega .nav-primary .alles .nav-column .navitem:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega .nav-primary .alles .nav-column .resp-click:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .navitem:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .resp-click:not(.top-nav-item):not(.alles-anzeigen) {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--bs-blue, #00446a) !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.4 !important;
        padding: 14px 40px 14px 16px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: transparent !important;
        border-radius: 0 !important;
        position: relative !important;
    }
    #nav.bs-mega .nav-primary .alles .nav-column .navitem.bs-mega-important::before,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .navitem.bs-mega-important::before {
        display: none !important;
    }

    /* "Alles anzeigen" — gleiches Layout wie Ebene 3 (volle Breite, Linie bis zum Rand) */
    #nav.bs-mega .nav-primary .alles .nav-column .alles-anzeigen,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .alles-anzeigen,
    html.overflow #nav.bs-mega .nav-primary .alles.show-cols .nav-column .alles-anzeigen,
    html.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .alles-anzeigen {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #ec6608 !important;
        padding: 14px 40px 14px 16px !important;
        margin: 0 !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.4 !important;
        border: none !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        border-radius: 0 !important;
        background: transparent !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    /* Drawer offen: Pill-Reste aus Desktop-Mega überschreiben (Kontrast/Text sichtbar) */
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles.show-cols .nav-column .level1.navitem.alles-anzeigen,
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles.show-cols .nav-column .navitem.alles-anzeigen,
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .level1.navitem.alles-anzeigen,
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .navitem.alles-anzeigen,
    html.overflow body.overflow #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open > .alles-anzeigen.navitem,
    html.overflow body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open > .alles-anzeigen.navitem,
    html.overflow #nav.bs-mega .nav-primary .alles.show-cols .nav-column .level1.navitem.alles-anzeigen,
    html.overflow #nav.bs-mega .nav-primary .alles.show-cols .nav-column .navitem.alles-anzeigen,
    html.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .level1.navitem.alles-anzeigen,
    html.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .navitem.alles-anzeigen,
    html.overflow #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open > .alles-anzeigen.navitem,
    html.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open > .alles-anzeigen.navitem {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px 40px 14px 16px !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        text-align: left !important;
        color: #ec6608 !important;
        -webkit-text-fill-color: #ec6608 !important;
        background: transparent !important;
        float: none !important;
        order: unset !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        opacity: 1 !important;
        visibility: visible !important;
        white-space: normal !important;
        overflow: visible !important;
    }

    /*
     * V2: Desktop legte .alles-anzeigen per absolute über die erste Spalte (siehe min-width:1024).
     * Pill + order:-1 galt global — im Burger überlagerte der Button die erste Kategoriezeile.
     */
    #nav.bs-mega-v2 .bs-mega-v2-inner .nav-column.bs-mega-v2-neuheiten-cats > .alles-anzeigen,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column:first-child > .alles-anzeigen {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        z-index: auto !important;
        order: unset !important;
    }

    /* Theme Mobil (.navitem height:0 / transform): direkte Kategoriezeilen in .nav-column erzwingen */
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > a.bs-mega-v2-neuheit-item,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > a.bs-mega-v2-neuheit-link,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .resp-click:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .resp-click:not(.top-nav-item) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        overflow: visible !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        color: var(--bs-blue, #00446a) !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .bs-mega-v2-neuheit-item {
        display: flex !important;
        align-items: center !important;
        height: auto !important;
        min-height: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        overflow: visible !important;
        font-size: 15px !important;
        color: var(--bs-blue, #00446a) !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column .more,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column .more {
        height: auto !important;
        min-height: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: block !important;
        padding: 14px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: var(--bs-blue, #00446a) !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        box-sizing: border-box !important;
    }

    /* Erste Spalte: Zeile volle Breite inkl. horizontaler Innenränder (nicht 100% + Margin-Overflow) */
    #nav.bs-mega .nav-primary .alles.show-cols .navcolumns > .nav-column:first-child > .alles-anzeigen,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navcolumns > .nav-column:first-child > .alles-anzeigen {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 14px 40px 14px 16px !important;
        clear: both !important;
        float: none !important;
        box-sizing: border-box !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .level1.navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .level1.navitem:not(.top-nav-item) {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        float: none !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .level1.navitem.bs-mega-important,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .level1.navitem.bs-mega-important {
        display: block !important;
        width: 100% !important;
    }

    /* Ebenen in geöffnetem .navpar: gleiches „Alles anzeigen"-Layout wie Ebene 3 */
    #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open > .alles-anzeigen,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open > .alles-anzeigen {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        margin: 0 !important;
        padding: 14px 40px 14px 16px !important;
        box-sizing: border-box !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open .resp-click:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open .resp-click:not(.top-nav-item):not(.alles-anzeigen) {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: block !important;
        width: 100% !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        color: var(--bs-blue, #00446a) !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    /* :not(.navitem) — nur Wrapper-div.level2 (Sub2 mit Children), nicht Leaf-Items / nicht .more */
    #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open > div.level2:not(.navitem):not(.more),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open > div.level2:not(.navitem):not(.more) {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        min-height: 0 !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open > div.level2 > .navitem.nav-sub,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open > div.level2 > .navitem.nav-sub,
    #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open > div.level2 > .navitem.resp-click,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open > div.level2 > .navitem.resp-click {
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: block !important;
        width: 100% !important;
        font-size: 15px !important;
        color: var(--bs-blue, #00446a) !important;
    }
    /* Ebene-3 offen: nav-sub im Wrapper aus — sonst Flash der Klick-Zeile unter dem Overlay */
    #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open > div.level2:has(> .level2.navpar.navpar-open) > .navitem.nav-sub,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open > div.level2:has(> .level2.navpar.navpar-open) > .navitem.nav-sub,
    #nav.bs-mega .nav-primary .alles .level1.navpar .navitem.nav-sub.bs-nav-drill-suppress,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navpar .navitem.nav-sub.bs-nav-drill-suppress {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        pointer-events: none !important;
    }

    /* Sale items in Burger (Mobile/Tablet): orange text like „Alles anzeigen", no orange card background */
    #nav.bs-mega .nav-primary .alles .nav-column > .navitem.bs-mega-sale,
    #nav.bs-mega .nav-primary .alles .nav-column > .navitem.bs-mega-sale:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .navitem.bs-mega-sale,
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .navitem.bs-mega-sale:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .navitem.bs-mega-sale,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .navitem.bs-mega-sale:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .navitem.bs-mega-sale,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .navitem.bs-mega-sale:not(.top-nav-item) {
        color: #ec6608 !important;
        background: transparent !important;
        background-color: transparent !important;
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        padding: 14px 40px 14px 16px !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        border-radius: 0 !important;
        line-height: 1.4 !important;
    }
    #nav.bs-mega .nav-primary .alles .nav-column > .navitem.bs-mega-sale:hover,
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .navitem.bs-mega-sale:hover,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .navitem.bs-mega-sale:hover,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .navitem.bs-mega-sale:hover {
        color: var(--bs-blue, #00446a) !important;
        background: transparent !important;
        background-color: transparent !important;
    }
    #nav.bs-mega .nav-primary .alles .nav-column > .navitem.bs-mega-sale a,
    #nav.bs-mega .nav-primary .alles .nav-column > .navitem.bs-mega-sale a:visited,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .navitem.bs-mega-sale a,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .navitem.bs-mega-sale a:visited {
        color: #ec6608 !important;
    }
    #nav.bs-mega .nav-primary .alles .nav-column > .navitem.bs-mega-sale:hover a,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .navitem.bs-mega-sale:hover a {
        color: var(--bs-blue, #00446a) !important;
    }
    #nav.bs-mega .nav-primary .alles .nav-column > .navitem.bs-mega-sale::after,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .navitem.bs-mega-sale::after {
        display: none !important;
        content: none !important;
    }

    /* Top-level „Sale" in Burger root list — orange text, no card */
    #nav.bs-mega .nav-primary > div.level0.bs-mega-sale-item > a,
    #nav.bs-mega-v2 .nav-primary > div.level0.bs-mega-sale-item > a {
        color: #ec6608 !important;
        background: transparent !important;
    }
    #nav.bs-mega .nav-primary > div.level0.bs-mega-sale-item:hover > a,
    #nav.bs-mega-v2 .nav-primary > div.level0.bs-mega-sale-item:hover > a {
        color: var(--bs-blue, #00446a) !important;
        background: transparent !important;
    }
    /* Nur geschlossenes Panel: sonst überschreibt diese Zeile .navpar-open (Untermenü bleibt leer / height:0) */
    #nav.bs-mega .nav-primary .alles .nav-column .navitem.bs-mega-sale + .navpar:not(.navpar-open),
    #nav.bs-mega-v2 .nav-primary .alles .nav-column .navitem.bs-mega-sale + .navpar:not(.navpar-open) {
        height: 0 !important;
        overflow: hidden !important;
        opacity: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }
    #nav.bs-mega .nav-primary .alles .nav-column .navitem.bs-mega-sale + .navpar:not(.navpar-open)::after,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column .navitem.bs-mega-sale + .navpar:not(.navpar-open)::after {
        display: none !important;
    }
    #nav.bs-mega .nav-primary .alles .nav-column .navitem.bs-mega-sale + .navpar .navitem {
        color: var(--bs-blue, #00446a) !important;
    }

    /* SALE %-Drawer im Burger-Menu (Mobile/Tablet): Desktop-Card-Layout (orange #ec6608 +
     * weisse Schrift + dekoratives riesiges "%") muss komplett ausgeschaltet werden,
     * sonst faerbt das geoeffnete SALE-Untermenue den ganzen Drawer orange (siehe
     * Screenshots 20.05.2026 09:07). Desktop-Rules in customdesign.css Z. 2638+ haben
     * hoehere Spezifitaet (z.B. (1,9,1) durch :not(.highlight-cat)), daher hier mit
     * Klassen-Verdoppelung + .navpar-open eindeutig hoeher spezifiziert. WICHTIG:
     * Desktop-Rule setzt auch position:relative; top:auto; height:auto; left:auto; overflow:hidden
     * — das wuerde die Slide-Drawer-Positionierung aus Z. 2493-2516 (position:absolute;
     * top:0; left:0; width:100%; height:100%) kaputtmachen und der SALE-Drawer wuerde
     * statisch unter der Parent-BADMOEBEL-Liste rendern statt als Overlay-Drawer.
     * Daher muessen wir position + top + left + width + height + overflow ebenfalls hier
     * explizit auf die Drawer-Werte zurueck setzen. */
    #nav.bs-mega.bs-mega .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .navpar.navpar-open,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .navpar.navpar-open,
    #nav.bs-mega.bs-mega .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .level1.navpar.navpar-open,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .level1.navpar.navpar-open {
        background: #fff !important;
        background-color: #fff !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-top: none !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 60000 !important;
    }
    #nav.bs-mega.bs-mega .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .navpar.navpar-open::after,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .navpar.navpar-open::after,
    #nav.bs-mega.bs-mega .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .level1.navpar.navpar-open::after,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .level1.navpar.navpar-open::after {
        content: none !important;
        display: none !important;
    }
    #nav.bs-mega.bs-mega .nav-primary .alles .nav-column .navitem.bs-mega-sale + .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen):not(.highlight-cat),
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .nav-column .navitem.bs-mega-sale + .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen):not(.highlight-cat),
    #nav.bs-mega.bs-mega .nav-primary .alles .nav-column .navitem.bs-mega-sale + .level1.navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen):not(.highlight-cat),
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .nav-column .navitem.bs-mega-sale + .level1.navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen):not(.highlight-cat) {
        color: var(--bs-blue, #00446a) !important;
        background: transparent !important;
        background-color: transparent !important;
        padding: 14px 40px 14px 16px !important;
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* SALE %-Drawer: .alles-anzeigen explizit auf gleiche Margin/Padding wie im
     * Standard-Drawer (BADMOEBEL-Drawer, Regel Z. 2704-2728): margin: 12px 14px 10px
     * + padding: 14px 18px 14px 0. User-Anweisung 20.05.2026 09:23 mit DevTools-Screenshot
     * Soll-Referenz = gleiches Layout wie Ebene 3 (volle Breite, kein Extra-Margin oben). */
    #nav.bs-mega.bs-mega .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .navpar.navpar-open .alles-anzeigen,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .navpar.navpar-open .alles-anzeigen,
    #nav.bs-mega.bs-mega .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .level1.navpar.navpar-open .alles-anzeigen,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .level1.navpar.navpar-open .alles-anzeigen,
    #nav.bs-mega.bs-mega .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .navpar.navpar-open .alles-anzeigen.navitem,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .nav-column.nav-column .navitem.bs-mega-sale + .navpar.navpar-open .alles-anzeigen.navitem {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #ec6608 !important;
        padding: 14px 40px 14px 16px !important;
        margin: 0 !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.4 !important;
        border: none !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        border-radius: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 3rd-level items inside navpar */
    #nav.bs-mega .nav-primary .alles .nav-column .navpar .navitem:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega .nav-primary .alles .nav-column .navpar .resp-click:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles .nav-column .navpar .navitem:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles .nav-column .navpar .resp-click:not(.top-nav-item):not(.alles-anzeigen) {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--bs-blue, #00446a) !important;
        padding: 14px 40px 14px 16px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        line-height: 1.4 !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Chevron arrows on level-0 items (top menu) */
    #nav.bs-mega .nav-primary > div.level0 > a.nav-sub::after {
        background: none !important;
        background-image: none !important;
        width: 9px !important;
        height: 9px !important;
        border-top: none !important;
        border-left: none !important;
        border-right: 2px solid var(--bs-blue, #00446a) !important;
        border-bottom: 2px solid var(--bs-blue, #00446a) !important;
        display: block !important;
        transform: rotate(-45deg) !important;
        content: '' !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        margin-top: -5px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        opacity: 0.45 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        z-index: 2 !important;
    }
    /* Chevron arrows on level-1 items (2nd level, inside .alles dropdown) */
    #nav.bs-mega .nav-primary .alles .nav-column .navitem.nav-sub::after {
        background: none !important;
        background-image: none !important;
        width: 9px !important;
        height: 9px !important;
        border-top: none !important;
        border-left: none !important;
        border-right: 2px solid var(--bs-blue, #00446a) !important;
        border-bottom: 2px solid var(--bs-blue, #00446a) !important;
        display: block !important;
        transform: rotate(-45deg) !important;
        content: '' !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        margin-top: -5px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        opacity: 0.5 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        z-index: 2 !important;
        -webkit-transform: rotate(-45deg) !important;
    }

    /* Arrow indicator hidden */
    #nav.bs-mega .arrtop {
        display: none !important;
    }

    /* ---- 3rd level: ensure level2.navpar.navpar-open and its children are fully visible ---- */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
        z-index: 20 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > div > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > div > .navitem:not(.top-nav-item) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        transform: none !important;
        position: relative !important;
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--bs-blue, #00446a) !important;
        padding: 14px 40px 14px 16px !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .nav-item-responsive:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .nav-item-responsive:not(.top-nav-item) {
        display: block !important;
    }

    /* ---- Back arrow in drawer header ---- */
    .bs-menu-header__back {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        color: #fff !important;
        z-index: 10001 !important;
        line-height: 1 !important;
    }
    .bs-menu-header__back svg {
        width: 22px !important;
        height: 22px !important;
        color: #fff !important;
        display: block !important;
    }

    /* Chevron on V2 level-1 nav-sub items (inside .alles) */
    #nav.bs-mega-v2 .nav-primary .alles .nav-column .navitem.nav-sub::after {
        background: none !important;
        background-image: none !important;
        width: 9px !important;
        height: 9px !important;
        border-top: none !important;
        border-left: none !important;
        border-right: 2px solid var(--bs-blue, #00446a) !important;
        border-bottom: 2px solid var(--bs-blue, #00446a) !important;
        display: block !important;
        transform: rotate(-45deg) !important;
        content: '' !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        margin-top: -5px !important;
        opacity: 0.5 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        z-index: 2 !important;
    }
}

@media (max-width: 767px) {
    body.bs-sticky-active #backtotop {
        bottom: 65px !important;
    }
}

@media (min-width: 768px) {
    .page-wrapper .bs-hero__fader {
        padding: 0 60px;
        margin-top: -70px !important;
    }
}

@media (max-width: 767px) {
    .page-wrapper .bs-hero__fader .teaser-controls {
        padding: 0 6px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #themenwelt {
        padding: 64px 0 48px 0 !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #themenwelt .bs-section-heading {
        font-size: 32px !important;
        margin: 0 0 40px 0 !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #themenwelt .bs-themen__track {
        gap: 16px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index #themenwelt .bs-themen__card {
        flex: 0 0 30% !important;
    }
}

@media (min-width: 1200px) {
    .cms-index-index #themenwelt .bs-themen__card {
        flex: 0 0 16% !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index #themenwelt .bs-themen__card--featured {
        flex: 0 0 36% !important;
    }
}

@media (min-width: 1200px) {
    .cms-index-index #themenwelt .bs-themen__card--featured {
        flex: 0 0 20% !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #themenwelt .bs-themen__label {
        font-size: 15px !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #themenwelt .bs-themen__card--featured .bs-themen__label {
        font-size: 22px !important;
        padding: 0 24px 34px !important;
    }
}

/* ============================================================
   Themenwelten – Mobile Overlay nur fuer Featured-Card
   ("Alle Themenwelten"). Label sitzt absolut am unteren
   Bildrand IM Bild. Hoehen-Match zu Nachbar-Karten via
   Flex-Default-Stretch des Tracks + height:100% am Bild.
   ============================================================ */
@media (max-width: 767px) {
    .cms-index-index #themenwelt .bs-themen__card--featured,
    #themenwelt .bs-themen__card--featured {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }
    .cms-index-index #themenwelt .bs-themen__card--featured > .bs-themen__media,
    #themenwelt .bs-themen__card--featured > .bs-themen__media {
        height: 100% !important;
        aspect-ratio: auto !important;
    }
    .cms-index-index #themenwelt .bs-themen__card--featured > .bs-themen__media > .bs-themen__img,
    #themenwelt .bs-themen__card--featured > .bs-themen__media > .bs-themen__img {
        height: 100% !important;
        object-fit: cover !important;
    }
    .cms-index-index #themenwelt .bs-themen__card--featured > .bs-themen__label,
    #themenwelt .bs-themen__card--featured > .bs-themen__label {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        margin: 0 !important;
        padding: 36px 16px 16px !important;
        align-self: auto !important;
        color: #FFFFFF !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        text-align: left !important;
        text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55) !important;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%) !important;
        z-index: 2 !important;
    }
}

@media (max-width: 767px) {
    .cms-index-index.bs-seo-mode-collapse #portraittext:not(.bs-seo-open) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .cms-index-index.bs-seo-mode-collapse #portraittext.bs-seo-open {
        margin-top: 20px !important;
    }
    /* Kein horizontales Innenpadding: der Außenabstand kommt nur von .page-main (sonst doppelter „grüner" Rand auf Mobil) */
    .cms-index-index.bs-seo-mode-collapse #portraittext,
    .cms-index-index.bs-seo-mode-accordion #portraittext,
    .cms-index-index.bs-seo-mode-plain #portraittext {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index.bs-seo-mode-collapse #portraittext,
    .cms-index-index.bs-seo-mode-accordion #portraittext,
    .cms-index-index.bs-seo-mode-plain #portraittext {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #portraittext h1,
    .cms-index-index #portraittext h2:first-child {
        font-size: 26px !important;
    }
}

@media (max-width: 767px) {
    .cms-index-index.bs-seo-mode-collapse #bs-seo-toggle {
        margin: 0 auto 6px auto !important;
    }
}

@media (min-width: 768px) {
    .cms-index-index #partner-icons {
        padding: 24px 60px !important;
    }
}

@media (max-width: 767px) {
    .cms-index-index #partner-icons {
        padding-top: 8px !important;
        /* Kein horizontales Innenpadding: der Außenabstand kommt nur von .page-main (sonst doppelter „grüner" Rand auf Mobil) */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Servicepauschale-Hinweis ("*Der Versand …"): kein horizontales Innenpadding auf Mobil — Theme-LESS setzt sonst zusätzlich 0 10px on top of .page-main 0 20px */
    .cms-index-index .servicep {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* CMS-/Rechtstext-Fußnoten unter Produktlisten & Startseite: Mobil 14px (Lesbarkeit, gleiche Optik) */
@media (max-width: 767px) {
    .page-wrapper .footnotes,
    .page-wrapper .footnotes p,
    .page-wrapper .footnotes div,
    .page-wrapper .footnotes span,
    .page-wrapper .footnotes a,
    .page-wrapper .footnotes li {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }
}

@media (min-width: 768px) {
    #bs-newsletter-bar {
        padding: 40px 0 !important;
    }
}

@media (max-width: 767px) {
    #bs-newsletter-bar .bs-newsletter-bar__inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (min-width: 768px) {
    #bs-newsletter-bar .bs-newsletter-bar__inner {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 40px !important;
    }
}

@media (min-width: 768px) {
    #bs-newsletter-bar .bs-newsletter-bar__text {
        text-align: left !important;
    }
}

@media (min-width: 768px) {
    #bs-newsletter-bar .bs-newsletter-bar__inner > .bs-nl-icon {
        width: 160px !important;
    }
}

@media (min-width: 768px) {
    #bs-newsletter-bar .bs-newsletter-bar__headline {
        font-size: 26px !important;
    }
}

@media (min-width: 768px) {
    #bs-newsletter-bar .bs-newsletter-bar__sub {
        font-size: 15px !important;
    }
}

@media (max-width: 380px) {
    #bs-newsletter-bar .bs-newsletter-bar__btn {
        white-space: normal !important;
        max-width: 100% !important;
        padding: 12px 24px !important;
        text-align: center !important;
    }
}

@media (max-width: 767px) {
    /* Volle Viewport-Breite trotz Footer-Padding (vorher 100% + margin 0 = seitliche weisse Ränder) */
    #bs-newsletter-bar {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 767px) {
    .footer-container > .footer,
    .footer-container > .footer.content {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .bottom-container .bottom-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 767px) {
    .footer_zeile1 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .footer_zeile1 > .footer_content {
        text-align: center !important;
        width: 100% !important;
    }
    .footer_zeile1 .heading {
        text-align: center !important;
    }
    .bottom-container .bottom-inner {
        text-align: center !important;
    }
    .bottom-container .bottom-inner .links,
    .bottom-container .bottom-inner address {
        text-align: center !important;
    }
    .bottom-container .bottom-inner .links ul {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px 20px !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .bottom-container .bottom-inner .icons {
        display: flex !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    .bottom-container .footer-copyright {
        text-align: center !important;
    }
    /* Nur wenn Sticky-Aktionsleiste sichtbar (Homepage, body.bs-sticky-active) —
       sonst 80px Leerraum unten (Warenkorb/Checkout ohne Banner). */
    body.bs-sticky-active .bottom-container .bottom-inner {
        padding-bottom: 80px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .footer_zeile1 {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    .footer_zeile1 > .footer_content {
        flex: 0 0 50% !important;
        box-sizing: border-box !important;
    }
    /* Trust-Badges: Excellent + SSL nebeneinander, Sterne-Widget darunter (User 26.05.2026) */
    .footer_trusted.footer_content {
        display: grid !important;
        grid-template-columns: auto auto !important;
        grid-template-areas:
            "ts ssl"
            "stars stars" !important;
        gap: 8px 14px !important;
        align-items: center !important;
        justify-content: start !important;
        text-align: left !important;
    }
    .footer_trusted.footer_content > a,
    .footer_trusted.footer_content > img,
    .footer_trusted.footer_content > div,
    .footer_trusted.footer_content > script {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .footer_trusted.footer_content > a {
        grid-area: ts !important;
        display: block !important;
    }
    .footer_trusted.footer_content > a img {
        display: block !important;
        width: auto !important;
        max-width: 150px !important;
        max-height: 72px !important;
        height: auto !important;
        margin: 0 !important;
    }
    .footer_trusted.footer_content > img.ssl {
        grid-area: ssl !important;
        width: 140px !important;
        max-width: 140px !important;
        height: auto !important;
        margin: 0 !important;
    }
    .footer_trusted.footer_content > #MyCustomTrustbadge {
        grid-area: stars !important;
        width: 100% !important;
        max-width: 220px !important;
        height: auto !important;
        min-height: 64px !important;
        margin: 6px 0 0 0 !important;
    }

    /* Footer unten: Copyright-Zeile über volle Breite zentriert */
    .bottom-container .bottom-inner {
        display: grid !important;
        grid-template-areas:
            "links icons"
            "copyright copyright" !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .bottom-container .bottom-inner > .links {
        grid-area: links !important;
    }
    .bottom-container .bottom-inner .icons {
        grid-area: icons !important;
        align-self: center !important;
        margin: 0 !important;
    }
    .bottom-container .bottom-inner address {
        grid-area: copyright !important;
        text-align: center !important;
        justify-self: center !important;
        width: 100% !important;
        margin: 10px 0 0 0 !important;
    }
    .bottom-container .bottom-inner .footer-copyright {
        text-align: center !important;
    }
    .footer-container > .footer,
    .footer-container > .footer.content {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 767px) {
    .bs-mobile-phone-info {
        display: block;
        padding: 20px 16px 24px;
        border-top: 1px solid rgba(74, 104, 134, 0.2);
        text-align: center;
    }
    .bs-mobile-phone-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--bs-blue, #00446a) !important;
        font-size: 18px;
        font-weight: 700;
        text-decoration: none !important;
    }
    .bs-mobile-phone-icon {
        filter: brightness(0) saturate(100%) invert(17%) sepia(60%) saturate(1500%) hue-rotate(175deg) brightness(95%);
    }
    .bs-mobile-phone-hours {
        margin-top: 6px;
        font-size: 12px;
        color: #4a6886;
        line-height: 1.4;
    }
}


@media (prefers-reduced-motion: reduce) {
    .bs-anim,
    .bs-anim--visible,
    .bs-anim--stagger.bs-anim--visible {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Nur wenn Burger zu: horizontale Mega-Spalten-Optik. Bei body.overflow (Drawer offen) greifen die Slide-Regeln aus max-width:1023 — sonst fehlen top/height und .alles sitzt unten im #nav. */
@media (min-width: 768px) and (max-width: 1199px) {
    body:not(.overflow) .page-wrapper .topmenu #nav.bs-mega .nav-primary .alles .navcolumns .nav-column:not(.banner) {
        flex: 1 1 0% !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }
    body:not(.overflow) .page-wrapper .topmenu #nav.bs-mega .nav-primary .alles .navcolumns .nav-column {
        padding: 0 10px !important;
    }
    body:not(.overflow) .page-wrapper .topmenu #nav.bs-mega .nav-primary .alles .navcolumns .nav-column:first-child {
        padding-left: 0 !important;
    }
    body:not(.overflow) .page-wrapper .topmenu #nav.bs-mega .nav-primary .alles .navcolumns {
        flex-wrap: nowrap !important;
        padding: 0 16px !important;
        max-width: none !important;
    }
    body:not(.overflow) .page-wrapper .topmenu #nav.bs-mega .nav-primary .alles {
        position: absolute !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        left: 0 !important;
        right: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1200px) {
    html:not(.overflow) body:not(.overflow) .page-wrapper #nav.bs-mega .nav-primary .alles .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen,
    html:not(.overflow) body:not(.overflow) .page-wrapper #nav.bs-mega .navcolumns > .nav-column:first-child > .navitem.alles-anzeigen,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .navcolumns > .nav-column:first-child > .navitem.alles-anzeigen {
        color: #ec6608 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 4px 0 !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-align: left !important;
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        cursor: pointer !important;
        transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
        order: -1 !important;
        line-height: 1.4 !important;
        text-decoration: underline !important;
        text-decoration-color: #ec6608 !important;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
    }
    html:not(.overflow) body:not(.overflow) .page-wrapper #nav.bs-mega .nav-primary .alles .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen:hover,
    html:not(.overflow) body:not(.overflow) .page-wrapper #nav.bs-mega .nav-primary .alles .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen:active,
    html:not(.overflow) body:not(.overflow) .page-wrapper #nav.bs-mega .navcolumns > .nav-column:first-child > .navitem.alles-anzeigen:hover,
    html:not(.overflow) body:not(.overflow) .page-wrapper #nav.bs-mega .navcolumns > .nav-column:first-child > .navitem.alles-anzeigen:active,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen:hover,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen:active {
        background: transparent !important;
        color: var(--bs-blue, #00446a) !important;
        text-decoration-color: var(--bs-blue, #00446a) !important;
    }
    html:not(.overflow) body:not(.overflow) .page-wrapper #nav.bs-mega .nav-primary .alles .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen:focus-visible,
    html:not(.overflow) body:not(.overflow) .page-wrapper #nav.bs-mega .navcolumns > .nav-column:first-child > .navitem.alles-anzeigen:focus-visible,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen:focus-visible,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen:focus-visible,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .navcolumns > .nav-column:first-child > .navitem.alles-anzeigen:focus-visible,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .bs-mega-v2-inner > .nav-column:first-child > .level1.navitem.alles-anzeigen:focus-visible,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .bs-mega-v2-inner > .nav-column:first-child > .navitem.alles-anzeigen:focus-visible {
        outline: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a) !important;
        outline-offset: var(--bs-kb-focus-outline-offset, 2px) !important;
        box-shadow: none !important;
        color: var(--bs-kb-focus-color, #00446a) !important;
        text-decoration-color: var(--bs-kb-focus-color, #00446a) !important;
        border-radius: 4px;
    }
    /* ≥1200 + offenes Overlay: Listen-Stil erzwingen (falls andere Regeln die Pill nachziehen) */
    html.overflow body.overflow .page-wrapper #nav.bs-mega .navcolumns > .nav-column:first-child > .alles-anzeigen,
    html.overflow body.overflow .page-wrapper #nav.bs-mega-v2 .navcolumns > .nav-column:first-child > .alles-anzeigen,
    html.overflow body.overflow #nav.bs-mega .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen,
    html.overflow body.overflow #nav.bs-mega-v2 .navcolumns > .nav-column:first-child > .level1.navitem.alles-anzeigen {
        display: block !important;
        width: auto !important;
        max-width: calc(100% - 28px) !important;
        border-radius: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        text-align: left !important;
        padding: 14px 18px !important;
        margin: 12px 14px 10px !important;
        background: transparent !important;
        float: none !important;
        order: unset !important;
    }
}

/* ---- V2 Nav bar overrides (desktop only) ---- */
@media (min-width: 768px) {
    #nav.bs-mega-v2 {
        position: relative !important;
        overflow: visible !important;
    }
    #nav.bs-mega-v2 .nav-primary > div.level0 {
        position: static !important;
    }
    #nav.bs-mega-v2 .nav-primary > div.level0::after {
        content: none !important;
    }
}


/* Desktop-Hover-Mega: Schatten darf nach unten auslaufen */
@media (min-width: 1200px) {
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .nav-primary .alles.bs-mega-v2-fullwidth {
        overflow: visible !important;
        clip-path: none !important;
    }
}

@media (min-width: 1200px) {
    #nav.bs-mega-v2 .bs-mega-v2-inner > .nav-column:first-child > .alles-anzeigen {
        position: absolute !important;
        top: 14px !important;
        left: 30px !important;
        z-index: 5;
        margin: 0 !important;
    }
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .bs-mega-v2-inner > .nav-column:first-child > .alles-anzeigen {
        font-family: 'Montserrat', sans-serif !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border: none !important;
        background: transparent !important;
        color: #ec6608 !important;
        text-decoration: underline !important;
        text-decoration-color: #ec6608 !important;
        text-underline-offset: 3px;
        text-decoration-thickness: 1px;
        padding: 4px 0 !important;
        outline: none !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important;
        -webkit-tap-highlight-color: transparent;
    }
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .bs-mega-v2-inner > .nav-column:first-child > .level1.navitem.alles-anzeigen:focus-visible,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .bs-mega-v2-inner > .nav-column:first-child > .navitem.alles-anzeigen:focus-visible {
        outline: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a) !important;
        outline-offset: var(--bs-kb-focus-outline-offset, 2px) !important;
        box-shadow: none !important;
        color: var(--bs-kb-focus-color, #00446a) !important;
        text-decoration-color: var(--bs-kb-focus-color, #00446a) !important;
        border-radius: 4px;
    }
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .bs-mega-v2-inner > .nav-column:first-child > .alles-anzeigen:hover,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .bs-mega-v2-inner > .nav-column:first-child > .alles-anzeigen:active {
        color: var(--bs-blue, #00446a) !important;
        text-decoration-color: var(--bs-blue, #00446a) !important;
        background: transparent !important;
    }
}

@media (min-width: 1200px) {
    #nav.bs-mega-v2 .alles.bs-mega-marken.bs-mega-v2-fullwidth .navcolumns {
        padding: 28px 30px 0 !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 1200px) {
    #nav.bs-mega-v2 .alles.bs-mega-marken.bs-mega-v2-fullwidth .bs-mega-brand-grid {
        padding: 8px 24px 16px;
    }
}


/* V2 dropdowns are shown/hidden by customnavigation.js (hover delay logic).
   No CSS hover animation — the JS 400ms hide-delay prevents the "gap" problem. */

/* NEUHEITEN-Tab Mobile + Tablet: Punkt INLINE VOR „Neuheiten" (nicht darueber).
   Die generische 1023-Override Z. 2263-2275 setzt `div.level0 > a { display: block !important }`
   fuer ALLE Top-Level-Links (gleiche Spezifitaet wie Desktop-Regel customdesign.css Z. 4298
   `display: inline-flex !important`, aber spaeter im Cascade → gewinnt). Damit wird das ::before
   (Z. 4302-4310 in customdesign.css: 6×6 px Kreis, `display: block`) zu einem Block-Element auf
   eigener Zeile UEBER dem Text-Knoten „Neuheiten". User-Wunsch 19.05.2026 17:48: „der Punkt muss
   vor Neuheiten, nicht darueber auf mobil". User-Wunsch 20.05.2026 09:28: „mach den orangenen
   punkt vor Neuheiten auf tablet" — selbe Korrektur jetzt auch fuer Tablet (768-1199 px).
   Spezifitaet dieser Regel: `a.navitem` = 1 Element + 2 Klassen + bisherige 3 Klassen + 1 ID =
   (1,4,2) — hoeher als die generische 1023-Regel (1,3,2) → gewinnt. `display: flex` (statt
   inline-flex) sorgt fuer volle Zeilenbreite des `<a>` (Klickflaeche bleibt voll), gleichzeitig
   wird ::before zum horizontalen Flex-Item neben dem Text-Knoten (anonymes Flex-Item).
   margin-right: 6 px aus der Desktop-::before-Regel bleibt und schafft den Abstand zwischen
   Punkt und Text. */
@media (max-width: 1199px) {
    #nav.bs-mega-v2 .nav-primary > div.bs-mega-v2-neuheiten-tab > a.navitem {
        padding-left: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ---- V2 Mobile overrides ---- */
@media (max-width: 767px) {
    /* NEUHEITEN-Tab Mobile: Inline-Punkt links neben dem Text, gesamte Zeile LINKSBUENDIG.
       User-Wunsch 20.05.2026 09:37: Tablet-Override im 1023-Block oben hatte `justify-content:
       center !important` ergaenzt — das matched durch `max-width: 1199px` auch Mobile und hat
       „Neuheiten" auf Smartphone faelschlicherweise mit-zentriert (alle anderen Top-Level-Items
       Mobile sind linksbuendig). Mobile-spezifischere Regel hier setzt jetzt explizit
       `justify-content: flex-start !important` zurueck — Tablet behaelt seinen Center-Justify
       (matched nur ueber den 1023-Block) durch Source-Order/Specificity-Tie-Break. */
    #nav.bs-mega-v2 .nav-primary > div.bs-mega-v2-neuheiten-tab > a.navitem {
        padding-left: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brands {
        display: none !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles.bs-mega-v2-fullwidth {
        position: absolute !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        margin-top: 0 !important;
        height: 100% !important;
        transform: translateX(100%) !important;
        transition: transform 300ms !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        border: none !important;
        z-index: 1000 !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        padding: 0 !important;
        clip-path: none !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles.bs-mega-v2-fullwidth.show-cols {
        transform: translateX(0) !important;
        z-index: 60000 !important;
    }
    /* Make ALL sub-items visible inside their panel (base theme hides .navitem with height:0 + translateX) */
    #nav.bs-mega .nav-primary .alles .navitem,
    #nav.bs-mega-v2 .nav-primary .alles .navitem {
        height: auto !important;
        transform: none !important;
        position: relative !important;
    }
    #nav.bs-mega .nav-primary .alles .navitem.level1,
    #nav.bs-mega-v2 .nav-primary .alles .navitem.level1 {
        padding: 12px 40px 12px 16px !important;
        font-size: 14px !important;
        color: var(--bs-blue, #00446a) !important;
        font-weight: 500 !important;
        text-align: left !important;
        line-height: 1.4 !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-inner {
        display: block !important;
        padding: 0 !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-inner .nav-column:not(.banner) {
        padding: 0 !important;
        width: 100% !important;
        flex: none !important;
        border-left: none !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-neuheiten-cats {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-neuheiten-visual {
        display: none !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-neuheit-icon {
        display: none !important;
    }
    /* V2 featured/banner columns hidden on mobile */
    #nav.bs-mega-v2 .nav-primary .alles.bs-mega-v2-fullwidth .nav-column.banner {
        display: none !important;
    }
    /* NEUHEITEN-Spalte: Spezifitaet hoeher als .nav-column:not(.banner) (1 ID + 3 Klassen) */
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column.bs-mega-v2-neuheiten-cats {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .bs-mega-v2-neuheiten-cats > a.bs-mega-v2-neuheit-item {
        display: flex !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 15px !important;
        color: var(--bs-blue, #00446a) !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
    /* Level-2/3 Navitems: gleiche Optik wie Level-1 (Padding, Border, Font) */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem:not(.top-nav-item):not(.alles-anzeigen) {
        padding: 12px 40px 12px 16px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-align: left !important;
        line-height: 1.4 !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
    /* Level-2/3 Alles-anzeigen: orange, gleiche Hoehe */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .navitem.alles-anzeigen,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .navitem.alles-anzeigen {
        padding: 12px 40px 12px 16px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        color: #ec6608 !important;
    }
    /* "mehr »"-Link im Sub-Panel */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .more,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .more {
        padding: 12px 40px 12px 16px !important;
        font-size: 13px !important;
        color: var(--bs-blue-gray, #4a6886) !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
    /* Wrapper div.level2 / div.level3 ohne eigene Hoehe/Border — NUR Wrapper, keine Leaf-Items */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open > div.level2:not(.navitem),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > div.level2:not(.navitem),
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open > div.level3:not(.navitem),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > div.level3:not(.navitem) {
        border-bottom: none !important;
    }

    /* ---- Level 3: Full overlay inside the drawer on mobile ---- */
    #nav.bs-mega .nav-primary .alles .level2.navpar.navpar-open,
    #nav.bs-mega-v2 .nav-primary .alles .level2.navpar.navpar-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
        z-index: 20 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
    #nav.bs-mega .nav-primary .alles .level2.navpar.navpar-open > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .level2.navpar.navpar-open > .navitem:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles .level2.navpar.navpar-open > div > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .level2.navpar.navpar-open > div > .navitem:not(.top-nav-item) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        transform: none !important;
        position: relative !important;
        font-family: 'Quicksand', sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        color: var(--bs-blue, #00446a) !important;
        padding: 12px 40px 12px 16px !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }
    #nav.bs-mega .nav-primary .alles .level2.navpar.navpar-open > .navitem.alles-anzeigen,
    #nav.bs-mega-v2 .nav-primary .alles .level2.navpar.navpar-open > .navitem.alles-anzeigen {
        color: #ec6608 !important;
        font-weight: 600 !important;
    }
    #nav.bs-mega .nav-primary .alles .level2.navpar.navpar-open > .nav-item-responsive:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .level2.navpar.navpar-open > .nav-item-responsive:not(.top-nav-item) {
        display: block !important;
    }
}


/* ---- V2 Tablet: gleicher Slide wie Burger-Ebene 2 — kein translateX(-50%) (verschobenes Panel / nur Streifen sichtbar) ---- */
@media (min-width: 768px) and (max-width: 1199px) {
    #nav.bs-mega-v2 .nav-primary .alles.bs-mega-v2-fullwidth {
        position: absolute !important;
        top: 0 !important;
        margin-top: 0 !important;
        left: 0 !important;
        /* WICHTIG: Desktop-Regel in customdesign.css Z. 4331-4333 setzt min-width: 100vw + max-width: 100vw + width: 100vw mit !important. width: 100% allein reicht nicht — min-width: 100vw überstimmt es. Daher hier auch min/max-width explizit auf den Drawer-Bezug zurücksetzen, damit das Panel die Drawer-Breite (≤350 px Tablet, siehe Z. 2215-2217) einnimmt statt 100vw (= 820 px iPad-Air → Nav-Items ragen über den sichtbaren Drawer hinaus, User-Wunsch 19.05.2026 17:42: „auf tablet laufen die zeilen über den burgermneü einschub hinaus, die sollten aber nur so breit sein wie da sburgermenü"). */
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
        transform: translateX(100%) !important;
        transition: transform 300ms ease !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: #fff !important;
        border: none !important;
        padding: 0 !important;
        clip-path: none !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles.bs-mega-v2-fullwidth.show-cols {
        transform: translateX(0) !important;
        z-index: 60000 !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-inner {
        display: block !important;
        padding: 0 !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-inner .nav-column:not(.banner) {
        padding: 0 !important;
        width: 100% !important;
        flex: none !important;
        border-left: none !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles.bs-mega-v2-fullwidth .nav-column.banner {
        display: none !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured {
        max-width: none !important;
        flex-direction: column !important;
        gap: 12px !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlight-card,
    #nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-banner-wrap,
    #nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-featured-placeholder {
        max-width: none !important;
        min-width: 0 !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brands {
        display: none !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-neuheiten-visual {
        display: none !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-neuheit-icon {
        display: none !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles .navitem,
    #nav.bs-mega-v2 .nav-primary .alles .navitem.level1 {
        height: auto !important;
        transform: none !important;
        position: relative !important;
        padding: 12px 40px 12px 16px !important;
        font-size: 14px !important;
        color: var(--bs-blue, #00446a) !important;
        font-weight: 500 !important;
        text-align: left !important;
        line-height: 1.4 !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-neuheiten-cats {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
    }
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column.bs-mega-v2-neuheiten-cats {
        display: block !important;
        width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }
    /* NEUHEITEN-Unterlinks: Desktop setzt padding: 12px 0 — im Tablet-Drawer wie Mobile 14px/16px */
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .bs-mega-v2-neuheiten-cats > a.bs-mega-v2-neuheit-item {
        display: flex !important;
        height: auto !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 15px !important;
        color: var(--bs-blue, #00446a) !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    }
}

@media (min-width: 768px) {
    .customdesign-catv2 .category-descriptionbad.cat-desc-top h1 {
        font-size: 40px;
        margin: 24px 0 12px;
    }
}

/* Tablet: text and subcats stacked, both full width */
@media (min-width: 768px) and (max-width: 1199px) {
    body.customdesign-catv2.customdesign-cat-header-left .categoryhead {
        flex-direction: column !important;
        gap: 16px !important;
    }
    body.customdesign-cat-header-left .category-descriptionbad.cat-desc-top {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    .customdesign-cat-header-left .cat_overview.grid {
        flex: 1 1 100% !important;
        width: 100% !important;
        justify-content: stretch !important;
    }
    .customdesign-catv2 .cat_overview.grid .bs-subcats,
    .customdesign-catv2 .cat_overview.grid > .bs-subcats {
        width: 100% !important;
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    .customdesign-catv2 .bs-subcats__track {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .customdesign-catv2 .bs-subcats__item {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Wide tablet/small desktop: side by side with more room */
@media (min-width: 1200px) {
    body.customdesign-cat-header-left .category-descriptionbad.cat-desc-top {
        flex: 1 1 340px;
        max-width: 520px;
    }
    .customdesign-cat-header-left .cat_overview.grid {
        flex: 1 1 450px;
        justify-content: flex-end !important;
        align-items: flex-end;
    }
    body.customdesign-cat-header-left .cat_overview.grid .bs-subcats,
    body.customdesign-cat-header-left .cat_overview.grid > .bs-subcats {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
    body.customdesign-cat-header-left .bs-subcats__track {
        justify-content: flex-end !important;
        margin-left: auto;
    }
}


@media (max-width: 767px) {
    .customdesign-cat-header-left .categoryhead {
        flex-direction: column;
        gap: 12px;
    }
    /* flex-direction:column oben macht flex-basis aus customdesign.css zur HOEHE statt
     * Breite; das fixe flex:1 1 300px aus dem Desktop-Selektor (.customdesign-cat-header-left
     * .category-descriptionbad.cat-desc-top) erzwingt sonst 300px Mindesthoehe und erzeugt
     * grossen Leerraum unter dem Titel. Hier zurueck auf content-basiert. */
    .customdesign-cat-header-left .category-descriptionbad.cat-desc-top {
        max-width: 100%;
        flex: 0 1 auto !important;
        flex-basis: auto !important;
        min-width: 0 !important;
    }
    /* flex-direction:column — flex:1 1 400px aus customdesign.css wird zur Min-HOEHE (~400px)
     * unter dem Subcat-Grid, obwohl nur 2 Zeilen Inhalt (User: grosser Weissraum vor PLP). */
    .customdesign-cat-header-left .cat_overview.grid,
    body.customdesign-catv2.customdesign-cat-header-left .cat_overview.grid {
        flex: 0 1 auto !important;
        flex-basis: auto !important;
        min-height: 0 !important;
        align-self: stretch !important;
        width: 100% !important;
    }
    body.customdesign-catv2.customdesign-cat-header-left .categoryhead {
        margin-bottom: 16px !important;
    }
    .customdesign-catv2 .category-descriptionbad.cat-desc-top h1 {
        font-size: 24px;
        margin: 8px 0 6px;
    }
    .customdesign-catv2 .category-descriptionbad.cat-desc-top .webonly {
        font-size: 13px;
        line-height: 1.5;
    }
    .customdesign-cat-header-left .bs-cat-contact {
        margin-top: 10px;
        gap: 6px;
    }
    .customdesign-cat-header-left .bs-cat-contact__link {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .customdesign-catv2 .bs-subcats {
        margin: 10px 0 16px;
        overflow-x: hidden !important;
    }
    .customdesign-catv2 .cat_overview.grid {
        width: 100% !important;
        justify-content: stretch !important;
    }
    .customdesign-catv2 .cat_overview.grid .bs-subcats,
    .customdesign-catv2 .cat_overview.grid > .bs-subcats {
        width: 100% !important;
        flex: 0 1 auto !important;
        flex-basis: auto !important;
        max-width: 100% !important;
    }
    .customdesign-catv2 .bs-subcats__track {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 0;
        justify-content: stretch;
        width: 100% !important;
    }
    .customdesign-catv2 .bs-subcats__item {
        width: 100% !important;
        min-width: 0 !important;
    }
    .customdesign-catv2 .bs-subcats__label {
        font-size: 11px !important;
    }

    /* FakeCategories (Vorkonfiguriert / Konfigurierbar): nebeneinander, kompaktere Icons */
    .customdesign-catv2 .bs-fake-subcats {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 8px 12px !important;
        width: 100% !important;
        margin: 8px 0 14px !important;
    }
    .customdesign-catv2 .bs-fake-subcats .catimg {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        padding: 0 2px !important;
    }
    .customdesign-catv2 .bs-fake-subcats .catimg img {
        width: 56px !important;
        max-width: 56px !important;
        max-height: 48px !important;
        margin: 0 auto 5px !important;
    }
    body.customdesign-catv2.customdesign-cat-header-left .categoryhead > .bs-fake-subcats {
        justify-content: center !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .customdesign-catv2 .bs-subcats__item {
        width: 100% !important;
        min-width: 0 !important;
    }
    .customdesign-catv2 .bs-subcats__label {
        font-size: 12px;
        padding: 8px 10px 10px;
    }
    .customdesign-catv2 .bs-subcats__track {
        gap: 12px;
    }
}

@media (min-width: 1200px) {
    .customdesign-catv2 .bs-subcats__item {
        width: 180px;
    }
    .customdesign-catv2 .bs-subcats__label {
        font-size: 13px;
        padding: 10px 12px 12px;
    }
    .customdesign-catv2 .bs-subcats__track {
        gap: 16px;
    }
}

@media (max-width: 767px) {
    .customdesign-catv2 .bs-service-strip__headline {
        font-size: 14px;
    }
    .customdesign-catv2 .bs-service-strip__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    .customdesign-catv2 .bs-service-strip__divider {
        width: 100%;
        height: 1px;
    }
    .customdesign-catv2 .bs-service-strip__item {
        padding: 8px 12px;
    }
}

@media (min-width: 768px) {
    .customdesign-catv2 .category-products {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1200px) {
    .customdesign-catv2 .category-products {
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 768px) {
    .customdesign-catv2 .bs-col-toggle {
        display: flex;
    }
}


/* --- Product grid: MOBILE single-column layout --- */
@media screen and (max-width: 767px) {
    body.customdesign-catv2 .products-grid,
    body.customdesign-catv2 .products.wrapper.grid.products-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    body.customdesign-catv2 .products-grid .product-items,
    body.customdesign-catv2 .products-grid ol.product-items,
    body.customdesign-catv2 .products.wrapper.grid .product-items {
        display: block !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    body.customdesign-catv2 .products-grid .product-items > li.product-item,
    body.customdesign-catv2 .products-grid .product-items > .product-item {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        border-radius: 16px !important;
    }
    body.customdesign-catv2 .product-item .product-image-container,
    body.customdesign-catv2 .product-item .product-image-wrapper {
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    body.customdesign-catv2 .product-item img.product-image-photo {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    body.customdesign-catv2 .product-item .itemcontent,
    body.customdesign-catv2 .product-item .main-data {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    body.customdesign-catv2 .product-item .itemurl {
        margin: 0 !important;
        max-width: 100% !important;
        display: block !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item .product-image-wrapper {
        border-radius: 0 !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item .product-image-container {
        margin: 0 !important;
        padding: 0 !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item > .itemcontent > .main-data > *:not(.product-image-container):not(div.relative) {
        padding-left: 14px;
        padding-right: 14px;
    }
    .customdesign-catv2 .product-item-name,
    .customdesign-catv2 .product-item-name a,
    .customdesign-catv2 .product-item-name .product-item-link {
        font-size: 16px !important;
        line-height: 1.35 !important;
        padding-top: 8px;
        height: auto !important;
        overflow: visible !important;
    }
    .customdesign-catv2 .product-item .measures {
        margin-top: 4px !important;
        min-height: auto !important;
    }
    .customdesign-catv2 .product-item .measures span {
        font-size: 13px !important;
        padding: 3px 8px !important;
    }
    .customdesign-catv2 .product-item .price-box .price {
        font-size: 15px !important;
    }
    .customdesign-catv2 .product-item .streichpreis,
    .customdesign-catv2 .product-item .prev-prices .old-price .price {
        font-size: 11px !important;
    }
    .customdesign-catv2 .product-item .price-box {
        padding-bottom: 6px;
    }
    .customdesign-catv2 .product-item .add-left {
        display: none !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item:not(.hover) > .itemcontent > .main-data {
        padding-bottom: 6px !important;
    }
    /* Stichpunkte in der Kompaktkachel (kein Desktop-Hover auf Touch) */
    body.customdesign-catv2 .products-grid .product-items .product-item .add-bottom {
        display: block !important;
    }
    .customdesign-catv2 .product-item .add-bottom {
        padding: 0 14px 4px !important;
        font-size: 13px !important;
    }
    .customdesign-catv2 .product-item .add-bottom ul,
    .customdesign-catv2 .product-item .add-bottom .keyfacts {
        padding-left: 14px !important;
        margin: 3px 0 0 !important;
        font-size: 13px !important;
    }
    .customdesign-catv2 .product-item .add-bottom li {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin-bottom: 2px !important;
    }
    .customdesign-catv2 .product-item .add-bottom .productlabel {
        font-size: 13px !important;
    }
    .customdesign-catv2 .product-item .productlabel .label:not(img) {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }
    .customdesign-catv2 .product-item .productlabel img.label {
        height: 20px !important;
        max-height: 24px !important;
        padding: 0 !important;
        border-radius: 999px !important;
    }
    .customdesign-catv2 .product-item .bs-config-hint {
        font-size: 10px !important;
        padding: 4px 10px !important;
        margin: 10px 0 6px 0 !important;
    }
    .customdesign-catv2 .product-item .bs-swatch-overlay {
        gap: 4px;
        padding: 4px 14px 6px;
        margin-top: 6px !important;
        margin-right: 0 !important;
        margin-bottom: 2px !important;
        justify-content: flex-start !important;
    }
    .customdesign-catv2 .product-item .bs-swatch-overlay img {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }
    .customdesign-catv2 .product-item .bs-swatch-overlay .bs-swatch-more {
        width: 24px;
        height: 24px;
        min-width: 24px;
        font-size: 10px;
    }
    .customdesign-catv2 .product-item .bs-fast-delivery {
        font-size: 11px;
        gap: 4px;
        margin: 4px 14px 0;
    }
    .customdesign-catv2 .product-item .bs-fast-delivery__dot {
        width: 7px;
        height: 7px;
    }
    /*
     * Mobile: Badge-Pills oben mittig AUF dem Bild (analog zu Desktop/Tablet).
     * User-Anfrage 21.05.2026 14:38: „Auf dem Handy sind die Pills mit z.B. Topseller
     * und em -XX% nach unten gerutscht die sollen aber wie auf Desktop und Tablet
     * oben mittig auf dem Bild sein". Vorher wurde hier per position: static auf
     * Mobile in den Textstroem unter das Bild verschoben — jetzt explizit absolut
     * oben mittig mit Mobile-spezifischen kleineren Werten (top: 6px statt 8px,
     * padding: 0 6px statt 0 8px).
     */
    body.customdesign-catv2 .products-grid .product-items .product-item.bs-badge-pills:not(.hover) .bs-product-badges {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 6px !important;
        justify-content: center !important;
        padding: 0 6px !important;
        margin: 0 !important;
        gap: 4px !important;
        pointer-events: none;
    }
    .customdesign-catv2 .product-item.hover .bs-hover-info-col .bs-product-badges,
    .customdesign-catv2 .product-item.hover .product-item-info.main-data > .bs-product-badges {
        gap: 4px;
        padding: 0;
        top: auto;
        margin: 0 0 6px 0;
    }
    .customdesign-catv2 .product-item .bs-badge {
        padding: 5px 10px;
        font-size: 10px;
    }
    .customdesign-catv2 .product-item .labelpfeil {
        display: none !important;
    }
    .customdesign-catv2 .product-item .prev-prices {
        position: relative !important;
        width: auto !important;
    }
    body.customdesign-catv2 .product-item .relative {
        max-width: 100% !important;
        overflow: hidden !important;
    }
    body.customdesign-catv2 .product-item .separator-banner {
        font-size: 12px !important;
        padding: 10px 14px !important;
    }
    .customdesign-catv2 .bs-separator-v2__inner {
        flex-direction: column !important;
        text-align: center !important;
        /* Mehr Luft oben/unten — dafür Icon und Text direkt zusammen (kein Gap dazwischen). */
        padding: 18px 20px !important;
        gap: 0 !important;
    }
    .customdesign-catv2 .bs-separator-v2__content {
        text-align: center !important;
    }

    /* Trust-Störer: vertikaler Abstand wie zwischen Produktkacheln (12px). */
    body.customdesign-catv2 .products-grid .product-items > li.bs-separator-v2 {
        margin: 12px 0 !important;
    }
    body.customdesign-catv2 .products-grid .product-items > li.bs-cat-list-promo {
        margin: 12px 0 !important;
    }

    /* Pagination: alles in EINER Zeile zentriert.
       Standard-Magento `.pages-items { padding: 2px 40px 0 }` aus styles-m.css
       hat auf 390px Viewport links/rechts 40px geklaut und so den Umbruch
       (current + 4 frame-pages + ... last + next) provoziert. Plus das
       bisherige `flex-basis: 100% !important` auf .action erzwang den
       Naechster-Pfeil auf eine eigene Zeile. Beides hier neutralisiert.
       Zusammen mit setFrameLength(3) im pager.phtml (statt 5) passt der
       Pager nun zuverlaessig in eine Zeile: 1, 2, 3, … XX, > */
    .customdesign-catv2 .pages,
    .customdesign-catv2 .pages .items.pages-items {
        padding: 0 !important;
        margin: 0 !important;
    }
    .customdesign-catv2 .pages .items.pages-items {
        gap: 2px !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
    }
    .customdesign-catv2 .pages .items.pages-items .item.current > span,
    .customdesign-catv2 .pages .items.pages-items .item > a.page:not(.next):not(.previous) {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        font-size: 14px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    .customdesign-catv2 .pages .items.pages-items .item.current > span {
        min-width: 34px !important;
        max-width: 34px !important;
    }
    .customdesign-catv2 .pages .items.pages-items .item a.action,
    .customdesign-catv2 .pages .items.pages-items .item a.link.next,
    .customdesign-catv2 .pages .items.pages-items .item a.link.previous {
        padding: 6px 10px !important;
        font-size: 14px !important;
        flex-basis: auto !important;
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        white-space: nowrap !important;
    }

    .customdesign-catv2 .product-item .icon-versand {
        display: none !important;
    }
    .customdesign-catv2 .product-item .versand {
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }
    /* Gleiche Spezifität wie customdesign.css (Badge ohne Hover versteckt) — Pill unter Lieferzeit */
    .customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand .gratis-versand {
        background: var(--bs-blue-light, #f0f6fa) !important;
        color: var(--bs-blue, #00446a) !important;
        font-weight: 600 !important;
        padding: 4px 12px !important;
        border-radius: 50px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        height: auto !important;
        display: inline-block !important;
        visibility: visible !important;
        overflow: visible !important;
        margin-top: 6px !important;
        align-self: flex-start !important;
    }

    /* =====================================================
       Single-Column Mobile: Equal-Height-Flex-Logik abschalten
       =====================================================
       In customdesign.css ist die CatV2-Kachel als Flex-Kette aufgebaut, damit
       in einer Grid-Reihe (3 Spalten Desktop) alle Karten gleich hoch sind und
       der Preisblock unten ausgerichtet ist:
         .product-item { display: flex; flex-direction: column }
         > .itemcontent { flex: 1 }
         > .main-data { flex: 1; padding-bottom: 12px }
         .main-data > .bs-hover-info-col { flex: 1 1 auto }
         .bs-hover-info-col > .prev-prices { margin-top: auto }
         .bs-hover-info-col:not(:has(.prev-prices)) > .price-box { margin-top: auto }

       Auf Mobile (1 Spalte, .product-items display:block) gibt es keinen
       Grid-Zwang gleicher Hoehe → die `flex:1` + `margin-top:auto`-Logik
       reserviert sinnloserweise Resthoehe **unter** dem letzten Inhalt
       (Stichpunkt-Liste) und es entsteht ein 80-120px hoher Leerraum
       (siehe Screenshot 17:33:49). Auf Mobile alles auf intrinsische Hoehe
       zwingen. */
    .customdesign-catv2 .products-grid .product-items > li.product-item,
    .customdesign-catv2 .products-grid .product-items > .product-item {
        display: block !important;
    }
    .customdesign-catv2 .products-grid .product-items > li.product-item > .itemcontent,
    .customdesign-catv2 .products-grid .product-items > .product-item > .itemcontent,
    .customdesign-catv2 .products-grid .product-items > li.product-item > .itemcontent > .main-data,
    .customdesign-catv2 .products-grid .product-items > .product-item > .itemcontent > .main-data {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
    }
    .customdesign-catv2 .products-grid .product-items > li.product-item:not(.hover) .main-data > .bs-hover-info-col,
    .customdesign-catv2 .products-grid .product-items > .product-item:not(.hover) .main-data > .bs-hover-info-col {
        flex: 0 0 auto !important;
        flex-grow: 0 !important;
    }
    .customdesign-catv2 .products-grid .product-items > li.product-item:not(.hover) .bs-hover-info-col > .prev-prices,
    .customdesign-catv2 .products-grid .product-items > .product-item:not(.hover) .bs-hover-info-col > .prev-prices,
    .customdesign-catv2 .products-grid .product-items > li.product-item:not(.hover) .bs-hover-info-col > .price-box,
    .customdesign-catv2 .products-grid .product-items > .product-item:not(.hover) .bs-hover-info-col > .price-box {
        margin-top: 0 !important;
    }
}

/* Tablet: 2 columns — Stichpunkte (.add-bottom / .keyfacts) immer sichtbar (kein Hover wie am Desktop) */
@media (min-width: 768px) and (max-width: 1199px) {
    body.customdesign-catv2 .products-grid .product-items {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-gap: 14px !important;
    }
    body.customdesign-catv2 .products-grid .product-items .product-item {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    /* Theme: .add-bottom ab 1024px ohne Hover aus — hier 768–1199 explizit (siehe auch Touch-Override unten) */
    .customdesign-catv2 .products-grid .product-items .product-item .add-bottom {
        display: block !important;
        font-size: 13px !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item .add-bottom ul,
    .customdesign-catv2 .products-grid .product-items .product-item .add-bottom .keyfacts,
    .customdesign-catv2 .products-grid .product-items .product-item .add-bottom li {
        font-size: 13px !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item:not(.hover) > .itemcontent > .main-data {
        padding-bottom: 14px !important;
    }
    .customdesign-catv2 .product-item .add-bottom {
        padding: 0 14px 4px !important;
    }
    .customdesign-catv2 .product-item .add-bottom ul,
    .customdesign-catv2 .product-item .add-bottom .keyfacts {
        padding-left: 14px !important;
        margin: 3px 0 0 !important;
    }
    .customdesign-catv2 .product-item .add-left {
        display: none !important;
    }
    .customdesign-catv2 .product-item .icon-versand {
        display: none !important;
    }
    .customdesign-catv2 .product-item .versand {
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand .gratis-versand {
        background: var(--bs-blue-light, #f0f6fa) !important;
        color: var(--bs-blue, #00446a) !important;
        font-weight: 600 !important;
        padding: 4px 12px !important;
        border-radius: 50px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        height: auto !important;
        display: inline-block !important;
        visibility: visible !important;
        overflow: visible !important;
        margin-top: 6px !important;
        align-self: flex-start !important;
    }

    /*
     * 2-Spalten-Tablet: Grid-Zeilen gleich hoch — Preis + Lieferzeit unten wie Desktop
     * (margin-top:auto auf .prev-prices / .price-box in .bs-hover-info-col).
     */
    .customdesign-catv2 .products-grid .product-items > li.product-item,
    .customdesign-catv2 .products-grid .product-items > .product-item {
        display: flex !important;
        flex-direction: column !important;
    }
    .customdesign-catv2 .products-grid .product-items > li.product-item > .itemcontent,
    .customdesign-catv2 .products-grid .product-items > .product-item > .itemcontent {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .customdesign-catv2 .products-grid .product-items > li.product-item > .itemcontent > .main-data,
    .customdesign-catv2 .products-grid .product-items > .product-item > .itemcontent > .main-data {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .customdesign-catv2 .products-grid .product-items > li.product-item:not(.hover) .main-data > .bs-hover-info-col,
    .customdesign-catv2 .products-grid .product-items > .product-item:not(.hover) .main-data > .bs-hover-info-col {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    .customdesign-catv2 .products-grid .product-items > li.product-item:not(.hover) .bs-hover-info-col > .prev-prices,
    .customdesign-catv2 .products-grid .product-items > .product-item:not(.hover) .bs-hover-info-col > .prev-prices {
        margin-top: auto !important;
    }
    .customdesign-catv2 .products-grid .product-items > li.product-item:not(.hover) .bs-hover-info-col:not(:has(> .prev-prices)) > .price-box,
    .customdesign-catv2 .products-grid .product-items > .product-item:not(.hover) .bs-hover-info-col:not(:has(> .prev-prices)) > .price-box {
        margin-top: auto !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand .lieferzeit {
        padding-bottom: 2px;
    }
}


/*
 * Großes Tablet / iPad quer (≥1200px): Theme verbirgt .add-bottom bis Hover — Touch hat keinen zuverlässigen Hover.
 * Ergänzung zu Magento_Catalog _listings.less (dort (hover:none)|(pointer:coarse)-Override für .products-grid).
 */
@media (min-width: 1200px) {
    @media (hover: none), (pointer: coarse) {
        body.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .add-bottom {
            display: block !important;
            padding: 0 14px 4px !important;
        }
        body.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) > .itemcontent > .main-data {
            padding-bottom: 6px !important;
        }
        body.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .add-bottom ul,
        body.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .add-bottom .keyfacts {
            margin: 3px 0 0 !important;
        }
        body.customdesign-catv2 .product-item:not(.hover) .versand {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
        }
        body.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand .icon-versand {
            display: none !important;
        }
        body.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand .gratis-versand {
            background: var(--bs-blue-light, #f0f6fa) !important;
            color: var(--bs-blue, #00446a) !important;
            font-weight: 600 !important;
            padding: 4px 12px !important;
            border-radius: 50px !important;
            font-size: 13px !important;
            line-height: 1.4 !important;
            height: auto !important;
            display: inline-block !important;
            visibility: visible !important;
            margin-top: 6px !important;
            align-self: flex-start !important;
        }

        /* Großes Tablet / Touch: gleiche PLP-Kartenlogik wie 768–1199 — Preis nicht nach unten ziehen */
        body.customdesign-catv2 .products-grid .product-items > li.product-item > .itemcontent,
        body.customdesign-catv2 .products-grid .product-items > .product-item > .itemcontent,
        body.customdesign-catv2 .products-grid .product-items > li.product-item > .itemcontent > .main-data,
        body.customdesign-catv2 .products-grid .product-items > .product-item > .itemcontent > .main-data {
            flex: 0 0 auto !important;
            flex-grow: 0 !important;
        }
        body.customdesign-catv2 .products-grid .product-items > li.product-item:not(.hover) .main-data > .bs-hover-info-col,
        body.customdesign-catv2 .products-grid .product-items > .product-item:not(.hover) .main-data > .bs-hover-info-col {
            flex: 0 0 auto !important;
            flex-grow: 0 !important;
        }
        body.customdesign-catv2 .products-grid .product-items > li.product-item:not(.hover) .bs-hover-info-col > .prev-prices,
        body.customdesign-catv2 .products-grid .product-items > .product-item:not(.hover) .bs-hover-info-col > .prev-prices,
        body.customdesign-catv2 .products-grid .product-items > li.product-item:not(.hover) .bs-hover-info-col > .price-box,
        body.customdesign-catv2 .products-grid .product-items > .product-item:not(.hover) .bs-hover-info-col > .price-box {
            margin-top: 0 !important;
        }
    }
}


/* Small desktop: 3 columns (Default) bzw. 4 Spalten per Kategorie-Attribut
 * cd_plp_grid_cols (Patch AddPlpGridColsCategoryAttribute). .bs-grid-cols-2
 * gibt es nicht mehr (2-Spalten-Button am Toolbar wurde 2026-05-20 entfernt). */
@media (min-width: 1200px) {
    body.customdesign-catv2 .products-grid .product-items {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-gap: 16px !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-3 .product-items {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-items {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    body.customdesign-catv2 .products-grid .product-items .product-item {
        width: auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* 4-Spalten-Feintuning (Desktop >=1200px): kompaktere Typo/Padding/Badges,
 * damit die schmaleren Kacheln visuell ausgewogen wirken. Tablet/Mobile bleiben
 * unveraendert; 3-Spalten-Default bleibt unveraendert. Alles strikt unter
 * .products-grid.bs-grid-cols-4 gescoped. */
@media (min-width: 1200px) {
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .product-item-name {
        font-size: 16px !important;
        line-height: 1.3 !important;
        padding-top: 8px !important;
        padding-left: 0 !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .price-box .price {
        font-size: 18px !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .prev-prices,
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .prev-prices .price {
        font-size: 13px !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .main-data {
        padding-bottom: 8px !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .bs-hover-info-col,
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .price-box,
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .prev-prices {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .varianten {
        margin: 12px 10px 10px !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .bs-badge {
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .productlabel {
        top: 8px !important;
        right: 8px !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item .measures span {
        font-size: 12px !important;
        padding: 2px 6px !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item {
        border-radius: 18px !important;
    }
    /* Hover-Overlay enger zuegeln, damit das aufklappende Detail-Panel nicht
     * zwei schmalere 4-Spalten-Kacheln ueberlagert. Falls nach Live-Test der
     * Wunsch besteht, Hover ganz zu deaktivieren, ist das hier der Hebel. */
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item.hover .itemcontent {
        --hover-max-w: 720px;
    }
    /* Hover: 50/50 Bild | Text — ausgewogene Aufteilung statt schmaler Bildspalte */
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item.hover .itemcontent .main-data {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item.hover .itemcontent .main-data .bs-hover-visual-col .product-image-container {
        min-height: var(--bs-hover-img-h, 280px);
        height: var(--bs-hover-img-h, 280px);
        max-height: min(var(--bs-hover-img-h, 320px), 52vh);
    }
    body.customdesign-catv2 .products-grid.bs-grid-cols-4 .product-item.hover .itemcontent .main-data > .bs-hover-info-col {
        padding: 10px 18px 18px !important;
    }
}

@media (min-width: 1200px) {
    .customdesign-catv2 .products-grid .product-items {
        grid-gap: 20px !important;
    }
}

@media (max-width: 767px) {
    .customdesign-catv2 .bs-cat-list-promo__media img {
        aspect-ratio: 1 / 1;
    }
}

@media (min-width: 768px) {
    .customdesign-catv2 #portraittext {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 1200px) {
    .customdesign-catv2 #portraittext {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media (min-width: 768px) {
    .customdesign-catv2 #portraittext h1,
    .customdesign-catv2 #portraittext h2:first-child {
        font-size: 26px !important;
    }
}

@media (min-width: 768px) {
    .customdesign-catv2 .filter-top {
        padding: 0 40px;
    }
}

@media (min-width: 1200px) {
    .customdesign-catv2 .filter-top {
        padding: 0 60px;
    }
}


/* Kompaktkachel ≥1200px: ohne Hover kein Versandblock — .versand liegt in .bs-hover-info-col (display:contents zählt nicht fürs >-Kombinator);
   daher Nachfahren-Selektor statt .main-data > .versand */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent {
        min-width: 0 !important;
        width: auto !important;
        display: flex !important;
        flex-direction: column;
        border: none !important;
        box-shadow: none !important;
        border-radius: 24px;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data {
        display: flex !important;
        flex-direction: column;
        min-height: 0 !important;
        grid-template-columns: none !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data > .bs-hover-visual-col {
        grid-column: auto !important;
        width: 100%;
        order: 0;
        padding: 0;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data > .bs-hover-info-col {
        grid-column: auto !important;
        width: 100%;
        order: 1;
        padding: 10px 12px 12px;
        box-sizing: border-box;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .product-image-container {
        border-radius: 24px 24px 0 0;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent > .add-bottom {
        display: none !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .versand {
        margin-left: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left {
        padding-left: 20px;
        padding-right: 12px;
        padding-bottom: 8px;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.hover {
        overflow: hidden;
    }
}


/* Tablet/Desktop: hover card breaks out of grid cell — reinforce (merged CSS order + stale pub/static) */
@media (min-width: 768px) {
    body.customdesign-catv2 .products-grid .product-items .product-item.hover,
    .customdesign-catv2 .products-grid .product-items .product-item.hover {
        overflow: visible !important;
        position: relative;
        z-index: 5;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent {
        position: absolute !important;
        z-index: 5 !important;
    }
    body.customdesign-catv2 .column.main .products.wrapper.grid,
    body.customdesign-catv2 .column.main .products-grid,
    .customdesign-catv2 .column.main .products.wrapper.grid,
    .customdesign-catv2 .column.main .products-grid {
        overflow: visible;
    }
    body.customdesign-catv2 .products-grid .product-items,
    body.customdesign-catv2 .products-grid ol.product-items,
    .customdesign-catv2 .products-grid .product-items,
    .customdesign-catv2 .products-grid ol.product-items {
        overflow: visible;
    }
    /* Solutioo_Searchsol new-r.css sets .main-data.relative { width: 293px } — kills hover width */
    .customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .product-item-info.main-data.relative {
        width: 100% !important;
        max-width: none !important;
    }
}

@media screen and (max-width: 767px) {
    /* Listing/Suche: Pills nur bei Hover-Karte als Fließtext — inaktive Karte: Overlay auf Bild (Basis-Regel) */
    .customdesign-catv2 .product-item.hover .bs-hover-info-col .bs-product-badges,
    .customdesign-catv2 .product-item.hover .product-item-info.main-data > .bs-product-badges {
        gap: 6px;
        padding: 0;
        margin: 0 0 6px 0;
        top: auto;
        position: static;
        justify-content: flex-start;
    }
    .badshop-slider .product-item.bs-badge-pills .bs-product-badges,
    .teaser-content .product-item.bs-badge-pills .bs-product-badges {
        position: absolute;
        gap: 6px;
        padding: 0 8px;
        top: 10px;
        left: 0;
        right: 0;
        justify-content: center;
        margin: 0;
    }
    .product-item.bs-badge-pills .bs-badge {
        padding: 7px 14px;
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    /* Grid: Logo row + always-visible search below
       1fr | auto | 1fr — gleich breite Seitenflächen, Logo exakt mittig (nicht auto/1fr/auto) */
    .bs-header-v2.page-header,
    body.bs-header-v2 .page-header {
        position: relative;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        grid-template-rows: 10px 60px 6px 42px 8px !important;
        grid-template-areas:
            ". . ."
            "menu logo cart"
            ". . ."
            "search search search"
            ". . ." !important;
    }

    /* Search always visible – full width edge-to-edge */
    body.bs-header-v2 .header-suche {
        display: flex !important;
        align-items: center;
        grid-area: search;
        padding: 0 !important;
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        width: calc(100% + 40px) !important;
        box-sizing: border-box !important;
    }

    /* Expanded state no longer needed — search is always open */
    body.bs-header-v2 .page-header.bs-search-expanded {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        grid-template-rows: 10px 60px 6px 42px 8px !important;
        grid-template-areas:
            ". . ."
            "menu logo cart"
            ". . ."
            "search search search"
            ". . ." !important;
    }

    /* Hamburger */
    body.bs-header-v2 .header-menu {
        grid-area: menu;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        justify-self: start;
        min-width: 0;
    }

    /* Logo: exakt mittig zwischen Burger (links) und Warenkorb (rechts) — nicht am Grid-Spalt
       hängen (sonst wirkt es bei breiterem „Menü“-Block näher am Burger). */
    body.bs-header-v2 .logo-wrapper,
    body.bs-header-v2 header.page-header .logo-wrapper {
        position: absolute;
        left: 50%;
        top: 10px;
        transform: translateX(-50%);
        height: 60px;
        width: min(200px, calc(100% - 108px));
        max-width: 200px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        grid-area: unset !important;
        z-index: 1;
        pointer-events: none;
        text-align: center !important;
    }

    body.bs-header-v2 .logo-wrapper #logo {
        pointer-events: auto;
        display: block !important;
        width: 100% !important;
        max-width: 178px !important;
        height: 48px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        background: url('../../images/header/logo_simpel.svg') no-repeat center center !important;
        background-size: contain !important;
    }

    body.bs-header-v2 .logo-wrapper #logo img {
        display: none !important;
    }

    /* Icons wrapper: only cart visible, positioned right */
    body.bs-header-v2 .icons-wrapper {
        grid-area: cart !important;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        justify-self: end;
        gap: 0;
        min-width: 0;
    }

    /* Hide search toggle, account, wishlist, phone from icon bar */
    body.bs-header-v2 #mobile-search-toggle,
    body.bs-header-v2 #konto-wrapper,
    body.bs-header-v2 #merkliste-wrapper,
    body.bs-header-v2 #telefon-wrapper {
        display: none !important;
    }

    /* Cart stays visible */
    body.bs-header-v2 #warenkorb-wrapper {
        display: flex !important;
    }

}


/* Desktop/Tablet: header-v2 menu links hidden */
@media (min-width: 768px) {
    .bs-header-v2-menu-links {
        display: none !important;
    }
}


@media (min-width: 768px) {
    .bs-highlights {
        margin-top: 64px;
    }
}


/* ---- Responsive: tablet ---- */
@media (min-width: 768px) and (max-width: 1199px) {
    .bs-highlights__mosaic.bs-highlights__mosaic--others-0,
    .bs-highlights__mosaic.bs-highlights__mosaic--others-1,
    .bs-highlights__mosaic.bs-highlights__mosaic--others-2,
    .bs-highlights__mosaic.bs-highlights__mosaic--others-3 {
        grid-template-columns: 1fr 1fr;
        /* Gestaffeltes 4-Zeilen-Layout wie Desktop: Die blaue Empfehlungs-Karte
           (links oben) soll FLACHER sein als ihre rechte Nachbar-Kachel (Nobilia),
           und die Kachel darunter (Pelipal) HOEHER als ihre rechte Nachbarin (Puris).
           Dafuer teilen linke und rechte Spalte NICHT mehr dieselbe Trennlinie:
           - Track 1: Hero (volle Breite)
           - Track 2: blaue Karte (nur diese eine) -> flach (~190 px)
           - Track 3: Zusatz-Track, den Nobilia (oben rechts) mitnutzt
           - Track 4: untere Kacheln-Hoehe
           Spaltenhoehen bleiben gleich: links 190+gap+(100+gap+290)=604,
           rechts (190+gap+100)+gap+290=604.
           (User-Wunsch 08.06.2026: blaue Box ~1/3 flacher, Box darunter hoeher.) */
        grid-template-rows: 500px 190px 100px 290px;
        gap: 12px;
        height: auto;
    }
    .bs-highlights__hero {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    /* Hinweis: Frueher hier `.bs-highlights__hero-img { object-fit: contain }`
       und `.bs-highlights__tile--3/--4 .bs-highlights__tile-img { object-fit:
       contain }` als Overrides — das wirkte aber als „Bild zentriert mit
       Weissraum links/rechts" (User-Beobachtung 19.05.2026 15:00 auf iPhone
       12 Pro: „rechts und links ein weissraum. also das muss schon ausgefuellt
       sein. aber das ausgefuellte Bild muss mittig platziert sein."). Loesung:
       Wir loeschen die contain-Overrides; die Basis-CSS aus customdesign.css
       Z. 7184-7193 / 7322-7330 (`object-fit: cover; object-position: center
       center` + `position: absolute !important; inset: 0 !important`) greift
       jetzt sauber und fuellt den Container voll aus, beschneidet symmetrisch
       oben/unten — das Bild wirkt zentriert und ohne Rand. Der Box-Sizing-Fix
       mit `inset: 0 !important` (siehe Bug-Fix 14:58) sorgt jetzt dafuer, dass
       cover wirklich die volle Container-Hoehe nutzt. */
    /* Hero-Karte (oben): Produktname + Preis auf Tablet kleiner. User-Wunsch
       19.05.2026 (iPad Air 820 px, DevTools-Inspector zeigte vorher
       `span.bs-highlights__hero-name 18px Quicksand` und
       `span.bs-highlights__price 22px Montserrat`): „produktname auf 15px
       und Preise auf 17px" fuer alle vier Kacheln. Die kleinen Tile-Kacheln
       (tile--2/--3/--4) erfuellen das bereits in der Basis-CSS (customdesign.
       css Z. 7352-7358 `tile-name 15px` und Z. 7369-7373 `tile-prices price
       17px`) — daher genuegt es, nur die Hero-Variante hier zu ueberschreiben.
       Spiegelt die Mobile-Regel weiter unten 1:1 (Z. 4994-5005) und stellt
       Tablet+Mobile auf den gleichen Skalierungs-Stand. */
    .bs-highlights__hero-name {
        font-size: 15px;
    }
    .bs-highlights__hero-prices .bs-highlights__price {
        font-size: 17px;
    }
    .bs-highlights__category-card {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        padding: 28px 24px;
        min-height: 0;
        height: 100%;
        box-sizing: border-box;
    }
    .bs-highlights__tile--2 {
        grid-column: 2 / 3;
        /* Nobilia (oben rechts) spannt Track 2+3 -> hoeher als die flache blaue Karte */
        grid-row: 2 / 4;
        min-height: 0;
        height: 100%;
    }
    .bs-highlights__tile--3 {
        grid-column: 1 / 2;
        /* Pelipal (unten links) spannt Track 3+4 -> hoeher als Puris rechts */
        grid-row: 3 / 5;
        min-height: 0;
        height: 100%;
    }
    .bs-highlights__tile--4 {
        grid-column: 2 / 3;
        grid-row: 4 / 5;
        min-height: 0;
        height: 100%;
    }
    .bs-highlights__tile {
        min-height: 0;
    }
    .bs-highlights__heading {
        font-size: 26px;
    }
    .bs-highlights__cat-title {
        font-size: 20px;
    }
}


/* ---- Responsive: mobile ---- */
@media (max-width: 767px) {
    .bs-highlights {
        padding: 0;
        margin-top: 32px;
    }
    .cms-index-index .bs-highlights__heading {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .cms-index-index .bs-highlights__mosaic.bs-highlights__mosaic--others-0,
    .cms-index-index .bs-highlights__mosaic.bs-highlights__mosaic--others-1,
    .cms-index-index .bs-highlights__mosaic.bs-highlights__mosaic--others-2,
    .cms-index-index .bs-highlights__mosaic.bs-highlights__mosaic--others-3 {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    .bs-highlights__heading {
        font-size: 20px;
        margin-bottom: 16px;
    }
    .bs-highlights__mosaic.bs-highlights__mosaic--others-0,
    .bs-highlights__mosaic.bs-highlights__mosaic--others-1,
    .bs-highlights__mosaic.bs-highlights__mosaic--others-2,
    .bs-highlights__mosaic.bs-highlights__mosaic--others-3 {
        grid-template-columns: 1fr 1fr;
        /* User-Wunsch: Hero (Zeile 1, "b collection") auf fix 300 px statt
           minmax(260px, 52vw). Bei iPhone 12 Pro 390 px Breite war 52vw ≈ 203 px
           — die Hero-Karte fiel sichtbar unter ihre 260 px Min und das Produkt-
           motiv wirkte gedrueckt. 300 px fest gibt der Hauptkachel deutlich mehr
           Praesenz, unabhaengig von der Viewport-Breite. */
        grid-template-rows: 300px auto minmax(200px, 44vw);
        gap: 10px;
        height: auto;
    }
    .bs-highlights__hero {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }
    /* Hinweis: Frueher hier `.bs-highlights__hero-img { object-fit: contain }`
       als Override — geloescht (siehe Begruendung im Tablet-Block oben).
       Basis-CSS `object-fit: cover; object-position: center center` greift
       jetzt natuerlich. */
    .bs-highlights__category-card {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
        padding: 24px 20px;
    }
    .bs-highlights__tile--2 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .bs-highlights__tile--3 {
        grid-column: 2 / 3;
        grid-row: 3 / 4;
    }
    .bs-highlights__tile--4 {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
        /* User-Wunsch: untere Burgbad-Kachel auf fix 300 px Hoehe (vorher
           min-height 220 px). Da tile--4 auf Mobil volle Breite einnimmt
           (grid-column 1/3), wirkte 220 px breit-aber-flach; 300 px gibt dem
           600x600 Produktmotiv saubere Buehne. */
        min-height: 300px;
    }
    /* Hinweis: Frueher hier `.bs-highlights__tile--4 .bs-highlights__tile-img
       { object-fit: contain }` — geloescht. Basis-CSS `object-fit: cover;
       object-position: center center` greift jetzt fuer alle Tile-Bilder, und
       der Box-Sizing-Fix mit `inset: 0 !important` (siehe Bug-Fix 14:58) sorgt
       dafuer, dass cover wirklich die Container-Hoehe nutzt — symmetrisch oben/
       unten beschnitten, voll ausgefuellt, mittig. */
    /* Hero-Karte (oben): Produktname + Preis auf Mobil kleiner. User-Wunsch
       19.05.2026 (iPhone 12 Pro 390 px, DevTools-Inspector zeigte vorher
       `span.bs-highlights__hero-name 18px Quicksand` und
       `span.bs-highlights__price 22px Montserrat`): „der produktname muss
       in 15px und der preis in 17px". Selektor `.bs-highlights__hero-prices
       .bs-highlights__price` deckungsgleich mit Desktop-Definition
       (customdesign.css Z. 7228-7232) — gleiche Specificity (0,3,0), die
       Mobile-Override greift via Reihenfolge (customdesign-responsive.css
       laedt nach customdesign.css). Wir bleiben bewusst INNERHALB der
       Hero-Variante (`.bs-highlights__hero-prices`-Praefix) — die kleineren
       Tile-Kacheln (Pelipal/Burgbad/Held Moebel) haben eigene Schriftgroessen
       via `.bs-highlights__tile-prices .bs-highlights__price` und bleiben
       unangetastet. */
    .bs-highlights__hero-name {
        font-size: 15px;
    }
    .bs-highlights__hero-prices .bs-highlights__price {
        font-size: 17px;
    }
    .bs-highlights__cat-title {
        font-size: 18px;
    }
}

@media (max-width: 380px) {
    .bs-highlights__mosaic.bs-highlights__mosaic--others-0,
    .bs-highlights__mosaic.bs-highlights__mosaic--others-1,
    .bs-highlights__mosaic.bs-highlights__mosaic--others-2,
    .bs-highlights__mosaic.bs-highlights__mosaic--others-3 {
        grid-template-rows: minmax(200px, 48vw) auto minmax(150px, 40vw);
        gap: 8px;
    }
    .bs-highlights__tile--4 {
        min-height: 170px;
    }
    .bs-highlights__category-card {
        padding: 18px 16px;
    }
    .bs-highlights__cat-title {
        font-size: 16px;
    }
    .bs-highlights__cat-cta {
        padding: 8px 16px;
        font-size: 13px;
    }
}


@media (max-width: 767px) {
    body .cs-sb .cs-footer {
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 767px) {
    .ps-sb {
        width: 100%;
        max-width: 100vw;
    }
    .ps-body {
        padding: 30px 16px;
    }
    .ps-phone-link {
        font-size: 15px;
        padding: 11px 20px;
    }
    .ps-contact-link {
        font-size: 14px;
        padding: 11px 20px;
    }
    .ps-cb-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
}

@media (max-width: 1199px) {
    .ps-ov,
    .ws-ov,
    .bs-ov {
        cursor: auto;
    }
}


@media (min-width: 768px) {
    body.catalog-product-view:not(.customdesign-pdp-v2) #product-head .product-name h1[itemprop="name"] {
        font-size: 2.85rem !important;
    }
}


@media (min-width: 1200px) {
    body.catalog-product-view:not(.customdesign-pdp-v2) #product-head .product-name h1[itemprop="name"] {
        font-size: 3rem !important;
    }
}


@media (max-width: 767px) {
    body.catalog-product-view:not(.customdesign-pdp-v2) #product-head .product-name h1[itemprop="name"] {
        font-size: clamp(1.45rem, 4.2vw, 1.9rem) !important;
    }
}


@media (min-width: 768px) {
    body.customer-account-create .column.main {
        padding-left: 24px;
        padding-right: 24px;
        max-width: 960px;
        margin-left: auto;
        margin-right: auto;
    }
}


@media (max-width: 480px) {
    body.customer-account-create .form-create-account .actions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    body.customer-account-create .form-create-account .actions-toolbar .primary,
    body.customer-account-create .form-create-account .actions-toolbar .secondary {
        width: 100% !important;
    }

    body.customer-account-create .form-create-account .actions-toolbar .action.submit.primary,
    body.customer-account-create .form-create-account .actions-toolbar .action.back {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center;
    }
}

/* ---- ALL DEVICES <= 1199px: Back arrow + Level 3 ---- */
@media (max-width: 1199px) {
    .bs-menu-header__back {
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
        color: #fff !important;
        z-index: 10001 !important;
        line-height: 1 !important;
        -webkit-appearance: none !important;
        appearance: none !important;
    }
    .bs-menu-header__back svg {
        width: 22px !important;
        height: 22px !important;
        stroke: #fff !important;
        display: block !important;
    }

    /* LEVEL 3: full overlay inside drawer */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: #fff !important;
        z-index: 20 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        transform: none !important;
    }
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem:not(.top-nav-item),
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > div > .navitem:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > div > .navitem:not(.top-nav-item) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        transform: none !important;
        position: relative !important;
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--bs-blue, #00446a) !important;
        padding: 14px 40px 14px 16px !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        line-height: 1.4 !important;
        text-align: left !important;
    }
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .nav-item-responsive:not(.top-nav-item),
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .nav-item-responsive:not(.top-nav-item) {
        display: block !important;
    }
    /* "Alles anzeigen" in level 3 */
    #nav.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.alles-anzeigen,
    #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.alles-anzeigen {
        color: #ec6608 !important;
        font-weight: 600 !important;
    }
}


/* ---- TABLET: Top Marken — 2 pro Reihe ---- */
@media (min-width: 768px) and (max-width: 1199px) {
    #nav.bs-mega-v2 .bs-mega-v2-top-brands,
    #nav.bs-mega .bs-mega-v2-top-brands {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 16px 16px 20px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-top: 1px solid rgba(74,104,134,0.12) !important;
        width: 100% !important;
        overflow: visible !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brands-label,
    #nav.bs-mega .bs-mega-v2-top-brands-label {
        width: 100% !important;
        flex-shrink: 0 !important;
        margin-bottom: 6px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: var(--bs-blue, #00446a) !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brands-list,
    #nav.bs-mega .bs-mega-v2-top-brands-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brand-item,
    #nav.bs-mega .bs-mega-v2-top-brand-item {
        flex: 0 1 calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        min-width: 0 !important;
        padding: 14px 16px !important;
        min-height: 60px !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        border: 1px solid #e0e6ec !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brand-logo,
    #nav.bs-mega .bs-mega-v2-top-brand-logo {
        max-width: 100% !important;
        max-height: 60px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
}


/* ---- MOBILE: Top Marken — 3 Logos pro Reihe ---- */
@media (max-width: 767px) {
    #nav.bs-mega-v2 .bs-mega-v2-top-brands,
    #nav.bs-mega .bs-mega-v2-top-brands {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 14px 12px 16px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-top: 1px solid rgba(74, 104, 134, 0.12) !important;
        width: 100% !important;
        overflow: visible !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brands-label,
    #nav.bs-mega .bs-mega-v2-top-brands-label {
        width: 100% !important;
        flex-shrink: 0 !important;
        margin-bottom: 4px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 1.5px !important;
        text-transform: uppercase !important;
        color: var(--bs-blue, #00446a) !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brands-list,
    #nav.bs-mega .bs-mega-v2-top-brands-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brand-item,
    #nav.bs-mega .bs-mega-v2-top-brand-item {
        flex: 0 1 calc((100% - 16px) / 3) !important;
        max-width: calc((100% - 16px) / 3) !important;
        min-width: 0 !important;
        padding: 8px 6px !important;
        min-height: 44px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        border: 1px solid #e0e6ec !important;
    }
    #nav.bs-mega-v2 .bs-mega-v2-top-brand-logo,
    #nav.bs-mega .bs-mega-v2-top-brand-logo {
        max-width: 100% !important;
        max-height: 36px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
}


/* ============================================================
 * Mobile + Tablet: Level-2-Panel (.level2.navpar.navpar-open) identisch zu Level-1 stylen
 * Screenshot zeigte: Items ohne Left-Padding, fehlende Trennlinien,
 * TOP MARKEN scheint beim Scrollen durch Overlay durch.
 *
 * Basis-Theme (styles-m.css) hat gefährliche !important-Regeln wie
 *   #nav .alles-anzeigen { padding: 5px !important }
 *   #nav .nav-column .navpar div { padding: 0 0 0 5px } (ohne !important)
 * Unsere normalen Regeln verlieren offenbar im konkreten Browser/Cache die Kaskade.
 * Deshalb Regeln OHNE html.overflow-Prefix (kompatibler), aber mit zusätzlicher Spezifität
 * über doppelte Klassenverkettung (.nav-primary.nav-primary) — kein neues Verhalten,
 * nur höhere Specificity (0,1,12,2 vs Theme 0,0,1,1).
 * ============================================================ */

@media (max-width: 1199px) {
    /*
     * Level-3 (Markenlisten): Scroll wie „Häufig gesucht“ auf .level1.navpar —
     * .level2.navpar-Inhalt im normalen Flow (kein verschachteltes Absolute-Overlay).
     */
    #nav.bs-mega.bs-mega .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open),
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: none !important;
        touch-action: pan-y !important;
    }
    #nav.bs-mega.bs-mega .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > div.level2:has(.level2.navpar.navpar-open),
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > div.level2:has(.level2.navpar.navpar-open) {
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
    #nav.bs-mega.bs-mega .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > div.level2:has(.level2.navpar.navpar-open) > .navitem.nav-sub,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) > div.level2:has(.level2.navpar.navpar-open) > .navitem.nav-sub {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    #nav.bs-mega.bs-mega .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) .level2.navpar.navpar-open,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .level1.navpar.navpar-open:has(.level2.navpar.navpar-open) .level2.navpar.navpar-open {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        z-index: auto !important;
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        transform: none !important;
        box-sizing: border-box !important;
        pointer-events: auto !important;
    }

    /* Items im Level-2-Panel: gleiches Layout wie Level-1 (Padding, Font, Border).
     * Doppelte #nav.bs-mega.bs-mega-Verkettung = zusätzliche Spezifität ohne Semantikänderung. */
    #nav.bs-mega.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem,
    #nav.bs-mega.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 14px 40px 14px 16px !important;
        padding-left: 16px !important;
        padding-right: 40px !important;
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1.4 !important;
        color: var(--bs-blue, #00446a) !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        border: none !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        background: transparent !important;
        box-sizing: border-box !important;
    }

    /* top-nav-item (visuelle Kopfzeile) ausblenden — Back-Arrow/Titel kommt aus .bs-menu-header */
    #nav.bs-mega.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.top-nav-item,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.top-nav-item {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    /* "Alles anzeigen" im Level-2-Panel: Padding (Theme setzt 5px !important — hier überschreiben), orange */
    #nav.bs-mega.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.alles-anzeigen,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.alles-anzeigen {
        color: #ec6608 !important;
        font-weight: 600 !important;
        padding: 14px 40px 14px 16px !important;
        padding-left: 16px !important;
        padding-right: 40px !important;
        text-align: left !important;
    }

    /* Highlight-Kategorien (orange Akzent) im Level-2-Panel */
    #nav.bs-mega.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.highlight-cat,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.highlight-cat {
        color: #ec6608 !important;
    }

    /* Letztes Item ohne Trennlinie (optisch sauberer Abschluss) */
    #nav.bs-mega.bs-mega .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem:last-child,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem:last-child {
        border-bottom: none !important;
    }

    /* Sibling-Blöcke (TOP MARKEN etc.) beim offenen Unter-Panel ausblenden,
     * damit sie nicht durch den Overlay-Bereich hindurch sichtbar bleiben (Scroll-Container).
     * :has() ist in allen aktuellen Mobile-Browsern unterstützt; fällt es weg, bleibt
     * nur der alte visuelle Durchscheineffekt, kein Funktionsbruch. */
    #nav.bs-mega .nav-primary .alles.show-cols:has(.navpar.navpar-open) .bs-mega-v2-top-brands,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols:has(.navpar.navpar-open) .bs-mega-v2-top-brands {
        display: none !important;
    }
}


/* Mobile adjustments for overlay lieferung */
@media (max-width: 600px) {
    #overlayframe_wrapper.overlay .innerwrapper {
        width: 96% !important;
        max-height: 92vh !important;
        border-radius: 16px !important;
    }
    #overlayframe .cms-lieferung .page-title {
        font-size: 22px !important;
        padding: 24px 20px 10px !important;
    }
    #overlayframe .cms-lieferung .delivery-heading,
    #overlayframe .cms-lieferung .delivery-subheading {
        padding: 0 20px !important;
        font-size: 14px !important;
    }
    #overlayframe .cms-lieferung .delivery-heading + p {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    #overlayframe .cms-lieferung .lieferung {
        grid-template-columns: 72px 1fr !important;
        padding: 0 20px 20px !important;
    }
    #overlayframe .cms-lieferung .lieferung-icons img {
        height: 56px !important;
        width: 56px !important;
    }
    #overlayframe .cms-lieferung .lieferung p,
    #overlayframe .cms-lieferung .lieferung-text p {
        font-size: 13px !important;
    }
    #overlayframe .cms-lieferung .delivery {
        padding: 16px 20px !important;
    }
}

/* ============================================================
 * Mobile + Tablet: "Alles anzeigen" einheitlich + "mehr »" ausblenden
 * Screenshot 21.04.2026: "Alles anzeigen" hatte geringere Hoehe/Padding als
 * Geschwister; "mehr »" am Panel-Ende ist im Slide-Drawer ueberfluessig.
 * Spezifitaet 0,1,12,2 (bs-mega.bs-mega + alles.alles) > Theme + frueherer Block.
 * ============================================================ */
@media (max-width: 1199px) {
    #nav.bs-mega.bs-mega .nav-primary .alles.alles.show-cols .nav-column .alles-anzeigen,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles.show-cols .nav-column .alles-anzeigen,
    #nav.bs-mega.bs-mega .nav-primary .alles.alles.show-cols .navcolumns > .nav-column:first-child > .alles-anzeigen,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles.show-cols .navcolumns > .nav-column:first-child > .alles-anzeigen,
    #nav.bs-mega.bs-mega .nav-primary .alles.alles .navpar.navpar-open > .navitem.alles-anzeigen,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles .navpar.navpar-open > .navitem.alles-anzeigen,
    #nav.bs-mega.bs-mega .nav-primary .alles.alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.alles-anzeigen,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.alles-anzeigen {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 14px 40px 14px 16px !important;
        padding-left: 16px !important;
        padding-right: 40px !important;
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: #ec6608 !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        box-sizing: border-box !important;
        float: none !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
    }

    #nav.bs-mega.bs-mega .nav-primary .alles.alles.show-cols .nav-column .alles-anzeigen:focus-visible,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles.show-cols .nav-column .alles-anzeigen:focus-visible,
    #nav.bs-mega.bs-mega .nav-primary .alles.alles.show-cols .navcolumns > .nav-column:first-child > .alles-anzeigen:focus-visible,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles.show-cols .navcolumns > .nav-column:first-child > .alles-anzeigen:focus-visible,
    #nav.bs-mega.bs-mega .nav-primary .alles.alles .navpar.navpar-open > .navitem.alles-anzeigen:focus-visible,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles .navpar.navpar-open > .navitem.alles-anzeigen:focus-visible,
    #nav.bs-mega.bs-mega .nav-primary .alles.alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.alles-anzeigen:focus-visible,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.alles-anzeigen:focus-visible {
        outline: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a) !important;
        outline-offset: var(--bs-kb-focus-outline-offset, 2px) !important;
        box-shadow: none !important;
        color: var(--bs-kb-focus-color, #00446a) !important;
        text-decoration-color: var(--bs-kb-focus-color, #00446a) !important;
        border-radius: 4px;
    }

    /* User-Wunsch 2026-05-19 18:19: „mehr »"-Link im Burger-Drawer wie im
       Mega-Menü verlinkt darstellen (Template ergänzt um .resp-click → greift
       den existierenden mobile-menuControl-Pfad: closemenu() + navcat(item)
       → Form-Submit mit data-key zur Sub-Kategorie). Sichtbar machen +
       Padding identisch zu den Sub-Kategorie-Reihen darüber (14px 16px
       vertikal/links wie .navpar-open .navitem). Hohe Spezifität
       (.bs-mega.bs-mega / .alles.alles), um etwaige Reset-Regeln im Theme
       sicher zu schlagen. */
    #nav.bs-mega.bs-mega .nav-primary .alles.alles .navpar.navpar-open .more,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles .navpar.navpar-open .more,
    #nav.bs-mega.bs-mega .nav-primary .alles.alles .navpar.navpar-open > .more,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles .navpar.navpar-open > .more,
    #nav.bs-mega.bs-mega .nav-primary .alles.alles .navpar.navpar-open > div.level2.more,
    #nav.bs-mega-v2.bs-mega-v2 .nav-primary .alles.alles .navpar.navpar-open > div.level2.more.resp-click {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 14px 40px 14px 16px !important;
        padding-top: 14px !important;
        padding-left: 16px !important;
        margin: 0 !important;
        font-family: 'Quicksand', sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: var(--bs-blue-gray, #4a6886) !important;
        text-align: left !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0, 68, 106, 0.08) !important;
    }
}

/* ============================================================
 * Tablet only (768-1199): Chevron rechts NUR bei Level-1 Items mit Children
 * Ziel: kein Doppelpfeil auf Level-0, sichtbarer Pfeil auf Level-1.
 * ============================================================ */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Level-1 parent items im Drawer (mit .nav-sub) */
    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem.nav-sub:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem.nav-sub:not(.top-nav-item):not(.alles-anzeigen) {
        position: relative !important;
        padding-right: 40px !important;
    }

    /* Eingefuegter Chevron-Span aus dem Template */
    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem.nav-sub > .bs-nav-chevron,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem.nav-sub > .bs-nav-chevron {
        display: block !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        width: 8px !important;
        height: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 2px solid var(--bs-blue, #00446a) !important;
        border-right: 2px solid var(--bs-blue, #00446a) !important;
        border-bottom: none !important;
        border-left: none !important;
        background: none !important;
        transform: translateY(-50%) rotate(45deg) !important;
        -webkit-transform: translateY(-50%) rotate(45deg) !important;
        opacity: 0.55 !important;
        pointer-events: none !important;
        z-index: 2 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
    }

    /* Highlight-Kategorien: orange Chevron */
    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem.nav-sub.highlight-cat > .bs-nav-chevron,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem.nav-sub.highlight-cat > .bs-nav-chevron {
        border-top-color: #ec6608 !important;
        border-right-color: #ec6608 !important;
        opacity: 0.75 !important;
    }
}

/* Außerhalb Tablet standardmäßig ausblenden */
.bs-nav-chevron {
    display: none !important;
}

.bs-nav-chevron-text {
    display: none !important;
}

/* FINAL FALLBACK (nur Tablet): Level-1 Chevron als Text-Glyph.
 * Sehr robust gegen Theme-Overrides und unabhängig von Border/SVG Rendering. */
@media (min-width: 768px) and (max-width: 1199px) {
    #nav.bs-mega .nav-primary .alles .level1.navitem[data-level="1"] > .bs-nav-chevron-text,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem[data-level="1"] > .bs-nav-chevron-text {
        display: inline-block !important;
        float: right !important;
        margin-left: 10px !important;
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 24px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        color: var(--bs-blue, #00446a) !important;
        opacity: 0.9 !important;
        pointer-events: none !important;
    }

    #nav.bs-mega .nav-primary .alles .level1.navitem[data-level="1"].highlight-cat > .bs-nav-chevron-text,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem[data-level="1"].highlight-cat > .bs-nav-chevron-text,
    #nav.bs-mega .nav-primary .alles .level1.navitem[data-level="1"].bs-mega-sale > .bs-nav-chevron-text,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem[data-level="1"].bs-mega-sale > .bs-nav-chevron-text {
        color: #ec6608 !important;
    }

    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem[data-level="1"]:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem[data-level="1"]:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega .nav-primary .alles .level1.navitem[data-level="1"]:not(.top-nav-item):not(.alles-anzeigen),
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem[data-level="1"]:not(.top-nav-item):not(.alles-anzeigen) {
        position: relative !important;
        padding-right: 40px !important;
    }

    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem[data-level="1"]:not(.top-nav-item):not(.alles-anzeigen)::after,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem[data-level="1"]:not(.top-nav-item):not(.alles-anzeigen)::after,
    #nav.bs-mega .nav-primary .alles .level1.navitem[data-level="1"]:not(.top-nav-item):not(.alles-anzeigen)::after,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem[data-level="1"]:not(.top-nav-item):not(.alles-anzeigen)::after {
        content: '' !important;
        display: block !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        margin-top: -5px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 0 !important;
        width: 9px !important;
        height: 9px !important;
        background: none !important;
        background-image: none !important;
        border-top: none !important;
        border-left: none !important;
        border-right: 2px solid var(--bs-blue, #00446a) !important;
        border-bottom: 2px solid var(--bs-blue, #00446a) !important;
        transform: rotate(-45deg) !important;
        -webkit-transform: rotate(-45deg) !important;
        opacity: 0.45 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        pointer-events: none !important;
        z-index: 5 !important;
    }

    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem[data-level="1"].highlight-cat::after,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem[data-level="1"].highlight-cat::after,
    #nav.bs-mega .nav-primary .alles .level1.navitem[data-level="1"].highlight-cat::after,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem[data-level="1"].highlight-cat::after,
    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem[data-level="1"].bs-mega-sale::after,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem[data-level="1"].bs-mega-sale::after,
    #nav.bs-mega .nav-primary .alles .level1.navitem[data-level="1"].bs-mega-sale::after,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem[data-level="1"].bs-mega-sale::after {
        border-right-color: #ec6608 !important;
        border-bottom-color: #ec6608 !important;
        color: transparent !important;
    }
}

/* PDP Tabs Accordion (Tablet + Phone): tab content directly below title */
@media (max-width: 1199px) {
    #producttabs .product.data.items.cd-tabs-accordion {
        border: none !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist {
        display: block !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        clear: both !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        clear: both !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch[data-role="collapsible"],
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.data-overlay {
        position: relative !important;
        cursor: pointer !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch[data-role="collapsible"],
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.data-overlay {
        position: relative !important;
        cursor: pointer !important;
    }

    /* Accordion tab header style (more vertical padding + chevron) */
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.cd-accordion-title,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.data-overlay {
        position: relative !important;
        padding: 16px 44px 16px 16px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        color: var(--bs-blue, #00446a) !important;
        font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.cd-accordion-title,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.data-overlay {
        position: relative !important;
        padding: 16px 44px 16px 16px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 8px !important;
        color: var(--bs-blue, #00446a) !important;
        font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.cd-accordion-title::after,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.data-overlay::after {
        content: '' !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid var(--bs-blue, #00446a) !important;
        border-bottom: 2px solid var(--bs-blue, #00446a) !important;
        transform: translateY(-65%) rotate(45deg) !important; /* down */
        transition: transform .22s ease !important;
        pointer-events: none !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.cd-accordion-title::after,
    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.data-overlay::after {
        content: '' !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid var(--bs-blue, #00446a) !important;
        border-bottom: 2px solid var(--bs-blue, #00446a) !important;
        transform: translateY(-65%) rotate(45deg) !important;
        transition: transform .22s ease !important;
        pointer-events: none !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title.switch.cd-accordion-title.active::after {
        transform: translateY(-35%) rotate(-135deg) !important; /* up */
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.title > .switch.cd-accordion-title.active::after {
        transform: translateY(-35%) rotate(-135deg) !important;
    }

    #producttabs .product.data.items.cd-tabs-accordion > .cdv2-pdp-tablist > .data.item.content.cd-accordion-content {
        float: none !important;
        clear: both !important;
        width: 100% !important;
        margin: 0 0 10px !important;
    }

    /* Shared rightboxes below tabs (only once in responsive) */
    #producttabs .cd-shared-rightboxes-wrap {
        margin-top: 14px;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightboxes {
        display: block !important;
        background: transparent !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox {
        background: var(--bs-blue-light, #f0f6fa) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 20px 18px !important;
        margin: 0 0 12px !important;
        box-sizing: border-box !important;
        color: rgba(0, 68, 106, 0.85) !important;
        overflow: visible !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox:last-child {
        margin-bottom: 0 !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .downloads,
    #producttabs .cd-shared-rightboxes-wrap .rightbox .right-box.downloads {
        color: rgba(0, 68, 106, 0.85) !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .prod_download {
        color: var(--bs-blue, #00446a) !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .prod_download img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        vertical-align: top !important;
        width: 60px !important;
        height: 60px !important;
        margin: 4px !important;
        border-radius: 50% !important;
        text-align: center !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        position: relative !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        display: block !important;
        border-radius: 50% !important;
    }

    /* TOPSELLER + Garantie/Gewährleistung: volle Kreisfarben wie Desktop (.desc-sections-data .rightbox) */
    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.topseller-badge {
        background: var(--bs-accent-color, #ec6608) !important;
        color: #fff !important;
        padding: 2px !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.topseller-badge span {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 2px !important;
        box-sizing: border-box !important;
        color: #fff !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.garantie-badge {
        background: var(--bs-blue, #00446a) !important;
        color: #fff !important;
        padding: 2px !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.garantie-badge span {
        border: none !important;
        border-radius: 50% !important;
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 2px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #fff !important;
        box-sizing: border-box !important;
    }

    /*
     * Grafik-Badges (Goldenes M, Flagge): CSS-Tooltip über ::after — wie .desc-sections-data / Theme .product.data.items .rightbox.
     * Nach pdp-tabs-accordion.js liegen die Badges unter #producttabs .cd-shared-rightboxes-wrap; ohne diese Regeln bleibt
     * .bs-badge-tooltip--show ohne sichtbaren Tooltip (Klassenselektoren griffen ins Leere).
     */
    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.grafik-badge {
        width: 60px !important;
        height: 60px !important;
        padding: 0 !important;
        cursor: pointer !important;
        background: transparent !important;
        color: inherit !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.grafik-badge::before {
        content: 'i' !important;
        position: absolute !important;
        top: -2px !important;
        right: -2px !important;
        width: 18px !important;
        height: 18px !important;
        background: var(--bs-blue, #00446a) !important;
        color: #fff !important;
        font-family: Georgia, 'Times New Roman', serif !important;
        font-size: 11px !important;
        font-style: italic !important;
        font-weight: 700 !important;
        line-height: 18px !important;
        text-align: center !important;
        border-radius: 50% !important;
        z-index: 2 !important;
        cursor: help !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.grafik-badge::after {
        content: attr(data-tooltip) !important;
        display: none !important;
        position: absolute !important;
        bottom: calc(100% + 8px) !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        background: var(--bs-blue, #00446a) !important;
        color: #fff !important;
        font-family: 'Montserrat', sans-serif !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.45 !important;
        padding: 10px 14px !important;
        border-radius: 8px !important;
        white-space: normal !important;
        width: max-content !important;
        max-width: min(260px, 85vw) !important;
        z-index: 500 !important;
        pointer-events: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    @media (hover: hover) and (pointer: fine) {
        #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.grafik-badge:hover::after {
            display: block !important;
        }
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.grafik-badge.bs-badge-tooltip--show::after,
    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.grafik-badge:focus-visible::after {
        display: block !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .badge.grafik-badge:focus-visible {
        outline: 2px solid var(--bs-blue, #00446a) !important;
        outline-offset: 3px !important;
    }

    #producttabs .cd-shared-rightboxes-wrap .rightbox .prod_download:hover {
        color: rgba(0, 68, 106, 0.7) !important;
    }

    /* Downloads accordion styled like a tab row */
    #producttabs .cd-shared-rightboxes-wrap .downloads > .cd-downloads-toggle,
    #producttabs .cd-shared-rightboxes-wrap .right-box.downloads > .cd-downloads-toggle {
        display: block !important;
        position: relative;
        margin: 0;
        padding: 0 !important;
        min-height: 0 !important;
        border: none !important;
        border-radius: 8px;
        background: transparent !important;
        color: var(--bs-blue, #00446a);
        font-family: 'Montserrat', Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.3;
        cursor: pointer;
    }

    #producttabs .cd-shared-rightboxes-wrap .downloads > .cd-downloads-toggle::after,
    #producttabs .cd-shared-rightboxes-wrap .right-box.downloads > .cd-downloads-toggle::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        width: 8px;
        height: 8px;
        border-right: 2px solid var(--bs-blue, #00446a);
        border-bottom: 2px solid var(--bs-blue, #00446a);
        transform: translateY(-65%) rotate(45deg); /* down */
        transition: transform .22s ease;
        pointer-events: none;
    }

    #producttabs .cd-shared-rightboxes-wrap .downloads > .cd-downloads-toggle.active::after,
    #producttabs .cd-shared-rightboxes-wrap .right-box.downloads > .cd-downloads-toggle.active::after {
        transform: translateY(-35%) rotate(-135deg); /* up */
    }

    #producttabs .cd-shared-rightboxes-wrap .downloads > .cd-downloads-body,
    #producttabs .cd-shared-rightboxes-wrap .right-box.downloads > .cd-downloads-body,
    #producttabs .cd-downloads-body {
        border: none !important;
        border-radius: 0 0 8px 8px;
        padding: 8px 14px 6px !important;
        background: transparent !important;
    }
}

/* Tablet-only: groesserer Bottom-Abstand unter den Stoerer-/Rightbox-Karten
   (User-Wunsch 19.05.2026 16:36, iPad Air 820px, DevTools auf `div.rightbox`
   zeigte `margin: 0px 0px 12px` aus dem (max-width: 1199px)-Block oben Z. 5719).
   Mobile bleibt 12px; nur 768-1199px auf 30px erhoeht. */
@media (min-width: 768px) and (max-width: 1199px) {
    #producttabs .cd-shared-rightboxes-wrap .rightbox {
        margin-bottom: 30px !important;
    }
    #producttabs .cd-shared-rightboxes-wrap .rightbox:last-child {
        margin-bottom: 0 !important;
    }
}

/* ============================================================
   ABSOLUTE LAST RULE: mobile nav phone/account block placement
   Keep this block at EOF so it wins the cascade.
   ============================================================ */
@media (max-width: 767px) {
    body.overflow .page-wrapper > .topmenu,
    body.overflow .page-wrapper > .topmenu .nav-top-container {
        overflow-x: hidden !important;
    }

    body.overflow #nav.bs-mega,
    body.overflow #nav.bs-mega-v2,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega-v2 {
        position: relative !important;
        height: 100% !important;
        min-height: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* User-Wunsch 20.05.2026: Sticky-Footer-Reserve raus. Die alten Werte
       `height: 100% / min-height: 100% / padding-bottom: 210px` waren
       Workarounds fuer das `position: absolute; bottom: 0`-Pattern am
       Phone-Block (210 px Platz, damit der letzte Listeneintrag nicht
       hinter dem Block verschwand). Da der Phone-Block jetzt im normalen
       Flow direkt unter der Liste sitzt, faellt das alles weg. */
    body.overflow #nav.bs-mega > .nav-primary,
    body.overflow #nav.bs-mega-v2 > .nav-primary,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega > .nav-primary,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega-v2 > .nav-primary {
        height: auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 16px !important;
        box-sizing: border-box !important;
    }

    body.overflow #nav .nav-primary > div.level0,
    body.overflow #nav .nav-primary > div.level0 > a,
    body.overflow #nav .nav-primary .alles.show-cols,
    body.overflow #nav .nav-primary .alles .navpar.navpar-open {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* User-Wunsch 20.05.2026: Phone-Block raus aus `position: absolute; bottom: 0`.
       Block soll im normalen Flex-Flow direkt unter dem letzten Menuepunkt
       (Marken) sitzen — kein Sticky-Footer mehr. Hintergrund bleibt erhalten,
       Border-Top und Padding bleiben optisch identisch. */
    body.overflow #nav.bs-mega > .bs-mobile-phone-info,
    body.overflow #nav.bs-mega-v2 > .bs-mobile-phone-info,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega > .bs-mobile-phone-info,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega-v2 > .bs-mobile-phone-info {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        z-index: auto !important;
        border-top: 1px solid rgba(74, 104, 134, 0.16) !important;
        background: #f0f6fa !important;
        pointer-events: auto !important;
    }
}

/* ============================================================
   SUB-DRAWER-ACTIVE STATE — Mobile only
   ============================================================
   User-Wunsch 20.05.2026 09:37 (Folge-Fix zum „Konto-Block oben"-Rebuild):
   Beim Sub-Drawer-Rebuild (Sticky-Footer-Pattern zurueckgebaut, .nav-primary
   auf Inhaltshoehe geschrumpft) entstand ein neuer Bug: Der Sub-Drawer
   (`.alles.show-cols` bzw. `.navpar.navpar-open` per `position: absolute;
   top: 0; height: 100%` relativ zu `.nav-primary`) ist jetzt nur noch so
   hoch wie `.nav-primary` (~9 Top-Level-Items, ~450 px statt vorher
   ~100 dvh). Im Sub-Drawer-State sieht der User dann den Sub-Drawer-Inhalt
   (z. B. BADMOEBEL mit „Alles anzeigen" + Unterkategorien) nur im oberen
   Bereich, darunter (an Position des `.bs-mobile-phone-info`-Blocks im
   normalen Flow ausserhalb `.nav-primary`) erscheint faelschlicherweise
   der Konto-Block — visuell sieht es so aus, als ob die Sub-Kategorien
   abgeschnitten sind und der Konto-Block sie ueberlagert.

   Fix: Wenn ein Sub-Drawer aktiv ist (`#nav` hat einen `.alles.show-cols`
   oder `.navpar.navpar-open` Nachfahren), expandiere `.nav-primary` auf
   `min-height: 100dvh` und blende `.bs-mobile-phone-info` aus. Damit ist
   der Sub-Drawer wieder voll-drawer-hoch und ueberdeckt alles dahinter.
   Beim Schliessen des Sub-Drawers (JS removed die `show-cols`/`navpar-open`-
   Klassen) wird die `:has()`-Bedingung false und `.nav-primary` schrumpft
   zurueck auf Inhaltshoehe → Konto-Block ist wieder sichtbar.

   `:has()`-Browser-Support: alle modernen Mobile-Browser (Safari 15.4+,
   Chrome 105+, Firefox 121+) — fuer aeltere Browser kein Schaden:
   Sub-Drawer ist dann nur Top-Level-Liste-hoch (= unveraendertes
   Bug-Verhalten), nicht schlechter als ohne diesen Fix-Block. */
@media (max-width: 767px) {
    body.overflow #nav.bs-mega:has(.alles.show-cols) .nav-primary,
    body.overflow #nav.bs-mega-v2:has(.alles.show-cols) .nav-primary,
    body.overflow #nav.bs-mega:has(.navpar.navpar-open) .nav-primary,
    body.overflow #nav.bs-mega-v2:has(.navpar.navpar-open) .nav-primary,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega:has(.alles.show-cols) .nav-primary,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega-v2:has(.alles.show-cols) .nav-primary,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega:has(.navpar.navpar-open) .nav-primary,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega-v2:has(.navpar.navpar-open) .nav-primary {
        min-height: 100dvh !important;
        flex: 1 1 auto !important;
        padding-bottom: 0 !important;
    }

    body.overflow #nav.bs-mega:has(.alles.show-cols) > .bs-mobile-phone-info,
    body.overflow #nav.bs-mega-v2:has(.alles.show-cols) > .bs-mobile-phone-info,
    body.overflow #nav.bs-mega:has(.navpar.navpar-open) > .bs-mobile-phone-info,
    body.overflow #nav.bs-mega-v2:has(.navpar.navpar-open) > .bs-mobile-phone-info,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega:has(.alles.show-cols) > .bs-mobile-phone-info,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega-v2:has(.alles.show-cols) > .bs-mobile-phone-info,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega:has(.navpar.navpar-open) > .bs-mobile-phone-info,
    body.overflow .page-wrapper .topmenu.open #nav.bs-mega-v2:has(.navpar.navpar-open) > .bs-mobile-phone-info {
        display: none !important;
    }
}

/* =====================================================
   CMS /lieferung — Mobile fixes (standalone page, NOT overlay)
   =====================================================
   Auf Mobile gab es zwei Probleme:
   1) "» zur Versandkostenübersicht" (#versand.right.hinweis) lag durch
      position:absolute + float:right ueber der Headline "Informationen zum
      Liefertermin und Ablauf der Lieferung".
   2) Die Icons in der Timeline waren faktisch nicht sichtbar: das Grid
      1fr 5fr ergibt auf 390px Viewport nur ~58px fuer die Icon-Spalte,
      .lieferung-icons img hat hart height:100px gesetzt → mit Browser-
      default max-width:100% wird das SVG verzerrt/skaliert weg.

   Fix nur fuer die Standalone-Seite (kein #overlayframe-Prefix, das Overlay
   hat oben in dieser Datei eigene Regeln). */
@media (max-width: 767px) {
    .cms-lieferung #versand.right,
    .cms-lieferung #versand {
        position: static !important;
        float: none !important;
        right: auto !important;
        display: block !important;
        text-align: left !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    /* Grid: column-gap bleibt 12px (Abstand Icon-Spalte ↔ Text); row-gap = 0,
       damit das vertikale `lf-bg.png` (auf .lieferung-icons als
       repeat-y-background gesetzt) ohne Luecke von Zelle zu Zelle durchlaeuft
       und die blaue Linie als EINE durchgehende Linie wirkt. */
    .cms-lieferung .lieferung {
        grid-template-columns: 60px 1fr !important;
        grid-gap: 0 12px !important;
        grid-row-gap: 0 !important;
        grid-column-gap: 12px !important;
    }
    /* Padding-y auf BEIDEN Spalten gleich gross — so haben Icon und Text
       weiterhin Atmen zwischen den Schritten, OHNE einen Grid-Gap der die
       Hintergrundlinie unterbrechen wuerde. */
    .cms-lieferung .lieferung-icons {
        padding: 18px 0 !important;
    }
    .cms-lieferung .lieferung-icons img {
        height: 44px !important;
        width: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        display: block !important;
        margin: 0 auto !important;
    }
    .cms-lieferung .lieferung-text {
        padding: 18px 0 !important;
    }
}

/* Tablet (768px–1199px): dieselbe globale img-Regel (max-width: 1199px) wie oben
   setzt height:auto !important — die Timeline-Icons der Standalone-Seite /lieferung
   bekamen damit keine gueltige Zielhoehe (Mobile-Fix griff nur bis 767px). */
@media (min-width: 768px) and (max-width: 1199px) {
    .cms-lieferung #versand.right,
    .cms-lieferung #versand {
        position: static !important;
        float: none !important;
        right: auto !important;
        display: block !important;
        text-align: left !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
    .cms-lieferung .lieferung {
        grid-template-columns: 90px 1fr !important;
        grid-gap: 0 12px !important;
        grid-row-gap: 0 !important;
        grid-column-gap: 12px !important;
    }
    .cms-lieferung .lieferung-icons {
        padding: 18px 0 !important;
    }
    .cms-lieferung .lieferung-icons img {
        height: 72px !important;
        width: 72px !important;
        max-width: 72px !important;
        max-height: 72px !important;
        object-fit: contain !important;
        display: block !important;
        margin: 0 auto !important;
    }
    .cms-lieferung .lieferung-text {
        padding: 18px 0 !important;
    }
}

/* =====================================================
   CMS /batterieentsorgung — Mobile: linker Inline-Margin der <li> raus
   =====================================================
   Im CMS-Content (DB) stehen `<li style="margin-left: 20px;">` (zwei Stueck),
   plus `<ul style="margin-bottom: 30px;">`. Auf Mobile (390px Viewport)
   verschwendet das links ~20px Platz und ueberlaesst den Text-Items keinen
   buendigen linken Rand mit den Absaetzen darueber/darunter. Bullets sind
   ohnehin nicht sichtbar (UL ohne padding-left, listpos outside → ausserhalb).
   Inline-Style schlaegt CSS, daher `!important`. */
@media (max-width: 767px) {
    .cms-batterieentsorgung .cms-content ul,
    .cms-batterieentsorgung #maincontent ul,
    .cms-batterieentsorgung ul {
        margin-left: 0 !important;
        padding-left: 0 !important;
        list-style: none !important;
    }
    .cms-batterieentsorgung .cms-content ul > li,
    .cms-batterieentsorgung #maincontent ul > li,
    .cms-batterieentsorgung ul > li {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* =====================================================
   CMS /ausstellung + /oeffnungszeiten — blauer Oeffnungszeiten-Container
   =====================================================
   Der blaue Container `.termin-oeff` wird auf BEIDEN Seiten ueber denselben
   Inline `<style>`-Block im CMS-Content gerendert (`padding: 20px`,
   `background: #4a6886`). Plus `td { padding-bottom: 15px }` — das gilt auch
   fuer die letzte Zeile (Freitag), sieht aber unter der letzten Zeile vs.
   oben am Container (mit Uhr-Icon + Headline + hr) optisch zu eng aus.
   Auf Mobile: zusaetzliches Padding unten. Inline-Style benoetigt
   `!important` zur Ueberschreibung. */
@media (max-width: 767px) {
    .cms-ausstellung .termin-oeff,
    .cms-oeffnungszeiten .termin-oeff {
        padding-bottom: 36px !important;
    }
}

/* =====================================================
   CMS /oeffnungszeiten (+ /ausstellung als Schutz) — Google-Maps-iframe
   =====================================================
   Das Template `Magento_Cms::googlemaps.phtml` rendert `<iframe width="610"
   height="320">` mit harten Pixel-Werten via Block-Parametern aus dem
   CMS-Content. Auf 390px-Viewport laeuft der iframe rechts ueber den
   `#maincontent`-Container hinaus → es wirkt als fehle rechts das Padding
   neben Google-Maps. Mobile-Fix: iframe auf Container-Breite zwingen.
   Selektor zielt gezielt auf Google-Maps-Embeds (nicht auf andere
   iframes wie etwa Video-Embeds). */
@media (max-width: 767px) {
    .cms-ausstellung iframe[src*="google.com/maps"],
    .cms-oeffnungszeiten iframe[src*="google.com/maps"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* FINAL Tablet fallback: prevent level panels from clipping to level0 row height */
@media (min-width: 768px) and (max-width: 1199px) {
    body.bs-mega-tablet-slide.overflow #nav.bs-mega,
    body.bs-mega-tablet-slide.overflow #nav.bs-mega-v2,
    body.bs-mega-tablet-slide.overflow .page-wrapper .topmenu.open #nav.bs-mega,
    body.bs-mega-tablet-slide.overflow .page-wrapper .topmenu.open #nav.bs-mega-v2 {
        height: 100% !important;
        min-height: 100% !important;
    }

    body.bs-mega-tablet-slide.overflow #nav.bs-mega > .nav-primary,
    body.bs-mega-tablet-slide.overflow #nav.bs-mega-v2 > .nav-primary,
    body.bs-mega-tablet-slide.overflow .page-wrapper .topmenu.open #nav.bs-mega > .nav-primary,
    body.bs-mega-tablet-slide.overflow .page-wrapper .topmenu.open #nav.bs-mega-v2 > .nav-primary {
        height: 100% !important;
        min-height: 100% !important;
        overflow: visible !important;
    }
}

/* =====================================================
   Tablet Mega-Menu: Level 1+ wie funktionierendes Level 0
   ===================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
    body.bs-mega-tablet-slide.overflow #nav.bs-mega .nav-primary,
    body.bs-mega-tablet-slide.overflow #nav.bs-mega-v2 .nav-primary {
        height: 100% !important;
        min-height: 100% !important;
    }

    body.bs-mega-tablet-slide.overflow #nav.bs-mega .nav-primary .alles.show-cols:not(:has(.navpar.navpar-open)),
    body.bs-mega-tablet-slide.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols:not(:has(.navpar.navpar-open)) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: none !important;
    }

    body.bs-mega-tablet-slide.overflow #nav.bs-mega .nav-primary .alles.show-cols:has(.navpar.navpar-open),
    body.bs-mega-tablet-slide.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols:has(.navpar.navpar-open) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
    }

    /* Legacy-Selektor (alle .alles.show-cols) — durch :has()-Split oben ersetzt; Block bleibt als Fallback auskommentiert nicht noetig */
    body.bs-mega-tablet-slide.overflow #nav.bs-mega .nav-primary .alles.show-cols,
    body.bs-mega-tablet-slide.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Level 1/2-Panel genauso wie Level 0: voller Drawer + eigener Scrollbereich */
    body.bs-mega-tablet-slide.overflow #nav.bs-mega .nav-primary .alles .navpar,
    body.bs-mega-tablet-slide.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(105%) !important;
        transition: transform 300ms ease !important;
        opacity: 1 !important;
    }

    body.bs-mega-tablet-slide.overflow #nav.bs-mega .nav-primary .alles .navpar.navpar-open,
    body.bs-mega-tablet-slide.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open {
        transform: translateX(0) !important;
        z-index: 70000 !important;
        pointer-events: auto !important;
    }

    body.bs-mega-tablet-slide.overflow #nav.bs-mega .nav-primary .alles .navpar:not(.navpar-open),
    body.bs-mega-tablet-slide.overflow #nav.bs-mega-v2 .nav-primary .alles .navpar:not(.navpar-open) {
        pointer-events: none !important;
    }
}

/* Tablet fallback without body helper-class: Level 1/2 behave like level 0 panel */
@media (min-width: 768px) and (max-width: 1199px) {
    body.overflow #nav.bs-mega .nav-primary .alles.show-cols:not(:has(.navpar.navpar-open)),
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols:not(:has(.navpar.navpar-open)) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: none !important;
    }

    body.overflow #nav.bs-mega .nav-primary .alles.show-cols:has(.navpar.navpar-open),
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols:has(.navpar.navpar-open) {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        overflow: hidden !important;
    }

    body.overflow #nav.bs-mega .nav-primary .alles.show-cols,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    body.overflow #nav.bs-mega .nav-primary .alles.show-cols .navpar,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        display: block !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(105%) !important;
        transition: transform 300ms ease !important;
        opacity: 1 !important;
        pointer-events: none !important;
    }

    body.overflow #nav.bs-mega .nav-primary .alles.show-cols .navpar.navpar-open,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .navpar.navpar-open {
        transform: translateX(0) !important;
        z-index: 70001 !important;
        pointer-events: auto !important;
    }
}

/*
 * PDP #producttabs: Tab-/Akkordeon-Köpfe nur auf dem Handy fest weiß (≤767px).
 * Tablet/Desktop (≥768px): aktiver Reiter behält Shop-hellblau aus customdesign-pdp.css —
 * nicht mit max-width 1199px alle Viewports überschreiben.
 */
@media (max-width: 767px) {
    body.catalog-product-view #producttabs#producttabs .product.data.items > .cdv2-pdp-tablist > .data.item.title.switch,
    body.catalog-product-view #producttabs#producttabs .product.data.items > .cdv2-pdp-tablist > .item.title.switch,
    body.catalog-product-view #producttabs#producttabs .product.data.items > .cdv2-pdp-tablist > .data.item.title.switch.active,
    body.catalog-product-view #producttabs#producttabs .product.data.items > .cdv2-pdp-tablist > .item.title.switch.active,
    body.catalog-product-view #producttabs#producttabs .product.data.items > .cdv2-pdp-tablist > .data.item.title.switch.data-overlay,
    body.catalog-product-view #producttabs#producttabs .product.data.items > .cdv2-pdp-tablist > .data.item.title.switch.cd-accordion-title {
        background: #fff !important;
        background-color: #fff !important;
    }
    body.catalog-product-view #producttabs#producttabs .product.data.items > .cdv2-pdp-tablist > .data.item.title.switch:hover,
    body.catalog-product-view #producttabs#producttabs .product.data.items > .cdv2-pdp-tablist > .item.title.switch:hover {
        background: #f8fafc !important;
        background-color: #f8fafc !important;
    }
}

/* =====================================================
   PDP Mobile fallback: gleiche Abmessungen/Typo wie Accordion, aber ohne Shop-Blau-Kachel
   (falls cd-tabs-accordion / Init fehlt) — nur Handy
   ===================================================== */
@media (max-width: 767px) {
    .customdesign-pdp-v2 #producttabs .product.data.items .cdv2-pdp-tablist > .data.item.title.switch:not(.cd-downloads-toggle),
    .customdesign-pdp-v2 #producttabs .product.data.items .cdv2-pdp-tablist > .data.item.title.switch.active:not(.cd-downloads-toggle),
    .customdesign-pdp-v2 #producttabs .product.data.items .cdv2-pdp-tablist > .data.item.title > .switch:not(.cd-downloads-toggle),
    .customdesign-pdp-v2 #producttabs .product.data.items .cdv2-pdp-tablist > .data.item.title > .switch.active:not(.cd-downloads-toggle) {
        display: block !important;
        width: 100% !important;
        min-height: 56px !important;
        padding: 16px 44px 16px 16px !important;
        margin: 0 0 10px !important;
        box-sizing: border-box !important;
        position: relative !important;
        border: none !important;
        border-radius: 8px !important;
        background: #fff !important;
        color: var(--bs-blue, #00446a) !important;
        font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        text-align: left !important;
        justify-content: flex-start !important;
        box-shadow: none !important;
    }

    .customdesign-pdp-v2 #producttabs .product.data.items .cdv2-pdp-tablist > .data.item.title.switch:not(.cd-downloads-toggle)::after,
    .customdesign-pdp-v2 #producttabs .product.data.items .cdv2-pdp-tablist > .data.item.title > .switch:not(.cd-downloads-toggle)::after {
        content: '' !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        width: 8px !important;
        height: 8px !important;
        border-right: 2px solid var(--bs-blue, #00446a) !important;
        border-bottom: 2px solid var(--bs-blue, #00446a) !important;
        transform: translateY(-65%) rotate(45deg) !important;
        pointer-events: none !important;
    }
}

/* Nach Tab-Fallback (nur Handy): Downloads-Toggle hard auf padding 0 */
@media (max-width: 767px) {
    body.customdesign-pdp-v2 #producttabs#producttabs .cd-shared-rightboxes-wrap .downloads > .cd-downloads-toggle,
    body.customdesign-pdp-v2 #producttabs#producttabs .cd-shared-rightboxes-wrap .right-box.downloads > .cd-downloads-toggle,
    body.customdesign-pdp-v2 #producttabs#producttabs .cd-shared-rightboxes-wrap .rightbox .downloads > .cd-downloads-toggle,
    body.customdesign-pdp-v2 #producttabs#producttabs .cd-shared-rightboxes-wrap .rightbox .right-box.downloads > .cd-downloads-toggle {
        padding: 0 !important;
        min-height: 0 !important;
    }
}

/* Tablet Drawer final fix: show arrow on level-1 items with level-2 children */
@media (min-width: 768px) and (max-width: 1199px) {
    body.overflow #nav.bs-mega .nav-primary .alles.show-cols .level1.navitem.nav-sub[data-level="1"],
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .level1.navitem.nav-sub[data-level="1"] {
        position: relative !important;
        padding-right: 42px !important;
    }

    body.overflow #nav.bs-mega .nav-primary .alles.show-cols .level1.navitem.nav-sub[data-level="1"] > .bs-nav-chevron,
    body.overflow #nav.bs-mega-v2 .nav-primary .alles.show-cols .level1.navitem.nav-sub[data-level="1"] > .bs-nav-chevron {
        display: block !important;
        position: absolute !important;
        right: 16px !important;
        top: 50% !important;
        width: 8px !important;
        height: 8px !important;
        margin: 0 !important;
        border-top: 2px solid var(--bs-blue, #00446a) !important;
        border-right: 2px solid var(--bs-blue, #00446a) !important;
        border-bottom: none !important;
        border-left: none !important;
        background: none !important;
        transform: translateY(-50%) rotate(45deg) !important;
        -webkit-transform: translateY(-50%) rotate(45deg) !important;
        opacity: 0.9 !important;
        pointer-events: none !important;
        z-index: 6 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
    }
}

/* ULTRA fallback: level-1 arrows independent of body classes/span visibility */
@media (min-width: 768px) and (max-width: 1199px) {
    #nav.bs-mega .nav-primary .alles .level1.navitem.nav-sub[data-level="1"],
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem.nav-sub[data-level="1"] {
        position: relative !important;
        padding-right: 42px !important;
    }

    #nav.bs-mega .nav-primary .alles .level1.navitem.nav-sub[data-level="1"]::before,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem.nav-sub[data-level="1"]::before {
        content: none !important;
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    #nav.bs-mega .nav-primary .alles .level1.navitem.nav-sub[data-level="1"],
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem.nav-sub[data-level="1"] {
        display: block !important;
        position: relative !important;
        padding-right: 40px !important;
    }

    #nav.bs-mega .nav-primary .alles .level1.navitem.nav-sub[data-level="1"] > .bs-nav-chevron-text,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem.nav-sub[data-level="1"] > .bs-nav-chevron-text,
    #nav.bs-mega .nav-primary .alles .level1.navitem.nav-sub[data-level="1"] > .bs-nav-chevron,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem.nav-sub[data-level="1"] > .bs-nav-chevron,
    #nav.bs-mega .nav-primary .alles .bs-nav-tablet-chevron,
    #nav.bs-mega-v2 .nav-primary .alles .bs-nav-tablet-chevron {
        display: none !important;
    }

    #nav.bs-mega .nav-primary .alles .level1.navitem.nav-sub[data-level="1"]::before,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem.nav-sub[data-level="1"]::before {
        content: none !important;
    }
}

/* Final tablet alignment: level-1 rows use same look as level-0 */
@media (min-width: 768px) and (max-width: 1199px) {
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .level1.navitem.nav-sub[data-level="1"],
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .level1.navitem.nav-sub[data-level="1"] {
        font-family: 'Quicksand', sans-serif !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        color: var(--bs-blue, #00446a) !important;
        line-height: 1.4 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        background: transparent !important;
        /* WICHTIG: border-bottom NICHT auf none setzen — sonst fehlen die hellblauen
         * Trennlinien zwischen Chevron-Items (Waschtische, Badschraenke, ..., Sale %,
         * Haeufig gesucht) auf Tablet. Items ohne Chevron behalten ihren Border aus
         * den allgemeinen Drawer-Item-Regeln; mit border-bottom: none hier
         * bekamen NUR die Chevron-Items keine Linie. */
        border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
        min-height: 0 !important;
        padding: 14px 40px 14px 16px !important;
        box-sizing: border-box !important;
        position: relative !important;
        display: block !important;
    }

    /* „Sale %“ im Tablet-Burger: orange wie „Alles anzeigen“ (Final-Alignment oben setzt sonst Blau) */
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"],
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"],
    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"],
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"] {
        color: #ec6608 !important;
        font-weight: 600 !important;
    }
    #nav.bs-mega .nav-primary .alles.show-cols .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"]:hover,
    #nav.bs-mega-v2 .nav-primary .alles.show-cols .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"]:hover,
    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"]:hover,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"]:hover {
        color: var(--bs-blue, #00446a) !important;
    }
    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"] a,
    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"] a:visited,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"] a,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"] a:visited {
        color: #ec6608 !important;
    }
    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"]:hover a,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem.nav-sub.bs-mega-sale[data-level="1"]:hover a {
        color: var(--bs-blue, #00446a) !important;
    }
}

/* Hide template-rendered .bs-nav-level1-inline-arrow span on mobile + tablet
   (Burger drawer). On desktop the span remains visible in the mega menu.
   Inline style sets display:inline-block !important — CSS !important can't
   override that, but visibility/width/height/position aren't set inline. */
@media (max-width: 1199px) {
    #nav.bs-mega .nav-primary .alles .bs-nav-level1-inline-arrow,
    #nav.bs-mega-v2 .nav-primary .alles .bs-nav-level1-inline-arrow {
        visibility: hidden !important;
        position: absolute !important;
        left: -99999px !important;
        top: -99999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    #nav.bs-mega .nav-primary .alles .nav-column > .level1.navitem.nav-sub[data-level="1"]::before,
    #nav.bs-mega-v2 .nav-primary .alles .nav-column > .level1.navitem.nav-sub[data-level="1"]::before,
    #nav.bs-mega .nav-primary .alles .level1.navitem.nav-sub[data-level="1"]::before,
    #nav.bs-mega-v2 .nav-primary .alles .level1.navitem.nav-sub[data-level="1"]::before {
        content: none !important;
        display: none !important;
        border: none !important;
        background: none !important;
    }
}

/* Produkt-Keyfacts auf Touch-Geraeten (Tablet + Handy) ausblenden, wenn
 * der Store-Config-Schalter solutioo_customdesign/kategorie/hide_product_keyfacts_on_touch
 * = "Ja" gesetzt ist. Wirkt nur bis 1199px (Tablet + Mobile), Desktop ist
 * nicht betroffen (Keyfacts dort ohnehin nur in der Hover-Detail-Karte).
 *
 * Versteckt:
 *   - `.add-bottom` (Wrapper um die Keyfacts-Bullet-Liste aus
 *     Badshop_ProductDataExtend::list/keyfacts.phtml).
 *   - `.gratis-versand` (hellblaue Pill „gratis Versand" aus
 *     Badshop_ProductDataExtend::list/shippinginfo.phtml — User-Anfrage 21.05.2026
 *     16:55: „wenn keine Produktmerkmale, dann keine kostenloser Versand-Pill, wenn
 *     Produktmerkmale, dann kostenloser Versand-Pill"). Die `.lieferzeit`-Anzeige
 *     („Lieferzeit ca. 6-8 Wochen") bleibt sichtbar — sie ist eine sachliche Info
 *     und kein Marketing-Hinweis. Beide Elemente liegen im selben `.versand`-Wrapper,
 *     aber wir versteckenden gezielt nur `.gratis-versand`.
 *
 * Die Klasse `bs-hide-keyfacts-touch` haengt list.phtml an .products-grid-Wrapper. */
@media (max-width: 1199px) {
    body.customdesign-catv2 .products-grid.bs-hide-keyfacts-touch .product-item .add-bottom {
        display: none !important;
    }
    /* Spezifischerer Selektor noetig: die `.gratis-versand`-Pill hat im Tablet-Block
     * @media (min-width: 768px) and (max-width: 1199px) auf Z. 4623 eine Regel mit
     * Spezifitaet (0,8,0):
     *   .customdesign-catv2 .products-grid .product-items .product-item:not(.hover)
     *     .main-data .versand .gratis-versand { display: inline-block !important }
     * Eine simple `.products-grid.bs-hide-keyfacts-touch .product-item .gratis-versand`-
     * Regel (0,5,1) verliert dagegen. Daher denselben Pfad nachbauen + zusaetzliche
     * `bs-hide-keyfacts-touch`-Klasse + `body`-Element -> Spezifitaet (0,10,1) > (0,8,0). */
    body.customdesign-catv2 .products-grid.bs-hide-keyfacts-touch .product-items .product-item:not(.hover) .main-data .versand .gratis-versand,
    body.customdesign-catv2 .products-grid.bs-hide-keyfacts-touch .product-item .gratis-versand {
        display: none !important;
    }
}

/* PLP Touch (Handy + Tablet): Lieferzeit rechtsbündig wie Preisblock */
@media (max-width: 1199px) {
    body.customdesign-catv2 .product-item .versand .lieferzeit {
        align-self: stretch;
        width: 100%;
        text-align: right !important;
    }
}

/*
 * EOF: Burger-Menü ohne Logo-/Header-Sprung (Tablet + Mobil)
 * Theme styles-l: body.overflow { margin-left:350px; transition:margin .3s } — Overlay-Drawer braucht das nicht.
 * JS hide() auf #resp-menu-wrapper entfernte den Burger aus dem Flex-Header → Logo rutschte kurz nach links.
 */
@media (max-width: 1199px) {
    html {
        scrollbar-gutter: stable;
    }

    html.overflow,
    body.overflow {
        margin-left: 0 !important;
        margin-right: 0 !important;
        transition: none !important;
    }

    body.overflow #resp-menu-wrapper,
    body.overflow .header-menu #resp-menu-wrapper {
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/*
 * EOF Mobil Level 0: Info-Block unten am Bildschirm, Kategorien nur scrollen wenn noetig.
 * (Nur max-width 767 — Tablet unveraendert.)
 */
@media (max-width: 767px) {
    body.overflow html.overflow body.overflow .page-wrapper > .topmenu .nav-top-container {
        overflow-y: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    body.overflow #nav.bs-mega:not(:has(.alles.show-cols)):not(:has(.navpar.navpar-open)),
    body.overflow #nav.bs-mega-v2:not(:has(.alles.show-cols)):not(:has(.navpar.navpar-open)) {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: 100% !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
    }

    body.overflow #nav.bs-mega:not(:has(.alles.show-cols)):not(:has(.navpar.navpar-open)) .nav-primary,
    body.overflow #nav.bs-mega-v2:not(:has(.alles.show-cols)):not(:has(.navpar.navpar-open)) .nav-primary {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        padding-bottom: 0 !important;
    }

    body.overflow #nav.bs-mega:not(:has(.alles.show-cols)):not(:has(.navpar.navpar-open)) > .bs-mobile-phone-info,
    body.overflow #nav.bs-mega-v2:not(:has(.alles.show-cols)):not(:has(.navpar.navpar-open)) > .bs-mobile-phone-info {
        flex: 0 0 auto !important;
        margin-top: auto !important;
    }
}

/* Mega-Menü: „Alles anzeigen“ — einheitlicher Tab-Fokus (s. customdesign.css --bs-kb-focus-*) */
#nav.bs-mega-v2 .alles-anzeigen:focus-visible,
#nav.bs-mega .alles-anzeigen:focus-visible {
    outline: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a) !important;
    outline-offset: var(--bs-kb-focus-outline-offset, 2px) !important;
    box-shadow: none !important;
    color: var(--bs-kb-focus-color, #00446a) !important;
    text-decoration-color: var(--bs-kb-focus-color, #00446a) !important;
}