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


/* --- 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__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;
}

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

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

/* 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: einheitlicher Ring an der Pillen-Wrapper-Kante (nicht doppelt am Input/Button) */
form#main_search_form .search-bar-wrapper:focus-within {
    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 !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 ── */
html body a[href]:focus-visible:not(.bs-kb-focus-none),
html body area[href]:focus-visible:not(.bs-kb-focus-none),
html body button:focus-visible:not(.bs-kb-focus-none),
html body input:not([type="hidden"]):focus-visible:not(.bs-kb-focus-none),
html body select:focus-visible:not(.bs-kb-focus-none),
html body textarea:focus-visible:not(.bs-kb-focus-none),
html body summary:focus-visible:not(.bs-kb-focus-none),
html body [tabindex]:not([tabindex="-1"]):focus-visible:not(.bs-kb-focus-none),
html body iframe:focus-visible:not(.bs-kb-focus-none) {
    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: 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 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;
}
.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: auto !important;
    min-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;
}
/* 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;
}
.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: 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: 600px;
    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: 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: '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;
}

/* ============================================================
   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: auto !important;
    min-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: auto !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: clamp(30px, 7vw, 56px) !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: 550px;
    letter-spacing: -0.5px;
}
.page-wrapper .bs-hero--v3 h1.bs-hero__subline {
    font-size: clamp(18px, 3.5vw, 28px) !important;
    font-weight: 900 !important;
    color: rgba(0, 68, 106, 1) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
    font-family: '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;
}
.page-wrapper .bs-kat__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 0 0;
}
.page-wrapper .bs-kat__arrows {
    display: none;
    gap: 6px;
    flex-shrink: 0;
    margin-left: 16px;
}
.page-wrapper .bs-kat--a .bs-kat__track {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 16px;
    padding: 0 0 8px 0;
    margin: 0 -30px 0 0;
    scroll-padding: 0 20px;
}
.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 calc(50% - 8px);
    text-decoration: none !important;
    color: inherit;
    display: block;
}
.page-wrapper .bs-kat__card-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    transition: transform 0.35s ease;
    transform: translateZ(0);
}
.page-wrapper .bs-kat__card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}
/* Zoom auf dem Clip-Container — nicht auf dem <img> (vermeidet fehlerhafte Rundung unten bei overflow+transform). */
.page-wrapper .bs-kat__card:hover .bs-kat__card-img {
    transform: scale(1.05);
}
html body .page-wrapper .bs-kat__card:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}
html body .page-wrapper .bs-kat__card:focus-visible .bs-kat__card-img {
    outline: none !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;
    text-align: center;
    padding: 14px 4px;
    font-size: 17px;
    font-weight: 400;
    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: var(--bs-kb-focus-outline-width, 3px) solid var(--bs-kb-focus-color, #00446a);
    outline-offset: var(--bs-kb-focus-outline-offset, 2px);
    box-shadow: inset 0 0 0 var(--bs-kb-focus-inset-white, 2px) #ffffff;
}

/* 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;
}
.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-banner__inner {
    width: 100%;
    box-sizing: border-box;
}
/* Gleiches Layout wie Aktionsleiste oben (.bs-top-banner) — inkl. Countdown + „Jetzt sparen“ */
.bs-sticky-banner__inner.bs-top-banner {
    display: flex !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
}
a.bs-sticky-banner__inner.bs-top-banner:hover {
    opacity: 1;
    color: #FFFFFF !important;
    text-decoration: none !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;
}

/* ============================================================
   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 {
    color: rgba(255, 255, 255, 0.75) !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"] {
    transform: scale(0.95) !important;
}
.cms-index-index #service .vorteil-icon img[src*="header-icon-kompetenz"] {
    transform: scale(0.95) !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. */

/* ---- 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;
}
#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;
}

/* 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: 8px !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;
}
#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);
}
#nav.bs-mega .bs-mega-brand-logo {
    max-width: 100px !important;
    max-height: 50px !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;
}
.searchsuggestions ul.cls-series-list li.serie-item:hover {
    background: rgba(0, 68, 106, 0.06) !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: 0 !important;
    transition: background 0.15s ease;
}
#search-results-wrapper .search-autocomplete ul.cls-searchsol li:last-child {
    border-bottom: none !important;
}
#search-results-wrapper .search-autocomplete ul.cls-searchsol li:hover {
    background: rgba(0, 68, 106, 0.04) !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;
}
.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;
}
.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);
    }
}
/* 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;
    }
}

/* 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;
}
.badshop-fader button.teaser-nav-arrow-bubble:focus-visible {
    outline: 3px solid #ffffff !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px rgba(0, 68, 106, 0.55) !important;
}
.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;
}

/* 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: #4a6886 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !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: #4a6886 !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;
    }
}
.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;
}

/* 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;
}

#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;
}

/* 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;
}

/* 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: 2px solid var(--bs-accent-color, #ec6608) !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;
}

/*
 * 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;
}

/* ---- 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;
    text-align: left !important;
    line-height: 1.4;
}
.customdesign-cat-header-left .bs-cat-contact__link:hover {
    color: #ec6608;
}
.customdesign-cat-header-left .bs-cat-contact__link svg {
    flex-shrink: 0;
    color: var(--bs-blue, #00446a);
    margin-top: 2px;
}
.customdesign-cat-header-left .bs-cat-contact__link:hover svg {
    color: #ec6608;
}

/* --- 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;
    padding: 4px 0;
}
.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;
}

/* --- 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;
}
.customdesign-catv2 .bs-cat-list-promo__link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}
.customdesign-catv2 .bs-cat-list-promo__media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transform: scale(1.02);
    box-shadow: 0 8px 28px rgba(0, 68, 106, 0.12);
    min-height: 180px;
}
.customdesign-catv2 .bs-cat-list-promo__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 3 / 2;
}
.customdesign-catv2 .bs-cat-list-promo__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px 18px;
    background: linear-gradient(to top, rgba(0, 68, 106, 0.75) 0%, rgba(0, 68, 106, 0.25) 42%, transparent 70%);
    pointer-events: none;
}
.customdesign-catv2 .bs-cat-list-promo__kicker {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}
.customdesign-catv2 .bs-cat-list-promo__title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
}
.customdesign-catv2 .bs-cat-list-promo__cta {
    display: inline-flex;
    align-self: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-family: 'Montserrat', sans-serif;
}
.customdesign-catv2 .bs-cat-list-promo__cta-text::after {
    content: ' \2192';
    font-weight: 600;
}

/* --- 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;
}
/* 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 / 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,
.customdesign-catv2 #portraittext .button-cloud .cloud-items:focus-visible,
.category-descriptionbad .button-cloud .cloud-items:hover,
.category-descriptionbad .button-cloud .cloud-items:focus-visible {
    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;
}

.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: 400 !important;
    color: #4a6886 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
    text-decoration: none !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
}
.customdesign-catv2.bs-seo-mode-collapse #bs-seo-toggle:hover {
    color: #4a6886 !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: € label vertically centered inside first field (theme used bottom: calc(100% - 10px)) */
.block.filter .amshopby-fromto-wrap .amshopby-input-wrapper .amshopby-currency {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    padding: 0 2px !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;
}
.block.filter .amshopby-fromto-wrap .amshopby-input-wrapper:first-of-type .am-filter-price {
    padding-left: 28px !important;
    text-align: left !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%;
}
.customdesign-catv2 .products-grid .product-items .product-item.hover .itemcontent .main-data .bs-hover-visual-col .add-left .obflf img {
    display: block;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    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 img: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;
}
.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;
}
.customdesign-catv2 .product-item .bs-swatch-overlay img {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.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%;
}
/* --- 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;
}

/* 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;
}
body .ws-sb button.ws-ab.ws-ab--cart:hover,
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;
}
/* -/+ buttons injected by sidebar widget — exakt PDP-Pricebox-Optik */
.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;
}

/* 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;
}

.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;
}

/* 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 */
}

/* 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;
}

/* 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 {
    border-color: var(--bs-blue, #00446a) !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;
}
.checkout-cart-index .cart-summary > .title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--bs-blue, #00446a) !important;
    margin-bottom: 20px !important;
}

/* Totals table */
.checkout-cart-index #cart-totals {
    border-top: none !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;
}
.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;
}

/* Grand total: larger */
.checkout-cart-index #cart-totals tr.grand.totals .mark {
    font-size: 16px !important;
    font-weight: 700 !important;
    border-top: 1px solid var(--bs-blue-light, #dce8f0) !important;
    padding-top: 12px !important;
}
.checkout-cart-index #cart-totals tr.grand.totals .amount {
    border-top: 1px solid var(--bs-blue-light, #dce8f0) !important;
    padding-top: 12px !important;
}
.checkout-cart-index #cart-totals tr.grand.totals .amount .price {
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Tax note */
.checkout-cart-index #cart-totals .totals-tax td,
.checkout-cart-index #cart-totals .totals-tax th {
    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 {
    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 {
    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 {
        overflow: visible !important;
    }

    .checkout-cart-index .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 {
        grid-column: 1 / -1 !important;
        margin: 0 0 8px !important;
    }

    .checkout-cart-index .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 {
        grid-column: 2 !important;
        justify-self: start !important;
    }

    .checkout-cart-index .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 {
        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 {
        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 {
        flex: 0 0 96px !important;
    }

    .checkout-cart-index .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 {
        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 {
        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 {
        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 {
        min-width: 320px !important;
    }
}

@media (max-width: 767px) {
    .checkout-cart-index .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 {
        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: var(--bs-blue, #00446a);
    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;
}
.ps-head:hover {
    background: rgba(0, 68, 106, 0.88);
}
.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;
}

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;
}
/* 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;
}
/* =====================================================
   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 {
    padding: 0 0 28px !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;
}

/* 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;
}

/* --- 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;
}

/* --- 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 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;
}

body.contact-index-index #contact-form .control input.input-text:focus,
body.contact-index-index #contact-form .control textarea.input-text:focus {
    border-color: var(--bs-blue, #00446a);
    box-shadow: 0 0 0 4px rgba(0, 68, 106, 0.1);
    outline: none;
}

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 24px;
    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;
}

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

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

/* 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;
}

/* 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;
}