/*
 * btool Template — Design Snickers-Shop
 * Schwarz/Gelb #F5C800
 * badertschertool.ch
 */

/* ════════════════════════════════════════════
   TYPOGRAFIE
   ════════════════════════════════════════════ */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #2D2D2D !important;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
    font-family: Montserrat, "Open Sans", Arial, sans-serif !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   TOPBAR — Schwarz mit weissem Text
   ════════════════════════════════════════════ */
#header-top-bar {
    background-color: #1A1A1A !important;
    color: #FFFFFF !important;
    border-bottom: none !important;
}

#header-top-bar .nav-link,
#header-top-bar a:not(.dropdown-item):not(.btn) {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}

#header-top-bar .nav-link:hover,
#header-top-bar a:not(.dropdown-item):not(.btn):hover {
    color: var(--bt-primary) !important;
}

/* Sprachauswahl Topbar — grösser und sichtbarer */
#header-top-bar .lang-dropdown {
    margin-left: 12px !important;
}

#header-top-bar .lang-dropdown .btn-link {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 3px !important;
    padding: 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
}

#header-top-bar .lang-dropdown .btn-link:hover {
    background: rgba(var(--bt-primary-rgb),0.2) !important;
    border-color: var(--bt-primary) !important;
    color: var(--bt-primary) !important;
}

#header-top-bar .lang-dropdown .bt-lang-flag {
    width: 22px !important;
    height: 16px !important;
}

#header-top-bar .lang-dropdown .dropdown-menu {
    background: #2A2A2A !important;
    border: 1px solid #444 !important;
    border-top: 2px solid var(--bt-primary) !important;
    min-width: 190px !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.4) !important;
}

#header-top-bar .lang-dropdown .dropdown-item {
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    padding: 9px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#header-top-bar .lang-dropdown .dropdown-item:hover {
    background: rgba(var(--bt-primary-rgb),0.12) !important;
    color: var(--bt-primary) !important;
}

/* ════════════════════════════════════════════
   HEADER — Logo und Suche (Header-Hintergrund)
   ════════════════════════════════════════════ */
#jtl-nav-wrapper {
    background-color: var(--bt-header-bg, var(--bt-nav-bg)) !important;
    border-bottom: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Links im Header — Farbe aus colorHeaderText */
#jtl-nav-wrapper a:not(.dropdown-item):not(.btn):not(.navbar-brand) {
    color: var(--bt-header-text, #FFFFFF) !important;
}

#jtl-nav-wrapper a:not(.dropdown-item):not(.btn):not(.navbar-brand):hover {
    color: var(--bt-primary) !important;
}

/* Seitenkorb / Mini-Warenkorb: Links im Panel müssen dunkel sein */
#jtl-nav-wrapper .c-dp a:not(.dropdown-item):not(.btn):not(.navbar-brand) {
    color: #333 !important;
}
#jtl-nav-wrapper .c-dp a:not(.dropdown-item):not(.btn):not(.navbar-brand):hover {
    color: var(--bt-primary) !important;
}
#jtl-nav-wrapper .c-dp .sc-qty {
    color: #888 !important;
}
#jtl-nav-wrapper .c-dp .weiter-btn {
    color: #666 !important;
}
#jtl-nav-wrapper .c-dp .weiter-btn:hover {
    color: var(--bt-primary) !important;
}

/* Header Icons (Account, Warenkorb) */
#jtl-nav-wrapper #shop-nav .nav-link {
    color: var(--bt-header-text, #FFFFFF) !important;
    font-size: 14px !important;
}

#jtl-nav-wrapper #shop-nav .nav-link:hover {
    color: var(--bt-primary) !important;
}

/* Suchfeld */
#jtl-nav-wrapper .form-control,
#jtl-nav-wrapper .form-control:focus {
    background-color: var(--bt-primary-dark) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-right: none !important;
    border-radius: 3px 0 0 3px !important;
    font-size: 14px !important;
    height: 42px !important;
}

#jtl-nav-wrapper .form-control::placeholder {
    color: rgba(255,255,255,0.6) !important;
}

#jtl-nav-wrapper .form-control:focus {
    border-color: var(--bt-primary) !important;
    background-color: #2D2D2D !important;
    box-shadow: none !important;
}

/* Such-Button */
#jtl-nav-wrapper .input-group-append .btn,
#jtl-nav-wrapper button[type="submit"] {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
    height: 42px !important;
    padding: 0 18px !important;
    border-radius: 0 3px 3px 0 !important;
}

#jtl-nav-wrapper .input-group-append .btn:hover {
    background-color: var(--bt-primary-dark) !important;
    border-color: var(--bt-primary-dark) !important;
}

/* Sprachauswahl im Header (falls vorhanden) */
#jtl-nav-wrapper .lang-dropdown .btn-link {
    color: #FFFFFF !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 3px !important;
    padding: 4px 10px !important;
}

/* ════════════════════════════════════════════
   KATEGORIEN-NAVIGATION — immer schwarzer Balken
   (Logo/Suche/Icons bleiben auf rotem #jtl-nav-wrapper)
   Kategorien kommen via header_menu_single_row.tpl
   in einem eigenen .menu-center-center Container
   ════════════════════════════════════════════ */

/* Kategorien-Zeile: Container + Navbar — Farbe aus colorNavBg */
#jtl-nav-wrapper .menu-center-center {
    background-color: var(--bt-nav-bg) !important;
}
#jtl-nav-wrapper .menu-center-center .navbar {
    background-color: var(--bt-nav-bg) !important;
    padding: 0 !important;
}

/* #mainNavigation — Farbe aus colorNavBg */
#jtl-nav-wrapper #mainNavigation {
    background-color: var(--bt-nav-bg) !important;
    border-top: none !important;
}

/* 2-zeilig (nav-multiple-row): Umbruch erlaubt */
#jtl-nav-wrapper #mainNavigation.nav-multiple-row,
#jtl-nav-wrapper #mainNavigation.nav-three-row {
    width: 100% !important;
    flex-wrap: wrap !important;
    align-content: flex-start !important;
}

/* Nav-Links — Farbe aus colorNavText */
#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link {
    color: var(--bt-nav-text, #1A1A1A) !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 13px 16px !important;
}

#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link:hover,
#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item:hover > .nav-link,
#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.hover > .nav-link {
    color: var(--bt-nav-text, #1A1A1A) !important;
    background: rgba(0,0,0,0.12) !important;
}

#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item.active > .nav-link {
    background: rgba(0,0,0,0.15) !important;
    color: var(--bt-nav-text, #1A1A1A) !important;
}

/* Aktive Kategorie — Unterstrich in Nav-Textfarbe */
#jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link::before {
    border-color: var(--bt-nav-text, #1A1A1A) !important;
}

/* Dropdown Megamenu */
#jtl-nav-wrapper #mainNavigation .dropdown-menu {
    background-color: #1A1A1A !important;
    border: none !important;
    border-top: 2px solid #FFFFFF !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35) !important;
    min-width: 220px !important;
}

#jtl-nav-wrapper #mainNavigation .dropdown-item {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13.5px !important;
    padding: 9px 18px !important;
    font-weight: 400 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

#jtl-nav-wrapper #mainNavigation .dropdown-item:hover {
    background: rgba(var(--bt-primary-rgb),0.3) !important;
    color: #FFFFFF !important;
}

/* Nav-Scrollbar Arrows — roter Gradient */
#jtl-nav-wrapper #mainNavigation .nav-scrollbar-inner {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
#jtl-nav-wrapper #mainNavigation .nav-scrollbar-arrow.left {
    background-image: linear-gradient(to right, var(--bt-primary) 30%, rgba(var(--bt-primary-rgb),0) 100%) !important;
}
#jtl-nav-wrapper #mainNavigation .nav-scrollbar-arrow.right {
    background-image: linear-gradient(to right, rgba(var(--bt-primary-rgb),0) 0%, var(--bt-primary) 70%) !important;
}

/* Mobile: schwarze Nav */
@media (max-width: 991.98px) {
    header .navbar-collapse {
        background: #1A1A1A !important;
    }
    header .nav-mobile-header {
        background: #1A1A1A !important;
    }
    header .nav-offcanvas-title {
        color: #FFFFFF !important;
    }
    #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link {
        color: #FFFFFF !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    }
    #jtl-nav-wrapper #mainNavigation .navbar-nav > .nav-item > .nav-link:hover {
        color: var(--bt-primary) !important;
    }
}

/* ════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════ */
.btn-primary {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--bt-primary-dark) !important;
    border-color: var(--bt-primary-dark) !important;
    color: #1A1A1A !important;
}

.btn-secondary {
    background-color: #3D3D3D !important;
    border-color: #3D3D3D !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
}

.btn-secondary:hover {
    background-color: #1A1A1A !important;
    color: var(--bt-primary) !important;
}

/* ════════════════════════════════════════════
   PRODUKTKACHELN
   ════════════════════════════════════════════ */
.productbox {
    border: 1px solid #E8E8E8 !important;
    border-radius: 4px !important;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s !important;
    background: #FFFFFF !important;
}

.productbox:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px) !important;
    border-color: var(--bt-primary) !important;
}

.productbox .productbox-title a {
    color: #1A1A1A !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

.productbox .productbox-title a:hover {
    color: var(--bt-primary) !important;
    text-decoration: none !important;
}

.price_wrapper .price,
.productbox .price {
    color: #1A1A1A !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   FOOTER — Schwarz mit gelben Titeln
   ════════════════════════════════════════════ */
#footer {
    background-color: #1A1A1A !important;
    color: #CCCCCC !important;
    border-top: 3px solid var(--bt-primary) !important;
    padding: 3rem 0 0 !important;
    margin-top: 2rem !important;
}

#footer h3, #footer h4, #footer h5,
#footer .box-normal-link,
#footer .productlist-filter-headline,
#footer .box-title {
    color: var(--bt-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid rgba(var(--bt-primary-rgb),0.2) !important;
    padding-bottom: 8px !important;
    margin-bottom: 14px !important;
}

#footer a,
#footer .nav-link {
    color: rgba(255,255,255,0.7) !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    line-height: 2.2 !important;
}

#footer a:hover,
#footer .nav-link:hover {
    color: var(--bt-primary) !important;
}

#footer p {
    color: rgba(255,255,255,0.55) !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

#copyright {
    background-color: #111111 !important;
    color: rgba(255,255,255,0.4) !important;
    font-size: 12px !important;
    margin-top: 2rem !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}

#copyright a {
    color: rgba(255,255,255,0.4) !important;
}

/* ════════════════════════════════════════════
   LINKS, TABS, BREADCRUMB
   ════════════════════════════════════════════ */
a { text-decoration: none !important; }

.nav-tabs .nav-link.active {
    color: #1A1A1A !important;
    border-color: var(--bt-primary) !important;
    font-weight: 700 !important;
}

.page-item.active .page-link::after {
    border-color: var(--bt-primary) !important;
}

/* Filter Sidebar Titel */
aside .productlist-filter-headline,
aside .card.card-default > .card-heading > .card-title {
    color: #1A1A1A !important;
    font-weight: 700 !important;
    border-bottom: 2px solid var(--bt-primary) !important;
}

/* ════════════════════════════════════════════
   CONSENT MANAGER
   ════════════════════════════════════════════ */
#consent-manager .consent-btn-primary,
#consent-manager button.consent-btn-primary {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   PUNKT 1+2: HEADER LAYOUT — Suche links, Logo zentriert, Icons rechts
   ════════════════════════════════════════════ */

/* Container-Flex: Logo zentriert */
#jtl-nav-wrapper .container-fluid {
    position: relative !important;
}

/* Logo zentriert */
#jtl-nav-wrapper #logo {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
}

#jtl-nav-wrapper .navbar-brand img,
#jtl-nav-wrapper #shop-logo {
    height: 85px !important;
    width: auto !important;
    max-width: none !important;
}

/* Navbar-Höhe: Logo-Row hoch, Kategorienzeile passt sich automatisch an */
@media (min-width: 992px) {
    #jtl-nav-wrapper .navbar-brand {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }
    /* Logo-Row (schwarzer Bereich) auf 100px */
    #jtl-nav-wrapper .navbar-collapse {
        height: auto !important;
    }
    #jtl-nav-wrapper .nav-logo-wrapper,
    #jtl-nav-wrapper .nav-icons-wrapper {
        min-height: 100px !important;
        display: flex !important;
        align-items: center !important;
    }
    #jtl-nav-wrapper .nav-scrollbar-inner {
        min-height: 100px !important;
    }
}

/* ── Checkout-Header: Logo zentriert + Balken höher + Schriftfarbe ── */
/* Überschreibt btool_tpl_crit.css: .is-checkout header/.navbar { height: fix } */
.is-checkout #jtl-nav-wrapper,
.is-checkout #jtl-nav-wrapper .navbar {
    height: auto !important;
}
.is-checkout #jtl-nav-wrapper .nav-logo-wrapper {
    position: static !important;
    min-height: 120px !important;
}
.is-checkout #jtl-nav-wrapper #logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10;
}
.is-checkout #jtl-nav-wrapper .secure-checkout-icon,
.is-checkout #jtl-nav-wrapper .secure-checkout-icon i,
.is-checkout #jtl-nav-wrapper .secure-checkout-topbar,
.is-checkout #jtl-nav-wrapper .secure-checkout-topbar a {
    color: #FFFFFF !important;
}
@media (min-width: 992px) {
    .is-checkout #jtl-nav-wrapper .hide-navbar .navbar {
        min-height: 120px !important;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Logo grösser und weiss-optimiert auf schwarzem BG */
#jtl-nav-wrapper .navbar-brand {
    padding: 6px 0 !important;
}

/* Suche: links ausgerichtet */
#jtl-nav-wrapper #shop-nav li#search {
    order: -1 !important;
    flex: 1 !important;
    max-width: 340px !important;
}

/* Icons: rechts */
#jtl-nav-wrapper #shop-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 4px !important;
    margin-left: auto !important;
}

/* Suchfeld volle Breite im li */
#jtl-nav-wrapper #shop-nav li#search .input-group {
    width: 100% !important;
}

#jtl-nav-wrapper #shop-nav li#search .form-control {
    min-width: 200px !important;
}

/* Burger-Menu links auf Mobile */
#jtl-nav-wrapper .toggler-logo-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

/* ════════════════════════════════════════════
   PUNKT 2: SPRACHAUSWAHL — gross + sichtbar
   ════════════════════════════════════════════ */

/* Sprachauswahl im Header — grösser */
#jtl-nav-wrapper .lang-dropdown .btn-link {
    color: #FFFFFF !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 3px !important;
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    min-width: 62px !important;
}

#jtl-nav-wrapper .lang-dropdown .btn-link:hover {
    background: rgba(var(--bt-primary-rgb),0.2) !important;
    border-color: var(--bt-primary) !important;
    color: var(--bt-primary) !important;
}

#jtl-nav-wrapper .lang-dropdown .bt-lang-flag {
    width: 22px !important;
    height: 15px !important;
    border-radius: 2px !important;
    object-fit: cover !important;
}

#jtl-nav-wrapper .lang-dropdown .dropdown-menu {
    background: #2A2A2A !important;
    border: 1px solid #444 !important;
    border-top: 2px solid var(--bt-primary) !important;
    min-width: 200px !important;
    padding: 4px 0 !important;
}

#jtl-nav-wrapper .lang-dropdown .dropdown-item {
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    padding: 9px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

#jtl-nav-wrapper .lang-dropdown .dropdown-item:last-child {
    border-bottom: none !important;
}

#jtl-nav-wrapper .lang-dropdown .dropdown-item:hover {
    background: rgba(var(--bt-primary-rgb),0.12) !important;
    color: var(--bt-primary) !important;
}

#jtl-nav-wrapper .lang-dropdown .dropdown-item .bt-lang-flag {
    width: 22px !important;
    height: 15px !important;
}

/* ════════════════════════════════════════════
   PUNKT 5+6: FOOTER ERWEITERUNGEN
   ════════════════════════════════════════════ */

/* Zahlungsarten im Footer */
.bt-footer-payments {
    background: rgba(255,255,255,0.04) !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
    padding: 14px 0 !important;
    margin-bottom: 0 !important;
}

.bt-payment-icons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.bt-payment-icon {
    height: 28px !important;
    width: auto !important;
    max-width: 60px !important;
    object-fit: contain !important;
    background: #FFFFFF !important;
    border-radius: 3px !important;
    padding: 2px 5px !important;
    filter: grayscale(20%) !important;
    opacity: 0.9 !important;
    transition: opacity 0.15s !important;
}

.bt-payment-icon:hover {
    opacity: 1 !important;
    filter: none !important;
}

/* Sprachauswahl im Footer */
.bt-footer-payments .lang-dropdown .btn-link {
    color: rgba(255,255,255,0.8) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 3px !important;
    padding: 5px 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
}

.bt-footer-payments .lang-dropdown .dropdown-menu {
    background: #2A2A2A !important;
    border: 1px solid #555 !important;
    border-top: 2px solid var(--bt-primary) !important;
}

.bt-footer-payments .lang-dropdown .dropdown-item {
    color: #FFFFFF !important;
    font-size: 13px !important;
    padding: 8px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Newsletter Footer */
.newsletter-footer {
    background: rgba(var(--bt-primary-rgb),0.08) !important;
    border-bottom: 1px solid rgba(var(--bt-primary-rgb),0.2) !important;
    padding: 2rem 0 !important;
}

.newsletter-footer-heading {
    color: var(--bt-primary) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

.newsletter-footer .form-control {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #FFFFFF !important;
    border-radius: 3px 0 0 3px !important;
}

.newsletter-footer .form-control::placeholder {
    color: rgba(255,255,255,0.5) !important;
}

.newsletter-footer .btn-primary {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
    border-radius: 0 3px 3px 0 !important;
}

/* ════════════════════════════════════════════
   MOBILE
   ════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    #jtl-nav-wrapper #logo {
        position: relative !important;
        left: auto !important;
        transform: none !important;
    }

    #jtl-nav-wrapper #shop-nav li#search {
        max-width: 100% !important;
        order: 0 !important;
    }
}

/* ════════════════════════════════════════════
   FOOTER: 4-SPALTEN LAYOUT
   ════════════════════════════════════════════ */

.bt-footer-main {
    padding: 3rem 0 2rem !important;
}

/* Spalten-Überschriften */
.bt-footer-heading,
#footer .bt-footer-heading {
    color: var(--bt-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid rgba(var(--bt-primary-rgb),0.2) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
}

/* Nova Box-Titel im Footer */
#footer .box-title,
#footer .card-title,
#footer h3,
#footer h4,
#footer h5 {
    color: var(--bt-primary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-bottom: 1px solid rgba(var(--bt-primary-rgb),0.2) !important;
    padding-bottom: 10px !important;
    margin-bottom: 16px !important;
    background: none !important;
}

/* Footer Links */
.bt-footer-links li {
    padding: 2px 0 !important;
}

.bt-footer-links a,
#footer .box-links a,
#footer .card-body a,
#footer nav a {
    color: rgba(255,255,255,0.72) !important;
    font-size: 13.5px !important;
    text-decoration: none !important;
    line-height: 2.1 !important;
    transition: color 0.15s !important;
    display: block !important;
}

.bt-footer-links a:hover,
#footer .box-links a:hover,
#footer .card-body a:hover {
    color: var(--bt-primary) !important;
    padding-left: 4px !important;
}

/* Footer-Logo: eigenes Bild, max. 250x250px */
.bt-footer-shop-logo {
    margin-bottom: 1rem;
}

.bt-footer-logo {
    display: block !important;
    max-width: 250px !important;
    max-height: 250px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Händler-Logo */
.bt-footer-dealer-logo {
    margin-top: 1.5rem !important;
    padding-top: 1.2rem !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
}

.bt-dealer-logo {
    max-height: 60px !important;
    width: auto !important;
    max-width: 160px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.75 !important;
    transition: opacity 0.2s !important;
}

.bt-dealer-logo:hover {
    opacity: 1 !important;
}

/* Newsletter Spalte */
.bt-footer-newsletter-text {
    color: rgba(255,255,255,0.55) !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    margin-bottom: 14px !important;
}

.bt-newsletter-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.bt-newsletter-input {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 3px !important;
    color: #FFFFFF !important;
    font-size: 13.5px !important;
    padding: 9px 12px !important;
    width: 100% !important;
}

.bt-newsletter-input::placeholder {
    color: rgba(255,255,255,0.4) !important;
}

.bt-newsletter-input:focus {
    border-color: var(--bt-primary) !important;
    background: rgba(255,255,255,0.12) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(var(--bt-primary-rgb),0.15) !important;
}

.bt-newsletter-btn {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 9px 14px !important;
    border-radius: 3px !important;
    width: 100% !important;
    letter-spacing: 0.03em !important;
}

.bt-newsletter-btn:hover {
    background: var(--bt-primary-dark) !important;
    border-color: var(--bt-primary-dark) !important;
}

/* Trennlinie */
.bt-footer-divider {
    border-color: rgba(255,255,255,0.08) !important;
    margin: 1rem 0 0 !important;
}

/* Footer Spalten-Abstand */
.bt-footer-col {
    padding-bottom: 1.5rem !important;
}

/* Responsive */
@media (max-width: 767px) {
    .bt-footer-col {
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        padding-bottom: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .bt-footer-col-logos {
        text-align: center !important;
    }
    .bt-footer-shop-logo img {
        margin: 0 auto !important;
    }
}

/* ── Logos-Zeile im Footer (Zusatzbild + Shop-Logo nebeneinander) ─ */
.bt-footer-logos-row {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-bottom: 1rem !important;
}

.bt-footer-col-logos {
    max-width: 260px !important;
    min-width: 160px !important;
    overflow: visible !important;
}

.bt-footer-extra-img {
    flex-shrink: 0 !important;
}

.bt-extra-logo {
    max-height: 50px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s !important;
}

.bt-extra-logo:hover {
    opacity: 1 !important;
}

/* Trennlinie zwischen Zusatzbild und Shop-Logo */
.bt-footer-extra-img + .bt-footer-shop-logo {
    padding-left: 16px !important;
    border-left: 1px solid rgba(255,255,255,0.15) !important;
}

/* ── Copyright mittig + weiss ───────────────────────────────────── */
#copyright {
    text-align: center !important;
    padding: 12px 0 !important;
}

#copyright .container-fluid > .row {
    justify-content: center !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
}

#copyright .col,
#copyright [class*="col-"] {
    text-align: center !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

#copyright span,
#copyright a,
#copyright p,
#system-credits {
    color: rgba(255,255,255,0.6) !important;
    font-size: 12px !important;
}

#system-credits {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-right: 0 !important;
}

#copyright .ml-auto-util {
    margin-left: 0 !important;
}

/* ════════════════════════════════════════════
   NAVIGATION: AKTIVE KATEGORIE
   ════════════════════════════════════════════ */
#jtl-nav-wrapper #mainNavigation .nav-item.active > .nav-link,
#jtl-nav-wrapper #mainNavigation .nav-item.active > a {
    color: #1A1A1A !important;
    background: rgba(0,0,0,0.15) !important;
    border-bottom: 3px solid #1A1A1A !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   PRODUKTLISTING: GRID LAYOUT FIXES
   ════════════════════════════════════════════ */

/* Produktkacheln im Grid */
.product-wrapper-product {
    background: #FFFFFF !important;
    border: 1px solid #EBEBEB !important;
    border-radius: 4px !important;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s !important;
    overflow: hidden !important;
    height: 100% !important;
}

.product-wrapper-product:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px) !important;
    border-color: var(--bt-primary) !important;
}

/* Produktbild */
.product-wrapper-product .productbox-image,
.product-wrapper-product .item-slider {
    background: #FFFFFF !important;
    overflow: hidden !important;
}

.product-wrapper-product .product-image {
    transition: none !important;
}

/* Produkttitel */
.product-wrapper-product .productbox-title a,
.product-wrapper-product .item-slider-desc a,
.product-wrapper-product .item-slider-desc span {
    color: #1A1A1A !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.product-wrapper-product:hover .productbox-title a {
    color: var(--bt-primary) !important;
}

/* Preis */
.product-wrapper-product .price,
.product-wrapper-product .item-slider-price .price {
    color: #1A1A1A !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
}

/* Rabatt-Badge Position */
.product-wrapper-product {
    position: relative !important;
}

/* Artikelsticker (TOP, NEU etc.) */
.product-wrapper-product .ribbon-wrapper {
    position: absolute !important;
    top: 8px !important;
    right: 0 !important;
    z-index: 10 !important;
}

/* Warenkorb-Button bei Hover zeigen */
.product-wrapper-product .productbox-buy-container {
    padding: 8px !important;
}

.product-wrapper-product .btn-buy,
.product-wrapper-product .productbox-buy-container .btn {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    width: 100% !important;
    border-radius: 3px !important;
    padding: 8px !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}

.product-wrapper-product:hover .btn-buy,
.product-wrapper-product:hover .productbox-buy-container .btn {
    opacity: 1 !important;
}

/* Wunschliste / Vergleich Icons */
.product-wrapper-product .productbox-actions,
.product-wrapper-product .product-actions {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Verfügbarkeit */
.product-wrapper-product .delivery-status-text {
    font-size: 12px !important;
}

/* ════════════════════════════════════════════
   FAVICON: Template-Einstellung überschreiben
   ════════════════════════════════════════════ */
/* Favicon wird über Backend-Upload gesetzt — kein CSS nötig */
/* Problem: favicon muss als /favicon.ico im Root liegen */

/* ════════════════════════════════════════════
   BREADCRUMB VERFEINERN
   ════════════════════════════════════════════ */
.breadcrumb-wrapper {
    background: #F4F4F4 !important;
    border-bottom: 1px solid #EBEBEB !important;
    padding: 8px 0 !important;
}

.breadcrumb {
    background: transparent !important;
    margin-bottom: 0 !important;
    padding: 4px 0 !important;
}

.breadcrumb-item a {
    color: #3D3D3D !important;
    font-size: 13px !important;
}

.breadcrumb-item.active,
.breadcrumb-item.last {
    color: #8C8C8C !important;
    font-size: 13px !important;
}

/* ════════════════════════════════════════════
   SIDEBAR FILTER VERFEINERN
   ════════════════════════════════════════════ */
.productlist-filter-headline {
    color: #1A1A1A !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 2px solid var(--bt-primary) !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

.filter-box-container .card {
    border: 1px solid #EBEBEB !important;
    border-radius: 4px !important;
    margin-bottom: 12px !important;
}

.filter-box-container .card-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #EBEBEB !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1A1A1A !important;
    cursor: pointer !important;
}

/* ════════════════════════════════════════════
   PAGINATION VERFEINERN
   ════════════════════════════════════════════ */
.pagination .page-link::after {
    background: var(--bt-primary) !important;
}

.page-link {
    color: #1A1A1A !important;
    border-color: #EBEBEB !important;
    font-size: 14px !important;
}

.page-item.active .page-link {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   PRODUKTDETAILSEITE VERFEINERN
   ════════════════════════════════════════════ */
.product-title h1,
#product-title h1 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
    line-height: 1.3 !important;
}

.product-detail-price .price,
.product-price-wrapper .price {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #1A1A1A !important;
}

/* UVP Streichpreis */
.product-detail-price del,
.product-price-wrapper del,
.price-wrapper del {
    color: #8C8C8C !important;
    font-size: 0.9rem !important;
}

/* Sie sparen */
.price-saving-wrapper,
.savings {
    color: var(--bt-primary) !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* Warenkorb Button Detailseite */
#buy-form .btn-primary,
.product-buy-container .btn-primary,
button[name="in_den_warenkorb"],
input[name="in_den_warenkorb"] {
    background: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #1A1A1A !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 24px !important;
    border-radius: 3px !important;
    min-width: 200px !important;
}

#buy-form .btn-primary:hover {
    background: var(--bt-primary-dark) !important;
    border-color: var(--bt-primary-dark) !important;
}

/* Lieferstatus */
.delivery-status-1,
.text-success {
    color: #2E7D32 !important;
    font-weight: 600 !important;
}

/* ════════════════════════════════════════════════════════
   bt-badge-stack — konfigurierbares Badge-System
   Steuerung via template.xml > btool Badge-System
   ════════════════════════════════════════════════════════ */

/* Stack-Container — absolut im productbox-inner */
.bt-badge-stack {
    position: absolute;
    top: 0.6rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    pointer-events: none;
}

/* Position: oben links (Standard) */
.bt-badge-stack--tl {
    left: 0;
    right: auto;
}

/* Position: oben rechts */
.bt-badge-stack--tr {
    right: 0.5rem;
    left: auto;
    align-items: flex-end;
}

/* ── Basis-Badge ── */
.bt-badge {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: #FFFFFF;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

/* ── Stil: Pill (abgerundet) ── */
.bt-badge-style--pill .bt-badge {
    padding: 0.3rem 0.85rem 0.3rem 0.6rem;
    border-radius: 0 3rem 3rem 0;
}
.bt-badge-style--pill.bt-badge-stack--tr .bt-badge {
    padding: 0.3rem 0.6rem 0.3rem 0.85rem;
    border-radius: 3rem 0 0 3rem;
}

/* ── Stil: Eckig ── */
.bt-badge-style--square .bt-badge {
    padding: 0.3rem 0.7rem;
    border-radius: 0 3px 3px 0;
}
.bt-badge-style--square.bt-badge-stack--tr .bt-badge {
    border-radius: 3px 0 0 3px;
}

/* ── Stil: Fähnchen ── */
.bt-badge-style--flag .bt-badge {
    padding: 0.25rem 0.75rem 0.25rem 0.5rem;
    border-radius: 0 3rem 3rem 0;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
}

/* ── Gelb braucht dunklen Text ── */
.bt-badge[style*="#F2BF0D"] {
    color: #434343 !important;
}

/* ── Suchspecial-Badge: JTL ribbon-Klassen override ── */
.bt-badge--special.ribbon-1 { background-color: #f2bf0d !important; color: #434343 !important; }
.bt-badge--special.ribbon-2 { background-color: var(--bt-primary) !important; }
.bt-badge--special.ribbon-3 { background-color: #2E7D32 !important; }
.bt-badge--special.ribbon-4 { background-color: #1A1A1A !important; }

/* ── productbox-ribbon: kein absolute mehr, Stack übernimmt ── */
.bt-badge-stack .ribbon.productbox-ribbon,
.bt-badge-stack .ribbon {
    position: static !important;
    top: auto !important;
    left: auto !important;
    box-shadow: none;
}

/* ── Mobile ── */
@media (max-width: 767px) {
    .bt-badge {
        font-size: 0.7rem;
    }
    .bt-badge-style--pill .bt-badge {
        padding: 0.25rem 0.7rem 0.25rem 0.5rem;
    }
}

/* ── UVP + Ersparnis im Listing ── */
.ht-uvp {
    display: block;
    font-size: 0.82em;
    color: #AAAAAA;
    text-decoration: line-through;
    font-weight: 400;
    margin-top: 3px;
    line-height: 1.3;
}

.ht-savings {
    display: block;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--bt-primary);
    margin-top: 2px;
    line-height: 1.3;
}

/* ── Detailseite: UVP + Ersparnis ── */
.suggested-price {
    color: #AAAAAA !important;
    font-size: 13.5px !important;
}

.suggested-price .value {
    text-decoration: line-through !important;
}

.yousave {
    color: var(--bt-primary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

.yousave .percent,
.yousave .value {
    color: var(--bt-primary) !important;
    font-weight: 700 !important;
}

.discount {
    color: var(--bt-primary) !important;
    font-weight: 700 !important;
}

/* ════════════════════════════════════════════
   HERSTELLERLOGO — über dem Produkttitel
   ════════════════════════════════════════════ */
.bt-manufacturer-logo-top {
    margin-bottom: 12px !important;
    display: block !important;
}

.bt-manufacturer-logo-top a {
    display: inline-block !important;
}

.bt-manufacturer-logo-img,
.bt-manufacturer-logo-top img {
    max-height: 70px !important;
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 4px !important;
}

/* Herstellerlogo in Info-Liste: nur Text */
li.product-manufacturer .img-fluid {
    display: none !important;
}

/* ════════════════════════════════════════════
   PREIS — Detailseite
   ════════════════════════════════════════════ */
.product-price-wrapper,
.price-wrapper {
    margin: 10px 0 !important;
}

.product-price-wrapper .price,
.price-wrapper .price,
.price-box .price {
    font-size: 1.7rem !important;
    font-weight: 800 !important;
    color: #1A1A1A !important;
    line-height: 1.2 !important;
}

/* Basis-Preis */
.base-price {
    color: #8C8C8C !important;
    font-size: 12.5px !important;
}

/* ════════════════════════════════════════════════════════
   bt-price-block — Preis rot bei Rabatt, Verfügbarkeit
   ════════════════════════════════════════════════════════ */

/* Verkaufspreis rot wenn UVP oder Sonderpreis aktiv */
.bt-has-discount .price,
.bt-has-discount .productbox-price,
.bt-has-discount .price-wrapper .price {
    color: var(--bt-primary) !important;
    font-weight: 700;
}

/* Streichpreis (UVP / alter VK) */
.ht-uvp {
    display: block;
    font-size: 0.82em;
    color: #999999;
    text-decoration: line-through;
    font-weight: 400;
    margin-top: 2px;
    line-height: 1.3;
}

/* Ersparnis */
.ht-savings {
    display: block;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--bt-primary);
    margin-top: 1px;
    line-height: 1.3;
}

/* Verfügbarkeit im Listing */
.item-delivery-status {
    margin-top: 5px;
    font-size: 0.78em;
    line-height: 1.4;
}

/* ── Verfügbarkeit im Listing (bt-avail) ── */
.bt-avail {
    font-weight: 600;
    font-size: 0.82em;
    margin-top: 4px;
    line-height: 1.4;
}

.bt-avail--green {
    color: #2E7D32;
}

.bt-avail--orange {
    color: #E65100;
}

.bt-avail--red {
    color: #B71C1C;
}

/* status-2 = Sofort verfügbar → grün (Nova Konvention) */
.item-delivery-status .signal_image.status-2 {
    color: #2E7D32;
    font-weight: 600;
}

.item-delivery-status .signal_image.status-2 small::before {
    content: '✓ ';
}

/* status-1 = Bestellbar / eingeschränkt → orange */
.item-delivery-status .signal_image.status-1 {
    color: #E65100;
    font-weight: 600;
}

/* status-0 = Nicht bestellbar / ausverkauft → rot */
.item-delivery-status .signal_image.status-0 {
    color: #B71C1C;
    font-weight: 600;
}

.item-delivery-status .estimated_delivery {
    color: #707070;
    font-size: 0.9em;
}

/* Tab-Navigation: aktiver/hover Unterstrich */
.tab-navigation .nav-link::after {
    border-color: var(--bt-primary) !important;
}

/* Tab-Button sichtbar */
#product-tabs.nav-tabs .nav-link {
    background-color: #f5f5f5 !important;
    color: #555 !important;
    border: 1px solid #ddd !important;
    border-bottom: none !important;
    border-radius: 4px 4px 0 0 !important;
    padding: 8px 16px !important;
    font-weight: 500 !important;
}
#product-tabs.nav-tabs .nav-link.active {
    background-color: #fff !important;
    color: #1a1a1a !important;
    font-weight: 700 !important;
    border-color: #ddd #ddd #fff !important;
}

/* Lieferstatus-Badge in Variationen ausblenden */
.badge-not-available,
.badge.badge-danger.badge-not-available {
    display: none !important;
}

/* Aktive Kategorie Sidebar — alle möglichen Selektoren */
.nav-item.active > .nav-link.snippets-categories-nav-link-child,
.nav-item.active > a.nav-link,
.nav-scrollbar-item.active > .nav-link,
.nav-scrollbar-inner .nav-item.active > .nav-link {
    color: var(--bt-primary) !important;
    font-weight: 700 !important;
}
.nav-item.active > .nav-link.snippets-categories-nav-link-child a {
    color: var(--bt-primary) !important;
    font-weight: 700 !important;
}

/* ============================================================
   STARTSEITEN-CONTENT — snickers-shop.ch
   ============================================================ */
.ss-root {
  --yellow: var(--bt-primary); --yellow-dark: var(--bt-primary-dark);
  --black: #1A1A1A; --dark: #0D0D0D;
  --mid: #666; --border: #E5E5E5; --white: #FFFFFF;
}
.ss-root * { margin:0; padding:0; box-sizing:border-box; }
.ss-root {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: var(--black); -webkit-font-smoothing: antialiased;
}
.ss-hero { background: var(--dark); padding: 64px 24px 56px; position: relative; overflow: hidden; }
.ss-hero::before { content:''; position:absolute; top:0; right:0; width:50%; height:100%;
  background: linear-gradient(135deg, transparent 40%, rgba(var(--bt-primary-rgb),0.04) 100%); }
.ss-hero-inner { max-width:1100px; margin:0 auto; display:grid;
  grid-template-columns:1fr auto; gap:48px; align-items:center; position:relative; z-index:1; }
.ss-hero-badge { display:inline-flex; align-items:center; gap:8px;
  background:rgba(var(--bt-primary-rgb),0.12); border:1px solid rgba(var(--bt-primary-rgb),0.25);
  color:var(--yellow); font-size:11px; font-weight:700; letter-spacing:2.5px;
  text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:20px; }
.ss-hero h1 { font-size:clamp(28px,4.5vw,50px); font-weight:900; color:var(--white);
  line-height:1.05; letter-spacing:-1.5px; margin-bottom:16px; }
.ss-hero h1 em { font-style:normal; color:var(--yellow); }
.ss-hero-lead { font-size:16px; color:rgba(255,255,255,0.55); line-height:1.7;
  max-width:560px; font-weight:300; margin-bottom:32px; }
.ss-hero-stats { display:flex; gap:28px; flex-wrap:wrap; }
.ss-hero-stat strong { display:block; font-size:26px; font-weight:900;
  color:var(--yellow); letter-spacing:-1px; line-height:1; }
.ss-hero-stat span { font-size:11px; color:rgba(255,255,255,0.4);
  font-weight:500; margin-top:3px; display:block; }
.ss-hero-cta { display:flex; flex-direction:column; gap:10px; align-items:flex-end; flex-shrink:0; }
.ss-btn-primary { display:inline-flex; align-items:center; gap:8px;
  background:var(--yellow); color:var(--black); font-size:14px;
  font-weight:800; padding:14px 28px; border-radius:5px;
  text-decoration:none; white-space:nowrap; transition:background 0.2s; }
.ss-btn-primary:hover { background:var(--yellow-dark); }
.ss-btn-outline { display:inline-flex; align-items:center; gap:8px;
  background:transparent; color:rgba(255,255,255,0.7); font-size:13px;
  font-weight:600; padding:11px 20px; border-radius:5px;
  border:1px solid rgba(255,255,255,0.15); text-decoration:none;
  white-space:nowrap; transition:all 0.2s; }
.ss-btn-outline:hover { border-color:var(--yellow); color:var(--yellow); }
.ss-usp-bar { background:var(--yellow); overflow:hidden; }
.ss-usp-bar-inner { max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; }
.ss-usp-item { display:flex; align-items:center; gap:8px; padding:12px 16px;
  font-size:12px; font-weight:700; color:var(--black); }
.ss-about { padding:72px 24px; }
.ss-about-inner { max-width:1100px; margin:0 auto; display:grid;
  grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.ss-section-label { font-size:11px; font-weight:700; letter-spacing:3px;
  text-transform:uppercase; color:var(--bt-primary-dark); margin-bottom:12px; display:block; } /* Kontrast-Fix: var(--bt-primary-dark) = 4.6:1 auf weiss */
.ss-about h2 { font-size:clamp(22px,3vw,34px); font-weight:900; letter-spacing:-0.8px;
  line-height:1.1; margin-bottom:20px; color:var(--black); }
.ss-about-text { font-size:15px; color:#444; line-height:1.75; }
.ss-about-text p + p { margin-top:14px; }
.ss-about-right { display:flex; flex-direction:column; gap:14px; }
.ss-service-card { border:1.5px solid var(--border); border-radius:10px;
  padding:20px 20px 20px 16px; border-left:4px solid var(--yellow); transition:box-shadow 0.2s; }
.ss-service-card:hover { box-shadow:0 4px 16px rgba(0,0,0,0.07); }
.ss-service-card h3 { font-size:14px; font-weight:800; color:var(--black); margin-bottom:5px; }
.ss-service-card p { font-size:13px; color:var(--mid); line-height:1.6; }
.ss-sortiment-teaser { padding:40px 24px 8px; }
.ss-sortiment-teaser-inner { max-width:1100px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:flex-end;
  border-bottom:2px solid var(--yellow); padding-bottom:16px; flex-wrap:wrap; gap:16px; }
.ss-sortiment-teaser h2 { font-size:clamp(22px,3vw,34px); font-weight:900;
  letter-spacing:-0.8px; color:var(--black); }
@media (max-width:768px) {
  .ss-hero-inner { grid-template-columns:1fr; }
  .ss-hero-cta { align-items:flex-start; flex-direction:row; flex-wrap:wrap; }
  .ss-about-inner { grid-template-columns:1fr; gap:36px; }
  .ss-usp-bar-inner { flex-wrap:wrap; }
  .ss-usp-item { flex:1 1 45%; }
}

/* H1 Farb-Fix Startseiten-Hero */
.ss-hero h1 { color: #FFFFFF !important; }
.ss-hero h1 em { color: var(--bt-primary) !important; }

/* H1 Farb-Fix Startseiten-Hero — stärkerer Selektor */
body .ss-hero h1,
body .ss-hero h1 * { color: #FFFFFF !important; }
body .ss-hero h1 em { color: var(--bt-primary) !important; }

/* H1 erster Textknoten (vor em) explizit weiss */
body .ss-hero h1 { color: #FFFFFF !important; }

/* H1 Hero — Override globaler Heading-Farbe */
div.ss-root section.ss-hero h1 { color: #FFFFFF !important; }
div.ss-root section.ss-hero h1 em { color: var(--bt-primary) !important; }

/* H1 Hero — Final Fix (nach globalem h1-Reset, gleiche Spezifität, später = gewinnt) */
.ss-hero h1 { color: #FFFFFF !important; }
.ss-hero h1 em { color: var(--bt-primary) !important; }

/* Stats-Zentrierung */
.ss-hero-stat { text-align: center; }

/* ════════════════════════════════════════════════════════════════
   GELB → ROT: btool_tpl.css wurde mit $primary:#F8BF00 kompiliert.
   Alle Bootstrap-Primary-Farben hier auf Redtool-Rot überschreiben.
   ════════════════════════════════════════════════════════════════ */

/* Form Controls — Focus-Ring */
.form-control:focus {
    border-color: var(--bt-primary) !important;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 0 0.2rem rgba(var(--bt-primary-rgb),0.25) !important;
}
.custom-select:focus {
    border-color: var(--bt-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bt-primary-rgb),0.25) !important;
}
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--bt-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bt-primary-rgb),0.25) !important;
}

/* Buttons — Focus-Ring (generisch) */
.btn:focus, .btn.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bt-primary-rgb),0.25) !important;
}

/* Outline-Primary Buttons */
.btn-outline-primary {
    color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}

/* Icon Buttons */
.btn-icon-primary:hover {
    border-color: var(--bt-primary) !important;
    color: var(--bt-primary) !important;
}
.btn-icon-primary:not(:disabled):not(.disabled):active,
.btn-icon-primary:not(:disabled):not(.disabled).active,
.btn-icon-secondary:not(:disabled):not(.disabled):active,
.btn-icon-secondary:not(:disabled):not(.disabled).active {
    border-color: var(--bt-primary) !important;
    background-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}

/* Checkboxen + Radio — checked/indeterminate */
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: var(--bt-primary) !important;
    background-color: var(--bt-primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 0 0.2rem rgba(var(--bt-primary-rgb),0.25) !important;
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--bt-primary) !important;
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: var(--bt-primary) !important;
    background-color: var(--bt-primary) !important;
}
.custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(var(--bt-primary-rgb),0.5) !important;
}

/* Filter-Sidebar: Badge-Check (ausgewählte Filteroptionen) */
.badge-check {
    border: 2px solid var(--bt-primary) !important;
}
.badge-check .badge-circle {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}
.badge-check.active,
.badge-check:checked {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}

/* Badge-Outline-Primary */
.badge-outline-primary {
    border-color: var(--bt-primary) !important;
    color: var(--bt-primary) !important;
}
.badge-outline-primary:hover,
.badge-outline-primary:focus {
    background-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--bt-primary-rgb),0.5) !important;
}

/* Bootstrap Utility: bg-primary, text-primary, border-primary */
.bg-primary { background-color: var(--bt-primary) !important; }
button.bg-primary:hover, button.bg-primary:focus,
a.bg-primary:hover, a.bg-primary:focus {
    background-color: var(--bt-primary-dark) !important;
}
.text-primary { color: var(--bt-primary) !important; }
.border-primary { border-color: var(--bt-primary) !important; }

/* Progress Bar */
.progress-bar { background-color: var(--bt-primary) !important; }

/* Badge-Circle */
.badge-circle:hover, .badge-circle:focus {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}

/* Bootstrap-Select Focus */
.bootstrap-select.custom-select button.dropdown-toggle:focus,
.bootstrap-select.custom-select button[data-toggle=collapse]:focus:not(.navbar-toggler) {
    border-color: var(--bt-primary) !important;
}

/* Slick Slider Arrows */
.slick-arrow:hover {
    background-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}

/* Karussell Thumbnail — aktives Bild */
.carousel-thumbnails .slick-slide.slick-current {
    border: 1px solid var(--bt-primary) !important;
}

/* Variation Swatches — aktiv */
.swatches-image.active {
    border: 1px solid var(--bt-primary) !important;
}
.swatches-text.active {
    border: 1px solid var(--bt-primary) !important;
    background-color: #f5f7fa !important;
}

/* Form Icon Trigger */
.form-icon-trigger-label:hover {
    color: var(--bt-primary) !important;
}

/* Btn-Link — Hover (nur ausserhalb Header/Footer um keine Überschneidungen) */
.btn-link:hover {
    color: var(--bt-primary) !important;
}

/* Modal Close Button */
.modal-header .close:hover {
    background-color: var(--bt-primary) !important;
}

/* Consent Modal */
.consent-modal-close:hover, .consent-modal-close:focus {
    color: var(--bt-primary) !important;
}

/* Consent: give-consent-preview */
a.give-consent-preview:focus-visible {
    color: var(--bt-primary) !important;
}

/* Custom Range */
.custom-range:focus::-webkit-slider-thumb,
.custom-range:focus::-moz-range-thumb,
.custom-range:focus::-ms-thumb {
    box-shadow: 0 0 0 1px #f5f7fa, 0 0 0 0.2rem rgba(var(--bt-primary-rgb),0.25) !important;
}

/* Bootstrap-Select — aktive Zeile Hintergrund */
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active {
    background-color: var(--bt-primary) !important;
}

/* Wunschliste/Vergleich Badge auf Produkt-Kacheln */
.badge-circle-1.on-list {
    border: 1px solid var(--bt-primary) !important;
    background-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}

/* FA Superscript Badge (z.B. Zähler auf Icons) */
.fa-sup {
    background-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}

/* Btn-Animated Hover-Animation (Hintergrund-Welle) */
.btn-animated .btn-primary:hover,
.btn-animated .btn-primary:hover::before {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
}
.btn-animated .btn-outline-primary:hover::after {
    background: var(--bt-primary) !important;
}

/* Bootstrap Badge-Primary → Rot */
.badge-primary {
    background-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}
a.badge-primary:hover,
a.badge-primary:focus {
    background-color: var(--bt-primary-dark) !important;
    color: #FFFFFF !important;
}
a.badge-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bt-primary-rgb),0.5) !important;
}

/* SIDEBAR-NAVIGATION: aktive Nav-Panel Links (gelber Balken — Hauptquelle) */
aside .nav-panel > .nav > .active > .nav-link,
.nav-panel > .nav > .active > .nav-link {
    border-bottom: 0.375rem solid var(--bt-primary) !important;
}

/* Sidebar: Filter-Item aktiv (Bild-Filter, Farb-Filter) */
.filter-item.active .filter-img,
.filter-item:active .filter-img {
    border: 3px solid var(--bt-primary) !important;
}
.filter-item.active .filter-value,
.filter-item:active .filter-value,
.filter-item.active .filter-text {
    border-color: var(--bt-primary) !important;
    border-width: 2px !important;
}

/* Sidebar: aktive Filter-Leiste (unterer Balken) */
.filter-item.active .filter-label::after,
.filter-item:active .filter-label::after {
    border-color: var(--bt-primary) !important;
}

/* noUiSlider (Preisbereich-Slider) */
.noUi-horizontal .noUi-connect,
.noUi-vertical .noUi-connect,
.noUi-connect {
    background: var(--bt-primary) !important;
}
.noUi-handle {
    background: var(--bt-primary) !important;
    border: 0 !important;
}
.noUi-handle:focus {
    box-shadow: 0px 0px 0px 5px rgba(var(--bt-primary-rgb),0.5) !important;
}
/* noUiSlider: range bar (lines 22811-22884 in btool_tpl.css) */
.noUi-bar,
.noUi-range-bar,
.noUi-active-bar {
    background: var(--bt-primary) !important;
}

/* Footer Links Hover — überschreibt gelbes Hover aus btool_tpl.css */
#footer a:not(.btn):hover {
    color: var(--bt-primary) !important;
}

/* Produktdetail-Galerie: Schliessen-Button + Slider-Pfeile */
#image_wrapper.fullscreen .product-detail-image-topbar #image_fullscreen_close:hover {
    background-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}
#image_wrapper #gallery .slick-arrow:hover {
    background-color: var(--bt-primary) !important;
}

/* Custom Range (Schieberegler) */
.custom-range::-webkit-slider-thumb:focus,
.custom-range::-moz-range-thumb:focus,
.custom-range::-ms-thumb:focus,
.custom-range::-webkit-slider-thumb:active,
.custom-range::-moz-range-thumb:active {
    background-color: var(--bt-primary) !important;
}
.custom-range::-webkit-slider-thumb {
    background-color: var(--bt-primary) !important;
}
.custom-range::-moz-range-thumb {
    background-color: var(--bt-primary) !important;
}
.custom-range::-ms-thumb {
    background-color: var(--bt-primary) !important;
}

/* Pagination / Page-Link — aktive Paginierung */
.page-link-active,
.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--bt-primary-rgb),0.25) !important;
}

/* Input-Group Append — Focus-Ring */
.form-control:focus + .input-group-append .input-group-text {
    border-color: var(--bt-primary) !important;
}

/* Modal Close Focus */
.modal-header .close:focus {
    background: var(--bt-primary) !important;
    color: #FFFFFF !important;
}

/* Login Box Icon */
.box_login .register .fa {
    color: var(--bt-primary) !important;
}

/* Konfigurator / Variationsauswahl: aktive Filterpunkte */
aside .nav-panel-variation .filter-item.active .filter-label,
aside .nav-panel-variation .filter-item.active .filter-text {
    border-bottom-width: 0.375rem !important;
    border-bottom-style: solid !important;
    border-bottom-color: var(--bt-primary) !important;
}

/* Ring-Loader (Ladeanimation) */
.ring-loader {
    border-color: var(--bt-primary) var(--bt-primary) transparent transparent !important;
}

/* Sonstiges: Tabellen-Stripe / aktive Links in Content */
#content .nav-pills .nav-link.active,
#content .nav-pills .show > .nav-link {
    background-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}

/* Bootstrap List-Group aktiver Eintrag */
.list-group-item.active {
    background-color: var(--bt-primary) !important;
    border-color: var(--bt-primary) !important;
    color: #FFFFFF !important;
}
.list-group-item-primary {
    background-color: rgba(var(--bt-primary-rgb), 0.15) !important;
    color: var(--bt-primary-dark) !important;
}
.list-group-item-primary.list-group-item-action.active {
    background-color: var(--bt-primary-dark) !important;
    border-color: var(--bt-primary-dark) !important;
    color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════════
   b-tool Typografie, Sekundärfarbe, Mobile — via CSS-Variablen
   ═══════════════════════════════════════════════════════════════ */

/* Schriftart + Grösse */
body {
    font-family: var(--bt-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--bt-font-size, 16px);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--bt-font-heading, var(--bt-font, sans-serif));
    color: var(--bt-heading, #1A1A1A);
}

/* Inhalts-Links (nicht Buttons, nicht Navigation, nicht Badges) */
.container a:not(.btn):not(.nav-link):not(.navbar-brand):not([class*="badge"]):not(.dropdown-item):not(.page-link) {
    color: var(--bt-link, var(--bt-primary));
}
.container a:not(.btn):not(.nav-link):not(.navbar-brand):not([class*="badge"]):not(.dropdown-item):not(.page-link):hover {
    color: var(--bt-link, var(--bt-primary));
    opacity: 0.8;
}

/* Navigation Hover-Farbe */
header .navbar-nav .nav-link:hover,
header .navbar-nav .nav-link:focus {
    color: var(--bt-nav-hover, var(--bt-primary)) !important;
}
header .navbar-nav .nav-item.active > .nav-link,
header .navbar-nav .nav-item.current > .nav-link {
    color: var(--bt-nav-hover, var(--bt-primary)) !important;
}

/* Dropdown-Menüs im Header: weisse Elternfarbe zurücksetzen */
header .dropdown-menu,
header .dropdown-menu .dropdown-item,
header .dropdown-menu a:not(.btn),
header .dropdown-footer a,
header .dropdown-body a:not(.btn) {
    color: #525252 !important;
}
header .dropdown-menu .dropdown-item:hover,
header .dropdown-menu .dropdown-item:focus,
header .dropdown-menu a:not(.btn):hover,
header .dropdown-footer a:hover {
    color: var(--bt-primary) !important;
    background-color: rgba(var(--bt-primary-rgb), 0.06);
}

/* Sekundärfarbe für sekundäre Buttons */
.btn-secondary {
    background-color: var(--bt-secondary, #3D3D3D) !important;
    border-color:     var(--bt-secondary, #3D3D3D) !important;
    color: #FFFFFF !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: var(--bt-secondary-dark, #2a2a2a) !important;
    border-color:     var(--bt-secondary-dark, #2a2a2a) !important;
    color: #FFFFFF !important;
}

/* Textfarbe auf Primär-Buttons (konfigurierbar für helle Primärfarben) */
.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: var(--bt-btn-text, #FFFFFF) !important;
}

/* Mobile Touch-Targets — min. 44px (Apple HIG / WCAG 2.5.5) */
@media (max-width: 991.98px) {
    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .hdr-l { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea { min-height: 44px; font-size: max(16px, var(--bt-font-size, 16px)); }
}