/* ============================================================
   Solutioo Custom Design Framework v3
   Pixel-perfect implementation based on screen designs

   Breakpoint reference:
   - 380px  (max) : Tiny screens (SE, small Android)
   - 479px  (max) : Extra-small / portrait phones
   - 767px  (max) : Mobile (single column)
   - 768px–1199px  : Tablet (stacked header, 2-col products, 4-col subcats)
   - 1200px (min) : Desktop (side-by-side header, 3-col products, mega-nav)
   ============================================================ */

/*
 * Trusted Shops Trustbadge: z-index Max-Int — überdeckt Header-Einschübe.
 * Filter nutzt body.bs-fd-drawer-open (filter-drawer.css); hier Warenkorb,
 * Merkliste, Kundenkonto, Service/Telefon per :has(.…--on / --open).
 *
 * display:none + innere Selektoren: TS-Minimized-Button überschreibt sonst
 * Parent visibility/pointer-events und bleibt hover-/klickbar (siehe filter-drawer.css).
 */
body:has(.bs-sb--on) [id^="trustbadge-container-"],
body:has(.bs-sb--on) [id^="trustbadge-container-"] *,
body:has(.bs-sb--on) [id^="minimized-trustbadge-"],
body:has(.bs-sb--on) #trustbadge-iframe,
body:has(.bs-cart-sidebar--open) [id^="trustbadge-container-"],
body:has(.bs-cart-sidebar--open) [id^="trustbadge-container-"] *,
body:has(.bs-cart-sidebar--open) [id^="minimized-trustbadge-"],
body:has(.bs-cart-sidebar--open) #trustbadge-iframe,
body:has(.ws-sb--on) [id^="trustbadge-container-"],
body:has(.ws-sb--on) [id^="trustbadge-container-"] *,
body:has(.ws-sb--on) [id^="minimized-trustbadge-"],
body:has(.ws-sb--on) #trustbadge-iframe,
body:has(.cs-sb--on) [id^="trustbadge-container-"],
body:has(.cs-sb--on) [id^="trustbadge-container-"] *,
body:has(.cs-sb--on) [id^="minimized-trustbadge-"],
body:has(.cs-sb--on) #trustbadge-iframe,
body:has(.ps-sb--on) [id^="trustbadge-container-"],
body:has(.ps-sb--on) [id^="trustbadge-container-"] *,
body:has(.ps-sb--on) [id^="minimized-trustbadge-"],
body:has(.ps-sb--on) #trustbadge-iframe,
body:has(#bs-nl-drawer.bs-nl-drawer--open) [id^="trustbadge-container-"],
body:has(#bs-nl-drawer.bs-nl-drawer--open) [id^="trustbadge-container-"] *,
body:has(#bs-nl-drawer.bs-nl-drawer--open) [id^="minimized-trustbadge-"],
body:has(#bs-nl-drawer.bs-nl-drawer--open) #trustbadge-iframe {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* --- Breadcrumbs (shop-wide, PDP-aligned: colors, home icon, chevron alignment) ---
   Checkout keeps its own rules (.checkout-index-index .breadcrumbs in theme LESS). */
body:not(.checkout-index-index) .page-wrapper .breadcrumbs {
    padding: 24px 0 12px !important;
    margin: 0 0 8px !important;
    text-align: left;
    font-size: 13px;
    max-width: 100%;
    box-sizing: border-box;
}
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .items {
    display: inline-flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    justify-content: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
}
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    line-height: 1.35;
    color: var(--bs-blue-gray, #4a6886);
}
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .item a {
    color: var(--bs-blue-gray, #4a6886);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    line-height: 1.35;
}
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .item a:hover {
    color: var(--bs-blue, #00446a);
    text-decoration: none;
}
/* Home: first linked crumb = house icon (label visually hidden for a11y) */
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .item:first-child a {
    position: relative;
    font-size: 0;
    line-height: 0;
    display: inline-flex;
    align-items: center;
}
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .item:first-child a span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .item:first-child a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6886' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .item:first-child a:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300446a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
}
/* Single-angle quote: flex-centered box + slight upward shift (glyph sits low vs. Latin cap height) */
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .item:not(:last-child)::after {
    content: '\203A';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 0 8px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    height: 1.35em;
    color: var(--bs-blue-gray, #4a6886);
    font-weight: 300;
    flex-shrink: 0;
    transform: translateY(-0.07em);
}
body:not(.checkout-index-index) .page-wrapper .breadcrumbs .item strong {
    color: var(--bs-blue, #00446a);
    font-weight: 600;
}

/* --- USP Trust Bar (above countdown banner) --- */
.bs-usp-bar {
    width: 100%;
    padding: 10px 16px;
    background-color: #FFFFFF !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    line-height: 1;
    box-sizing: border-box;
}
/* Kein orangener Aktionsbanner (deaktiviert, Warenkorb/Checkout, …): USP-Leiste hellblau */
.bs-usp-bar:not(:has(~ .bs-top-banner)) {
    background-color: var(--bs-blue-light, #f0f6fa) !important;
}
.bs-usp-bar__list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 32px;
    max-width: 1440px;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
}
.bs-usp-bar__item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--bs-blue, #00446a);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0 !important;
    padding: 6px 4px !important;
    min-height: 44px;
    box-sizing: border-box;
    line-height: 1 !important;
}
.bs-usp-bar__icon {
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(17%) sepia(60%) saturate(1500%) hue-rotate(175deg) brightness(95%);
}
.bs-usp-bar__bullet {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-blue, #00446a);
}
.bs-usp-bar__badge {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    opacity: 0.9;
    transition: opacity 0.2s ease;
}
.bs-usp-bar__badge:hover {
    opacity: 1;
}
.bs-usp-bar__badge img {
    border-radius: 3px;
}

/* --- Top Banner (above header) --- */
.bs-top-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 8px 16px !important;
    text-align: center;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
    line-height: 1.3;
    letter-spacing: 0.3px;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
}
a.bs-top-banner:hover {
    opacity: 1;
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.bs-top-banner__message {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 8px;
    line-height: 1.25;
}
.bs-top-banner__text {
    white-space: normal;
    line-height: 1.25;
}
.bs-top-banner__countdown {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.25;
}
.bs-top-banner__cta {
    display: inline-block;
    padding: 4px 14px;
    border: 1.5px solid #FFFFFF;
    border-radius: 20px;
    background: transparent;
    color: #FFFFFF !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
    margin-left: 2px;
    flex-shrink: 0;
}
a.bs-top-banner:hover .bs-top-banner__cta,
.bs-top-banner__cta:hover {
    background: #FFFFFF !important;
    color: #ec6608 !important;
}

/* Aktionsleiste — Inhalts-Slider (bis zu 3 Slides) */
.bs-top-banner--slider {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.bs-top-banner--slider.bs-top-banner--multi {
    padding-left: 28px !important;
    padding-right: 28px !important;
}
.bs-top-banner__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.bs-top-banner__track {
    display: flex;
    width: 100%;
    align-items: stretch;
    transition: transform 0.45s ease;
    will-change: transform;
}
.bs-top-banner__slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bs-top-banner__slide-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    width: 100%;
    text-decoration: none !important;
    color: inherit !important;
}
a.bs-top-banner__slide-inner:hover {
    opacity: 1;
    color: inherit !important;
    text-decoration: none !important;
}
.bs-top-banner__nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Nur „float up“ — kein Luma-Button-Hintergrund (:active/:focus aus styles-m). */
.bs-top-banner--slider .bs-top-banner__nav:hover,
.bs-top-banner--slider .bs-top-banner__nav:focus,
.bs-top-banner--slider .bs-top-banner__nav:active {
    background: transparent !important;
    border: 0 !important;
    color: inherit !important;
    opacity: 1;
}

.bs-top-banner__nav:hover,
.bs-top-banner__nav:focus-visible {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .bs-top-banner__nav {
        transition: none;
    }

    .bs-top-banner__nav:hover,
    .bs-top-banner__nav:focus-visible {
        transform: none;
    }
}
.bs-top-banner__nav-icon {
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.bs-top-banner__nav--prev .bs-top-banner__nav-icon {
    transform: rotate(-135deg);
    margin-left: 2px;
}
.bs-top-banner__nav--next .bs-top-banner__nav-icon {
    transform: rotate(45deg);
    margin-right: 2px;
}

/* ============================================================
   HEADER – Redesign: one-line layout, phone icon visible
   ============================================================ */

/* Show phone icon in the icon bar (was hidden by theme) */
#telefon-wrapper {
    display: flex !important;
}

/* Hide the CMS info wrapper (hotline text) as fallback */
.info-wrapper {
    display: none !important;
}


/* Remove grey border / shadow below header */
.page-header {
    border-bottom: none !important;
    box-shadow: none !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}
.nav-sections {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}
.nav-sections,
.nav-sections-items,
.nav-sections-item-content,
.nav-sections-item-title {
    border-top: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Search bar – global border override */
.search-bar-wrapper {
    border: 1.5px solid var(--bs-blue, #00446a) !important;
    border-radius: 20px !important;
    overflow: visible !important;
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    background: #fff !important;
    box-sizing: border-box !important;
}
/* Innenradius ≈ Außen 20px − Rand 1,5px — sonst wirkt die Füllfläche/Fokusfarbe eckig links */
#search-input,
#search-input1,
form#main_search_form .search-bar-wrapper #search-input,
form#main_search_form .search-bar-wrapper #search-input1 {
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    border-radius: 18px 0 0 18px !important;
    background: #fff !important;
    -webkit-background-clip: padding-box !important;
    background-clip: padding-box !important;
}
form#main_search_form .search-bar-wrapper #search-input:focus,
form#main_search_form .search-bar-wrapper #search-input1:focus,
form#main_search_form .search-bar-wrapper #search-input:focus-visible,
form#main_search_form .search-bar-wrapper #search-input1:focus-visible {
    background: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Suchfeld-Fokus: dezenter, sauberer Look statt Shop-Standard-Ring.
   Der Standard-Tastatur-Fokusring (3px blau + weiße Innenkante) wirkt zusammen
   mit der blauen Pillenkante unruhig (weißer Spalt + doppelte Linie). Stattdessen:
   blaue Pillenkante bleibt und bekommt einen weichen blauen Schein aussen herum —
   kein Weiss, keine zweite harte Linie. */
form#main_search_form .search-bar-wrapper:focus-within {
    border-color: var(--bs-blue, #00446a) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, .18) !important;
}
form#main_search_form .search-bar-wrapper #search-button.action.search:focus-visible,
.page-wrapper form#main_search_form .search-bar-wrapper #search-button.action.search:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
form#main_search_form .search-bar-wrapper #search-input:-webkit-autofill,
form#main_search_form .search-bar-wrapper #search-input1:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    box-shadow: 0 0 0 1000px #fff inset !important;
    border-radius: 18px 0 0 18px !important;
}
/* Epoq: Button in Wrapper — rechte Pillenecke */
form#main_search_form .search-bar-wrapper .search-button-wrapper {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: stretch !important;
    border-radius: 0 18px 18px 0 !important;
    overflow: hidden !important;
}

/* Such-Submit: Template nutzt suchen_lupe_white.svg (bereits weiß) — kein brightness/invert (macht die Lupe unsichtbar).
   Button bekommt display:flex + feste min-Maße, damit overflow:hidden + font-size:0 das img nicht auf 0px kollabiert. */
.page-wrapper form#main_search_form #search-button.action.search,
.page-wrapper #search-button.action.search {
    font-size: 0 !important;
    line-height: 1 !important;
    color: transparent !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 38px !important;
    min-height: 38px !important;
    padding: 0 8px !important;
    border-radius: 0 18px 18px 0 !important;
}
.page-wrapper form#main_search_form #search-button.action.search img,
.page-wrapper #search-button.action.search img {
    filter: none !important;
    -webkit-filter: none !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    flex-shrink: 0 !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.



/* --- Global page-main padding (30px desktop/tablet, 20px mobile) --- */
.page-main {
    padding-left: 30px !important;
    padding-right: 30px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}

/* CMS 1-Spalter: kein zusätzliches horizontales Padding/Margin in der Spalte — Außenabstand nur über .page-main (vermeidet doppelten linken Einzug, oft ~8px) */
body.cms-page-view.page-layout-1column:not(.cms-index-index):not(.active-builder) .columns,
body.cms-page-view.page-layout-1column:not(.cms-index-index):not(.active-builder) .column.main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* --- Base Typography --- */
body,
.page-wrapper body {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: var(--bs-font-size-body, 16px);
    color: var(--bs-font-color, #00446a);
    background-color: var(--bs-bg-color, #FFFFFF);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.page-wrapper h1, .page-wrapper .bs-h1, .column.main h1 {
    font-size: var(--bs-font-size-h1, 32px);
    color: var(--bs-font-color, #00446a);
    font-weight: 700;
    line-height: 1.2;
}
.page-wrapper h2, .page-wrapper .bs-h2, .column.main h2 {
    font-size: var(--bs-font-size-h2, 26px);
    color: var(--bs-font-color, #00446a);
    font-weight: 700;
    line-height: 1.25;
}
.page-wrapper h3, .page-wrapper .bs-h3, .column.main h3 {
    font-size: var(--bs-font-size-h3, 22px);
    color: var(--bs-font-color, #00446a);
    font-weight: 600;
    line-height: 1.3;
}
.page-wrapper h4, .page-wrapper .bs-h4, .column.main h4 {
    font-size: var(--bs-font-size-h4, 18px);
    color: var(--bs-font-color, #00446a);
    font-weight: 600;
    line-height: 1.35;
}


/* --- Color Utilities --- */
.bs-text-accent  { color: var(--bs-accent-color, #ec6608) !important; }
.bs-text-primary { color: var(--bs-font-color, #00446a) !important; }
.bs-text-white   { color: #FFFFFF !important; }
.bs-bg-accent    { background-color: var(--bs-accent-color, #ec6608) !important; }
.bs-bg-primary   { background-color: var(--bs-font-color, #00446a) !important; }

/* --- Buttons --- */
.page-wrapper .bs-btn-accent,
.column.main .bs-btn-accent,
a.bs-btn-accent {
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    text-decoration: none !important;
    text-align: center !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 40px !important;
    transition: background-color 0.2s ease, transform 0.15s ease;
    box-sizing: border-box !important;
    background-color: var(--bs-accent-color, #ec6608) !important;
    color: #FFFFFF !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
.page-wrapper .bs-btn-accent:visited,
a.bs-btn-accent:visited { color: #FFFFFF !important; text-decoration: none !important; }
.page-wrapper .bs-btn-accent:hover,
a.bs-btn-accent:hover {
    background-color: var(--bs-accent-color-hover, #C96000) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}

/*
 * Unified keyboard focus (:focus-visible) — DEFAULT shopweit.
 * Blaue Kontur + weißer Innenrand (Referenz: Mega-Menü Neuheiten-Kacheln).
 * Theme :focus { outline: 0 } in _extend.less bleibt für Mausklicks.
 *
 * Ausnahmen (opt-out / Variante):
 *   .bs-kb-focus-none   — kein Fokus-Ring
 *   .bs-kb-focus-invert — heller Ring auf dunklem/orangem Hintergrund (Drawer-Kopf)
 */
:root {
    --bs-kb-focus-color: #00446a;
    --bs-kb-focus-outline-width: 3px;
    --bs-kb-focus-outline-offset: 2px;
    --bs-kb-focus-inset-white: 2px;
}

/* ── Global default: alle Tastatur-fokussierbaren Elemente ──
 * :not(.bs-kb-focus-invert) ist PFLICHT hier (nicht nur auf der Invert-Regel
 * selbst): html+body+button hat 3 Typ-Selektoren, waehrend die separate
 * ".bs-kb-focus-invert:focus-visible"-Regel nur 2 hat — bei gleicher
 * Klassen-Anzahl gewinnt sonst IMMER diese Default-Regel (hoehere
 * Typ-Selektor-Anzahl), egal in welcher Reihenfolge die Regeln stehen.
 * Ergebnis ohne dieses :not(): Buttons mit .bs-kb-focus-invert (z. B. der
 * rote Merkliste-Gast-Toast) zeigen trotzdem den blauen Standard-Ring. */
html body a[href]:focus-visible:not(.bs-kb-focus-none):not(.bs-kb-focus-invert),
html body area[href]:focus-visible:not(.bs-kb-focus-none):not(.bs-kb-focus-invert),
html body button:focus-visible:not(.bs-kb-focus-none):not(.bs-kb-focus-invert),
html body input:not([type="hidden"]):focus-visible:not(.bs-kb-focus-none):not(.bs-kb-focus-invert),
html body select:focus-visible:not(.bs-kb-focus-none):not(.bs-kb-focus-invert),
html body textarea:focus-visible:not(.bs-kb-focus-none):not(.bs-kb-focus-invert),
html body summary:focus-visible:not(.bs-kb-focus-none):not(.bs-kb-focus-invert),
html body [tabindex]:not([tabindex="-1"]):focus-visible:not(.bs-kb-focus-none):not(.bs-kb-focus-invert),
html body iframe:focus-visible:not(.bs-kb-focus-none):not(.bs-kb-focus-invert) {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-kb-focus-color) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: inset 0 0 0 var(--bs-kb-focus-inset-white) #ffffff !important;
}

html body .bs-kb-focus-none:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

html body .bs-kb-focus-invert:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: -3px !important;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85) !important;
}

/*
 * Mega-Menü: Tastatur-Fokus spiegelt Hover — ohne globalen weißen Inset-Ring,
 * der Karten-Schatten/Lift und Text-Hover-Farben überschreibt.
 */
#nav.bs-mega a[href]:focus-visible,
#nav.bs-mega-v2 a[href]:focus-visible {
    box-shadow: none !important;
}

/* Text-Links — Ring ohne Innenrand; Hover-Farben bleiben bei :hover:focus-visible erhalten */
#nav.bs-mega-v2 .alles-anzeigen:focus-visible,
#nav.bs-mega .alles-anzeigen:focus-visible {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-kb-focus-color) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: none !important;
    color: var(--bs-kb-focus-color) !important;
    text-decoration-color: var(--bs-kb-focus-color) !important;
    border-radius: 4px;
}

/* Desktop: outline:none auf .alles-anzeigen schlägt generischen Fokus — explizit überschreiben */
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,
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 .navcolumns > .nav-column:first-child > .navitem.alles-anzeigen:focus-visible,
#nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open > .alles-anzeigen:focus-visible,
#nav.bs-mega-v2 .nav-primary .alles .navpar.navpar-open .level2.navpar.navpar-open > .navitem.alles-anzeigen:focus-visible,
#nav.bs-mega .nav-primary .alles .navpar.navpar-open > .alles-anzeigen:focus-visible,
#nav.bs-mega .nav-primary .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;
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-item:focus-visible,
#nav.bs-mega-v2 a.bs-mega-v2-neuheit-item:focus-visible {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-kb-focus-color) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: none !important;
    color: #ec6608 !important;
    transform: translateX(4px);
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-item:focus-visible .bs-mega-v2-neuheit-icon,
#nav.bs-mega-v2 a.bs-mega-v2-neuheit-item:focus-visible .bs-mega-v2-neuheit-icon {
    color: #ec6608;
}

#nav.bs-mega a.navitem:focus-visible,
#nav.bs-mega-v2 a.navitem:focus-visible,
#nav.bs-mega .nav-column .more:focus-visible,
#nav.bs-mega-v2 .nav-column .more:focus-visible {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-kb-focus-color) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: none !important;
}
#nav.bs-mega .navpar .navitem:focus-visible,
#nav.bs-mega-v2 .navpar .navitem:focus-visible {
    color: #ec6608 !important;
}
#nav.bs-mega .bs-mega-brand-all:focus-visible,
#nav.bs-mega-v2 .bs-mega-brand-all:focus-visible {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-kb-focus-color) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: none !important;
    color: #ec6608 !important;
    text-decoration-color: #ec6608 !important;
}

/* Karten/Teaser — Tab: Schatten/Pfeil wie Hover, ohne translateY (sonst Abschnitt am Rand) */
#nav.bs-mega .bs-mega-highlight-card:focus-visible,
#nav.bs-mega-v2 .bs-mega-highlight-card:focus-visible {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-kb-focus-color) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: 0 6px 24px rgba(0, 68, 106, 0.2) !important;
}
#nav.bs-mega .bs-mega-highlight-card:focus-visible .bs-mega-highlight-arrow,
#nav.bs-mega-v2 .bs-mega-highlight-card:focus-visible .bs-mega-highlight-arrow {
    transform: translateX(4px);
}
#nav.bs-mega .bs-mega-highlights-card:focus-visible,
#nav.bs-mega-v2 .bs-mega-highlights-card:focus-visible,
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlights-card:focus-visible {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-accent-color, #ec6608) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: 0 8px 28px rgba(236, 102, 8, 0.3) !important;
}

#nav.bs-mega .bs-mega-brand-item:focus-visible,
#nav.bs-mega-v2 .bs-mega-brand-item:focus-visible,
#nav.bs-mega-v2 .bs-mega-v2-top-brand-item:focus-visible {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-kb-focus-color) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: 0 2px 8px rgba(0, 68, 106, 0.1) !important;
    border-color: var(--bs-blue, #00446a) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-top-brand-item:focus-visible {
    box-shadow: 0 2px 12px rgba(0, 68, 106, 0.12) !important;
    transform: translateY(-1px);
}

#nav.bs-mega-v2 .bs-mega-v2-tile:focus-visible {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-kb-focus-color) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: 0 6px 24px rgba(0, 68, 106, 0.18) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-tile--main:focus-visible {
    outline: var(--bs-kb-focus-outline-width) solid var(--bs-kb-focus-color) !important;
    outline-offset: var(--bs-kb-focus-outline-offset) !important;
    box-shadow: 0 6px 24px rgba(0, 68, 106, 0.18) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-tile--main:focus-visible .bs-mega-v2-tile__cta {
    background: rgba(0, 68, 106, 0.92) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-tile:focus-visible .bs-mega-v2-tile__arrow,
#nav.bs-mega-v2 .bs-mega-v2-tile:hover .bs-mega-v2-tile__arrow {
    transform: translateX(3px);
}
#nav.bs-mega-v2 .bs-mega-v2-tile:focus-visible .bs-mega-v2-tile__img {
    transform: scale(1.05);
}

#nav.bs-mega .bs-mega-featured-link:focus-visible .bs-mega-featured-arrow,
#nav.bs-mega .bs-mega-featured-link:hover .bs-mega-featured-arrow {
    transform: translateX(4px);
}

.page-wrapper .bs-btn-outline,
a.bs-btn-outline {
    display: inline-block !important;
    width: auto !important;
    padding: 12px 28px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'Quicksand', sans-serif !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    border-radius: 40px !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box !important;
    background-color: transparent !important;
    border: 2px solid var(--bs-font-color, #00446a) !important;
    color: var(--bs-font-color, #00446a) !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
.page-wrapper .bs-btn-outline:hover,
a.bs-btn-outline:hover {
    background-color: var(--bs-font-color, #00446a) !important;
    color: #FFFFFF !important;
    text-decoration: none !important;
}
.page-wrapper .bs-btn-outline-accent,
a.bs-btn-outline-accent {
    display: inline-block !important;
    width: auto !important;
    max-width: fit-content !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    border-radius: 40px !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    box-sizing: border-box !important;
    background-color: transparent !important;
    border: 2px solid var(--bs-accent-color, #ec6608) !important;
    color: var(--bs-accent-color, #ec6608) !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
}
.page-wrapper .bs-btn-outline-accent:visited,
a.bs-btn-outline-accent:visited {
    color: var(--bs-accent-color, #ec6608) !important;
    text-decoration: none !important;
}
.page-wrapper .bs-btn-outline-accent:hover,
a.bs-btn-outline-accent:hover {
    background-color: var(--bs-accent-color, #ec6608) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    text-decoration: none !important;
}
/* ==========================================================================
   Bestätigungs-/Hinweis-Dialoge (confirm/alert/prompt) – Buttons im neuen Stil
   z. B. „Sind Sie sicher, dass Sie diesen Artikel … entfernen möchten?"
   Magento-Modal-Footer: .action-secondary (Abbrechen) / .action-primary (OK)
   ========================================================================== */
.modal-popup .modal-footer {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px !important;
    justify-content: flex-end !important;
    align-items: center;
}
.modal-popup .modal-footer button.action-primary,
.modal-popup .modal-footer button.action-secondary {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    padding: 11px 30px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    border: 2px solid transparent !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease !important;
}
/* Primär (OK / Bestätigen) – Akzentfarbe gefüllt */
.modal-popup .modal-footer button.action-primary {
    background: var(--bs-accent-color, #ec6608) !important;
    border-color: var(--bs-accent-color, #ec6608) !important;
    color: #ffffff !important;
}
.modal-popup .modal-footer button.action-primary:hover,
.modal-popup .modal-footer button.action-primary:focus {
    background: var(--bs-accent-color-hover, #C96000) !important;
    border-color: var(--bs-accent-color-hover, #C96000) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}
/* Sekundär (Abbrechen) – Blau-Outline */
.modal-popup .modal-footer button.action-secondary {
    background: transparent !important;
    border-color: var(--bs-blue, #00446a) !important;
    color: var(--bs-blue, #00446a) !important;
}
.modal-popup .modal-footer button.action-secondary:hover,
.modal-popup .modal-footer button.action-secondary:focus {
    background: var(--bs-blue, #00446a) !important;
    border-color: var(--bs-blue, #00446a) !important;
    color: #ffffff !important;
}
/* Tastatur-Fokus: klar sichtbarer Ring (Accessibility) */
.modal-popup .modal-footer button.action-primary:focus-visible,
.modal-popup .modal-footer button.action-secondary: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;
}

.page-wrapper .bs-btn-outline-white,
a.bs-btn-outline-white {
    display: inline-block !important;
    width: auto !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    text-decoration: none !important;
    text-align: center !important;
    cursor: pointer !important;
    border-radius: var(--bs-radius-btn, 4px) !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box !important;
    background-color: transparent !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    line-height: 1.4 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: none !important;
}
.page-wrapper .bs-btn-outline-white:hover,
a.bs-btn-outline-white:hover {
    background-color: #FFFFFF !important;
    color: var(--bs-font-color, #00446a) !important;
    text-decoration: none !important;
}

/* --- Layout Utilities --- */
.bs-container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}
.bs-flex { display: flex !important; }
.bs-flex-col { flex-direction: column; }
.bs-items-center { align-items: center; }
.bs-justify-between { justify-content: space-between; }
.bs-gap-16 { gap: 16px; }
.bs-gap-24 { gap: 24px; }

/* --- Spacing --- */
.bs-mt-0  { margin-top: 0 !important; }
.bs-mt-16 { margin-top: 16px !important; }
.bs-mt-24 { margin-top: 24px !important; }
.bs-mt-32 { margin-top: 32px !important; }
.bs-mt-48 { margin-top: 48px !important; }
.bs-mb-0  { margin-bottom: 0 !important; }
.bs-mb-8  { margin-bottom: 8px !important; }
.bs-mb-16 { margin-bottom: 16px !important; }
.bs-mb-24 { margin-bottom: 24px !important; }
.bs-mb-32 { margin-bottom: 32px !important; }


/* --- Images --- */
.page-wrapper .bs-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.page-wrapper .bs-img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Horizontal Scroll --- */
.page-wrapper .bs-scroll-x {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.page-wrapper .bs-scroll-x::-webkit-scrollbar { display: none; }
.page-wrapper .bs-scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

/* --- Section Headings --- */
.page-wrapper .bs-section-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(24px, 4vw, 32px) !important;
    font-weight: 700 !important;
    color: rgba(0, 68, 106, 1) !important;
    margin-bottom: 24px !important;
    margin-top: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* --- Slider Arrows --- */
.page-wrapper .bs-slider-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--bs-blue, #00446a);
    background: transparent;
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    font-size: 0;
    line-height: 0;
    padding: 0;
    box-sizing: border-box;
    position: relative;
}
.page-wrapper .bs-slider-arrow::after {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2.5px solid var(--bs-blue, #00446a);
    border-right: 2.5px solid var(--bs-blue, #00446a);
    position: absolute;
    transition: border-color 0.2s ease;
}
.page-wrapper .bs-slider-arrow[data-dir="prev"]::after {
    transform: rotate(-135deg);
    margin-left: 3px;
}
.page-wrapper .bs-slider-arrow[data-dir="next"]::after {
    transform: rotate(45deg);
    margin-right: 3px;
}
.page-wrapper .bs-slider-arrow:hover {
    background: var(--bs-blue, #00446a);
    border-color: var(--bs-blue, #00446a);
}
.page-wrapper .bs-slider-arrow:hover::after {
    border-color: #FFFFFF;
}
.page-wrapper .bs-slider-arrow--inactive {
    border-color: var(--bs-blue-light, #b8d4e8) !important;
    cursor: default;
    opacity: 1;
}
.page-wrapper .bs-slider-arrow--inactive::after {
    border-top-color: var(--bs-blue-light, #b8d4e8) !important;
    border-right-color: var(--bs-blue-light, #b8d4e8) !important;
}
.page-wrapper .bs-slider-arrow--inactive:hover {
    background: transparent !important;
    border-color: var(--bs-blue-light, #b8d4e8) !important;
}
.page-wrapper .bs-slider-arrow--inactive:hover::after {
    border-top-color: var(--bs-blue-light, #b8d4e8) !important;
    border-right-color: var(--bs-blue-light, #b8d4e8) !important;
}

/* ============================================================
   HOMEPAGE – Break out of Luma's 1440px container
   The hero and fader need to be full-width (edge-to-edge).
   ============================================================ */
.cms-index-index .page-main {
    max-width: 100% !important;
    width: 100% !important;
    margin: 20px 0 0 0 !important;
}
.cms-index-index .columns {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.cms-index-index .column.main {
    max-width: 100% !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Hero muss aus dem Padding ausbrechen (edge-to-edge) */
.cms-index-index .bs-hero--v1,
.cms-index-index .bs-hero--v2,
.cms-index-index .bs-hero--v3 {
    margin-left: -30px !important;
    margin-right: -30px !important;
    max-width: calc(100% + 60px) !important;
}


/* ============================================================
   HERO – Variant 1: Text-Overlay + Aktions-Slider
   Screen: Full-width hero image, dark title top-left,
   compact orange CTA, subline at bottom of image, then fader
   ============================================================ */
.page-wrapper .bs-hero--v1 {
    position: relative;
    margin: 0;
    padding: 0;
}
.page-wrapper .bs-hero--v1 .bs-hero__main {
    position: relative;
    width: 100%;
    overflow: visible;
    line-height: 0;
}
.page-wrapper .bs-hero--v1 .bs-hero__media-wrap {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}
/* Hotspot liegt nach Markup unter .bs-hero__overlay — muss darüber liegen (sonst weißer Verlauf „wäscht“ Karte/Button aus) */
.page-wrapper .bs-hero--v1 .bs-hero__main > .bs-hotspot {
    z-index: 15;
}
/* Nur das direkte Hero-Motiv (>), nicht <picture> im Hotspot-Tooltip (WebP um Produkt-Thumb) */
.page-wrapper .bs-hero--v1 .bs-hero__main > .bs-hero__media-wrap > picture,
.page-wrapper .bs-hero--v1 .bs-hero__media-wrap > picture {
    display: block;
    width: 100%;
}
/* Nur das Motiv im Hero-<picture> (Katalog-Hotspot-Thumbs liegen per WebP u.U. in eigenem <picture> im Tooltip) */
.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) {
    display: block !important;
    width: 100% !important;
    height: var(--bs-hero-img-h-mobile, 350px) !important;
    min-height: var(--bs-hero-img-h-mobile, 350px);
    max-height: var(--bs-hero-img-h-mobile, 350px);
    object-fit: cover !important;
    object-position: top center !important;
    max-width: none !important;
}
.page-wrapper .bs-hero--v1 .bs-hero__overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 24px 20px !important;
    z-index: 2;
    /* Leseverläufe: (1) unten Weiß → oben transparent für Subline/Motiv, (2) links → rechts wie Desktop */
    background-image:
        linear-gradient(
            to top,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.22) 38%,
            rgba(255, 255, 255, 0.06) 62%,
            rgba(255, 255, 255, 0) 80%
        ),
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.2) 36%,
            rgba(255, 255, 255, 0.06) 58%,
            rgba(255, 255, 255, 0) 78%
        ) !important;
    border: none !important;
    box-shadow: none !important;
    pointer-events: none !important;
}
.page-wrapper .bs-hero--v1 .bs-hero__overlay a,
.page-wrapper .bs-hero--v1 .bs-hero__overlay button,
.page-wrapper .bs-hero--v1 .bs-hero__overlay .bs-hero__tagline,
.page-wrapper .bs-hero--v1 .bs-hero__overlay .bs-hero__subline {
    pointer-events: auto;
}
.page-wrapper .bs-hero .bs-hero__overlay .bs-hero-pills,
.page-wrapper .bs-hero .bs-hero__overlay .bs-hero-pills a,
.page-wrapper .bs-hero .bs-hero__overlay .bs-hero-trust,
.page-wrapper .bs-hero .bs-hero__overlay .bs-hero-trust a {
    pointer-events: auto;
}
/* Pills + Tagline/CTA oben gruppieren, damit Desktop space-between die H1 unten hält */
.page-wrapper .bs-hero .bs-hero__overlay-start {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    gap: inherit;
    pointer-events: none;
}

/* --- Kategorie-Pillshapes im Hero --- */
.page-wrapper .bs-hero-pills {
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    z-index: 6;
    position: relative;
}
.page-wrapper .bs-hero-pills__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px 2px 6px;
    margin: 0 -2px;
}
.page-wrapper .bs-hero-pills__track::-webkit-scrollbar {
    display: none;
}
.page-wrapper .bs-hero-pills__pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 16px;
    border-radius: 999px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1.5px solid var(--bs-blue, #00446a);
    background: rgba(255, 255, 255, 0.92);
    color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 1px 4px rgba(0, 68, 106, 0.12);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.page-wrapper .bs-hero-pills__pill:hover,
.page-wrapper .bs-hero-pills__pill:focus-visible {
    background: var(--bs-accent-color, #ec6608);
    border-color: var(--bs-accent-color, #ec6608);
    color: #fff !important;
    transform: translateY(-1px);
}
/* Auf Farbfläche: hellere Pills */
.page-wrapper .bs-hero.bs-hero--mt-panel .bs-hero-pills__pill {
    border-color: rgba(255, 255, 255, 0.85);
    background: rgba(255, 255, 255, 0.16);
    color: #fff !important;
    box-shadow: none;
}
.page-wrapper .bs-hero.bs-hero--mt-panel .bs-hero-pills__pill:hover,
.page-wrapper .bs-hero.bs-hero--mt-panel .bs-hero-pills__pill:focus-visible {
    background: #fff;
    border-color: #fff;
    color: var(--bs-blue, #00446a) !important;
}

/* --- USP-/Trust-Pills im Hero (kleiner als Kategorie-Pills) --- */
.page-wrapper .bs-hero-trust {
    width: 100%;
    max-width: 100%;
    margin: 0 0 8px;
    z-index: 6;
    position: relative;
}
.page-wrapper .bs-hero-trust__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 2px 2px 4px;
    margin: 0 -2px;
}
.page-wrapper .bs-hero-trust__track::-webkit-scrollbar {
    display: none;
}
.page-wrapper .bs-hero-trust__pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    border: 1.5px solid var(--bs-hero-trust-pill-fg-mobile, #ffffff);
    background: var(--bs-hero-trust-pill-bg-mobile, rgba(255, 255, 255, 0.16));
    color: var(--bs-hero-trust-pill-fg-mobile, #ffffff);
    box-shadow: var(--bs-hero-trust-pill-shadow-mobile, none);
}
.page-wrapper .bs-hero-trust__icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: block;
    background-color: var(--bs-hero-trust-pill-fg-mobile, #ffffff);
    -webkit-mask-image: var(--bs-hero-trust-icon);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: var(--bs-hero-trust-icon);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}
.page-wrapper .bs-hero-trust__bullet {
    font-size: 12px;
    line-height: 1;
}
.page-wrapper .bs-hero-trust__text {
    display: inline;
}
.page-wrapper .bs-hero-trust__badge {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}
.page-wrapper .bs-hero-trust__badge img {
    width: 14px;
    height: 14px;
    display: block;
}

/* Hero-CTA (Outline): leicht weiß-transparente Füllung, Rand/Text orange wie global */
.page-wrapper .bs-hero--v1 .bs-hero__overlay a.bs-btn-outline-accent,
.page-wrapper .bs-hero--v1 .bs-hero__overlay .bs-btn-outline-accent {
    background-color: rgba(255, 255, 255, 0.48) !important;
}
/* Default oben nutzt !important — globale :hover-Regel verliert; Hover/Focus explizit */
.page-wrapper .bs-hero--v1 .bs-hero__overlay a.bs-btn-outline-accent:hover,
.page-wrapper .bs-hero--v1 .bs-hero__overlay .bs-btn-outline-accent:hover {
    background-color: var(--bs-accent-color, #ec6608) !important;
    color: #FFFFFF !important;
    border-color: var(--bs-accent-color, #ec6608) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Hero-Haupt-CTA Outline (V1): Lift + Schatten wie #marken / Bento (globales :hover ist nur -1px) */
.page-wrapper .bs-hero .bs-hero__top a.bs-btn-outline-accent {
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
.page-wrapper .bs-hero .bs-hero__top a.bs-btn-outline-accent:hover {
    transform: translateY(-2px);
    outline: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
html body .page-wrapper .bs-hero .bs-hero__top a.bs-btn-outline-accent:focus:not(:focus-visible),
html body .page-wrapper .bs-hero .bs-hero__top a.bs-btn-accent:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
html body .page-wrapper .bs-hero .bs-hero__top a.bs-btn-outline-accent:focus-visible,
html body .page-wrapper .bs-hero .bs-hero__top a.bs-btn-accent:focus-visible {
    transform: translateY(-2px);
    border: 2px solid #ffffff !important;
    outline: 2px solid var(--bs-kb-focus-color, #00446a) !important;
    outline-offset: 0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* Hero-Haupt-CTA gefüllt (V3): gleicher Lift wie Marken / Bento */
.page-wrapper .bs-hero .bs-hero__top a.bs-btn-accent {
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}
.page-wrapper .bs-hero .bs-hero__top a.bs-btn-accent:hover {
    transform: translateY(-2px);
    outline: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
.page-wrapper .bs-hero--v1 .bs-hero__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    z-index: 5;
}
@media (min-width: 1024px) {
    .page-wrapper .bs-hero--v1 .bs-hero__top,
    .page-wrapper .bs-hero--v3 .bs-hero__top {
        width: var(--bs-hero-tagline-box-w-desktop, 50%);
        max-width: 70%;
        box-sizing: border-box;
    }
}
.page-wrapper .bs-hero--v1 .bs-hotspot__tooltip,
.page-wrapper .bs-hero--v3 .bs-hotspot__tooltip,
.page-wrapper .bs-hero--v1 .bs-hotspot-popover-hero-v1,
.bs-hotspot-popover-hero-v1 {
    z-index: 20 !important;
}
.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 {
    color: rgba(0, 68, 106, 1) !important;
    font-size: var(--bs-hero-tagline-fs-desktop, 64px) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    max-width: 100%;
    width: 100%;
    text-shadow: none !important;
    letter-spacing: -0.5px;
}
.page-wrapper .bs-hero--v1 .bs-hero__overlay h1.bs-hero__subline,
.page-wrapper .bs-hero--v1 h1.bs-hero__subline,
.cms-index-index .column.main .bs-hero--v1 h1.bs-hero__subline {
    font-size: 28px !important;
    font-weight: var(--bs-hero-subline-fw, 900) !important;
    color: rgba(0, 68, 106, 1) !important;
    margin: 0 0 40px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--bs-hero-subline-font, Quicksand, sans-serif) !important;
    max-width: 620px;
}
.page-wrapper .bs-hero--v1 .bs-hero__subline strong,
.cms-index-index .column.main .bs-hero--v1 .bs-hero__subline strong {
    font: inherit !important;
    color: inherit !important;
    margin: 0 !important;
}
.page-wrapper .bs-hero--v1 .bs-hero__fader {
    margin: -50px auto 0 auto;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

/* Aktionsslider bei aktivem Countdown-/Aktions-Hero-Ersatz (kein Normal-Hero darüber).
   Nur Mobil/Tablet: positiven Abstand (kein Überlapp über Staffel/Meta).
   Desktop ≥1200: wieder negativer Margin wie zuvor (−70px, siehe responsive). */
.page-wrapper .bs-hero--promo-slider-only {
    position: relative;
    margin: 0;
    padding: 0;
}
@media (max-width: 1199px) {
    .page-wrapper .bs-hero--promo-slider-only .bs-hero__fader {
        margin-top: 16px !important;
    }
}

/* ============================================================
   HERO – Variant 2: Bild-Slider mit Promo-Blob
   Screen: Full-width slider, blue blob center-right,
   white badge top-right, nav arrows on sides
   ============================================================ */
.page-wrapper .bs-hero--v2 {
    position: relative;
    overflow: visible;
    margin: 0;
    padding: 0;
}
.page-wrapper .bs-hero--v2 .bs-hero__slider { position: relative; }
/* overflow: visible damit Hotspot-Tooltip oberhalb des Bildes wie bei Bento nicht abgeschnitten wird */
.page-wrapper .bs-hero--v2 .bs-hero__slides { position: relative; overflow: visible; line-height: 0; }
.page-wrapper .bs-hero--v2 .bs-hero__slide {
    display: none;
    position: relative;
}
.page-wrapper .bs-hero--v2 .bs-hero__slide.is-active { display: block; }
.page-wrapper .bs-hero--v2 .bs-hero__media-wrap {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}
.page-wrapper .bs-hero--v2 .bs-hero__media-wrap .bs-hotspot {
    z-index: 2;
}
.page-wrapper .bs-hero--v2 .bs-hero__media-wrap > picture { display: block; width: 100%; }
.page-wrapper .bs-hero--v2 .bs-hero__media-wrap > picture img:not(.bs-hotspot__thumb) {
    display: block !important;
    width: 100% !important;
    height: var(--bs-hero-img-h-mobile, 350px) !important;
    min-height: var(--bs-hero-img-h-mobile, 350px);
    max-height: var(--bs-hero-img-h-mobile, 350px);
    object-fit: cover !important;
    max-width: none !important;
}
.page-wrapper .bs-hero--v2 .bs-hero__blob {
    position: absolute !important;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 260px;
    background: rgba(0, 68, 106, 0.82);
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    z-index: 5;
}
.page-wrapper .bs-hero--v2 .bs-hero__blob-inner {
    color: #FFFFFF;
    padding: 20px;
}
.page-wrapper .bs-hero--v2 .bs-hero__blob-hearts {
    font-size: 22px;
    display: block;
    margin-bottom: 6px;
    color: #FFFFFF;
}
.page-wrapper .bs-hero--v2 .bs-hero__blob-text {
    font-size: clamp(26px, 5vw, 44px) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    display: block;
    margin-bottom: 16px;
    letter-spacing: 2px;
    color: #FFFFFF !important;
    text-transform: uppercase;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
}
.page-wrapper .bs-hero--v2 .bs-hero__badge {
    position: absolute !important;
    top: 12%;
    right: 8%;
    width: 90px;
    height: 90px;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    z-index: 6;
}
.page-wrapper .bs-hero--v2 .bs-hero__badge-text {
    font-size: 13px !important;
    color: var(--bs-accent-color, #ec6608) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-transform: uppercase;
}
.page-wrapper .bs-hero--v2 .bs-hero__nav {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(255,255,255,0.7) !important;
    border: none !important;
    font-size: 28px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--bs-font-color, #00446a) !important;
    transition: background 0.2s;
    padding: 0 !important;
    box-shadow: none !important;
}
.page-wrapper .bs-hero--v2 .bs-hero__nav:hover { background: rgba(255,255,255,0.95) !important; }
.page-wrapper .bs-hero--v2 .bs-hero__nav--prev { left: 12px; }
.page-wrapper .bs-hero--v2 .bs-hero__nav--next { right: 12px; }
.page-wrapper .bs-hero--v2 .bs-hero__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 6;
}
.page-wrapper .bs-hero--v2 .bs-hero__dot {
    width: 12px;
    height: 4px;
    background: rgba(255,255,255,0.5);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, width 0.2s;
}
.page-wrapper .bs-hero--v2 .bs-hero__dot.is-active {
    background: #FFFFFF;
    width: 24px;
}

/* ============================================================
   HERO – Variant 3: Kompakt-Hero + Aktionsgrid
   ============================================================ */
.page-wrapper .bs-hero--v3 {
    position: relative;
    margin: 0;
    padding: 0;
}
.page-wrapper .bs-hero--v3 .bs-hero__main {
    position: relative;
    width: 100%;
    overflow: visible;
    line-height: 0;
}
.page-wrapper .bs-hero--v3 .bs-hero__media-wrap {
    position: relative;
    display: block;
    width: 100%;
    line-height: 0;
}
.page-wrapper .bs-hero--v3 .bs-hero__main > .bs-hotspot {
    z-index: 15;
}

/* Hero-Hotspots: Punkt global weiß; Popup-Farben über .bs-hero .bs-hotspot__tooltip (--bs-blue lokal #00446a). */

/* Option B — Hotspot-Popover darf aus dem Hero ragen; Rundung auf Bild + Overlay statt Clip-Container.
   :not(.bs-hotspot__thumb) — Solutioo_WebpImages wrappt Katalog-IMG in <picture>; sonst träfen Hero-Min-Height/100%-Breite das Tooltip-Bild. */
.page-wrapper .bs-hero--v1 .bs-hero__main,
.page-wrapper .bs-hero--v3 .bs-hero__main,
.page-wrapper .bs-hero .bs-hero__media-wrap {
    overflow: visible;
}
.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),
.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) {
    border-radius: var(--bs-radius-container, 20px);
}
.page-wrapper .bs-hero--v1 .bs-hero__overlay,
.page-wrapper .bs-hero--v3 .bs-hero__overlay {
    border-radius: var(--bs-radius-container, 20px);
}

.page-wrapper .bs-hero--v3 .bs-hero__main > .bs-hero__media-wrap > picture,
.page-wrapper .bs-hero--v3 .bs-hero__media-wrap > picture { display: block; width: 100%; }
.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) {
    display: block !important;
    width: 100% !important;
    height: var(--bs-hero-img-h-mobile, 350px) !important;
    min-height: var(--bs-hero-img-h-mobile, 350px);
    max-height: var(--bs-hero-img-h-mobile, 350px);
    object-fit: cover !important;
    max-width: none !important;
}
.page-wrapper .bs-hero--v3 .bs-hero__overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 20px !important;
    z-index: 2;
    background-image:
        linear-gradient(
            to top,
            rgba(255, 255, 255, 0.5) 0%,
            rgba(255, 255, 255, 0.22) 38%,
            rgba(255, 255, 255, 0.06) 62%,
            rgba(255, 255, 255, 0) 80%
        ),
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(255, 255, 255, 0.2) 36%,
            rgba(255, 255, 255, 0.06) 58%,
            rgba(255, 255, 255, 0) 78%
        ) !important;
    pointer-events: none !important;
}
.page-wrapper .bs-hero--v3 .bs-hero__overlay a,
.page-wrapper .bs-hero--v3 .bs-hero__overlay button,
.page-wrapper .bs-hero--v3 .bs-hero__overlay .bs-hero__tagline,
.page-wrapper .bs-hero--v3 .bs-hero__overlay .bs-hero__subline {
    pointer-events: auto;
}
.page-wrapper .bs-hero--v3 .bs-hero__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.page-wrapper .bs-hero--v3 .bs-hero__overlay .bs-hero__top .bs-hero__tagline,
.page-wrapper .bs-hero--v3 .bs-hero__tagline {
    color: rgba(0, 68, 106, 1) !important;
    font-size: var(--bs-hero-tagline-fs-desktop, 64px) !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    max-width: 100%;
    width: 100%;
    letter-spacing: -0.5px;
}
.page-wrapper .bs-hero--v3 h1.bs-hero__subline {
    font-size: clamp(18px, 3.5vw, 28px) !important;
    font-weight: var(--bs-hero-subline-fw, 900) !important;
    color: rgba(0, 68, 106, 1) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: var(--bs-hero-subline-font, Quicksand, sans-serif) !important;
    max-width: 620px;
}

/* Aktionen Grid */
.page-wrapper .bs-aktionen {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 16px;
}
.page-wrapper .bs-aktionen__heading {
    font-size: clamp(22px, 4vw, 32px) !important;
    font-weight: 700 !important;
    color: var(--bs-font-color, #00446a) !important;
    text-align: center;
    margin: 24px 0 !important;
    padding: 0 !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
}
.page-wrapper .bs-aktionen__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.page-wrapper .bs-aktionen__item {
    display: block;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: var(--bs-radius-container, 0px);
}
.page-wrapper .bs-aktionen__item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.page-wrapper .bs-aktionen__item img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
.page-wrapper .bs-aktionen__brand {
    display: flex !important;
    align-items: center !important;
    gap: 16px;
    background: var(--bs-font-color, #00446a) !important;
    color: #FFFFFF !important;
    padding: 16px 20px;
    text-decoration: none !important;
    transition: opacity 0.2s;
    border-radius: var(--bs-radius-container, 0px);
}
.page-wrapper .bs-aktionen__brand:hover { opacity: 0.92; }
.page-wrapper .bs-aktionen__brand-logo { flex-shrink: 0; width: 90px; }
.page-wrapper .bs-aktionen__brand-logo img { filter: brightness(0) invert(1); }
.page-wrapper .bs-aktionen__brand-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
}
.page-wrapper .bs-aktionen__brand-btn {
    display: inline-block !important;
    width: auto !important;
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
    padding: 8px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-radius: var(--bs-radius-btn, 4px) !important;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    background: transparent !important;
}
.page-wrapper .bs-aktionen__brand-btn:hover {
    background: #FFFFFF !important;
    color: var(--bs-font-color, #00446a) !important;
}
.page-wrapper .bs-aktionen__row { display: flex; gap: 16px; }
.page-wrapper .bs-aktionen__row .bs-aktionen__item { flex: 1; }

/* ============================================================
   KATEGORIEN – Variant A: Horizontaler Kartenslider
   ============================================================ */
.page-wrapper .bs-kat {
    margin-top: 40px;
}
/* Zweiter Block bei Variante „Beide“: etwas enger an den ersten anschließen */
.page-wrapper .bs-kat.bs-kat--stacked {
    margin-top: 28px;
}
/* Fallback-Überschrift am Bento, nur wenn der Slider darüber auf diesem Viewport ausgeblendet ist */
.page-wrapper .bs-kat--b .bs-kat__heading--when-slider-hidden {
    display: none;
}
/* Fallback-Überschrift am Slider, nur wenn das Bento darüber auf diesem Viewport ausgeblendet ist */
.page-wrapper .bs-kat--a .bs-kat__heading--when-upper-hidden {
    display: none;
}
.page-wrapper .bs-kat--a .bs-kat__header:has(.bs-kat__heading--when-upper-hidden) {
    justify-content: space-between;
}
.page-wrapper .bs-kat__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 0;
}
/* Slider-Überschrift am Header linksbündig (Bento behält eigene Ausrichtung) */
.page-wrapper .bs-kat--a .bs-kat__header .bs-section-heading {
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0 !important;
}
.page-wrapper .bs-kat__header--arrows-only {
    justify-content: flex-end;
}
/* Wie Themenwelten: Pfeile immer sichtbar (auch Mobil, dort kleiner via responsive.css) */
.page-wrapper .bs-kat--a .bs-kat__arrows {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 16px;
}
.page-wrapper .bs-kat__header--arrows-only .bs-kat__arrows {
    margin-left: 0;
}
.page-wrapper .bs-kat--a .bs-kat__track {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    outline: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 12px;
    padding: 4px 0 16px 0;
    margin: 0 -30px 0 0;
    scroll-padding: 0 16px;
}
.page-wrapper .bs-kat--a .bs-kat__track::-webkit-scrollbar { display: none; }
.page-wrapper .bs-kat--a .bs-kat__card {
    scroll-snap-align: start;
    flex: 0 0 55%;
    text-decoration: none !important;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}
/* Mobil 2,5 Kacheln (Admin: category_slider_mobile_peek) — Tablet/Desktop unverändert */
@media (max-width: 767px) {
    .page-wrapper .bs-kat--a.bs-kat--peek-25 .bs-kat__card {
        flex: 0 0 calc((100% - 24px) / 2.5);
    }
}
/* Clip-Container: 4:3 (Themenwelten = 3:4) */
.page-wrapper .bs-kat__card-img {
    display: block;
    width: 100%;
    flex-shrink: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    background: #f0f6fa;
}
.page-wrapper .bs-kat__card-img img,
.page-wrapper .bs-kat__card-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    transform: scale(1);
    transition: transform 0.35s ease;
    transform-origin: center center;
}
.page-wrapper .bs-kat__card:hover .bs-kat__card-photo {
    transform: scale(1.05);
}
/* Tab-Fokus: Ring per ::after über Bild/Label (wie Themenwelten) */
html body .page-wrapper .bs-kat--a a.bs-kat__card[href]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
html body .page-wrapper .bs-kat--a a.bs-kat__card[href]:focus:not(:focus-visible)::after {
    content: none !important;
}
html body .page-wrapper .bs-kat--a a.bs-kat__card[href]:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    z-index: 2 !important;
}
html body .page-wrapper .bs-kat--a a.bs-kat__card[href]:focus-visible::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 20 !important;
    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px var(--bs-kb-focus-color, #00446a) !important;
}
.page-wrapper .bs-kat__card-label {
    display: block;
    position: relative;
    text-align: center;
    padding: 10px 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1.3;
    font-family: 'Montserrat', sans-serif;
}

/* ============================================================
   KATEGORIEN – Variant B: Editorial / Bento-Grid
   ============================================================ */
/* Kein horizontales Innenpadding: der Außenabstand kommt nur von .page-main (sonst doppelter „grüner“ Rand auf Mobil) */
.page-wrapper .bs-kat--b {
    padding: 0;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.page-wrapper .bs-bento__row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.page-wrapper .bs-bento__img {
    overflow: hidden;
    display: block;
    border-radius: var(--bs-radius-img, 12px);
    text-decoration: none !important;
}
.page-wrapper .bs-bento__img img {
    width: 100% !important;
    height: 100% !important;
    min-height: 220px;
    object-fit: cover !important;
    transition: transform 0.35s ease;
    display: block !important;
    border-radius: var(--bs-radius-img, 12px);
}
.page-wrapper .bs-bento__img:hover img { transform: scale(1.03); }
/* Bento-Bildlink: Ring am Wrapper (Desktop: Link border-radius:0, Wrapper clippt mit 20px) */
html body .page-wrapper .bs-bento__img:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
html body .page-wrapper .bs-bento__img:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}
html body .page-wrapper .bs-bento__img-wrap:has(> .bs-bento__img:focus-visible)::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 20 !important;
    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px var(--bs-kb-focus-color, #00446a) !important;
}
.page-wrapper .bs-bento__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
}
.page-wrapper .bs-bento__text h3 {
    margin: 0 0 12px 0 !important;
    color: #4a6886 !important;
    font-weight: 700 !important;
}
.page-wrapper .bs-bento__text p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #1b3a4b !important;
    margin: 0 0 20px 0 !important;
}
.page-wrapper .bs-bento__text .bs-btn-accent {
    align-self: flex-start;
    background-color: transparent !important;
    color: var(--bs-accent-color, #ec6608) !important;
    border: 2px solid var(--bs-accent-color, #ec6608) !important;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: none;
}
.page-wrapper .bs-bento__text .bs-btn-accent:hover {
    background-color: var(--bs-accent-color, #ec6608) !important;
    color: #FFFFFF !important;
    border-color: var(--bs-accent-color, #ec6608) !important;
    transform: translateY(-2px);
    outline: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.page-wrapper .bs-bento__text .bs-btn-accent:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
.page-wrapper .bs-bento__text .bs-btn-accent:focus-visible {
    background-color: var(--bs-accent-color, #ec6608) !important;
    color: #FFFFFF !important;
    border: 2px solid #fff !important;
    outline: 2px solid var(--bs-kb-focus-color, #00446a) !important;
    outline-offset: 0 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
/* Zwei Kacheln (z. B. Duschen/Badewannen): mobil untereinander, ab Tablet nebeneinander */
.page-wrapper .bs-bento__pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: stretch;
}
.page-wrapper .bs-bento__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none !important;
    border-radius: var(--bs-radius-img, 12px);
    min-height: 0;
    height: 100%;
}
.page-wrapper .bs-bento__tile img {
    width: 100% !important;
    flex: 1 1 auto;
    min-height: 200px;
    height: auto;
    object-fit: cover !important;
    transition: transform 0.35s ease;
    display: block !important;
    border-radius: var(--bs-radius-img, 12px);
}
.page-wrapper .bs-bento__tile:hover img { transform: scale(1.03); }
html body .page-wrapper .bs-bento__tile:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
html body .page-wrapper .bs-bento__tile:focus:not(:focus-visible)::after {
    content: none !important;
}
html body .page-wrapper .bs-bento__tile:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    z-index: 1 !important;
}
html body .page-wrapper .bs-bento__tile:focus-visible::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 20 !important;
    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px var(--bs-kb-focus-color, #00446a) !important;
}
.page-wrapper .bs-bento__tile-label {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    background: linear-gradient(transparent, rgba(0, 68, 106, 0.65));
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.page-wrapper .bs-bento__tile-btn {
    display: inline-block;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    background: var(--bs-accent-color, #ec6608);
    border: 2px solid var(--bs-accent-color, #ec6608);
    padding: 8px 20px;
    border-radius: 999px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    flex-shrink: 0;
}
.page-wrapper .bs-bento__tile:hover .bs-bento__tile-btn {
    background: #FFFFFF !important;
    color: var(--bs-accent-color, #ec6608) !important;
    border-color: var(--bs-accent-color, #ec6608);
    transform: translateY(-1px);
}

/* ============================================================
   Bento – Image Wrapper (for hotspot positioning)
   ============================================================ */
.page-wrapper .bs-bento__img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--bs-radius-img, 20px);
}
/* Basis ohne border-radius — sonst überschreibt diese Regel den Mobil-Radius (Kaskade nach dem @media oben) */
.page-wrapper .bs-bento__img-wrap .bs-bento__img {
    position: relative;
    z-index: 0;
    display: block;
    height: 100%;
}
.page-wrapper .bs-bento__img-wrap .bs-hotspot {
    z-index: 2;
}
.page-wrapper .bs-bento__img-wrap .bs-bento__img img {
    height: 100% !important;
}

/* ============================================================
   Hotspots – Pulsating dot + product card tooltip
   ============================================================ */
.bs-hotspot {
    position: absolute;
    z-index: 10;
    transform: translate(-50%, -50%);
    cursor: default;
    pointer-events: auto;
    /* Desktop (≥1200): --bs-hs-x/--bs-hs-y; Tablet (768–1199): optional --bs-hs-*-md; Mobil: optional --bs-hs-*-sm */
    left: var(--bs-hs-x-sm, var(--bs-hs-x-md, var(--bs-hs-x)));
    top: var(--bs-hs-y-sm, var(--bs-hs-y-md, var(--bs-hs-y)));
}
@media (min-width: 768px) {
    .bs-hotspot {
        left: var(--bs-hs-x-md, var(--bs-hs-x));
        top: var(--bs-hs-y-md, var(--bs-hs-y));
    }
}
@media (min-width: 1200px) {
    .bs-hotspot {
        left: var(--bs-hs-x);
        top: var(--bs-hs-y);
    }
}

.bs-hotspot__trigger {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent !important;
    cursor: pointer;
    line-height: 0;
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    box-shadow: none !important;
}

/* Kein graues/blaues Theme-„Button“-Rechteck hinter dem Punkt (Hover/Fokus/Tap) */
.bs-hotspot__trigger::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.bs-hotspot__trigger:hover,
.bs-hotspot__trigger:focus,
.bs-hotspot__trigger:focus-visible,
.bs-hotspot__trigger:active {
    background: transparent !important;
    box-shadow: none !important;
}

.bs-hotspot__trigger:focus {
    outline: none;
}

.bs-hotspot__trigger:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
/* Fokus-Ring am Punkt (nicht am unsichtbaren Button-Quadrat) */
.bs-hotspot__trigger:focus-visible .bs-hotspot__dot,
.bs-hotspot:focus-within .bs-hotspot__dot {
    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 7px #00446a,
        0 3px 16px rgba(0, 0, 0, 0.3);
}

/* Dot: weißer Punkt (wie ursprünglich); Popup-Farben separat unten */
.bs-hotspot__dot {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 68, 106, 0.14);
    box-sizing: border-box;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5), 0 3px 12px rgba(0, 0, 0, 0.25);
    animation: bs-hotspot-pulse 2.5s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.bs-hotspot:hover .bs-hotspot__dot,
.bs-hotspot__trigger:focus-visible .bs-hotspot__dot {
    transform: scale(1.15);
    animation: none;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.3), 0 3px 16px rgba(0, 0, 0, 0.3);
}
@keyframes bs-hotspot-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5), 0 3px 12px rgba(0, 0, 0, 0.25); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0), 0 3px 12px rgba(0, 0, 0, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 3px 12px rgba(0, 0, 0, 0.25); }
}

/* Tooltip card (Popover: Maus Hover / Touch Klasse --open) */
.bs-hotspot__tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 18px 14px 14px;
    min-width: 260px;
    max-width: 340px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    /* Eigenes Navy im Karten-Context: sonst kann --bs-blue vom Homepage-Parent (Theme) greifen
       → Hero-Hotspot wirkt „zu hell“, Bento-Kacheln anders. */
    --bs-hotspot-navy: #00446a;
    --bs-blue: #00446a;
    --bs-font-color: #00446a;
}

/*
 * Tooltip IMMER bei Tastatur-Fokus oder .bs-hotspot--open sichtbar.
 * Die Media-Query-Varianten in customdesign-responsive.css greifen auf manchen
 * Geräten/Browsern nicht zuverlässig — dann blieb der Hotspot per Tab „tot“.
 */
.bs-hotspot:focus-within .bs-hotspot__tooltip,
.bs-hotspot.bs-hotspot--open .bs-hotspot__tooltip {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
}
.bs-hotspot.bs-hotspot--tooltip-up:focus-within .bs-hotspot__tooltip,
.bs-hotspot.bs-hotspot--tooltip-up.bs-hotspot--open .bs-hotspot__tooltip {
    transform: translateX(-50%) translateY(0) !important;
}
.bs-hotspot__tooltip-body {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-width: 0;
}
/* WebP-Wrapper ums Thumbnail: schmale Spalte, kein 100%-Breite wie das Hero-Motiv */
.bs-hotspot__tooltip-body > picture {
    flex: 0 0 80px;
    width: 80px;
    max-width: 80px;
    line-height: 0;
    display: block;
}
.bs-hotspot__tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #fff;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.08));
}

/* Thumbnail */
.bs-hotspot__thumb {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
    background: var(--bs-blue-light, #f0f6fa);
}

/* Product info */
.bs-hotspot__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    text-align: left;
    /* flex-basis: 0 (vorher) + -webkit-line-clamp wirkte in Spalte mit align-items:center als Überlappung */
}
.bs-hotspot__name {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    text-align: left;
    text-transform: none !important;
    flex: 0 1 auto;
    min-height: 0;
    max-height: 2.75em;
}
.bs-hotspot__name:empty {
    display: none;
    max-height: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    overflow: hidden;
}
.bs-hotspot__price {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    font-size: 16px;
    font-weight: 600;
    color: #4a6886 !important;
    -webkit-text-fill-color: #4a6886 !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3;
    flex: 0 0 auto;
    white-space: normal;
    overflow-wrap: break-word;
}
.bs-hotspot__tooltip .bs-hotspot__price .price,
.bs-hotspot__tooltip .bs-hotspot__price .price-wrapper {
    display: inline !important;
    position: static !important;
    float: none !important;
    margin: 0 !important;
    white-space: normal !important;
    color: #4a6886 !important;
    -webkit-text-fill-color: #4a6886 !important;
}

/*
 * Hotspot-Popups (Hero + Kategorie-Bento): höhere Spezifität gegen Theme-Linkfarben auf der Startseite —
 * Hero und Bento nutzen exakt dasselbe Marken-Navy #00446a wie oben (kein erneutes „helles“ Linkblau).
 */
body.cms-index-index .column.main .bs-hotspot__tooltip .bs-hotspot__name,
.page-wrapper .bs-hotspot__tooltip .bs-hotspot__name {
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
}
body.cms-index-index .column.main .bs-hotspot__tooltip .bs-hotspot__price,
body.cms-index-index .column.main .bs-hotspot__tooltip .bs-hotspot__price .price,
body.cms-index-index .column.main .bs-hotspot__tooltip .bs-hotspot__price .price-wrapper,
.page-wrapper .bs-hotspot__tooltip .bs-hotspot__price,
.page-wrapper .bs-hotspot__tooltip .bs-hotspot__price .price,
.page-wrapper .bs-hotspot__tooltip .bs-hotspot__price .price-wrapper {
    color: #4a6886 !important;
    -webkit-text-fill-color: #4a6886 !important;
}
body.cms-index-index .column.main .bs-hotspot__tooltip a.bs-hotspot__cta,
.page-wrapper .bs-hotspot__tooltip a.bs-hotspot__cta {
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
    background: #fff !important;
    background-color: #fff !important;
    border: 2px solid #00446a !important;
    text-decoration: none !important;
}
body.cms-index-index .column.main .bs-hotspot__tooltip a.bs-hotspot__cta:visited,
.page-wrapper .bs-hotspot__tooltip a.bs-hotspot__cta:visited {
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
    border-color: #00446a !important;
}
body.cms-index-index .column.main .bs-hotspot__tooltip a.bs-hotspot__cta:hover,
.page-wrapper .bs-hotspot__tooltip a.bs-hotspot__cta:hover {
    background: #00446a !important;
    background-color: #00446a !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #00446a !important;
}
body.cms-index-index .column.main .bs-hotspot__tooltip a.bs-hotspot__cta:focus-visible,
.page-wrapper .bs-hotspot__tooltip a.bs-hotspot__cta:focus-visible {
    background: #00446a !important;
    background-color: #00446a !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid #fff !important;
    outline: 2px solid #00446a !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

a.bs-hotspot__cta {
    display: block;
    text-align: center;
    margin: 0;
    padding: 10px 18px;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
    text-decoration: none !important;
    background: #fff !important;
    background-color: #fff !important;
    border: 2px solid #00446a !important;
    border-radius: 999px;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
a.bs-hotspot__cta:visited {
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
    border-color: #00446a !important;
}
a.bs-hotspot__cta:hover {
    background: #00446a !important;
    background-color: #00446a !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: #00446a !important;
}
a.bs-hotspot__cta:focus-visible {
    background: #00446a !important;
    background-color: #00446a !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 2px solid #fff !important;
    outline: 2px solid #00446a !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* ============================================================
   Sticky Banner (Mobile)
   ============================================================ */
.bs-sticky-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.bs-sticky-bottom.bs-visible { transform: translateY(0); }
.bs-sticky-bottom .bs-top-banner--slider {
    width: 100%;
    box-sizing: border-box;
    text-decoration: none !important;
    color: #FFFFFF !important;
}

/* ============================================================
   Scroll to Top
   ============================================================ */
.bs-scroll-top {
    display: none !important;
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 998;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bs-font-color, #00446a);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    border: none;
    font-size: 20px;
    line-height: 1;
}
.bs-scroll-top.bs-visible { opacity: 1; visibility: visible; }
.bs-scroll-top:hover { background: var(--bs-accent-color, #ec6608); }

/* ============================================================
   Reset Luma defaults inside our components
   ============================================================ */
.page-wrapper .bs-hero a,
.page-wrapper .bs-kat a,
.page-wrapper .bs-aktionen a {
    text-decoration: none !important;
}
.page-wrapper .bs-hero a:hover,
.page-wrapper .bs-kat a:hover,
.page-wrapper .bs-aktionen a:hover {
    text-decoration: none !important;
}
.cms-index-index .column.main {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

/* ============================================================
   Startseiten-H1 (sr-only) — Text aus CMS startseite_headline
   ============================================================ */
.cms-index-index .bs-home-h1.sr-only {
    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;
}

/* ============================================================
   Service Section – Blue Box with white icons & text
   ============================================================ */
.cms-index-index #service {
    background: transparent !important;
    padding: 0 !important;
    margin-top: 48px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}
.cms-index-index #service .inner-container {
    max-width: 1440px !important;
    margin: 0 auto !important;
    display: block !important;
    background: rgba(0, 68, 106, 1);
    border-radius: 20px;
    padding: 40px 16px;
    box-sizing: border-box !important;
}
.cms-index-index #service .inner-container .highlight {
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-align: center !important;
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
}
.cms-index-index #service .service-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 32px 16px !important;
}
.cms-index-index #service .service-grid .service-vorteil {
    width: calc(50% - 8px) !important;
    box-sizing: border-box !important;
}
.cms-index-index #service .service-vorteil {
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.cms-index-index #service .service-vorteil .vorteil-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px auto !important;
    padding: 0 !important;
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}
.cms-index-index #service .service-vorteil .vorteil-icon img {
    width: 100% !important;
    height: 100% !important;
    max-width: 52px !important;
    max-height: 52px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
    margin: 0 !important;
    display: block !important;
}
.cms-index-index #service .service-vorteil .vorteil {
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: block !important;
    margin: 0 auto 8px auto !important;
    max-width: none !important;
    line-height: 1.3 !important;
    padding: 0 !important;
}
.cms-index-index #service .service-vorteil .vorteil-text {
    /* WCAG 1.4.3: vorher rgba(255,255,255,.75) auf #00446a ≈ 2.9:1; jetzt ≈ AA */
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    display: block !important;
    margin: 0 auto !important;
    max-width: 220px;
    padding: 0 !important;
}
.cms-index-index #service .vorteil-icon,
.cms-index-index #service .service-vorteil span {
    padding: 0 !important;
}

/* ============================================================
   Service – Slider: volle Viewport-Breite, einheitlich Shop-Blau;
   Überschrift + Pfeile + Karten im blauen Band; Karten ohne eigene Flächenfarbe
   (wie Newsletter-Bar: 100vw + zentrierter Innenblock max 1440px)
   ============================================================ */
@keyframes bsServiceFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.cms-index-index #service.bs-service--hscroll {
    background: var(--bs-blue, #00446a) !important;
    padding: 48px 0 40px 0 !important;
    margin-left: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    opacity: 0;
    transform: translateY(40px);
}
.cms-index-index #service.bs-service--hscroll.bs-visible {
    animation: bsServiceFadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cms-index-index #service.bs-service--hscroll .inner-container {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    max-width: none !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.cms-index-index #service.bs-service--hscroll .inner-container .highlight,
.cms-index-index #service.bs-service--hscroll .inner-container .bs-section-heading {
    color: #ffffff !important;
    text-align: left !important;
    margin: 0 !important;
    font-size: 24px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
}
.cms-index-index #service.bs-service--hscroll .bs-service__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 30px 16px 30px !important;
    gap: 12px !important;
}
.cms-index-index #service.bs-service--hscroll .bs-service__arrows {
    display: flex !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
/* Slider-Pfeile: outlined circles (Themenwelten-Stil), weiß auf Blau */
.cms-index-index #service.bs-service--hscroll .bs-slider-arrow {
    background: transparent !important;
    border-color: #ffffff !important;
    color: transparent !important;
}
.cms-index-index #service.bs-service--hscroll .bs-slider-arrow::after {
    border-top-color: #ffffff !important;
    border-right-color: #ffffff !important;
}
.cms-index-index #service.bs-service--hscroll .bs-slider-arrow:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
}
.cms-index-index #service.bs-service--hscroll .bs-slider-arrow:hover::after {
    border-top-color: var(--bs-blue, #00446a) !important;
    border-right-color: var(--bs-blue, #00446a) !important;
}
.cms-index-index #service.bs-service--hscroll .bs-slider-arrow--inactive {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    opacity: 1 !important;
    cursor: default !important;
}
.cms-index-index #service.bs-service--hscroll .bs-slider-arrow--inactive::after {
    border-top-color: rgba(255, 255, 255, 0.35) !important;
    border-right-color: rgba(255, 255, 255, 0.35) !important;
}
.cms-index-index #service.bs-service--hscroll .bs-slider-arrow--inactive:hover {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}
.cms-index-index #service.bs-service--hscroll .bs-slider-arrow--inactive:hover::after {
    border-top-color: rgba(255, 255, 255, 0.35) !important;
    border-right-color: rgba(255, 255, 255, 0.35) !important;
}
.cms-index-index #service.bs-service--hscroll .bs-service__track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    outline: none !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    max-width: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 0 0 8px 30px !important;
    scroll-padding-left: 30px !important;
    scroll-padding-right: 0 !important;
}
.cms-index-index #service.bs-service--hscroll .bs-service__track::-webkit-scrollbar {
    display: none !important;
}
.cms-index-index #service.bs-service--hscroll .bs-service__card {
    flex: 0 0 55% !important;
    max-width: 55% !important;
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 12px 10px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 !important;
}
.cms-index-index #service.bs-service--hscroll .service-vorteil .vorteil-icon {
    /* gleiche Slot-Größe wie Kachel-Layout (Basis-Selektor .cms-index-index #service .service-vorteil .vorteil-icon) */
    margin: 0 auto 12px auto !important;
}
.cms-index-index #service.bs-service--hscroll .service-vorteil .vorteil-icon img {
    /* USP-SVGs (blau) → weiß auf Blau */
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}
.cms-index-index #service.bs-service--hscroll .service-vorteil .vorteil {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    max-width: none !important;
}
.cms-index-index #service.bs-service--hscroll .service-vorteil .vorteil-text {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    max-width: none !important;
    margin: 0 !important;
}

/* ============================================================
   Service – Icons: optisch einheitliche Höhe pro Quell-SVG.

   Hintergrund: Die SVGs der Service-Kacheln haben unterschiedliche
   viewBox-Aspekte und unterschiedliches Innen-Padding um das Motiv:
   - icon-vorteil-versand-freigestellt.svg  : viewBox 85.6x57.4 (1.49:1)
                                              -> in 52x52 Slot mit object-fit:contain
                                              optisch nur ~35px hoch
   - icon-vorteil-beratung-freigestellt.svg : viewBox 300x300, Motiv ~65%  -> ~34px
   - icon-vorteil-preis-freigestellt.svg    : viewBox 300x300, Motiv ~80%  -> ~42px
   - icon-vorteil-sicherheit-freigestellt.svg: viewBox 300x300, Motiv ~79% -> ~41px
   - header-icon-schutz.svg / header-icon-kompetenz.svg: Motiv ~95% der viewBox -> ~47-49px

   Per-Quelle transform:scale gleicht die effektiv sichtbare Motiv-Hoehe an
   (~44-47px), ohne die SVG-Assets neu zu schneiden. `transform-origin: center`
   und `overflow: visible` am Slot stellen sicher, dass das skalierte Icon
   zentriert ueberragt, statt abgeschnitten zu werden.
   Greift sowohl im Slider als auch im Kachel-Layout. */
.cms-index-index #service .vorteil-icon {
    overflow: visible !important;
}
.cms-index-index #service .vorteil-icon img {
    transform-origin: center center !important;
}
.cms-index-index #service .vorteil-icon img[src*="icon-vorteil-beratung"] {
    transform: scale(1.35) !important;
}
.cms-index-index #service .vorteil-icon img[src*="icon-vorteil-versand"] {
    transform: scale(1.35) !important;
}
.cms-index-index #service .vorteil-icon img[src*="icon-vorteil-preis"] {
    transform: scale(1.15) !important;
}
.cms-index-index #service .vorteil-icon img[src*="icon-vorteil-sicherheit"] {
    transform: scale(1.08) !important;
}
.cms-index-index #service .vorteil-icon img[src*="header-icon-schutz"],
.cms-index-index #service .vorteil-icon img[src*="header-icon-kompetenz"] {
    /* Header-SVGs sind #336888; auf der blauen Service-Box weiß. Header-Leiste bleibt unberührt. */
    transform: scale(0.95) !important;
    filter: brightness(0) invert(1) !important;
}

/* ============================================================
   Badausstellung – Split layout: blue text + photos
   ============================================================ */
/* Theme _ausstellung.less: #ausstellung { display:grid; grid-template-areas:… } für altes Markup —
   mit .bs-ausstellung ein Kind (.bs-ausstellung__inner) → Grid bricht das innere Flex/Sub-Grid */
#ausstellung.bs-ausstellung {
    display: block !important;
    grid-template: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
    grid-gap: 0 !important;
    gap: 0 !important;
}
/* Beide Showroom-Fotos mobil nebeneinander (auch ohne Body-Klasse .cms-index-index) */
#ausstellung.bs-ausstellung .bs-ausstellung__images {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
}
.cms-index-index #ausstellung {
    padding: 0 !important;
    /* Abstand zur Marken-Sektion nur über #marken padding-bottom (sonst doppelter Gap) */
    margin-top: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}
.cms-index-index #ausstellung .bs-ausstellung__inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: 1440px;
    margin: 0 auto !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}
.cms-index-index #ausstellung .bs-ausstellung__text {
    background: rgba(0, 68, 106, 1) !important;
    color: #FFFFFF !important;
    padding: 40px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    /* body nutzt global hyphens:auto — hier genug Breite, keine Silbentrennung */
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}
.cms-index-index #ausstellung .bs-ausstellung__heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}
.cms-index-index #ausstellung .bs-ausstellung__body {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 0 24px 0 !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
}
.cms-index-index #ausstellung .bs-ausstellung__link {
    color: #FFFFFF !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}
.cms-index-index #ausstellung .bs-btn-outline--white {
    display: inline-block !important;
    padding: 10px 28px !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 40px !important;
    color: #FFFFFF !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    width: fit-content !important;
}
.cms-index-index #ausstellung .bs-btn-outline--white:hover {
    background: #FFFFFF !important;
    color: rgba(0, 68, 106, 1) !important;
}
/* Tastatur-Fokus auf dunkelblauem Block: ein Ring, kein Doppel (Border + Outline-Offset + globaler Blau-Ring) */
html body.cms-index-index #ausstellung .bs-ausstellung__link:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
html body.cms-index-index #ausstellung .bs-ausstellung__link:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    border-radius: 2px;
    color: #ffffff !important;
    text-decoration: underline !important;
}
html body.cms-index-index #ausstellung .bs-btn-outline--white:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
html body.cms-index-index #ausstellung .bs-btn-outline--white:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    border: 2px solid #ffffff !important;
}
.cms-index-index #ausstellung .bs-ausstellung__images {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2px !important;
    flex: 1 !important;
}
.cms-index-index #ausstellung .bs-ausstellung__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    min-height: 200px;
}
.cms-index-index #ausstellung .highlight,
.cms-index-index #ausstellung .ausstellung,
.cms-index-index #ausstellung .alle-button {
    display: none !important;
}

/* ============================================================
   CMS „Unsere Badausstellung“ (ausstellung) + „Öffnungszeiten & Anfahrt“ (oeffnungszeiten)
   Gleiches Markup (.termin / .termin-oeff / .oeff-tel / Cituro): einheitliches Markenblau + Babyblau-Leiste
   ============================================================ */
body.cms-ausstellung .oeff-tel,
body.cms-oeffnungszeiten .oeff-tel {
    transition: background-color 0.2s ease;
    border-radius: 14px !important;
    -webkit-border-radius: 14px !important;
    overflow: hidden;
    background-color: #f0f6fa !important;
    color: #00446a !important;
}
body.cms-ausstellung .oeff-tel:hover,
body.cms-oeffnungszeiten .oeff-tel:hover {
    background-color: #eff6fa !important;
}
/* Öffnungszeiten-Karte (CMS: .termin-oeff) — Markenblau wie Termin-Button, abgerundete Ecken */
body.cms-ausstellung .termin-oeff,
body.cms-oeffnungszeiten .termin-oeff {
    background-color: #00446a !important;
    background: #00446a !important;
    border-radius: 14px !important;
    -webkit-border-radius: 14px !important;
    overflow: hidden;
}
/* Cituro injiziert .cituroBookingButton (ggf. als <a> oder <button>) */
body.cms-ausstellung .termin .cituroBookingButton,
body.cms-ausstellung .termin-text .cituroBookingButton,
body.cms-ausstellung .cituroContainer .cituroBookingButton,
body.cms-ausstellung a.cituroBookingButton,
body.cms-ausstellung button.cituroBookingButton,
body.cms-oeffnungszeiten .termin .cituroBookingButton,
body.cms-oeffnungszeiten .termin-text .cituroBookingButton,
body.cms-oeffnungszeiten .cituroContainer .cituroBookingButton,
body.cms-oeffnungszeiten a.cituroBookingButton,
body.cms-oeffnungszeiten button.cituroBookingButton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border-radius: 999px !important;
    -webkit-border-radius: 999px !important;
    padding: 12px 28px !important;
    box-sizing: border-box !important;
    background-color: #00446a !important;
    background: #00446a !important;
    color: #ffffff !important;
    border: none !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
body.cms-ausstellung .termin .cituroBookingButton:hover,
body.cms-ausstellung .termin-text .cituroBookingButton:hover,
body.cms-ausstellung .cituroContainer .cituroBookingButton:hover,
body.cms-ausstellung a.cituroBookingButton:hover,
body.cms-ausstellung button.cituroBookingButton:hover,
body.cms-oeffnungszeiten .termin .cituroBookingButton:hover,
body.cms-oeffnungszeiten .termin-text .cituroBookingButton:hover,
body.cms-oeffnungszeiten .cituroContainer .cituroBookingButton:hover,
body.cms-oeffnungszeiten a.cituroBookingButton:hover,
body.cms-oeffnungszeiten button.cituroBookingButton:hover {
    background-color: #00446a !important;
    background: #00446a !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 68, 106, 0.35) !important;
}

/*
 * CMS (oeffnungszeiten / ausstellung): dekorative SVG-Icons in .termin-oeff, .oeff-tel, .anfahrt-gr
 * Theme/CMS kann sonst img/SVG auf Vollebreite ziehen; inline height wird per !important überschrieben.
 * Panorama unter .termin-text bleibt .title_img — nicht hier adressiert.
 */
body.cms-ausstellung .termin-oeff > img,
body.cms-ausstellung .termin-oeff svg,
body.cms-oeffnungszeiten .termin-oeff > img,
body.cms-oeffnungszeiten .termin-oeff svg,
body.cms-ausstellung .oeff-tel > img,
body.cms-ausstellung .oeff-tel svg,
body.cms-oeffnungszeiten .oeff-tel > img,
body.cms-oeffnungszeiten .oeff-tel svg {
    box-sizing: border-box !important;
    max-width: 200px !important;
    max-height: 40px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-bottom: 12px !important;
}
body.cms-ausstellung .anfahrt-gr img,
body.cms-oeffnungszeiten .anfahrt-gr img {
    box-sizing: border-box !important;
    max-width: 220px !important;
    max-height: 52px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
}

/* ============================================================
   Brands Section – Logo-only grid
   ============================================================ */
.cms-index-index #marken {
    /* Gleicher Abstand zu Highlights (oben) und Badausstellung (unten) — nur über symmetrisches Padding */
    padding: 48px 0 48px !important;
    margin: 0 !important;
    background: #FFFFFF !important;
}
.cms-index-index #marken .highlight {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: rgba(0, 68, 106, 1) !important;
    text-align: center !important;
    margin: 0 0 32px 0 !important;
    text-transform: none !important;
}
.cms-index-index #marken .bs-marken-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    max-width: 1440px;
    margin: 0 auto !important;
}
.cms-index-index #marken .bs-marken-grid__item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 10px !important;
    text-decoration: none !important;
    width: calc((100% - 2 * 16px) / 3) !important;
    box-sizing: border-box !important;
}
.cms-index-index #marken .bs-marken-grid__item img {
    max-width: 120px !important;
    max-height: 80px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
}
.cms-index-index #marken .bs-marken-button {
    text-align: center !important;
    margin-top: 32px !important;
}
.cms-index-index #marken .bs-btn-outline {
    display: inline-block !important;
    padding: 12px 32px !important;
    border: 2px solid rgba(0, 68, 106, 1) !important;
    border-radius: 40px !important;
    color: rgba(0, 68, 106, 1) !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
    cursor: pointer;
}
.cms-index-index #marken .bs-btn-outline:hover,
.cms-index-index #marken .bs-btn-outline:focus-visible {
    background: rgba(0, 68, 106, 1) !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.cms-index-index #marken .marken-mit-bild,
.cms-index-index #marken .marken-nur-logo,
.cms-index-index #marken .alle-button {
    display: none !important;
}

/* Marken — Marquee-Slider (gleiche Spaltenzahl wie Raster: 3 / 4 / 6) */
.cms-index-index #marken.bs-marken--slider .bs-marken-slider {
    max-width: 1440px;
    margin: 0 auto !important;
}
.cms-index-index #marken.bs-marken--slider .bs-marken-slider__viewport {
    overflow: hidden;
    container-type: inline-size;
    --bs-marken-cols: 3;
    --bs-marken-gap: 16px;
}
.cms-index-index #marken.bs-marken--slider .bs-marken-slider__track {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    gap: var(--bs-marken-gap);
    animation: bs-marken-marquee 90s linear infinite;
    will-change: transform;
}
.cms-index-index #marken.bs-marken--slider .bs-marken-slider:hover .bs-marken-slider__track,
.cms-index-index #marken.bs-marken--slider .bs-marken-slider:focus-within .bs-marken-slider__track {
    animation-play-state: paused;
}
.cms-index-index #marken.bs-marken--slider .bs-marken-slider--static .bs-marken-slider__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}
.cms-index-index #marken.bs-marken--slider .bs-marken-slider__item {
    flex: 0 0 calc((100cqw - (var(--bs-marken-cols) - 1) * var(--bs-marken-gap)) / var(--bs-marken-cols));
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    text-decoration: none !important;
    background: transparent !important;
}
.cms-index-index #marken.bs-marken--slider .bs-marken-slider__item img {
    max-width: 120px !important;
    max-height: 80px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}
@keyframes bs-marken-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cms-index-index #marken.bs-marken--slider .bs-marken-slider__track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}

/* ============================================================
   MEGA-MENU – Full redesign
   ============================================================ */

/* Navigation bar container — no own padding, inner .nav-top-container handles it */
.page-wrapper .topmenu {
    background: #FFFFFF !important;
    margin-top: 10px !important;
    border: none !important;
    box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    outline: none !important;
}
.page-wrapper .topmenu::before,
.page-wrapper .topmenu::after {
    display: none !important;
}

/* Nav bar layout — padding inside container to match page-header alignment */
.nav-top-container {
    max-width: 1440px;
    margin: 0 auto;
    overflow: visible !important;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;
}
#nav.bs-mega {
    height: 44px;
}
#nav.bs-mega .nav-primary {
    height: 44px;
    align-items: stretch;
}

/* Level-0 nav items */
#nav.bs-mega .nav-primary > div.level0 {
    display: flex;
    align-items: center;
    padding: 0 !important;
    position: relative;
}
#nav.bs-mega .nav-primary > div.level0 > a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    color: var(--bs-blue, #00446a) !important;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 44px !important;
    padding: 0 14px !important;
    position: relative;
    transition: color 0.2s ease;
    white-space: nowrap;
    background: transparent !important;
    border-bottom: 2px solid transparent;
}
#nav.bs-mega .nav-primary > div.level0:first-child > a {
    padding-left: 0 !important;
}
#nav.bs-mega .nav-primary > div.level0:hover > a {
    color: var(--bs-blue, #00446a) !important;
    background: transparent !important;
    border-bottom-color: var(--bs-blue, #00446a);
}

/* Top-Level-Tabs: Tastatur-Fokus + gleiche Unterstreichung wie :hover */
#nav.bs-mega .nav-primary > div.level0:focus-visible,
#nav.bs-mega-v2 .nav-primary > div.level0: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;
}
#nav.bs-mega .nav-primary > div.level0:focus-visible > a,
#nav.bs-mega-v2 .nav-primary > div.level0:focus-visible > a,
#nav.bs-mega .nav-primary > div.level0.bs-mega-v2-neuheiten-tab:focus-visible > a {
    color: var(--bs-blue, #00446a) !important;
    background: transparent !important;
    border-bottom-color: var(--bs-blue, #00446a);
}
#nav.bs-mega .nav-primary > div.level0.bs-mega-sale-item:focus-visible > a,
#nav.bs-mega-v2 .nav-primary > div.level0.bs-mega-sale-item:focus-visible > a {
    color: var(--bs-blue, #00446a) !important;
    border-bottom-color: #ec6608;
}
#nav.bs-mega-v2 .nav-primary > div.bs-mega-v2-neuheiten-tab:focus-visible > a {
    color: #ec6608 !important;
    border-bottom-color: #ec6608;
}

@media (min-width: 1200px) {
    html:not(.overflow) body:not(.overflow) #nav.bs-mega .nav-primary > div.level0:focus-within > .alles,
    html:not(.overflow) body:not(.overflow) #nav.bs-mega-v2 .nav-primary > div.level0:focus-within > .alles {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !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).

/* Sale top-level item */
#nav.bs-mega .nav-primary > div.level0.bs-mega-sale-item > a {
    color: #ec6608 !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 {
    background: transparent !important;
    color: var(--bs-blue, #00446a) !important;
    border-bottom-color: #ec6608;
}

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

/* Desktop: Panel an Unterkante der Zeile (top:100%) — kein Spalt zur JS-mouseleave-Lücke. */

/* Mega-Dropdown über Flash-Message-Pills (sonst schaut der Pill-Rand unter dem Panel hervor). */
@media (min-width: 1200px) {
    #nav.bs-mega .nav-primary .alles,
    #nav.bs-mega-v2 .nav-primary .alles {
        z-index: 1100 !important;
    }
}

/* Magento Flash-Messages (Erfolg/Hinweis-Pills): knapper Abstand unter der Nav.
   Mega-Menü deckt die Pill via z-index (s.o.) ab — kein großer Padding-Puffer nötig. */
#maincontent.page-main > .page.messages:has(.message) {
    margin-top: 0 !important;
    padding: 16px 20px 8px !important;
    box-sizing: border-box;
    position: relative;
    z-index: 0;
}

@media (max-width: 1199px) {
    #maincontent.page-main > .page.messages:has(.message) {
        padding-top: 12px !important;
    }
}

/* Auto-Hide: ausblendende Success/Notice/Info-Pills (siehe messages-auto-hide Mixin) */
.page.messages .message.bs-message-hiding {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .page.messages .message.bs-message-hiding {
        transition: opacity 0.01s linear;
        transform: none;
    }
}

/* ---- Dropdown panels ---- */
#nav.bs-mega .nav-primary .alles {
    border: none !important;
    border-radius: 0 0 16px 16px !important;
    /* Kein 0 2px 8px — blur nach oben unter die Nav; negativer Spread drückt Weichzeichner nach unten/seitlich */
    box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.12), 0 8px 22px -10px rgba(0, 0, 0, 0.06) !important;
    padding: 28px 0 28px 0 !important;
    top: 100% !important;
    /* Kein margin-Shorthand mit 0 auto — würde margin-top:-2px überschreiben */
    margin: -2px auto 0 auto !important;
    background: #FFFFFF !important;
    left: 0 !important;
    right: 0 !important;
    width: fit-content !important;
    min-width: 500px;
    max-width: 100%;
}

/* clip-path clips box-shadow upward — apply to ALL panels */
#nav.bs-mega .nav-primary .alles {
    clip-path: inset(0 -48px -80px -48px) !important;
}

/* Text columns: fixed width so dropdown adapts to content */
#nav.bs-mega .nav-column:not(.banner) {
    flex: 0 0 220px !important;
    width: 220px !important;
}
#nav.bs-mega .bs-mega-featured {
    flex: 1 1 0% !important;
}

/* Columns layout */
#nav.bs-mega .navcolumns {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 24px 0 24px;
    gap: 0;
}


/* Standard category columns — full border-left (color alone is invisible; default border-style is none) */
#nav.bs-mega .nav-column {
    padding: 0 24px !important;
    min-height: auto !important;
}
#nav.bs-mega .nav-column:not(:first-child) {
    border-left: 1px solid rgba(74, 104, 134, 0.12) !important;
}
#nav.bs-mega .nav-column:first-child {
    padding-left: 0 !important;
}

/* Mega-Menue: echte Anker-Links — optisch wie bisherige div.navitem-Zeilen */
#nav.bs-mega a.navitem,
#nav.bs-mega-v2 a.navitem {
    text-decoration: none;
    color: inherit;
}
#nav.bs-mega .nav-column > a.level1.navitem,
#nav.bs-mega-v2 .nav-column > a.level1.navitem,
#nav.bs-mega .navpar > a.level2.navitem:not(.nav-item-responsive),
#nav.bs-mega-v2 .navpar > a.level2.navitem:not(.nav-item-responsive),
#nav.bs-mega .navpar > a.level3.navitem:not(.nav-item-responsive),
#nav.bs-mega-v2 .navpar > a.level3.navitem:not(.nav-item-responsive),
#nav.bs-mega .level2 > a.navitem.nav-sub,
#nav.bs-mega-v2 .level2 > a.navitem.nav-sub {
    display: block;
    box-sizing: border-box;
}
/* Desktop-Mega: mobile-only Zeilen (.nav-item-responsive) auch auf Ankern ausblenden — Theme-Regel galt nur für div */
@media (min-width: 768px) {
    #nav.bs-mega a.nav-item-responsive:not(.top-nav-item),
    #nav.bs-mega-v2 a.nav-item-responsive:not(.top-nav-item) {
        display: none !important;
    }
}
#nav.bs-mega a.navitem:hover,
#nav.bs-mega-v2 a.navitem:hover {
    text-decoration: none;
    color: inherit;
}

/*
 * Desktop-Mega (≥1200): kompakte Spaltenköpfe, Important-Punkt, Sale-Karte.
 * Nicht im Burger/Tablet — sonst Punkt vor „Badmöbel Sets“, Sale-Orange-Karte
 * und leerer Weißraum unter SALE (navpar height:auto aus Desktop-Rule).
 */
@media (min-width: 1200px) {
/* Important subcategory highlight (e.g. Badmöbel Sets) */
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-important {
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
}
#nav.bs-mega:not(.bs-mega-v2) .nav-column > .level1.navitem.bs-mega-important::before {
    content: '★';
    font-size: 10px;
    color: #ec6608;
    flex-shrink: 0;
}
#nav.bs-mega.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-important::before {
    content: '●';
    font-size: 7px;
    color: #ec6608;
    flex-shrink: 0;
}

/* Level-2 sub-items */
#nav.bs-mega .navpar div.level2 {
    margin: 4px 0 0 !important;
}
#nav.bs-mega .navpar .navitem {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1.5 !important;
    padding: 3px 0 !important;
    transition: color 0.15s ease;
}
#nav.bs-mega .navpar .navitem:hover {
    color: #ec6608 !important;
}

/* "mehr" link */
#nav.bs-mega .nav-column .more {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 13px !important;
    color: var(--bs-blue, #00446a) !important;
    font-weight: 600 !important;
    margin-top: 6px !important;
}
#nav.bs-mega .nav-column .more:hover {
    color: #ec6608 !important;
}

/* Sale block — unified orange card (header + subcategories) */
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale,
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale:not(.highlight-cat),
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale:not(.highlight-cat) {
    background: #ec6608 !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    padding: 14px 16px 6px !important;
    margin: 8px 0 0 0 !important;
    border-bottom: none !important;
    border-top: none !important;
    cursor: pointer;
    transition: color 0.2s ease;
    display: block !important;
    line-height: 1.3 !important;
}
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale.resp-click,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale.resp-click {
    border-radius: 8px;
    padding: 14px 16px !important;
    margin-bottom: 8px !important;
}
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale.nav-sub,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale.nav-sub {
    border-radius: 8px 8px 0 0;
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
}
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale:hover,
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale:hover:not(.highlight-cat),
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale:hover,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale:hover:not(.highlight-cat) {
    background: #ec6608 !important;
    color: var(--bs-blue, #00446a) !important;
}
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale a,
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale a:visited,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale a,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale a:visited {
    color: #fff !important;
    transition: color 0.2s ease;
}
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale:hover a,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale:hover a,
#nav.bs-mega .nav-column > a.level1.navitem.bs-mega-sale:hover,
#nav.bs-mega-v2 .nav-column > a.level1.navitem.bs-mega-sale:hover {
    color: var(--bs-blue, #00446a) !important;
}

/* SALE ohne Untermenü (Leaf): dekoratives % wie im aufgeklappten Sale-Panel */
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale:not(.nav-sub),
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale:not(.nav-sub) {
    position: relative;
    overflow: hidden;
}
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale:not(.nav-sub)::after,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale:not(.nav-sub)::after {
    content: '%';
    position: absolute;
    right: -6px;
    bottom: -14px;
    font-size: 72px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.12);
    line-height: 1;
    pointer-events: none;
}

/* Sale subcategories panel — seamless bottom of the card */
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar,
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .level1.navpar,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .level1.navpar {
    background: #ec6608 !important;
    border-radius: 0 0 8px 8px;
    padding: 2px 16px 16px !important;
    margin: 0 0 8px 0 !important;
    position: relative !important;
    overflow: hidden;
    top: auto !important;
    height: auto !important;
    left: auto !important;
    border-top: none !important;
}
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar::after,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar::after {
    content: '%';
    position: absolute;
    right: -8px;
    bottom: -20px;
    font-size: 100px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.10);
    line-height: 1;
    pointer-events: none;
}
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar .navitem,
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar .navitem:not(.highlight-cat),
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar .navitem,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar .navitem:not(.highlight-cat) {
    color: #fff !important;
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 500 !important;
    padding: 4px 0 !important;
    background: none !important;
    border-bottom: none !important;
}
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar .navitem:hover,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar .navitem:hover,
#nav.bs-mega .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar a.navitem:hover,
#nav.bs-mega-v2 .nav-column > .level1.navitem.bs-mega-sale.nav-sub + .navpar a.navitem:hover {
    color: var(--bs-blue, #00446a) !important;
    background: none !important;
}
}

/* ---- Featured image column ---- */
#nav.bs-mega .bs-mega-featured {
    border-left-color: rgba(74, 104, 134, 0.12) !important;
    display: flex !important;
    flex-direction: column;
    flex-shrink: 0 !important;
    padding: 0 0 0 24px !important;
}
#nav.bs-mega .bs-mega-featured .nav-banner {
    border-radius: 12px;
    overflow: hidden;
}
#nav.bs-mega .bs-mega-featured-placeholder {
    border-radius: 12px;
    overflow: hidden;
    background: #f0f6fa;
    flex: 1;
    display: flex;
    flex-direction: column;
}
#nav.bs-mega .bs-mega-featured-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover;
    min-height: 120px;
    max-width: none !important;
    flex: 1;
}
#nav.bs-mega .bs-mega-featured-link {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px !important;
    background: var(--bs-blue, #00446a);
    color: #FFFFFF !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease;
}
#nav.bs-mega .bs-mega-featured-link:hover {
    background: var(--bs-blue, #00446a);
    color: #FFFFFF !important;
    text-decoration: none !important;
}
#nav.bs-mega .bs-mega-featured-arrow {
    font-size: 18px;
    transition: transform 0.2s ease;
}
#nav.bs-mega .bs-mega-featured-link:hover .bs-mega-featured-arrow {
    transform: translateX(4px);
}

/* ---- Existing menu banners (e.g. Badarmaturen, Zubehör) ---- */
#nav.bs-mega .bs-mega-banner-wrap {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 68, 106, 0.10);
    flex: 1;
    display: flex !important;
    flex-direction: column;
}
#nav.bs-mega .bs-mega-banner-wrap > a:first-child {
    display: flex !important;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}
#nav.bs-mega .bs-mega-banner-wrap .nav-banner {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover;
    border-radius: 0 !important;
    max-width: none !important;
    flex: 1;
    min-height: 0;
    transition: transform 0.3s ease;
}
#nav.bs-mega .bs-mega-banner-wrap:hover .nav-banner {
    transform: scale(1.03);
}
#nav.bs-mega .bs-mega-banner-wrap .bs-mega-featured-link {
    border-radius: 0 0 12px 12px;
    flex-shrink: 0;
}

/* ---- Highlight card (Standard: Badmöbel u. a. — Flex, volle Breite) ---- */
#nav.bs-mega .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser) {
    display: flex !important;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 2px 12px rgba(0, 68, 106, 0.12);
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    flex: 1;
}
#nav.bs-mega .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser):hover {
    box-shadow: 0 6px 24px rgba(0, 68, 106, 0.2);
    transform: translateY(-2px);
}
#nav.bs-mega .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser) > .bs-mega-highlight-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: cover;
    flex: 1;
    min-height: 160px;
    max-width: none !important;
}
#nav.bs-mega .bs-mega-highlight-cta {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 18px !important;
    background: var(--bs-blue, #00446a);
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: background 0.2s ease;
}
#nav.bs-mega .bs-mega-highlight-card:hover .bs-mega-highlight-cta {
    background: var(--bs-blue, #00446a);
}
#nav.bs-mega .bs-mega-highlight-arrow {
    font-size: 18px;
    transition: transform 0.2s ease;
}
#nav.bs-mega .bs-mega-highlight-card:hover .bs-mega-highlight-arrow {
    transform: translateX(4px);
}

/*
 * Fluid-Teaser (6 Top-Kategorien): Bild füllt den Kasten (cover); Teaser-Spalte nicht über volle Menü-Restbreite.
 * Breite der Spalte/Karte: max. min(720px, 56vw) — großzügiges Sichtfeld fürs Kategoriebild (Baden u. a.).
 * Höhe = Menüzeile (stretch).
 */
#nav.bs-mega .bs-mega-highlight-card--fluid-teaser {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    height: 100% !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    justify-items: stretch;
    box-sizing: border-box !important;
}
/* .navitem (#nav.bs-mega .navpar .navitem) erzwingt padding:3px 0 !important -> sonst
   weisser Rand oben/unten (Bild startet nicht ganz oben, blauer CTA-Balken endet nicht
   ganz unten). Hoehere Spezifitaet inkl. .navitem, um das Padding zu neutralisieren. */
#nav.bs-mega .navpar .bs-mega-highlight-card--fluid-teaser.navitem {
    padding: 0 !important;
}
#nav.bs-mega .bs-mega-highlight-card--fluid-teaser .bs-mega-highlight-img-frame {
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    min-height: 0;
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    display: block;
    box-sizing: border-box;
}
#nav.bs-mega .bs-mega-highlight-card--fluid-teaser .bs-mega-highlight-img-frame .bs-mega-highlight-img {
    position: absolute !important;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    flex: none !important;
    min-height: 0 !important;
    max-width: none !important;
}
#nav.bs-mega .bs-mega-highlight-card--fluid-teaser .bs-mega-highlight-cta {
    grid-row: 2;
    width: 100%;
    box-sizing: border-box;
}

/* Fade-up-Hover auch fuer die Fluid-Teaser-Kategoriekarten (Duschen, Baden,
   Badheizkoerper, Badkeramik, Badarmaturen, Zubehoer) — analog zur Badmoebel-Karte
   (.bs-mega-highlight-card:not(--fluid-teaser)). Neuheiten (.bs-mega-v2-tile--main)
   und Marken (Brand-Grid) sind bewusst NICHT betroffen.
   Hohe Spezifitaet (.navpar ....navitem), damit die transition nicht von
   `#nav.bs-mega .navpar .navitem { transition: color 0.15s }` ueberschrieben wird. */
#nav.bs-mega .navpar .bs-mega-highlight-card--fluid-teaser.navitem,
#nav.bs-mega-v2 .navpar .bs-mega-highlight-card--fluid-teaser.navitem {
    transition: box-shadow 0.25s ease, transform 0.2s ease;
}
#nav.bs-mega .navpar .bs-mega-highlight-card--fluid-teaser.navitem:hover,
#nav.bs-mega-v2 .navpar .bs-mega-highlight-card--fluid-teaser.navitem:hover {
    box-shadow: 0 6px 24px rgba(0, 68, 106, 0.2);
    transform: translateY(-2px);
}

/* Fluid-Teaser V2: höhere Spezifität / harte Cover-Regel (keine intrinsic width/height am img) */
#nav.bs-mega-v2.bs-mega .bs-mega-highlight-card--fluid-teaser .bs-mega-highlight-img-frame {
    min-width: 0 !important;
    width: 100% !important;
}
#nav.bs-mega-v2.bs-mega .bs-mega-highlight-card--fluid-teaser .bs-mega-highlight-img-frame .bs-mega-highlight-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    vertical-align: top !important;
}

/* ---- Highlights card (Unsere Highlights) ---- */
#nav.bs-mega .bs-mega-highlights-card {
    margin-top: 0;
    position: relative;
    background: linear-gradient(135deg, #f0f6fa 0%, #e0edf5 100%);
}
#nav.bs-mega .bs-mega-highlights-card:hover {
    box-shadow: 0 8px 32px rgba(236, 102, 8, 0.28) !important;
}
#nav.bs-mega .bs-mega-highlights-heading {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    padding: 10px 14px 6px;
    letter-spacing: 0.02em;
    text-transform: none;
    background: #f0f6fa;
    border-radius: 12px 12px 0 0;
}
#nav.bs-mega .bs-mega-highlights-card .bs-mega-highlight-img {
    border-radius: 0;
}

/* ---- Marken Mega-Panel ---- */
#nav.bs-mega .alles.bs-mega-marken {
    padding: 28px 0 28px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    overflow: hidden;
}
#nav.bs-mega .bs-mega-marken .navcolumns {
    flex-direction: column !important;
    max-width: none !important;
    padding: 0 !important;
}

/* Brand logo grid */
#nav.bs-mega .bs-mega-brand-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 6px;
    padding: 8px 24px 16px 24px;
    box-sizing: border-box;
    width: 100%;
}
#nav.bs-mega .bs-mega-brand-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px !important;
    border-radius: 6px;
    border: 1px solid rgba(74, 104, 134, 0.12) !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: #FFFFFF;
    cursor: pointer;
    min-height: 50px;
    box-sizing: border-box;
}
#nav.bs-mega .bs-mega-brand-item:hover {
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 2px 8px rgba(0, 68, 106, 0.1);
}
/* WICHTIG: Das Brand-Item traegt auch die Klasse .navitem und liegt in .navpar.
   Die Regel `#nav.bs-mega .navpar .navitem { padding: 3px 0 !important }` (Spez. 1,3,0)
   ueberstimmt sonst `#nav.bs-mega .bs-mega-brand-item` (Spez. 1,2,0) und setzt das
   horizontale Padding auf 0 -> Logo klebt links/rechts am Kachelrand. Diese Regel hat
   Spez. (1,4,0) und erzwingt 5px umlaufendes Padding innerhalb der weissen Kachel. */
#nav.bs-mega .navpar .bs-mega-brand-item.navitem {
    padding: 5px !important;
}
#nav.bs-mega .bs-mega-brand-logo {
    /* max-width:100% haelt das Logo innerhalb der 5px-Polsterung der Kachel
       (100px konnte breiter sein als die Innenflaeche -> Logo beruehrte fast den Rand). */
    max-width: 100% !important;
    max-height: 44px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}
/* Brand name always hidden — logo or brand-text fallback is sufficient */
#nav.bs-mega .bs-mega-brand-name {
    display: none !important;
}
#nav.bs-mega .bs-mega-brand-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}

/* "Alle Marken" — unter dem Logo-Grid, mehr vertikaler Abstand */
#nav.bs-mega .bs-mega-brand-footer {
    text-align: left;
    padding: 20px 24px 24px 24px;
    order: 1;
}
#nav.bs-mega .bs-mega-brand-all {
    display: inline-block !important;
    padding: 14px 4px !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--bs-blue, #00446a) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: var(--bs-blue, #00446a) !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    background: transparent !important;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
}
#nav.bs-mega .bs-mega-brand-all:hover {
    background: transparent !important;
    color: #ec6608 !important;
    text-decoration-color: #ec6608 !important;
}

/* Hide old marken column layout in favor of grid */
#nav.bs-mega .marken .nav-column {
    display: none !important;
}
#nav.bs-mega .bs-mega-brand-grid {
    display: grid !important;
}
#nav.bs-mega .bs-mega-brand-footer {
    display: block !important;
}

/* ---- Search Autocomplete Restyling (Mega-Menu style) ---- */
#search-results-wrapper {
    position: absolute !important;
    width: 900px !important;
    max-width: calc(100vw - 40px) !important;
    z-index: 9999 !important;
    margin-top: 10px !important;
    left: 0 !important;
    top: 100% !important;
    container-type: inline-size;
    container-name: search-dd;
    box-sizing: border-box !important;
}
/* Tablet / schmales Dropdown: nur Liste, wenn nebeneinander nicht genug Platz (Containerbreite) */
@container search-dd (max-width: 700px) {
    .searchsuggestions .products-section {
        display: none !important;
    }
    .searchsuggestions .cls-layout-container {
        flex-direction: column !important;
        gap: 12px !important;
    }
    /* .sidebar: Rand/Breite siehe zweiten @container-Block nach .sidebar-Basis (Kaskade) */
}
@container search-dd (min-width: 701px) {
    .searchsuggestions .cls-layout-container {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .searchsuggestions .cls-layout-container .sidebar {
        width: 260px !important;
        min-width: 260px !important;
        border-right: 1.5px solid rgba(74, 104, 134, 0.12) !important;
        padding-right: 16px !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    .searchsuggestions .products-section {
        display: block !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        width: auto !important;
    }
}
/* Ohne Container-Queries: Tablet schmal → nur Liste (sonst Produktspalte zu breit) */
@supports not (container-type: inline-size) {
    @media (min-width: 768px) and (max-width: 900px) {
        .searchsuggestions .products-section {
            display: none !important;
        }
        .searchsuggestions .cls-layout-container {
            flex-direction: column !important;
        }
        .searchsuggestions .cls-layout-container .sidebar {
            width: 100% !important;
            min-width: 0 !important;
            border-right: none !important;
        }
    }
    /* Breiter Viewport + Liste+Artikel: Trennlinie wie bei @container min701 */
    @media (min-width: 901px) {
        .searchsuggestions .cls-layout-container .sidebar {
            border-right: 1.5px solid rgba(74, 104, 134, 0.12) !important;
        }
    }
}
#search-results-wrapper .search-autocomplete {
    overflow: visible !important;
}
.searchsuggestions .cls-layout-container {
    background: #FFFFFF !important;
    border-radius: 0 0 16px 16px !important;
    box-shadow: 0 8px 32px rgba(0, 68, 106, 0.10) !important;
    clip-path: inset(0 -32px -32px -32px) !important;
    padding: 20px !important;
    position: relative !important;
    left: 0 !important;
    margin-top: 0 !important;
    gap: 20px;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    font-family: 'Montserrat', sans-serif !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}
.searchsuggestions .cls-layout-container h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px;
    padding: 0 0 8px 0 !important;
    margin: 0 !important;
    border-bottom: 1.5px solid rgba(74, 104, 134, 0.12);
}
/* Rand + feste Sidebar-Breite nur wenn Produktspalte sichtbar — siehe @container min-width 701px (unten).
   Kein globaler border-right: sonst überschreibt er Mobil-„kein Strich“ (Basis-Block stand nach @media). */
.searchsuggestions .cls-layout-container .sidebar {
    background: transparent !important;
    width: 260px !important;
    min-width: 260px !important;
    padding-right: 16px !important;
}
/* Ohne Artikelspalte: kein hellblauer Strich rechts neben der Liste (schmales Dropdown + Viewport-Mobil) */
@container search-dd (max-width: 700px) {
    .searchsuggestions .cls-layout-container .sidebar {
        border-right: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }
}
.searchsuggestions ul.cls-series-list {
    list-style: none !important;
    padding: 8px 0 0 0 !important;
    margin: 0 !important;
    border: none !important;
}
.searchsuggestions ul.cls-series-list li.serie-item {
    padding: 6px 10px !important;
    border-radius: 6px !important;
    border: none !important;
    transition: background 0.15s ease;
    cursor: pointer;
}
/* Kein blaeulicher Flaechen-Hover mehr (User-Feedback 07.07.2026: "sieht doof aus mit
   diesem hellblauen Hintergrund") -- stattdessen Farbwechsel auf Marken-Orange, analog
   zum etablierten Hover-Muster der Mega-Menue-Links (#nav.bs-mega .navpar .navitem:hover). */
.searchsuggestions ul.cls-series-list li.serie-item:hover {
    background: transparent !important;
}
.searchsuggestions ul.cls-series-list li.serie-item:hover .cls_highlight,
.searchsuggestions ul.cls-series-list li.serie-item:hover .cls_highlight b {
    color: #ec6608 !important;
}
.searchsuggestions ul.cls-series-list li.serie-item a {
    text-decoration: none !important;
    display: block;
}
.searchsuggestions span.cls_highlight {
    color: var(--bs-blue, #00446a) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    font-family: 'Montserrat', sans-serif !important;
}
.searchsuggestions span.cls_highlight b {
    color: var(--bs-blue, #00446a) !important;
    font-weight: 700 !important;
}
.searchsuggestions .products-section {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding-left: 4px !important;
    overflow: visible !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Searchsol/new.css: feste 550px — Produkt-Titel auf iPad Pro / schmalem Dropdown abgeschnitten */
#search-results-wrapper div#search_results ul.cls-searchsol,
.searchsuggestions .products-section div#search_results ul.cls-searchsol,
.searchsuggestions .products-section ul.cls-searchsol {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.searchsuggestions .cls-layout-container .products-section {
    min-width: 0 !important;
}
div#search_results ul.cls-searchsol {
    width: auto !important;
    padding: 0 !important;
    border: none !important;
    list-style: none !important;
}
#search-results-wrapper .search-autocomplete ul.cls-searchsol li {
    padding: 10px 8px !important;
    border: none !important;
    border-bottom: 1px solid rgba(74, 104, 134, 0.12) !important;
    border-radius: 8px !important;
    transition: background 0.15s ease;
}
#search-results-wrapper .search-autocomplete ul.cls-searchsol li:last-child {
    border-bottom: none !important;
}
/* User-Feedback 08.07.2026: eckiger Hover wirkte "hässlich" -- Radius passend zur
   restlichen Suchvorschlaege-Box (Sidebar-Liste links hat ebenfalls 6px, Karte aussen
   16px) statt scharfer Kanten; Hintergrund minimal kräftiger, damit der Radius auch
   sichtbar ist (0.04 war fast unsichtbar). */
#search-results-wrapper .search-autocomplete ul.cls-searchsol li:hover {
    background: rgba(0, 68, 106, 0.06) !important;
}
ul.cls-searchsol li h4 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
ul.cls-searchsol li h4 a {
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
}
ul.cls-searchsol li h4 a:hover {
    color: #ec6608 !important;
}
#search-results-wrapper .cls-searchsol .ser_img,
.searchsuggestions .epoq_sug_image img.ser_img {
    width: 70px !important;
    border-radius: 6px !important;
    margin-top: 0 !important;
    object-fit: contain;
}
/* Float aus h4 vor .clsprices lösen — sonst umfließt die Preiszeile das Bild
 * (schmaler Container + padding-left 95px → erster Treffer optisch zu weit rechts). */
ul.cls-searchsol li h4::after {
    content: '' !important;
    display: block !important;
    clear: both !important;
}
.searchsuggestions .clsprices {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    text-align: left !important;
    padding-left: 95px !important;
    padding-right: 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    flex-wrap: nowrap;
    width: 100% !important;
    box-sizing: border-box !important;
}
.searchsuggestions .clsprices .prices-left {
    display: flex !important;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
}
.searchsuggestions .clsprices .prices-left .streichpreis.uvp,
.searchsuggestions .clsprices .prices-left .price,
.searchsuggestions .clsprices .prices-left .price a {
    white-space: nowrap !important;
}
/* Rabatt: keine doppelten Zeichen (global .labelcontent::before/after) + Pill statt Pfeil */
.searchsuggestions .rabatt.labelpfeil {
    display: flex !important;
    align-items: center;
    flex-shrink: 0;
    filter: none !important;
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    top: auto !important;
    left: auto !important;
}
.searchsuggestions .rabatt.labelpfeil::before {
    display: none !important;
    content: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
}
.searchsuggestions .rabatt.labelpfeil .sparen.labelcontent::before,
.searchsuggestions .rabatt.labelpfeil .labelcontent::before {
    content: none !important;
}
.searchsuggestions .rabatt.labelpfeil .sparen.labelcontent::after,
.searchsuggestions .rabatt.labelpfeil .labelcontent::after {
    content: none !important;
}
.searchsuggestions .rabatt.labelpfeil .labelcontent,
.searchsuggestions .rabatt.labelpfeil .sparen.labelcontent {
    background: var(--bs-blue, #00446a) !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
    padding: 10px 12px !important;
    border-radius: 9999px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.02em;
    width: auto !important;
    box-shadow: none !important;
}
.searchsuggestions .clsprices .prices-left .price {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}
.searchsuggestions .streichpreis.uvp {
    color: #4a6886 !important;
    font-size: 12px !important;
}
.searchsuggestions .cls-layout-container > .cls-showall {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    order: 3 !important;
    background: transparent !important;
    color: var(--bs-blue, #00446a) !important;
    border: 1.5px solid var(--bs-blue, #00446a) !important;
    border-radius: 20px !important;
    padding: 10px 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: block !important;
    margin-top: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transition: background 0.2s ease, color 0.2s ease;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    line-height: 1.35 !important;
}
.searchsuggestions .cls-layout-container > .cls-showall:hover {
    background: var(--bs-blue, #00446a) !important;
    color: #FFFFFF !important;
}



/* Back to top button: blue chevron, no background */
#backtotop {
    background: none !important;
    border: none !important;
    color: transparent !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
    position: fixed !important;
    left: calc(50% - 20px) !important;
    bottom: 6px !important;
    z-index: 10 !important;
    cursor: pointer !important;
    margin-top: -80px !important;
    transition: bottom 0.3s ease !important;
}
#backtotop::before {
    content: '' !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    border-top: 3px solid rgba(0, 68, 106, 1) !important;
    border-right: 3px solid rgba(0, 68, 106, 1) !important;
    transform: rotate(-45deg) !important;
    margin: 14px auto 0 auto !important;
    filter:
        drop-shadow(1px 0 0 #fff)
        drop-shadow(-1px 0 0 #fff)
        drop-shadow(0 1px 0 #fff)
        drop-shadow(0 -1px 0 #fff) !important;
}

/* ============================================================
   Fader / Aktions-Slider Override (Badshop_Teaser)
   Rounded corners, drop shadow, cleaner arrows
   ============================================================ */
.page-wrapper .bs-hero__fader {
    /* <768px: gleicher horizontaler Rhythmus wie .page-main (20px) */
    padding: 0 20px;
    max-width: 1440px;
    margin: -50px auto 0 auto !important;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
}
/* Mobil/Tablet: 20px Luft zum Kategorieslider, nur wenn der Aktionsslider in diesem Viewport wirklich da ist. */
@media (max-width: 767px) {
    .cms-index-index .page-wrapper .bs-hero .bs-hero__fader:not(.bs-hero__fader--hide-mobile) {
        margin-bottom: 20px !important;
    }
    .cms-index-index .page-wrapper .bs-hero:has(.bs-hero__fader:not(.bs-hero__fader--hide-mobile)) ~ .bs-kat:not(.bs-kat--stacked) {
        margin-top: 0 !important;
    }
    .cms-index-index .page-wrapper .bs-hero:has(.bs-hero__fader:not(.bs-hero__fader--hide-mobile)) ~ .bs-kat--a.bs-kat--hide-mobile ~ .bs-kat--b {
        margin-top: 0 !important;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .cms-index-index .page-wrapper .bs-hero .bs-hero__fader:not(.bs-hero__fader--hide-tablet) {
        margin-bottom: 20px !important;
    }
    .cms-index-index .page-wrapper .bs-hero:has(.bs-hero__fader:not(.bs-hero__fader--hide-tablet)) ~ .bs-kat:not(.bs-kat--stacked) {
        margin-top: 0 !important;
    }
    .cms-index-index .page-wrapper .bs-hero:has(.bs-hero__fader:not(.bs-hero__fader--hide-tablet)) ~ .bs-kat--a.bs-kat--hide-tablet ~ .bs-kat--b {
        margin-top: 0 !important;
    }
}
.page-wrapper .bs-hero__fader .badshop-fader-container {
    border-radius: 20px !important;
    /* sichtbar: Pfeil-Schatten darf nicht vom Wrapper abgeschnitten werden */
    overflow: visible !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
}
.page-wrapper .bs-hero__fader .badshop-fader {
    border-radius: 20px !important;
    overflow: visible !important;
}
/* Option B — Clip-Container offen (Hotspot-Popover nicht abschneiden); Rundung direkt aufs Motiv */
.page-wrapper .bs-hero__fader .badshop-fader-items {
    overflow: visible !important;
    border-radius: 0 !important;
    /* Hoehe vor JS-Init reservieren (Promo-Banner 1200x400 = 3:1, auch mobil, separate_mobile=0).
       Verhindert das Kollabieren auf 0px (Slides sind absolute) -> kein Springen der Chevrons,
       Kategorien rutschen nicht hinter den Slider. fader.js setzt spaeter die exakte px-Hoehe. */
    aspect-ratio: 3 / 1;
    width: 100%;
}
.page-wrapper .bs-hero__fader .badshop-banner-item img {
    border-radius: 20px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Aktionsslider — echte Buttons + Produkt-Hotspots (Custom Design) */
.page-wrapper .bs-hero__fader .badshop-banner-item.bs-promo-slide {
    /* Immer absolute (auch .active) — sonst stapeln Slides beim fadeIn untereinander */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}
.page-wrapper .bs-hero__fader .badshop-banner-item.bs-promo-slide.active {
    position: absolute !important;
    z-index: 2 !important;
}
/* Hero-Fader: CSS-Fade statt jQuery fadeIn/fadeOut (INP beim Pfeil-Tap). */
.page-wrapper .bs-hero__fader .badshop-banner-item {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}
.page-wrapper .bs-hero__fader .badshop-banner-item.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    .page-wrapper .bs-hero__fader .badshop-banner-item {
        transition: none;
    }
}
.page-wrapper .bs-hero__fader .bs-promo-slide__media {
    position: relative;
    line-height: 0;
    overflow: visible;
}
.page-wrapper .bs-hero__fader .bs-promo-slide__media picture {
    display: block;
    border-radius: 20px;
}
.page-wrapper .bs-hero__fader .bs-promo-slide__image-link {
    display: block;
    line-height: 0;
}
.page-wrapper .bs-hero__fader .bs-promo-slide__cta {
    position: absolute;
    right: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 12;
    pointer-events: auto;
    text-decoration: none !important;
    padding: 12px 28px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    border-radius: 9999px !important;
    animation: bs-promo-slide-cta-in 0.55s ease 0.2s both;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.16),
        0 2px 6px rgba(236, 102, 8, 0.22) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease !important;
}
.page-wrapper .bs-hero__fader .badshop-banner-item.bs-promo-slide.active .bs-promo-slide__cta:hover {
    transform: translateY(-2px);
    outline: none !important;
    background-color: var(--bs-accent-color-hover, #c96000) !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.2),
        0 3px 10px rgba(236, 102, 8, 0.3) !important;
}
.page-wrapper .bs-hero__fader .badshop-banner-item.bs-promo-slide.active .bs-promo-slide__cta:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.16),
        0 2px 6px rgba(236, 102, 8, 0.22) !important;
}
.page-wrapper .bs-hero__fader .badshop-banner-item.bs-promo-slide.active .bs-promo-slide__cta:focus-visible {
    transform: translateY(-2px);
    border: 2px solid #fff !important;
    outline: 2px solid var(--bs-kb-focus-color, #00446a) !important;
    outline-offset: 0 !important;
    box-shadow:
        0 6px 18px rgba(0, 0, 0, 0.2),
        0 3px 10px rgba(236, 102, 8, 0.3) !important;
}
@keyframes bs-promo-slide-cta-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Aktionsslider: Bild-Link statt Button je Viewport (nur bei aktivem „echten Button") */
.page-wrapper .bs-hero__fader .bs-promo-slide__image-link--cta-mode {
    display: block;
    line-height: 0;
    pointer-events: none; /* Desktop: nur der Button ist klickbar */
    cursor: default;
}
@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper .bs-hero__fader .bs-promo-slide--imglink-tablet .bs-promo-slide__image-link--cta-mode {
        pointer-events: auto;
        cursor: pointer;
    }
    .page-wrapper .bs-hero__fader .bs-promo-slide--imglink-tablet .bs-promo-slide__cta {
        display: none !important;
    }
}
@media (max-width: 767px) {
    .page-wrapper .bs-hero__fader .bs-promo-slide--imglink-mobile .bs-promo-slide__image-link--cta-mode {
        pointer-events: auto;
        cursor: pointer;
    }
    .page-wrapper .bs-hero__fader .bs-promo-slide--imglink-mobile .bs-promo-slide__cta {
        display: none !important;
    }
}
/* Hotspots im Slider: Karte nach unten öffnen (Popover darf über Slider-Rand hinaus — Option B) */
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot {
    z-index: 14;
}
/* Geöffneter/hovernder Hotspot über allen anderen Punkten (Tooltip sonst hinter späteren Dots) */
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot:hover,
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot:focus-within,
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot.bs-hotspot--open {
    z-index: 32;
}
/* Aktionsslider: navy-Kreis + weißer Rand + Plus (nur hier; Hero/Bento behalten weißen Puls-Punkt) */
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot__dot {
    position: relative;
    width: 34px;
    height: 34px;
    background: var(--bs-hotspot-navy, #00446a);
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    animation: none;
}
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot__dot::before,
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot__dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: #ffffff;
    border-radius: 1px;
    transform: translate(-50%, -50%);
}
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot__dot::before {
    width: 14px;
    height: 2px;
}
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot__dot::after {
    width: 2px;
    height: 14px;
}
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot:hover .bs-hotspot__dot,
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot__trigger:focus-visible .bs-hotspot__dot {
    transform: scale(1.08);
    background: var(--bs-hotspot-navy, #00446a);
    border-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35), 0 3px 14px rgba(0, 0, 0, 0.32);
    animation: none;
}
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot__trigger:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
    box-shadow: none !important;
}
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot__tooltip {
    bottom: auto;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    z-index: 20 !important;
}
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot__tooltip::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #fff;
}
/* Unten am Bild (Y ≥ 52 %): Karte nach oben — bleibt im Slider-Clip (border-radius erhalten) */
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot.bs-hotspot--tooltip-up .bs-hotspot__tooltip {
    top: auto;
    bottom: calc(100% + 14px);
    transform: translateX(-50%) translateY(-6px);
}
.page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot.bs-hotspot--tooltip-up .bs-hotspot__tooltip::after {
    top: 100%;
    bottom: auto;
    border-top-color: #fff;
    border-bottom-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
    .page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot:hover .bs-hotspot__tooltip,
    .page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot:focus-within .bs-hotspot__tooltip {
        transform: translateX(-50%) translateY(0);
    }
    .page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot.bs-hotspot--tooltip-up:hover .bs-hotspot__tooltip,
    .page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot.bs-hotspot--tooltip-up:focus-within .bs-hotspot__tooltip {
        transform: translateX(-50%) translateY(0);
    }
}
@media (hover: none), (pointer: coarse) {
    .page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot.bs-hotspot--open .bs-hotspot__tooltip {
        transform: translateX(-50%) translateY(0);
    }
    .page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot.bs-hotspot--tooltip-up.bs-hotspot--open .bs-hotspot__tooltip {
        transform: translateX(-50%) translateY(0);
    }
}
@media (max-width: 767px) {
    .page-wrapper .bs-hero__fader .bs-promo-slide .bs-hotspot.bs-hotspot--open .bs-hotspot__tooltip {
        transform: translateX(-50%) translateY(0);
    }
}
/* Admin: Hotspots pro Viewport ausblenden */
@media (max-width: 767px) {
    .page-wrapper .bs-hero__fader.bs-hero__fader--hotspots-hide-mobile .bs-promo-slide .bs-hotspot {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper .bs-hero__fader.bs-hero__fader--hotspots-hide-tablet .bs-promo-slide .bs-hotspot {
        display: none !important;
    }
}

/* Admin: Aktionsslider komplett pro Viewport ausblenden */
@media (max-width: 767px) {
    .page-wrapper .bs-hero__fader.bs-hero__fader--hide-mobile {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper .bs-hero__fader.bs-hero__fader--hide-tablet {
        display: none !important;
    }
}

/* Admin: Kategorien Slider/Bento pro Viewport (Desktop / Tablet / Mobil) */
@media (max-width: 767px) {
    .page-wrapper .bs-kat--a.bs-kat--hide-mobile,
    .page-wrapper .bs-kat--b.bs-kat--hide-mobile {
        display: none !important;
    }
    .page-wrapper .bs-kat--a.bs-kat--hide-mobile ~ .bs-kat--b.bs-kat--stacked,
    .page-wrapper .bs-kat--b.bs-kat--hide-mobile ~ .bs-kat--a.bs-kat--stacked {
        margin-top: 40px;
    }
    .page-wrapper .bs-kat--a.bs-kat--hide-mobile ~ .bs-kat--b .bs-kat__heading--when-slider-hidden,
    .page-wrapper .bs-kat--b.bs-kat--hide-mobile ~ .bs-kat--a .bs-kat__heading--when-upper-hidden {
        display: block;
    }
    .page-wrapper .bs-kat--b.bs-kat--hide-mobile ~ .bs-kat--a .bs-kat__header:has(.bs-kat__heading--when-upper-hidden) {
        justify-content: space-between;
    }
    .page-wrapper .bs-kat--b.bs-kat--hide-mobile ~ .bs-kat--a .bs-kat__header--arrows-only:has(.bs-kat__heading--when-upper-hidden) {
        justify-content: space-between;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .page-wrapper .bs-kat--a.bs-kat--hide-tablet,
    .page-wrapper .bs-kat--b.bs-kat--hide-tablet {
        display: none !important;
    }
    .page-wrapper .bs-kat--a.bs-kat--hide-tablet ~ .bs-kat--b.bs-kat--stacked,
    .page-wrapper .bs-kat--b.bs-kat--hide-tablet ~ .bs-kat--a.bs-kat--stacked {
        margin-top: 40px;
    }
    .page-wrapper .bs-kat--a.bs-kat--hide-tablet ~ .bs-kat--b .bs-kat__heading--when-slider-hidden,
    .page-wrapper .bs-kat--b.bs-kat--hide-tablet ~ .bs-kat--a .bs-kat__heading--when-upper-hidden {
        display: block;
    }
    .page-wrapper .bs-kat--b.bs-kat--hide-tablet ~ .bs-kat--a .bs-kat__header:has(.bs-kat__heading--when-upper-hidden) {
        justify-content: space-between;
    }
}
@media (min-width: 1200px) {
    .page-wrapper .bs-kat--a.bs-kat--hide-desktop,
    .page-wrapper .bs-kat--b.bs-kat--hide-desktop {
        display: none !important;
    }
    .page-wrapper .bs-kat--a.bs-kat--hide-desktop ~ .bs-kat--b.bs-kat--stacked,
    .page-wrapper .bs-kat--b.bs-kat--hide-desktop ~ .bs-kat--a.bs-kat--stacked {
        margin-top: 40px;
    }
    .page-wrapper .bs-kat--a.bs-kat--hide-desktop ~ .bs-kat--b .bs-kat__heading--when-slider-hidden,
    .page-wrapper .bs-kat--b.bs-kat--hide-desktop ~ .bs-kat--a .bs-kat__heading--when-upper-hidden {
        display: block;
    }
    .page-wrapper .bs-kat--b.bs-kat--hide-desktop ~ .bs-kat--a .bs-kat__header:has(.bs-kat__heading--when-upper-hidden) {
        justify-content: space-between;
    }
}

/* Arrow overrides: remove white bubble, use clean semi-transparent style */
.badshop-fader button.teaser-nav-arrow-bubble {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}
/* Ein weicher Ring — kein Doppelrahmen (globaler Inset + Outline). */
.badshop-fader button.teaser-nav-arrow-bubble:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(0, 68, 106, 0.45) !important;
    border-radius: 4px;
}
.page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.page-wrapper .bs-hero__fader .teaser-nav-arrow-left,
.page-wrapper .bs-hero__fader .teaser-nav-arrow-right {
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}
/* Schatten am Bubble: zuverlässiger als nur ::after (overflow/Composite); + ohne .page-wrapper */
.page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.prev,
.page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.next,
section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.prev,
section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.next {
    /* Lighter than before: readable on bright slides without heavy halo */
    -webkit-filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.12)) !important;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.12)) !important;
}
.page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.prev::after,
.page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.next::after,
section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.prev::after,
section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.next::after {
    content: '' !important;
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    border-top: 3px solid #FFFFFF !important;
    border-right: 3px solid #FFFFFF !important;
    position: absolute !important;
}
.page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.prev::after {
    transform: rotate(-135deg) !important;
    margin-left: 4px !important;
}
.page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.next::after {
    transform: rotate(45deg) !important;
    margin-right: 4px !important;
}

/* Aktionsslider: größere Chevrons nur Desktop (≥1200px); Tablet/Mobil unverändert 14×14 */
@media (min-width: 1200px) {
    .page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.prev::after,
    .page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.next::after,
    section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.prev::after,
    section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.next::after {
        width: 24px !important;
        height: 24px !important;
        border-top-width: 4px !important;
        border-right-width: 4px !important;
    }
    .page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.prev::after,
    section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.prev::after {
        margin-left: 6px !important;
    }
    .page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.next::after,
    section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.next::after {
        margin-right: 6px !important;
    }
}

.page-wrapper .bs-hero__fader .teaser-controls {
    padding: 0 20px !important;
}

/* Aktionsslider: CTA-Button auf Tablet/Handy kompakter + Pfeile näher an den Bildrand */
@media (max-width: 1199px) {
    .page-wrapper .bs-hero__fader .bs-promo-slide__cta {
        padding: 9px 20px !important;
        font-size: 13px !important;
        right: clamp(10px, 2.2vw, 16px);
        bottom: clamp(10px, 2.2vw, 16px);
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    /* Tablet: Pfeile dichter an die linke/rechte Bildkante */
    .page-wrapper .bs-hero__fader .teaser-controls {
        padding: 0 4px !important;
    }
}
@media (max-width: 767px) {
    .page-wrapper .bs-hero__fader .bs-promo-slide__cta {
        padding: 7px 15px !important;
        font-size: 12px !important;
        right: 10px;
        bottom: 10px;
    }
    /* Aktionsslider Handy: Chevrons kleiner + dichter am Bildrand */
    .page-wrapper .bs-hero__fader .teaser-controls {
        padding: 0 2px !important;
    }
    .page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble {
        width: 28px !important;
        height: 28px !important;
    }
    .page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.prev::after,
    .page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.next::after,
    section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.prev::after,
    section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.next::after {
        width: 10px !important;
        height: 10px !important;
        border-top-width: 2px !important;
        border-right-width: 2px !important;
    }
    .page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.prev::after,
    section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.prev::after {
        margin-left: 2px !important;
    }
    .page-wrapper .bs-hero__fader .teaser-nav-arrow-bubble.next::after,
    section.bs-hero.bs-hero--v1 .bs-hero__fader .teaser-nav-arrow-bubble.next::after {
        margin-right: 2px !important;
    }
}

/* Bottom dots: cleaner style */
.page-wrapper .bs-hero__fader .bottomctrl {
    bottom: 12px !important;
}
.page-wrapper .bs-hero__fader .bottomctrl .radio {
    width: 8px !important;
    height: 8px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    border: none !important;
    border-radius: 50% !important;
    transition: background 0.2s ease !important;
}
.page-wrapper .bs-hero__fader .bottomctrl .radio.active,
.page-wrapper .bs-hero__fader .bottomctrl .active {
    background: #FFFFFF !important;
}

/* Ein Slide: keine Slider-Navigation */
.page-wrapper .bs-hero__fader .badshop-fader--single .teaser-controls,
.page-wrapper .bs-hero__fader .badshop-fader--single .bottomctrl,
.page-wrapper .bs-hero__fader .badshop-fader-container--single .teaser-controls,
.page-wrapper .bs-hero__fader .badshop-fader-container--single .bottomctrl {
    display: none !important;
}

/* ============================================================
   Themenwelten – Horizontal scroll cards
   (Stand letzter Commit / vor heutigen Experimenten)
   ============================================================ */
.cms-index-index #themenwelt {
    padding: 48px 0 40px 0 !important;
    margin: 0 !important;
    background: #FFFFFF !important;
    overflow: visible !important;
}
.cms-index-index #themenwelt .bs-section-heading {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: rgba(0, 68, 106, 1) !important;
    text-align: left !important;
    margin: 0 0 32px 0 !important;
    padding: 0 !important;
    text-transform: none !important;
}
.cms-index-index #themenwelt .bs-themen__header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 0 12px 0 !important;
}
.cms-index-index #themenwelt .bs-themen__header .bs-section-heading {
    margin: 0 !important;
}
.cms-index-index #themenwelt .bs-themen__arrows {
    display: flex !important;
    gap: 8px !important;
}
.cms-index-index #themenwelt .bs-themen__track {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    outline: none !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 4px 0 16px 0 !important;
    margin: 0 -30px 0 0 !important;
    scrollbar-width: none !important;
    scroll-padding: 0 16px;
}
.cms-index-index #themenwelt .bs-themen__track::-webkit-scrollbar {
    display: none !important;
}
.cms-index-index #themenwelt .bs-themen__card {
    flex: 0 0 55% !important;
    scroll-snap-align: start !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    position: relative !important;
}
.cms-index-index #themenwelt .bs-themen__card--featured {
    flex: 0 0 60% !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    display: grid !important;
    grid-template-rows: 1fr !important;
    grid-template-columns: 1fr !important;
}
.cms-index-index #themenwelt .bs-themen__card--featured > .bs-themen__media,
.cms-index-index #themenwelt .bs-themen__card--featured > .bs-themen__label {
    grid-row: 1 / -1 !important;
    grid-column: 1 / -1 !important;
}
/* Bild in eigenem Clip-Container: Radius clippt das Foto — nicht am <img> (sonst wirken untere Ecken „auf dem Bild“). */
.cms-index-index #themenwelt .bs-themen__media {
    display: block !important;
    width: 100% !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    aspect-ratio: 3 / 4 !important;
    background: #f0f6fa !important;
    /* kein transform hier: scale auf dem Media-Box würde die Kachel verlassen und unten an .bs-themen__card (overflow:hidden) abschneiden */
}
.cms-index-index #themenwelt .bs-themen__img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
    transform: scale(1) !important;
    transition: transform 0.35s ease !important;
    transform-origin: center center !important;
}
.cms-index-index #themenwelt .bs-themen__card:hover .bs-themen__img {
    transform: scale(1.05) !important;
}
/* Tab-Fokus: Ring per ::after über Bild/Label (inset box-shadow auf <a> liegt unter Kindern) */
html body.cms-index-index #themenwelt a.bs-themen__card[href]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
html body.cms-index-index #themenwelt a.bs-themen__card[href]:focus:not(:focus-visible)::after {
    content: none !important;
}
html body.cms-index-index #themenwelt a.bs-themen__card[href]:focus-visible {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    z-index: 2 !important;
}
html body.cms-index-index #themenwelt a.bs-themen__card[href]:focus-visible::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    pointer-events: none !important;
    z-index: 20 !important;
    box-shadow:
        inset 0 0 0 2px #ffffff,
        inset 0 0 0 4px var(--bs-kb-focus-color, #00446a) !important;
}
.cms-index-index #themenwelt .bs-themen__label {
    display: block !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 10px 4px 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    text-align: center !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
}
.cms-index-index #themenwelt .bs-themen__card--featured .bs-themen__label {
    position: relative !important;
    align-self: end !important;
    z-index: 2 !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 16px 24px !important;
    color: #FFFFFF !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;
}
.cms-index-index #themenwelt .inner-container,
.cms-index-index #themenwelt .highlight,
.cms-index-index #themenwelt .thema,
.cms-index-index #themenwelt .alle-button {
    display: none !important;
}

/* ============================================================
   SEO Portrait Text – Collapsible (Mehr anzeigen) + Akkordeon
   ============================================================ */
.cms-index-index.bs-seo-mode-collapse #portraittext {
    position: relative !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    transition: max-height 0.5s ease !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.cms-index-index.bs-seo-mode-collapse #portraittext.bs-seo-open {
    max-height: 5000px !important;
    margin-top: 16px !important;
    visibility: visible !important;
}
.cms-index-index.bs-seo-mode-accordion #portraittext,
.cms-index-index.bs-seo-mode-plain #portraittext {
    position: relative !important;
    max-width: 1440px !important;
    margin: 16px auto 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
}
.cms-index-index #portraittext h1,
.cms-index-index #portraittext h2:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: rgba(0, 68, 106, 1) !important;
    margin: 0 0 16px 0 !important;
}
.cms-index-index #portraittext h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: rgba(0, 68, 106, 1) !important;
    margin: 24px 0 12px 0 !important;
}
.cms-index-index #portraittext h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(0, 68, 106, 1) !important;
    margin: 20px 0 10px 0 !important;
}
.cms-index-index #portraittext p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 0 12px 0 !important;
}
/* Einfache (nicht doppelte) Unterstreichung: globales .textlink setzt border-bottom,
   der Browser/Theme zusaetzlich text-decoration:underline -> sah doppelt aus.
   border-bottom entfernen, nur eine text-decoration-Linie behalten. */
.cms-index-index #portraittext a.textlink,
.cms-index-index #portraittext a {
    color: rgba(0, 68, 106, 1) !important;
    text-decoration: underline !important;
    border-bottom: 0 !important;
}
.cms-index-index #portraittext a.textlink:hover,
.cms-index-index #portraittext a:hover {
    border-bottom: 0 !important;
}
.cms-index-index.bs-seo-mode-collapse #bs-seo-toggle {
    display: block !important;
    margin: 6px auto 6px auto !important;
    padding: 6px 16px !important;
    border: none !important;
    border-radius: 4px !important;
    background: transparent !important;
    color: #00446a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
}
.cms-index-index.bs-seo-mode-collapse #bs-seo-toggle:hover {
    color: #003556 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-decoration-color: currentColor !important;
}

/* SEO Akkordeon (Startseite + Kategorie) */
.bs-seo-mode-accordion .bs-seo-intro {
    margin-bottom: 12px !important;
}
.bs-seo-mode-accordion .bs-seo-accordion {
    border-top: 1px solid rgba(74, 104, 134, 0.15) !important;
}
.bs-seo-mode-accordion .bs-seo-accordion__item {
    border-bottom: 1px solid rgba(74, 104, 134, 0.15) !important;
}
.bs-seo-mode-accordion .bs-seo-accordion__trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 4px 14px 0 !important;
    border: none !important;
    background: transparent !important;
    color: rgba(0, 68, 106, 1) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: color 0.2s ease, background-color 0.2s ease !important;
}
.bs-seo-mode-accordion .bs-seo-accordion__trigger::after {
    content: '' !important;
    flex-shrink: 0 !important;
    width: 8px !important;
    height: 8px !important;
    margin-left: 16px !important;
    border-right: 2px solid #4a6886 !important;
    border-bottom: 2px solid #4a6886 !important;
    transform: rotate(45deg) !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}
.bs-seo-mode-accordion .bs-seo-accordion__trigger[aria-expanded="true"]::after {
    transform: rotate(-135deg) !important;
}
.bs-seo-mode-accordion .bs-seo-accordion__trigger:hover {
    color: #4a6886 !important;
    background-color: rgba(0, 68, 106, 0.04) !important;
}
.bs-seo-mode-accordion .bs-seo-accordion__trigger:hover::after {
    border-color: #00446a !important;
}
.bs-seo-mode-accordion .bs-seo-accordion__trigger:focus-visible {
    color: #4a6886 !important;
    outline: 2px solid rgba(0, 68, 106, 0.45) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}
.bs-seo-mode-accordion .bs-seo-accordion__panel-inner {
    padding: 0 0 16px 0 !important;
}
.bs-seo-mode-accordion .bs-seo-accordion__panel[hidden] {
    display: none !important;
}
.cms-index-index #partner-icons {
    padding: 16px 16px !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}
/* Partner-Icons (idealo / LionsHome / billiger.de): gleiche Zellgröße — Quelle-Bilder & CDN liefern unterschiedliche Intrinsics */
.cms-index-index #partner-icons .partner-icon {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.cms-index-index #partner-icons .partner-icon img {
    width: 65px !important;
    height: 65px !important;
    max-width: 65px !important;
    max-height: 65px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}
@media (min-width: 1200px) {
    .cms-index-index #partner-icons .partner-icon img {
        width: 75px !important;
        height: 75px !important;
        max-width: 75px !important;
        max-height: 75px !important;
    }
}

/* Startseite: Offscreen-Sektionen nicht layouten — INP beim ersten Tap (Suche/Menü/Hero).
 * #themenwelt bewusst ausgenommen: content-visibility setzt contain:paint und clippt
 * den Track-Bleed (margin-right:-30px) — Extra-Ränder vs. Kategorieslider.
 * contain-intrinsic-size nur als Höhe: ein Wert für beide Achsen schrumpft die Breite. */
.cms-index-index #marken,
.cms-index-index #ausstellung,
.cms-index-index #portraittext,
.cms-index-index #partner-icons {
    content-visibility: auto;
    contain-intrinsic-size: auto 360px;
}
.cms-index-index .footnotes {
    max-width: 1440px !important;
    margin: 0 auto 16px auto !important;
    /* Kein horizontales Padding: Außenabstand nur vom umgebenden Layout (.page-main o. ä.); sonst doppelte „grüne“ Einziehung im Inspektor */
    padding: 0 !important;
    box-sizing: border-box !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}
.cms-index-index .footnotes p,
.cms-index-index .footnotes div,
.cms-index-index .footnotes span,
.cms-index-index .footnotes a,
.cms-index-index .footnotes li {
    font-size: 14px !important;
    line-height: 1.45 !important;
}
/* Fußnoten — span.data-key (z. B. Versandkostenübersicht): PRG-Overlay, per Tab erreichbar */
.page-wrapper .footnotes span.data-key {
    cursor: pointer;
    color: #00446a;
}
.page-wrapper .footnotes span.data-key:hover,
.page-wrapper .footnotes span.data-key:focus-visible {
    color: #0066a1;
}
/* Liegt die Fußnote im SEO-Block (#portraittext), sonst doppeltes horizontales Padding (#portraittext + .footnotes) */
.cms-index-index #portraittext .footnotes {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 8px !important;
}


/* --- Newsletter Bar --- */
#bs-newsletter-bar {
    background: #ec6608 !important;
    padding: 32px 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
    border: none !important;
    border-top: none !important;
}
#bs-newsletter-bar .bs-newsletter-bar__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    max-width: 1440px !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
}
#bs-newsletter-bar .bs-newsletter-bar__text {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
}
#bs-newsletter-bar .bs-newsletter-bar__inner > .bs-nl-icon {
    width: 120px !important;
    height: auto !important;
    flex-shrink: 0 !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
}
#bs-newsletter-bar .bs-newsletter-bar__headline {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.2 !important;
}
#bs-newsletter-bar .bs-newsletter-bar__sub {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, 1) !important;
    line-height: 1.5 !important;
}
#bs-newsletter-bar .bs-newsletter-bar__btn {
    display: inline-block !important;
    padding: 14px 36px !important;
    background: #fff !important;
    color: #ec6608 !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-radius: 40px !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
    flex-shrink: 0 !important;
    border: 2px solid transparent !important;
}
#bs-newsletter-bar .bs-newsletter-bar__btn:hover {
    background: #ec6608 !important;
    color: #fff !important;
    border-color: #fff !important;
}

/* --- Footer (global) --- */
.footer-container {
    border-top: none !important;
}
.footer-container > .footer,
.footer-container > .footer.content {
    background: #fff !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
    width: auto !important;
}
.bottom-container .bottom-inner {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}
.footer_zeile1 {
    background: #fff !important;
    width: 100% !important;
}
.footer_zeile1 > .footer_content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}
.footer_zeile1 > .footer_content:first-child {
    padding-left: 0 !important;
}
.footer_zeile1 > .footer_content:last-child {
    padding-right: 0 !important;
}
.footer_trusted.footer_content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    /* Weniger Luft bis zum Widerrufs-Banner (darunter), Theme .footer_content hat sonst ~30px unten */
    margin-bottom: 12px !important;
}
.footer_trusted.footer_content > a,
.footer_trusted.footer_content > img,
.footer_trusted.footer_content > div,
.footer_trusted.footer_content > script {
    display: block;
    margin: 0 auto;
}
.footer_trusted.footer_content > script {
    display: none !important;
}
.footer_zahlung,
.footer-zahlung-wrapper {
    background: transparent !important;
}
.footer-zahlung-wrapper {
    margin-top: 40px !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
/* Footer-Zahlungsicons: ein Tab-Stopp für alle Logos — Fokus-Ring um die ganze Gruppe */
html body .footer-zahlung-wrapper.data-key:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
html body .footer-zahlung-wrapper.data-key: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, 4px) !important;
    box-shadow: none !important;
}
.footer_zahlung {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.footer_zeile1 .heading,
.footer_zeile1 .footer-divider {
    color: var(--bs-blue, #00446a) !important;
}
.footer_zeile1 a {
    color: var(--bs-blue, #00446a) !important;
}
.footer_zeile1 .hotline li > a {
    color: var(--bs-blue, #00446a) !important;
}
.footer_zeile1 .hotline li {
    color: var(--bs-blue, #00446a) !important;
}
/* Footer-Spalten: Unterstreichung bei Hover in jeweiliger Linkfarbe */
.footer-container .footer a:hover,
.footer-container .footer a:focus-visible {
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 2px !important;
}
.bottom-container {
    background: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}
.bottom-container .bottom-inner .links,
.bottom-container .bottom-inner address {
    text-align: left !important;
}
/* Keine automatische Silbentrennung in Footer-Reihe (body: hyphens:auto) — ganzes Wort (z. B. Kontakt) umbricht */
.bottom-container .bottom-inner .links a {
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -ms-hyphens: none !important;
    -moz-hyphens: none !important;
}
.bottom-container a {
    color: #fff !important;
}
.bottom-container a:hover {
    color: #fff !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 2px !important;
}

/* AGB/Datenschutz/Impressum/Kontakt: kein Kasten/Glow nach Mausklick — Theme .bottom-inner a:focus */
.bottom-container .bottom-inner .links a:link,
.bottom-container .bottom-inner .links a:visited {
    color: #fff !important;
    text-decoration: none !important;
}
.bottom-container .bottom-inner .links a:hover {
    color: #fff !important;
    text-decoration: underline !important;
    text-decoration-color: currentColor !important;
    text-underline-offset: 2px !important;
}
.bottom-container .bottom-inner .links a:focus:not(:focus-visible),
.bottom-container .bottom-inner .links a:active {
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    text-decoration: none !important;
    color: #fff !important;
}
.bottom-container .bottom-inner .links a:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
    color: #fff !important;
    text-decoration: underline !important;
    text-decoration-color: #fff !important;
    text-underline-offset: 2px !important;
}
.bottom-container .bottom-inner a:focus,
.bottom-container .bottom-inner a:active {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.bottom-container .bottom-inner .icons a:hover,
.bottom-container .bottom-inner .icons a:focus-visible {
    text-decoration: none !important;
}
.bottom-container .bottom-inner .icons a:focus:not(:focus-visible),
.bottom-container .bottom-inner .icons a:active {
    outline: none !important;
    box-shadow: none !important;
}
.bottom-container address,
.bottom-container .footer-copyright {
    color: #fff !important;
}
.bottom-container .icons a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.bottom-container .icons img {
    border-radius: 50% !important;
    width: 48px !important;
    height: 48px !important;
    display: block;
    transition: transform 0.2s ease;
}
/* Wie Header-Icons (.icon-link-wrapper .pers-image): leichter “Hop” nach oben */
.bottom-container .icons a:hover img,
.bottom-container .icons a:focus-visible img {
    transform: translateY(-2px);
}

/* ============================================================
   Newsletter Drawer (Slide-in from right)
   ============================================================ */
#bs-nl-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
#bs-nl-overlay.bs-nl-overlay--open {
    opacity: 1;
    visibility: visible;
}
#bs-nl-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: 100%;
    background: #fff;
    z-index: 9999;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
#bs-nl-drawer.bs-nl-drawer--open {
    transform: translateX(0);
}
#bs-nl-drawer .bs-nl-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}
#bs-nl-drawer .bs-nl-drawer__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #00446a;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#bs-nl-drawer .bs-nl-drawer__close {
    background: none;
    border: none;
    font-size: 28px;
    color: #00446a;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}
#bs-nl-drawer .bs-nl-drawer__close:hover {
    background: #f0f0f0;
}
#bs-nl-drawer .bs-nl-drawer__body {
    padding: 32px 24px;
    flex: 1;
}
#bs-nl-drawer .bs-nl-drawer__icon-img {
    display: block;
    width: 140px;
    height: auto;
    margin: 0 auto 16px auto;
}
#bs-nl-drawer .bs-nl-drawer__headline {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #ec6608;
    text-align: center;
    margin: 0 0 12px 0;
}
#bs-nl-drawer .bs-nl-drawer__text {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    color: #4a6886;
    text-align: center;
    line-height: 1.6;
    margin: 0 0 28px 0;
}
#bs-nl-drawer .bs-nl-drawer__text strong {
    color: #ec6608;
}
#bs-nl-drawer .bs-nl-drawer__flash {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    line-height: 1.45;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
    text-align: center;
}
#bs-nl-drawer .bs-nl-drawer__flash--ok {
    background: rgba(34, 170, 85, 0.12);
    color: #1a7a45;
    border: 1px solid rgba(34, 170, 85, 0.35);
}
#bs-nl-drawer .bs-nl-drawer__flash--err {
    background: rgba(180, 60, 60, 0.08);
    color: #a03030;
    border: 1px solid rgba(180, 60, 60, 0.25);
}
#bs-nl-drawer .bs-nl-drawer__field {
    margin-bottom: 16px;
}
#bs-nl-drawer .bs-nl-drawer__label {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #4a6886;
    margin-bottom: 6px;
}
#bs-nl-drawer .bs-nl-drawer__input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
    outline: none;
}
#bs-nl-drawer .bs-nl-drawer__input:focus {
    border-color: #ec6608;
}
#bs-nl-drawer .bs-nl-drawer__input::placeholder {
    color: #4a6886;
}
#bs-nl-drawer .bs-nl-drawer__submit {
    width: 100%;
    padding: 16px;
    background: #ec6608;
    color: #fff;
    border: 2px solid transparent;
    border-radius: 40px;
    font-family: 'Quicksand', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
#bs-nl-drawer .bs-nl-drawer__submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}
#bs-nl-drawer .bs-nl-drawer__submit:hover:not(:disabled) {
    background: #fff;
    color: #ec6608;
    border-color: #ec6608;
}
#bs-nl-drawer .bs-nl-drawer__benefits {
    list-style: none;
    padding: 0;
    margin: 28px 0 20px 0;
}
#bs-nl-drawer .bs-nl-drawer__benefits li {
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    color: #ec6608;
    padding: 6px 0;
    line-height: 1.4;
}
#bs-nl-drawer .bs-nl-drawer__hint {
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    color: #4a6886;
    text-align: left;
    margin: 24px 0 0 0;
    line-height: 1.5;
}

/* Temporärer E-Mail-Hinweis (Bestandskunden-Newsletter) — Revert: docs/REVERT_EMAIL_USAGE_NOTICE.md */
.bs-email-usage-notice {
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    line-height: 1.45;
    color: #4a6886;
    margin: 8px 0 0;
}
.bs-email-usage-notice em {
    font-style: italic;
}
.bs-email-usage-notice a {
    color: inherit;
    text-decoration: underline;
}
#bs-nl-drawer .bs-nl-drawer__email-notice .bs-email-usage-notice {
    margin: 12px 0 0;
    text-align: left;
}
body.checkout-index-index .bs-email-usage-notice--checkout-email,
body.checkout-index-index .bs-email-usage-notice--checkout-review {
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
}
body.checkout-index-index li#reviewinfo .custom_checkbox_wrap {
    grid-area: einwilligung;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
body.checkout-index-index li#reviewinfo .bs-email-usage-notice--checkout-review,
body.checkout-index-index li#reviewinfo .bs-email-usage-notice--checkout-review .bs-email-usage-notice {
    display: block;
    width: 100%;
    max-width: 100%;
}
#musterformular .bs-email-usage-notice-wrap {
    clear: both;
    padding: 4px 0 8px;
}

/* Advantages grid (3 items) */
#bs-nl-drawer .bs-nl-drawer__advantages {
    display: flex;
    gap: 12px;
    margin: 0 0 24px 0;
}
#bs-nl-drawer .bs-nl-drawer__adv-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px 6px;
    background: transparent;
    border: 1px solid #ec6608;
    border-radius: 10px;
}
#bs-nl-drawer .bs-nl-drawer__adv-item svg {
    width: 28px;
    height: 28px;
    color: #ec6608;
    flex-shrink: 0;
}
#bs-nl-drawer .bs-nl-drawer__adv-item span {
    font-family: 'Quicksand', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #ec6608;
    line-height: 1.3;
}

/* Name fields side-by-side */
#bs-nl-drawer .bs-nl-drawer__row {
    display: flex;
    gap: 12px;
}
#bs-nl-drawer .bs-nl-drawer__row .bs-nl-drawer__field {
    flex: 1;
    min-width: 0;
}

/* Optional label hint */
#bs-nl-drawer .bs-nl-optional {
    font-weight: 400;
    color: #4a6886;
    font-size: 11px;
}

/* Consent checkbox */
#bs-nl-drawer .bs-nl-drawer__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 20px 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}
#bs-nl-drawer .bs-nl-drawer__consent.bs-nl-consent--error {
    border-color: #c0392b;
    background: #fdf2f2;
}
#bs-nl-drawer .bs-nl-drawer__consent input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #ec6608;
    cursor: pointer;
}
#bs-nl-drawer .bs-nl-drawer__consent label {
    font-family: 'Quicksand', sans-serif;
    font-size: 11px;
    color: #4a6886;
    line-height: 1.55;
    cursor: pointer;
}
#bs-nl-drawer .bs-nl-drawer__consent label a {
    color: #ec6608;
    text-decoration: underline;
}
#bs-nl-drawer .bs-nl-drawer__consent label a:hover {
    color: #4a6886;
}

/* ============================================================
   Phone Sidebar – Overrides
   ============================================================ */
.ps-cb-input,
input#ps-cb-phone.ps-cb-input {
    border: 1.5px solid #d0d7de !important;
    border-radius: 24px !important;
    padding: 12px 18px !important;
}
.ps-cb-input:focus,
input#ps-cb-phone.ps-cb-input:focus {
    border-color: #00446a !important;
}

/* ============================================================
   Scroll-triggered Animations
   ============================================================ */
@keyframes bs-fadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bs-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Mobile phone info in navigation menu --- */
.bs-mobile-phone-info {
    display: none;
}

.bs-anim {
    opacity: 0;
}
.bs-anim--visible {
    animation: bs-fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.bs-anim--stagger.bs-anim--visible {
    animation: bs-fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ============================================================
   TABLET FINAL OVERRIDES — must be LAST to beat desktop rules
   ============================================================ */

/* ============================================================
   "Alles anzeigen" — Desktop-Mega: unterstrichener Link (orange / Hover blau), nicht Burger ≤1023


/* ============================================================
   MEGA-MENU V2 – Full-Width / About-You Style
   All rules scoped to #nav.bs-mega-v2 so V1 stays untouched.
   ============================================================ */

#nav.bs-mega-v2 .nav-primary {
    justify-content: flex-start;
    gap: 0;
}

/* ---- NEUHEITEN tab highlight ---- */
#nav.bs-mega-v2 .nav-primary > div.bs-mega-v2-neuheiten-tab {
    display: flex;
    align-items: center;
    padding: 0 !important;
}
#nav.bs-mega-v2 .nav-primary > div.bs-mega-v2-neuheiten-tab > a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    color: var(--bs-blue, #00446a) !important;
    text-transform: uppercase;
    text-decoration: none !important;
    line-height: 44px !important;
    padding: 0 14px 0 0 !important;
    position: relative;
    transition: color 0.2s ease;
    white-space: nowrap;
    background: transparent !important;
    border-bottom: 2px solid transparent;
    display: inline-flex !important;
    align-items: center !important;
}
#nav.bs-mega-v2 .nav-primary > div.bs-mega-v2-neuheiten-tab > a::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background-color: #ec6608;
    margin-right: 6px;
    flex-shrink: 0;
}
#nav.bs-mega-v2 .nav-primary > div.bs-mega-v2-neuheiten-tab:hover > a {
    color: #ec6608 !important;
    border-bottom-color: #ec6608;
}

/* ---- V2 Full-width dropdown panels ---- */
#nav.bs-mega-v2 .nav-primary .alles.bs-mega-v2-fullwidth {
    border: none !important;
    border-radius: 0 0 16px 16px !important;
    /* Oben kein Grau zum Header: kein kleiner Allround-Schatten; Spread zieht Blur von der Oberkante weg */
    box-shadow: 0 22px 52px -18px rgba(0, 0, 0, 0.14), 0 12px 28px -12px rgba(0, 0, 0, 0.06) !important;
    padding: 0 !important;
    top: 100% !important;
    margin-top: -2px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0f6fa 100%) !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    overflow: visible;
    clip-path: inset(0 0 -100px 0) !important;
}


/* V2 inner content centering */
#nav.bs-mega-v2 .bs-mega-v2-inner {
    max-width: 1440px !important;
    margin: 0 auto !important;
    padding: 60px 30px 16px !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0;
    position: relative !important;
}
/* Theme-LESS .nav-column.banner { margin: 5px auto } — Karten-Spalte volle Zeilenhöhe, kein vertikaler Versatz */
#nav.bs-mega-v2 .bs-mega-v2-inner > .nav-column.banner {
    margin: 0 !important;
    align-self: stretch !important;
}
#nav.bs-mega-v2 .bs-mega-v2-neuheiten-tab .bs-mega-v2-inner {
    padding-bottom: 30px !important;
}

/* ---- NEUHEITEN subcategory column ---- */
#nav.bs-mega-v2 .bs-mega-v2-neuheiten-cats {
    flex: 0 0 220px !important;
    width: 220px !important;
    padding: 0 22px 0 0 !important;
    border-left: none !important;
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-item,
#nav.bs-mega-v2 a.bs-mega-v2-neuheit-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-transform: uppercase !important;
    color: var(--bs-blue, #00446a) !important;
    cursor: pointer;
    text-decoration: none !important;
    box-sizing: border-box;
    transition: color 0.2s ease, transform 0.15s ease;
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-item:hover,
#nav.bs-mega-v2 a.bs-mega-v2-neuheit-item:hover {
    color: #ec6608 !important;
    transform: translateX(4px);
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-blue, #00446a);
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-icon svg {
    width: 20px;
    height: 20px;
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-item:hover .bs-mega-v2-neuheit-icon {
    color: #ec6608;
}

/* Bad-Finder Listeneintrag (Mobile Drawer + Desktop-Linkliste) */
#nav.bs-mega-v2 .bs-mega-v2-neuheit-item--badfinder {
    color: #ec6608 !important;
    border-top: 1px solid rgba(0, 68, 106, 0.12);
    margin-top: 6px;
    padding-top: 14px !important;
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-item--badfinder .bs-mega-v2-neuheit-icon {
    color: #ec6608;
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-item--badfinder:hover {
    color: #00446a !important;
}
#nav.bs-mega-v2 .bs-mega-v2-neuheit-item--badfinder:hover .bs-mega-v2-neuheit-icon {
    color: #00446a;
}

/*
 * Bad-Finder Promo-Streifen über dem Neuheiten-Tile-Grid (Desktop).
 * Eigenes Element — verdrängt keine „vorgestellte Neuheiten“-Kachel.
 */
#nav.bs-mega-v2 .bs-mega-v2-bf-strip {
    position: relative;
    display: flex !important;
    align-items: stretch;
    min-height: 96px;
    margin: 0 0 14px;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(0, 68, 106, 0.12);
    box-sizing: border-box;
    padding: 0 !important;
}
#nav.bs-mega-v2 .bs-mega-v2-bf-strip__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
#nav.bs-mega-v2 .bs-mega-v2-bf-strip__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 68, 106, 0.88) 0%,
        rgba(0, 68, 106, 0.55) 42%,
        rgba(0, 68, 106, 0.2) 100%
    );
}
#nav.bs-mega-v2 .bs-mega-v2-bf-strip__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    padding: 14px 18px;
    width: 100%;
}
#nav.bs-mega-v2 .bs-mega-v2-bf-strip__eyebrow {
    display: inline-block;
    background: #ec6608;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 999px;
    line-height: 1.2;
}
#nav.bs-mega-v2 .bs-mega-v2-bf-strip__title {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    flex: 1 1 auto;
    min-width: 140px;
}
#nav.bs-mega-v2 .bs-mega-v2-bf-strip__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ec6608;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: 8px;
    line-height: 1.2;
    white-space: nowrap;
}
#nav.bs-mega-v2 .bs-mega-v2-bf-strip:hover {
    box-shadow: 0 6px 22px rgba(0, 68, 106, 0.2);
}
#nav.bs-mega-v2 .bs-mega-v2-bf-strip:hover .bs-mega-v2-bf-strip__cta {
    background: #d45a00;
}
/* Strip nur Desktop-Panel; Mobile nutzt den Listeneintrag */
@media (max-width: 1199px) {
    #nav.bs-mega-v2 .bs-mega-v2-bf-strip {
        display: none !important;
    }
}

#nav.bs-mega-v2 a.bs-mega-v2-neuheit-link {
    display: block;
    text-decoration: none !important;
    box-sizing: border-box;
    cursor: pointer;
}

/* ---- NEUHEITEN visual area (header + tiles grid) ---- */
#nav.bs-mega-v2 .bs-mega-v2-neuheiten-visual {
    /* flex-basis 0 %: Restbreite nach linker Spalte wirklich auffüllen (ohne „hängende“ Karten rechts) */
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: none !important;
    /* Theme .nav-column.banner { margin: 5px auto } zieht im Flex-Row „Auto-Margins“ — Spalte wächst nicht auf volle Restbreite */
    margin: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    border-left: 1px solid rgba(74, 104, 134, 0.12) !important;
    padding-left: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: auto !important;
    gap: 16px !important;
    align-items: stretch !important;
    align-self: stretch !important;
    overflow: visible !important;
}

/* Header text above the tiles */
#nav.bs-mega-v2 .bs-mega-v2-visual-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    padding: 0 0 4px;
}
#nav.bs-mega-v2 .bs-mega-v2-visual-header-sub {
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--bs-blue-gray, #4a6886);
    line-height: 1.3;
}
#nav.bs-mega-v2 .bs-mega-v2-visual-header-main {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--bs-blue, #00446a);
    letter-spacing: 0.3px;
    line-height: 1.2;
    white-space: nowrap;
}
#nav.bs-mega-v2 .bs-mega-v2-visual-header-desc {
    flex-basis: 100%;
    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 0;
    margin: 0;
    opacity: 1;
    white-space: nowrap;
}

#nav.bs-mega-v2 .bs-mega-v2-tiles-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    flex: 1;
    align-items: stretch;
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    justify-content: stretch;
}

/* Explizite Raster-Zellen: verhindert, dass Zusatz-Kacheln (bei min-width:auto / Bild-Intrinsics) ineinander rutschen */
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--extras-1 > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--extras-1 > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--extras-2 > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--extras-2 > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--extras-2 > :nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--extras-3 > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--extras-3 > :nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--extras-3 > :nth-child(3) {
    grid-column: 3;
    grid-row: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--extras-3 > :nth-child(4) {
    grid-column: 4;
    grid-row: 1;
}

/* Mit vorgestellten Produkten: Spaltenanzahl = 1 Hauptkachel + N Zusatzkacheln (kein leeres „3× 1fr“ bei nur einem Produkt) */
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--with-extras.bs-mega-v2-tiles-grid--extras-1 {
    grid-template-columns: minmax(260px, 1.2fr) minmax(220px, 1fr);
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--with-extras.bs-mega-v2-tiles-grid--extras-2 {
    grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(200px, 1fr));
}
/*
 * Hauptkachel + 3 Produktkarten: erste Spalte breit genug für „Alle Neuheiten entdecken“
 * ohne Silbentrennung; die drei Produktspalten teilen die restliche Breite zu gleichen Teilen (1fr).
 */
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--with-extras.bs-mega-v2-tiles-grid--extras-3 {
    /*
     * Linke Nav-Spalte + Hauptkachel schmal halten; Produktspalten minmax(0,1fr) füllen Rest bis Rand.
     * (CTA einzeilig: .bs-mega-v2-tile--main .bs-mega-v2-tile__cta nowrap.)
     */
    grid-template-columns: minmax(200px, 218px) repeat(3, minmax(0, 1fr)) !important;
    max-width: none !important;
    width: 100% !important;
}

/*
 * „Alle Neuheiten" deaktiviert (Switch Solutioo_CustomDesign → Mega-Menü → Neuheiten):
 * Hauptkachel „Alle Neuheiten entdecken" entfällt. Die verbleibenden Zusatz-Kacheln
 * füllen die Zeile gleichmäßig über die volle Breite (keine schmale Hauptkachel-Spalte
 * mehr, kein leerer Slot). nth-child-Platzierung (col 1..N) der --extras-N-Regeln passt
 * dann 1:1 auf N Kacheln.
 */
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--no-main.bs-mega-v2-tiles-grid--extras-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--no-main.bs-mega-v2-tiles-grid--extras-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--no-main.bs-mega-v2-tiles-grid--extras-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* Individual tile */
#nav.bs-mega-v2 .bs-mega-v2-tile {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    position: relative;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: 0 2px 12px rgba(0, 68, 106, 0.1);
    min-height: 120px;
}
#nav.bs-mega-v2 .bs-mega-v2-tile:hover {
    box-shadow: 0 6px 24px rgba(0, 68, 106, 0.18);
}
#nav.bs-mega-v2 .bs-mega-v2-tile--main:hover .bs-mega-v2-tile__cta {
    background: rgba(0, 68, 106, 0.92) !important;
}

/* Main tile with gradient background */
#nav.bs-mega-v2 .bs-mega-v2-tile--main {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: 1fr;
    align-content: stretch;
    justify-items: stretch;
    background: linear-gradient(135deg, #00446a 0%, #0072b1 100%);
    gap: 0;
    min-height: 180px;
    height: 100%;
    line-height: 0;
    /* Die Hauptkachel traegt die Theme-Klasse `navitem` (Produktkacheln nicht) und erbt dadurch
       box-sizing:content-box + padding:3px 0. Das macht sie 6px hoeher als die Produktkacheln und
       laesst sie aus der Rasterzeile ragen. Hier neutralisieren -> alle Kacheln gleich hoch. */
    box-sizing: border-box;
    padding: 0;
}

/* Ohne Zusatz-Kacheln: Hauptkachel über die volle Rasterbreite (wie bisher) */
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid:not(.bs-mega-v2-tiles-grid--with-extras) .bs-mega-v2-tile--main {
    grid-column: 1 / -1;
}

/* Mit Zusatz-Kacheln: nur erste Spalte — Rest der Zeile für „vorgestellte Neuheiten“ */
#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--with-extras .bs-mega-v2-tile--main {
    grid-column: 1;
    grid-row: 1;
}

#nav.bs-mega-v2 .bs-mega-v2-tiles-grid--with-extras .bs-mega-v2-tile--extra {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    /* min-width: 0 — wichtig bei absolut positionierten Bildern, sonst min-size:auto → Spaltenüberlappung */
    min-height: 180px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 !important;
}
#nav.bs-mega-v2 .bs-mega-v2-tile--extra .bs-mega-v2-tile__img {
    position: relative !important;
    grid-row: 1;
    width: 100% !important;
    height: 100% !important;
    inset: auto !important;
    object-fit: cover !important;
}
#nav.bs-mega-v2 .bs-mega-v2-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 20px 24px;
}
#nav.bs-mega-v2 .bs-mega-v2-tile--main .bs-mega-v2-tile__icon {
    grid-row: 1;
    flex: none;
    min-height: 0;
    line-height: normal;
}
#nav.bs-mega-v2 .bs-mega-v2-tile__icon svg,
#nav.bs-mega-v2 .bs-mega-v2-tile__icon img {
    width: 90px;
    height: 90px;
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}

/* Tile image (for extra tiles or custom main card) */
#nav.bs-mega-v2 .bs-mega-v2-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.4s ease;
}
#nav.bs-mega-v2 .bs-mega-v2-tile:hover .bs-mega-v2-tile__img {
    transform: scale(1.05);
}

/* CTA bar at bottom of main tile */
#nav.bs-mega-v2 .bs-mega-v2-tile__cta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 24px 12px 20px;
    background: rgba(0, 68, 106, 0.85);
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    box-sizing: border-box;
    z-index: 1;
}

/* CTA-Zeile Hauptkachel: Text darf umbrechen; bei enger Spalte rutscht der Pfeil per flex-wrap in die 2. Zeile */
#nav.bs-mega-v2 .bs-mega-v2-tile--main .bs-mega-v2-tile__cta {
    grid-row: 2;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    white-space: normal;
    row-gap: 6px;
    column-gap: 10px;
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: break-word;
    word-break: normal;
    margin: 0;
    flex-shrink: 0;
    align-self: stretch;
    border-radius: 0;
    background: var(--bs-blue, #00446a) !important;
    line-height: 1.35;
}
#nav.bs-mega-v2 .bs-mega-v2-tile--main .bs-mega-v2-tile__cta > span:first-child {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
}
#nav.bs-mega-v2 .bs-mega-v2-tile--main .bs-mega-v2-tile__cta .bs-mega-v2-tile__arrow {
    margin-left: auto;
    flex-shrink: 0;
    line-height: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tile__arrow {
    font-size: 16px;
    transition: transform 0.2s ease;
}
#nav.bs-mega-v2 .bs-mega-v2-tile:hover .bs-mega-v2-tile__arrow {
    transform: translateX(3px);
}

/* Extra tiles: name hidden until hover; full-area transparent navy overlay + centered title */
#nav.bs-mega-v2 .bs-mega-v2-tile--extra {
    background: var(--bs-blue-light, #f0f6fa);
}
#nav.bs-mega-v2 .bs-mega-v2-tile--extra::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 68, 106, 0.74);
    opacity: 0;
    transition: opacity 0.22s ease;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}
#nav.bs-mega-v2 .bs-mega-v2-tile--extra:hover::before,
#nav.bs-mega-v2 .bs-mega-v2-tile--extra:has(:focus-visible)::before,
#nav.bs-mega-v2 .bs-mega-v2-tile--extra:focus-visible::before {
    opacity: 1;
}
#nav.bs-mega-v2 .bs-mega-v2-tile--extra .bs-mega-v2-tile__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    margin: 0;
    background: none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
    text-align: center;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
#nav.bs-mega-v2 .bs-mega-v2-tile--extra:hover .bs-mega-v2-tile__label,
#nav.bs-mega-v2 .bs-mega-v2-tile--extra:has(:focus-visible) .bs-mega-v2-tile__label,
#nav.bs-mega-v2 .bs-mega-v2-tile--extra:focus-visible .bs-mega-v2-tile__label {
    opacity: 1;
    visibility: visible;
}
/* Platzhalter / fehlendes Motiv: Titel immer lesbar (nicht nur Hover) */
#nav.bs-mega-v2 .bs-mega-v2-tile--extra.bs-mega-v2-tile--missing-image .bs-mega-v2-tile__label {
    opacity: 1;
    visibility: visible;
    color: var(--bs-blue, #00446a);
    text-shadow: none;
}
#nav.bs-mega-v2 .bs-mega-v2-tile--extra.bs-mega-v2-tile--missing-image::before {
    opacity: 0;
}

/* ---- Garantie badge: volle Kreisfläche, kein heller Rand (Theme-Bundle kann älteres border:white liefern) ---- */
.product.data.items .rightbox .badge.garantie-badge span,
.rightbox .badge.garantie-badge span {
    border: none !important;
    box-shadow: none !important;
}
.rightbox .badge.garantie-badge.gew span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

/* ---- GPSR Rightbox: only show on sections layout, hide on tab layouts ---- */
body:not(.customdesign-pdp-v2) .gpsr-rightbox,
body.customdesign-pdp-v2:not(.customdesign-desc-sections) .gpsr-rightbox {
    display: none !important;
}

/* ---- GPSR Rightbox styling (global) ---- */
.gpsr-rightbox .gpsr-rightbox-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid rgba(0, 68, 106, 0.1);
    font-family: 'Montserrat', sans-serif;
}
.gpsr-rightbox .gpsr-rightbox-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--bs-blue-gray, #4a6886);
    font-family: 'Quicksand', sans-serif;
}
.gpsr-rightbox .gpsr-rightbox-body strong {
    color: var(--bs-blue, #00446a);
    font-size: 13px;
}
.gpsr-rightbox .gpsr-rightbox-body a {
    color: var(--bs-blue, #00446a);
    text-decoration: underline;
    word-break: break-all;
}
.gpsr-rightbox .gpsr-rightbox-body p {
    margin: 0 0 0.45em;
}
.gpsr-rightbox .gpsr-rightbox-body p:last-child {
    margin-bottom: 0;
}
.gpsr-rightbox .gpsr-rightbox-body p:empty {
    display: none;
    margin: 0;
}

/* ---- Top Marken section ---- */
#nav.bs-mega-v2 .bs-mega-v2-top-brands {
    max-width: 1440px;
    margin: 0 auto;
    padding: 12px 24px 20px;
    border-top: 1px solid rgba(74, 104, 134, 0.15);
    display: flex;
    align-items: center;
    gap: 24px;
}
#nav.bs-mega-v2 .bs-mega-v2-top-brands-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}
#nav.bs-mega-v2 .bs-mega-v2-top-brands-list {
    display: flex;
    align-items: center;
    gap: 10px;
}
#nav.bs-mega-v2 .bs-mega-v2-top-brand-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border: 1px solid rgba(74, 104, 134, 0.2);
    border-radius: 8px;
    background: #ffffff;
    text-decoration: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    min-width: 0;
    min-height: 0;
}
#nav.bs-mega-v2 .bs-mega-v2-top-brand-item:hover {
    border-color: var(--bs-blue, #00446a);
    box-shadow: 0 2px 12px rgba(0, 68, 106, 0.12);
    transform: translateY(-1px);
}
#nav.bs-mega-v2 .bs-mega-v2-top-brand-logo {
    max-width: 140px;
    height: 28px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* ---- V2 overrides for existing category columns (full-width) ---- */
#nav.bs-mega-v2 .bs-mega-v2-inner .nav-column:not(.banner) {
    flex: 0 0 200px !important;
    width: 200px !important;
    padding: 0 20px !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .nav-column:not(.banner):not(:first-child) {
    border-left: 1px solid rgba(74, 104, 134, 0.12) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .nav-column:first-child {
    padding-left: 0 !important;
    border-left: none !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured {
    flex: 0 0 auto !important;
    max-width: 30% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    align-self: stretch !important;
    gap: 20px !important;
    width: auto !important;
    padding-left: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-left: 1px solid rgba(74, 104, 134, 0.12) !important;
}
/* Fluid-Teaser-Spalte: feste, etwas größere Basisbreite (Bild ~50px breiter als
   die natürliche CTA-Mindestbreite), KEIN flex-grow über die ganze Menüzeile.
   Hinweis: 320px Basis statt `0 0 auto`, weil die Karte/das Bild intern
   `width:100%` rendern und sonst auf die min-content-Breite kollabieren würden. */
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured--fluid-teaser {
    flex: 0 0 320px !important;
    align-self: stretch !important;
    width: 320px !important;
    max-width: min(780px, 60vw) !important;
    min-width: 320px !important;
    padding-left: 12px !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured:has(.bs-mega-highlights-card) {
    flex: 1 1 0% !important;
    max-width: none !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser),
#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 {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlight-card--fluid-teaser {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured--fluid-teaser > .bs-mega-highlight-card--fluid-teaser {
    align-self: stretch !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlights-card {
    flex: 1.2 1 0% !important;
    border: 0 !important;
    box-shadow: 0 4px 20px rgba(236, 102, 8, 0.22) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative;
    background: #fff !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlights-card > .bs-mega-highlight-cta {
    border-radius: 0 0 12px 12px !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlights-card:hover {
    box-shadow: 0 8px 28px rgba(236, 102, 8, 0.3) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlights-card .bs-mega-highlight-cta {
    background: var(--bs-accent-color, #ec6608) !important;
    color: #fff !important;
}
/* Kein dunkleres Orange im Hover — gleiche Markenfarbe wie im Normalzustand */
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlights-card:hover .bs-mega-highlight-cta {
    background: var(--bs-accent-color, #ec6608) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlight-card:not(.bs-mega-highlights-card) {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

/*
 * Extra-Karten (EAV): feste Höhe, nicht mit Bild-Intrinsic die Menüzeile aufblasen.
 * 280px — Textspalten setzen die Zeile. Extra-Karten ohne Kontur (border 0).
 */
#nav.bs-mega-v2 .alles:has(.bs-mega-featured--extra-cards) > .bs-mega-v2-inner,
#nav.bs-mega-v2 .alles:has(.bs-mega-featured--extra-cards) .bs-mega-v2-inner {
    align-items: flex-start !important;
}
#nav.bs-mega-v2 .alles:has(.bs-mega-featured--extra-cards) .bs-mega-v2-inner > .nav-column:not(.banner) {
    min-height: 0 !important;
    height: auto !important;
    align-self: flex-start !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured--extra-cards {
    align-self: flex-start !important;
    height: 280px !important;
    max-height: 280px !important;
    min-height: 280px !important;
    flex: 1 1 0% !important;
    max-width: none !important;
    gap: 14px !important;
    min-width: 0 !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured--extra-cards > .bs-mega-highlight-card {
    box-sizing: border-box !important;
    flex: 1 1 0% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    background: transparent !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured--extra-cards > .bs-mega-highlight-card--accent .bs-mega-highlight-cta {
    background: var(--bs-accent-color, #ec6608) !important;
    color: #fff !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured--extra-cards > .bs-mega-highlight-card--accent:hover .bs-mega-highlight-cta {
    background: var(--bs-accent-color, #ec6608) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured--extra-cards .bs-mega-highlight-label {
    font-size: 13px !important;
}

/*
 * Standard-Teaser-Karten („… entdecken“ + „Highlights entdecken“) im V2-Mega:
 * Bild fuellt die Karte oben/unten LUECKENLOS. Frueher: Flex-Column + img { flex: 1 } — aber
 * <img>-Flex-Items mit intrinsischem Seitenverhaeltnis (das Badmoebel-Bild hat sogar feste
 * width/height-Attribute) wachsen NICHT zuverlaessig per flex-grow. Da die Link-Spalten
 * min-height ~302px erzwingen, ist die Menuezeile hoeher als die Seitenverhaeltnis-Hoehe des
 * Bildes -> oben/unten blieb ein Spalt (sichtbar am Radius / an der orangenen Kontur).
 * Loesung wie beim Fluid-Teaser: Grid (Bildzeile 1fr + CTA auto), Bild height:100% + cover.
 */
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser) {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    justify-items: stretch !important;
    padding: 0 !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser) > .bs-mega-highlight-img {
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    flex: none !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured > .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser) > .bs-mega-highlight-cta {
    grid-row: 2 !important;
}

/*
 * Badmöbel + Bad-Finder: Textspalten setzen die Menühöhe.
 * Kacheln haben FESTE Höhe (kein Bild-Intrinsic) — sonst wird die Zeile
 * höher als die Listen und links entsteht Leerraum unter den Kategorien.
 * align-items/self: flex-start — kein Mitstrecken der Textspalten.
 */
#nav.bs-mega-v2 .alles:has(.bs-mega-featured--with-bf) > .bs-mega-v2-inner,
#nav.bs-mega-v2 .alles:has(.bs-mega-featured--with-bf) .bs-mega-v2-inner {
    align-items: flex-start !important;
}
#nav.bs-mega-v2 .alles:has(.bs-mega-featured--with-bf) .bs-mega-v2-inner > .nav-column:not(.banner),
#nav.bs-mega-v2 .alles:has(.bs-mega-featured--with-bf) .bs-mega-v2-inner .nav-column:not(.banner) {
    min-height: 0 !important;
    height: auto !important;
    align-self: flex-start !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    align-self: flex-start !important;
    gap: 12px !important;
    max-width: none !important;
    flex: 1 1 0% !important;
    min-width: 360px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-v2-bf-strip {
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 72px;
    max-height: 84px;
    margin: 0 !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 16px !important;
    /* ~320px + Strip ~72 + Gap 12 ≈ Höhe der Textspalten (~400px) — weder Leerraum links noch flache Kacheln */
    flex: 0 0 320px !important;
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    max-height: 320px !important;
    align-self: stretch !important;
    overflow: visible !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser),
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlights-card {
    box-sizing: border-box !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    border: 0 !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlights-card {
    flex: 1.2 1 0% !important;
    box-shadow: 0 4px 20px rgba(236, 102, 8, 0.22) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    position: relative;
    background: #fff !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlight-card:not(.bs-mega-highlights-card) {
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser) {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: stretch !important;
    justify-items: stretch !important;
    padding: 0 !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser) > .bs-mega-highlight-img {
    grid-row: 1 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    flex: none !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlight-card:not(.bs-mega-highlight-card--fluid-teaser) > .bs-mega-highlight-cta {
    grid-row: 2 !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlights-card > .bs-mega-highlight-cta {
    border-radius: 0 0 12px 12px !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlights-card .bs-mega-highlight-cta {
    background: var(--bs-accent-color, #ec6608) !important;
    color: #fff !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlights-card:hover {
    box-shadow: 0 8px 28px rgba(236, 102, 8, 0.3) !important;
}
#nav.bs-mega-v2 .bs-mega-v2-inner .bs-mega-featured.bs-mega-featured--with-bf > .bs-mega-featured__cards > .bs-mega-highlights-card:hover .bs-mega-highlight-cta {
    background: var(--bs-accent-color, #ec6608) !important;
}

/* ---- V2 Marken panel stays full-width ---- */
#nav.bs-mega-v2 .alles.bs-mega-marken.bs-mega-v2-fullwidth .navcolumns {
    padding: 0 !important;
}
#nav.bs-mega-v2 .alles.bs-mega-marken.bs-mega-v2-fullwidth .bs-mega-brand-grid {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px 16px;
}
#nav.bs-mega-v2 .alles.bs-mega-marken.bs-mega-v2-fullwidth .bs-mega-brand-footer {
    max-width: 1440px;
    margin: 0 auto;
    padding: 20px 24px 24px;
}

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



/* ============================================================
   CATEGORY PAGE V2 – Modern Full-Width
   Scoped to body.customdesign-catv2
   ============================================================ */

/* --- Full-width layout override (keep 2columns-left for Amasty filter compat, hide sidebar via CSS).
   Same for Searchsol /suche/ as for category V2: sidebar stays in DOM for Amasty AJAX, hidden visuell. --- */
body.customdesign-catv2 .sidebar-main,
body.customdesign-catv2 .sidebar-additional {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
}
body.customdesign-catv2 .column.main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
body.customdesign-catv2 .columns {
    display: block !important;
}
body.customdesign-catv2 .columns .column.main {
    float: none !important;
}

/* --- Breadcrumbs (category V2): same as global PDP-style; tighter bottom margin to header --- */
.customdesign-catv2 .breadcrumbs {
    margin-bottom: 0 !important;
}

/* Nur Startseite-Eintrag = faktisch leer (z. B. shop-weite Neuheiten-PLP) */
.customdesign-catv2 .breadcrumbs:has(.items > .item.home:only-child) {
    display: none !important;
}

/* --- Category header --- */
/*
 * Neuheiten-Vorfilter-PLP (?bw_versandlabel=Neu) — z. B. Links aus Mega-Menü „Neuheiten“.
 * Tag-Cloud-Pills („Badmöbel Anthrazit“ …) sind hier irrelevant; Angebote-Dropdown per JS aus.
 */
body.bs-neuheiten-plp.customdesign-catv2 .category-descriptionbad .button-cloud,
body.bs-neuheiten-plp.customdesign-catv2 .cat-desc-top .button-cloud,
body.bs-neuheiten-plp.customdesign-catv2 .cat-desc-bottom .button-cloud {
    display: none !important;
}

.customdesign-catv2 .categoryhead {
    text-align: center;
    margin: 0 0 8px;
}
.customdesign-catv2 .category-descriptionbad.cat-desc-top .webonly {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #4a6886;
    margin: 0 0 8px;
}
.customdesign-catv2 .category-descriptionbad.cat-desc-top h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700;
    font-size: 32px;
    color: rgba(0, 68, 106, 1);
    margin: 16px 0 8px;
}

/* ============================================================
   Category Header – Left-Aligned Variant
   ============================================================ */
body.customdesign-catv2.customdesign-cat-header-left .categoryhead {
    text-align: left !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px 40px;
    align-items: flex-start;
    margin-bottom: 32px !important;
}
body.customdesign-catv2.customdesign-cat-header-left .categoryhead * {
    text-align: left !important;
}
body.customdesign-catv2.customdesign-cat-header-left .bs-subcats__label {
    text-align: center !important;
}
body.customdesign-cat-header-left .category-descriptionbad.cat-desc-top {
    flex: 1 1 300px;
    min-width: 280px;
    max-width: 480px;
}
body.customdesign-catv2.customdesign-cat-header-left .category-descriptionbad.cat-desc-top h1 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
body.customdesign-catv2.customdesign-cat-header-left .category-descriptionbad.cat-desc-top .webonly {
    text-align: left !important;
}
.customdesign-cat-header-left .cat_overview.grid {
    flex: 1 1 400px;
    min-width: 0;
    gap: 32px 48px;
    align-items: flex-start;
    justify-content: flex-start !important;
}
.customdesign-cat-header-left .cat_overview.grid .catimg {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
}
.customdesign-cat-header-left .cat_overview.grid .catimg img {
    width: 100px;
    height: auto;
    margin-bottom: 10px;
}
.customdesign-cat-header-left .bs-subcats {
    justify-content: flex-start !important;
}
.customdesign-cat-header-left .bs-subcats__track {
    justify-content: flex-start !important;
}
.customdesign-cat-header-left .categoryhead:not(:has(.cat_overview)) .category-descriptionbad.cat-desc-top {
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* Breadcrumbs left – flush with text below */
.customdesign-catv2.customdesign-cat-header-left .breadcrumbs {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.customdesign-catv2.customdesign-cat-header-left .breadcrumbs .items {
    justify-content: flex-start !important;
}

/* Hide the blue service strip */
.customdesign-cat-header-left .bs-service-strip {
    display: none !important;
}

/* Inline contact links under description */
.customdesign-cat-header-left .bs-cat-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    text-align: left !important;
}
.customdesign-cat-header-left .bs-cat-contact__link {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    text-align: left !important;
    line-height: 1.4;
    border-radius: 4px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
button.bs-cat-contact__link {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
}
.customdesign-cat-header-left .bs-cat-contact__link:hover {
    color: #ec6608;
}
.customdesign-cat-header-left .bs-cat-contact__icon {
    flex-shrink: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-color: currentColor;
    pointer-events: none;
    -webkit-mask: center / contain no-repeat;
    mask: center / contain no-repeat;
}
.customdesign-cat-header-left .bs-cat-contact__icon--phone {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
.customdesign-cat-header-left .bs-cat-contact__icon--pin {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}
.customdesign-cat-header-left .bs-cat-contact__text {
    flex: 1 1 auto;
    min-width: 0;
}
.customdesign-cat-header-left .bs-cat-contact__link: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;
}

/* --- Subcategories: rectangular cards with radius --- */
.customdesign-catv2 .bs-subcats {
    margin: 16px 0 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.customdesign-catv2 .bs-subcats::-webkit-scrollbar {
    display: none;
}
.customdesign-catv2 .bs-subcats__track {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    /* Allseitiges Padding (>= 3px Outline + 2px Offset des Tastatur-Fokus), damit der
       Fokus-Rahmen der Rand-Kacheln nicht vom Scroll-Container (.bs-subcats,
       overflow-x:auto -> overflow-y berechnet ebenfalls auto) abgeschnitten wird. */
    padding: 6px;
}
.customdesign-catv2 .bs-subcats__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    flex: 0 0 auto;
    width: 130px;
    cursor: pointer;
    transition: transform 0.2s ease;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
}
.customdesign-catv2 .bs-subcats__item:hover {
    transform: translateY(-3px);
}
.customdesign-catv2 .bs-subcats__img-wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 66.6667%;
    aspect-ratio: 3 / 2;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid #a0b8cc;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    background: #fff;
    box-sizing: border-box;
}
@supports (aspect-ratio: 1) {
    .customdesign-catv2 .bs-subcats__img-wrap {
        height: auto;
        padding-bottom: 0;
    }
}
.customdesign-catv2 .bs-subcats__item:hover .bs-subcats__img-wrap {
    border-color: var(--bs-blue, #00446a);
    box-shadow: 0 6px 20px rgba(0, 68, 106, 0.1);
}
.customdesign-catv2 .bs-subcats__img-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.customdesign-catv2 .bs-subcats__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--bs-blue-light, #f0f6fa);
    display: block;
}
.customdesign-catv2 .bs-subcats__label {
    display: block !important;
    padding: 8px 0 0 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    text-align: center !important;
    line-height: 1.3 !important;
    hyphens: auto;
    max-width: none;
    width: 100% !important;
}

/* Reset old-style cat_overview wrapper to be a transparent flex container for v2 subcats */
.customdesign-catv2 .cat_overview.grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin: 0 0 12px;
    padding: 0;
}

/* FakeCategories (Vorkonfiguriert / Konfigurierbar) — eigene Zeile unter .bs-subcats */
.customdesign-catv2 .bs-fake-subcats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 12px 48px;
    margin: 0 0 20px;
    padding: 0;
}
.customdesign-catv2 .bs-fake-subcats .catimg {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    text-align: center;
    max-width: 200px;
    line-height: 1.35;
}
.customdesign-catv2 .bs-fake-subcats .catimg img {
    display: block;
    margin: 0 auto 8px;
    width: 100px;
    height: auto;
    max-height: 80px;
    object-fit: contain;
}
.customdesign-catv2 .bs-fake-subcats .catimg a {
    color: inherit;
    text-decoration: none;
}
.customdesign-catv2 .bs-fake-subcats .catimg a:hover {
    color: var(--bs-orange, #ec6608);
}
.customdesign-cat-header-left .bs-fake-subcats {
    justify-content: flex-start !important;
    gap: 12px 40px;
}
/* Header-left: FakeCategories + Kontakt als volle Zeile unter Description/Subcats */
body.customdesign-catv2.customdesign-cat-header-left .categoryhead > .bs-fake-subcats,
body.customdesign-catv2.customdesign-cat-header-left .categoryhead > .bs-cat-contact,
body.customdesign-catv2.customdesign-cat-header-left .categoryhead > #bs-cat-contact-injected {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
}
body.customdesign-catv2.customdesign-cat-header-left .categoryhead > .bs-fake-subcats {
    margin-bottom: 4px;
}
body.customdesign-catv2.customdesign-cat-header-left .categoryhead > .bs-cat-contact,
body.customdesign-catv2.customdesign-cat-header-left .categoryhead > #bs-cat-contact-injected {
    margin-top: 8px;
}

/* Fake-Kategorien als einspaltige Bild-Kacheln (z. B. Spiegelschränke, ID 19):
   IMMER linksbuendig. Ab >=1200px erzwingt sonst
   `body.customdesign-cat-header-left .bs-subcats__track { justify-content:flex-end; margin-left:auto }`
   (customdesign-responsive.css, fuer das Zweispalten-Grid gedacht) die Kacheln nach rechts.
   Hoehere Spezifitaet (3 Klassen) haelt sie hier links. Siehe Regel plp-fakecats-as-tiles. */
.customdesign-catv2 .bs-fake-subcats-tiles .bs-subcats__track {
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

/* --- Service strip --- */
.customdesign-catv2 .bs-service-strip {
    background: #f0f6fa;
    border-radius: 12px;
    margin: 0 0 24px;
    padding: 20px 24px 16px;
    text-align: center;
}
.customdesign-catv2 .bs-service-strip__headline {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    letter-spacing: 0.01em;
    line-height: 1.4;
}
.customdesign-catv2 .bs-service-strip__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
}
.customdesign-catv2 .bs-service-strip__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 32px;
    justify-content: center;
}
.customdesign-catv2 .bs-service-strip__icon {
    color: var(--bs-blue, #00446a);
    flex-shrink: 0;
}
.customdesign-catv2 .bs-service-strip__label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-blue, #00446a);
}
.customdesign-catv2 .bs-service-strip__value {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    line-height: 1.3;
}
.customdesign-catv2 .bs-service-strip__hours {
    display: block;
    font-size: 12px;
    color: var(--bs-blue, #00446a);
}
.customdesign-catv2 .bs-service-strip__divider {
    width: 1px;
    height: 36px;
    background: #4a6886;
    flex-shrink: 0;
}

/* --- Content padding for full-width layout --- */
.customdesign-catv2 .category-products {
    padding-left: 16px;
    padding-right: 16px;
}
.customdesign-catv2 .toolbar.toolbar-products {
    padding-left: 0;
    padding-right: 0;
}

/* --- Toolbar V2 --- */
.customdesign-catv2 .bs-toolbar-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    border-bottom: none;
    margin-bottom: 16px;
}
.customdesign-catv2 .bs-toolbar-v2__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.customdesign-catv2 .bs-toolbar-v2__right {
    display: flex;
    align-items: center;
    margin-left: auto;
    gap: 12px;
}
.customdesign-catv2 .toolbar-sorter select#sorter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid rgba(74, 104, 134, 0.2);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300446a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;
    padding: 12px 38px 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    cursor: pointer;
    transition: all 0.25s ease;
    line-height: 1.4;
    min-width: 180px;
    min-height: 44px;
    height: auto;
}
.customdesign-catv2 .toolbar-sorter select#sorter:hover {
    border-color: rgba(0, 68, 106, 0.35);
    box-shadow: 0 2px 8px rgba(0, 68, 106, 0.08);
}
.customdesign-catv2 .toolbar-sorter select#sorter:focus {
    outline: none;
    border-color: rgba(0, 68, 106, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.08);
    background-color: #f0f6fa;
}
.customdesign-catv2 .toolbar-sorter .sorter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    margin-right: 20px !important;
}
.customdesign-catv2 .bs-col-toggle {
    display: none;
    gap: 4px;
    align-items: center;
}
.customdesign-catv2 .bs-col-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1.5px solid rgba(74, 104, 134, 0.2);
    border-radius: 8px;
    background: #fff;
    color: #4a6886;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}
.customdesign-catv2 .bs-col-toggle__btn:hover {
    border-color: rgba(0, 68, 106, 0.4);
    color: rgba(0, 68, 106, 0.7);
}
.customdesign-catv2 .bs-col-toggle__btn--active {
    border-color: rgba(0, 68, 106, 1);
    color: rgba(0, 68, 106, 1);
    background: rgba(0, 68, 106, 0.06);
}


/*
 * 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).
 */

/* --- Discount highlight: orange Kontur nur auf .itemcontent (Ruhe + aufgeklappter Hover = dieselbe Box) — kein 2px-li vs. Overlay-Versatz --- */
.customdesign-catv2 .products-grid .product-items .product-item.bs-discount-highlight {
    border: 0 !important;
    box-shadow: none !important;
}
.customdesign-catv2 .products-grid .product-items .product-item.bs-discount-highlight:not(.hover) > .itemcontent {
    border: 2px solid var(--bs-accent-color, #ec6608) !important;
    border-radius: 24px;
    box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(236, 102, 8, 0.18) !important;
    overflow: hidden;
}
/* Unter Desktop: stärkerer Schatten bei :hover (ab 1024px neutralisiert wie hoverDesktopMin) */
@media (max-width: 1199px) {
    .customdesign-catv2 .products-grid .product-items .product-item.bs-discount-highlight:not(.hover):hover > .itemcontent {
        box-shadow: 0 8px 28px rgba(236, 102, 8, 0.28) !important;
    }
}
.customdesign-catv2 .product-item.bs-discount-highlight .bs-badge--light {
    border-color: var(--bs-accent-color, #ec6608) !important;
    color: var(--bs-accent-color, #ec6608) !important;
}

/* --- Product name: prevent truncation --- */
.customdesign-catv2 .product-item-name {
    height: auto !important;
    overflow: visible !important;
}

/* --- Separator banner V2: Circle trust badge strip --- */
/* Theme InfoBanner nutzte span 2/3/4 — bei bs-grid-cols-Toggle blieb eine Spalte leer; immer volle Zeile */
body.customdesign-catv2 .products-grid .product-items > li.separator-banner,
body.customdesign-catv2 .products-grid .product-items > li.bs-separator-v2 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
}
.customdesign-catv2 .bs-separator-v2 {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    background: transparent !important;
    padding: 0 !important;
}
.customdesign-catv2 .bs-separator-v2__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 20px;
    border: none;
    background: var(--bs-blue, #00446a);
    border-radius: 16px;
}
/* Icons: configurable per slot (TrustInsert); defaults match former nth-child variants */
.customdesign-catv2 .bs-separator-v2__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(0, 68, 106, 1);
    background-repeat: no-repeat;
    background-position: center;
    box-shadow: 0 2px 8px rgba(0, 68, 106, 0.25);
}
.customdesign-catv2 .bs-separator-v2__icon--check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 18px 18px;
}
.customdesign-catv2 .bs-separator-v2__icon--star {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
    background-size: 18px 18px;
}
.customdesign-catv2 .bs-separator-v2__icon--shield {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
    background-size: 18px 18px;
}
.customdesign-catv2 .bs-separator-v2__icon--custom {
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.customdesign-catv2 .bs-separator-v2__icon--custom img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    border-radius: 50%;
}
.customdesign-catv2 .bs-separator-v2__content {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.4;
    letter-spacing: 0.02em;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.customdesign-catv2 .bs-separator-v2__content a {
    color: #fff;
    text-decoration: underline;
}

/* CMS-HTML im Slot: kleine Inline-Icons nicht in den Fließtext ragen */
.customdesign-catv2 .bs-separator-v2__content img {
    max-width: 1.25em;
    max-height: 1.25em;
    width: auto;
    height: auto;
    vertical-align: -0.2em;
    object-fit: contain;
}

/*
 * `.check` (Trust-Slot „Bestell-Check auf Vollständigkeit / Kompatibilität") trägt das
 * Häkchen-SVG per `::after { position: absolute; right: -18px }` (Theme:
 * `Badshop_InfoBanner/web/css/source/_category_extend.less` Z. 13-26).
 * Auf schmalen Viewports bricht der Browser „Vollständigkeit" per Hyphenation in zwei
 * Inline-Boxes (z. B. „Vollständig-" + „keit"). Die abs-positionierte ::after richtet
 * sich dann an der *ersten* Inline-Box aus und landet mitten im Wortrumpf — Icon
 * überlagert den Text. `white-space: nowrap` zwingt die Span als einen einzigen
 * unbrechbaren Inline-Block; der Browser bricht davor oder danach um, und das Häkchen
 * sitzt sauber direkt hinter dem Wort.
 */
.customdesign-catv2 .bs-separator-v2__content .check {
    white-space: nowrap;
}

/* --- Category PLP: single-cell image promo (Händleraktion), not a product tile --- */
body.customdesign-catv2 .products-grid .product-items > li.bs-cat-list-promo {
    grid-column: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    min-height: 0;
}
.customdesign-catv2 .bs-cat-list-promo__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: var(--bs-cat-list-promo-height-pct, 80%);
    max-height: 100%;
    flex: 0 0 auto;
}
.customdesign-catv2 li.bs-cat-list-promo:not(:has(.bs-cat-list-promo__link)) > .bs-cat-list-promo__media {
    width: 100%;
    height: var(--bs-cat-list-promo-height-pct, 80%);
    max-height: 100%;
    flex: 0 0 auto;
}
.customdesign-catv2 .bs-cat-list-promo__media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transform: scale(1.02);
    /* Markanter als Produktkacheln; Farbe per --bs-list-promo-gradient (Admin) */
    border: 2px solid var(--bs-list-promo-gradient, #00446a);
    box-shadow: 0 10px 32px var(--bs-list-promo-shadow, rgba(0, 68, 106, 0.18));
    flex: 1 1 auto;
    min-height: 120px;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
/* Absolute Fill: schlägt Magento-Reset img { height:auto; max-width:100% } —
   Bild deckt Container auf Desktop/Tablet/Mobile wie object-fit:cover. */
.customdesign-catv2 .bs-cat-list-promo__media picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.customdesign-catv2 .bs-cat-list-promo__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
}
.customdesign-catv2 .bs-cat-list-promo__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px 20px;
    background: linear-gradient(
        to top,
        var(--bs-list-promo-grad-strong, rgba(0, 68, 106, 0.78)) 0%,
        var(--bs-list-promo-grad-mid, rgba(0, 68, 106, 0.28)) 42%,
        transparent 70%
    );
    pointer-events: none;
}
.customdesign-catv2 .bs-cat-list-promo__kicker {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-list-promo-text, #fff);
    font-family: 'Montserrat', sans-serif;
}
.customdesign-catv2 .bs-cat-list-promo__title {
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--bs-list-promo-text, #fff);
    font-family: 'Montserrat', sans-serif;
}
.customdesign-catv2 .bs-cat-list-promo__cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    border: 1.5px solid var(--bs-list-promo-text, #fff);
    border-radius: 999px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-list-promo-text, #fff);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Montserrat', sans-serif;
    background: rgba(255, 255, 255, 0.08);
}
.customdesign-catv2 .bs-cat-list-promo__cta-text::after {
    content: ' \2192';
    font-weight: 600;
}

/* --- Hover-Effekt Listen-Promo (nur echte Hover-/Maus-Geräte; kein "klebender" Hover auf Touch) ---
 * Kein transition auf background: Browser interpolieren linear-gradient + CSS-Vars
 * schlecht und fallen auf die Blau-Fallbacks (#00446a) zurück — Orange wirkte nach Hover „blau“. */
.customdesign-catv2 .bs-cat-list-promo__media,
.customdesign-catv2 .bs-cat-list-promo__media img,
.customdesign-catv2 .bs-cat-list-promo__cta-text::after {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.customdesign-catv2 .bs-cat-list-promo__cta {
    transition: background 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
    .customdesign-catv2 .bs-cat-list-promo__link:hover .bs-cat-list-promo__media,
    .customdesign-catv2 li.bs-cat-list-promo:not(:has(.bs-cat-list-promo__link)):hover > .bs-cat-list-promo__media {
        transform: scale(1.02) translateY(-4px);
        border-color: var(--bs-list-promo-gradient, #003554);
        box-shadow: 0 16px 40px var(--bs-list-promo-shadow-hover, rgba(0, 68, 106, 0.28));
    }
    .customdesign-catv2 .bs-cat-list-promo__link:hover .bs-cat-list-promo__media img,
    .customdesign-catv2 li.bs-cat-list-promo:not(:has(.bs-cat-list-promo__link)):hover > .bs-cat-list-promo__media img {
        transform: scale(1.06);
    }
    .customdesign-catv2 .bs-cat-list-promo__link:hover .bs-cat-list-promo__overlay {
        background: linear-gradient(
            to top,
            var(--bs-list-promo-grad-hover-strong, rgba(0, 68, 106, 0.85)) 0%,
            var(--bs-list-promo-grad-hover-mid, rgba(0, 68, 106, 0.38)) 45%,
            var(--bs-list-promo-grad-hover-soft, rgba(0, 68, 106, 0.06)) 75%
        );
    }
    .customdesign-catv2 .bs-cat-list-promo__link:hover .bs-cat-list-promo__cta {
        background: rgba(255, 255, 255, 0.16);
    }
    .customdesign-catv2 .bs-cat-list-promo__link:hover .bs-cat-list-promo__cta-text::after {
        transform: translateX(4px);
        display: inline-block;
    }
    .customdesign-catv2 .bs-cat-list-promo--no-gradient .bs-cat-list-promo__link:hover .bs-cat-list-promo__overlay,
    .customdesign-catv2 .bs-cat-list-promo--image-only.bs-cat-list-promo--no-gradient .bs-cat-list-promo__link:hover .bs-cat-list-promo__overlay {
        background: none;
    }
}

.customdesign-catv2 .bs-cat-list-promo--no-gradient .bs-cat-list-promo__overlay {
    background: none;
}
.customdesign-catv2 .bs-cat-list-promo--no-border .bs-cat-list-promo__media {
    border-color: transparent;
    border-width: 1px;
    box-shadow: none;
}
.customdesign-catv2 .bs-cat-list-promo--pos-top .bs-cat-list-promo__overlay {
    justify-content: flex-start;
}
.customdesign-catv2 .bs-cat-list-promo--pos-center .bs-cat-list-promo__overlay {
    justify-content: center;
    align-items: center;
    text-align: center;
}
.customdesign-catv2 .bs-cat-list-promo--pos-center .bs-cat-list-promo__cta {
    align-self: center;
}
.customdesign-catv2 .bs-cat-list-promo--pos-center:not(.bs-cat-list-promo--no-gradient) .bs-cat-list-promo__overlay {
    background: linear-gradient(
        to top,
        transparent 0%,
        var(--bs-list-promo-grad-mid, rgba(0, 68, 106, 0.28)) 28%,
        var(--bs-list-promo-grad-strong, rgba(0, 68, 106, 0.78)) 50%,
        var(--bs-list-promo-grad-mid, rgba(0, 68, 106, 0.28)) 72%,
        transparent 100%
    );
}
.customdesign-catv2 .bs-cat-list-promo--cta-solid .bs-cat-list-promo__cta {
    background: var(--bs-list-promo-text, #fff);
    color: var(--bs-list-promo-gradient, #00446a);
    border-color: var(--bs-list-promo-text, #fff);
}
.customdesign-catv2 .bs-cat-list-promo--image-only .bs-cat-list-promo__overlay {
    pointer-events: none;
}

/* --- Collapsible SEO text (reuses homepage portraittext mechanism) ---
 * Button sitzt jetzt VOR #portraittext (s. design-tokens.phtml), daher kein
 * großer Top-Abstand mehr — sonst entstuende im eingeklappten Zustand eine
 * sichtbare Luecke zwischen „Mehr anzeigen" und der hellblauen Fußnoten-Linie.
 * Im aufgeklappten Zustand erhaelt der SEO-Text via .bs-seo-open einen
 * komfortablen Top-Abstand zum Toggle-Button. */
.customdesign-catv2.bs-seo-mode-collapse #portraittext {
    position: relative !important;
    max-height: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    transition: max-height 0.5s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}
.customdesign-catv2.bs-seo-mode-collapse #portraittext.bs-seo-open {
    max-height: 5000px !important;
    margin-top: 16px !important;
    visibility: visible !important;
}
.customdesign-catv2.bs-seo-mode-accordion #portraittext,
.customdesign-catv2.bs-seo-mode-plain #portraittext {
    position: relative !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
}
.customdesign-catv2 #portraittext h1,
.customdesign-catv2 #portraittext h2:first-child {
    font-size: 22px !important;
}
.customdesign-catv2 #portraittext h1,
.customdesign-catv2 #portraittext h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: rgba(0, 68, 106, 1) !important;
    margin: 24px 0 12px 0 !important;
}
.customdesign-catv2 #portraittext h2:not(:first-child) {
    font-size: 18px !important;
    font-weight: 600 !important;
}
.customdesign-catv2 #portraittext h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgba(0, 68, 106, 1) !important;
    margin: 20px 0 10px 0 !important;
}
.customdesign-catv2 #portraittext p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 0 12px 0 !important;
}
/* Kein Abstand unter dem letzten Absatz/Listenpunkt in Hinweis-/Textboxen,
   sonst entsteht (durch #portraittext p margin-bottom:12px !important) ein
   sichtbarer Leerraum am unteren Rand des blauen Kastens. */
.customdesign-catv2 #portraittext .bs-cms-textbox p:last-child,
.customdesign-catv2 #portraittext .bs-cms-textbox ul:last-child,
.customdesign-catv2 #portraittext .bs-cms-textbox ol:last-child,
.cms-index-index #portraittext .bs-cms-textbox p:last-child,
.cms-index-index #portraittext .bs-cms-textbox ul:last-child,
.cms-index-index #portraittext .bs-cms-textbox ol:last-child {
    margin-bottom: 0 !important;
}
/* Kategorie-SEO-Text: .cat-desc-bottom p a setzt border-bottom (Theme) + text-decoration
   -> doppelt unterstrichen. border-bottom entfernen, eine text-decoration-Linie behalten. */
.customdesign-catv2 #portraittext a {
    color: rgba(0, 68, 106, 1) !important;
    text-decoration: underline !important;
    border-bottom: 0 !important;
}
.customdesign-catv2 #portraittext a:hover {
    border-bottom: 0 !important;
}
.category-descriptionbad.cat-desc-bottom a,
.category-descriptionbad.cat-desc-bottom p a {
    text-decoration: underline !important;
    border-bottom: 0 !important;
}

/* Kategorie-SEO-Text: Button-/Tag-Cloud linksbündig statt zentriert (Theme setzt
 * .cat-desc-bottom .button-cloud { text-align:center }). Passt zum links ausgerichteten Fließtext. */
.customdesign-catv2 #portraittext .button-cloud,
.cms-index-index #portraittext .button-cloud {
    text-align: left !important;
}
/* Kategorie-SEO / Header: Tag-Cloud-Pills (.cloud-items) — nicht wie Fließtext-Links unterstreichen;
 * #portraittext a { color !important } würde sonst beim Hover (blauer Hintergrund) Text unsichtbar machen. */
.customdesign-catv2 #portraittext .button-cloud .cloud-items,
.category-descriptionbad .button-cloud .cloud-items,
.category-descriptionbad.cat-desc-top .button-cloud .cloud-items,
.category-descriptionbad.cat-desc-bottom .button-cloud .cloud-items {
    display: inline-block !important;
    padding: 6px 16px !important;
    margin: 4px !important;
    border: 1px solid var(--bs-blue, #00446a) !important;
    border-radius: 999px !important;
    background-color: #fff !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--bs-blue, #00446a) !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.customdesign-catv2 #portraittext .button-cloud .cloud-items:hover,
.category-descriptionbad .button-cloud .cloud-items:hover {
    background-color: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 2px 8px rgba(0, 68, 106, 0.25) !important;
    text-decoration: none !important;
    border-bottom: 1px solid var(--bs-blue, #00446a) !important;
}
/* Tastatur-Fokus: kein Shop-Standard-Ring (3px Outline + Offset + weisser Inset) —
 * der stapelt sich mit der Pillenkante zu Doppelrand/weissem Spalt. Analog Suchfeld:
 * Invert-Fill + weicher blauer Schein, eine Kontur. */
html body .customdesign-catv2 #portraittext .button-cloud .cloud-items:focus-visible,
html body .category-descriptionbad .button-cloud .cloud-items:focus-visible,
html body .category-descriptionbad.cat-desc-top .button-cloud .cloud-items:focus-visible,
html body .category-descriptionbad.cat-desc-bottom .button-cloud .cloud-items:focus-visible {
    background-color: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    border-color: var(--bs-blue, #00446a) !important;
    border-bottom: 1px solid var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.18) !important;
}
html body .customdesign-catv2 #portraittext .button-cloud .cloud-items:focus:not(:focus-visible),
html body .category-descriptionbad .button-cloud .cloud-items:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
/* Mobil (<=767px): kleinere Schrift in den Filter-Pillen (14px -> 12px), da der Text auf
   schmalen Bildschirmen sonst unnoetig viel Platz je Pille braucht. Tablet/Desktop unveraendert. */
@media (max-width: 767px) {
    .customdesign-catv2 #portraittext .button-cloud .cloud-items,
    .category-descriptionbad .button-cloud .cloud-items,
    .category-descriptionbad.cat-desc-top .button-cloud .cloud-items,
    .category-descriptionbad.cat-desc-bottom .button-cloud .cloud-items {
        font-size: 12px !important;
    }
}

/* ============================================================
   Kategorieseiten (PLP) – Filter-Pillen (Tag-Cloud) auf Mobil/Tablet als Swipe-Leiste.
   Admin-Schalter: Solutioo_CustomDesign → Kategorieseiten (PLP) →
   "Filter-Pillen (Tag-Cloud) auf Mobil/Tablet als Swipe-Leiste" (Helper::isPillsSwipeMobileEnabled(),
   Body-Klasse "customdesign-pills-swipe" via CategoryLayoutObserver + Handle
   customdesign_category_pills_swipe). User-Wunsch 08.07.2026: Pillen sollen unter 1200px NICHT
   umbrechen, sondern in einer Zeile per Wisch-Geste durchblaetterbar sein, und dabei ohne
   Innenabstand rechts "angeschnitten" wirken, damit erkennbar ist, dass es weitergeht.
   Nur unter body.customdesign-pills-swipe aktiv — ohne den Schalter bleibt das bisherige
   Umbruch-Verhalten (siehe .cloud-items-Regeln oben) unveraendert.
   ============================================================ */
@media (max-width: 1199px) {
    /* .categoryhead ist immer ein Flex-Container (auch in der zentrierten Standard-Variante);
       .category-descriptionbad ist darin ein Flex-Item. Ohne die feste Breite hier "sprengt" die
       jetzt einzeilige, nicht umbrechende Pillen-Reihe (Inhalt statt Umbruch = viel breiterer
       max-content-Wert) die automatische Flex-Item-Breite nach oben — die ganze Seite bekaeme
       dadurch einen horizontalen Scrollbalken statt nur die Pillen-Zeile selbst. */
    body.customdesign-pills-swipe .categoryhead {
        min-width: 0 !important;
    }
    body.customdesign-pills-swipe .category-descriptionbad.cat-desc-top {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 100% !important;
    }
    body.customdesign-pills-swipe .category-descriptionbad .button-cloud {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        text-align: left !important;
        min-width: 0 !important;
    }
    body.customdesign-pills-swipe .category-descriptionbad .button-cloud::-webkit-scrollbar {
        display: none !important;
    }
    body.customdesign-pills-swipe .category-descriptionbad .button-cloud .cloud-items {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}
/* Bleed bis zum rechten Bildschirmrand: hebt das Seiten-Innenpadding von .page-main auf
   (20px bis 767px, 24px zwischen 768-1199px — siehe app/design/.../lib/variables/_layout.less),
   damit die letzte sichtbare Pille rechts ohne Abstand "angeschnitten" endet statt vor dem
   Rand aufzuhoeren. Links bleibt das Padding erhalten (nachtraeglich als padding-left wieder
   aufgefuellt), nur rechts bewusst kein Abstand. */
@media (max-width: 767px) {
    body.customdesign-pills-swipe .category-descriptionbad .button-cloud {
        margin-left: -20px !important;
        margin-right: -20px !important;
        padding-left: 20px !important;
        padding-right: 0 !important;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    body.customdesign-pills-swipe .category-descriptionbad .button-cloud {
        margin-left: -24px !important;
        margin-right: -24px !important;
        padding-left: 24px !important;
        padding-right: 0 !important;
    }
}

.customdesign-catv2.bs-seo-mode-collapse #bs-seo-toggle {
    display: block !important;
    margin: 8px auto 8px auto !important;
    padding: 6px 16px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #00446a !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}
.customdesign-catv2.bs-seo-mode-collapse #bs-seo-toggle:hover {
    color: #003556 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-decoration-color: currentColor !important;
}

/* --- Filter area V2 enhancements --- */
.customdesign-catv2 .filter-top {
    margin: 0 0 12px;
    padding: 0 16px;
}
.customdesign-catv2 .catalog-topnav {
    margin: 0 0 12px;
}
.customdesign-catv2 .catalog-topnav .filter-options {
    gap: 10px;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
}
.customdesign-catv2 .catalog-topnav .filter-options-item {
    border-radius: 10px;
    border-color: rgba(74, 104, 134, 0.2);
    background: #fff;
    transition: all 0.25s ease;
}
.customdesign-catv2 .catalog-topnav .filter-options-item:hover {
    border-color: rgba(0, 68, 106, 0.35);
    box-shadow: 0 2px 8px rgba(0, 68, 106, 0.08);
}
.customdesign-catv2 .catalog-topnav .filter-options-item.active {
    border-color: rgba(0, 68, 106, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.08);
    background: #f0f6fa;
}
.customdesign-catv2 .catalog-topnav .filter-options-item.moreless,
.customdesign-catv2 .catalog-topnav .filter-options-item.mehr-filter {
    border-radius: 10px;
    background: rgba(0, 68, 106, 0.9);
    border-color: rgba(0, 68, 106, 0.9);
}
.customdesign-catv2 .catalog-topnav .filter-options-item.moreless:hover,
.customdesign-catv2 .catalog-topnav .filter-options-item.mehr-filter:hover {
    background: rgba(0, 68, 106, 1);
    border-color: rgba(0, 68, 106, 1);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 68, 106, 0.2);
}
.customdesign-catv2 .filter-options-title {
    padding: 11px 38px 11px 16px;
    font-size: 13px;
    font-weight: 600;
}
.customdesign-catv2 .catalog-topnav .filter-options-item .filter-options-content {
    border-radius: 12px;
    border: 1px solid rgba(74, 104, 134, 0.2);
    box-shadow: 0 12px 40px rgba(0, 68, 106, 0.12), 0 4px 12px rgba(0, 68, 106, 0.06);
    top: calc(100% + 8px);
    padding: 8px 0;
    animation: bs-filterSlideDown 0.2s ease-out;
}
@keyframes bs-filterSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.customdesign-catv2 .filter-options-content .item [class*="am-filter-item"] {
    border-radius: 6px;
    margin: 0 4px;
    padding: 8px 12px;
}
.customdesign-catv2 .filter-options-content .items.-am-multiselect > .item:hover:not(.bs-fd-cluster-heading) {
    background: #f0f6fa;
    border-radius: 6px;
}
.customdesign-catv2 .filter-options-content .items.-am-multiselect > .item [class*="am-filter-item"]:hover {
    background: transparent !important;
}
.customdesign-catv2 .filter-options-content .items:not(.-am-multiselect) .item [class*="am-filter-item"]:hover {
    background: #f0f6fa;
}
.customdesign-catv2 .filter-options input[type="checkbox"] + .amshopby-choice::before {
    border-radius: 4px;
}
/* --- Active filter bar ("Ausgewählte Filter") --- */
.customdesign-catv2 .amshopby-filter-current {
    background: #f0f6fa !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
}
.customdesign-catv2 .amshopby-filter-current .filter-current-subtitle {
    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 !important;
    white-space: nowrap !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-items {
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-item.item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #fff !important;
    border: 1.5px solid rgba(0, 68, 106, 0.25) !important;
    border-radius: 20px !important;
    padding: 6px 10px 6px 14px !important;
    position: relative !important;
    margin: 0 !important;
    list-style: none !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-filter-name {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    text-transform: none !important;
    white-space: nowrap !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-filter-value {
    display: inline !important;
    border-radius: 0 !important;
    padding: 0 !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #4a6886 !important;
    background: none !important;
    white-space: nowrap !important;
    border: none !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-filter-value::after {
    content: none !important;
}
.customdesign-catv2 .amshopby-filter-current .action.previous {
    display: none !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-remove,
.customdesign-catv2 .amshopby-filter-current .action.remove {
    position: relative !important;
    left: auto !important;
    order: 10;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    background: rgba(0, 68, 106, 0.12) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    flex-shrink: 0 !important;
    margin-left: 2px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-remove:hover,
.customdesign-catv2 .amshopby-filter-current .action.remove:hover {
    background: rgba(0, 68, 106, 0.18) !important;
    box-shadow: none !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-remove:active,
.customdesign-catv2 .amshopby-filter-current .action.remove:active {
    background: rgba(0, 68, 106, 0.24) !important;
}
/* Luma .abs-remove-button-for-blocks (Icon-Font) — kein graues Quadrat / keine System-Farbe am X */
.customdesign-catv2 .amshopby-filter-current .amshopby-remove,
.customdesign-catv2 .amshopby-filter-current .action.remove {
    text-decoration: none !important;
    box-shadow: none !important;
    border: none !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-remove:focus,
.customdesign-catv2 .amshopby-filter-current .action.remove:focus {
    outline: none !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-remove::before,
.customdesign-catv2 .amshopby-filter-current .amshopby-remove::after,
.customdesign-catv2 .amshopby-filter-current .action.remove::before,
.customdesign-catv2 .amshopby-filter-current .action.remove::after {
    background-color: var(--bs-blue, #00446a) !important;
    width: 10px !important;
    height: 1.5px !important;
    content: '' !important;
    position: absolute !important;
    text-indent: 0 !important;
    font-family: inherit !important;
    font-size: 0 !important;
    line-height: 0 !important;
    -webkit-font-smoothing: antialiased !important;
    border: none !important;
    border-radius: 0 !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-remove:hover::before,
.customdesign-catv2 .amshopby-filter-current .amshopby-remove:hover::after,
.customdesign-catv2 .amshopby-filter-current .action.remove:hover::before,
.customdesign-catv2 .amshopby-filter-current .action.remove:hover::after {
    background-color: #003551 !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-remove::before,
.customdesign-catv2 .amshopby-filter-current .action.remove::before {
    transform: rotate(45deg) !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-remove::after,
.customdesign-catv2 .amshopby-filter-current .action.remove::after {
    transform: rotate(-45deg) !important;
}
.customdesign-catv2 .amshopby-filter-current .action.remove span {
    display: none !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-button-wrap {
    display: inline-flex !important;
    margin-left: 4px !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-button-wrap a {
    color: var(--bs-blue, #00446a) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.customdesign-catv2 .amshopby-filter-current .amshopby-button-wrap a:hover {
    text-decoration: underline !important;
}
/* Ohne aktive Filter soll der Current-Filter-Container komplett verschwinden */
.customdesign-catv2 .amshopby-filter-current:not(:has(.amshopby-item.item)) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.customdesign-catv2 .amshopby-fromto-wrap .am-fromto-widget .am-filter-price {
    border-radius: 8px;
}
.customdesign-catv2 .amshopby-fromto-wrap .am-fromto-widget > .am-filter-go {
    border-radius: 8px;
}
.customdesign-catv2 .amshopby-search-box input[type="text"] {
    border-radius: 8px;
}

/* --- Amasty layered navigation: price slider fully visible (thumbs not clipped) --- */
/* Theme _filter-type-slider.less sets .amshopby-slider-container.-light { overflow-x: hidden } and very thin tracks — handles get cut off. */
.block.filter .amshopby-slider-wrapper,
.block.filter .amshopby-slider-container {
    overflow: visible !important;
}
.block.filter .filter-options-item .filter-options-content .amshopby-slider-container {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 92% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.block.filter .amshopby-slider-container .am-slider::before,
.block.filter .amshopby-slider-container .am-slider::after {
    display: none !important;
}
.block.filter .amshopby-slider-container .am-slider.ui-slider,
.block.filter .amshopby-slider-container .ui-slider {
    height: 8px !important;
    min-height: 8px !important;
    border: none !important;
    border-radius: 999px !important;
    background: rgba(74, 104, 134, 0.22) !important;
    box-sizing: border-box !important;
}
.block.filter .amshopby-slider-container .ui-slider .ui-slider-range {
    height: 8px !important;
    border-radius: 999px !important;
    background: var(--bs-blue, #00446a) !important;
}
.block.filter .amshopby-slider-container .ui-slider .ui-slider-handle {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 3px solid var(--bs-blue, #00446a) !important;
    box-shadow: 0 2px 8px rgba(0, 68, 106, 0.2) !important;
    top: 50% !important;
    margin-top: -11px !important;
    box-sizing: border-box !important;
    cursor: grab !important;
}
/* From/To: Einheit (z. B. Watt) hinter dem jeweiligen Eingabefeld, nicht darüber/darin */
.block.filter .amshopby-fromto-wrap .am-fromto-widget > .amshopby-input-wrapper,
:is(.bs-fd-in-drawer, .catalog-topnav, .amasty-catalog-topnav)
    .amshopby-fromto-wrap .am-fromto-widget > .amshopby-input-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    max-width: none !important;
    width: calc(50% - 7px) !important;
    box-sizing: border-box !important;
}
.block.filter .amshopby-fromto-wrap .amshopby-input-wrapper .am-filter-price,
:is(.bs-fd-in-drawer, .catalog-topnav, .amasty-catalog-topnav)
    .amshopby-fromto-wrap .amshopby-input-wrapper .am-filter-price {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    padding-left: 8px !important;
    text-align: center !important;
}
.block.filter .amshopby-fromto-wrap .amshopby-input-wrapper .amshopby-currency,
:is(.bs-fd-in-drawer, .catalog-topnav, .amasty-catalog-topnav)
    .amshopby-fromto-wrap .amshopby-input-wrapper .amshopby-currency {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: var(--bs-blue-gray, #4a6886) !important;
    background: transparent !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* --- Product items – blue-toned cards matching homepage --- */
.customdesign-catv2 .products-grid .product-items .product-item {
    border-radius: 24px;
    border: 1px solid rgba(74, 104, 134, 0.2);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.customdesign-catv2 .products-grid .product-items .product-item > .itemcontent {
    display: flex !important;
    flex-direction: column;
    flex: 1;
}
.customdesign-catv2 .products-grid .product-items .product-item > .itemcontent > .main-data {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    padding-bottom: 12px;
}
.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) > .itemcontent > .main-data > *:not(.product-image-container):not(div.relative):not(.add-left):not(.bs-product-badges):not(.bs-swatch-overlay):not(.bs-hover-info-col) {
    padding-left: 12px;
    padding-right: 12px;
}
.customdesign-catv2 .products-grid .product-items .product-item > .itemcontent > .main-data > .varianten {
    margin-top: 16px;
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: 14px;
}

/* Spalten-Wrapper: links flat (display:contents) — rechte Spalte bleibt Box, sonst kein Innenpadding am Fließtext */
.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .bs-hover-visual-col {
    display: contents;
}
.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data > .bs-hover-info-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
}
/* Kompaktkachel (Grid-Zeile gleicher Höhe): Preisblock unten in der Infospalte — flex-grow oben, margin-top:auto auf erstem Preis-Block */
.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .bs-hover-info-col > .prev-prices {
    margin-top: auto;
}
.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .bs-hover-info-col:not(:has(> .prev-prices)) > .price-box {
    margin-top: auto !important;
}
/* Ohne Hover: kein Paket-/Speditions-Avatar und kein Gratis-Versand-Badge (.versand sitzt unter .main-data .bs-hover-info-col, nie Direktkind) */
.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand .icon-versand,
.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand .gratis-versand {
    display: none !important;
}
/* Hover: .itemcontent is position:absolute (theme _listings.less) — li must not clip it */
.customdesign-catv2 .products-grid .product-items .product-item.hover {
    overflow: visible !important;
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    box-shadow: none;
    /* Rand nur noch auf .itemcontent — vermeidet Doppelkante (transparent 1px/2px blieb vorher stehen) */
    border: 0 !important;
}
/* Rabatt-Kachel: border/shadow mit !important auf .bs-discount-highlight — ohne diese Überschreibung bleibt 2px-Orange am li und liegt NICHT unter top:0-Overlay → größerer Rand-Spalt */
.customdesign-catv2 .products-grid .product-items .product-item.bs-discount-highlight.hover {
    border: 0 !important;
    box-shadow: none !important;
}
.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) > .itemcontent {
    padding: 0 !important;
    margin: 0 !important;
}
.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) > .itemcontent > .main-data {
    padding: 0 0 12px 0 !important;
    min-height: 0;
}
.customdesign-catv2 .products-grid .product-items .product-item .product-image-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    display: block !important;
    text-align: left !important;
    box-sizing: border-box !important;
}
.customdesign-catv2 .products-grid .product-items .product-item .product-image-wrapper {
    border-radius: 0 !important;
    overflow: hidden;
    padding-bottom: 100% !important;
    margin: 0 !important;
    display: block !important;
    position: relative !important;
}
.customdesign-catv2 .products-grid .product-items .product-item .product-image-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}
.customdesign-catv2 .products-grid .product-items .product-item:hover {
    border-color: rgba(0, 68, 106, 0.35);
    box-shadow: 0 4px 20px rgba(0, 68, 106, 0.10);
}
/*
 * Desktop + Hover-Karte (productlist.js hoverDesktopMin): vor .hover gibt es ~500ms nur :hover —
 * Rand/Schatten sonst kurz „sprich“, dann Overlay. Hier Ruhezustand beibehalten bis .hover.
 * Außerdem: keine border-color-Transition — sonst kurzer „dunkler Rand“ beim Verlassen (.hover → 1px Rand).
 */
@media (min-width: 1200px) {
    .customdesign-catv2 .products-grid .product-items .product-item {
        transition-property: box-shadow;
        transition-duration: 0.25s;
        transition-timing-function: ease;
    }
    .customdesign-catv2 .products-grid .product-items .product-item:hover {
        border-color: rgba(74, 104, 134, 0.2) !important;
        box-shadow: none !important;
    }
    .customdesign-catv2 .products-grid .product-items .product-item.bs-discount-highlight:hover:not(.hover) > .itemcontent {
        border: 2px solid var(--bs-accent-color, #ec6608) !important;
        box-shadow: 0 4px 16px rgba(236, 102, 8, 0.18) !important;
    }
}
/* --- Hover card: 2 Spalten in .main-data — links Bildslider + Farbswatches, rechts Infos + Keyfacts --- */
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(74, 104, 134, 0.2) !important;
}
.customdesign-catv2 .products-grid .product-items .product-item.bs-discount-highlight.hover .itemcontent {
    border: 2px solid var(--bs-accent-color, #ec6608) !important;
    /* Kein blau-grauer Mehrschicht-Schatten direkt am Rand (wirkt wie zweite Kontur neben Orange) */
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12) !important;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent {
    box-shadow: 0 20px 60px rgba(0, 68, 106, 0.22), 0 6px 20px rgba(0, 68, 106, 0.10) !important;
    display: block !important;
    width: var(--hover-max-w, 860px);
    max-width: calc(100vw - 20px);
    height: auto;
    max-height: var(--hover-min-h);
    /* Mindesthöhe = reservierte Kachelhöhe — verhindert tote Zone unten (Flicker am Kartenrand) */
    min-height: var(--hover-min-h, 0);
    /*
     * Theme category-l.css: .product-item.hover .itemcontent { top:-1px; right:-1px; … } ohne !important
     * aber NACH customdesign im Bundle — left/right:auto ohne !important verliert gegen right:-1px → Versatz.
     */
    position: absolute !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    background: #fff;
    box-sizing: border-box;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover.hover-expand-right .itemcontent {
    left: 0 !important;
    right: auto !important;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover.hover-expand-left .itemcontent {
    right: 0 !important;
    left: auto !important;
}

/* Swatches ohne Farbwerte: Platz sparen (.add-left im linken Wrapper) */
.customdesign-catv2 .products-grid .product-items .product-item.hover .main-data:not(:has(.add-left .obflf)) .add-left {
    display: none !important;
}
/* Aeusseres .add-bottom (Energylabel) — volle Breite unter beiden Spalten */
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent > .add-bottom {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    padding: 0 20px 14px;
    margin: 0;
    min-width: 0;
    box-sizing: border-box;
}

/* Zwei Spalten im .main-data */
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data {
    display: grid !important;
    grid-template-columns: var(--bs-hover-img-w, min(380px, 55%)) minmax(0, 1fr);
    align-items: start;
    column-gap: 0;
    position: relative;
    padding: 0 !important;
    width: 100% !important;
    min-height: 0;
    height: auto;
    max-height: none;
    overflow-x: clip;
    overflow-y: visible;
}

.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data > .bs-hover-visual-col {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
    /* Links = oben (10px); Textspalte bleibt eigenes Padding 10px 24px */
    padding: 10px 0 6px 10px;
    box-sizing: border-box;
    position: relative;
}

/* Searchsol /suche (.catsearch): mehr Luft unter Farbswatches (Hover-Karte, linke Spalte) */
.customdesign-catv2 .catsearch .products-grid .product-items .product-item.hover .itemcontent .main-data > .bs-hover-visual-col {
    padding-bottom: 14px;
}

.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data > .bs-hover-info-col {
    grid-column: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 24px 22px;
    box-sizing: border-box;
}

/* Keyfacts in der rechten Spalte */
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col .add-bottom {
    display: block !important;
    grid-area: unset !important;
    margin: 10px 0 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col .add-bottom .keyfacts {
    color: var(--bs-blue, #00446a);
    font-size: 13px;
    margin: 0 !important;
    padding: 0;
    padding-inline-start: 1.08em;
    border: 0;
    line-height: 1.6;
    display: block;
    list-style: disc outside;
    list-style-position: outside;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col .add-bottom .keyfacts li {
    margin-bottom: 6px;
    padding-left: 0;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col .add-bottom .keyfacts li::marker {
    font-size: 13px;
}

.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    /* Zusätzlich zu .bs-hover-visual-col: linker Abstand für Label + Swatches (stärker als nur Spalte+img) */
    padding: 0 12px 0 20px;
    margin: 0;
    background: transparent;
    border-radius: 0;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: visible;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data:has(.add-left .obflf) .bs-hover-visual-col .add-left::before {
    content: "Farben und Fronten zur Auswahl";
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: Montserrat, Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.02em;
    color: var(--bs-blue, #00446a);
    margin: 0 0 6px 0;
    padding: 0;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left .obflf {
    order: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 0;
    line-height: 0;
    width: 100%;
}
/* .obflf-frame = sichtbarer, beschnittener Kreis (Groesse/Rand/Schatten/Hover wie zuvor auf
   .obflf img). Das <img> selbst sitzt jetzt INNERHALB des Frames und wird ueberskaliert +
   MITTIG verankert (siehe .obflf-frame img unten) — Quellbilder tragen haeufig eine kleine
   Dekor-/Artikelnummer unten rechts ODER ein Logo/Text oben eingedruckt; eine zentrierte
   Vergroesserung schneidet gleichmaessig von allen vier Seiten weg statt nur unten/rechts. */
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left .obflf-frame {
    display: block;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    margin: 0;
    position: relative;
    z-index: 0;
    transition: transform 0.18s ease;
    transform-origin: center center;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left .obflf-frame img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    /* 180%: enger als 148% (FEEL-nature Top-Logo), damit auch breitere Top-Logos (z.B. FEEL nature) komplett wegfallen */
    width: 180% !important;
    height: 180% !important;
    max-width: none !important;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left .obflf-frame:hover {
    transform: scale(1.14);
    z-index: 2;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left .varianten {
    display: none !important;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left .hlog,
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left .logo {
    display: none !important;
}

.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .product-image-container {
    padding: 0;
    align-self: stretch;
    display: flex !important;
    align-items: stretch;
    justify-content: flex-start;
    background: transparent;
    border-radius: 0;
    overflow: hidden !important;
    overflow: clip !important;
    position: relative;
    width: 100%;
    /* --bs-hover-img-h kommt aus productlist.js (Thumb+Layout). Explizite Hoehe: sonst kollabiert
       .product-image-wrapper (padding-bottom entfernt, nur absolutes img) auf 0px — leeres/weisses Feld
       wenn kein zweites Bild / kein Hover-Slider (bw_bild2anz nein). */
    min-height: var(--bs-hover-img-h, 260px);
    height: var(--bs-hover-img-h, 260px);
    max-height: none;
    box-sizing: border-box;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .product-image-container .product-image-wrapper {
    width: 100% !important;
    padding-bottom: 0 !important;
    height: 100%;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .product-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
    padding: 8px 8px 4px 8px;
    box-sizing: border-box;
}

/* --- Vertical auto-slider for product images --- */
@keyframes hoverSlideUp {
    0%, 35%   { transform: translateY(0); }
    50%, 85%  { transform: translateY(-33.333%); }
    100%      { transform: translateY(-66.666%); }
}
.customdesign-catv2 .product-item.hover .hover-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 300%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    animation: hoverSlideUp 5s ease-in-out infinite;
    background: transparent;
    z-index: 1;
}
/* WCAG 2.2.2: Hover-Bildwechsel ohne Autoplay-Animation — erstes Motiv (Bild2) bleibt sichtbar */
@media (prefers-reduced-motion: reduce) {
    .customdesign-catv2 .product-item.hover .hover-slider,
    body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item.bs-hover-swap .hover-slider {
        animation: none !important;
    }
}

/* Shopweite Reduced-Motion-Policy: dekorative Dauer-Animationen stoppen */
@media (prefers-reduced-motion: reduce) {
    .bs-hotspot__dot,
    .ps-dot--on {
        animation: none !important;
    }
}
.customdesign-catv2 .product-item.hover .hover-slider__slide {
    flex: 0 0 33.333%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 33.333%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    /* Kein durchsichtiger Letterbox: sonst scheint beim vertikalen Wechsel das andere Motiv an den Kanten durch */
    background: #fff;
}
.customdesign-catv2 .product-item.hover .hover-slider__slide img {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: top center;
    padding: 8px 8px 4px 8px;
    box-sizing: border-box;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .product-image-wrapper {
    border-radius: 0;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col > div.relative {
    position: absolute !important;
    top: 12px;
    left: 14px;
    width: auto;
    height: 0;
    z-index: 4;
    pointer-events: none;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col > .productlabel {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    right: auto !important;
    z-index: 4;
}

.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .product-item-name {
    padding-top: 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bs-blue, #00446a);
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .measures {
    margin-top: 10px;
    margin-bottom: 14px;
}
/* Keine Maße → kein reservierter Block (Preise rutschen nach oben) */
.customdesign-catv2 .product-item .measures:not(:has(> span)) {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .measures span {
    font-size: 14px !important;
    padding: 4px 10px !important;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .prev-prices {
    position: static !important;
    text-align: left !important;
    width: auto !important;
    margin-top: 0;
    margin-bottom: 0;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .price-box {
    text-align: left !important;
    margin-top: 2px;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .price-box .price {
    font-size: 24px !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
}

.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col .varianten {
    display: none !important;
}

.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .versand {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    font-size: 13px;
    margin-top: 12px;
    margin-left: 0 !important;
    padding: 0;
    border-bottom: none;
    margin-bottom: 6px;
    text-align: left !important;
    height: auto !important;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .versand .icon-versand {
    display: none !important;
    float: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .versand .lieferzeit {
    display: block !important;
    margin: 0 !important;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.45;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .versand .gratis-versand {
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 6px 0 !important;
    padding: 4px 12px !important;
    overflow: visible !important;
    align-self: flex-start;
    order: 1;
    background: var(--bs-blue-light, #f0f6fa) !important;
    color: var(--bs-blue, #00446a) !important;
    font-weight: 600 !important;
    border-radius: 50px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-info-col > .versand .lieferzeit {
    order: 2;
}
.customdesign-catv2 .product-item .icon-versand img {
    background: var(--bs-blue, #00446a);
    border-radius: 50%;
    padding: 6px;
    box-sizing: content-box;
}


.customdesign-catv2 .product-item.sonderkennz .main-data::before {
    background: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    padding: 4px 14px !important;
    border-radius: 50px;
    top: 10px !important;
    left: 10px !important;
    width: auto !important;
    line-height: 1.4 !important;
    z-index: 2 !important;
}
.customdesign-catv2 .product-item.sonderkennz.topseller {
    border-color: rgba(74, 104, 134, 0.2) !important;
}
.customdesign-catv2 .product-item.sonderkennz.topseller .main-data::before {
    background: #ee6205 !important;
    color: #fff !important;
}
.customdesign-catv2 .product-item .productlabel {
    top: 10px;
    right: 10px;
    left: auto;
}
.customdesign-catv2 .product-item.sonderkennz .productlabel {
    top: 10px;
    right: 10px;
    left: auto;
}
.customdesign-catv2 .product-item .productlabel .label {
    width: auto;
    height: 22px;
    max-height: 28px;
    padding: 0;
    object-fit: contain;
    background: transparent;
    border-radius: 999px;
    vertical-align: middle;
}
.customdesign-catv2 .product-item .productlabel .label[title="Neu"],
.customdesign-catv2 .product-item .productlabel .label[alt="Neu"] {
    background: #ec6608;
}
.customdesign-catv2 .product-item .varianten {
    display: none !important;
}
.customdesign-catv2 .product-item .bs-config-hint {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--bs-accent-color, #ec6608) !important;
    padding: 4px 10px !important;
    /* Nur vertikal: .bs-hover-info-col liefert schon padding links/rechts — kein zusaetzliches margin, sonst Pille rueckt gegenueber .product-item-name nach rechts */
    margin: 20px 0 6px 0 !important;
    border: 1.5px solid var(--bs-accent-color, #ec6608) !important;
    border-radius: 999px !important;
    background: #fff !important;
    cursor: pointer;
    align-self: flex-start !important;
}
.customdesign-catv2 .product-item .bs-config-hint--preconfigured {
    color: var(--bs-blue, #00446a) !important;
    border-color: var(--bs-blue, #00446a) !important;
}
.customdesign-catv2 .product-item.hover .bs-config-hint {
    display: none !important;
}
.customdesign-catv2 .product-item .varianten:hover {
    background: var(--bs-blue, #00446a) !important;
    color: #fff;
}
.customdesign-catv2 .product-item-name {
    color: var(--bs-blue, #00446a) !important;
    padding-top: 12px;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
}
.customdesign-catv2 .product-item .versand .lieferzeit {
    font-size: 13px !important;
    line-height: 1.45 !important;
}
.customdesign-catv2 .product-item .measures span {
    color: var(--bs-blue, #00446a);
    background: #f0f6fa;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 13px;
    font-weight: 600;
}
.customdesign-catv2 .product-item .add-bottom {
    font-size: 13px !important;
}
.customdesign-catv2 .product-item .add-bottom ul,
.customdesign-catv2 .product-item .add-bottom .keyfacts,
.customdesign-catv2 .product-item .add-bottom li {
    font-size: 13px !important;
    line-height: 1.5;
}

/*
 * Keyfacts-Stichpunkte: Badshop_ProductDataExtend _category.less hatte li::marker font-size:10px —
 * Chrome meldet dann oft das ganze <li> als 10px. Gilt für alle Produkt-Grids (auch Suche ohne .customdesign-catv2).
 */
.page-wrapper .products-grid .product-item .add-bottom ul.keyfacts,
.page-wrapper .products.wrapper.grid .product-item .add-bottom ul.keyfacts,
.page-wrapper .search.results .products-grid .product-item .add-bottom ul.keyfacts {
    font-size: 13px !important;
    line-height: 1.45 !important;
}
.page-wrapper .products-grid .product-item .add-bottom ul.keyfacts li,
.page-wrapper .products.wrapper.grid .product-item .add-bottom ul.keyfacts li,
.page-wrapper .search.results .products-grid .product-item .add-bottom ul.keyfacts li {
    font-size: 13px !important;
    line-height: 1.45 !important;
}
.page-wrapper .products-grid .product-item .add-bottom ul.keyfacts li::marker,
.page-wrapper .products.wrapper.grid .product-item .add-bottom ul.keyfacts li::marker,
.page-wrapper .search.results .products-grid .product-item .add-bottom ul.keyfacts li::marker {
    font-size: 13px !important;
}
.customdesign-catv2 .product-item .add-bottom .productlabel {
    font-size: 13px !important;
}
.customdesign-catv2 .product-item .streichpreis {
    color: #4a6886 !important;
    font-size: 15px !important;
}
.customdesign-catv2 .product-item .price-box {
    margin-top: auto;
    text-align: right !important;
}
.customdesign-catv2 .product-item .prev-prices ~ .price-box {
    margin-top: -2px !important;
}
.customdesign-catv2 .product-item .price-box .price {
    color: var(--bs-blue, #00446a) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}
.customdesign-catv2 .product-item.aktion .price-box .price,
.customdesign-catv2 .product-item.sale .price-box .price,
.customdesign-catv2 .product-item .prev-prices ~ .price-box .price {
    color: #ec6608 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}
.customdesign-catv2 .product-item .prev-prices {
    position: static !important;
    text-align: right !important;
    width: auto !important;
    margin-top: auto;
    margin-bottom: -2px;
}

/*
 * Streichpreis: Badshop_ProductDataExtend category/_listings.less setzt .prev-prices auf position:absolute.
 * Ist das umschließende li.product-item position:relative (Teaser, Badshop-Slider, MGS/Owl-Produktkarussell),
 * landet die UVP optisch oben links auf dem Bild. Kategorie-V2 ist oben separat (.customdesign-catv2).
 */
.teaser-topseller .product-item .prev-prices,
.badshop-slider .product-item .prev-prices,
.block.widget.mgs-products .product-item .prev-prices,
.block.widget .mgs-owl-carousel .product-item .prev-prices,
.mgs-products.products-grid .product-item .prev-prices,
.owl-carousel.mgs-owl-carousel .product-item .prev-prices,
.list-products.mgs-products .product-item .prev-prices,
.product-list-carousel .product-item .prev-prices {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    text-align: left;
    margin: 4px 0 0;
}

/*
 * Slider / Epoq / Teaser: Badge-Pills wie Kategorie-V2.
 * Selektor nur .teaser-topseller/.badshop-slider reicht nicht: Epoq injiziert <li> per AJAX
 * unter .epoqWidget … .badshop-slider — gleiche Klasse bs-badge-pills, aber ohne garantierten
 * .teaser-topseller-Vorfahr. Deshalb: .product-item.bs-badge-pills (Kategorie-V2 bleibt durch
 * spätere .customdesign-catv2-Regeln bei Hover/Grid stärker, wo nötig).
 */
.product-item.bs-badge-pills > a.itemurl {
    position: relative;
}
.product-item.bs-badge-pills .productlabel {
    display: none !important;
}
.product-item.bs-badge-pills .bs-product-badges {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    z-index: 3;
    padding: 0 8px;
    pointer-events: none;
}
.product-item.bs-badge-pills .bs-badge {
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1.3;
    border-radius: 999px;
    pointer-events: auto;
}
.product-item.bs-badge-pills .bs-badge--light {
    background: #fff;
    color: var(--bs-blue, #00446a);
    border: 1px solid #ddd;
}
.product-item.bs-badge-pills .bs-badge--dark {
    background: var(--bs-blue, #00446a);
    color: #fff;
}
.product-item.bs-badge-pills .bs-badge--accent {
    background: var(--bs-accent-color, #ec6608);
    color: #fff;
}
.badshop-slider .product-item.bs-badge-pills .bs-product-badges {
    gap: 4px;
    padding: 0 6px;
    top: 6px;
}
.badshop-slider .product-item.bs-badge-pills .bs-badge {
    padding: 4px 10px;
    font-size: 10px;
    line-height: 1.2;
}

/* --- Fast delivery badge --- */
.customdesign-catv2 .product-item .bs-fast-delivery {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #1a8a3f;
    line-height: 1;
}
.customdesign-catv2 .product-item .bs-fast-delivery__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #1a8a3f;
    border-radius: 50%;
    flex-shrink: 0;
}
.customdesign-catv2 .product-item.hover .bs-fast-delivery {
    display: none;
}

/* --- Surface color swatch overlay on product image --- */
.customdesign-catv2 .product-item .bs-swatch-overlay {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-top: -36px;
    margin-right: 8px;
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
    pointer-events: none;
}
/* .bs-swatch-frame = sichtbarer, beschnittener Kreis (Groesse/Rand/Schatten wie zuvor auf
   .bs-swatch-overlay img). Das <img> selbst sitzt jetzt INNERHALB des Frames und wird
   ueberskaliert + MITTIG verankert (siehe .bs-swatch-frame img unten) — Quellbilder tragen
   haeufig eine kleine Dekor-/Artikelnummer unten rechts (z.B. "185", "171") ODER ein
   Logo/Text oben (z.B. Hersteller-Materialbranding mit Blatt-Icon) eingedruckt; eine
   zentrierte Vergroesserung schneidet gleichmaessig von allen vier Seiten weg statt nur
   unten/rechts, damit beide Dekor-Varianten ausserhalb des sichtbaren Kreises landen. */
.customdesign-catv2 .product-item .bs-swatch-overlay .bs-swatch-frame {
    display: inline-block;
    overflow: hidden;
    position: relative;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    /* Container ist pointer-events:none (Klicks sollen zur PDP durchfallen);
       einzelne Swatches wieder aktivieren, damit Badshop_OptionImageSwitcher
       die Hover-Vorschau (.ois-plp-preview) darauf zeigen kann. */
    pointer-events: auto;
}
.customdesign-catv2 .product-item .bs-swatch-overlay .bs-swatch-frame img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    /* 180%: enger als 148% (FEEL-nature Top-Logo), damit auch breitere Top-Logos (z.B. FEEL nature) komplett wegfallen */
    width: 180% !important;
    height: 180% !important;
    max-width: none !important;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
.customdesign-catv2 .product-item .bs-swatch-overlay .bs-swatch-more {
    font-size: 11px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    background: #fff;
    border: 2px solid var(--bs-blue, #00446a);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    white-space: nowrap;
    padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.customdesign-catv2 .product-item.hover .bs-swatch-overlay {
    display: none !important;
}

.customdesign-catv2 .toolbar.toolbar-products {
    border-color: rgba(74, 104, 134, 0.2);
    box-sizing: border-box;
    max-width: 100%;
}

/* --- Leere Kategorie: Hinweis (Bild + „Liebe Kunden“) in hellblauem Band --- */
.catalog-category-view .column.main .bs-empty-category.noitems {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 28px 0 36px;
    padding: 40px 24px 44px;
    background: var(--bs-blue-light, #f0f6fa);
    border-radius: 0;
    text-align: center;
    color: rgba(0, 68, 106, 0.85);
    font-size: 1.05rem;
    line-height: 1.55;
}
.catalog-category-view .column.main .bs-empty-category__inner {
    max-width: 640px;
    margin: 0 auto;
}
.catalog-category-view .column.main .bs-empty-category__image {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    margin: 0 auto 22px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 4px 18px rgba(0, 68, 106, 0.1);
}
.catalog-category-view .column.main .bs-empty-category__body {
    color: rgba(0, 68, 106, 0.85);
}
.catalog-category-view .column.main .bs-empty-category__body p {
    margin: 0 0 12px;
    color: rgba(0, 68, 106, 0.8);
    font-size: 1.05rem;
    line-height: 1.55;
}
.catalog-category-view .column.main .bs-empty-category__body p:last-child {
    margin-bottom: 0;
}
.catalog-category-view .column.main .bs-empty-category__body strong {
    display: block;
    margin: 4px 0 10px;
    color: var(--bs-blue, #00446a);
    font-weight: 700;
    font-size: 1.15rem;
}
.catalog-category-view .column.main .bs-empty-category__body a {
    color: var(--bs-blue, #00446a);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.catalog-category-view .column.main .bs-empty-category__body a:hover {
    color: var(--bs-accent-color, #ec6608);
}
@media (max-width: 767px) {
    .catalog-category-view .column.main .bs-empty-category.noitems {
        padding: 28px 16px 32px;
        margin: 20px 0 28px;
    }
    .catalog-category-view .column.main .bs-empty-category__image {
        max-width: 100%;
        border-radius: 10px;
        margin-bottom: 18px;
    }
    .catalog-category-view .column.main .bs-empty-category__body p,
    .catalog-category-view .column.main .bs-empty-category__body strong {
        font-size: 1rem;
    }
}

/* --- Pagination V2 --- */
.customdesign-catv2 .products.wrapper ~ .toolbar-products .pages {
    background: none !important;
    padding: 16px 0 !important;
    margin: 8px 0 20px !important;
}
.customdesign-catv2 .pages .items.pages-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.customdesign-catv2 .pages .items.pages-items .item {
    list-style: none;
}
/* Nur Seitenzahlen-Kreise — nicht .next/.previous: Magento nutzt z. B. „Nächste Seite“ als a.next.page / a.page (mit .next) */
.customdesign-catv2 .pages .items.pages-items .item.current > span,
.customdesign-catv2 .pages .items.pages-items .item > a.page:not(.next):not(.previous) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}
.customdesign-catv2 .pages .items.pages-items .item > a.page:not(.next):not(.previous):hover {
    background: #f0f6fa;
}
.customdesign-catv2 .pages .items.pages-items .item.current > span {
    background: var(--bs-blue, #00446a);
    color: #fff !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 {
    color: var(--bs-blue, #00446a) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 50px;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.customdesign-catv2 .pages .items.pages-items .item a.action:hover,
.customdesign-catv2 .pages .items.pages-items .item a.link.next:hover,
.customdesign-catv2 .pages .items.pages-items .item a.link.previous:hover {
    background: #f0f6fa;
}
.customdesign-catv2 .bs-toolbar-v2 {
    border-color: rgba(74, 104, 134, 0.2);
}

/* --- Searchsol /suche: Pagination wie Kategorie V2 (statt grauer Leiste in new-r.css) --- */
.suche-index-index.customdesign-catv2 #idstoolbar-amount {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.suche-index-index.customdesign-catv2 #ids_pagination {
    list-style: none !important;
    background: none !important;
    background-color: transparent !important;
    margin: 8px 0 20px !important;
    padding: 16px 0 !important;
    gap: 6px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}
.suche-index-index.customdesign-catv2 #ids_pagination li.page-item:not(#prev):not(#next) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
}
.suche-index-index.customdesign-catv2 #ids_pagination li.page-item:not(#prev):not(#next):hover {
    background: #f0f6fa !important;
    background-color: #f0f6fa !important;
    color: var(--bs-blue, #00446a) !important;
}
.suche-index-index.customdesign-catv2 #ids_pagination li.page-item.active:not(#prev):not(#next) {
    background: var(--bs-blue, #00446a) !important;
    background-color: var(--bs-blue, #00446a) !important;
    color: #fff !important;
}
.suche-index-index.customdesign-catv2 #ids_pagination #prev,
.suche-index-index.customdesign-catv2 #ids_pagination #next {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    padding: 8px 16px !important;
    border-radius: 50px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    background: transparent !important;
    background-color: transparent !important;
    flex-shrink: 0 !important;
}
.suche-index-index.customdesign-catv2 #ids_pagination #prev:hover,
.suche-index-index.customdesign-catv2 #ids_pagination #next:hover {
    background: #f0f6fa !important;
    background-color: #f0f6fa !important;
    color: var(--bs-blue, #00446a) !important;
}

/* --- Footnotes styling --- */
.customdesign-catv2 .footnotes {
    margin: 24px 0 8px;
    padding: 16px 0;
    border-top: 1px solid rgba(74, 104, 134, 0.15);
}
/* Lesbarkeit: Default-Magento liefert 16px (siehe DevTools-Tooltip Screenshot
   18:00) — auf Kategorie- und Suchseiten (beide body.customdesign-catv2) auf
   14px reduzieren. Mobile-Wert 14px war bereits in customdesign-responsive.css
   gesetzt, jetzt auch Desktop einheitlich. */
.customdesign-catv2 .footnotes p,
.customdesign-catv2 .footnotes div,
.customdesign-catv2 .footnotes span,
.customdesign-catv2 .footnotes a,
.customdesign-catv2 .footnotes li {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Remove the old detail-text styling when portraittext is used */
.customdesign-catv2 #detail-text {
    display: none !important;
}


/* ============================================================
   HEADER V2 – Mobile only: permanent search, Konto/Wunschliste im Menü
   Scoped to body.bs-header-v2 so V1 stays untouched.
   Desktop & Tablet remain identical to V1.
   ============================================================ */

/* ---- Account & Wishlist links inside .bs-mobile-phone-info (injected by header-v2.js) ---- */
.bs-mobile-phone-info .bs-header-v2-menu-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 16px 0;
    padding: 0 0 12px 0;
    border-bottom: 1px solid rgba(74, 104, 134, 0.2);
}
.bs-mobile-phone-info .bs-header-v2-menu-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 0;
    text-decoration: none !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    transition: color 0.15s ease;
}
.bs-mobile-phone-info .bs-header-v2-menu-link:hover,
.bs-mobile-phone-info .bs-header-v2-menu-link:active {
    color: #ec6608 !important;
}
.bs-mobile-phone-info .bs-header-v2-menu-link svg {
    flex-shrink: 0;
    color: var(--bs-blue, #00446a);
    width: 22px;
    height: 22px;
}
.bs-mobile-phone-info .bs-header-v2-menu-link:hover svg {
    color: #ec6608;
}



/* ============================================================
   Rabatt-Label Redesign
   ============================================================ */

.labelpfeil.rabatt {
    bottom: 12px !important;
    right: 0 !important;
}

.labelpfeil.rabatt .arrow {
    border-top: 15px solid transparent !important;
    border-bottom: 15px solid transparent !important;
    border-right: 8px solid var(--bs-blue, #00446a) !important;
}

.labelpfeil.rabatt .labelcontent {
    background: var(--bs-blue, #00446a) !important;
    color: #FFFFFF !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    width: auto !important;
    min-width: 52px !important;
    padding: 0 12px !important;
    line-height: 30px !important;
    text-align: center;
    border-radius: 0 4px 4px 0;
}

.labelpfeil.rabatt .labelcontent::before {
    content: '-';
}

.labelpfeil.rabatt .labelcontent::after {
    content: '%';
}

.labelpfeil.rabatt .labelcontent.label-sale {
    background: #ec6608 !important;
}
.labelpfeil.rabatt .labelcontent.label-sale ~ .arrow,
.labelpfeil.rabatt.label-sale .arrow,
.labelpfeil.rabatt .labelcontent.label-aktion ~ .arrow,
.labelpfeil.rabatt .labelcontent.label-aktion + .arrow {
    border-right-color: #ec6608 !important;
}
.labelpfeil.rabatt .labelcontent.label-aktion {
    background: #ec6608 !important;
}

/* ============================================================
   HOMEPAGE – Unsere Highlights (Mosaik Grid)
   Layout: hero left | category-card + 3 tiles right
   ============================================================ */
.bs-highlights {
    width: 100%;
    max-width: 100%;
    margin-top: 48px;
    padding: 0;
    box-sizing: border-box;
}
.bs-highlights__heading {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    text-align: left;
    margin: 0 auto 24px;
    max-width: 1440px;
    letter-spacing: 0.3px;
}

/* ---- Mosaic Grid: gemeinsame Basis; Desktop-Layout per Modifikator (Anzahl Zusatz-Produkte) ---- */
.bs-highlights__mosaic {
    display: grid;
    gap: 12px;
    max-width: 1440px;
    margin: 0 auto;
    align-items: stretch;
}

@media (min-width: 1200px) {
    /* Volles „Puzzle“ wie bisher — nur sinnvoll mit 3 Zusatz-Produkten (sonst leere Rasterzellen) */
    .bs-highlights__mosaic--others-3 {
        grid-template-columns: 5fr 3fr 4fr;
        /* Zeile 3/4: etwas Fläche von oben nach unten schieben (Held flacher, Burgbad höher)
         * ohne die Mittelspalte zu verzerren (Kategorie-Kachel + tile--3 bleiben zusammen 4fr + 4fr). */
        grid-template-rows: 3fr 1fr 0.8fr 3.2fr;
        height: 700px;
    }
    .bs-highlights__mosaic--others-3 .bs-highlights__hero {
        grid-column: 1 / 2;
        grid-row: 1 / 5;
    }
    .bs-highlights__mosaic--others-3 .bs-highlights__category-card {
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }
    .bs-highlights__mosaic--others-3 .bs-highlights__tile--2 {
        grid-column: 3 / 4;
        grid-row: 1 / 4;
    }
    .bs-highlights__mosaic--others-3 .bs-highlights__tile--3 {
        grid-column: 2 / 3;
        grid-row: 3 / 5;
    }
    .bs-highlights__mosaic--others-3 .bs-highlights__tile--4 {
        grid-column: 3 / 4;
        grid-row: 4 / 5;
    }

    /* Zwei Zusatz-Produkte: gleiche Zeilenhöhen, untere Zeile eine breite Kachel */
    .bs-highlights__mosaic--others-2 {
        grid-template-columns: 5fr 3fr 4fr;
        grid-template-rows: 1fr 1fr;
        height: 640px;
    }
    .bs-highlights__mosaic--others-2 .bs-highlights__hero {
        grid-column: 1 / 2;
        grid-row: 1 / 3;
    }
    .bs-highlights__mosaic--others-2 .bs-highlights__category-card {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .bs-highlights__mosaic--others-2 .bs-highlights__tile--2 {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }
    .bs-highlights__mosaic--others-2 .bs-highlights__tile--3 {
        grid-column: 2 / 4;
        grid-row: 2 / 3;
    }

    /* Ein Zusatzprodukt (aktueller Shop-Zustand): eine Zeile — Kategorie und Kachel bündig neben Hero */
    .bs-highlights__mosaic--others-1 {
        grid-template-columns: 5fr 3fr 4fr;
        grid-template-rows: 1fr;
        height: min(520px, 52vw);
        max-height: 560px;
    }
    .bs-highlights__mosaic--others-1 .bs-highlights__hero {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .bs-highlights__mosaic--others-1 .bs-highlights__category-card {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
    .bs-highlights__mosaic--others-1 .bs-highlights__tile--2 {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }

    /* Nur Hero + Kategorie-Karte */
    .bs-highlights__mosaic--others-0 {
        grid-template-columns: 1.4fr 1fr;
        grid-template-rows: 1fr;
        height: min(480px, 48vw);
        max-height: 520px;
    }
    .bs-highlights__mosaic--others-0 .bs-highlights__hero {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .bs-highlights__mosaic--others-0 .bs-highlights__category-card {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
}

/* ---- Hero (large left) ---- */
.bs-highlights__hero {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    text-decoration: none !important;
    background: #f0f6fa;
    border: 1px solid rgba(74, 104, 134, 0.12);
}
/* Hero-Bild zwangsweise an die Hero-Container-Box binden.
   Hintergrund: customdesign-responsive.css Z. 24-27 setzt im Media-Block
   `@media (max-width: 1199px)` einen globalen `img { max-width: 100%
   !important; height: auto !important }` als Mobile+Tablet-Reset gegen
   Layout-Sprenger. Dadurch wird unsere lokale `height: 100%`-Regel mit
   niedrigerer Spezifitaet ueberstimmt: der Browser nutzt die intrinsic
   aspect ratio aus den HTML-Attributen `width="600" height="600"` an
   `[Solutioo_CustomDesign]/view/frontend/templates/startseite/highlights.
   phtml` Z. 31-32 und rendert die img-Box als 1:1-Quadrat (Beobachtung
   19.05.2026 iPhone 12 Pro: `img.bs-highlights__hero-img 348x348` in
   einem 348x300 Container — die untere 48 px-Bandbreite wird durch
   `overflow: hidden` der `.bs-highlights__hero` weggeschnitten, das
   sieht visuell aus wie „oben mittig").
   Loesung: img absolut auf die Hero-Box pinnen mit !important auf
   position/inset/width/height, damit es Specificity-maessig gegen den
   globalen Reset gewinnt. `.bs-highlights__hero` hat bereits
   `position: relative` (Z. 7161-7168), `inset: 0` bestimmt jetzt die
   Hoehe; `object-position: center center` zentriert vertikal+horizontal
   — auf allen Endgeraeten. */
.bs-highlights__hero-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: transform 0.4s ease;
}
.bs-highlights__hero:hover .bs-highlights__hero-img {
    transform: scale(1.04);
}
.bs-highlights__hero-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 28px;
    /* Stärkerer Navy-Verlauf für lesbare weiße Typo auf hellen Produktmotiven */
    background: linear-gradient(
        0deg,
        rgba(0, 68, 106, 0.94) 0%,
        rgba(0, 68, 106, 0.72) 42%,
        rgba(0, 68, 106, 0.28) 72%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.bs-highlights__hero-name {
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.bs-highlights__hero-prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.bs-highlights__hero-prices .bs-highlights__price {
    color: #fff;
    font-size: 22px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.bs-highlights__hero-prices .bs-highlights__old-price {
    color: rgba(255,255,255,0.7);
}

/* ---- Category promo card (blue) ---- */
.bs-highlights__category-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 32px 28px;
    background: var(--bs-blue, #00446a);
    border-radius: 16px;
    text-decoration: none !important;
    transition: background 0.25s ease;
    gap: 12px;
}
.bs-highlights__category-card:hover {
    background: #4a6886;
}
.bs-highlights__cat-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.bs-highlights__cat-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
}
.bs-highlights__cat-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.5);
    border-radius: 50px;
    padding: 10px 20px;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.bs-highlights__category-card:hover .bs-highlights__cat-cta {
    border-color: #fff;
    background: #fff;
    color: var(--bs-blue, #00446a);
}
.bs-highlights__category-card:hover .bs-highlights__cat-cta-icon {
    color: var(--bs-blue, #00446a);
}
.bs-highlights__cat-cta-icon {
    font-size: 18px;
    line-height: 1;
}

/* ---- Product tiles (right side, fill container) ---- */
.bs-highlights__tile {
    display: block;
    position: relative;
    text-decoration: none !important;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(74, 104, 134, 0.12);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.bs-highlights__tile:hover {
    box-shadow: 0 8px 28px rgba(0, 68, 106, 0.12);
    transform: translateY(-3px);
}
.bs-highlights__tile-img-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #f0f6fa;
}
/* Tile-Bild zwangsweise an .bs-highlights__tile-img-wrap binden (gleicher
   Grund wie bei .bs-highlights__hero-img oben — customdesign-responsive.css
   Z. 24-27 setzt einen globalen `img { height: auto !important }`-Reset auf
   Mobile+Tablet, der unsere `height: 100%`-Regel ohne !important ausser
   Gefecht setzt). Wrap ist bereits `position: absolute; inset: 0`, hier
   wird das img seinerseits absolut an den Wrap gepinnt — mit !important
   gegen den globalen Reset. So ist die Bild-Box exakt Wrap-gross (nicht
   das durch `width="600" height="600"` aufgespannte 1:1-Quadrat) und
   `object-position: center center` zentriert vertikal+horizontal. */
.bs-highlights__tile-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.3s ease;
}
.bs-highlights__tile:hover .bs-highlights__tile-img {
    transform: scale(1.04);
}
.bs-highlights__tile-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 18px 20px;
    background: linear-gradient(
        0deg,
        rgba(0, 68, 106, 0.94) 0%,
        rgba(0, 68, 106, 0.72) 42%,
        rgba(0, 68, 106, 0.28) 72%,
        transparent 100%
    );
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 2;
}
.bs-highlights__tile-name {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bs-highlights__tile-prices {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.bs-highlights__tile-prices .bs-highlights__price {
    color: #fff;
    font-size: 17px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.bs-highlights__tile-prices .bs-highlights__old-price {
    color: rgba(255,255,255,0.7);
}

/* ---- Shared price styles ---- */
.bs-highlights__badge {
    position: absolute;
    top: 12px;
    right: 0;
    background: var(--bs-blue, #00446a);
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 4px 0 0 4px;
    line-height: 1.4;
    z-index: 2;
}
.bs-highlights__price {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
}
.bs-highlights__old-price {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #4a6886;
    text-decoration: line-through;
}



/* ============================================================
   Product Badge Pills — Kategorie/PLP & Suche: nur bei Hover-Karte im Textbereich über dem Titel.
   Inaktive Karte: wie zuvor oben mittig auf dem Bild (.product-item.bs-badge-pills .bs-product-badges).
   (Teaser/Slider behalten absolute Platzierung über .product-item.bs-badge-pills)
   ============================================================ */
.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 {
    /* !important: globales .product-item.bs-badge-pills .bs-product-badges (Teaser) ist position:absolute */
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start !important;
    align-items: center;
    z-index: auto;
    padding: 0;
    margin: 0 0 8px 0;
    pointer-events: none;
    width: 100%;
    box-sizing: border-box;
}
.customdesign-catv2 .product-item.hover .bs-hover-info-col .bs-config-hint + .bs-product-badges {
    margin-top: 2px;
}
.customdesign-catv2 .product-item.hover .bs-hover-info-col .bs-product-badges .bs-badge,
.customdesign-catv2 .product-item.hover .product-item-info.main-data > .bs-product-badges .bs-badge {
    pointer-events: auto;
}
.customdesign-catv2 .product-item .bs-badge {
    display: inline-block;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1.3;
    border-radius: 999px;
    pointer-events: auto;
}
.customdesign-catv2 .product-item .bs-badge--light {
    background: #fff;
    color: var(--bs-blue, #00446a);
    border: 1px solid #ddd;
}
.customdesign-catv2 .product-item .bs-badge--dark {
    background: var(--bs-blue, #00446a);
    color: #fff;
}
.customdesign-catv2 .product-item .bs-badge--accent {
    background: var(--bs-accent-color, #ec6608);
    color: #fff;
}

/* Hide old overlay elements when pill badges are active */
.customdesign-catv2 .product-item.bs-badge-pills .productlabel {
    display: none !important;
}
.customdesign-catv2 .product-item.bs-badge-pills .main-data::before {
    display: none !important;
}
.customdesign-catv2 .product-item.bs-badge-pills .relative .rabatt,
.customdesign-catv2 .product-item.bs-badge-pills .relative .label-promo {
    display: none !important;
}
.customdesign-catv2 .product-item.bs-badge-pills.sonderkennz {
    border-color: rgba(74, 104, 134, 0.2) !important;
}

/* Badge mobile sizes handled in @media (max-width: 767px) block above */

/* ============================================================
   Rechte Schubladen: Kopf (Chevron + Label), Typo, Telefon-Icon
   Telefon (.ps-*), Konto (.cs-*), Merkliste (.ws-*), Mini-Warenkorb
   ============================================================ */
.ps-head,
.cs-head,
.ws-h {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 52px;
    padding: 14px 20px;
    box-sizing: border-box;
}

.ps-head-arrow,
.cs-head-arrow,
.ws-ha {
    font-size: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
}
.ps-head-arrow::after,
.cs-head-arrow::after,
.ws-ha::after {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-left: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg);
    margin-left: 3px;
}

.ps-head-txt,
.cs-head-txt,
.ws-ht {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.cs-head .cs-head-arrow,
.cs-head .cs-head-txt,
.ws-h .ws-ha,
.ws-h .ws-ht {
    color: #fff;
}

/* Schubladen-Kopf „Schließen“ — einheitlich #00446a wie Kundenkonto (nicht var/button-Default). */
html body div.cs-head,
html body .cs-head {
    background: #00446a !important;
    background-color: #00446a !important;
    color: #fff !important;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    width: 100%;
    text-align: left;
    margin: 0;
}
html body div.cs-head:hover,
html body .cs-head:hover {
    background: rgba(0, 68, 106, 0.88) !important;
    background-color: rgba(0, 68, 106, 0.88) !important;
}

/* Drawer-Köpfe auf dunklem/orangem Grund — Ausnahme .bs-kb-focus-invert (s. globaler Block oben) */

body .ws-sb .ws-tc {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #4a6886;
}

/* Telefon: Icon-Kreis (etwas kompakter als Konto-80er-Referenz) */
.ps-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(0, 68, 106, 0.09);
    box-shadow: none;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.ps-icon-wrap svg {
    stroke: var(--bs-blue, #00446a);
    fill: none;
}

.ps-hours-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-blue, #00446a);
    margin: 0 0 14px;
}

.ps-cb-title {
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--bs-blue, #00446a);
    margin: 0 0 16px;
}

.ps-hours-title svg,
.ps-cb-title svg {
    stroke: var(--bs-blue, #00446a);
    flex-shrink: 0;
}

body .ws-sb .ws-fb,
body .ws-sb .ws-login a,
body .ws-sb .ws-ab--cart {
    border-radius: 999px !important;
}

/* Merklisten-Einschub: Produkt-Thumbnails = Mini-Warenkorb (.minicart-item .product-image-photo) — auch wenn pub/static noch alte wishlist-sidebar.js ausliefert */
body .ws-sb .ws-ig {
    border: 1px solid #8eb4cc !important;
    border-radius: 8px !important;
}

/* Merklisten-Einschub: Überschrift „Merkliste“ — Montserrat 20px, fett */
body .ws-sb .ws-tl {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}

/* Merklisten-Einschub: Fußzeile wie Konto-/Warenkorb-Einschub (.cs-footer / .bs-cart-footer) */
body .ws-sb .ws-f {
    background: #fafbfc !important;
    border-top: 1px solid #edf0f3 !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
}

body .ws-sb .ws-ftax {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
}

/* Merklisten-Einschub: Artikelname = Mini-Warenkorb (.minicart-item .product-item-name) */
body .ws-sb .ws-in,
body .ws-sb .ws-in a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
}
body .ws-sb .ws-in a:hover {
    color: var(--bs-accent-color, #ec6608) !important;
    text-decoration: none !important;
}

/* Merklisten-Einschub: Preis — Montserrat 18px, fett */
body .ws-sb .ws-ip {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #4a6886 !important;
}
body .ws-sb .ws-ip .price,
body .ws-sb .ws-ip .price-wrapper .price,
body .ws-sb .ws-ip .price-container .price,
body .ws-sb .ws-ip .price-box .price,
body .ws-sb .ws-ip .minimal-price-link .price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #4a6886 !important;
}

/* Merklisten-Einschub: „In den Warenkorb“ — kein Wachsen/Verschieben auf Hover (globale Button-/CTA-Transforms) */
body .ws-sb button.ws-ab.ws-ab--cart,
body .ws-sb button.ws-ab.ws-ab--cart:hover,
body .ws-sb button.ws-ab.ws-ab--cart:focus,
body .ws-sb button.ws-ab.ws-ab--cart:focus-visible,
body .ws-sb button.ws-ab.ws-ab--cart:active {
    transform: none !important;
    -webkit-transform: none !important;
}
body .ws-sb button.ws-ab.ws-ab--cart {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
/* Maus-Hover: nur eindunkeln, KEIN Fokus-Ring (sonst doppelter Rand um den Button) */
body .ws-sb button.ws-ab.ws-ab--cart:hover {
    background: #003556 !important;
    border-color: #003556 !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: 0 3px 12px rgba(0, 68, 106, 0.22) !important;
}
/* Nur echte Tastatur-Navigation bekommt den Accessibility-Fokus-Ring */
body .ws-sb button.ws-ab.ws-ab--cart:focus-visible {
    background: #003556 !important;
    border-color: #003556 !important;
    color: #fff !important;
    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: inset 0 0 0 var(--bs-kb-focus-inset-white, 2px) #ffffff, 0 3px 12px rgba(0, 68, 106, 0.22) !important;
}

/* Merklisten-Einschub: Löschen — Hover hellroter Kreis-Hintergrund (kein Blaugrau) */
body .ws-sb button.ws-ab.ws-ab--del {
    transform: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    color: #999 !important;
    border: none !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: color 0.15s ease, background-color 0.15s ease !important;
}
body .ws-sb button.ws-ab.ws-ab--del:hover,
body .ws-sb button.ws-ab.ws-ab--del:focus,
body .ws-sb button.ws-ab.ws-ab--del:focus-visible {
    transform: none !important;
    color: #c1121f !important;
    background: rgba(193, 18, 31, 0.12) !important;
    background-color: rgba(193, 18, 31, 0.12) !important;
    outline: none !important;
    box-shadow: none !important;
}
body .ws-sb button.ws-ab.ws-ab--del:active {
    color: #a00 !important;
    background: rgba(193, 18, 31, 0.18) !important;
    background-color: rgba(193, 18, 31, 0.18) !important;
}

/* Merklisten-Einschub: Bearbeiten (Konfigurations-Link) — gleiche graue Icon-Farbe wie Löschen, kein Theme/Browser-:visited */
body .ws-sb a.ws-ab--edit,
body .ws-sb a.ws-ab--edit:visited {
    color: #999 !important;
    -webkit-text-fill-color: #999 !important;
    text-decoration: none !important;
}
body .ws-sb a.ws-ab--edit:hover,
body .ws-sb a.ws-ab--edit:focus-visible {
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
    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;
}

/* Konto-Sidebar: Section-Labels & Untertitel (überschreibt injiziertes CSS) */
body .cs-sb .cs-lbl {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #1e293b !important;
    padding: 16px 24px 8px !important;
}

body .cs-sb .cs-txt-sub {
    font-size: 13px !important;
    color: #475569 !important;
    font-weight: 500 !important;
}

body .cs-sb .cs-benefits-title {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
}

body .cs-sb .cs-greet,
body .cs-sb .cs-guest h3 {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}

body .cs-sb .cs-btn {
    border-radius: 999px !important;
}

/* Konto-Sidebar Gast: Primärbutton — :link/:visited/WebKit-Fill, sonst blaue Linkfarbe auf blauem Button */
body .cs-sb .cs-btn--primary,
body .cs-sb .cs-btn--primary:link,
body .cs-sb .cs-btn--primary:visited,
body .cs-sb .cs-btn--primary:focus {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: var(--bs-blue, #00446a) !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
}

body .cs-sb .cs-btn--primary:hover,
body .cs-sb .cs-btn--primary:hover:visited {
    color: var(--bs-blue, #00446a) !important;
    -webkit-text-fill-color: var(--bs-blue, #00446a) !important;
    background: #fff !important;
    border-color: var(--bs-blue, #00446a) !important;
}

body .cs-sb .cs-btn--secondary,
body .cs-sb .cs-btn--secondary:link,
body .cs-sb .cs-btn--secondary:visited {
    color: var(--bs-blue, #00446a) !important;
    -webkit-text-fill-color: var(--bs-blue, #00446a) !important;
}

body .cs-sb .cs-benefit-check {
    color: var(--bs-orange, #ee6205) !important;
}

/* Konto-Sidebar: Fußzeile wie Telefonservice (.ps-footer / .ps-footer-text) */
body .cs-sb .cs-footer {
    text-align: center !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
}

body .cs-sb .cs-footer-text {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
}

body .cs-sb .cs-footer-text a,
body .cs-sb .cs-footer-text a:link,
body .cs-sb .cs-footer-text a:visited,
body .cs-sb .cs-footer-text a:active {
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
    text-decoration: none !important;
    border-bottom: 1px solid #00446a !important;
    padding-bottom: 1px !important;
    font-weight: 600 !important;
}

body .cs-sb .cs-footer-text a:hover {
    color: rgba(0, 68, 106, 0.9) !important;
    -webkit-text-fill-color: rgba(0, 68, 106, 0.9) !important;
    text-decoration: none !important;
    border-bottom-color: rgba(0, 68, 106, 0.9) !important;
}

/* Mini-Warenkorb: Kopfzeile wie Schubladen */
.page-header .minicart-wrapper .block-minicart #minicart-content-wrapper .block-content {
    padding-top: 0;
}

.page-header .minicart-wrapper .block-minicart #btn-minicart-close.action.close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    width: calc(100% + 20px);
    max-width: none;
    margin: -10px -10px 14px -10px;
    padding: 14px 18px;
    box-sizing: border-box;
    background: var(--bs-blue, #00446a);
    color: #fff !important;
    border: none;
    border-radius: 0;
    cursor: pointer;
    justify-content: flex-start;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}

.page-header .minicart-wrapper .block-minicart #btn-minicart-close.action.close::before,
.page-header .minicart-wrapper .block-minicart #btn-minicart-close.action.close:before {
    display: none !important;
    content: none !important;
}

.page-header .minicart-wrapper .block-minicart #btn-minicart-close .bs-drawer-head__chev {
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
}
.page-header .minicart-wrapper .block-minicart #btn-minicart-close .bs-drawer-head__chev::after {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-left: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
    transform: rotate(45deg);
    margin-left: 3px;
}

.page-header .minicart-wrapper .block-minicart #btn-minicart-close .bs-drawer-head__label {
    color: #fff;
}

.page-header .minicart-wrapper .block-minicart .subtitle {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #1e293b !important;
    border-bottom: none !important;
    display: block !important;
    margin: 0 0 12px !important;
}

.page-header .minicart-wrapper .block-minicart .block-content .action.primary,
.page-header .minicart-wrapper .block-minicart .block-content .action.primary.checkout,
.page-header .minicart-wrapper .block-minicart .block-content .top-cart-btn {
    border-radius: 999px !important;
}

/* ============================================================
   Header Icon Counter Badges: filled circles, white text
   (Position: Theme Magento_Checkout .minicart-wrapper .counter.qty — nicht überschreiben)
   ============================================================ */
.page-header .minicart-wrapper .counter.qty,
.page-header .counter.qty {
    background: var(--bs-accent-color, #ec6608) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}
.page-header .minicart-wrapper .counter.qty .counter-number,
.page-header .counter.qty .counter-number {
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}
.page-header .minicart-wrapper .counter.qty .counter-label {
    display: none !important;
}
.page-header .minicart-wrapper .counter.qty.empty,
.page-header .counter.qty.empty {
    display: none !important;
}

/* ============================================================
   Mini-Warenkorb: Komplett-Redesign (Blautöne + Orange, kein Grau)
   ============================================================ */

/* --- Sidebar container: clean white, no gray border --- */
.page-header .minicart-wrapper .block-minicart {
    border: none !important;
    box-shadow: 0 8px 32px rgba(0, 68, 106, 0.15) !important;
    border-radius: 0 !important;
    background: #fff !important;
    padding: 0 !important;
}
.page-header .minicart-wrapper .block-minicart #minicart-content-wrapper .block-content {
    padding: 0 20px 20px !important;
    background: #fff !important;
}

/* --- Header bar (Weiter einkaufen): already styled, ensure it's clean --- */
.page-header .minicart-wrapper .block-minicart #btn-minicart-close.action.close {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 16px 0 !important;
    border-radius: 0 !important;
}

/* --- "Warenkorb" heading + item count --- */
.page-header .minicart-wrapper .block-minicart .subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--bs-blue, #00446a) !important;
    border-bottom: none !important;
    display: block !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
}

/* Items total count (e.g. "1 Artikel") */
.page-header .minicart-wrapper .block-minicart .items-total {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    margin-bottom: 8px !important;
}

/* --- Item list wrapper: blue border instead of gray --- */
.page-header .minicart-wrapper .minicart-items-wrapper {
    border-bottom: 1px solid var(--bs-blue-light, #dce8f0) !important;
    margin-bottom: 14px !important;
    scrollbar-width: none !important;
}

/* --- Individual items: blue separator, not gray --- */
.page-header .minicart-wrapper .minicart-item {
    padding: 14px 0 !important;
    border-bottom-color: var(--bs-blue-light, #dce8f0) !important;
}
.page-header .minicart-wrapper .minicart-item:last-child {
    border-bottom: none !important;
}

/* Product image: rounded, sichtbarere blaugraue Kontur (Einschub / CI) */
.page-header .minicart-wrapper .minicart-item .product-image-photo {
    border: 1px solid #8eb4cc !important;
    border-radius: 8px !important;
}

/* Product name: dark blue, Montserrat */
.page-header .minicart-wrapper .minicart-item .product-item-name,
.page-header .minicart-wrapper .minicart-item .product-item-name a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
}
.page-header .minicart-wrapper .minicart-item .product-item-name a:hover {
    color: var(--bs-accent-color, #ec6608) !important;
}

/* Art.-Nr. über ausklappbarem „Details“ (Konfigurierbare) */
.page-header .minicart-wrapper .minicart-item .minicart-item-sku {
    font-family: 'Quicksand', 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #6b8fa8 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    line-height: 1.45 !important;
}

/* SKU / Art.-Nr. line: blue-gray instead of gray */
.page-header .minicart-wrapper .minicart-item .product-item-details .product.options .option-label {
    color: #4a6886 !important;
}
.page-header .minicart-wrapper .minicart-item .product-item-details .product.options .option-value {
    color: var(--bs-blue, #00446a) !important;
}
.page-header .minicart-wrapper .minicart-item .product-item-details .product.options .option-image-minicart {
    border-color: var(--bs-blue-light, #dce8f0) !important;
}

/* --- Prices: DARK blue only, never light blue --- */
.page-header .minicart-wrapper .block-minicart .price,
.page-header .minicart-wrapper .block-minicart .price-wrapper,
.page-header .minicart-wrapper .block-minicart .minicart-price .price,
.page-header .minicart-wrapper .block-minicart .product-item-pricing .price,
.page-header .minicart-wrapper .block-minicart .price-container .price {
    color: var(--bs-blue, #00446a) !important;
    font-weight: 700 !important;
}

/* --- Subtotal: dark blue, prominent --- */
.page-header .minicart-wrapper .block-minicart .subtotal {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 10px 0 !important;
    padding: 10px 0 !important;
    border-top: 1px solid var(--bs-blue-light, #dce8f0) !important;
}
.page-header .minicart-wrapper .block-minicart .subtotal .label {
    color: var(--bs-blue, #00446a) !important;
    font-weight: 600 !important;
}
.page-header .minicart-wrapper .block-minicart .subtotal .price {
    color: var(--bs-blue, #00446a) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Tax details */
.page-header .minicart-wrapper .block-minicart .subtotal .price-including-tax,
.page-header .minicart-wrapper .block-minicart .subtotal .weee {
    color: var(--bs-blue-gray, #6b8fa8) !important;
    font-size: 12px !important;
}

/* --- Quantity selector: weiße Pille, feine Kontur (heller Hintergrund im Einschub) --- */
/*
 * Optik analog zur PDP-Pricebox `.productqty-qty .moreless`:
 * - kein box-shadow (PDP hat keinen)
 * - 1 px Border #8eb4cc (kräftiger als #b0cfe0 / #dce8f0, gut sichtbar auf Weiß)
 * - 32 px Hoehe wie PDP (.moreless { height: 32px })
 */
.page-header .minicart-wrapper .minicart-item .details-qty {
    display: inline-flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    border: 1px solid #8eb4cc !important;
    border-radius: 999px !important;
    background: #fff !important;
    padding: 0 !important;
    min-height: 32px !important;
    height: 32px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
.page-header .minicart-wrapper .minicart-item .details-qty::after {
    content: none !important;
    display: none !important;
}
.page-header .minicart-wrapper .minicart-item .details-qty .label {
    display: none !important;
}
.page-header .minicart-wrapper .minicart-item .details-qty .item-qty {
    flex: 1 1 auto !important;
    min-width: 40px !important;
    max-width: 56px !important;
    width: auto !important;
    min-height: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    color: var(--bs-blue, #00446a) !important;
    text-align: center !important;
    border: none !important;
    background: transparent !important;
    padding: 0 4px !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.page-header .minicart-wrapper .minicart-item .details-qty .item-qty:focus-visible {
    outline: 2px solid var(--bs-blue, #00446a) !important;
    outline-offset: -2px !important;
}
.page-header .minicart-wrapper .minicart-item .details-qty button,
.page-header .minicart-wrapper .minicart-item .details-qty .qty-button,
.page-header .minicart-wrapper .minicart-item .details-qty [data-role="decrease-qty"],
.page-header .minicart-wrapper .minicart-item .details-qty [data-role="increase-qty"] {
    width: 34px !important;
    min-width: 34px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    border-radius: 0 !important;
}
/*
 * Decrease default: hellblau wie PDP-Pricebox `.qtysymbol.inactive` (#b0cfe0)
 * statt halbtransparentes Dunkelblau (rgba(0,68,106,0.42), entsaettigt).
 */
.page-header .minicart-wrapper .minicart-item .details-qty [data-role="decrease-qty"],
.page-header .minicart-wrapper .minicart-item .details-qty .qty-decrease,
.page-header .minicart-wrapper .minicart-item .details-qty button:first-of-type {
    color: #b0cfe0 !important;
}
.page-header .minicart-wrapper .minicart-item .details-qty button:hover,
.page-header .minicart-wrapper .minicart-item .details-qty .qty-button:hover,
.page-header .minicart-wrapper .minicart-item .details-qty [data-role="decrease-qty"]:hover,
.page-header .minicart-wrapper .minicart-item .details-qty [data-role="increase-qty"]:hover {
    background: rgba(0, 68, 106, 0.06) !important;
    color: var(--bs-blue, #00446a) !important;
}
.page-header .minicart-wrapper .minicart-item .details-qty [data-role="decrease-qty"]:hover {
    color: var(--bs-blue, #00446a) !important;
}

/* --- Remove item (X): dark blue circle --- */
.page-header .minicart-wrapper .minicart-item .product.actions .action.delete {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--bs-blue, #00446a) !important;
    background: transparent !important;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0 !important;
}
.page-header .minicart-wrapper .minicart-item .product.actions .action.delete span {
    font-size: 0 !important;
    line-height: 0 !important;
}
.page-header .minicart-wrapper .minicart-item .product.actions .action.delete span::before {
    font-size: 14px !important;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1 !important;
}
.page-header .minicart-wrapper .minicart-item .product.actions .action.delete::before,
.page-header .minicart-wrapper .minicart-item .product.actions .action.delete::after {
    color: var(--bs-blue, #00446a) !important;
}
.page-header .minicart-wrapper .minicart-item .product.actions .action.delete:hover {
    background: var(--bs-blue, #00446a) !important;
    border-color: var(--bs-blue, #00446a) !important;
}
.page-header .minicart-wrapper .minicart-item .product.actions .action.delete:hover span::before,
.page-header .minicart-wrapper .minicart-item .product.actions .action.delete:hover::before {
    color: #fff !important;
}

/* --- Buttons: Pill-shape, proper colors --- */

/* "Zur Kasse" primary CTA: Orange pill */
.page-header .minicart-wrapper .block-minicart #top-cart-btn-checkout,
.page-header .minicart-wrapper .block-minicart .action.primary.checkout {
    border-radius: 999px !important;
    background: var(--bs-accent-color, #ec6608) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(236, 102, 8, 0.25) !important;
    text-transform: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 10px !important;
}
.page-header .minicart-wrapper .block-minicart #top-cart-btn-checkout span,
.page-header .minicart-wrapper .block-minicart .action.primary.checkout span {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    color: #fff !important;
    cursor: inherit !important;
}
.page-header .minicart-wrapper .block-minicart #top-cart-btn-checkout:hover,
.page-header .minicart-wrapper .block-minicart .action.primary.checkout:hover {
    background: var(--bs-accent-color-hover, #C96000) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(236, 102, 8, 0.35) !important;
}
.page-header .minicart-wrapper .block-minicart #top-cart-btn-checkout:hover span,
.page-header .minicart-wrapper .block-minicart .action.primary.checkout:hover span {
    color: #fff !important;
    background: transparent !important;
}

/* "Warenkorb anzeigen" / "Proceed to Cart": Dark blue outlined pill */
.page-header .minicart-wrapper .block-minicart #top-cart-btn-cart {
    border-radius: 999px !important;
    background: transparent !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    color: var(--bs-blue, #00446a) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    text-transform: none !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    box-shadow: none !important;
}
.page-header .minicart-wrapper .block-minicart #top-cart-btn-cart:hover {
    background: var(--bs-blue, #00446a) !important;
    color: #fff !important;
}

/* Button container: full width stacking */
.page-header .minicart-wrapper .block-minicart .top-cart-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin-top: 8px !important;
}
.page-header .minicart-wrapper .block-minicart .top-cart-buttons .actions {
    display: block !important;
    width: 100% !important;
}
.page-header .minicart-wrapper .block-minicart .top-cart-buttons .actions .secondary,
.page-header .minicart-wrapper .block-minicart .top-cart-buttons .actions .primary {
    display: block !important;
    width: 100% !important;
}
.page-header .minicart-wrapper .block-minicart .top-cart-buttons .actions .secondary .action.viewcart {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
}
.page-header .minicart-wrapper .block-minicart .top-cart-buttons .top-cart-btn {
    margin: 0 !important;
}

/* PayPal button: pill shape + volle Breite wie andere Minicart-CTAs */
.page-header .minicart-wrapper .block-minicart .paypal-button,
.page-header .minicart-wrapper .block-minicart .zoid-component-frame {
    border-radius: 999px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.page-header .minicart-wrapper .block-minicart .minicart-widgets iframe {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --- "Preise inkl. MwSt" note: blue-gray, not gray --- */
.page-header .minicart-wrapper .block-minicart .subtotal + *,
.page-header .minicart-wrapper .block-minicart .price-including-tax .label,
.page-header .minicart-wrapper .block-minicart .msrp .map-old-price {
    color: var(--bs-blue-gray, #6b8fa8) !important;
}

/* --- No light gray anywhere: override remaining gray borders/backgrounds --- */
.page-header .minicart-wrapper .block-minicart .minicart-items {
    background: #fff !important;
}

/* Options toggle: dark blue */
.page-header .minicart-wrapper .minicart-item .product.options .toggle {
    color: var(--bs-blue, #00446a) !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}
.page-header .minicart-wrapper .minicart-item .product.options .toggle::after {
    color: var(--bs-blue, #00446a) !important;
}

/* Update button (hidden, but style just in case) */
.page-header .minicart-wrapper .minicart-item .update-cart-item {
    border-radius: 999px !important;
    background: var(--bs-blue-light, #f0f6fa) !important;
    color: var(--bs-blue, #00446a) !important;
    border: 1px solid var(--bs-blue-light, #dce8f0) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 14px !important;
}

/* Empty cart message */
.page-header .minicart-wrapper .block-minicart .subtitle.empty {
    font-size: 15px !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
    text-align: center !important;
    padding: 20px 0 !important;
}

/* Item options inline styles override (option-label was inline gray) */
.page-header .minicart-wrapper .minicart-item .option-item .option-label {
    color: #4a6886 !important;
}
.page-header .minicart-wrapper .minicart-item .option-item .option-value {
    color: var(--bs-blue, #00446a) !important;
}
.page-header .minicart-wrapper .minicart-item .option-image-minicart {
    border-color: var(--bs-blue-light, #dce8f0) !important;
}

/* ============================================================
   CartPopup Sidebar: Badshop Design-Sprache
   ============================================================ */

/* --- Sidebar container --- */
.bs-cart-sidebar {
    font-family: 'Montserrat', 'Quicksand', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    border-radius: 0 !important;
    box-shadow: -6px 0 36px rgba(0, 68, 106, 0.18) !important;
}

/* --- Header (Weiter einkaufen) --- */
.bs-cart-hdr {
    background: var(--bs-blue, #00446a) !important;
    padding: 16px 20px !important;
    gap: 10px !important;
    transition: background 0.2s ease !important;
}
.bs-cart-hdr:hover {
    background: #003355 !important;
}
.bs-cart-hdr-arrow {
    font-size: 20px !important;
    line-height: 1 !important;
}
.bs-cart-hdr-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

/* --- Success banner --- */
.bs-cart-success {
    background: #eaf7ea !important;
    border-bottom-color: #c8e6c9 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2d6a2e !important;
}

/* --- Title bar --- */
.bs-cart-titlebar {
    border-bottom: 1px solid var(--bs-blue-light, #dce8f0) !important;
    padding: 18px 20px 14px !important;
}
.bs-cart-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}
.bs-cart-count {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
}

/* --- Items list --- */
.bs-cart-items {
    scrollbar-width: none !important;
}
.bs-cart-items::-webkit-scrollbar {
    display: none !important;
}

/* --- Single item --- */
.bs-cart-item {
    padding: 18px 20px !important;
    border-bottom: 1px solid var(--bs-blue-light, #dce8f0) !important;
}
.bs-cart-item:last-child {
    border-bottom: none !important;
}

/* Product image */
.bs-cart-item-img {
    border: 1px solid var(--bs-blue-light, #dce8f0) !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
}

/* Product name */
.bs-cart-item-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1.4 !important;
}
.bs-cart-item-name a {
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
}
.bs-cart-item-name a:hover {
    color: var(--bs-accent-color, #ec6608) !important;
}

/* Injiziertes Markup (sidebar-trigger.js): Klasse .bs-in */
#bs-cart-sidebar .bs-in,
#bs-cart-sidebar .bs-in a {
    font-size: 14px !important;
}

/* Produktname: nicht unter absolut positionierten Entfernen-Button (.bs-id 28px + right 16px) */
#bs-cart-sidebar .bs-ii {
    padding-right: 44px !important;
    box-sizing: border-box !important;
}
#bs-cart-sidebar .bs-in {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/*
 * Warenkorb-Einschub: Tastatur-Fokus
 * .bs-in nutzt overflow:hidden für line-clamp → Outline am <a> wird sonst nur rechts sichtbar.
 * Ring auf den Wrapper (.bs-in:has) legen; beim Fokus kurz ohne Clamp, damit der Name lesbar bleibt.
 */
#bs-cart-sidebar .bs-in a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
#bs-cart-sidebar .bs-in:has(> a: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;
    border-radius: 4px;
    overflow: visible !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
}

/* Entfernen-Button: dekorativer Kreis-Rand + globaler Outline = Doppelrahmen */
#bs-cart-sidebar .bs-id:focus-visible {
    outline: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Mini-Warenkorb (Fallback): gleiche Fokus-Korrekturen */
.page-header .minicart-wrapper .minicart-item .product-item-name a: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;
    border-radius: 4px;
}
.page-header .minicart-wrapper .minicart-item .product.actions .action.delete:focus-visible {
    outline: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Konfiguration im Einschub: „Details (n)“ */
#bs-cart-sidebar .bs-ot {
    font-size: 13px !important;
}

/* Einschub (CartPopup): Produktbild + Mengen-Pille — Kontur #8eb4cc (wie sidebar-trigger.js / CI) */
#bs-cart-sidebar .bs-tc,
#bs-cart-sidebar .bs-sk,
#bs-cart-sidebar .bs-tx,
#bs-cart-sidebar .bs-ql {
    color: var(--bs-blue-gray, #6b8fa8) !important;
}
#bs-cart-sidebar .bs-ig {
    border: 1px solid #8eb4cc !important;
}
#bs-cart-sidebar .bs-qw {
    border: 1px solid #8eb4cc !important;
}
#bs-cart-sidebar .bs-qb--m {
    color: var(--bs-blue-gray, #6b8fa8) !important;
}

/* Mengen-Pille: Fokus als runder Ring am Wrap + Segment-Hintergrund (kein eckiger Outline). */
#bs-cart-sidebar .bs-qw:has(:focus-visible),
#bs-cart-sidebar .bs-cart-qty-wrap:has(:focus-visible) {
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.28) !important;
    border-color: #00446a !important;
}
#bs-cart-sidebar .bs-qb:focus-visible,
#bs-cart-sidebar .bs-qi:focus-visible,
#bs-cart-sidebar .bs-cart-qty-btn:focus-visible,
#bs-cart-sidebar .bs-cart-qty-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: rgba(0, 68, 106, 0.10) !important;
    color: #00446a !important;
}
#bs-cart-sidebar .bs-qb--m:focus-visible,
#bs-cart-sidebar .bs-cart-qty-btn--minus:focus-visible {
    border-radius: 999px 0 0 999px;
}
#bs-cart-sidebar .bs-qb--p:focus-visible,
#bs-cart-sidebar .bs-cart-qty-btn--plus:focus-visible {
    border-radius: 0 999px 999px 0;
}

/* Zeilenpreis + Zwischensumme-Betrag im Warenkorb-Einschub (inkl. formatPrice-.price im strong) */
#bs-cart-sidebar .bs-ip,
#bs-cart-sidebar .bs-ip .price,
#bs-cart-sidebar .bs-ip .price-wrapper .price,
#bs-cart-sidebar .bs-ip .price-container .price {
    color: #4a6886 !important;
}
#bs-cart-sidebar .bs-tr strong,
#bs-cart-sidebar .bs-tr strong .price,
#bs-cart-sidebar .bs-tr strong .price-wrapper .price,
#bs-cart-sidebar .bs-tr strong .price-container .price,
#bs-cart-sidebar .bs-tr strong .price-box .price {
    color: #4a6886 !important;
}

/* Options / SKU */
.bs-cart-item-opts {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
}

/* --- Delete button: circle with X --- */
.bs-cart-item-del {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1.5px solid var(--bs-blue-light, #dce8f0) !important;
    background: #fff !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}
.bs-cart-item-del:hover {
    border-color: var(--bs-blue, #00446a) !important;
    color: var(--bs-blue, #00446a) !important;
    background: var(--bs-blue-light, #f0f6fa) !important;
}

/* --- Quantity (Badshop_CartPopup only): do not set .bs-cart-qty-* here; cart-popup.js
   injectStyles() owns PDP-matched look. This file had !important on those classes and
   overrode #bs-cart-sidebar rules without !important. */

/* --- Item price (Einschub) --- */
.bs-cart-item-price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #4a6886 !important;
}

/* --- Footer --- */
.bs-cart-footer {
    background: #fff !important;
    border-top: 1px solid var(--bs-blue-light, #dce8f0) !important;
}

/* --- Totals row (Betrag im Einschub) --- */
.bs-cart-total-row {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}
.bs-cart-total-row strong {
    font-size: 18px !important;
    color: #4a6886 !important;
    font-weight: 700 !important;
}

/* --- Tax note --- */
.bs-cart-taxnote {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
}

/* --- CTA Buttons: pill-shaped --- */
.bs-cart-btn {
    border-radius: 999px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
    transition: all 0.2s ease !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#bs-cart-sidebar button.bs-bt--pp {
    -webkit-appearance: none !important;
    appearance: none !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    border: 2px solid #ffc439 !important;
    background: #ffc439 !important;
    color: #003087 !important;
    transition: box-shadow 0.15s ease, filter 0.15s ease !important;
}
#bs-cart-sidebar button.bs-bt--pp:hover {
    border-color: #ffc439 !important;
    background: #ffc439 !important;
    color: #003087 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    filter: brightness(0.97) !important;
}
#bs-cart-sidebar button.bs-bt--pp:active {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    filter: brightness(0.93) !important;
}
#bs-cart-sidebar button.bs-bt--pp::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
}

/* Footer-CTAs: ein Fokus-Ring in Marken-Dunkelblau */
#bs-cart-sidebar .bs-bt--go:focus-visible,
#bs-cart-sidebar .bs-bt--pp:focus-visible,
#bs-cart-sidebar .bs-bt--c:focus-visible,
#bs-cart-sidebar a.bs-bt--go:focus-visible,
#bs-cart-sidebar button.bs-bt--pp:focus-visible,
#bs-cart-sidebar a.bs-bt--c:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px #00446a !important;
}

.bs-cart-btn--checkout,
.bs-cart-btn--checkout span {
    color: #fff !important;
}
.bs-cart-btn--checkout {
    background: var(--bs-accent-color, #ec6608) !important;
    border: 2px solid var(--bs-accent-color, #ec6608) !important;
    color: #fff !important;
    font-size: 15px !important;
    padding: 14px 20px !important;
    box-shadow: 0 2px 10px rgba(236, 102, 8, 0.25) !important;
    text-decoration: none !important;
}
.bs-cart-btn--checkout:hover,
.bs-cart-btn--checkout:hover span {
    background: var(--bs-accent-color-hover, #C96000) !important;
    border-color: var(--bs-accent-color-hover, #C96000) !important;
    box-shadow: 0 4px 16px rgba(236, 102, 8, 0.35) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* "Warenkorb anzeigen" — dark blue outlined pill */
.bs-cart-btn--cart {
    background: transparent !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    text-align: center !important;
    border-radius: 999px !important;
    display: block !important;
}
.bs-cart-btn--cart:hover {
    background: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Empty cart */
.bs-cart-empty {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
    font-size: 14px !important;
}

.checkout-cart-index .cart-empty {
    padding-top: 30px !important;
}
/* WCAG 1.4.1: „hier“-Link im leeren Warenkorb nicht nur über Farbe erkennbar */
.checkout-cart-index .cart-empty a {
    text-decoration: underline !important;
}

/* Loading spinner accent */
.bs-cart-spinner {
    border-color: var(--bs-blue-light, #dce8f0) !important;
    border-top-color: var(--bs-blue, #00446a) !important;
}

/* PayPal / Amazon Pay buttons in sidebar: pill + volle Breite wie „Zur Kasse“ */
.bs-cart-footer .zoid-component-frame,
.bs-cart-footer iframe {
    border-radius: 999px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ============================================================
   Warenkorb-Seite: Komplett-Redesign (Badshop Design-Sprache)
   ============================================================ */

/* --- Page heading --- */
.checkout-cart-index .page-title-wrapper .page-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}

/* "Warenkorb (x Artikel)" label */
.checkout-cart-index .cart_item_wrap {
    margin-top: 32px !important;
    margin-bottom: 20px !important;
}
.checkout-cart-index .cart_item_wrap .cart_label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    display: block !important;
}

/* --- Cart item card --- */
.checkout-cart-index .cart-item-info {
    border-bottom: none !important;
}
.checkout-cart-index .cart.table-wrapper .cart-item-info.item-info {
    border: none !important;
    border-radius: 16px !important;
    /* Schatten verstärkt (war 0.08 / 0.04 — auf hellblauem Cart-
       Hintergrund kaum sichtbar). Bleibt dezent, ist aber jetzt ein
       klares optisches Abheben der Karte. */
    box-shadow: 0 4px 16px rgba(0, 68, 106, 0.16), 0 2px 6px rgba(0, 68, 106, 0.10) !important;
    margin-bottom: 20px !important;
    /* Statt overflow: hidden — visible, damit der eigene Schatten nicht
       von kein-overflow-relevantem Box-Layout indirekt versteckt wird
       (border-radius + overflow:hidden erzeugt clipping context). */
    overflow: visible !important;
    /* Gleichmäßiger Card-Innenabstand statt nur padding-top: 10px aus _checkout.less.
       Dadurch hat das Produktbild links denselben Abstand zum Card-Border wie oben. */
    padding: 18px !important;
    /* Fester horizontaler Rhythmus: ca. 40px zwischen Bildspalte und Text / Aktionsspalte */
    column-gap: 40px !important;
    /* Default grid stretch: die Namens-Zelle wird so hoch wie die Aktionsspalte → riesiger Abstand
       zwischen Titel und Artikelnummer. Start = Zeilenhöhe nur nach Inhalt (wie Abstand SKU → Preis). */
    align-items: start !important;
}

/* Einfache WK-Zeilen (nicht konfigurierbar): Solutioo _checkout.less setzt min-height: 230px
   und ein 5-Zeilen-Grid inkl. product-options/display-options — ohne .product_opt_wrap bleiben
   dadurch Leerflächen unter Bild/Preis. Kompakteres Grid + keine Mindesthöhe. */
.checkout-cart-index .cart.table-wrapper .cart-item-info.item-info.cart-item--simple {
    min-height: 0 !important;
    align-content: start;
}

/* < 640px: Basis-Layout (2 Spalten), Zeilen wie Luma/Solutioo ohne leere Option-Zeilen */
@media (max-width: 639px) {
    .checkout-cart-index .cart.table-wrapper .cart-item-info.item-info.cart-item--simple {
        display: grid !important;
        /* auto: Bildspalte nur so breit wie Thumbnail — weniger Weißraum bis zum Text */
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto auto !important;
        grid-template-areas:
            "product-image actiontoolbar"
            "product-image product-name"
            "product-details product-details" !important;
    }
}

/* 640px–767px: kleines Tablet — Details neben Bild; Aktionen rechts neben Name/Details */
@media (min-width: 640px) and (max-width: 767px) {
    .checkout-cart-index .cart.table-wrapper .cart-item-info.item-info.cart-item--simple {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "product-image product-name actiontoolbar"
            "product-image product-details actiontoolbar" !important;
    }
}

/* 768px–1199px: iPad — Feintuning in customdesign-cart.css Block 8b (Aktionen oben rechts, Preis unter SKU) */

/* Desktop >=1200px: schmale Bildspalte (Thumbnail 165px), Text/Mitte flexibel, Aktionen auto
   (war: 2fr 3fr 1fr → Bild-Track ~33 % / ~300px+ — zu viel Leerraum neben dem Bild). */
@media (min-width: 1200px) {
    .checkout-cart-index .cart.table-wrapper .cart-item-info.item-info {
        grid-template-columns: minmax(0, 175px) minmax(0, 1fr) minmax(88px, auto) !important;
    }
    .checkout-cart-index .cart.table-wrapper .cart-item-info.item-info.cart-item--simple {
        display: grid !important;
        grid-template-rows: min-content auto !important;
        grid-template-areas:
            "product-image product-name actiontoolbar"
            "product-image product-details actiontoolbar" !important;
    }
    /* War: margin 5% oben/unten um den Preis — wirkt bei kurzen Zeilen wie uferloser Leerraum */
    .checkout-cart-index .cart.table-wrapper .cart-item-info.item-info.cart-item--simple .product-item-details.right_section .col.subtotal {
        margin: 10px 0 0 !important;
    }
}

/* Product image left-aligned in its grid column (war: text-align center →
           großer Whitespace links vom Bild). So sitzt das Bild bündig am 18px-Card-Padding.
   Wichtig: Die Quell-Regel in `_checkout.less` Z.3349 setzt
   `display: grid; justify-items: center; padding-left: 10px !important;
    padding-right: 10px !important;` — Grid-Items werden also via `justify-items`
   zentriert, NICHT via text-align. Deshalb muessen wir `justify-items: start`
   setzen und beide horizontale Paddings explizit nullen. */
.checkout-cart-index .cart.table-wrapper .col.item.product_image,
.checkout-cart-index .cart-item-info .product_image {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-items: start !important;
    justify-content: start !important;
}

/* Thumbnail max. view.xml cart_page_product_thumbnail — Spalte nicht breiter als nötig */
.checkout-cart-index .cart.table-wrapper .col.item.product_image .product-item-photo,
.checkout-cart-index .cart.table-wrapper .col.item.product_image img.product-image-photo {
    max-width: 165px !important;
    width: 100% !important;
    height: auto !important;
}

/* Produktname bündig mit Artikelnummer/Preis in der Spalte darunter
   (war: margin-left: 10px in _checkout.less → Name ~10px nach rechts versetzt). */
.checkout-cart-index .cart-item-info .product-name-wrapper {
    margin-left: 0 !important;
    max-height: none !important; /* _checkout.less 70px — unnötig mit align-items:start, clippt mehrzeilige Titel */
    overflow: visible !important; /* sonst Fokus-Outline am Inline-Link nur als Strich rechts */
}

/* Artikelnummer, Lieferzeit, Anzahl: 14px, Mittelblau #4a6886 (Labels + Werte + Menge) */
.checkout-cart-index .sku_delivery_qty_wrap {
    font-size: 14px !important;
    color: #4a6886 !important;
    /* Solutioo _checkout.less: margin-top 25px — zu groß vs. Abstand Artikelnummer-Block → Preis (~10px) */
    margin-top: 10px !important;
}
.checkout-cart-index .sku_delivery_qty_wrap .attr_title {
    color: #4a6886 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.checkout-cart-index .sku_delivery_qty_wrap .attr_value {
    color: #4a6886 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.checkout-cart-index .sku_delivery_qty_wrap .qty-item.colwrap {
    color: #4a6886 !important;
    font-size: 14px !important;
}

/* Product image: rounded */
.checkout-cart-index .cart-item-info .product-item-photo img,
.checkout-cart-index .cart-item-info .product-image-photo {
    border-radius: 10px !important;
    border: 1px solid var(--bs-blue-light, #dce8f0) !important;
}

/* Product name: Montserrat, dunkelblau #00446a, 16px */
.checkout-cart-index .product-item-name,
.checkout-cart-index .product-item-name a,
.checkout-cart-index .cart.table-wrapper .product-item-details h2,
.checkout-cart-index .cart.table-wrapper .product-item-details h2 a,
.checkout-cart-index .cart.table-wrapper .product-name-wrapper h2,
.checkout-cart-index .cart.table-wrapper .product-name-wrapper h2 a,
.checkout-cart-index .cart.table-wrapper .product-name-wrapper .product-item-name,
.checkout-cart-index .cart.table-wrapper .product-name-wrapper .product-item-name a {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.checkout-cart-index .product-item-name a:hover,
.checkout-cart-index .cart.table-wrapper .product-item-details h2 a:hover,
.checkout-cart-index .cart.table-wrapper .product-name-wrapper h2 a:hover,
.checkout-cart-index .cart.table-wrapper .product-name-wrapper .product-item-name a:hover {
    color: var(--bs-accent-color, #ec6608) !important;
}

/* Artikelnamen-Fokus: Ring um den Wrapper (Inline-Link + overflow wirkte wie „|“ am Textende). */
.checkout-cart-index .product-name-wrapper .product-item-name a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.checkout-cart-index .product-name-wrapper:has(a:focus-visible) {
    outline: 3px solid #00446a !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
    border-radius: 4px;
}

/* Measure badges: blue pills instead of gray */
.checkout-cart-index .product_attribute_info span.product_attr_col {
    background: var(--bs-blue-light, #f0f6fa) !important;
    color: var(--bs-blue, #00446a) !important;
    border-radius: 6px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif !important;
    margin: 3px 4px 3px 0 !important;
}

/* Price: dark blue */
.checkout-cart-index .col.subtotal .cart-price,
.checkout-cart-index .col.subtotal .cart-price .price {
    color: var(--bs-blue, #00446a) !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Quantity select: pill-shaped, Mittelblau wie SKU/Lieferzeit */
.checkout-cart-index .cart_qty_dropdown {
    border: 1.5px solid var(--bs-blue-light, #dce8f0) !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #4a6886 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 4px 28px 4px 12px !important;
    height: 32px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%234a6886'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px 6px !important;
    outline: none !important;
}
.checkout-cart-index .cart_qty_dropdown:focus,
.checkout-cart-index .cart_qty_dropdown:focus-visible {
    border-color: var(--bs-blue, #00446a) !important;
    outline: 2px solid var(--bs-blue, #00446a) !important;
    outline-offset: 2px !important;
}

/* "Artikel entfernen" link: dunkelblau; Hover nur etwas tieferes Blau (kein Orange) */
.checkout-cart-index .action.action-delete {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
}
.checkout-cart-index .action.action-delete:hover,
.checkout-cart-index .action.action-delete:focus-visible {
    color: #003556 !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* "Bearbeiten" — wie „Entfernen“ / „Merkliste“ (ruhiger Zustand) */
.checkout-cart-index .action.action-edit {
    color: var(--bs-blue, #00446a) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    font-family: 'Montserrat', sans-serif !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
}
.checkout-cart-index .action.action-edit:hover,
.checkout-cart-index .action.action-edit:focus-visible {
    color: #003556 !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Configuration toggle link — Pillshape, blau-weiss Hover (kein orange).
   Detaillierte Hover-/Pseudo-Regeln stehen in customdesign-cart.css, weil
   diese Datei NACH checkout-m.css geladen wird (siehe checkout_cart_index.xml). */
.checkout-cart-index .product_option_info {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Item label (Sale, Aktion, Einzelstück) */
.checkout-cart-index .cart-item-info .itemlabel {
    background: var(--bs-accent-color, #ec6608) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
}

/* --- Bestellübersicht Sidebar --- */
.checkout-cart-index .cart-summary,
.checkout-cart-index .summery_custom_block .cart-summary {
    background: #f0f6fa !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: none !important;
    box-shadow: none !important;
}
/* strong.summary.title ist inline — ohne display:block wirkt margin-bottom nicht */
.checkout-cart-index .cart-summary > .title,
.checkout-cart-index .summery_custom_block .cart-summary > .summary.title {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 0 16px !important;
    padding-bottom: 0 !important;
    line-height: 1.3 !important;
}

/* Totals table */
.checkout-cart-index #cart-totals {
    border-top: none !important;
    margin-top: 0 !important;
}
.checkout-cart-index #cart-totals th,
.checkout-cart-index #cart-totals td {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--bs-blue, #00446a) !important;
    padding: 6px 0 !important;
    border: none !important;
}

/* Katalog-Ersparnis: Abstand zum Titel kommt vom Title-margin; Zeile selbst kompakt */
.checkout-cart-index #cart-totals tr.totals.badshop-uvp-original th.mark,
.checkout-cart-index #cart-totals tr.totals.badshop-uvp-original td.amount,
.checkout-cart-index #cart-totals tr.totals.badshop-uvp-savings th.mark,
.checkout-cart-index #cart-totals tr.totals.badshop-uvp-savings td.amount {
    padding-top: 0 !important;
    padding-bottom: 6px !important;
}

/* Dünne Linie über der Zwischensumme, ohne großen Zusatz-Abstand */
.checkout-cart-index #cart-totals tr.totals.sub th.mark,
.checkout-cart-index #cart-totals tr.totals.sub td.amount {
    border-top: 1px solid var(--bs-blue-light, #dce8f0) !important;
    padding-top: 8px !important;
    line-height: 1.35 !important;
}
.checkout-cart-index #cart-totals tr.totals.sub .mark,
.checkout-cart-index #cart-totals tr.totals.sub .amount .price {
    font-size: 16px !important;
    font-weight: 800 !important;
}
.checkout-cart-index #cart-totals tr.totals.sub {
    line-height: 1.35 !important;
}
.checkout-cart-index #cart-totals .mark {
    font-weight: 600 !important;
    font-size: 14px !important;
}
.checkout-cart-index #cart-totals .amount .price {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: var(--bs-blue, #00446a) !important;
}

/* Gesamtbetrag: Trennlinie darüber (box-shadow, damit border:none nicht greift), stärker hervorgehoben */
body.checkout-cart-index .summery_custom_block #cart-totals table.data.table.totals tr.grand.totals > th.mark,
body.checkout-cart-index .summery_custom_block #cart-totals table.data.table.totals tr.grand.totals > td.amount,
body.checkout-cart-index #cart-totals tr.grand.totals > th.mark,
body.checkout-cart-index #cart-totals tr.grand.totals > td.amount,
body.checkout-cart-index #cart-totals tr.grand.totals.incl > th.mark,
body.checkout-cart-index #cart-totals tr.grand.totals.incl > td.amount {
    border-top: 1px solid var(--bs-blue-light, #dce8f0) !important;
    box-shadow: inset 0 1px 0 0 var(--bs-blue-light, #dce8f0) !important;
    padding-top: 14px !important;
}
body.checkout-cart-index #cart-totals tr.grand.totals .mark,
body.checkout-cart-index #cart-totals tr.grand.totals .mark strong {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--bs-blue, #00446a) !important;
}
body.checkout-cart-index #cart-totals tr.grand.totals .amount .price,
body.checkout-cart-index #cart-totals tr.grand.totals .amount strong,
body.checkout-cart-index #cart-totals tr.grand.totals .amount strong .price {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--bs-blue, #00446a) !important;
}

/* Tax note: Label + Betrag dünner */
.checkout-cart-index #cart-totals .totals-tax td,
.checkout-cart-index #cart-totals .totals-tax th,
.checkout-cart-index #cart-totals .totals-tax .mark,
.checkout-cart-index #cart-totals .totals-tax .amount,
.checkout-cart-index #cart-totals .totals-tax .amount .price {
    font-size: 12px !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
    font-weight: 400 !important;
}

/* --- "Zur Kasse" button: orange pill --- */
.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout,
.checkout-cart-index .checkout-methods-items .action.primary.checkout {
    border-radius: 999px !important;
    background: var(--bs-accent-color, #ec6608) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    width: 100% !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(236, 102, 8, 0.25) !important;
    text-transform: none !important;
}
.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout:hover,
.checkout-cart-index .checkout-methods-items .action.primary.checkout:hover {
    background: var(--bs-accent-color-hover, #C96000) !important;
    box-shadow: 0 4px 14px rgba(236, 102, 8, 0.35) !important;
}
.checkout-cart-index .cart-summary .checkout-methods-items .action.primary.checkout span {
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* AGB / legal text under checkout + PayPal (nach </ul>, siehe Magento_Checkout/templates/cart/methods.phtml) */
.checkout-cart-index .cart-summary span.cart_custom_text {
    display: block;
    margin-top: 16px;
    clear: both;
    float: none;
}
.checkout-cart-index .cart-summary .checkout-methods-items ~ * {
    font-size: 11px !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
    line-height: 1.45 !important;
}
.checkout-cart-index .cart-summary .checkout-methods-items ~ * a {
    color: var(--bs-blue, #00446a) !important;
}

/* PayPal Express Warenkorb: volle Breite wie „Zur Kasse“ (auch große Tablets / iPad) */
.checkout-cart-index .cart-summary .checkout-methods-items,
.checkout-cart-index .summery_custom_block .cart-summary .checkout-methods-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
}

.checkout-cart-index .cart-summary .checkout-methods-items > .item,
.checkout-cart-index .summery_custom_block .cart-summary .checkout-methods-items > .item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.checkout-cart-index .cart-summary #solutioo-paypal-express-container,
.checkout-cart-index .summery_custom_block .cart-summary #solutioo-paypal-express-container,
.checkout-cart-index .cart-summary .solutioo-paypal-express,
.checkout-cart-index .summery_custom_block .cart-summary .solutioo-paypal-express,
.checkout-cart-index .cart-summary .solutioo-paypal-button-wrap,
.checkout-cart-index .cart-summary #solutioo-paypal-button-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
}

.checkout-cart-index .cart-summary .solutioo-paypal-button-wrap,
.checkout-cart-index .cart-summary #solutioo-paypal-button-container,
.checkout-cart-index .summery_custom_block .cart-summary .solutioo-paypal-button-wrap {
    overflow: visible !important;
    border-radius: 0 !important;
}

.checkout-cart-index .cart-summary .solutioo-paypal-button-wrap > div,
.checkout-cart-index .summery_custom_block .cart-summary .solutioo-paypal-button-wrap > div {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

/* Warenkorb: Standalone PayPal-Funding-Slots (je Button eigene Pill) */
.checkout-cart-index .cart-summary .solutioo-paypal-funding-slot,
.checkout-cart-index .summery_custom_block .cart-summary .solutioo-paypal-funding-slot {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 10px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.checkout-cart-index .cart-summary .solutioo-paypal-funding-slot:last-child,
.checkout-cart-index .summery_custom_block .cart-summary .solutioo-paypal-funding-slot:last-child {
    margin-bottom: 0 !important;
}

.checkout-cart-index .cart-summary .solutioo-paypal-funding-slot iframe,
.checkout-cart-index .cart-summary .solutioo-paypal-funding-slot .zoid-component-frame,
.checkout-cart-index .summery_custom_block .cart-summary .solutioo-paypal-funding-slot iframe {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

/* Mollie Apple Pay (Warenkorb-Shortcut): Abstand zu PayPal + Pill wie „Zur Kasse“ */
.checkout-cart-index .cart-summary #mollie_applepay_minicart.mollie-applepay-minicart:not(.mollie-applepay-button-hidden),
.checkout-cart-index .summery_custom_block .cart-summary #mollie_applepay_minicart.mollie-applepay-minicart:not(.mollie-applepay-button-hidden) {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.checkout-cart-index .cart-summary #mollie_applepay_minicart .mollie-applepay-minicart-button,
.checkout-cart-index .summery_custom_block .cart-summary #mollie_applepay_minicart .mollie-applepay-minicart-button {
    display: block !important;
    width: 100% !important;
    min-height: 48px !important;
    height: 48px !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

/* --- Gutscheincode block --- */
/* Hoehere Spezifitaet (.summery_custom_block) um #DBE3E8 aus
   Solutioo_Customcheckout/_checkout.less Z.2178 zu kontern und denselben
   hellblauen Hintergrund wie die Bestelluebersicht zu setzen. */
.checkout-cart-index div#block-discount,
.checkout-cart-index .summery_custom_block div#block-discount {
    background: #f0f6fa !important;
    border-radius: 16px !important;
    padding: 24px !important;
    border: none !important;
    margin-top: 0 !important;
    float: none !important;
    width: auto !important;
    box-shadow: none !important;
}
.checkout-cart-index div#block-discount .title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin-bottom: 16px !important;
}
.checkout-cart-index div#block-discount .title strong {
    font-weight: 700 !important;
}
.checkout-cart-index div#block-discount input#coupon_code {
    border: 1.5px solid var(--bs-blue-light, #dce8f0) !important;
    border-radius: 999px !important;
    background: #fff !important;
    height: 44px !important;
    padding: 0 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    color: var(--bs-blue, #00446a) !important;
    outline: none !important;
    box-sizing: border-box !important;
}
.checkout-cart-index div#block-discount input#coupon_code:focus {
    border-color: var(--bs-blue, #00446a) !important;
}
.checkout-cart-index div#block-discount input#coupon_code::placeholder {
    color: var(--bs-blue-gray, #6b8fa8) !important;
}

/* "Einlösen" button: gleiche Pill-Form wie der orange "Zur Kasse"-CTA, aber
   sekundaere Optik — weisser Hintergrund mit duenner blauer Outline und blauem
   Text. So bleibt die Form vertraut, der Button tritt aber nicht in Konkurrenz
   zum primaeren Checkout-CTA.
   WICHTIG: Der Button heisst `button.amcoupons-apply.action.primary` (Amasty
   Multi-Coupons-Modul, Knockout-Template
   `app/code/Amasty/Coupons/view/frontend/web/template/cart/discount.html`),
   NICHT `button.action.apply.primary` — diese alte Selektor-Variante hat nichts
   gematcht und wurde durch die korrekte Klasse ersetzt. */
body.checkout-cart-index #block-discount#block-discount button.amcoupons-apply.action.primary,
body.checkout-cart-index .summery_custom_block #block-discount#block-discount button.amcoupons-apply.action.primary {
    border-radius: 999px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 1.5px solid #b8d4e8 !important;
    color: #00446a !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
    text-transform: none !important;
    margin-top: 6px !important;
    letter-spacing: 0.3px !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
}

body.checkout-cart-index div#block-discount .field.amcoupons-input,
body.checkout-cart-index .summery_custom_block .field.amcoupons-input {
    margin-bottom: 8px !important;
}

body.checkout-cart-index div#block-discount .amcoupons-main-container .actions-toolbar {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.checkout-cart-index #block-discount#block-discount button.amcoupons-apply.action.primary:hover,
body.checkout-cart-index #block-discount#block-discount button.amcoupons-apply.action.primary:focus,
body.checkout-cart-index .summery_custom_block #block-discount#block-discount button.amcoupons-apply.action.primary:hover,
body.checkout-cart-index .summery_custom_block #block-discount#block-discount button.amcoupons-apply.action.primary:focus {
    background: #b8d4e8 !important;
    background-color: #b8d4e8 !important;
    border-color: #00446a !important;
    color: #00446a !important;
    box-shadow: 0 2px 8px rgba(0, 68, 106, 0.12) !important;
}
body.checkout-cart-index #block-discount#block-discount button.amcoupons-apply.action.primary span,
body.checkout-cart-index .summery_custom_block #block-discount#block-discount button.amcoupons-apply.action.primary span {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    background: transparent !important;
}

/* --- Cart-Spaltenwurf: Abstand Artikelspalte | Sidebar (blaue Boxen) ---
   Desktop >=1200px: flexibles 1fr + Sidebar max 380px, dazwischen 48px Gap.
   Details in customdesign-cart.css (ueberschreibt Theme 69%/29% mit 2% Gap). */
@media (min-width: 1200px) {
    body.checkout-cart-index .cart-main-div.grid {
        grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
        grid-column-gap: 48px !important;
        column-gap: 48px !important;
        gap: 0 48px !important;
    }
}

/* --- Delivery time total row at bottom --- */
.checkout-cart-index .cart-bottom-container,
.checkout-index-index .checkout-trust-footer,
.customcheckout-checkout-customcreateaccount .checkout-trust-footer {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--bs-blue, #00446a) !important;
}

/* --- "Geprüft und sicher einkaufen auf badshop.de"-Trustblock ---
   War: grauer Vollflaechen-Block (background: #f3f3f3 aus
   Solutioo_Customcheckout/_checkout.less Z.969). Jetzt: weisse Card mit
   abgerundeten Ecken und dezentem Schlagschatten — passt zur Cart-Item-Card-
   und Sidebar-Optik (gleicher Radius/Shadow wie .cart-item-info). */
.checkout-cart-index .cart_bottom_wrapper,
.checkout-index-index .cart_bottom_wrapper,
.customcheckout-checkout-customcreateaccount .cart_bottom_wrapper {
    background-color: #fff !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(0, 68, 106, 0.08),
                0 1px 4px rgba(0, 68, 106, 0.04) !important;
    padding: 28px 32px !important;
    margin-top: 24px !important;
}

/*
 * Trustblock „Geprüft und sicher …“: Trusted Shops + SSL ganz rechts, beide sichtbar.
 * Theme: 4-Spalten-Grid + .imag_wrapper.left img { width:80% }; globales img{max-width:100%}
 * konnte SSL auf 0 Breite kollabieren lassen.
 */
@media (min-width: 768px) {
    .checkout-cart-index .cart_bottom_wrapper,
    .checkout-index-index .cart_bottom_wrapper,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper {
        overflow: visible !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .row.grid,
    .checkout-index-index .cart_bottom_wrapper .row.grid,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .row.grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, max-content) !important;
        column-gap: 24px !important;
        row-gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .row.grid > h1,
    .checkout-cart-index .cart_bottom_wrapper .row.grid > .cart-trust-title,
    .checkout-index-index .cart_bottom_wrapper .row.grid > h1,
    .checkout-index-index .cart_bottom_wrapper .row.grid > .cart-trust-title,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .row.grid > h1,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .row.grid > .cart-trust-title {
        grid-column: 1 / -1 !important;
        margin: 0 0 8px !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .row.grid .col_wrap.col1,
    .checkout-index-index .cart_bottom_wrapper .row.grid .col_wrap.col1,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .row.grid .col_wrap.col1 {
        grid-column: 1 !important;
        justify-self: start !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .row.grid .col_wrap.col2,
    .checkout-index-index .cart_bottom_wrapper .row.grid .col_wrap.col2,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .row.grid .col_wrap.col2 {
        grid-column: 2 !important;
        justify-self: start !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .row.grid .col_wrap.col3,
    .checkout-index-index .cart_bottom_wrapper .row.grid .col_wrap.col3,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .row.grid .col_wrap.col3 {
        grid-column: 3 !important;
        grid-row: 2 !important;
        justify-self: end !important;
        align-self: center !important;
        width: max-content !important;
        min-width: 300px !important;
        max-width: none !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .col_wrap.col3 .image_badges_wrap,
    .checkout-index-index .cart_bottom_wrapper .col_wrap.col3 .image_badges_wrap,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .col_wrap.col3 .image_badges_wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 16px 20px !important;
        width: max-content !important;
        min-width: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper,
    .checkout-index-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper {
        flex: 0 0 auto !important;
        display: block !important;
        overflow: visible !important;
        width: auto !important;
        float: none !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.left,
    .checkout-index-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.left,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.left {
        flex: 0 0 96px !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.right,
    .checkout-index-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.right,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.right {
        flex: 0 0 185px !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.left img,
    .checkout-index-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.left img,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.left img {
        display: block !important;
        width: 96px !important;
        max-width: 96px !important;
        min-width: 96px !important;
        height: auto !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.right img,
    .checkout-index-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.right img,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.right img {
        display: block !important;
        width: 185px !important;
        max-width: 185px !important;
        min-width: 140px !important;
        height: auto !important;
    }
}

@media (min-width: 1200px) {
    .checkout-cart-index .cart_bottom_wrapper .row.grid,
    .checkout-index-index .cart_bottom_wrapper .row.grid,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .row.grid {
        column-gap: 32px !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(320px, max-content) !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .row.grid .col_wrap.col3,
    .checkout-index-index .cart_bottom_wrapper .row.grid .col_wrap.col3,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .row.grid .col_wrap.col3 {
        min-width: 320px !important;
    }
}

@media (max-width: 767px) {
    .checkout-cart-index .cart_bottom_wrapper .col_wrap.col3 .image_badges_wrap,
    .checkout-index-index .cart_bottom_wrapper .col_wrap.col3 .image_badges_wrap,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .col_wrap.col3 .image_badges_wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }

    .checkout-cart-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.right img,
    .checkout-index-index .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.right img,
    .customcheckout-checkout-customcreateaccount .cart_bottom_wrapper .col_wrap.col3 .imag_wrapper.right img {
        width: 100% !important;
        max-width: 185px !important;
        min-width: 0 !important;
        height: auto !important;
    }
}

/* --- Tooltip (i icon) --- */
.checkout-cart-index .tooltip.wrapper {
    position: relative !important;
}
.checkout-cart-index .tooltip-toggle,
.checkout-cart-index .tooltip.wrapper .tooltip.toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: var(--bs-blue-light, #f0f6fa) !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: 'Montserrat', sans-serif !important;
    border: 1.5px solid var(--bs-blue-light, #dce8f0) !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.checkout-cart-index .tooltip.wrapper .tooltip.content {
    background: #fff !important;
    border: 1px solid var(--bs-blue-light, #dce8f0) !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 4px 16px rgba(0, 68, 106, 0.12) !important;
    line-height: 1.5 !important;
}

/* --- Generic button override for cart page: no gray --- */
.checkout-cart-index button {
    font-family: 'Montserrat', sans-serif !important;
}

/* --- "Gesamtlieferzeit" info bar --- */
.checkout-cart-index .delivery-time-total {
    font-family: 'Montserrat', sans-serif !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 13px !important;
}

/* --- Shipping estimate block --- */
.checkout-cart-index div#block-shipping {
    background: transparent !important;
    border: none !important;
}
.checkout-cart-index div#block-shipping select,
.checkout-cart-index div#block-shipping input {
    border: 1.5px solid var(--bs-blue-light, #dce8f0) !important;
    border-radius: 999px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: var(--bs-blue, #00446a) !important;
    padding: 6px 12px !important;
    background: #fff !important;
}
.checkout-cart-index div#block-shipping select:focus,
.checkout-cart-index div#block-shipping input:focus {
    border-color: var(--bs-blue, #00446a) !important;
    outline: none !important;
}

/* ============================================================
   Phone Sidebar — input & select overrides
   ============================================================ */
.ps-cb-input,
input.ps-cb-input,
input[type="tel"].ps-cb-input,
input#ps-cb-phone.ps-cb-input {
    border-radius: 24px !important;
    padding: 12px 18px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}
.ps-cb-select,
select.ps-cb-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: 24px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a96a3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 7px !important;
}

/* ============================================================
   Phone Sidebar — styles extracted from phone-sidebar.js
   ============================================================ */
.ps-ov {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.45);
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    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;
}
.ps-ov--on {
    opacity: 1;
    visibility: visible;
}
.ps-sb {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 92vw;
    height: 100%;
    background: #fff;
    z-index: 100001;
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.18);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    font-family: 'Quicksand', sans-serif;
}
.ps-sb--on {
    transform: translateX(0);
}
.ps-head {
    background: #00446a !important;
    background-color: #00446a !important;
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 14px 20px;
    box-sizing: border-box;
}
.ps-head:hover {
    background: rgba(0, 68, 106, 0.88) !important;
    background-color: rgba(0, 68, 106, 0.88) !important;
}
.ps-head:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
.ps-head-txt,
.ps-head-arrow {
    color: #fff;
}
.ps-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 24px;
    text-align: center;
    overflow-y: auto;
}
.ps-icon-wrap svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ps-title {
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1a2b3c;
    margin: 0 0 12px;
}
.ps-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bs-blue, #00446a);
    margin: 0 0 24px;
    max-width: 320px;
}
/* Aktionsblock: Telefon + optional Kontakt */
.ps-phone-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    width: 100%;
    max-width: 320px;
}
.ps-phone-actions .ps-phone-link {
    margin-bottom: 0;
    width: 100%;
    justify-content: center;
}
.ps-contact-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    padding: 12px 22px;
    border: 2px solid var(--bs-blue, #00446a);
    color: var(--bs-blue, #00446a);
    background: #fff;
    text-decoration: none;
    border-radius: 40px;
    font-size: 15px;
    font-weight: 700;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    line-height: 1.35;
}
.ps-contact-link:hover {
    background: rgba(0, 68, 106, 0.1);
    color: var(--bs-blue, #00446a);
    text-decoration: none;
}
.ps-expo-hint {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 20px;
    padding: 0 4px;
    box-sizing: border-box;
}
.ps-expo-hint__p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--bs-blue, #00446a);
    text-align: center;
}
.ps-expo-hint__a,
.ps-expo-hint__a:link,
.ps-expo-hint__a:visited,
.ps-expo-hint__a:active {
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
    font-weight: 700;
    /* Theme :visited / iOS können Schwarz erzwingen — eine Linie via Border */
    text-decoration: none !important;
    border-bottom: 1px solid #00446a;
    padding-bottom: 1px;
}
.ps-expo-hint__a:hover {
    color: rgba(0, 68, 106, 0.9) !important;
    -webkit-text-fill-color: rgba(0, 68, 106, 0.9) !important;
    text-decoration: none !important;
    border-bottom-color: rgba(0, 68, 106, 0.9);
}
/* Kompakter als zuvor; weiterhin gut klickbar */
.ps-phone-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--bs-blue, #00446a);
    color: #fff;
    text-decoration: none;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    transition: background 0.15s ease, transform 0.15s ease;
    margin-bottom: 24px;
    flex-shrink: 0;
    line-height: 1.35;
    box-sizing: border-box;
}
.ps-phone-link:hover {
    background: rgba(0, 68, 106, 0.88);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.ps-phone-link svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.ps-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}
.ps-status--on {
    background: rgba(34, 170, 85, 0.08);
    color: #1a8a4a;
}
.ps-status--off {
    background: rgba(180, 60, 60, 0.06);
    color: #a04040;
}
.ps-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ps-dot--on {
    background: #22aa55;
    box-shadow: 0 0 6px rgba(34, 170, 85, 0.5);
    animation: ps-pulse 2s infinite;
}
.ps-dot--off {
    background: #c05050;
}
@keyframes ps-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.ps-hours {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}
.ps-hours-title {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    text-align: center;
}
.ps-hours-title svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ps-hours-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 16px;
    font-size: 14px;
    color: #1a2b3c;
    font-weight: 500;
    border-radius: 8px;
}
.ps-hours-row:nth-child(odd) {
    background: #f8fafb;
}
.ps-hours-row span:last-child {
    color: var(--bs-blue, #00446a);
    font-weight: 600;
}
.ps-hours-row--active {
    background: rgba(0, 68, 106, 0.06) !important;
}
.ps-hours-row--active span {
    font-weight: 700 !important;
}
.ps-cb-sep {
    width: 100%;
    border: none;
    border-top: 1px solid #edf0f3;
    margin: 28px 0 24px;
    flex-shrink: 0;
}
.ps-cb {
    width: 100%;
    text-align: left;
    flex-shrink: 0;
}
.ps-cb-title {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    text-align: center;
    margin: 0 0 16px;
}
.ps-cb-title svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ps-cb-field {
    margin-bottom: 14px;
}
.ps-cb-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1a2b3c;
    margin-bottom: 6px;
}
.ps-cb-input {
    display: block;
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 12px 18px;
    border: 1.5px solid #d0d7de;
    border-radius: 24px;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Quicksand', sans-serif;
    color: #1a2b3c;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.ps-cb-input:focus {
    border-color: var(--bs-blue, #00446a);
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.1);
}
/* Lesbar wie Formular-Labels; Theme/Luma-Placeholder oft zu hell — Prefixes + !important */
.ps-cb-input::placeholder,
input#ps-cb-phone.ps-cb-input::placeholder {
    color: #1a2b3c !important;
    opacity: 1 !important;
}
.ps-cb-input::-webkit-input-placeholder,
input#ps-cb-phone.ps-cb-input::-webkit-input-placeholder {
    color: #1a2b3c !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #1a2b3c;
}
.ps-cb-input::-moz-placeholder,
input#ps-cb-phone.ps-cb-input::-moz-placeholder {
    color: #1a2b3c !important;
    opacity: 1 !important;
}
.ps-cb-input:-ms-input-placeholder,
input#ps-cb-phone.ps-cb-input:-ms-input-placeholder {
    color: #1a2b3c !important;
}
.ps-cb-select {
    display: block;
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 12px 36px 12px 18px;
    border: 1.5px solid #d0d7de;
    border-radius: 24px;
    font-size: 14px;
    line-height: 1.5;
    font-family: 'Quicksand', sans-serif;
    color: #1a2b3c;
    background-color: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a96a3' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    text-overflow: ellipsis;
}
.ps-cb-select:focus {
    border-color: var(--bs-blue, #00446a);
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.1);
}
.ps-cb-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 20px;
    cursor: pointer;
}
.ps-cb-check input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--bs-blue, #00446a);
    flex-shrink: 0;
    cursor: pointer;
}
.ps-cb-check span {
    font-size: 12px;
    line-height: 1.5;
    color: #5a6a7a;
}
.ps-cb-check a {
    color: var(--bs-blue, #00446a);
    text-decoration: none;
    font-weight: 600;
}
.ps-cb-check a:hover {
    text-decoration: underline;
}
/* Wie Startseiten-Primärbutton .bs-btn-accent (Quicksand, 16px/600, 40px Radius) */
.ps-cb-btn {
    width: 100%;
    padding: 14px 32px;
    background: var(--bs-blue, #00446a);
    color: #fff;
    border: none;
    border-radius: 40px;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    letter-spacing: 0;
    box-sizing: border-box;
}
.ps-cb-btn:hover {
    background: rgba(0, 68, 106, 0.88);
}
.ps-cb-btn:active {
    transform: translateY(0);
}
.ps-cb-btn:disabled {
    background: #a0b0c0;
    cursor: not-allowed;
    transform: none;
}
.ps-cb-msg {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
.ps-cb-msg--ok {
    background: rgba(34, 170, 85, 0.08);
    color: #1a8a4a;
}
.ps-cb-msg--err {
    background: rgba(180, 60, 60, 0.06);
    color: #a04040;
}
/* Fehler-Outline auf Phone-Input + Consent-Checkbox-Wrap (gesetzt per JS, wenn
 * Validierung fehlschlaegt; per User-Tipp/Click wieder entfernt). */
.ps-cb-input--error,
input#ps-cb-phone.ps-cb-input.ps-cb-input--error {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}
.ps-cb-check--error {
    outline: 2px solid rgba(192, 57, 43, 0.45);
    outline-offset: 4px;
    border-radius: 4px;
}
.ps-footer {
    border-top: 1px solid #edf0f3;
    padding: 16px 24px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    flex-shrink: 0;
    background: #fafbfc;
    text-align: center;
}
.ps-footer-text {
    font-size: 13px;
    color: var(--bs-blue, #00446a);
    line-height: 1.5;
    margin: 0;
}
.ps-footer-text a,
.ps-footer-text a:link,
.ps-footer-text a:visited,
.ps-footer-text a:active {
    color: #00446a !important;
    -webkit-text-fill-color: #00446a !important;
    text-decoration: none !important;
    border-bottom: 1px solid #00446a;
    padding-bottom: 1px;
    font-weight: 600;
}
.ps-footer-text a:hover {
    color: rgba(0, 68, 106, 0.9) !important;
    -webkit-text-fill-color: rgba(0, 68, 106, 0.9) !important;
    text-decoration: none !important;
    border-bottom-color: rgba(0, 68, 106, 0.9);
}

/*
 * PDP: Nur doppelte Produkt-Titelzeilen am ANFANG der Langbeschreibung ausblenden
 * (nicht Zubehör, Block-Titel, andere H2 weiter unten).
 * Muss NACH den H2-Typo-Regeln oben stehen; siehe auch pdp-hide-duplicate-h2.css (order 950).
 */
body.catalog-product-view.customdesign-desc-sections
    .desc-sections-wrapper
    > .desc-section:first-child
    .desc-section-text
    > h2:first-of-type,
body.catalog-product-view.customdesign-desc-sections
    .desc-sections-wrapper
    > .desc-section:first-child
    .desc-section-text
    > h2:first-of-type
    + h2,
body.catalog-product-view.customdesign-desc-sections
    .desc-sections-wrapper
    > .desc-section:first-child
    .desc-section-text
    > .bs-h2:first-child,
body.catalog-product-view.customdesign-desc-sections
    .desc-sections-wrapper
    > .desc-section:first-child
    .desc-section-text
    > .bs-h2:first-child
    + .bs-h2,
body.catalog-product-view.customdesign-desc-sections
    .desc-sections-wrapper
    > .desc-section:first-child
    .desc-section-text
    > h2:first-of-type
    + .bs-h2,
body.catalog-product-view.customdesign-desc-sections
    .desc-sections-wrapper
    > .desc-section:first-child
    .desc-section-text
    > .bs-h2:first-child
    + h2 {
    display: none !important;
}

body.catalog-product-view:not(.customdesign-desc-sections)
    .product.attribute.description
    .value
    > h2:first-of-type,
body.catalog-product-view:not(.customdesign-desc-sections)
    .product.attribute.description
    .value
    > h2:first-of-type
    + h2,
body.catalog-product-view:not(.customdesign-desc-sections)
    .product.attribute.description
    .value
    > .bs-h2:first-child,
body.catalog-product-view:not(.customdesign-desc-sections)
    .product.attribute.description
    .value
    > .bs-h2:first-child
    + .bs-h2,
body.catalog-product-view:not(.customdesign-desc-sections)
    .product.attribute.description
    .value
    > h2:first-of-type
    + .bs-h2,
body.catalog-product-view:not(.customdesign-desc-sections)
    .product.attribute.description
    .value
    > .bs-h2:first-child
    + h2 {
    display: none !important;
}

/*
 * PDP Produktname (#product-head h1) — Montserrat + groessere Schrift.
 * Liegt hier (spaete Ladung) damit product-l.css / globales h1 nichts ueberschreibt.
 * Ohne PDP V2: dort fest 24px in customdesign-pdp.css (diese Regeln waeren sonst spezifischer).
 */
body.catalog-product-view:not(.customdesign-pdp-v2) #product-head .product-name h1[itemprop="name"] {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* Login — „Anmelden“-Button: kein Springen auf Hover (Karte/Outline/Transform) */
body.customer-account-login .bs-login-card,
body.customer-account-login .bs-login-card:hover {
    box-shadow: 0 2px 12px rgba(0, 40, 70, 0.06) !important;
    transition: none !important;
}
body.customer-account-login .bs-login-card:not(.bs-login-card--register),
body.customer-account-login .bs-login-card:not(.bs-login-card--register):hover {
    box-shadow: none !important;
}
html body.customer-account-login .login-container button.bs-btn.bs-btn--primary,
html body.customer-account-login .login-container button.bs-btn.bs-btn--primary:hover,
html body.customer-account-login .login-container button.bs-btn.bs-btn--primary:focus,
html body.customer-account-login .login-container button.bs-btn.bs-btn--primary:active {
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 12px 24px !important;
    line-height: 1.2 !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
    border: 2px solid #fff !important;
    min-height: 48px;
}
html body.customer-account-login .login-container button.bs-btn.bs-btn--primary:focus-visible:not(.bs-kb-focus-none) {
    box-shadow: none !important;
    outline: 3px solid #fff !important;
    outline-offset: 2px !important;
}

/* Logout-Hinweis: mehr Abstand zur darüberliegenden Hauptnavigation */
body.customer-account-logoutsuccess #maincontent.page-main,
body.customer-account-logoutsuccess .page-main {
    padding-top: 48px !important;
}

body.customer-account-logoutsuccess .column.main > p:first-of-type {
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
}

/* =============================================================================
   Konto erstellen — an Startseite / PLP (Design-Tokens, Pill-Inputs, Pill-CTA)
   Scope: nur body.customer-account-create (kein Login/Dashboard)
   ============================================================================= */

body.customer-account-create #maincontent.page-main {
    padding-top: 40px !important;
    padding-bottom: 56px !important;
}

/* Sichtbare H1 (Theme entfernt page.main.title) */
body.customer-account-create .customdesign-create-account-heading {
    margin: 0 0 28px 0;
    padding: 0;
}

body.customer-account-create .customdesign-create-account-heading__title {
    margin: 0;
    padding: 0;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--bs-font-color, #00446a);
}

body.customer-account-create .customdesign-create-account-heading__title .base {
    display: inline-block;
}

body.customer-account-create .column.main {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

body.customer-account-create .form-create-account .fieldset {
    margin: 0 0 36px 0;
    padding: 0;
    border: 0;
}

body.customer-account-create .form-create-account .fieldset > .legend {
    float: none;
    width: 100%;
    margin: 0 0 10px 0;
    padding: 0 0 14px 0;
    border-bottom: 2px solid #e8edf2;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: clamp(1.35rem, 2.8vw, 1.65rem) !important;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--bs-font-color, #00446a);
}

body.customer-account-create .form-create-account .fieldset > .legend span {
    display: inline-block;
}

body.customer-account-create .form-create-account .fieldset > .legend + br {
    display: none !important;
}

body.customer-account-create .form-create-account .field {
    margin-bottom: 20px;
}

body.customer-account-create .form-create-account .field > .label {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--bs-blue-gray, #4a6886);
    margin-bottom: 8px;
    line-height: 1.35;
}

body.customer-account-create .form-create-account .field.required > .label:after {
    color: var(--bs-accent-color, #ec6608);
}

/* Pill inputs (wie .ps-cb-input) — ohne Checkbox/Radio/Hidden */
body.customer-account-create .form-create-account .field .control input.input-text,
body.customer-account-create .form-create-account .field .control input[type="email"],
body.customer-account-create .form-create-account .field .control input[type="password"],
body.customer-account-create .form-create-account .field .control input[type="tel"],
body.customer-account-create .form-create-account .field .control input[type="number"],
body.customer-account-create .form-create-account .field .control textarea {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 18px !important;
    border: 1.5px solid #d0d7de !important;
    border-radius: 24px !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #1a2b3c !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: none !important;
}

body.customer-account-create .form-create-account .field .control textarea {
    min-height: 100px;
    resize: vertical;
}

body.customer-account-create .form-create-account .field .control input:focus,
body.customer-account-create .form-create-account .field .control textarea:focus {
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.1) !important;
    outline: none !important;
}

body.customer-account-create .form-create-account .field .control input.mage-error,
body.customer-account-create .form-create-account .field .control textarea.mage-error {
    border-color: #dc2626 !important;
    background: #fff5f5 !important;
}

body.customer-account-create .form-create-account .field .mage-error {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #dc2626;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
}

/* DOB: schmalere Felder, etwas weniger Radius */
body.customer-account-create .form-create-account .customer-dob .control input,
body.customer-account-create .form-create-account .field.field-dob .control input {
    min-height: 44px;
    padding: 10px 12px !important;
    border-radius: 14px !important;
}

/* Selects (Region, Prefix, …) */
body.customer-account-create .form-create-account .field .control select {
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 36px 12px 18px !important;
    border: 1.5px solid #d0d7de !important;
    border-radius: 24px !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    color: #1a2b3c !important;
    background-color: #fff !important;
    box-sizing: border-box !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Kleines Chevron, feste Hintergrundgröße (gegen riesige System-Pfeile) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748b' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 10px 6px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.customer-account-create .form-create-account .field .control select::-ms-expand {
    display: none;
}

body.customer-account-create .form-create-account .field .control select:focus {
    border-color: var(--bs-blue, #00446a) !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.1) !important;
    outline: none !important;
}

body.customer-account-create .form-create-account .field.password {
    margin-bottom: 24px;
}

body.customer-account-create .form-create-account .field.password .control {
    position: relative;
}

/* Newsletter-Checkbox */
body.customer-account-create .form-create-account .field.choice.newsletter {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 8px;
    margin-bottom: 8px;
}

body.customer-account-create .form-create-account .field.choice.newsletter .checkbox {
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    flex-shrink: 0;
    accent-color: var(--bs-blue, #00446a);
    cursor: pointer;
}

body.customer-account-create .form-create-account .field.choice.newsletter > .label {
    margin: 0;
    font-weight: 500;
    color: #1a2b3c;
    cursor: pointer;
}

/* Actions */
body.customer-account-create .form-create-account .actions-toolbar {
    margin-top: 32px;
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
    gap: 12px;
}

body.customer-account-create .form-create-account .actions-toolbar .primary,
body.customer-account-create .form-create-account .actions-toolbar .secondary {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    display: flex;
    align-items: stretch;
}

body.customer-account-create .form-create-account .actions-toolbar .action.submit.primary {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 52px !important;
    min-width: 200px;
    padding: 0 32px !important;
    border-radius: 40px !important;
    border: none !important;
    background: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    box-shadow: none !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
}

body.customer-account-create .form-create-account .actions-toolbar .action.submit.primary:hover {
    background: rgba(0, 68, 106, 0.9) !important;
    color: #fff !important;
}

body.customer-account-create .form-create-account .actions-toolbar .action.submit.primary:disabled {
    background: #a0b0c0 !important;
    opacity: 1 !important;
}

body.customer-account-create .form-create-account .actions-toolbar .action.back {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 52px !important;
    min-width: 200px;
    padding: 0 32px !important;
    border-radius: 40px !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    background: #fff !important;
    color: var(--bs-blue, #00446a) !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

body.customer-account-create .form-create-account .actions-toolbar .action.back:hover {
    background: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    text-decoration: none !important;
}

body.customer-account-create .form-create-account [data-role="password-strength-meter"] {
    margin-top: 10px;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    font-size: 13px;
}

/* Passwortstaerke-Anzeige als Pillshape: umschliesst nur den Text (inline-block),
   voll gerundet. Die Zustands-Hintergrundfarben (kein/schwach/stark) von Magento
   bleiben erhalten und erscheinen dadurch als farbige Kapsel.
   Magento setzt eine feste height (32px) -> Text klebt oben und die Pille wird zu
   hoch; daher height:auto, damit der Text vertikal mittig sitzt und die Kapsel nur
   so hoch wie noetig ist. */
body.customer-account-create .form-create-account #password-strength-meter {
    display: inline-block;
    height: auto !important;
    min-height: 0 !important;
    padding: 4px 14px !important;
    border-radius: 999px;
    line-height: 1.3;
}

body.customer-account-create .form-create-account .field.password .field.choice {
    margin-top: 12px;
}

/* ===========================================================================
   FINAL OVERRIDES — Must be at END of file to win all specificity battles.
   =========================================================================== */



/* =====================================================
   Badshop Overlay — Redesign (Shell + Close)
   ===================================================== */
#overlayframe_wrapper.overlay {
    background: rgba(0, 44, 68, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}
#overlayframe_wrapper.overlay .innerwrapper {
    border-radius: 20px !important;
    box-shadow: 0 12px 40px rgba(0, 44, 68, 0.25) !important;
    overflow: hidden !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    max-width: 720px !important;
    max-height: 88vh !important;
    width: 92% !important;
    height: auto !important;
}
#overlayframe_wrapper.overlay .innerwrapper #overlayframe {
    max-height: 88vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--bs-blue-light, #b8d4e8) transparent !important;
}
/* Close button — white circle with blue X */
#overlayframe_wrapper.overlay .innerwrapper > span.close {
    font-size: 0 !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    top: 16px !important;
    right: 16px !important;
    position: absolute !important;
    background: #fff !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    z-index: 10001 !important;
    opacity: 1 !important;
}
#overlayframe_wrapper.overlay .innerwrapper > span.close::before,
#overlayframe_wrapper.overlay .innerwrapper > span.close::after {
    content: '' !important;
    position: absolute !important;
    width: 18px !important;
    height: 2.5px !important;
    background: var(--bs-blue, #00446a) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border-radius: 2px !important;
    transition: background 0.2s ease !important;
    top: 50% !important;
    left: 50% !important;
    margin-left: -9px !important;
    margin-top: -1.25px !important;
}
#overlayframe_wrapper.overlay .innerwrapper > span.close::before {
    transform: rotate(45deg) !important;
}
#overlayframe_wrapper.overlay .innerwrapper > span.close::after {
    transform: rotate(-45deg) !important;
}
#overlayframe_wrapper.overlay .innerwrapper > span.close:hover {
    background: var(--bs-blue, #00446a) !important;
    border-color: var(--bs-blue, #00446a) !important;
    opacity: 1 !important;
}
#overlayframe_wrapper.overlay .innerwrapper > span.close:hover::before,
#overlayframe_wrapper.overlay .innerwrapper > span.close:hover::after {
    background: #fff !important;
}

/* CRP „Das passt dazu“ Quick-View — breiter als Standard-Overlay (2-Spalten-Layout) */
#overlayframe_wrapper.overlay .innerwrapper.crp {
    max-width: min(1000px, 94vw) !important;
    width: min(1000px, 94vw) !important;
}
@media (max-width: 767px) {
    #overlayframe_wrapper.overlay .innerwrapper.crp {
        max-width: 94vw !important;
        width: 94vw !important;
        max-height: 90vh !important;
    }
}

/* =====================================================
   Lieferung CMS-Page inside Overlay — Content Redesign
   ===================================================== */
#overlayframe .cms-lieferung {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    color: var(--bs-font-color, #00446a) !important;
    padding: 0 !important;
}
#overlayframe .cms-lieferung .page-title {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 !important;
    padding: 32px 32px 12px !important;
    line-height: 1.2 !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
#overlayframe .cms-lieferung .delivery-heading {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    padding: 0 32px !important;
    margin: 0 0 6px !important;
}
#overlayframe .cms-lieferung .delivery-heading + p {
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
}
#overlayframe .cms-lieferung .delivery-subheading {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    padding: 0 32px !important;
    margin: 0 0 20px !important;
}
#overlayframe .cms-lieferung .lieferung {
    display: grid !important;
    grid-template-columns: 90px 1fr !important;
    grid-gap: 0 !important;
    padding: 0 32px 32px !important;
}
#overlayframe .cms-lieferung .lieferung-icons {
    padding: 16px 0 !important;
}
#overlayframe .cms-lieferung .lieferung-icons img {
    height: 72px !important;
    width: 72px !important;
    object-fit: contain !important;
    filter: hue-rotate(0deg) !important;
}
#overlayframe .cms-lieferung .lieferung-text {
    padding: 8px 0 !important;
}
#overlayframe .cms-lieferung .lieferung p,
#overlayframe .cms-lieferung .lieferung-text p {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--bs-font-color, #00446a) !important;
    margin: 0 0 4px !important;
}
#overlayframe .cms-lieferung .lieferung p strong,
#overlayframe .cms-lieferung .lieferung-text p strong {
    color: var(--bs-blue, #00446a) !important;
    font-weight: 700 !important;
}
#overlayframe .cms-lieferung h2 {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 0 8px !important;
}
/* Hide versand section in overlay */
#overlayframe .cms-lieferung #versand {
    display: none !important;
}

/* Versandkosten-Vollseite (/versand): Montserrat + Markenblau, ohne graue Titel-Linie.
   Body hat keine .theme-page; H2/H3 sitzen in #text2/#rechts2, nicht als > Kind von .bs-cms-page. */
body.cms-page-view.cms-versand h1.page-title,
body.cms-page-view.cms-versand .page-title-wrapper .page-title {
    font-family: 'Montserrat', sans-serif;
    color: var(--bs-blue, #00446a);
    font-weight: 700;
    border-bottom: 0;
    padding-bottom: 0;
}
body.cms-page-view.cms-versand .column.main h2,
body.cms-page-view.cms-versand .column.main h3 {
    font-family: 'Montserrat', sans-serif;
    color: var(--bs-blue, #00446a);
    font-weight: 700;
}
/* General overlay content padding for all CMS pages */
#overlayframe #overlay_content {
    padding: 20px !important;
}

/* Versandkosten overlay — consistent inner padding */
#overlayframe .cms-versand {
    padding: 32px !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    color: var(--bs-font-color, #00446a) !important;
}
#overlayframe .cms-versand .page-title,
#overlayframe .cms-versand .page-title h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1.2 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
}
#overlayframe .cms-versand h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 24px 0 8px !important;
}
#overlayframe .cms-versand p,
#overlayframe .cms-versand div {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--bs-font-color, #00446a) !important;
}
#overlayframe .cms-versand #links1 {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
}
#overlayframe .cms-versand #rechts2 {
    float: none !important;
    width: 100% !important;
    margin: 16px 0 !important;
}
#overlayframe .cms-versand table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 12px 0 !important;
}
#overlayframe .cms-versand .flag img {
    border-radius: 3px !important;
}
/* Contact form overlay: hide only image, keep phone info */
#overlayframe #overlay_content .kontaktbild img {
    display: none !important;
}
#overlayframe #overlay_content .kontaktbild {
    float: none !important;
    width: 100% !important;
    padding: 0 32px 24px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-family: 'Quicksand', sans-serif !important;
    color: var(--bs-blue, #00446a) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
}
#overlayframe #overlay_content .kontaktbild strong {
    font-size: 15px !important;
    color: var(--bs-blue, #00446a) !important;
}
#overlayframe #overlay_content .kontaktbild .tellink {
    color: var(--bs-accent-color, #ec6608) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}
#overlayframe #overlay_content .kontaktbild .tellink:hover {
    text-decoration: underline !important;
}
#overlayframe #overlay_content .col2-grid {
    display: block !important;
}
#overlayframe #overlay_content .col2-grid-left {
    width: 100% !important;
    float: none !important;
    padding: 0 24px 24px !important;
    box-sizing: border-box !important;
}
/* Contact form overlay: Montserrat heading */
#overlayframe #overlay_content .page-title h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 26px !important;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    padding: 28px 32px 8px !important;
}
/* Contact form overlay: pill-shaped inputs + textarea */
#overlayframe #overlay_content .form.contact .input-text {
    border-radius: 999px !important;
    border: 1.5px solid rgba(74, 104, 134, 0.3) !important;
    padding: 12px 20px !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 14px !important;
    color: var(--bs-blue, #00446a) !important;
    background: #fff !important;
    transition: border-color 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
#overlayframe #overlay_content .form.contact .input-text:focus {
    border-color: var(--bs-blue, #00446a) !important;
}
#overlayframe #overlay_content .form.contact textarea.input-text {
    border-radius: 20px !important;
    min-height: 100px !important;
}
/* Contact form overlay: pill-shaped submit button */
#overlayframe #overlay_content .form.contact .action.submit {
    border-radius: 999px !important;
    background: var(--bs-blue, #00446a) !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 36px !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 0.2s ease, transform 0.15s ease !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
#overlayframe #overlay_content .form.contact .action.submit:hover {
    background: var(--bs-accent-color, #ec6608) !important;
    transform: translateY(-1px) !important;
}
/* Contact form overlay: labels */
#overlayframe #overlay_content .form.contact .label {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    color: var(--bs-blue, #00446a) !important;
    margin-bottom: 4px !important;
}
/* Contact form overlay: contacttext */
#overlayframe #overlay_content .contacttext {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--bs-blue, #00446a) !important;
    padding: 0 32px 12px !important;
    text-align: center !important;
}
/* Contact form overlay: fieldset + actions spacing */
#overlayframe #overlay_content .form.contact .fieldset {
    padding: 0 8px !important;
    border: none !important;
    margin: 0 !important;
}
#overlayframe #overlay_content .form.contact .actions-toolbar {
    text-align: center !important;
    padding: 8px 8px 0 !important;
}
#overlayframe #overlay_content .form.contact .actions-toolbar .primary {
    text-align: center !important;
}
#overlayframe #overlay_content .form.contact .actions-toolbar .required {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 12px !important;
    color: rgba(74, 104, 134, 0.6) !important;
    margin-bottom: 8px !important;
}
/* Contact form overlay: Datenschutz link */
#overlayframe #overlay_content .col2-grid-left > p,
#overlayframe #overlay_content .col2-grid-left > div:last-child {
    text-align: center !important;
    font-family: 'Quicksand', sans-serif !important;
    font-size: 13px !important;
    color: rgba(74, 104, 134, 0.7) !important;
    padding: 0 32px !important;
}
#overlayframe #overlay_content .col2-grid-left a {
    color: var(--bs-accent-color, #ec6608) !important;
}
/* Contact overlay success: compact dialog, no empty 30% gap above the message */
#overlayframe_wrapper.overlay .innerwrapper.contact-overlay-done {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    width: min(560px, 92%) !important;
}
#overlayframe_wrapper.overlay .innerwrapper.contact-overlay-done #overlayframe {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
#overlayframe #overlay_content.contact-overlay-done {
    padding: 56px 28px 28px !important;
    min-height: 0 !important;
}
#overlayframe #overlay_content .message.success.contact-overlay-success {
    margin: 0 !important;
}
/* =====================================================
   Versandkosten CMS-Page inside Overlay — Content Redesign
   ===================================================== */
#overlayframe .cms-versand {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    color: var(--bs-font-color, #00446a) !important;
    padding: 0 !important;
}
#overlayframe .cms-versand .page-title-wrapper {
    padding: 32px 40px 0 !important;
    margin: 0 !important;
}
#overlayframe .cms-versand .page-title-wrapper h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 0 8px !important;
    line-height: 1.25 !important;
}
/* Overlay (Badshop_Overlay): CMS-Page = nur <h1 class="page-title">, kein .page-title-wrapper —
   gleicher horizontaler Einzug wie Überschrift (#overlay_content-Padding, keine Extra-Innenabstände). */
#overlayframe #overlay_content.cms-versand > .page-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 0 12px !important;
    padding: 0 0 14px !important;
    line-height: 1.25 !important;
    border-bottom: 1px solid rgba(0, 68, 106, 0.12) !important;
}
#overlayframe .cms-versand #links1 {
    padding: 18px 0 26px !important;
    box-sizing: border-box !important;
}
#overlayframe .cms-versand #links1 p {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: var(--bs-font-color, #00446a) !important;
    margin: 0 0 12px !important;
}
#overlayframe .cms-versand #links1 #versandarten p {
    margin-bottom: 16px !important;
}
#overlayframe .cms-versand #links1 .hint {
    color: var(--bs-accent-color, #ec6608) !important;
}
#overlayframe .cms-versand #links1 a {
    color: var(--bs-blue, #00446a) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
#overlayframe .cms-versand #links1 a:hover {
    color: var(--bs-accent-color, #ec6608) !important;
}
#overlayframe .cms-versand #rechts2 {
    background: var(--bs-blue-light, #f0f6fa) !important;
    border-radius: 14px !important;
    padding: 22px 0 !important;
    margin: 0 0 26px !important;
    float: none !important;
    width: auto !important;
    box-sizing: border-box !important;
}
#overlayframe .cms-versand #rechts2 h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 0 14px !important;
}
#overlayframe .cms-versand #rechts2 .flag {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 14px !important;
    color: var(--bs-font-color, #00446a) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 0 !important;
}
#overlayframe .cms-versand #rechts2 .flag img {
    width: 24px !important;
    height: auto !important;
    border-radius: 3px !important;
    flex-shrink: 0 !important;
}
#overlayframe .cms-versand #text2 {
    padding: 0 0 28px !important;
}
#overlayframe .cms-versand #text2 h2,
#overlayframe .cms-versand #servicep h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 0 0 10px !important;
}
#overlayframe .cms-versand #text2 p,
#overlayframe .cms-versand #servicep p {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--bs-font-color, #00446a) !important;
    margin: 0 0 12px !important;
}
#overlayframe .cms-versand #servicep {
    margin: 16px 0 8px !important;
    padding: 20px 20px 12px !important;
    border: 1px solid var(--bs-blue-gray, #4a6886) !important;
    border-radius: 18px !important;
    background: var(--bs-blue-light, #f0f6fa) !important;
}
#overlayframe .cms-versand table.versandkosten {
    width: 100% !important;
    border-collapse: collapse !important;
    border: 1px solid #aaa !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    font-size: 13px !important;
    color: var(--bs-font-color, #00446a) !important;
    margin-bottom: 12px !important;
}
#overlayframe .cms-versand table.versandkosten th {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    color: var(--bs-blue, #00446a) !important;
    background: var(--bs-blue-light, #f0f6fa) !important;
    padding: 10px 12px !important;
    text-align: left !important;
    border-bottom: 2px solid rgba(0, 68, 106, 0.12) !important;
}
#overlayframe .cms-versand table.versandkosten td {
    padding: 8px 12px !important;
    border-bottom: 1px solid rgba(0, 68, 106, 0.08) !important;
}
#overlayframe .cms-versand table.versandkosten tr:last-child td {
    border-bottom: none !important;
}
#overlayframe .cms-versand table.versandkosten .hint,
#overlayframe .cms-versand table.versandkosten td.hint {
    color: var(--bs-accent-color, #ec6608) !important;
    font-weight: 600 !important;
}
#overlayframe .cms-versand table.versandkosten .vskfr {
    color: var(--bs-accent-color, #ec6608) !important;
    font-weight: 600 !important;
}
#overlayframe .cms-versand hr {
    border: none !important;
    border-top: 1px solid rgba(0, 68, 106, 0.12) !important;
    margin: 8px 0 22px !important;
}
#overlayframe .cms-versand sup {
    font-size: 10px !important;
}
#overlayframe .cms-versand .bs-cms-table-wrap {
    margin: 0 0 16px !important;
    overflow-x: auto !important;
}
#overlayframe .cms-versand .bs-cms-textbox {
    padding: 16px 18px !important;
    margin-bottom: 16px !important;
}
#overlayframe .cms-versand .bs-cms-versand-top {
    display: block !important;
}
#overlayframe .cms-versand .bs-cms-table thead th {
    border-radius: 0 !important;
}
#overlayframe .cms-versand .bs-cms-versand-flags {
    display: grid !important;
    gap: 8px !important;
}

/* Delivery sections (below the timeline) */
#overlayframe .cms-lieferung .delivery {
    border-bottom: 1px solid var(--bs-blue-light, #b8d4e8) !important;
    padding: 20px 32px !important;
}
#overlayframe .cms-lieferung .delivery.delivery-third {
    border-bottom: none !important;
}
#overlayframe .cms-lieferung .delivery .del-content {
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    color: var(--bs-font-color, #00446a) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}
#overlayframe .cms-lieferung .delivery .del-content h2 {
    margin-bottom: 6px !important;
}

/* ============================================================
   Checkout Create-Account / Login Seite: Badshop Design
   ============================================================ */

/* --- Page background --- */
.customcheckout-checkout-customcreateaccount .page-main {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 30px !important;
    box-sizing: border-box !important;
}

/* Mobile: schmaleres Seiten-Padding (User-Wunsch: 20 statt 30 px). DevTools
   auf iPhone 12 Pro zeigt `padding: 0px 30px` auf `main#maincontent.page-
   main` — das gruene Padding links/rechts ist gut sichtbar, soll aber auf
   handlichen 20 px schrumpfen, damit Karten/Form-Inhalt mehr Platz haben.
   Selektor matcht die Desktop-Definition + `@media (max-width: 767px)`, so
   bleibt der Desktop-Wert (30 px) unangetastet. */
@media (max-width: 767px) {
    .customcheckout-checkout-customcreateaccount .page-main {
        padding: 0 20px !important;
    }
}
/* Tablet (768-1199): User-Wunsch (19.05.2026, iPad Air 820 px, DevTools-
   Inspector zeigte vorher `margin: 16px 29.25px; padding: 0px 30px` an
   `main#maincontent.page-main`): „eine margin von 24px und ein padding von
   0px reicht im checkout auf tablet". Wir ueberschreiben die Desktop-
   Defaults (Z. 10728-10733: max-width 1440 + margin auto + padding 0 30px)
   damit:
   - `margin: 24px !important` — gleichmaessiger 24 px-Abstand zu allen
     Seiten (ersetzt das auto-Centering + die 16 px Top-Margin); auf
     820 px Viewport bleibt das Page-Wrapper-Padding aussen herum, plus
     24 px rundum → Karte/Form-Inhalt sitzt komfortabel ohne enger
     Aussenrahmen.
   - `padding: 0 !important` — Innen-Padding voellig raus (Mobile haelt
     weiterhin sein 20 px, Desktop ≥1200 weiterhin 30 px). Inhalte wie
     Karten/Forms sind selbst breit genug, das Page-Main muss keinen
     zusaetzlichen Innenrand schaffen. */
@media (min-width: 768px) and (max-width: 1199px) {
    .customcheckout-checkout-customcreateaccount .page-main {
        margin: 24px !important;
        padding: 0 !important;
    }
}

/* --- "Zurück zum Warenkorb" button: pill shape --- */
.customcheckout-checkout-customcreateaccount .backtocart-btn {
    border-radius: 999px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 10px 22px !important;
}

/* Ein Fokus-Ring (kein Outline+Inset+Border-Stack) */
html body .backtocart-btn.bs-kb-focus-none:focus-visible,
html body.customcheckout-checkout-customcreateaccount .backtocart-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px #00446a !important;
}

/* --- Block titles: Montserrat, dark blue --- */
.customcheckout-checkout-customcreateaccount .login-container .block-title {
    font-size: 22px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 24px !important;
    color: var(--bs-blue, #00446a) !important;
}
.customcheckout-checkout-customcreateaccount .login-container .block-title strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}

/* --- Register-Heading "Ich moechte ein Kundenkonto anlegen." identisch zu Login-
   Heading "Ich habe bereits ein Kundenkonto." stylen (User-Wunsch). ID-Selektor
   damit die direkt auf strong#block-customer-login-heading wirkende Inline-Regel
   aus register.phtml (font-size 20px, letter-spacing 1.2px, color
   rgba(0,68,106,0.8)) selbst dann ueberschrieben wird, wenn die Direktregel
   wieder eingefuehrt werden sollte (Theme-Update / fremder Patch). Werte exakt
   wie vom User aus DevTools des Login-Headings uebernommen. */
.customcheckout-checkout-customcreateaccount .customerrightside .block-title strong#block-customer-login-heading,
.customcheckout-checkout-customcreateaccount .customerrightside strong#block-customer-login-heading {
    color: rgb(0, 68, 106) !important;
    display: inline !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    height: auto !important;
    hyphens: auto !important;
    letter-spacing: normal !important;
    line-height: 28.6px !important;
    text-transform: none !important;
    width: auto !important;
    -webkit-font-smoothing: antialiased !important;
}

/* --- Form inputs: rounded, blue border, Montserrat --- */
.customcheckout-checkout-customcreateaccount .login-container input[type="text"],
.customcheckout-checkout-customcreateaccount .login-container input[type="email"],
.customcheckout-checkout-customcreateaccount .login-container input[type="password"],
.customcheckout-checkout-customcreateaccount .login-container input[type="tel"],
.customcheckout-checkout-customcreateaccount .login-container input.input-text {
    border: 1.5px solid var(--bs-blue-light, #dce8f0) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    color: var(--bs-blue, #00446a) !important;
    background: #fff !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
    height: auto !important;
}
.customcheckout-checkout-customcreateaccount .login-container input:focus {
    border-color: var(--bs-blue, #00446a) !important;
}
.customcheckout-checkout-customcreateaccount .login-container input::placeholder {
    color: var(--bs-blue-gray, #6b8fa8) !important;
    opacity: 1 !important;
}

/* --- Select dropdowns: rounded, blue border --- */
.customcheckout-checkout-customcreateaccount .login-container select {
    border: 1.5px solid var(--bs-blue-light, #dce8f0) !important;
    border-radius: 12px !important;
    padding: 14px 36px 14px 18px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    color: var(--bs-blue, #00446a) !important;
    background: #fff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%2300446a'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 6px !important;
    outline: none !important;
    height: auto !important;
    cursor: pointer !important;
}
.customcheckout-checkout-customcreateaccount .login-container select:focus {
    border-color: var(--bs-blue, #00446a) !important;
}

/* --- Labels (visible ones): Montserrat, blue-gray --- */
.customcheckout-checkout-customcreateaccount .login-container .label,
.customcheckout-checkout-customcreateaccount .login-container label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
}

/* --- Primary buttons: orange pill --- */
.customcheckout-checkout-customcreateaccount .login-container .actions-toolbar .primary button,
.customcheckout-checkout-customcreateaccount .login-container .actions-toolbar .primary .action.primary,
.customcheckout-checkout-customcreateaccount .login-container .actions-toolbar .primary a.action.primary {
    border-radius: 999px !important;
    background: var(--bs-accent-color, #ec6608) !important;
    border: none !important;
    color: #fff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 14px 28px !important;
    width: 100% !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(236, 102, 8, 0.25) !important;
    text-transform: none !important;
    line-height: 1.4 !important;
    display: block !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
}
.customcheckout-checkout-customcreateaccount .login-container .actions-toolbar .primary button:hover,
.customcheckout-checkout-customcreateaccount .login-container .actions-toolbar .primary .action.primary:hover,
.customcheckout-checkout-customcreateaccount .login-container .actions-toolbar .primary a.action.primary:hover {
    background: var(--bs-accent-color-hover, #C96000) !important;
    box-shadow: 0 2px 8px rgba(236, 102, 8, 0.25) !important;
    transform: none !important;
}
.customcheckout-checkout-customcreateaccount .login-container .actions-toolbar .primary button span,
.customcheckout-checkout-customcreateaccount .login-container .actions-toolbar .primary .action span {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* --- Guest block: dark blue outlined pill --- */
.customcheckout-checkout-customcreateaccount .guestcustomer_block .primary a.action.create {
    border-radius: 999px !important;
    background: transparent !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    color: var(--bs-blue, #00446a) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px 28px !important;
    width: 100% !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: block !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
}
.customcheckout-checkout-customcreateaccount .guestcustomer_block .primary a.action.create:hover {
    background: var(--bs-blue, #00446a) !important;
    color: #fff !important;
}

/* Label im Gast-Link (Luma/Theme setzt span oft auf normales Gewicht — wie Anmelden / Konto erstellen: 700) */
.customcheckout-checkout-customcreateaccount .guestcustomer_block .primary a.action.create span,
.customcheckout-checkout-customcreateaccount .guestcustomer_block .primary a.action.create.primary span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: inherit !important;
    font-weight: 700 !important;
    line-height: inherit !important;
    color: inherit !important;
}

/* --- Guest block heading + description --- */
.customcheckout-checkout-customcreateaccount .guestcustomer_block .block-title strong {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}
.customcheckout-checkout-customcreateaccount .guestcustomer_block .block-content p {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
}
.customcheckout-checkout-customcreateaccount .guestcustomer_block .primary {
    padding: 0 !important;
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    margin-top: 0 !important;
}

/* --- Specificity-Override gegen Solutioo_Customcheckout/_checkout.less Z. 1182-1196 ---
   Dort wird unter `& when (@media-common = true)` deklariert:
     .customcheckout-checkout-customcreateaccount .login-container
     .guestcustomer_block.block.block-new-customer div.primary {
         padding: 10px !important; width: 96% !important; margin-top: 19px;
         background-color: rgba(0,68,106,0.8); border: unset;
     }
   Das ist hoehere Spezifitaet als unsere obige Regel (0,0,3,0 vs. 0,0,6,1)
   → der Button-Wrapper `<div class="primary">` bekommt umlaufend 10px Padding
   plus dunkelblauen Hintergrund (DevTools-Screenshot 19.05.2026 iPhone 12 Pro:
   gruener Padding-Bereich um „Weiter als Gast"). Hier identischer Selektor mit
   zusaetzlichem `body.`-Praefix (+1 Type/Class) -> sicherer Override. */
body.customcheckout-checkout-customcreateaccount .login-container .guestcustomer_block.block.block-new-customer div.primary {
    padding: 0 !important;
    width: 100% !important;
    margin-top: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* --- "Passwort vergessen?" link --- */
.customcheckout-checkout-customcreateaccount .customloginwrapper .secondary a,
.customcheckout-checkout-customcreateaccount .action.remind {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
}
.customcheckout-checkout-customcreateaccount .customloginwrapper .secondary a:hover,
.customcheckout-checkout-customcreateaccount .action.remind:hover {
    color: var(--bs-accent-color, #ec6608) !important;
    text-decoration: underline !important;
}

/* --- Password strength meter --- */
.customcheckout-checkout-customcreateaccount #password-strength-meter-container {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: var(--bs-blue-gray, #6b8fa8) !important;
}

/* --- Field spacing --- */
.customcheckout-checkout-customcreateaccount .login-container .field {
    margin-bottom: 14px !important;
}

/* --- Login / Register blocks: consistent card look ---
   `.login-container` im Selektor noetig: ohne diesen Ahnen liegt die
   Spezifitaet bei (0,3,0) — Solutioo_Customcheckout/_checkout.less Z. 1205-
   1210 setzt aber `.customcheckout-checkout-customcreateaccount .login-container
   .block.block-customer-login { padding-right: 0 !important }` mit (0,4,0)
   und beraubt die Login-Karte ihres rechten Innenrandes (Screenshot iPhone
   12 Pro: padding `28px 0px 28px 28px`). Mit demselben (0,4,0)-Pfad in
   customdesign.css (laedt nach _checkout.less → Cascade-Tie-Break gewinnt)
   plus explizitem `padding-right: 28px !important` ist die Karte umlaufend
   buendig. */
.customcheckout-checkout-customcreateaccount .login-container .block.block-customer-login,
.customcheckout-checkout-customcreateaccount .login-container .customerrightside {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 28px !important;
    padding-right: 28px !important;
    box-shadow: 0 4px 20px rgba(0, 68, 106, 0.08) !important;
    box-sizing: border-box !important;
}

/* --- Overall text: Montserrat --- */
.customcheckout-checkout-customcreateaccount .login-container {
    font-family: 'Montserrat', sans-serif !important;
}

/* --- Gast-Block (guestcustomer.phtml: „Ich moechte als Gast bestellen"): subtle card styling --- */
.customcheckout-checkout-customcreateaccount .guestcustomer_block {
    background: var(--bs-blue-light, #f0f6fa) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin-top: 20px !important;
}

/* ============================================================
   Checkout Create-Account Footer: Dunkelblaues Design
   ============================================================ */
.customcheckout-checkout-customcreateaccount .footer-container {
    background: var(--bs-blue, #00446a) !important;
    border-top: none !important;
}
.customcheckout-checkout-customcreateaccount .bottom-container {
    background: var(--bs-blue, #00446a) !important;
}
.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px 30px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}
.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner .links {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}
.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner .links a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-decoration: none !important;
    transition: opacity 0.2s ease !important;
}
.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner .links a:hover {
    color: #ffffff !important;
    opacity: 1 !important;
    text-decoration: underline !important;
}
.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner address {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-style: normal !important;
}
.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner .footer-copyright {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Trust-Band über der dunklen Rechtsleiste (Login/Registrierung im Checkout) */
.customcheckout-checkout-customcreateaccount .checkout-trust-footer,
.checkout-index-index .checkout-trust-footer {
    background-color: #ffffff !important;
    padding: 8px 16px 32px;
    box-sizing: border-box;
}
.customcheckout-checkout-customcreateaccount .checkout-trust-footer .cart_bottom_wrapper,
.customcheckout-checkout-customcreateaccount .checkout-trust-footer .trustedshops-caroussel,
.checkout-index-index .checkout-trust-footer .cart_bottom_wrapper,
.checkout-index-index .checkout-trust-footer .trustedshops-caroussel {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}
.customcheckout-checkout-customcreateaccount .checkout-trust-footer .trustedshops-caroussel,
.checkout-index-index .checkout-trust-footer .trustedshops-caroussel {
    clear: both;
    padding-top: 16px;
}
@media (min-width: 768px) {
    .customcheckout-checkout-customcreateaccount .checkout-trust-footer,
    .checkout-index-index .checkout-trust-footer {
        padding: 8px 30px 36px;
    }
}

/* --- Mobile (≤767px): Footer-Inhalt im Checkout zentriert (User-Wunsch) ---
   Der Standard-Footer der Checkout-Seiten ist als Flex-Row mit
   `justify-content: space-between` aufgebaut (Z. 10988-10998 + Z. 11044-11052)
   → Links (AGB/Datenschutz/Impressum/Kontakt) klebten linksbuendig,
   Copyright/Adresse rechts. Auf schmalen Viewports wirkt das unausgewogen.
   Auf Mobil stapeln wir die zwei Reihen vertikal und zentrieren sie.

   Spezifitaet: Body-Klasse + .bottom-container + .bottom-inner = (0,3,0) plus
   `!important` — schlaegt die generischen Mobile-Regeln in
   customdesign-responsive.css Z. 3346-3386, die zwar bereits `text-align: center`
   setzen aber den darueberliegenden Flex-Container nicht umstellen. */
@media (max-width: 767px) {
    body.checkout-index-index .bottom-container .bottom-inner,
    body.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
    }
    body.checkout-index-index .bottom-container .bottom-inner .links,
    body.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner .links {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
    }
    body.checkout-index-index .bottom-container .bottom-inner address,
    body.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner address,
    body.checkout-index-index .bottom-container .bottom-inner .footer-copyright,
    body.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner .footer-copyright {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
    }
}

/* ============================================================
   Checkout (logged-in + customcreateaccount): Footer blau + Info-Icon Padding
   ============================================================ */
body.checkout-index-index .footer-container,
body.customcheckout-checkout-customcreateaccount .footer-container {
    background: var(--bs-blue, #00446a) !important;
    border-top: none !important;
}
body.checkout-index-index .bottom-container,
body.customcheckout-checkout-customcreateaccount .bottom-container {
    background: var(--bs-blue, #00446a) !important;
}
body.checkout-index-index .footer-container .bottom-inner,
body.customcheckout-checkout-customcreateaccount .footer-container .bottom-inner {
    color: #fff !important;
}
body.checkout-index-index .bottom-container .bottom-inner {
    display: block !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
}
body.checkout-index-index .footer-container .bottom-inner > .links a,
body.customcheckout-checkout-customcreateaccount .footer-container .bottom-inner > .links a {
    color: #ffffff !important;
}

body.checkout-index-index .footer-container .bottom-inner > .links a:hover,
body.checkout-index-index .footer-container .bottom-inner > .links a:focus-visible,
body.customcheckout-checkout-customcreateaccount .footer-container .bottom-inner > .links a:hover,
body.customcheckout-checkout-customcreateaccount .footer-container .bottom-inner > .links a:focus-visible {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.checkout-cart-index .estimated_time #info-icon span,
body.checkout-index-index .estimated_time #info-icon span,
body.customcheckout-checkout-customcreateaccount .estimated_time #info-icon span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border-radius: 50% !important;
    line-height: 1 !important;
}

@media (max-width: 767px) {
    body.checkout-index-index .bottom-container .bottom-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Kein Sticky-Banner im Checkout/Warenkorb — kompaktes Footer-Padding statt 80px Reserve */
    body.checkout-cart-index .bottom-container .bottom-inner,
    body.checkout-index-index .bottom-container .bottom-inner,
    body.customcheckout-checkout-customcreateaccount .bottom-container .bottom-inner {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* --- Back to top button --- */
.customcheckout-checkout-customcreateaccount #backtotop {
    color: #fff !important;
}

/* --- Desktop: two-column layout fix --- */
@media (min-width: 1200px) {
    .customcheckout-checkout-customcreateaccount .login-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 40px !important;
    }
    .customcheckout-checkout-customcreateaccount .login-container > .customerrightside {
        flex: 1 1 50% !important;
        max-width: calc(55% - 20px) !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }
    .customcheckout-checkout-customcreateaccount .login-container > .block.block-customer-login {
        flex: 1 1 35% !important;
        max-width: calc(45% - 20px) !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding-right: 0 !important;
        /* Spalte 1: Login zuerst (links) */
        order: 1 !important;
    }
    .customcheckout-checkout-customcreateaccount .login-container > .customerrightside {
        /* Spalte 2: neues Konto + Gast (rechts) */
        order: 2 !important;
    }
}

/* --- Tablet (768-1199): Beide Karten volle Breite + 40 px Gap + Reihenfolge
   tauschen (Login zuerst, Register danach) — analog zum Mobil-Block weiter unten ---
   User-Wuensche 19.05.2026 (iPad Air 820 px) in drei Iterationen:
   - 15:02: „die margin rechts und links kann weg dafuer unten 40px margin
     hizufuegen" — wir hatten nur `.customerrightside` auf `margin: 0 +
     margin-bottom: 40px` umgestellt.
   - 15:07: „warum sind die zwei container verschoben? der obere mehr nach
     links der untere mehr nach rechts. nur auf tablet" — Ursache: Login-Karte
     stand wegen Theme-Default `width: 96%; margin: auto` aus Solutioo_
     Customcheckout/_checkout.less Z. 1205-1210 weiterhin zentriert; wir haben
     beide Karten auf `width: 100%; margin: 0` gestellt.
   - 15:12: „okee jetzt ist der versatz weg, aber jetzt hast du die reihenfolge
     wieder geaendert. Erst der Container mit `Ich habe bereits ein
     Kundenkonto` und dann der Container mit `ich moechte ein Kundenkonto
     anlegen`" — DOM-Reihenfolge ist: `.customerrightside` (Register) zuerst,
     `.block.block-customer-login` (Login) zweite. Standardlayout zeigt also
     Register oben, Login unten. Auf Mobil (Z. 11293-11302) tauschen wir das
     bereits via flex `order: 1`/`order: 2`. Auf Tablet wurde das uebersehen.
   Loesung: Tablet-Block analog zum Mobil-Block bauen — `.login-container`
   `display: flex; flex-direction: column; gap: 40px` + `order: 1` auf Login,
   `order: 2` auf Register. Damit ist die visuelle Reihenfolge (Login zuerst,
   Register danach) konsistent ueber Mobil + Tablet. Der vorher individuell
   gesetzte `margin-bottom: 40px` auf `.customerrightside` faellt weg — der
   Flex-`gap` erledigt den Abstand sauberer (greift nur zwischen Karten,
   nicht oberhalb/unterhalb). Die Breiten/Margin-Reset bleibt erhalten,
   damit beide Karten weiterhin pixelgenau linksbuendig stehen. */
@media (min-width: 768px) and (max-width: 1199px) {
    .customcheckout-checkout-customcreateaccount .login-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }
    .customcheckout-checkout-customcreateaccount .login-container > .customerrightside,
    .customcheckout-checkout-customcreateaccount .login-container > .block.block-customer-login {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .customcheckout-checkout-customcreateaccount .login-container > .block.block-customer-login {
        order: 1 !important;
    }
    .customcheckout-checkout-customcreateaccount .login-container > .customerrightside {
        order: 2 !important;
    }
}

/* --- Mobile (≤767px): Reihenfolge tauschen — Login zuerst, Konto-erstellen + Gast danach ---
   User-Wunsch (Tausche-Reihenfolge): Auf Mobil soll "Ich habe bereits ein Kundenkonto"
   ueber "Ich moechte ein Kundenkonto anlegen" stehen. Wir setzen den Container auf
   flex/column und vergeben explizite order-Werte, sodass die Reihenfolge unabhaengig
   von der DOM-Reihenfolge ist und bei Theme/Layout-Aenderungen stabil bleibt.
   `gap: 40px` erzeugt den vom User gewuenschten orangen 40px-Margin zwischen den
   beiden Karten (DevTools-Screenshot 19.05.2026 iPhone 12 Pro: zwischen Login-Karte
   und Register-Karte fehlte sichtbarer Abstand). Wir nutzen `gap` statt `margin-top`,
   damit der Abstand nur zwischen den Karten greift und nicht oberhalb der ersten —
   und bleibt stabil, falls das DOM mal eine dritte Karte erhaelt. Gleicher Wert wie
   Desktop-Zwischenabstand (Z. 11152-11157), damit Mobil/Desktop optisch konsistent. */
@media (max-width: 767px) {
    .customcheckout-checkout-customcreateaccount .login-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }
    .customcheckout-checkout-customcreateaccount .login-container > .block.block-customer-login {
        order: 1 !important;
    }
    .customcheckout-checkout-customcreateaccount .login-container > .customerrightside {
        order: 2 !important;
    }
}

/* ============================================================
   Customcheckout Account-Create-Page — Header + Container Fixes
   ------------------------------------------------------------
   Probleme die hier behoben werden (User-Feedback):
     1) Header oben hat einen grauen Hintergrund (#e7e7e745) — soll WEISS werden.
        Quelle der Regel: app/code/Solutioo/Customcheckout/view/frontend/web/css/source/_checkout.less
        Z. 2400-2408 (kompiliert in checkout-m.css). Wir overriden hier mit !important.
     2) Header rendert nicht über die volle Bildschirmbreite — wirkt linksbuendig
        mit Luft rechts. Vermutlich begrenzt ein Eltern-Container die Breite.
     3) Linker/rechter Spalten-Container (Registrierung + Gast-Block) und der
        eingebettete blaue "Ich moechte als Gast bestellen."-Block rutschen
        rechts aus dem weissen Kasten heraus —
        Ursache ist u.a. das Inline-CSS in
        app/code/Solutioo/Customcheckout/view/frontend/templates/form/login.phtml
        (Z. 107-117), das margin-left: 50px !important und padding-right: 10%
        auf .block.block-customer-login setzt und die Spaltenbreiten verzieht.
     4) Der Login-Container ("Ich habe bereits ein Kundenkonto.") hatte rechts
        kein Padding — gleiche Ursache wie 3. (Reihenfolge Spalten: per Flexbox
        order: Login zuerst, Registrierung+Gast danach.)
   ============================================================ */

/* --- 1) Header: weiss + volle Breite --- */
body.checkout-index-index header.page-header,
body.customcheckout-checkout-customcreateaccount header.page-header {
    background: #ffffff !important;
    background-color: #ffffff !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* --- Mobile (≤767): Checkout-Header bekommt 20 px seitliches Padding ---
   User-Wunsch 19.05.2026 (iPhone 12 Pro 390 px, URL /checkout/, DevTools-
   Inspector auf `header.page-header` zeigte vorher `padding: 20px 0px;
   background: #FFFFFF` — Logo + Truststamps kleben an den Viewport-Kanten):
   „mobil im checkout beim Header rechts und links padding von 20px". Wir
   ueberschreiben die `padding-left/right: 0 !important`-Regel oben (selbe
   Specificity 0,2,1 plus !important, Cascade-Tie-Break ueber Reihenfolge —
   diese Regel laedt nach, also gewinnt sie). Der Top/Bottom-Wert (20 px aus
   Theme) bleibt unangetastet, indem wir nur die seitlichen Properties
   setzen. Greift auf BEIDEN Checkout-Body-Klassen (`checkout-index-index`
   *und* `customcheckout-checkout-customcreateaccount`), damit die Header-
   Optik im gesamten Checkout-Flow konsistent ist. */
@media (max-width: 767px) {
    body.checkout-index-index header.page-header,
    body.customcheckout-checkout-customcreateaccount header.page-header {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* Eltern-Wrapper: stellt sicher, dass page-wrapper kein max-width den Header begrenzt */
body.customcheckout-checkout-customcreateaccount,
body.customcheckout-checkout-customcreateaccount .page-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Innerer Header-Inhalt bleibt zentriert (Logo + Truststamps) */
body.customcheckout-checkout-customcreateaccount header.page-header .header.content,
body.customcheckout-checkout-customcreateaccount header.page-header > .header,
body.customcheckout-checkout-customcreateaccount header.page-header .header-logo-wrapper {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* --- Mobile (≤767px): Checkout-Header — Logo oben, Trust-Badges darunter nebeneinander --- */
@media (max-width: 767px) {
    body.checkout-index-index.bs-header-v2 header.page-header,
    body.customcheckout-checkout-customcreateaccount.bs-header-v2 header.page-header {
        display: block !important;
        position: static !important;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        grid-template-areas: none !important;
    }

    body.checkout-index-index.bs-header-v2 header.page-header .header-logo-wrapper .logo-wrapper,
    body.customcheckout-checkout-customcreateaccount.bs-header-v2 header.page-header .header-logo-wrapper .logo-wrapper {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: auto !important;
        pointer-events: auto !important;
    }

    body.checkout-index-index.bs-header-v2 header.page-header .header-logo-wrapper .logo-wrapper #logo,
    body.customcheckout-checkout-customcreateaccount.bs-header-v2 header.page-header .header-logo-wrapper .logo-wrapper #logo {
        min-height: 48px !important;
        min-width: 140px !important;
        /* Logo nur aus dem <img>; kein zusätzliches Background-SVG (sonst doppelt). */
        background: none !important;
    }

    body.checkout-index-index.bs-header-v2 header.page-header .header-logo-wrapper .logo-wrapper #logo img,
    body.customcheckout-checkout-customcreateaccount.bs-header-v2 header.page-header .header-logo-wrapper .logo-wrapper #logo img {
        display: block !important;
        max-height: 56px !important;
        width: auto !important;
        max-width: min(220px, 90vw) !important;
        margin: 0 auto !important;
    }

    body.checkout-index-index header.page-header .header.content,
    body.customcheckout-checkout-customcreateaccount header.page-header .header.content {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.checkout-index-index #logo,
    body.customcheckout-checkout-customcreateaccount #logo {
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    body.checkout-index-index .header-logo-wrapper,
    body.customcheckout-checkout-customcreateaccount .header-logo-wrapper {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "logo"
            "badges" !important;
        row-gap: 10px !important;
        column-gap: 0 !important;
        align-items: start !important;
        width: 100% !important;
    }

    body.checkout-index-index .logo-wrapper,
    body.customcheckout-checkout-customcreateaccount .logo-wrapper {
        grid-area: logo !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        max-width: none !important;
        padding-left: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
        float: none !important;
    }

    body.checkout-index-index .logo-wrapper #logo img,
    body.customcheckout-checkout-customcreateaccount .logo-wrapper #logo img {
        max-height: 60px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    body.checkout-index-index .header_custom_logo_wrap,
    body.customcheckout-checkout-customcreateaccount .header_custom_logo_wrap {
        grid-area: badges !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-gap: 12px !important;
        align-items: center !important;
        justify-items: center !important;
        width: 100% !important;
    }

    body.checkout-index-index .header_custom_logo_wrap .logo,
    body.customcheckout-checkout-customcreateaccount .header_custom_logo_wrap .logo {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
    }

    body.checkout-index-index .header_custom_logo_wrap .logo img,
    body.customcheckout-checkout-customcreateaccount .header_custom_logo_wrap .logo img {
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 56px !important;
        display: block !important;
        margin: 0 auto !important;
        object-fit: contain !important;
    }
}

/* --- 2) Container-Padding-Korrekturen (Desktop) ---
   Inline-Style aus login.phtml (margin-left: 50px !important; padding-right: 10%)
   wird hier hart ueberschrieben, damit der weisse Login-Kasten rechts wieder
   sauberes Card-Padding hat und nicht aus der Spalte herauslaeuft. */
@media (min-width: 1200px) {
    /* Kein horizontaler Margin/Padding mehr am .login-container selbst — der
       aeussere Rand wird vom Eltern-Content-Container (.page-main / .columns)
       bestimmt, damit die Cards buendig auf EINER Linie mit „zurueck zum
       Warenkorb"-Button, Footer-Kanten etc. sitzen. */
    body.customcheckout-checkout-customcreateaccount .login-container {
        max-width: none !important;
        width: 100% !important;
        margin: 30px 0 5% 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        align-items: flex-start !important;
    }

    body.customcheckout-checkout-customcreateaccount .login-container > .block.block-customer-login {
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 28px !important;
        padding-right: 28px !important;
        box-sizing: border-box !important;
    }

    body.customcheckout-checkout-customcreateaccount .login-container > .customerrightside {
        margin: 0 !important;
        padding: 28px !important;
        padding-right: 28px !important;
        box-sizing: border-box !important;
    }
}

/* --- 3) "Neu bei badshop.de" / guestcustomer_block: nicht ueber den Card-Rand hinaus ---
   Liegt im .customerrightside und nimmt 100% Breite des Inner-Padding-Bereichs ein.
   box-sizing border-box damit padding 24px (siehe oben Z. 9394-9399) nicht zur
   Breite addiert wird. */
body.customcheckout-checkout-customcreateaccount .customerrightside .guestcustomer_block,
body.customcheckout-checkout-customcreateaccount .login-container .guestcustomer_block.block.block-new-customer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

/* ============================================================
   Customer Account (body.account): max. 1440px wie Shop, zentriert — nicht volle Bildschirmbreite
   body.account kommt von layout handle "customer_account" (Dashboard, Edit, Adresse, Bestellungen,
   Wunschliste, Newsletter im Konto, …). #maincontent.page-main: Spezifität gegen Theme
   web/css/source/_layout.less (Desktop: .page-main { max-width: 100% }).
   ============================================================ */
body.account #maincontent.page-main {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Luft unter Mega-Menü (unabhängig von Flash-Message-Pills; ohne Pill sonst ~9px) */
    padding-top: 28px !important;
    /* Luft vor Newsletter-Balken (#bs-newsletter-bar unterhalb von .page-main) */
    padding-bottom: 56px !important;
}

body.account .columns {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body.account .columns .column.main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Konto-Löschflow ohne customer_account-Layout (eigenes handle) */
body[class*="accountdelete-"] #maincontent.page-main {
    max-width: 1440px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
body.customer-account-edit .form-edit-account > .fieldset,
body.customer-account-edit .form-edit-account .fieldset {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* ============================================================
   Kontaktseite /kontakt (Magento_Contact, body.contact-index-index)
   V2: Brand-Blautöne, weiche Eingabefelder, Primärbutton als Pill
   ============================================================ */
body.contact-index-index {
    margin: 0 !important;
}

/* Vertikaler Abstand zu Header/Footer: endgültig in customdesign-responsive.css (schlägt .page-main-Breakpoints) */
/* Hauptspalte: gleiche Maximalbreite wie Theme-Kopfzeile/Fußzeile (@layout__max-width 1440px) */
body.contact-index-index .column.main {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    float: none;
    width: 100%;
    box-sizing: border-box;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.contact-index-index .column.main > .page-title,
body.contact-index-index .column.main .page-title {
    border-bottom: none;
    padding: 0 0 4px;
    margin: 0 0 20px;
    width: 100%;
    display: block;
}

body.contact-index-index .column.main .page-title h1 {
    font-family: 'Montserrat', 'Quicksand', sans-serif;
    font-weight: 700;
    font-size: clamp(26px, 3.5vw, 34px);
    color: var(--bs-blue, #00446a);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

body.contact-index-index .col2-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    body.contact-index-index .col2-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: 40px 36px;
    }
}

body.contact-index-index #contact-form .contacttext {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--bs-blue-gray, #4a6886);
    padding-bottom: 22px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(0, 68, 106, 0.1);
}

body.contact-index-index #contact-form .fieldset {
    margin: 0;
    padding: 0;
}

body.contact-index-index #contact-form .fieldset .field .label {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-blue, #00446a);
    margin-top: 18px;
    margin-bottom: 6px;
    padding-right: 0;
    width: auto;
}

body.contact-index-index #contact-form .fieldset .field .label span {
    color: inherit;
}

body.contact-index-index #contact-form .control input.input-text,
body.contact-index-index #contact-form .control textarea.input-text {
    border: 2px solid var(--bs-blue-light, #dce8f0);
    border-radius: 12px;
    background: #fff;
    padding: 12px 16px;
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    color: var(--bs-blue, #00446a);
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.contact-index-index #contact-form .control textarea.input-text {
    min-height: 148px;
    resize: vertical;
    line-height: 1.5;
}

/* Eigenes Soft-Focus (wie Checkout-Inputs) — globalen Outline+Inset-Doppelring abschalten */
html body.contact-index-index #contact-form .control input.input-text:focus,
html body.contact-index-index #contact-form .control textarea.input-text:focus,
html body.contact-index-index #contact-form .control input.input-text:focus-visible,
html body.contact-index-index #contact-form .control textarea.input-text:focus-visible {
    border-color: var(--bs-blue, #00446a);
    box-shadow: 0 0 0 4px rgba(0, 68, 106, 0.1) !important;
    outline: none !important;
}

body.contact-index-index #contact-form .actions-toolbar {
    margin-top: 8px;
}

body.contact-index-index #contact-form .actions-toolbar .primary {
    margin: 8px 0 0;
}

body.contact-index-index #contact-form .actions-toolbar .primary p.required {
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    color: var(--bs-blue-gray, #6b8fa8);
    margin: 0 0 12px;
}

body.contact-index-index #contact-form .actions-toolbar .primary .action.submit.primary {
    border-radius: 999px !important;
    background: var(--bs-blue, #00446a) !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    color: #fff !important;
    font-family: 'Montserrat', 'Quicksand', sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 36px !important;
    line-height: 1.3 !important;
    box-shadow: 0 2px 12px rgba(0, 68, 106, 0.18);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

body.contact-index-index #contact-form .actions-toolbar .primary .action.submit.primary:hover {
    background: #003556 !important;
    border-color: #003556 !important;
    box-shadow: 0 4px 18px rgba(0, 68, 106, 0.28);
    transform: translateY(-1px);
}

body.contact-index-index #contact-form .actions-toolbar .primary .action.submit.primary span {
    color: inherit !important;
}

/* CMS-Block „datenschutzhinweis“ steht als Geschwister direkt unter #contact-form */
body.contact-index-index .col2-grid-left #contact-form + * {
    margin-top: 20px;
}

body.contact-index-index .kontaktbild {
    font-family: 'Quicksand', sans-serif;
    max-width: 100%;
}

body.contact-index-index .kontaktbild img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 16px;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(0, 68, 106, 0.12);
}

body.contact-index-index .kontaktbild > strong {
    font-family: 'Montserrat', 'Quicksand', sans-serif;
    font-size: 18px !important;
    color: var(--bs-blue, #00446a) !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}

body.contact-index-index .kontaktbild .tellink {
    color: var(--bs-blue, #00446a);
    text-decoration: none;
    font-weight: 700;
}

body.contact-index-index .kontaktbild .tellink:hover {
    color: var(--bs-accent-color, #ec6608);
    text-decoration: underline;
}

body.contact-index-index .kontaktbild p {
    font-size: 14px;
    line-height: 1.65;
    color: var(--bs-blue-gray, #4a6886);
    margin: 10px 0 0;
}

/* =====================================================
   Merkliste — Kommentarfeld (<textarea>) max-height
   =====================================================
   `.products-grid.wishlist .product-item-comment` ist im Theme-LESS
   (Magento_Wishlist/web/css/source/_customer.less Zeile ~114) als
   `display:block; height:42px` definiert. Browser-Default fuer <textarea>
   ist aber `resize: vertical` → der Nutzer kann das Feld nach unten
   beliebig vergroessern, was bei einer 3-Spalten-Kachelreihe einzelne
   Karten kaputt streckt (siehe Screenshot 17:21:49). Begrenze die maximale
   Resize-Hoehe auf 600px — die Default-Hoehe 42px bleibt, der Nutzer kann
   nach wie vor erweitern, aber nicht mehr ueber den Kartenrahmen hinaus.
   Selektor mit `textarea`-Qualifier sichert hohe Spezifitaet ggue. dem
   Theme-LESS-Standardwert. */
.products-grid.wishlist textarea.product-item-comment,
.products-grid.wishlist .product-item-comment {
    max-height: 400px;
}

/* =====================================================
   Sicherheitsnetz: leere .add-bottom (Energielabel-Wrapper) verstecken
   =====================================================
   Das Template `app/code/Badshop/ProductDataExtend/view/frontend/templates/list/bottomdata.phtml`
   gibt jetzt den Wrapper nur noch aus, wenn Energielabel-HTML vorhanden ist.
   Sollte aus anderem Code-Pfad noch ein leeres `.add-bottom` (nur Whitespace)
   gerendert werden, faengt diese Regel den sichtbaren Leerraum auf der
   Kategorie/Suche-Kachel ab. */
.customdesign-catv2 .product-item .add-bottom:empty {
    display: none !important;
}

/* =====================================================
   Merkliste — Konfigurierbare Artikel: Optionen einklappbar
   =====================================================
   Konfigurierbare Artikel (z. B. HSK Designheizkoerper) hatten in der
   Wishlist-Kachel ALLE gewaehlten Optionen aufgeklappt sichtbar (Farbe,
   Antikorrosionsschutzschicht, Betriebsart, Anschlussvariante, Montage-Set,
   Heizstab, Montageart) → die Kachel war 2-3x hoeher als die Nachbarkacheln,
   die 3-Spalten-Reihe rasterte sichtbar auf.

   Loesung: Native HTML5 <details>/<summary> als Toggle (kein JS noetig,
   tastatur- und screenreader-freundlich). Markup-Aenderung in
   `app/design/frontend/Badshop/default-theme/Magento_Wishlist/templates/options_list.phtml`.

   Standard: zugeklappt. Klick auf den Button "Konfiguration anzeigen"
   klappt aus, im offenen Zustand zeigt der Button "Konfiguration
   ausblenden". Chevron rotiert per CSS. */
.products-grid.wishlist .wishlist-options-toggle {
    margin: 12px 0 8px 0;
}
.products-grid.wishlist .wishlist-options-toggle > .wishlist-options-toggle__summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--bs-blue-light, #b8d4e8);
    border-radius: 999px;
    background: #f0f6fa;
    color: var(--bs-blue, #00446a);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    user-select: none;
    transition: background-color .15s, border-color .15s, color .15s;
}
.products-grid.wishlist .wishlist-options-toggle > .wishlist-options-toggle__summary::-webkit-details-marker {
    display: none;
}
.products-grid.wishlist .wishlist-options-toggle > .wishlist-options-toggle__summary::marker {
    content: '';
}
.products-grid.wishlist .wishlist-options-toggle > .wishlist-options-toggle__summary:hover,
.products-grid.wishlist .wishlist-options-toggle > .wishlist-options-toggle__summary:focus-visible {
    background: #e1edf5;
    border-color: #8db8d4;
    color: var(--bs-blue, #00446a);
}
.products-grid.wishlist .wishlist-options-toggle__chevron {
    flex-shrink: 0;
    transition: transform .2s ease-in-out;
}
.products-grid.wishlist .wishlist-options-toggle[open] .wishlist-options-toggle__chevron {
    transform: rotate(180deg);
}
.products-grid.wishlist .wishlist-options-toggle .wishlist-options-toggle__label--hide {
    display: none;
}
.products-grid.wishlist .wishlist-options-toggle[open] .wishlist-options-toggle__label--show {
    display: none;
}
.products-grid.wishlist .wishlist-options-toggle[open] .wishlist-options-toggle__label--hide {
    display: inline;
}
.products-grid.wishlist .wishlist-options-toggle .wishlist-item-options-list {
    margin-top: 10px;
}
.products-grid.wishlist .wishlist-options-toggle .wishlist-item-options-list .option-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.products-grid.wishlist .wishlist-options-toggle .wishlist-item-options-list .option-item:last-child {
    margin-bottom: 0;
}
.products-grid.wishlist .wishlist-options-toggle .wishlist-item-options-list .option-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-right: 10px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    padding: 3px;
    background: #fff;
    flex-shrink: 0;
}
.products-grid.wishlist .wishlist-options-toggle .wishlist-item-options-list .option-text .option-label {
    font-weight: bold;
    display: block;
    color: #666;
    font-size: 12px;
}
.products-grid.wishlist .wishlist-options-toggle .wishlist-item-options-list .option-text .option-value {
    display: block;
    font-size: 13px;
}

/* ============================================================
   HOVER-KARTEN-TOGGLE (Backend: solutioo_customdesign/kategorie/product_card_hover_enabled)
   ============================================================
   Body-Klasse `bs-no-hover-cards` wird von BodyClassInjector gesetzt, wenn der
   Admin den Toggle auf Nein stellt. Wirkt zusammen mit:
   - JS-Init-Guard in category/list.phtml + Searchsol/index.phtml (kein
     productlist.js Hover-Toggle wird mehr aktiviert)
   - Diesem CSS-Block als Sicherheitsnetz (falls Browser-Cache veraltetes JS
     mit .hover-Klasse hat) UND fuer den Lieferzeit-Reveal in der Kompaktkachel.
   ============================================================ */

/* (a) Defensive Neutralisierung der aufklappenden Hover-Karte.
   Greift nur, wenn trotz JS-Guard die .hover-Klasse aus einem alten Bundle
   doch noch gesetzt wuerde. */
body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item.hover {
    overflow: hidden !important;
    z-index: auto !important;
}
body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent {
    position: static !important;
    width: auto !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
}
/* Default-Sperre: Im bs-no-hover-cards-Modus wird der Hover-Slider NICHT
 * angezeigt — AUSSER das Item ist im aktiven Lite-Hover-Modus (Klasse
 * .bs-hover-swap, vom productlist.js beim mouseenter gesetzt). So bleibt
 * der Schutz fuer „verirrte" Slider-HTML-Reste erhalten, der gewuenschte
 * Bild-Swap-Effekt funktioniert aber dennoch. */
body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item:not(.bs-hover-swap) .hover-slider {
    display: none !important;
}
/* Lite-Image-Swap (Bild1 <-> Bild2 <-> Bild1) im bs-no-hover-cards-Modus:
 * gleiche Mechanik wie .product-item.hover .hover-slider, aber ohne die
 * aufklappende Detail-Karte. Animation und Slide-Layout sind identisch zur
 * existierenden Hover-Karten-Variante (siehe @keyframes hoverSlideUp). */
body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item.bs-hover-swap .product-image-container {
    position: relative;
    overflow: hidden;
}
body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item.bs-hover-swap .hover-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 300%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    animation: hoverSlideUp 5s ease-in-out infinite;
    background: transparent;
    z-index: 1;
}
body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item.bs-hover-swap .hover-slider__slide {
    flex: 0 0 33.333%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    height: 33.333%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
}
body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item.bs-hover-swap .hover-slider__slide img {
    /* Identisch zum normalen .product-image-photo (Z. 6038-6043): kein Padding,
     * cover statt contain (kein weisser Letterbox-Rand), Bildmitte zentriert.
     * Die obere Rundung kommt vom .product-item-Container (border-radius 24px +
     * overflow hidden, Z. 5940-5948) — das Bild schliesst bundig mit den
     * abgerundeten oberen Ecken der Karte ab, genauso wie das statische Bild
     * ohne Hover. */
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center center;
    padding: 0;
    box-sizing: border-box;
}

/* (b) Lieferzeit-Reveal in der Kompaktkachel auf Desktop mit Hover-Geraet.
   customdesign-responsive.css Z. 4800-4803 versteckt den .versand-Block
   in der Kompaktkachel (nur Hover-Karte zeigt ihn). Bei deaktiviertem Hover
   muss die Lieferzeit dort sichtbar sein. Wir blenden den Container wieder
   ein, verstecken aber Versandart-Icon und "gratis Versand"-Badge gezielt,
   sodass nur die .lieferzeit-Zeile sichtbar bleibt. Media-Query identisch
   zur Original-Verstecken-Regel, damit Mobile/Touch absolut nicht beruehrt
   werden (dort war .versand schon immer komplett sichtbar). */
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand {
        display: block !important;
        /* Original _category.less Z. 22: .versand { height: 40px } — fuer altes 3-Elemente-Layout
           (Icon + Lieferzeit + Gratis-Versand). Mit deaktiviertem Hover zeigen wir nur die
           .lieferzeit (~22 px hoch), Container blieb aber 40 px hoch → 18 px leerer Raum unten.
           height auto sammelt den Container auf die Hoehe der einzigen sichtbaren Zeile. */
        height: auto !important;
    }
    body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand > .icon-versand,
    body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item:not(.hover) .main-data .versand > .gratis-versand {
        display: none !important;
    }

    /* (c) Sichtbarer Ruhe-Hover-Effekt auf Desktop, wenn die ausklappende Karte deaktiviert ist.
       Original Z. 6056-6059 reduziert auf 1024+ den :hover bewusst auf einen fast unsichtbaren
       Border (20% Opacity blau-grau) und entfernt den Box-Shadow komplett — gedacht als
       „Ruhe vor dem Sturm" bis productlist.js nach ~500ms die .hover-Klasse setzt. Bei
       deaktiviertem Toggle setzt JS die .hover-Klasse nie, dadurch bleibt der Hover quasi
       unsichtbar. Hier den ursprünglich gemeinten subtilen Effekt (aus Z. 6041-6044) als
       Ruhezustand wieder aktivieren: deutlich erkennbarer Border + leichter Schatten.
       Spezifität: Klassen-Verdoppelung mit body.bs-no-hover-cards schlägt den Original-
       Block bei gleicher Source-Order durch zusätzliche body-Klasse. */
    body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item:hover {
        border-color: rgba(0, 68, 106, 0.35) !important;
        box-shadow: 0 4px 20px rgba(0, 68, 106, 0.10) !important;
    }
    /* Rabatt-Kachel (orange-akzentuiert) hat eigenen Hover-Akzent — beibehalten/verstärken */
    body.bs-no-hover-cards.customdesign-catv2 .products-grid .product-items .product-item.bs-discount-highlight:hover {
        border-color: var(--bs-accent-color, #ec6608) !important;
        box-shadow: 0 4px 20px rgba(236, 102, 8, 0.18) !important;
    }
}

/* ============================================================
   Guest-Wishlist-Toast — inline Pill, oben mittig fixiert
   ============================================================
   Wird per JS (wishlist-redirect-fix.js → showGuestToast()) als direktes
   Kind von <body> eingefuegt, wenn ein nicht-eingeloggter User auf einen
   Wishlist-Add-Button klickt. Statt einer Server-Redirect-Schleife zur
   Login-Page (mit kaum sichtbarem Session-Message-Flash) zeigen wir den
   Hinweis sofort auf der aktuellen Seite — kein Page-Wechsel, kein Verlust
   des PDP-Scroll-Standes.

   - Farbe: rotes Rot wie das Login-Pill-Banner (.bs-form-error in
     login-modern.css) — visuell konsistent als „Anmelden noetig"-Signal.
   - Position: fixed top, center horizontal. Mobile: top 16px (knapp unter
     Sticky-Header); Desktop: top 24px (etwas mehr Atem-Raum).
   - Auto-Hide nach 6 s (JS) via Klassen-Toggle .bs-wishlist-guest-toast--show.
   - z-index 100000 = ueber Sticky-Header und Modals (ws-ov hat 100000,
     ws-sb 100001 — wir nehmen 100002 damit der Toast auch im Drawer-
     Stacking-Context oben bleibt, falls der ueberhaupt offen ist).
*/
.bs-wishlist-guest-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translate(-50%, -12px);
    z-index: 100002;
    max-width: calc(100% - 32px);
    padding: 14px 20px;
    background: #b00020;
    color: #fff;
    border-radius: 9999px;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 14px;
}

.bs-wishlist-guest-toast--show {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.bs-wishlist-guest-toast__text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.bs-wishlist-guest-toast__login {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid #fff;
    border-radius: 9999px;
    background: transparent;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.bs-wishlist-guest-toast__login:hover,
.bs-wishlist-guest-toast__login:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    outline: none;
}

/*
 * :active/:focus (Maus-Klick) OHNE eigene Regel hier faellt sonst auf Magento
 * Lumas globales "button:focus, button:active { background: rgba(0,68,106,.6); ... }"
 * (styles-m.min.css) zurueck -- das Marken-Blau sieht auf dem roten Toast wie ein
 * UI-Bug aus ("Button wird beim Klicken blau"). Eigene Klasse gewinnt per
 * Spezifitaet gegen die Element+Pseudoklassen-Regel, kein !important nötig. */
.bs-wishlist-guest-toast__login:active,
.bs-wishlist-guest-toast__login:focus {
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
    color: #fff;
    outline: none;
}

.bs-wishlist-guest-toast__close {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    margin: -4px -6px -4px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    opacity: 0.92;
}

.bs-wishlist-guest-toast__close-icon {
    display: flex;
    width: 16px;
    height: 16px;
    color: #fff;
}

.bs-wishlist-guest-toast__close-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.bs-wishlist-guest-toast__close:hover,
.bs-wishlist-guest-toast__close:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    opacity: 1;
    outline: none;
}

/* Gleicher Grund wie beim __login-Button oben: Luma-Default fuer button:active
 * sonst blaues Highlight auf dem roten Toast. */
.bs-wishlist-guest-toast__close:active,
.bs-wishlist-guest-toast__close:focus {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
    outline: none;
}

@media (min-width: 768px) {
    .bs-wishlist-guest-toast {
        top: 24px;
        font-size: 15px;
        padding: 14px 24px;
        max-width: 640px;
    }
}

/* Merklisten-Preis-Lock — Merkliste */
.cd-wishlist-lock-price {
    margin-top: 8px;
    padding: 10px 12px;
    background: #eef5fa;
    border: 1px solid #c5d9e8;
    border-radius: 6px;
}

.cd-wishlist-lock-price__hint {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 1.4;
    color: #1b3a4b;
}

.cd-wishlist-lock-price__amount {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #c0392b;
}

.cd-wishlist-lock-price__codes {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.35;
    color: #5a7285;
}

/* ============================================================
   Markenwelt — /markenwelt (categorypath-markenwelt)
   ============================================================ */
body.categorypath-markenwelt.category-markenwelt .column.main > h1[itemprop="name"] {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 1.25 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 16px 0 24px !important;
    text-transform: none !important;
}

body.categorypath-markenwelt .subcat-listing .marken-subcats {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* .firstletter ist Geschwister von ul.marken-subcats, nicht Kind davon */
body.categorypath-markenwelt .subcat-listing > .firstletter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    margin: 20px 0 14px 10px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--bs-blue-light, #f0f6fa) !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    color: var(--bs-blue, #00446a) !important;
    text-transform: uppercase;
    clear: both;
    box-shadow: 0 2px 8px rgba(0, 68, 106, 0.08);
}

body.categorypath-markenwelt .subcat-listing .marken-subcats li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 100%;
}

body.categorypath-markenwelt .subcat-listing .marken-subcats li a img {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 10px !important;
    border: 1px solid var(--bs-blue-light, #f0f6fa) !important;
    border-radius: 12px !important;
    background: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.categorypath-markenwelt .subcat-listing .marken-subcats li a:hover img,
body.categorypath-markenwelt .subcat-listing .marken-subcats li a:focus-visible img {
    border-color: var(--bs-blue-gray, #4a6886) !important;
    box-shadow: 0 4px 14px rgba(0, 68, 106, 0.08);
}

body.categorypath-markenwelt .subcat-listing .marken-subcats .name-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: var(--bs-blue, #00446a) !important;
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 52px !important;
    margin: 10px 8px 12px !important;
    box-sizing: border-box !important;
}

body.categorypath-markenwelt .subcat-listing .marken-subcats .name-wrapper::before {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    border-bottom-color: var(--bs-blue, #00446a) !important;
}

body.categorypath-markenwelt .subcat-listing .marken-subcats .name-wrapper .name {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: #fff !important;
    text-align: center !important;
    width: 100% !important;
    hyphens: none !important;
    overflow: hidden;
}

/* ============================================================
   Marken-Serienuebersicht — z. B. /pelipal-badmoebel (.subcat-listing .serien)
   Gleicher Look wie /markenwelt: solide Blau-Pille (#00446a statt des
   transluzenten @blue80 + Dreieck-Pointer aus _category.less) und abgerundete,
   dezent umrandete Bild-Karten. Trifft nur die Serien-Listen (ul.serien aus
   category_listing.phtml); /markenwelt nutzt ul.marken-subcats und bleibt
   unberuehrt.
   ============================================================ */
/* Marken-Ueberschrift (.marke-head h1, z. B. "Pelipal") in Montserrat — gleicher
   Stil wie die /markenwelt-H1. .marke-head ist der Marken-Kopfbereich (Logo +
   H1 + Kurztext) und nur auf Markenseiten vorhanden. */
.marke-head h1 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 1.25 !important;
    color: var(--bs-blue, #00446a) !important;
    margin: 16px 0 24px !important;
    text-transform: none !important;
}

/* Hersteller-Logo: SVG bevorzugt (BrandHeader), klar skaliert.
 * max-width braucht !important: customdesign-responsive setzt unter 1200px
 * `img { max-width:100% !important }` — breite Wordmark-SVGs (Laguna, Geberit, …)
 * würden sonst die volle Spaltenbreite füllen. */
.marke-head .marke-head__logo,
.marke-head img.marke-head__logo {
    display: block !important;
    max-width: 180px !important;
    max-height: 72px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

.marke-head .marke-head__logo--svg {
    max-width: 200px !important;
    max-height: 80px !important;
}

/* „Weitere Informationen über …“ — gefüllte Blau-Pille wie Serien-Labels (#00446a) */
.marke-head .weiterlesen,
.marke-head .weiterlesen.bs-btn-outline,
.marke-head .marke-head__more {
    display: inline-block !important;
    margin-top: 12px !important;
    padding: 12px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--bs-font-family, 'Quicksand', sans-serif) !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    text-align: center !important;
    color: #fff !important;
    background-color: var(--bs-blue, #00446a) !important;
    border: 2px solid var(--bs-blue, #00446a) !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.marke-head .weiterlesen:hover,
.marke-head .weiterlesen:focus-visible,
.marke-head .weiterlesen.bs-btn-outline:hover,
.marke-head .weiterlesen.bs-btn-outline:focus-visible,
.marke-head .marke-head__more:hover,
.marke-head .marke-head__more:focus-visible {
    background-color: var(--bs-blue-gray, #4a6886) !important;
    border-color: var(--bs-blue-gray, #4a6886) !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.subcat-listing .serien li a {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Offscreen-Kacheln nicht layouten — INP auf Serienübersichten (viele Kacheln).
 * WICHTIG: contain-intrinsic-size darf KEINE feste Breite setzen.
 * `280px` (beide Achsen) ließ CSS-Grid-Spuren auf min. 280px anwachsen;
 * unter overflow-x:clip (≤1199) wurde die rechte Serien-Spalte abgeschnitten
 * (Laguna/Avenarius mobil „Zickzack“ / nur Rand der 2. Spalte sichtbar). */
.subcat-listing .serien > li:nth-child(n+5) {
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
}

.subcat-listing .serien li a img {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 1px solid var(--bs-blue-light, #f0f6fa) !important;
    border-radius: 12px !important;
    background: #fff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.subcat-listing .serien li a:hover img,
.subcat-listing .serien li a:focus-visible img {
    border-color: var(--bs-blue-gray, #4a6886) !important;
    box-shadow: 0 4px 14px rgba(0, 68, 106, 0.08);
}

.subcat-listing .serien .name-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--bs-blue, #00446a) !important;
    border-radius: 9999px !important;
    padding: 8px 16px !important;
    min-height: 52px !important;
    height: auto !important;
    margin: 10px 8px 12px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Dreieck-Pointer ueber dem Label (Sprechblasen-Spitze, zeigt auf das Serien-Bild
   darueber) – analog zur Marken-Uebersicht (/markenwelt). Border-Trick, blau,
   mittig ueber der Pille. */
.subcat-listing .serien .name-wrapper::before {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    top: -5px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-bottom: 5px solid var(--bs-blue, #00446a) !important;
    border-right: 5px solid transparent !important;
    border-left: 5px solid transparent !important;
}

.subcat-listing .serien .name-wrapper .name {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    color: #fff !important;
    text-align: center !important;
    width: 100% !important;
    hyphens: none !important;
}

/* Leere Merkliste/Empty-Info-Meldung: auf Handy/Tablet mehr Abstand zwischen
   Warn-Icon und Text (Icon ueberlappte zuvor den Text). */
@media screen and (max-width: 1199px) {
    .message.info.empty {
        padding-left: 56px !important;
    }
    .message.info.empty > *:first-child:before {
        left: 12px !important;
        width: 32px !important;
        top: 50% !important;
        margin-top: 0 !important;
        transform: translateY(-50%) !important;
    }
}

/* Merkliste: globalen „Merkliste aktualisieren“-Button dauerhaft ausblenden.
   Das Theme-JS (Magento_Wishlist/js/updateWishlist) versteckt ihn nur per
   updBtn.hide() nach RequireJS/DOM-Ready und nutzt ihn rein programmatisch
   (Trigger-Click bei Mengen-/Kommentaraenderung). Ohne render-blockendes CSS
   blitzt er beim Seitenaufbau (z. B. nach dem Entfernen eines Artikels) kurz
   auf. display:none verhindert das Flackern; der Button bleibt im DOM, das
   programmatische .trigger('click') funktioniert weiterhin. */
body.wishlist-index-index #wishlist-view-form .actions-toolbar .primary .action.update {
    display: none !important;
}

/* Warenkorb-Einschub (Badshop_CartPopup): native Number-Spinner (Hoch/Runter-
   Pfeile) am Mengenfeld ausblenden — Mengenaenderung erfolgt ueber +/--Buttons.
   Diese Regeln zusaetzlich global (statt nur im JS-injizierten <style> des
   Einschubs), damit sie auch greifen, wenn der Browser noch das alte JS
   (mit appearance:none) gecacht hat. !important schlaegt das JS-injizierte
   appearance:none ohne !important.
   WICHTIG: Der AKTIVE Einschub (sidebar-trigger.js) nutzt die Klasse `.bs-qi`;
   `.bs-cart-qty-input` stammt aus der inaktiven cart-popup.js (Legacy) — beide
   abgedeckt. Das Input ist jetzt `type="text"` (s. sidebar-trigger.js), wodurch
   ohnehin kein Browser Spin-Buttons rendert; diese Regeln bleiben als Fallback. */
#bs-cart-sidebar input.bs-qi,
#bs-cart-sidebar input.bs-qi[type="number"],
#bs-cart-sidebar input.bs-cart-qty-input,
#bs-cart-sidebar input.bs-cart-qty-input[type="number"] {
    -moz-appearance: textfield !important;
    -webkit-appearance: textfield !important;
    appearance: textfield !important;
}
#bs-cart-sidebar input.bs-qi::-webkit-inner-spin-button,
#bs-cart-sidebar input.bs-qi::-webkit-outer-spin-button,
#bs-cart-sidebar input.bs-cart-qty-input::-webkit-inner-spin-button,
#bs-cart-sidebar input.bs-cart-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    display: none !important;
}

/* ============================================================
   FAQ-Seite (CMS "faq-haeufig-gestellte-fragen") — Markendesign
   Blau #00446a, Akzent-Orange #ec6608, Hellblau #f0f6fa,
   Grau-Blau #4a6886, Montserrat. Scoped auf die Body-Klasse;
   ersetzt die nuechterne _faq.less-Optik (Trennlinien/Unterstrich-
   Links) durch Karten + Chip-Schnellnavigation.
   Breite bewusst NICHT begrenzt -> nutzt die uebliche Shop-Content-
   breite (.page-main, max-width 1440px) wie der restliche Shop.
   ============================================================ */

/* mehr Luft nach unten zum Footer hin */
.cms-faq-haeufig-gestellte-fragen .column.main {
    padding-bottom: 60px;
}

/* Seitentitel ohne Unterstrich */
.cms-faq-haeufig-gestellte-fragen h1.page-title {
    color: #00446a;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    margin-bottom: 6px;
    /* Theme setzt border-bottom:1px solid #e0e0e0 (duenne graue Linie unter dem Titel)
       + padding-bottom:5px — beides entfernen; kein Akzent-Unterstrich mehr. */
    border-bottom: 0;
    padding-bottom: 0;
}

/* Schnellnavigation: die alten Unterstrich-Links werden zu Chips */
.cms-faq-haeufig-gestellte-fragen .pagenav {
    display: inline-block;
    margin: 0 8px 10px 0;
    padding: 9px 16px;
    background: #f0f6fa;
    color: #00446a;
    border: 1px solid rgba(0, 68, 106, .14);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cms-faq-haeufig-gestellte-fragen .pagenav:first-of-type {
    margin-top: 6px;
}
.cms-faq-haeufig-gestellte-fragen .pagenav:hover {
    background: #fff;
    color: #ec6608;
    border-color: #ec6608;
    box-shadow: 0 4px 12px rgba(0, 68, 106, .10);
    transform: translateY(-1px);
}

/* Tastatur-Fokus: weicher Schein statt Shop-Standard-Ring (Outline+Inset stapelt mit Pillenkante). */
html body.cms-faq-haeufig-gestellte-fragen .pagenav:focus-visible {
    background: #fff;
    color: #ec6608;
    border-color: #ec6608;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.18) !important;
    transform: translateY(-1px);
}
html body.cms-faq-haeufig-gestellte-fragen .pagenav:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* FAQ-Bloecke als Karten (ueberschreibt _faq.less Trenner/Abstaende) */
.cms-faq-haeufig-gestellte-fragen .faq_item {
    margin: 0 0 16px;
    padding: 24px 28px;
    border: 1px solid rgba(0, 68, 106, .10);
    border-top: 1px solid rgba(0, 68, 106, .10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 68, 106, .06);
    scroll-margin-top: 110px;
}
.cms-faq-haeufig-gestellte-fragen .faq_item:first-of-type {
    margin-top: 8px;
}
/* Mehr Luft zwischen der Chip-Schnellnavigation und der ersten Karte.
   (.faq_item:first-of-type greift nicht, da vor der Karte weitere DIV-Geschwister
   stehen — die erste Karte folgt aber direkt auf den letzten .pagenav-Chip.) */
.cms-faq-haeufig-gestellte-fragen .pagenav + .faq_item {
    margin-top: 28px;
}

/* Frage-Ueberschrift mit "?"-Badge im Akzent-Orange */
.cms-faq-haeufig-gestellte-fragen .faq_item h3 {
    position: relative;
    margin: 0 0 14px;
    padding: 0 0 12px 40px;
    color: #00446a;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    border-bottom: 1px solid rgba(0, 68, 106, .08);
}
.cms-faq-haeufig-gestellte-fragen .faq_item h3::before {
    content: "?";
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    background: #ec6608;
    border-radius: 50%;
}

/* Zwischenueberschriften (Online-/Telefonische-/E-Mail-Bestellung) */
.cms-faq-haeufig-gestellte-fragen .faq_item h4 {
    margin: 22px 0 8px;
    color: #4a6886;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

/* Fliesstext: lesbarer Zeilenabstand/Farbe */
.cms-faq-haeufig-gestellte-fragen .faq_item p {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.7;
    color: #33475b;
}
.cms-faq-haeufig-gestellte-fragen .faq_item p:last-child {
    margin-bottom: 0;
}

/* Links + klickbare data-key-Spans im Markenblau, Hover Akzent */
.cms-faq-haeufig-gestellte-fragen .faq_item a,
.cms-faq-haeufig-gestellte-fragen .faq_item span.data-key {
    color: #00446a;
    font-weight: 600;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color .15s ease;
}
.cms-faq-haeufig-gestellte-fragen .faq_item a:hover,
.cms-faq-haeufig-gestellte-fragen .faq_item span.data-key:hover {
    color: #ec6608;
}

/* Aufzaehlungen mit Akzent-Quadrat statt Standard-Bullet */
.cms-faq-haeufig-gestellte-fragen .faq_item ul {
    list-style: none;
    margin: 8px 0 16px;
    padding: 0;
}
.cms-faq-haeufig-gestellte-fragen .faq_item ul li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 24px;
    font-size: 15.5px;
    line-height: 1.6;
    color: #33475b;
}
.cms-faq-haeufig-gestellte-fragen .faq_item ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #ec6608;
}

/* Lieferhinweise-Kasten als Infobox (nur echte Container, NICHT das Bild).
   Im CMS-Content traegt aktuell nur das Spedition-Bild die Klasse
   .faq_lieferhinweise -> Infobox-Optik (blauer Rand/Padding) darf dort
   NICHT greifen (verursachte blauen Streifen + Ueberlauf). */
.cms-faq-haeufig-gestellte-fragen div.faq_lieferhinweise,
.cms-faq-haeufig-gestellte-fragen p.faq_lieferhinweise {
    margin: 12px 0;
    padding: 16px 20px;
    max-width: 100%;
    background: #f0f6fa;
    border: 1px solid rgba(0, 68, 106, .14);
    border-left: 4px solid #00446a;
    border-radius: 10px;
}

/* Bilder (u. a. Ausstellung, Spedition) mit Radius + weichem Schatten,
   nie ueber die Karte hinaus (box-sizing gegen Padding-Ueberlauf) */
.cms-faq-haeufig-gestellte-fragen .faq_item img {
    display: block;
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 68, 106, .10);
}
/* Spedition-Bild (Legacy-Produktseiten-Screenshot, 800x692): oberer
   Bereich enthaelt off-brand blaue Buttons ("Jetzt konfigurieren" /
   "Artikel merken") -> per object-fit oben wegschneiden, damit nur der
   relevante Teil (Reiter + Liefertext) sichtbar bleibt. */
.cms-faq-haeufig-gestellte-fragen .faq_item img.faq_lieferhinweise {
    display: block;
    width: 100%;
    max-width: 760px;
    aspect-ratio: 800 / 602;
    object-fit: cover;
    object-position: center bottom;
    margin: 4px 0;
}
/* Ausstellung: zwei Bilder nebeneinander. display:flow-root laesst die Karte die
   gefloateten Bilder umschliessen -> sie ragen nicht mehr unter die Karte in die
   naechste Frage. Beide Bilder floaten links (das generische .faq_item img setzt
   display:block, daher Float statt inline-block fuer sauberes Nebeneinander). */
.cms-faq-haeufig-gestellte-fragen #ausstellung {
    display: flow-root;
}
.cms-faq-haeufig-gestellte-fragen #ausstellung img {
    float: left;
    width: calc(50% - 6px);
    max-width: 495px;
    margin: 8px 12px 8px 0;
    vertical-align: top;
}
.cms-faq-haeufig-gestellte-fragen #ausstellung img.right {
    float: left;
    margin-right: 0;
}

@media (max-width: 767px) {
    .cms-faq-haeufig-gestellte-fragen .faq_item {
        padding: 18px 18px;
    }
    .cms-faq-haeufig-gestellte-fragen .faq_item h3 {
        font-size: 18px;
        padding-left: 36px;
    }
    .cms-faq-haeufig-gestellte-fragen #ausstellung img,
    .cms-faq-haeufig-gestellte-fragen #ausstellung img.right {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 6px 0;
    }
}

/* ============================================================
   Glossar-Seite (CMS "glossar", body.cms-glossar) — Markendesign
   Blau #00446a, Akzent-Orange #ec6608, Hellblau #f0f6fa,
   Grau-Blau #4a6886, Montserrat. Scoped auf die Body-Klasse;
   ersetzt die nuechterne _glossar.less-Optik durch A-Z-Chip-
   Schnellnavigation, blaue Buchstaben-Badges und Begriffs-Karten.
   Breite bewusst NICHT begrenzt -> uebliche Shop-Content-Breite.
   ============================================================ */

/* mehr Luft nach unten zum Footer hin */
.cms-glossar .column.main {
    padding-bottom: 60px;
}

/* Seitentitel + Sektionstitel in Montserrat/Blau, ohne Unterstrich */
.cms-glossar .column.main h1.page-title {
    color: #00446a;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 6px;
}
.cms-glossar .column.main h2 {
    color: #00446a;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin: 30px 0 4px;
}

/* Intro-Fliesstext + Links */
.cms-glossar .column.main p {
    font-size: 15.5px;
    line-height: 1.7;
    color: #4a6886;
}
.cms-glossar .column.main a {
    color: #00446a;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    border-bottom: 0 !important; /* Theme-Border-Bottom entfernen, sonst doppelte Unterstreichung */
    transition: color .15s ease;
}
.cms-glossar .column.main a:hover,
.cms-glossar .column.main a:focus {
    color: #ec6608;
}

/* A-Z-Schnellnavigation als Chips (Desktop-Index-Sidebar .coll_fixed) */
.cms-glossar .column.main .cap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: #fff;
    color: #00446a;
    border: 1px solid rgba(0, 68, 106, .14);
    border-radius: 999px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cms-glossar .column.main .cap:hover {
    background: #00446a;
    color: #fff;
    border-color: #00446a;
    box-shadow: 0 4px 12px rgba(0, 68, 106, .18);
    transform: translateY(-1px);
}

/* Tastatur-Fokus: weicher Schein statt Outline+Inset-Doppelkontur auf der Chip-Kante. */
html body.cms-glossar .column.main .cap:focus-visible {
    background: #00446a;
    color: #fff;
    border-color: #00446a;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.28) !important;
    transform: translateY(-1px);
}
html body.cms-glossar .column.main .cap:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
/* leere Buchstaben (kein Begriff vorhanden) dezent + nicht klickbar */
.cms-glossar .column.main .cap.empty {
    opacity: .35;
    background: transparent;
    box-shadow: none;
    transform: none;
    pointer-events: none;
    cursor: default;
}

/* Begriffsliste: Bullets weg */
.cms-glossar .column.main ul.collapsible {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

/* Buchstaben-Trenner: blaue runde Badge + Hairline nach rechts */
.cms-glossar .column.main li.coll_index {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 36px 0 16px;
    padding: 0;
    scroll-margin-top: 110px;
}
.cms-glossar .column.main li.coll_index:first-child {
    margin-top: 22px;
}
.cms-glossar .column.main li.coll_index::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: rgba(0, 68, 106, .14);
}
.cms-glossar .column.main li.coll_index strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0;
    background: #00446a;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 20px;
    border-radius: 50%;
}

/* Begriffe als Karten */
.cms-glossar .column.main li.coll_item {
    margin: 0 0 12px;
    padding: 16px 22px;
    background: #fff;
    border: 1px solid rgba(0, 68, 106, .10);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 68, 106, .06);
}
/* Begriff = klickbarer Akkordeon-Header (Montserrat/Blau) mit Chevron rechts */
.cms-glossar .column.main li.coll_item > strong {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0;
    color: #00446a;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.35;
    cursor: pointer;
    transition: color .15s ease;
}
.cms-glossar .column.main li.coll_item > strong:hover {
    color: #ec6608;
}
/* Akkordeon-Header (tabindex=0): eine Kontur, kein globaler Outline+Inset-Stack auf der Karte. */
html body.cms-glossar .column.main li.coll_item > strong.clickable-item:focus-visible,
html body.cms-glossar .column.main li.coll_item > strong[tabindex]:focus-visible {
    color: #ec6608;
    outline: none !important;
    border-radius: 8px;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.18) !important;
}
html body.cms-glossar .column.main li.coll_item > strong.clickable-item:focus:not(:focus-visible),
html body.cms-glossar .column.main li.coll_item > strong[tabindex]:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
/* grauen Legacy-SVG-Chevron (links) ausblenden */
.cms-glossar .column.main li.coll_item > strong.arrow::before {
    display: none;
}
/* markengerechter Chevron rechts (CSS-Caret), rotiert im aktiven Zustand */
.cms-glossar .column.main li.coll_item > strong::after {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    margin-left: 12px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.cms-glossar .column.main li.coll_item.active > strong::after {
    transform: rotate(-135deg);
}
.cms-glossar .column.main li.coll_item p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: #33475b;
}
.cms-glossar .column.main li.coll_item p + p {
    margin-top: 10px;
}
/* aufgeklappte Beschreibung mit dezenter Trennlinie zum Header */
.cms-glossar .column.main li.coll_item.active > .descr {
    margin-top: 12px;
    padding: 12px 0 0;
    border-top: 1px solid rgba(0, 68, 106, .08);
}

/* Desktop-Index-Sidebar (.coll_fixed, ab 1200px sichtbar) als Panel */
@media (min-width: 1200px) {
    .cms-glossar .coll_fixed {
        box-sizing: border-box;
        padding: 20px;
        background: #f0f6fa;
        border: 1px solid rgba(0, 68, 106, .12);
        border-radius: 14px;
        /* Sticky statt Fixed: bleibt im Viewport, wird nie unten abgeschnitten */
        position: sticky !important;
        top: 24px;
        bottom: auto !important;
        max-height: calc(100vh - 48px);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
    }
    .cms-glossar .coll_fixed img {
        width: auto !important;
        max-width: 96px;
        height: auto;
        margin: 0 auto 12px;
        /* weisser JPG-Hintergrund verschwindet so auf dem hellblauen Panel */
        mix-blend-mode: multiply;
        border-radius: 0;
    }
    .cms-glossar .coll_fixed > strong {
        display: block;
        margin: 0 0 12px;
        color: #00446a;
        font-family: 'Montserrat', sans-serif;
        font-weight: 700;
        font-size: 15px;
    }
    .cms-glossar .coll_fixed .cap {
        margin: 0 4px 6px;
    }
}

@media (max-width: 767px) {
    .cms-glossar .column.main .cap {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }
    .cms-glossar .column.main li.coll_index {
        margin: 28px 0 14px;
        gap: 10px;
    }
    .cms-glossar .column.main li.coll_index strong {
        flex-basis: 38px;
        width: 38px;
        height: 38px;
        font-size: 17px;
    }
    .cms-glossar .column.main li.coll_item {
        padding: 14px 16px;
    }
    .cms-glossar .column.main li.coll_item > strong {
        font-size: 16px;
    }
}

/* ============================================================
   CMS "Unser Service" (/unser-service, body.cms-unser-service)
   ============================================================ */

/* Ueberschriften in Montserrat wie im restlichen Shop
   (Theme setzt hier standardmaessig Quicksand). */
.cms-unser-service h1.page-title,
.cms-unser-service .column.main h2,
.cms-unser-service .column.main h3 {
    font-family: 'Montserrat', sans-serif;
}

/* ===== PLP Produktbild-Swipe (Touch, <=1199px) ===== */
@media (max-width: 1199px) {
    .product-image-wrapper.bs-plp-swipe-hidden {
        display: none !important;
    }

    .product-image-container:has(.bs-plp-swipe) {
        display: block;
        position: relative;
        width: 100%;
        max-width: 100%;
    }

    .bs-plp-swipe {
        position: relative;
        display: block;
        width: 100%;
    }

    .bs-plp-swipe__track {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* pan-x allein blockiert vertikales Seiten-Scrollen, solange der Finger auf dem
         * Slider liegt (gleiches Muster wie beim PDP-Recommendations-Slider, siehe
         * customdesign-pdp-recommendations.css). pan-y erlaubt dem Browser, eine ueberwiegend
         * vertikale Geste weiterhin als Seiten-Scroll zu erkennen und durchzureichen,
         * waehrend eine ueberwiegend horizontale Geste den Bild-Track scrollt. */
        touch-action: pan-x pan-y pinch-zoom;
    }

    .bs-plp-swipe__track::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .bs-plp-swipe__slide {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .bs-plp-swipe__img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        background: #fff;
    }

    .bs-plp-swipe__dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 8px;
        display: flex;
        justify-content: center;
        gap: 6px;
        z-index: 2;
    }

    .bs-plp-swipe__dot {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 68, 106, .25);
        cursor: pointer;
        transition: background .2s ease, transform .2s ease;
    }

    .bs-plp-swipe__dot.is-active {
        background: var(--bs-hotspot-navy, #00446a);
        transform: scale(1.2);
    }

    /* Farbswatch-Overlay (.bs-swatch-overlay) und Swipe-Punkte sitzen sonst beide
       unten-mittig. Handy (<=767px): die Swatches liegen UNTER dem Bild -> die Punkte
       bleiben unten am Bildrand (Default bottom:8px), kein Konflikt.
       Tablet (768-1199px): die Swatches ueberlappen rechtsbuendig den Bildunterrand
       -> die Punkte links daneben (gleiche Hoehe wie das Swatch-Band). */
    @media (min-width: 768px) {
        .bs-hover-visual-col:has(.bs-swatch-overlay) .bs-plp-swipe__dots {
            left: 12px;
            right: auto;
            bottom: 16px;
            justify-content: flex-start;
        }
    }

    /* ── Swipe-Demo: Zeigefinger-Overlay ──
       Wird von plp-image-swipe.js (runHint) auf der ersten Kachel eingehaengt.
       Position/Skalierung (transform) und Sichtbarkeit steuert das JS, damit die
       Fingerbewegung synchron mit dem Track-Scroll (Vorschau) laeuft; hier nur
       Grundlayout/Optik. Entfernt sich nach dem Durchlauf selbst. */
    .bs-plp-swipe__hint-finger {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 46px;
        height: 46px;
        margin: -14px 0 0 -23px;
        z-index: 5;
        pointer-events: none;
        opacity: 0;
        transform: translateX(0) scale(.85);
        filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .45));
    }

    .bs-plp-swipe__hint-finger svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: #ffffff;
        stroke: rgba(0, 68, 106, .6);
        stroke-width: .5;
    }

    /* Touch-Kreis hinter dem Finger */
    .bs-plp-swipe__hint-finger::before {
        content: "";
        position: absolute;
        top: 1px;
        left: 50%;
        width: 30px;
        height: 30px;
        margin-left: -15px;
        border-radius: 50%;
        background: rgba(0, 68, 106, .3);
        z-index: -1;
    }

    @media (prefers-reduced-motion: reduce) {
        .bs-plp-swipe__hint-finger {
            display: none !important;
        }
    }
}

/* =====================================================================
   Zahlungsseite (CMS "zahlung", body.cms-zahlung) — Markendesign
   ---------------------------------------------------------------------
   Ueberschreibt die nuechterne _zahlung.less-Optik (grauer Chevron links,
   Logo im duennen Kaesten, Name daneben) durch ein Karten-Accordion im
   FAQ-/Glossar-Look: jede Zahlungsart = weisse Karte (Radius/Schatten),
   Logo als Kachel, Name in Montserrat-Blau, Chevron rechts (rotiert beim
   Oeffnen), aufklappbarer Content als angehaengte Karte.
   Selektoren enthalten bewusst #zahlungsarten, um die ID-Spezifitaet der
   Theme-Regeln (_zahlung.less nutzt #zahlungsarten) sicher zu ueberbieten.
   Das Accordion-JS (Magento_Cms/js/zahlung) bleibt unveraendert
   (.active auf .acc-toggle + slideDown der folgenden .acc-content).
   ===================================================================== */

/* Seitentitel: Markenblau/Montserrat, ohne graue Unterlinie */
.cms-zahlung .column.main h1.page-title {
    font-family: 'Montserrat', sans-serif;
    color: #00446a;
    font-weight: 700;
    border-bottom: 0;
    padding-bottom: 0;
}

.cms-zahlung #zahlungsarten {
    max-width: 860px;
}

/* Mehr Abstand nach unten zum (orangen) Footer-Block */
.cms-zahlung .column.main {
    padding-bottom: 56px;
}

/* Einleitungs-Absatz ("Wir bieten Ihnen ... folgenden Zahlungsarten an") */
.cms-zahlung #zahlungsarten > p:first-child {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.7;
    color: #33475b;
}

/* Zahlungsart = Karte (Kopf) */
.cms-zahlung #zahlungsarten .acc-toggle {
    margin: 0 0 14px;
    padding: 0;
    border: 1px solid rgba(0, 68, 106, .10);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 68, 106, .06);
    cursor: pointer;
    overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.cms-zahlung #zahlungsarten .acc-toggle:hover {
    border-color: rgba(0, 68, 106, .22);
    box-shadow: 0 10px 26px rgba(0, 68, 106, .12);
    transform: translateY(-1px);
}
.cms-zahlung #zahlungsarten .acc-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 68, 106, .18);
}
.cms-zahlung #zahlungsarten .acc-toggle.active {
    margin-bottom: 0;
    border-color: rgba(0, 68, 106, .18);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 8px 22px rgba(0, 68, 106, .10);
    transform: none;
}

/* Kopfzeile als Flex-Reihe: Logo | Name | Chevron(rechts) */
.cms-zahlung #zahlungsarten .acc-toggle .head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 14px 20px;
    text-align: left;
}
.cms-zahlung #zahlungsarten .acc-toggle.active .head {
    background: #f0f6fa;
}

/* alten grauen Links-Chevron (_zahlung.less .collapsible-arrow::before) ausblenden */
.cms-zahlung #zahlungsarten .acc-toggle .head.collapsible-arrow::before {
    display: none !important;
}

/* Logo als saubere weisse Kachel */
.cms-zahlung #zahlungsarten .acc-toggle .head img.logo {
    flex: 0 0 auto;
    width: 84px;
    height: 52px;
    margin: 0 !important;
    padding: 6px;
    box-sizing: border-box;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(0, 68, 106, .12);
    border-radius: 10px;
    vertical-align: middle;
    display: block;
}

/* Name der Zahlungsart */
.cms-zahlung #zahlungsarten .acc-toggle .payment_name {
    flex: 1 1 auto;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.3;
    color: #00446a;
    display: block;
}

/* eigener Chevron rechts (CSS-Border), rotiert beim Oeffnen */
.cms-zahlung #zahlungsarten .acc-toggle .head::after {
    content: '';
    flex: 0 0 auto;
    margin-left: auto;
    width: 11px;
    height: 11px;
    margin-top: -3px;
    border-right: 2px solid #00446a;
    border-bottom: 2px solid #00446a;
    transform: rotate(45deg);
    transition: transform .25s ease;
}
.cms-zahlung #zahlungsarten .acc-toggle.active .head::after {
    margin-top: 3px;
    transform: rotate(225deg);
    border-color: #ec6608;
}

/* aufgeklappter Inhalt = angehaengte Karte (oben eckig, unten gerundet) */
.cms-zahlung #zahlungsarten .acc-content {
    clear: both;
    margin: 0 0 14px;
    border: 1px solid rgba(0, 68, 106, .18);
    border-top: 0;
    border-radius: 0 0 14px 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0, 68, 106, .08);
}
.cms-zahlung #zahlungsarten .acc-content .intro {
    padding: 18px 22px 22px 22px;
}

/* Fliesstext */
.cms-zahlung #zahlungsarten .acc-content p {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.7;
    color: #33475b;
}
.cms-zahlung #zahlungsarten .acc-content p:last-child {
    margin-bottom: 0;
}
.cms-zahlung #zahlungsarten .acc-content strong {
    color: #00446a;
}

/* Links im Markenblau, Hover Akzent-Orange */
.cms-zahlung #zahlungsarten .acc-content a {
    color: #00446a;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
    border-bottom: 0 !important; /* Theme-Border-Bottom entfernen, sonst doppelte Unterstreichung */
    word-break: break-word;
    transition: color .15s ease;
}
.cms-zahlung #zahlungsarten .acc-content a:hover,
.cms-zahlung #zahlungsarten .acc-content a:focus {
    color: #ec6608;
}

/* Aufzaehlungen (z. B. Klarna-Voraussetzungen) mit Akzent-Quadrat */
.cms-zahlung #zahlungsarten .acc-content ul {
    list-style: none;
    margin: 8px 0 16px;
    padding: 0;
}
.cms-zahlung #zahlungsarten .acc-content ul li {
    position: relative;
    margin: 0 0 8px;
    padding-left: 24px;
    font-size: 15.5px;
    line-height: 1.6;
    color: #33475b;
}
.cms-zahlung #zahlungsarten .acc-content ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: #ec6608;
}

/* Mobil: kompaktere Karten, kleinere Logo-Kachel; Theme-Mobilregeln
   (_zahlung.less: border-top, zentrierte/blockige Logos) neutralisieren. */
@media screen and (max-width: 767px) {
    .cms-zahlung #zahlungsarten .acc-toggle {
        border-top: 1px solid rgba(0, 68, 106, .10);
    }
    .cms-zahlung #zahlungsarten .acc-toggle .head {
        gap: 12px;
        padding: 12px 14px;
        text-align: left;
    }
    .cms-zahlung #zahlungsarten .acc-toggle .head img.logo {
        width: 64px;
        height: 42px;
        margin: 0 !important;
        display: block;
    }
    .cms-zahlung #zahlungsarten .acc-toggle .payment_name {
        font-size: 15px;
    }
    .cms-zahlung #zahlungsarten .acc-content .intro {
        padding: 14px 16px 18px 16px;
    }
}

/* ============================================================
   CMS /3d-badplanung — Landing Redesign
   ============================================================ */

body.cms-3d-badplanung .page-title,
body.cms-3d-badplanung .page-title-wrapper {
    display: none !important;
}

body.cms-3d-badplanung .breadcrumbs {
    margin-bottom: 16px;
}

body.cms-3d-badplanung .bs-3d {
    --bs-3d-max: 1440px;
    color: var(--bs-blue, #00446a);
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
}

body.cms-3d-badplanung .bs-3d__brand {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: none;
    color: var(--bs-accent-color, #ec6608);
}

body.cms-3d-badplanung .bs-3d__section-title {
    margin: 0 0 10px;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    line-height: 1.2;
}

body.cms-3d-badplanung .bs-3d__section-lead {
    margin: 0 0 28px;
    max-width: 40rem;
    font-size: 17px;
    line-height: 1.5;
    color: var(--bs-blue-gray, #4a6886);
}

/* --- Hero: eine Fläche, Brand + Headline + Lead + CTAs --- */
body.cms-3d-badplanung .bs-3d__hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: 1fr;
    min-height: min(72vh, 640px);
    margin: 0 0 48px;
    border-radius: 20px;
    overflow: hidden;
    background: #0a2a3f;
}

body.cms-3d-badplanung .bs-3d__hero-media {
    position: relative;
    min-height: 0;
    align-self: stretch;
}

body.cms-3d-badplanung .bs-3d__hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
    object-position: center;
}

body.cms-3d-badplanung .bs-3d__hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: clamp(28px, 4vw, 48px);
    background:
        linear-gradient(160deg, rgba(0, 68, 106, .97) 0%, rgba(10, 42, 63, .98) 100%);
    color: #fff;
}

body.cms-3d-badplanung .bs-3d__hero-title {
    margin: 0 0 14px !important;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(30px, 4.2vw, 44px) !important;
    font-weight: 700;
    line-height: 1.15 !important;
    color: #fff !important;
}

body.cms-3d-badplanung .bs-3d__hero-lead {
    margin: 0 0 28px;
    max-width: 28rem;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

body.cms-3d-badplanung .bs-3d__hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

html body.cms-3d-badplanung .page-wrapper a.bs-btn-outline,
html body.cms-3d-badplanung .page-wrapper a.bs-3d__hero-cta-secondary,
html body.cms-3d-badplanung .page-wrapper a.bs-3d__cta-phone {
    border-radius: 9999px !important;
    border-color: #fff !important;
    color: #fff !important;
    background: transparent !important;
}

html body.cms-3d-badplanung .page-wrapper a.bs-btn-outline:hover,
html body.cms-3d-badplanung .page-wrapper a.bs-3d__hero-cta-secondary:hover,
html body.cms-3d-badplanung .page-wrapper a.bs-3d__cta-phone:hover {
    background: #fff !important;
    color: var(--bs-blue, #00446a) !important;
}

/* --- Steps --- */
body.cms-3d-badplanung .bs-3d__steps {
    max-width: var(--bs-3d-max);
    margin: 0 auto 56px;
}

body.cms-3d-badplanung .bs-3d__steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 32px;
    counter-reset: none;
}

body.cms-3d-badplanung .bs-3d__step {
    margin: 0;
    padding: 22px 20px;
    border: 1px solid rgba(0, 68, 106, .14);
    border-radius: 16px;
    background: #fff;
    box-sizing: border-box;
}

body.cms-3d-badplanung .bs-3d__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--bs-accent-color, #ec6608);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

body.cms-3d-badplanung .bs-3d__step-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
}

body.cms-3d-badplanung .bs-3d__step-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--bs-blue-gray, #4a6886);
}

/* --- Split: Text + VR-Bild --- */
body.cms-3d-badplanung .bs-3d__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    max-width: var(--bs-3d-max);
    margin: 0 auto 56px;
}

body.cms-3d-badplanung .bs-3d__split-text p {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--bs-blue-gray, #4a6886);
}

body.cms-3d-badplanung .bs-3d__split-text p strong {
    color: var(--bs-blue, #00446a);
}

body.cms-3d-badplanung .bs-3d__split-media {
    border-radius: 16px;
    overflow: hidden;
    background: var(--bs-blue-light, #f0f6fa);
}

body.cms-3d-badplanung .bs-3d__split-media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --- Video --- */
body.cms-3d-badplanung .bs-3d__video {
    max-width: var(--bs-3d-max);
    margin: 0 auto 48px;
    padding: 36px 28px;
    background: var(--bs-blue-light, #f0f6fa);
    border-radius: 20px;
}

body.cms-3d-badplanung .bs-3d__video-frame {
    max-width: none;
    width: 100%;
}

body.cms-3d-badplanung .bs-3d__video-frame .video-embed,
body.cms-3d-badplanung .bs-3d__video-frame .cookienote,
body.cms-3d-badplanung .bs-3d__video-frame .yt-cookietext {
    max-width: 100% !important;
    width: 100%;
    box-sizing: border-box;
}

body.cms-3d-badplanung .bs-3d__video-frame .cookienote {
    width: fit-content;
    max-width: 100% !important;
    margin: 10px 0 16px;
    padding: 8px 22px;
    border-radius: 9999px !important;
    border: 1.5px solid var(--bs-accent-color, #ec6608);
    color: var(--bs-accent-color, #ec6608);
    line-height: 1.35;
    box-sizing: border-box;
}

body.cms-3d-badplanung .bs-3d__video-frame .video-embed iframe {
    width: 100% !important;
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

body.cms-3d-badplanung .bs-3d__video-frame img {
    display: block;
    width: 100%;
    max-width: 100% !important;
    height: auto;
    border-radius: 12px;
}

/* --- Gallery strip --- */
body.cms-3d-badplanung .bs-3d__gallery {
    margin: 0 0 56px;
    overflow: hidden;
}

body.cms-3d-badplanung .bs-3d__gallery-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

body.cms-3d-badplanung .bs-3d__gallery-track img {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
}

/* --- Closing CTA --- */
body.cms-3d-badplanung .bs-3d__cta {
    max-width: var(--bs-3d-max);
    margin: 0 auto 24px;
    padding: 40px 32px;
    text-align: center;
    background: var(--bs-blue, #00446a);
    border-radius: 20px;
    color: #fff;
}

body.cms-3d-badplanung .bs-3d__cta-title {
    margin: 0 0 10px !important;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 700;
    color: #fff !important;
}

body.cms-3d-badplanung .bs-3d__cta-text {
    margin: 0 auto 24px;
    max-width: none;
    width: 100%;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

body.cms-3d-badplanung .bs-3d__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 14px;
}

body.cms-3d-badplanung .bs-3d__cta-hours {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .75);
}

@media (max-width: 900px) {
    body.cms-3d-badplanung .bs-3d__hero {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        min-height: 0;
    }

    body.cms-3d-badplanung .bs-3d__hero-media {
        max-height: none;
        aspect-ratio: 16 / 10;
    }

    body.cms-3d-badplanung .bs-3d__hero-media img {
        min-height: 0;
        height: 100%;
    }

    body.cms-3d-badplanung .bs-3d__steps-list,
    body.cms-3d-badplanung .bs-3d__split {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    body.cms-3d-badplanung .bs-3d__gallery-track {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.cms-3d-badplanung .bs-3d__gallery-track img {
        height: 140px;
    }
}

@media (max-width: 560px) {
    body.cms-3d-badplanung .bs-3d__hero {
        border-radius: 14px;
        margin-bottom: 36px;
    }

    body.cms-3d-badplanung .bs-3d__video,
    body.cms-3d-badplanung .bs-3d__cta {
        padding: 28px 18px;
        border-radius: 14px;
    }

    body.cms-3d-badplanung .bs-3d__hero-cta .bs-btn-accent,
    body.cms-3d-badplanung .bs-3d__hero-cta .bs-btn-outline,
    body.cms-3d-badplanung .bs-3d__cta-actions .bs-btn-accent,
    body.cms-3d-badplanung .bs-3d__cta-actions .bs-btn-outline {
        width: 100%;
        max-width: none !important;
        text-align: center;
    }
}

/* ==========================================================================
   CMS Jobs / Stellenangebote (.bs-jobs)
   ========================================================================== */
body.cms-jobs .page-title,
body.cms-jobs .page-title-wrapper {
    display: none !important;
}

body.cms-jobs .breadcrumbs {
    margin-bottom: 16px;
}

body.cms-jobs .bs-jobs {
    --bs-jobs-max: 1440px;
    max-width: var(--bs-jobs-max);
    margin: 0 auto 64px;
    padding: 0 0 8px;
    color: var(--bs-blue, #00446a);
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    box-sizing: border-box;
}

body.cms-jobs .bs-jobs *,
body.cms-jobs .bs-jobs *::before,
body.cms-jobs .bs-jobs *::after {
    box-sizing: border-box;
}

body.cms-jobs .bs-jobs__brand {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bs-accent-color, #ec6608);
}

body.cms-jobs .bs-jobs__section-title {
    margin: 0 0 22px;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    line-height: 1.2;
}

/* Hero */
body.cms-jobs .bs-jobs__hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    min-height: min(52vh, 420px);
    margin: 0 0 48px;
    border-radius: 20px;
    overflow: hidden;
    background: #0a2a3f;
    box-shadow: 0 8px 28px rgba(0, 68, 106, 0.12);
}

body.cms-jobs .bs-jobs__hero-media {
    min-height: 0;
    align-self: stretch;
}

body.cms-jobs .bs-jobs__hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
    object-position: center 30%;
}

body.cms-jobs .bs-jobs__hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 4vw, 48px);
    background: linear-gradient(160deg, rgba(0, 68, 106, .97) 0%, rgba(10, 42, 63, .98) 100%);
    color: #fff;
}

body.cms-jobs .bs-jobs__hero-title {
    margin: 0 0 12px;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(28px, 3.5vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

body.cms-jobs .bs-jobs__hero-lead {
    margin: 0;
    max-width: 28rem;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

/* Openings */
body.cms-jobs .bs-jobs__openings {
    margin: 0 0 56px;
}

body.cms-jobs .bs-jobs__empty {
    margin: 0;
    padding: 28px 24px;
    text-align: center;
    font-size: 18px;
    color: var(--bs-blue-gray, #4a6886);
    background: var(--bs-blue-light, #f0f6fa);
    border-radius: 16px;
}

body.cms-jobs .bs-jobs__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.cms-jobs .bs-jobs__card {
    margin: 0;
}

body.cms-jobs .bs-jobs__card-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid rgba(0, 68, 106, 0.08);
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(0, 68, 106, 0.08);
    text-decoration: none !important;
    color: var(--bs-blue, #00446a) !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body.cms-jobs .bs-jobs__card-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 68, 106, 0.14);
    border-color: rgba(236, 102, 8, 0.35);
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
}

body.cms-jobs .bs-jobs__card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

body.cms-jobs .bs-jobs__card-title {
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(18px, 2.2vw, 22px);
    font-weight: 700;
    line-height: 1.3;
}

body.cms-jobs .bs-jobs__card-loc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    color: var(--bs-blue-gray, #4a6886);
}

body.cms-jobs .bs-jobs__card-pin {
    display: block;
    width: 14px;
    height: auto;
    flex-shrink: 0;
    /* Fallback falls noch pin.svg (weiß) geladen wird */
    filter: none;
}

body.cms-jobs .bs-jobs__card-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--bs-accent-color, #ec6608);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

body.cms-jobs .bs-jobs__card-link:hover .bs-jobs__card-cta {
    background: var(--bs-accent-color, #ec6608);
}

/* Benefits */
body.cms-jobs .bs-jobs__benefits {
    margin: 0;
}

body.cms-jobs .bs-jobs__benefits-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

body.cms-jobs .bs-jobs__benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0;
    padding: 24px 16px;
    text-align: center;
    background: var(--bs-blue-light, #f0f6fa);
    border-radius: 16px;
    border: 1px solid rgba(0, 68, 106, 0.06);
    min-height: 160px;
}

body.cms-jobs .bs-jobs__benefit-icon {
    display: block;
    width: auto;
    height: 44px;
    max-width: 64px;
    object-fit: contain;
}

body.cms-jobs .bs-jobs__benefit-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--bs-blue, #00446a);
}

@media (max-width: 900px) {
    body.cms-jobs .bs-jobs__hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body.cms-jobs .bs-jobs__hero-media img {
        min-height: 220px;
        max-height: 280px;
    }

    body.cms-jobs .bs-jobs__benefits-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body.cms-jobs .bs-jobs__hero {
        border-radius: 14px;
        margin-bottom: 36px;
    }

    body.cms-jobs .bs-jobs__card-link {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px;
        gap: 16px;
    }

    body.cms-jobs .bs-jobs__card-cta {
        align-self: stretch;
        justify-content: center;
    }

    body.cms-jobs .bs-jobs__benefits-grid {
        gap: 12px;
    }

    body.cms-jobs .bs-jobs__benefit {
        min-height: 140px;
        padding: 20px 12px;
        justify-content: center;
    }

    body.cms-jobs .bs-jobs__benefit-label {
        font-size: 14px;
    }
}

/* ==========================================================================
   CMS Newsletter-Anmeldung (.bs-nl-landing)
   ========================================================================== */
body.cms-newsletter-anmeldung .page-title,
body.cms-newsletter-anmeldung .page-title-wrapper {
    display: none !important;
}

body.cms-newsletter-anmeldung .breadcrumbs {
    margin-bottom: 16px;
}

body.cms-newsletter-anmeldung .bs-nl-landing {
    --bs-nl-max: 1440px;
    max-width: var(--bs-nl-max);
    margin: 0 auto 64px;
    padding: 0 0 8px;
    color: var(--bs-blue, #00446a);
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    box-sizing: border-box;
}

body.cms-newsletter-anmeldung .bs-nl-landing *,
body.cms-newsletter-anmeldung .bs-nl-landing *::before,
body.cms-newsletter-anmeldung .bs-nl-landing *::after {
    box-sizing: border-box;
}

body.cms-newsletter-anmeldung .bs-nl-landing__brand {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bs-accent-color, #ec6608);
}

body.cms-newsletter-anmeldung .bs-nl-landing__section-title {
    margin: 0 0 22px;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    line-height: 1.2;
    text-align: center;
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero {
    position: relative;
    overflow: hidden;
    margin: 0 0 48px;
    border-radius: 20px;
    background: linear-gradient(135deg, #00446a 0%, #0072b1 100%);
    box-shadow: 0 8px 28px rgba(0, 68, 106, 0.12);
    color: #fff;
}

body.cms-newsletter-anmeldung .bs-nl-landing__bubble {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

body.cms-newsletter-anmeldung .bs-nl-landing__bubble--1 {
    top: -80px;
    right: -60px;
    width: 230px;
    height: 230px;
}

body.cms-newsletter-anmeldung .bs-nl-landing__bubble--2 {
    top: -34px;
    right: 110px;
    width: 140px;
    height: 140px;
    background: rgba(255, 255, 255, 0.09);
}

body.cms-newsletter-anmeldung .bs-nl-landing__bubble--3 {
    bottom: -70px;
    left: -50px;
    width: 170px;
    height: 170px;
    background: rgba(255, 255, 255, 0.085);
    transform: none;
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.15fr minmax(220px, 0.85fr);
    align-items: center;
    gap: clamp(16px, 3vw, 32px);
    min-height: min(44vh, 380px);
    padding: clamp(28px, 4vw, 48px);
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero-icon {
    display: block;
    width: min(320px, 100%);
    height: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero-title {
    margin: 0 0 14px;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero-lead {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    max-width: 36em;
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero-bonus {
    margin: 0 0 22px;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero-bonus strong {
    color: var(--bs-accent-color, #ec6608);
}

body.cms-newsletter-anmeldung .bs-nl-landing__hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
}

body.cms-newsletter-anmeldung .bs-nl-landing__cta {
    appearance: none;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 26px;
    border-radius: 999px;
    background: var(--bs-accent-color, #ec6608);
    color: #fff;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

body.cms-newsletter-anmeldung .bs-nl-landing__cta:hover,
body.cms-newsletter-anmeldung .bs-nl-landing__cta:focus-visible {
    background: var(--bs-accent-color-hover, #c96000);
    color: #fff;
    outline: none;
}

body.cms-newsletter-anmeldung .bs-nl-landing__unsubscribe {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.cms-newsletter-anmeldung .bs-nl-landing__unsubscribe:hover,
body.cms-newsletter-anmeldung .bs-nl-landing__unsubscribe:focus-visible {
    color: #fff;
}

body.cms-newsletter-anmeldung .bs-nl-landing__benefits {
    margin: 0 0 40px;
}

body.cms-newsletter-anmeldung .bs-nl-landing__benefits-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

body.cms-newsletter-anmeldung .bs-nl-landing__benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    min-height: 168px;
    padding: 24px 16px;
    border-radius: 16px;
    background: var(--bs-blue-light, #f0f6fa);
    border: 1px solid rgba(0, 68, 106, 0.08);
}

body.cms-newsletter-anmeldung .bs-nl-landing__benefit-icon {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: contain;
}

body.cms-newsletter-anmeldung .bs-nl-landing__benefit-label {
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    line-height: 1.25;
}

body.cms-newsletter-anmeldung .bs-nl-landing__benefit-hint {
    font-size: 13px;
    color: var(--bs-blue-gray, #4a6886);
    line-height: 1.35;
}

body.cms-newsletter-anmeldung .bs-nl-landing__notes {
    margin: 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(0, 68, 106, 0.12);
}

body.cms-newsletter-anmeldung .bs-nl-landing__note {
    margin: 0 0 14px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--bs-blue-gray, #4a6886);
}

body.cms-newsletter-anmeldung .bs-nl-landing__note:last-child {
    margin-bottom: 0;
}

body.cms-newsletter-anmeldung .bs-nl-landing__note a {
    color: var(--bs-blue, #00446a);
    text-decoration: underline;
    text-underline-offset: 2px;
}

@media (max-width: 767px) {
    body.cms-newsletter-anmeldung .bs-nl-landing__hero-inner {
        grid-template-columns: 1fr;
        min-height: 0;
        padding: 28px 22px 32px;
        gap: 8px;
    }

    body.cms-newsletter-anmeldung .bs-nl-landing__hero-visual {
        order: -1;
        padding: 4px 0 8px;
    }

    body.cms-newsletter-anmeldung .bs-nl-landing__hero-icon {
        width: min(160px, 55%);
    }

    body.cms-newsletter-anmeldung .bs-nl-landing__bubble--1 {
        top: -55px;
        right: -55px;
        width: 180px;
        height: 180px;
    }

    body.cms-newsletter-anmeldung .bs-nl-landing__bubble--2 {
        top: 0;
        right: 100px;
        width: 100px;
        height: 100px;
    }

    body.cms-newsletter-anmeldung .bs-nl-landing__bubble--3 {
        bottom: -45px;
        left: -45px;
        width: 140px;
        height: 140px;
    }

    body.cms-newsletter-anmeldung .bs-nl-landing__hero-icon {
        width: min(200px, 62%);
    }

    body.cms-newsletter-anmeldung .bs-nl-landing__benefits-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.cms-newsletter-anmeldung .bs-nl-landing__benefit {
        min-height: 0;
        padding: 20px 16px;
    }

    body.cms-newsletter-anmeldung .bs-nl-landing__cta {
        width: 100%;
    }
}




/* ==========================================================================
   CMS Badezimmermöbel (.bs-bzm) — /badezimmermoebel
   ========================================================================== */
body.cms-badezimmermoebel .page-title,
body.cms-badezimmermoebel .page-title-wrapper {
    display: none !important;
}

body.cms-badezimmermoebel .breadcrumbs {
    margin-bottom: 16px;
}

body.cms-badezimmermoebel .bs-bzm {
    --bs-bzm-max: 1440px;
    --bs-bzm-border: rgba(74, 104, 134, 0.28);
    max-width: var(--bs-bzm-max);
    margin: 0 auto 64px;
    padding: 0 0 8px;
    color: var(--bs-blue, #00446a);
    font-family: var(--bs-font-family, 'Quicksand', sans-serif);
    box-sizing: border-box;
}

body.cms-badezimmermoebel .bs-bzm *,
body.cms-badezimmermoebel .bs-bzm *::before,
body.cms-badezimmermoebel .bs-bzm *::after {
    box-sizing: border-box;
}

body.cms-badezimmermoebel .bs-bzm__brand {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--bs-accent-color, #ec6608);
}

body.cms-badezimmermoebel .bs-bzm__section-title {
    margin: 0 0 10px;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    line-height: 1.2;
    text-align: left;
}

body.cms-badezimmermoebel .bs-bzm__section-lead {
    margin: 0 0 28px;
    max-width: none;
    font-size: 17px;
    line-height: 1.5;
    color: var(--bs-blue-gray, #4a6886);
}

/* --- Hero --- */
body.cms-badezimmermoebel .bs-bzm__hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    min-height: min(68vh, 560px);
    margin: 0 0 48px;
    border-radius: 20px;
    overflow: hidden;
    background: #0a2a3f;
}

body.cms-badezimmermoebel .bs-bzm__hero-media {
    position: relative;
    min-height: 0;
    align-self: stretch;
}

body.cms-badezimmermoebel .bs-bzm__hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px;
    object-fit: cover;
    object-position: center;
}

body.cms-badezimmermoebel .bs-bzm__hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(28px, 4vw, 48px);
    background: linear-gradient(160deg, rgba(0, 68, 106, .97) 0%, rgba(10, 42, 63, .98) 100%);
    color: #fff;
}

body.cms-badezimmermoebel .bs-bzm__hero-title {
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: none !important;
    text-align: left !important;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(30px, 4.2vw, 44px) !important;
    font-weight: 700;
    line-height: 1.15 !important;
    color: #fff !important;
}

body.cms-badezimmermoebel .bs-bzm__hero-lead {
    margin: 0 0 28px;
    max-width: 75%;
    font-size: 17px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
}

body.cms-badezimmermoebel .bs-bzm__hero-lead strong {
    color: #fff;
    font-weight: 700;
}

body.cms-badezimmermoebel .bs-bzm__hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

html body.cms-badezimmermoebel .page-wrapper a.bs-bzm__hero-cta-secondary,
html body.cms-badezimmermoebel .page-wrapper a.bs-bzm__cta-secondary {
    border-radius: 9999px !important;
    border-color: #fff !important;
    color: #fff !important;
    background: transparent !important;
}

html body.cms-badezimmermoebel .page-wrapper a.bs-bzm__hero-cta-secondary:hover,
html body.cms-badezimmermoebel .page-wrapper a.bs-bzm__cta-secondary:hover {
    background: #fff !important;
    color: var(--bs-blue, #00446a) !important;
}

/* --- Category tiles --- */
body.cms-badezimmermoebel .bs-bzm__cats {
    margin: 0 0 56px;
}

body.cms-badezimmermoebel .bs-bzm__cat-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

body.cms-badezimmermoebel .bs-bzm__cat {
    margin: 0;
}

body.cms-badezimmermoebel .bs-bzm__cat-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
    color: inherit;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 68, 106, .12);
    box-shadow: 0 6px 20px rgba(0, 68, 106, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

body.cms-badezimmermoebel .bs-bzm__cat-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 68, 106, .12);
    border-color: rgba(0, 68, 106, .22);
}

body.cms-badezimmermoebel .bs-bzm__cat-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--bs-blue-light, #f0f6fa);
}

body.cms-badezimmermoebel .bs-bzm__cat-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

body.cms-badezimmermoebel .bs-bzm__cat-link:hover .bs-bzm__cat-media img {
    transform: scale(1.04);
}

body.cms-badezimmermoebel .bs-bzm__cat-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px 16px;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    line-height: 1.3;
}

body.cms-badezimmermoebel .bs-bzm__cat-link:hover .bs-bzm__cat-label {
    color: var(--bs-accent-color, #ec6608);
}

/* --- Products widget wrap --- */
body.cms-badezimmermoebel .bs-bzm__products {
    margin: 0 0 56px;
}

body.cms-badezimmermoebel .bs-bzm__products .block-title,
body.cms-badezimmermoebel .bs-bzm__products h3,
body.cms-badezimmermoebel .bs-bzm__products .widget-title {
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif) !important;
    font-size: clamp(22px, 2.8vw, 28px) !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    text-align: left !important;
    margin: 0 0 20px !important;
}

/* --- ProductTeaser (1:1 Staffelrabatt .lp .product_teaser) --- */
body.cms-badezimmermoebel .bs-bzm .product_teaser {
    margin: 8px 0;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .head {
    display: none !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-topseller {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .slider-outer-container,
body.cms-badezimmermoebel .bs-bzm .product_teaser .inner-container,
body.cms-badezimmermoebel .bs-bzm .product_teaser .badshop-slider {
    background: transparent !important;
    box-shadow: none !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .badshop-slider {
    border: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    overflow: hidden !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content {
    display: flex !important;
    align-items: stretch !important;
    width: auto !important;
    left: 0 !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 6px 0 4px !important;
    list-style: none;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li {
    float: none !important;
    margin: 0 !important;
    flex: 0 0 78vw !important;
    width: 78vw !important;
    max-width: none !important;
    min-width: 0 !important;
    background: #fff !important;
    border: 1.5px solid var(--bs-bzm-border, rgba(74, 104, 134, 0.28)) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    list-style: none;
    padding: 0 !important;
    box-sizing: border-box;
    box-shadow: 0 2px 10px rgba(0, 68, 106, 0.08) !important;
    transition: box-shadow .2s ease, transform .15s ease;
}

@media (min-width: 768px) {
    body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li {
        flex-basis: calc((100% - 32px) / 3) !important;
        width: calc((100% - 32px) / 3) !important;
    }
}

@media (min-width: 1024px) {
    body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li {
        flex-basis: calc((100% - 48px) / 4) !important;
        width: calc((100% - 48px) / 4) !important;
    }
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .1) !important;
    transform: translateY(-3px);
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li > a.itemurl {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li a.itemurl > span[class*='product-image-container-'] {
    width: 100% !important;
    max-width: 100% !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .product-image-container,
body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .product-image-wrapper {
    padding: 0 !important;
    margin: 0 !important;
    background: #fff !important;
    border-radius: 0 !important;
    width: 100% !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .product-image-photo {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform .3s ease;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li:hover .product-image-photo {
    transform: scale(1.05);
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .product-item-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    padding: 10px 14px 0 !important;
    color: var(--bs-blue, #00446a) !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .measures {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 6px 14px 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    line-height: 1 !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .measures span {
    background: #eef2f5 !important;
    border: 0 !important;
    border-radius: 4px !important;
    padding: 1px 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1.25 !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .varianten {
    /* Text „weitere Varianten“ ausblenden, Label per ::after */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    background: #fff !important;
    border: 1.5px solid var(--bs-accent-color, #ec6608) !important;
    border-radius: 999px !important;
    width: auto !important;
    max-width: calc(100% - 28px) !important;
    align-self: flex-start !important;
    padding: 6px 12px !important;
    margin: 10px 14px 14px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .varianten::after {
    content: 'Jetzt konfigurieren' !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: var(--bs-accent-color, #ec6608) !important;
    white-space: nowrap !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .varianten a {
    font-size: 0 !important;
    color: transparent !important;
    text-decoration: none !important;
    pointer-events: none;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li:hover .varianten {
    background: var(--bs-accent-color, #ec6608) !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li:hover .varianten::after {
    color: #fff !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .prev-prices {
    margin-top: auto !important;
    margin-bottom: 2px !important;
    padding: 0 14px !important;
    text-align: right !important;
    font-size: 14px !important;
    color: var(--bs-blue-gray, #4a6886) !important;
    line-height: 1.2 !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .prev-prices .streichpreis,
body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .prev-prices .price {
    text-decoration: line-through !important;
    text-decoration-color: var(--bs-accent-color, #ec6608) !important;
    color: var(--bs-blue-gray, #4a6886) !important;
    font-weight: 400 !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li > a.itemurl:not(:has(.prev-prices)) .price-box {
    margin-top: auto !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .price-box {
    margin-top: 0 !important;
    padding: 0 14px 10px !important;
    text-align: right !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .price-box .price {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-content > li .prev-prices ~ .price-box .price {
    color: var(--bs-accent-color, #ec6608) !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-controls {
    position: static !important;
    transform: none !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: auto !important;
    pointer-events: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 18px 0 0 !important;
    padding: 0 !important;
    clear: both !important;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-nav-arrow-bubble {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 1.5px solid var(--bs-bzm-border);
    box-shadow: 0 4px 14px rgba(0, 68, 106, .12);
    cursor: pointer;
    position: relative !important;
    float: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, border-color .2s, transform .15s;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-nav-arrow-bubble:hover {
    background: var(--bs-blue, #00446a);
    border-color: var(--bs-blue, #00446a);
    transform: translateY(-1px);
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-nav-arrow-bubble .teaserpfeil {
    display: none;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-nav-arrow-bubble::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--bs-blue, #00446a);
    border-bottom: 2px solid var(--bs-blue, #00446a);
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-nav-arrow-bubble:hover::after {
    border-color: #fff;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-nav-arrow-bubble.prev::after {
    transform: rotate(135deg);
    margin-left: 3px;
}

body.cms-badezimmermoebel .bs-bzm .product_teaser .teaser-nav-arrow-bubble.next::after {
    transform: rotate(-45deg);
    margin-right: 3px;
}

/* --- Style chips --- */

/* --- Style chips --- */
body.cms-badezimmermoebel .bs-bzm__styles {
    margin: 0 0 56px;
    padding: 32px 28px;
    background: var(--bs-blue-light, #f0f6fa);
    border-radius: 20px;
    text-align: center;
}

body.cms-badezimmermoebel .bs-bzm__styles .bs-bzm__section-title {
    text-align: center;
}

body.cms-badezimmermoebel .bs-bzm__styles .bs-bzm__section-lead {
    margin-left: auto;
    margin-right: auto;
}

body.cms-badezimmermoebel .bs-bzm__style-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 24px;
}

body.cms-badezimmermoebel .bs-bzm__chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 68, 106, .18);
    background: #fff;
    color: var(--bs-blue, #00446a) !important;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

body.cms-badezimmermoebel .bs-bzm__chip:hover {
    background: var(--bs-blue, #00446a);
    border-color: var(--bs-blue, #00446a);
    color: #fff !important;
}

body.cms-badezimmermoebel .bs-bzm__chip--sale {
    border-color: var(--bs-accent-color, #ec6608);
    color: var(--bs-accent-color, #ec6608) !important;
}

body.cms-badezimmermoebel .bs-bzm__chip--sale:hover {
    background: var(--bs-accent-color, #ec6608);
    border-color: var(--bs-accent-color, #ec6608);
    color: #fff !important;
}

body.cms-badezimmermoebel .bs-bzm__chip--guide {
    background: transparent;
    border-style: dashed;
}

body.cms-badezimmermoebel .bs-bzm__styles-cta {
    margin: 0;
    text-align: center;
}

body.cms-badezimmermoebel .bs-bzm__styles-cta .bs-btn-accent.data-key {
    display: inline-flex;
    cursor: pointer;
}

/* --- Guide / Ratgeber --- */
body.cms-badezimmermoebel .bs-bzm__guide {
    margin: 0 0 48px;
}

body.cms-badezimmermoebel .bs-bzm__toc {
    margin: 0 0 36px;
    padding: 22px 24px;
    border: 1px solid rgba(0, 68, 106, .14);
    border-radius: 16px;
    background: #fff;
}

body.cms-badezimmermoebel .bs-bzm__toc-title {
    margin: 0 0 12px;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: 15px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
}

body.cms-badezimmermoebel .bs-bzm__toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.cms-badezimmermoebel .bs-bzm__toc-list a {
    display: inline-flex;
    padding: 8px 14px;
    border-radius: 9999px;
    background: var(--bs-blue-light, #f0f6fa);
    color: var(--bs-blue, #00446a) !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .2s ease, color .2s ease;
}

body.cms-badezimmermoebel .bs-bzm__toc-list a:hover {
    background: var(--bs-blue, #00446a);
    color: #fff !important;
}

body.cms-badezimmermoebel .bs-bzm__article {
    margin: 0 0 28px;
    padding: 0 0 28px;
    border-bottom: 1px solid rgba(0, 68, 106, .1);
    scroll-margin-top: 110px;
}

body.cms-badezimmermoebel .bs-bzm__article:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

body.cms-badezimmermoebel .bs-bzm__article-title {
    margin: 0 0 12px !important;
    padding: 0 !important;
    text-align: left !important;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(18px, 2.4vw, 22px) !important;
    font-weight: 700;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1.3;
}

body.cms-badezimmermoebel .bs-bzm__article p {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--bs-blue-gray, #4a6886);
}

body.cms-badezimmermoebel .bs-bzm__article p:last-child {
    margin-bottom: 0;
}

body.cms-badezimmermoebel .bs-bzm__article a {
    color: var(--bs-blue, #00446a) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body.cms-badezimmermoebel .bs-bzm__article a:hover {
    color: var(--bs-accent-color, #ec6608) !important;
}

body.cms-badezimmermoebel .bs-bzm-g__text a {
    color: var(--bs-blue, #00446a) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

body.cms-badezimmermoebel .bs-bzm-g__text a:hover {
    color: var(--bs-accent-color, #ec6608) !important;
}

/* Tip-Chips: volle Pill-Border behalten (Theme-a border-bottom darf unten nicht abschneiden) */
body.cms-badezimmermoebel .bs-bzm-g__tip {
    border: 1px solid rgba(0, 68, 106, 0.12) !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.cms-badezimmermoebel .bs-bzm-g__tip:hover {
    border-color: var(--bs-blue, #00446a) !important;
}

body.cms-badezimmermoebel .bs-bzm__article strong {
    color: var(--bs-blue, #00446a);
}

/* --- FAQ --- */
body.cms-badezimmermoebel .bs-bzm__faq {
    margin: 0 0 48px;
    scroll-margin-top: 110px;
}

body.cms-badezimmermoebel .bs-bzm__faq-item {
    margin: 0 0 12px;
    border: 1px solid rgba(0, 68, 106, .12);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 68, 106, .04);
    overflow: hidden;
}

body.cms-badezimmermoebel .bs-bzm__faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    cursor: pointer;
    list-style: none;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    line-height: 1.35;
}

body.cms-badezimmermoebel .bs-bzm__faq-q::-webkit-details-marker {
    display: none;
}

body.cms-badezimmermoebel .bs-bzm__faq-q::after {
    content: '+';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-blue-light, #f0f6fa);
    color: var(--bs-blue, #00446a);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
}

body.cms-badezimmermoebel .bs-bzm__faq-item[open] .bs-bzm__faq-q::after {
    content: '–';
    background: var(--bs-blue, #00446a);
    color: #fff;
}

body.cms-badezimmermoebel .bs-bzm__faq-q:hover {
    color: var(--bs-accent-color, #ec6608);
}

body.cms-badezimmermoebel .bs-bzm__faq-a {
    padding: 0 18px 18px;
}

body.cms-badezimmermoebel .bs-bzm__faq-a p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--bs-blue-gray, #4a6886);
}

body.cms-badezimmermoebel .bs-bzm__faq-a p:last-child {
    margin-bottom: 0;
}

body.cms-badezimmermoebel .bs-bzm__faq-a a {
    color: var(--bs-blue, #00446a);
    text-decoration: underline;
}

body.cms-badezimmermoebel .bs-bzm__faq-a strong {
    color: var(--bs-blue, #00446a);
}

body.cms-badezimmermoebel .bs-bzm__note {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bs-blue-light, #f0f6fa);
}

body.cms-badezimmermoebel .bs-bzm__garantie {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 28px 0 0;
    padding: 22px 24px;
    border-radius: 16px;
    background: var(--bs-blue-light, #f0f6fa);
}

body.cms-badezimmermoebel .bs-bzm__garantie-seal {
    flex-shrink: 0;
    width: 72px;
    height: auto;
}

body.cms-badezimmermoebel .bs-bzm__garantie-body p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--bs-blue-gray, #4a6886);
}

body.cms-badezimmermoebel .bs-bzm__garantie-link {
    font-weight: 700;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.cms-badezimmermoebel .bs-bzm__garantie-link:hover {
    color: var(--bs-accent-color, #ec6608) !important;
}

/* --- Closing CTA --- */
body.cms-badezimmermoebel .bs-bzm__cta {
    margin: 0 0 48px;
    padding: 40px 32px;
    text-align: center;
    background: var(--bs-blue, #00446a);
    border-radius: 20px;
    color: #fff;
}

body.cms-badezimmermoebel .bs-bzm__cta-title {
    margin: 0 0 10px !important;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 700;
    color: #fff !important;
    text-align: center !important;
}

body.cms-badezimmermoebel .bs-bzm__cta-text {
    margin: 0 auto 24px;
    max-width: 36rem;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

body.cms-badezimmermoebel .bs-bzm__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* --- Related themes --- */
body.cms-badezimmermoebel .bs-bzm__related {
    margin: 0 0 24px;
}

/* ThemePage-Crosslinks: horizontaler Karten-Slider (alle CMS-Seiten mit Widget) */
.th_cross.th_cross--slider {
    margin: 0 0 32px;
    padding: 0 !important;
    background: transparent !important;
    clear: both;
}

.th_cross.th_cross--slider .th_cross__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 14px;
}

.th_cross.th_cross--slider .th_cross_headline {
    margin: 0 !important;
    text-align: left !important;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: clamp(22px, 2.6vw, 28px) !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    line-height: 1.25;
}

.th_cross.th_cross--slider .th_cross__arrows {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.th_cross.th_cross--slider .th_cross_grid {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 4px 2px 18px;
    margin: 0 !important;
    grid-template-columns: none !important;
}

.th_cross.th_cross--slider .th_cross_grid::-webkit-scrollbar {
    display: none;
}

.th_cross.th_cross--slider .th-cross-thema {
    flex: 0 0 min(78vw, 320px) !important;
    min-width: min(78vw, 320px);
    max-width: min(78vw, 320px);
    scroll-snap-align: start;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-decoration: none !important;
    border: 1px solid rgba(0, 68, 106, .1);
    border-radius: 16px;
    background: #fff !important;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 68, 106, .06);
    color: var(--bs-blue, #00446a) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}

.th_cross.th_cross--slider .th-cross-thema:hover {
    box-shadow: 0 10px 28px rgba(0, 68, 106, .12);
    color: var(--bs-blue, #00446a) !important;
}

.th_cross.th_cross--slider .th-cross-thema__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #fff;
    /* Theme-Legacy: .th-cross-thema span { padding / line-height } → Streifen unter dem Bild */
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0;
}

.th_cross.th_cross--slider .th-cross-thema__media img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important;
    height: 100% !important;
    min-height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    transition: transform .35s ease;
}

.cms-page-view.theme-page .main .th_cross.th_cross--slider .th-cross-thema__media {
    padding: 0 !important;
    line-height: 0 !important;
    background: #fff !important;
}

.cms-page-view.theme-page .main .th_cross.th_cross--slider .th-cross-thema__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}

.th_cross.th_cross--slider .th-cross-thema:hover .th-cross-thema__media img {
    transform: scale(1.04);
}

.th_cross.th_cross--slider .th-cross-thema-hl {
    display: block !important;
    margin: 0 !important;
    padding: 14px 16px 6px !important;
    font-family: var(--bs-heading-font-family, 'Montserrat', sans-serif);
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--bs-blue, #00446a) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

.th_cross.th_cross--slider .th-cross-thema__text {
    display: block !important;
    margin: 0 !important;
    padding: 0 16px 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: var(--bs-blue-gray, #4a6886) !important;
}

.th_cross.th_cross--slider .th_cross__more {
    display: inline-flex;
    margin-top: 4px;
    cursor: pointer;
    color: var(--bs-blue, #00446a);
    font-size: 15px;
}

.th_cross.th_cross--slider .th_cross__more:hover {
    color: var(--bs-accent-color, #ec6608);
}

@media (min-width: 900px) {
    .th_cross.th_cross--slider .th-cross-thema {
        flex-basis: 300px !important;
    }
}

@media (max-width: 900px) {
    body.cms-badezimmermoebel .bs-bzm__hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    body.cms-badezimmermoebel .bs-bzm__hero-media {
        aspect-ratio: 16 / 10;
    }

    body.cms-badezimmermoebel .bs-bzm__hero-media img {
        min-height: 0;
        height: 100%;
    }

    body.cms-badezimmermoebel .bs-bzm__cat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    body.cms-badezimmermoebel .bs-bzm__garantie {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 560px) {
    body.cms-badezimmermoebel .bs-bzm__hero {
        border-radius: 14px;
        margin-bottom: 36px;
    }

    body.cms-badezimmermoebel .bs-bzm__styles,
    body.cms-badezimmermoebel .bs-bzm__cta {
        padding: 28px 18px;
        border-radius: 14px;
    }

    body.cms-badezimmermoebel .bs-bzm__cat-grid {
        grid-template-columns: 1fr;
    }

    body.cms-badezimmermoebel .bs-bzm__hero-cta .bs-btn-accent,
    body.cms-badezimmermoebel .bs-bzm__hero-cta .bs-btn-outline,
    body.cms-badezimmermoebel .bs-bzm__cta-actions .bs-btn-accent,
    body.cms-badezimmermoebel .bs-bzm__cta-actions .bs-btn-outline {
        width: 100%;
        max-width: none !important;
        text-align: center;
    }

    body.cms-badezimmermoebel .bs-bzm__cat-label {
        font-size: 14px;
    }
}

/* CMS Themenseiten-Redesign (bs-cms-*): Legacy theme-page-H1 aushebeln + Video-Overlap fix */
.cms-page-view.theme-page .main .bs-cms-page {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.cms-page-view.theme-page .main .bs-cms-page .bs-cms-hero > h1 {
    margin: 40px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: clamp(34px, 4vw, 46px) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    color: var(--bs-blue, #00446a) !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
}

.cms-page-view.theme-page .main .bs-cms-page .bs-cms-video {
    margin: 0 0 36px;
}

.cms-page-view.theme-page .main .bs-cms-page .bs-cms-video__title {
    text-align: center;
}

.cms-page-view.theme-page .main .bs-cms-page .bs-cms-video__frame {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    aspect-ratio: auto;
    height: auto;
}

.cms-page-view.theme-page .main .bs-cms-page .bs-cms-video__frame .video-embed,
.cms-page-view.theme-page .main .bs-cms-page .bs-cms-video__frame .video-wrapper,
.cms-page-view.theme-page .main .bs-cms-page .bs-cms-video__frame .yt-wrapper {
    grid-column: 1;
    grid-row: 1;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

.cms-page-view.theme-page .main .bs-cms-page .bs-cms-video__frame .cookienote {
    grid-column: 1;
    grid-row: 2;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none;
    height: auto !important;
    margin: 12px 0 0;
    padding: 12px 14px;
    font-size: 13px;
    z-index: 2;
}

.cms-page-view.theme-page .main .bs-cms-page .bs-cms-video__frame .yt-cookietext {
    grid-column: 1;
    grid-row: 3;
    position: static !important;
    left: auto;
    right: auto;
    top: auto;
    height: auto !important;
    margin: 12px 0 0;
    padding: 0 4px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a6886;
}

@media (min-width: 768px) {
    .cms-page-view.theme-page .main .bs-cms-page .bs-cms-video__frame .cookienote {
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: 92% !important;
        max-width: 520px;
        margin: 0;
        padding: 14px 18px;
        font-size: 14px;
    }

    .cms-page-view.theme-page .main .bs-cms-page .bs-cms-video__frame .yt-cookietext {
        grid-row: 2;
    }
}

.cms-page-view.theme-page .main .bs-cms-page .bs-cms-products .product_teaser > h3.head {
    margin: 0 0 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left !important;
    color: var(--bs-blue, #00446a) !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
    font-size: clamp(20px, 2.4vw, 26px) !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* --- Service Attention: Hilfe-Popup + Spotlight --- */
.bs-svc-help-ov {
    position: fixed;
    inset: 0;
    background: rgba(0, 68, 106, 0.25);
    z-index: 100010;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.bs-svc-spot-ov {
    position: fixed;
    inset: 0;
    background: rgba(0, 68, 106, 0.42);
    z-index: 99990;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    pointer-events: none;
}
.bs-svc-help-ov.is-on,
.bs-svc-spot-ov.is-on {
    opacity: 1;
    visibility: visible;
}
.bs-svc-help {
    position: fixed;
    z-index: 100011;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -48%) scale(.98);
    width: min(440px, calc(100vw - 32px));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 68, 106, 0.22);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}
.bs-svc-help.is-on {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}
.bs-svc-help__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bs-blue-light, #f0f6fa);
}
.bs-svc-help__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Ohne Bild: kein Media-Block; großes orangefarbenes „?“ hinter dem Text */
.bs-svc-help--no-media .bs-svc-help__media {
    display: none !important;
}
.bs-svc-help--no-media .bs-svc-help__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    min-height: 260px;
    padding: 28px 24px 28px;
}
.bs-svc-help--no-media .bs-svc-help__body::after {
    content: '?';
    position: absolute;
    right: -10px;
    bottom: -18px;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: clamp(160px, 48vw, 220px);
    font-weight: 700;
    line-height: 0.8;
    color: var(--bs-accent-color, #ec6608);
    opacity: 0.18;
    pointer-events: none;
    z-index: 0;
    user-select: none;
}
.bs-svc-help--no-media .bs-svc-help__body > *:not(.bs-svc-help__close) {
    position: relative;
    z-index: 1;
}
.bs-svc-help--no-media .bs-svc-help__cta {
    margin-top: auto;
    align-self: flex-start;
}
.bs-svc-help__body {
    padding: 22px 22px 20px;
    position: relative;
}
html body .bs-svc-help > button.bs-svc-help__close,
html body button.bs-svc-help__close {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    background: var(--bs-blue-light, #f0f6fa);
    color: var(--bs-blue, #00446a) !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: none;
    opacity: 1;
    appearance: none;
    -webkit-appearance: none;
    transition: background 0.2s ease, color 0.2s ease;
}
html body button.bs-svc-help__close:hover,
html body button.bs-svc-help__close:focus-visible {
    background: var(--bs-blue, #00446a);
    color: #fff !important;
}
html body button.bs-svc-help__close:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 68, 106, 0.35);
}
.bs-svc-help__title {
    margin: 0 28px 10px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--bs-blue, #00446a);
    line-height: 1.25;
}
.bs-svc-help__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--bs-blue-gray, #4a6886);
}
.bs-svc-help__cta,
html body button.bs-svc-help__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    min-height: 44px;
    padding: 10px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--bs-accent-color, #ec6608);
    color: #fff !important;
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.bs-svc-help__cta:hover,
html body button.bs-svc-help__cta:hover {
    background: var(--bs-accent-color-hover, #C96000);
}
body.bs-svc-spot-on .page-header,
body.bs-svc-spot-on .icons-wrapper,
body.bs-svc-spot-on #telefon-wrapper {
    overflow: visible !important;
}
body.bs-svc-spot-on #telefon-wrapper {
    position: relative;
    z-index: 100020;
    filter: none !important;
}
body.bs-svc-spot-on #telefon-wrapper:hover {
    filter: none !important;
}
body.bs-svc-spot-on #telefon-wrapper.bs-svc-spot-shake,
body.bs-svc-spot-on #telefon-wrapper.bs-svc-spot-shake .pers-icon,
body.bs-svc-spot-on #telefon-wrapper.bs-svc-spot-shake .pers-image {
    transform-origin: center center;
}
body.bs-svc-spot-on #telefon-wrapper.bs-svc-spot-shake .pers-image {
    animation: bs-svc-grow-shake 0.7s ease-in-out 4;
    filter: none !important;
}
#telefon-wrapper.bs-svc-spot-target {
    position: relative;
    z-index: 100020;
}
#telefon-wrapper.bs-svc-spot-shake .pers-icon {
    overflow: visible !important;
}
.bs-svc-spot-arrow {
    position: fixed;
    z-index: 100021;
    width: 70px;
    height: 62px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .25s ease;
}
.bs-svc-spot-arrow.is-on {
    opacity: 1;
    visibility: visible;
    animation: bs-svc-arrow-bob 1s ease-in-out infinite;
}
.bs-svc-spot-arrow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: rotate(180deg);
    filter: drop-shadow(0 2px 3px rgba(0, 68, 106, .45));
}
.bs-svc-spot-hint {
    position: fixed;
    z-index: 100021;
    padding: 7px 14px;
    border-radius: 999px;
    background: #fff;
    color: var(--bs-blue, #00446a);
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 14px rgba(0, 68, 106, 0.28);
    transition: opacity .25s ease;
}
.bs-svc-spot-hint.is-on {
    opacity: 1;
    visibility: visible;
}
.ps-sb.ps-sb--peek {
    transform: translateX(calc(100% - 260px));
    pointer-events: auto;
}
@keyframes bs-svc-grow-shake {
    0%, 100% { transform: scale(1) rotate(0); }
    12% { transform: scale(1.28) rotate(-14deg); }
    24% { transform: scale(1.34) rotate(12deg); }
    36% { transform: scale(1.26) rotate(-10deg); }
    48% { transform: scale(1.32) rotate(9deg); }
    60% { transform: scale(1.22) rotate(-7deg); }
    72% { transform: scale(1.16) rotate(5deg); }
    86% { transform: scale(1.08) rotate(-3deg); }
}
@keyframes bs-svc-arrow-bob {
    0%, 100% { transform: translateY(-4px); }
    50% { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
    body.bs-svc-spot-on #telefon-wrapper.bs-svc-spot-shake .pers-image,
    .bs-svc-spot-arrow.is-on {
        animation: none;
    }
}