:root {
    --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-primary: "Open Sans", sans-serif;
    --font-secondary: "Open Sans", sans-serif;
    --font-headers: "Open Sans", sans-serif;

    --color-nuance1: #262524;
    --color-nuance2: #73706E;
    --color-nuance3: #F2BA52;
    --color-nuance4: #F2A649;
    --color-nuance5: #F2A649;

    --color-default: #262524;
    --color-primary: #262524;
    --color-link: #F2A649;
    --color-backgrounds: #262524;
    --color-shadows: #262524;
    --color-secondary: #262524;
    --color-bright: #262524;

    --background-topbar: #F2A649;
    --background-header: #F2BA52;
    --background-primary: #262524;
    --background-secondary: #F2A649;
    --background-footer: #262524;
    --background-copyright: #F2A649;
    scroll-behavior: smooth;

}

.bg-post {
    background: var(--color-nuance5);
    border: 0;
}

.btn:active,
.btn:focus {
	border: 0 !important;
	box-shadow: none !important;
}

.btn-primary {
    background: var(--background-primary);
    border: 0;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:hover {
    background: var(--background-secondary);
    border: 0;
}

html {
    scroll-behavior: auto !important;
}

body {
	background: #f6f6f1;
    font-family: var(--font-default);
    color: var(--color-default);
	font-size: 14px;
}

a {
    color: var(--color-link);
    text-decoration: none;
}

a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-primary);
    text-transform: uppercase;
}

h1, h2 {
    font-weight: 700;
    font-size: 200%;
    line-height: 1em;
    color: var(--color-secondary);
}

h3, h4 {
    font-weight: 600;
    font-size: 16px;
    color: #333;
}

nav .navbar-toggler {
    border: 2px solid #fff !important;
    color: #fff;
}

nav a {
    color: #fff !important;
    font-size: 18px;
}

nav a,
.hover-underline-animation {
    display: inline-block;
    position: relative;
    color: #ff5233;
}

nav a::after,
.hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ff5233;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

nav a:hover::after,
.hover-underline-animation:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* --- Legacy #topbar + header a — neutralisiert, neues Design in site-header --- */
header .icon { max-height: 64px; width: auto; }
/* header a und header a:hover werden vom neuen .site-header überschrieben */

#content {
    min-height: 20vh;
    padding: 1em 0 1em 0;
}

footer {
    background: var(--background-footer);
    color: #fff;
}

footer ul {
    list-style-type: none;
    margin: 0 0 0 0.5em;
    padding: 0;
}

footer ul li {
    line-height: 2em;
    margin: 0;
    padding: 0;
}

footer a {
    color: #fff !important;
}

footer h3 {
    font-size: 21px;
    text-transform: none;
    color: #fff;
}

.backtotop {
    position: relative;
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    border-top: 80px solid #333;
    border-right: 150px solid transparent;
    border-left: 150px solid transparent;
    z-index: 10;
    text-align: center;
}

.backtotop svg {
    position: relative;
    top: -65px;
    left: -15px;
    color: #ff5233;
}

.no-list {
    list-style: none;
    padding: 0;
}

.history {
    height: 0px;
    overflow-y: auto;
    transform: all .2s;
}

#copyright {
    width: 100%;
    background: var(--background-copyright);
    padding-top: 1em;
    padding-bottom: 1em;
    text-align: center;
    color: var(--color-bright) !important;
}

#copyright a {
    color: var(--color-bright) !important;
}

.btn-warn svg,
.btn-created svg {
    position: relative;
    top: -2px;
}

.cookiemonster-button  {
    left: 0;
    border-radius: 0 7px 0 0;
}

#service {
    background: var(--background-primary) url(../img/service.jpg) no-repeat 0px 0px;
    background-size: 100%;
    color: #fff;
    padding-top: 7em !important;
    min-height: 550px;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    margin-bottom: 3em;
}

.service-box {
    background: #333;
    color: #fff;
    border-left: .5px solid #666;
    border-right: .5px solid #666;
    transition: all .2s;
    position: relative;
    z-index: 1;
}

.service-box:hover {
    margin-top: -10px;
}

.service-box p,
.service-box h3,
.service-box svg {
    color: #fff;
    transition: .2s all;
}

.service-box:hover p,
.service-box:hover h3,
.service-box:hover svg {
    color: #333;
    transition: .2s all;
}

.service-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: scaleY(0);
    transform-origin: bottom center;
    background: #fff;
    z-index: -1;
    transition: transform 0.3s;
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.service-box:hover::after {
    transform: scaleY(1);
}

#thankyou {
    color: #333;
}

@media ( max-width: 768px ) {

    #thankyou {
        color: #fff;
        padding-top: 1em;
    }

}

.back-to-top {
    background: #ffffff99;
    position: fixed;
    bottom: 0px;
    right: 0px;
    padding: 1em 1.25em 1em 1.25em;
    border-radius: 7px 0 0 0;
    z-index: 100;
    transition: all .2s;
    color: #333;
}

.back-to-top:hover {
    background: #ffffffff;
    transition: all .2s;
}

iframe {
    position: relative;
    padding: 0;
    margin: 0;
}

.maps {
    max-height: 450px;
    overflow-y: hidden;
}

p.description {
    height: auto;
	min-height: 156px;
    overflow-y: auto;
}

.btn-dark svg {
	margin: 0 7px 0 0;
	position: relative;
	top: -1px;
}

.product-image,
.category-image {
	background-size: 75% !important;
    transition: background-size .2s ease-in;
    -moz-transition: background-size .2s ease-in;
    -web-kit-transition: background-size .2s ease-in;
}

.product-image:hover,
.category-image:hover {
	background-size: 110% !important;
    transition: background-size .2s ease-in;
    -moz-transition: background-size .2s ease-in;
    -web-kit-transition: background-size .2s ease-in;
}

.navigation .wrapper {
	text-align: center;
}

@media ( max-width: 768px ) {
	.navigation {
		max-width: 100%;
		overflow-x: auto;
	}

	.navigation .wrapper {
		width: 1700px;
	}
}

.alert {
	text-align: center;
	font-size: 20px;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.alert svg {
  width: 2em;
  height: 2em;
  display: block;
  margin: 1em auto 1em auto;
  animation: shaking 0.35s infinite;
}

@keyframes shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0eg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.bg-orange {
	background: var(--background-secondary);
	color: #fff;
}

.bg-orange h2,
.bg-orange h3 {
	color: #fff;
}

.container-products-offers .shadow.rounded {
	background: var(--background-secondary);
	color: var(--color-bright);
}

.container-products-offers a.text-link {
	color: var(--color-bright);
}

.container-products-offers .shadow.rounded .product-title,
.container-products-offers .shadow.rounded .product-price {
	color: var(--color-bright);
}

.container-products-offers .shadow.rounded .product-image {
	background-color: #fff !important;
}

/* Toast-Container Basis-Stile siehe weiter unten (.container-messages, .bbt-toast) */

.circle {
	border-radius: 50%;	
}

.topbar-contact-button {

	position: fixed;
	right: 20px;
	top: 20px;
	border-radius: 50%;
	background: #25D366;
	padding: .75em;

}

.topbar-contact-window-position {
	width: 40vw;
	height: 0;
	border-radius: 15px;
	z-index: 10000 !important;
}


@media(min-width: 768px) {

	.topbar-contact-window {
		position: fixed;
		right: 25px;
		top: 95px;
		padding: 2em;
		width: 500px;
		background: #fff;
		color: #333;
		border-radius: 15px;
		box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
		z-index: 100000 !important;
	}

}

@media(max-width: 767px) {

	.topbar-contact-window {
		position: fixed;
		right: 0px;
		top: 95px;
		padding: 1em;
		width: 90%;
		background: #fff;
		color: #333;
		border-radius: 15px;
		box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
		z-index: 100000 !important;
	}

}

.topbar-contact-window a,
.topbar-contact-window a:hover {
	font-weight: bold;
}

.topbar-contact-window input[type="checkbox"] + label:before {
	border: solid #333 3px !important;
}

.topbar-contact-window input[type=checkbox] {
    width: 32px;
    height: 32px;
    margin: 0 auto 0 auto;
    text-align: center;
}

.btn-whatsapp {
    background: #25d366 !important;
    color: #ffffff !important;
}

.premium-badge-position {
	position: relative;
	top: 25px;
	left: 25px;
	width: 0;
	height: 0;
}

.info-circle {
	background: #ffb300;
    color: #111;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
	width: 28px;
	height: 28px;
    padding: .25em 0 0 0;
}

.list-group-flush li {
	cursor: pointer;
	padding: .4em;
}

.list-group-flush li:active {
	font-weight: bold;
}

.ajax-loading-frame {

	width: 100%;
	height: 100%;
	backdrop-filter: blur(10px);
	background: #ffffff55;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10000;
	
}

.ajax-loading-icon {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10001;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   BBT-BOXES — vereinheitlichter Loader (wandernde Box)
   ============================================================ */
.bbt-boxes {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 56px;
	height: 56px;
	flex: 0 0 auto;
}
.bbt-boxes i,
.bbt-boxes b {
	position: absolute;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	box-sizing: border-box;
}
.bbt-boxes i { background: rgba(242, 166, 73, .18); }
.bbt-boxes i:nth-child(1) { top: 0;    left: 0;    }
.bbt-boxes i:nth-child(2) { top: 0;    left: 34px; }
.bbt-boxes i:nth-child(3) { top: 34px; left: 34px; }
.bbt-boxes i:nth-child(4) { top: 34px; left: 0;    }
.bbt-boxes b {
	top: 0;
	left: 0;
	background: #F2A649;
	box-shadow: 0 6px 14px rgba(242, 166, 73, .4);
	animation: bbt-box-travel 1.8s cubic-bezier(.6, 0, .4, 1) infinite;
}
@keyframes bbt-box-travel {
	0%,  12%  { transform: translate(0, 0); }
	25%, 37%  { transform: translate(34px, 0); }
	50%, 62%  { transform: translate(34px, 34px); }
	75%, 87%  { transform: translate(0, 34px); }
	100%      { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.bbt-boxes b { animation-duration: 3s; }
}

.swiper-button-next, .swiper-button-prev {
	color: #fff;
}

.hidden {
    display: none !important;
}

.cart tr {
    transition: all .2s;
}

.cart tr:hover {
    background: #eee;
    transition: all .2s;
}

.leform-element-80 {
	display: none;
}

.vbox-content {
	margin: 0 !important;
}

.vbox-content img {
	max-height: 80vh;
}

.product-info {
	min-height: 90px;	
}

.container-cart,
.container-invoice {
  width: 100%;
  overflow-y: auto;
  margin: 0 0 1em;
}

.container-cart::-webkit-scrollbar,
.container-invoice::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
}

.container-cart::-webkit-scrollbar-thumb,
.container-invoice::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 3px solid #fff;
  background-color: rgba(0, 0, 0, .3);
}

.cart-products-count {
  background: #393e44;
  border-radius: 50%;
  color: #fff;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 12px;
  text-align: center;
  display: inline-block;
}

div.leform-input .leform-imageselect:checked+label {
  background: #00aa0033;
}

.leform-imageselect-label {
  text-align: center !important;
}

.container-messages {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: calc(100vw - 2rem);
  margin: 0;
  z-index: 100001;
  pointer-events: none;
  text-align: center;
}

.bbt-toast {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: #ffffff;
  color: #1f2937;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 28px -10px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 0.7rem 1rem;
  min-width: 240px;
  max-width: 420px;
  pointer-events: auto;
  animation: bbt-toast-in 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  font-size: 0.92rem;
  line-height: 1.35;
  text-align: left;
}

.bbt-toast-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
}

.bbt-toast-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  border-left: 4px solid #16a34a;
  box-shadow: 0 12px 30px -10px rgba(22, 163, 74, .35), 0 2px 8px rgba(22, 163, 74, .14);
}
.bbt-toast-success .bbt-toast-icon  { color: #16a34a; }
.bbt-toast-success .bbt-toast-title { color: #166534; }

.bbt-toast-error {
  background: #fef2f2;
  border-color: #fecaca;
  border-left: 4px solid #dc2626;
  box-shadow: 0 12px 30px -10px rgba(220, 38, 38, .35), 0 2px 8px rgba(220, 38, 38, .14);
}
.bbt-toast-error .bbt-toast-icon  { color: #dc2626; }
.bbt-toast-error .bbt-toast-title { color: #991b1b; }

.bbt-toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bbt-toast-title {
  font-weight: 600;
  color: #0f172a;
}

.bbt-toast-text {
  color: #475569;
  font-size: 0.85rem;
}

.bbt-toast-link {
  color: #0f172a;
  font-size: 0.85rem;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  margin-top: 2px;
  line-height: 1.2;
  padding-bottom: 1px;
}

.bbt-toast-link:hover {
  color: #F2A649;
}

@keyframes bbt-toast-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .bbt-toast {
    min-width: 0;
    width: calc(100vw - 2rem);
  }
}

table.header,
table.footer,
table.cart {
  min-width: 768px !important;
}

.ajaxloader {
	position: relative;
	max-width: 64px;
	top: -10px;
}

.trafficlight {
	display: inline-block;
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

.category-name {
padding: .5em 0 0 0;
	margin: 0;
	min-height: 50px;
}
/* === BBT: Warenkorb-Badge Pulsanimation === */
@keyframes bbt-badge-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.5); background: #F2A649; }
    100% { transform: scale(1); }
}
.bbt-badge-pulse {
    animation: bbt-badge-pulse .5s ease-out;
}

/* === BBT: Versand-Spinner Übergang === */
#bbt-shipping-cards .spinner-border,
#bbt-checkout-shipping-display .spinner-border,
#bbt-checkout-total .spinner-border {
    vertical-align: middle;
}

/* === BBT: Kategorie-Navigation als Mini-Cards === */
.nav-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 2px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.nav-categories::-webkit-scrollbar { display: none; }

/* Weiße Karten mit dunklem Text — gute Lesbarkeit auf gelbem Header-Hintergrund */
.nav-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    min-width: 100px;
    max-width: 116px;
    padding: 8px 7px 10px;
    border-radius: 10px;
    border: 2px solid rgba(255,255,255,.4);
    transition: border-color .15s, box-shadow .15s, transform .15s;
    background: rgba(255,255,255,.92);
    flex-shrink: 0;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.nav-cat-card:hover {
    border-color: #262524;
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.nav-cat-card--active {
    border-color: #262524 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
}

.nav-cat-img {
    width: 88px;
    height: 62px;
    border-radius: 7px;
    background-size: cover;
    background-position: center;
    background-color: #f0ede8;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.nav-cat-img svg { opacity: .45; width: 28px; height: 28px; }

.nav-cat-name {
    font-size: 10.5px;
    text-align: center;
    color: #262524;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1.3;
    word-break: break-word;
    hyphens: auto;
    max-width: 100px;
    /* Zweizeilig erlaubt – kein white-space:nowrap */
}

@media (max-width: 768px) {
    .nav-cat-card { min-width: 88px; max-width: 100px; }
    .nav-cat-img  { width: 76px; height: 54px; }
    .nav-cat-name { font-size: 10px; }
}
@media (max-width: 576px) {
    .nav-cat-card { min-width: 76px; max-width: 88px; padding: 6px 5px 8px; }
    .nav-cat-img  { width: 64px; height: 46px; }
    .nav-cat-name { font-size: 9.5px; }
}
@media (max-width: 400px) {
    .nav-categories { gap: 5px; }
    .nav-cat-card   { min-width: 66px; max-width: 76px; }
    .nav-cat-img    { width: 54px; height: 38px; }
    .nav-cat-name   { font-size: 9px; }
}

/* === BBT: Tag-Input für Baggermodelle === */
.bbt-tag-input-wrap {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 6px 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    cursor: text;
    background: #fff;
    min-height: 46px;
    align-items: center;
    transition: border-color .2s, box-shadow .2s;
}
.bbt-tag-input-wrap:focus-within {
    border-color: #F2A649;
    box-shadow: 0 0 0 .15rem rgba(242,166,73,.25);
}
.bbt-tag {
    background: #F2A649;
    color: #262524;
    padding: 3px 6px 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.bbt-tag-remove {
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    opacity: .65;
    border: none;
    background: none;
    padding: 0;
    color: #262524;
    line-height: 1;
    display: flex;
    align-items: center;
}
.bbt-tag-remove:hover { opacity: 1; }
.bbt-tag-text-input {
    border: none;
    outline: none;
    flex: 1 1 160px;
    min-width: 140px;
    font-size: 13px;
    padding: 4px 0;
    background: transparent;
}
#bbt-tags-list { display: contents; }

/* ============================================================
   SITE-HEADER — neues zweibändiges Header-Design
   ============================================================ */

/* --- Topbar --- */
/* Topbar: Amber — äquivalent zum Footer */
#topbar {
    background: #F2A649;
    color: #262524;
    font-size: 11.5px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(38,37,36,.1);
}
.topbar-usps span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #262524;
    font-weight: 500;
}
.topbar-usps svg { fill: #262524; opacity: .7; }
.topbar-link {
    color: #262524 !important;
    text-decoration: none;
    font-size: 11.5px;
    font-weight: 600;
    transition: opacity .15s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.topbar-link:hover { opacity: .7; }

/* --- Weißes Suchband --- */
.site-header {
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    position: relative;
    z-index: 50;
}
.site-header-inner {
    padding: 14px 0;
}

/* Logo */
.header-logo-wrap { line-height: 1; }
.header-logo {
    height: 52px;
    width: auto;
    display: block;
}
@media (max-width: 576px) {
    .header-logo { height: 38px; }
}

/* Modus-Tabs */
.search-mode-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.search-mode-tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border-radius: 20px;
    border: 1.5px solid #ddd;
    background: #f6f6f1;
    font-size: 12.5px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}
.search-mode-tab:hover {
    border-color: #F2A649;
    color: #262524;
}
.search-mode-tab.active {
    background: #262524;
    border-color: #262524;
    color: #F2A649;
}

/* Sucheingabe */
.header-search-input-group {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.header-search-icon {
    background: #fff;
    border: 1.5px solid #e0ddd8;
    border-right: none;
    color: #aaa;
    padding: 0 14px;
}
.header-search-input {
    border: 1.5px solid #e0ddd8;
    border-left: none;
    border-right: none;
    font-size: 14px;
    padding: 10px 14px;
    height: 46px;
}
.header-search-input:focus {
    border-color: #F2A649;
    box-shadow: none;
    outline: none;
}
.header-search-input:focus + .header-search-btn,
.header-search-input-group:focus-within .header-search-icon {
    border-color: #F2A649;
}
.header-search-btn {
    background: #F2A649;
    color: #262524;
    font-weight: 700;
    font-size: 13.5px;
    padding: 0 22px;
    height: 46px;
    border: 1.5px solid #F2A649;
    border-radius: 0 10px 10px 0 !important;
    white-space: nowrap;
    transition: background .15s;
}
.header-search-btn:hover { background: #e09040; border-color: #e09040; color: #262524; }

/* Modell-Dropdowns */
.header-model-select {
    height: 46px;
    border: 1.5px solid #e0ddd8;
    border-radius: 10px;
    font-size: 13.5px;
    min-width: 0;
    flex: 1 1 160px;
}
.header-model-select:focus {
    border-color: #F2A649;
    box-shadow: 0 0 0 .15rem rgba(242,166,73,.2);
}
.header-model-select:disabled { background: #f6f6f1; color: #aaa; }

/* Suchhinweise */
.search-hint {
    font-size: 11.5px;
    color: #aaa;
}
.search-hint-example {
    color: #F2A649;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.search-hint-example:hover { color: #d08030; }

/* Aktions-Buttons */
.header-actions { align-items: center; }
.header-action-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none !important;
    color: #262524;
    background: #f6f6f1;
    border: 1.5px solid transparent;
    transition: all .15s;
    position: relative;
    min-width: 46px;
}
.header-action-btn:hover {
    background: #F2A649;
    color: #262524;
    border-color: #F2A649;
}
.header-action-btn--active {
    background: #F2A649;
    color: #262524 !important;
    border-color: #F2A649;
}
.header-action-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.header-cart-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
}
.header-cart-badge:empty { display: none; }

/* --- Amber Kategorie-Band --- */
.site-category-bar {
    background: #F2BA52;
    border-bottom: 3px solid rgba(0,0,0,.08);
    padding: 8px 0 6px;
}
.site-category-bar .nav-categories {
    padding: 2px 0 4px;
}

/* Alte header-div-Stile entfernen / überschreiben */
header > div.container { display: none !important; } /* altes Container-Layout ausblenden */

/* Mobile-Anpassungen */
@media (max-width: 768px) {
    .site-header-inner { padding: 10px 0; }
    .search-mode-tabs { gap: 4px; }
    .search-mode-tab { padding: 4px 10px; font-size: 11.5px; }
    .header-search-input { font-size: 13px; height: 42px; padding: 8px 12px; }
    .header-search-btn { height: 42px; padding: 0 14px; font-size: 13px; }
    .header-model-select { height: 42px; font-size: 13px; }
}
@media (max-width: 480px) {
    .search-mode-tab span { display: none; } /* Icons only on very small */
    .header-search-btn .ms-1 { display: none; }
    .header-search-btn { padding: 0 12px; }
}

/* ============================================================
   FLOATING BUTTONS: WhatsApp + Back-to-Top
   ============================================================ */

/* --- WhatsApp Floating Button --- */
#bbt-wa-btn {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 3px 14px rgba(37,211,102,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1200;
    transition: transform .2s, box-shadow .2s;
}
#bbt-wa-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(37,211,102,.6);
}

/* WhatsApp Consent Overlay */
#bbt-wa-consent {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1300;
    align-items: center;
    justify-content: center;
}
#bbt-wa-consent { display: none; }
#bbt-wa-consent-box {
    background: #fff;
    border-radius: 12px;
    padding: 22px 24px;
    max-width: 320px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    position: absolute;
    top: 80px;
    right: 18px;
    font-size: 13px;
    font-family: Arial, sans-serif;
}

/* --- Back-to-Top Button --- */
#bbt-top-btn {
    position: fixed;
    bottom: 84px;
    right: 18px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    z-index: 1100;
    box-shadow: 0 2px 12px rgba(0,0,0,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, box-shadow .2s;
}
#bbt-top-btn.bbt-top-visible {
    opacity: 1;
    pointer-events: auto;
}
#bbt-top-btn:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.2);
}

/* SVG Ringe */
.bbt-top-ring {
    position: absolute;
    width: 52px;
    height: 52px;
    top: 0; left: 0;
    pointer-events: none;
}
.bbt-top-arrow {
    width: 18px;
    height: 18px;
    position: relative;
    z-index: 2;
    transition: transform .2s;
}
#bbt-top-btn:hover .bbt-top-arrow { transform: translateY(-2px); }

/* Bounce am Seitenende */
@keyframes bbt-bounce {
    0%   { transform: translateY(0);   }
    25%  { transform: translateY(10px);}
    50%  { transform: translateY(-6px);}
    70%  { transform: translateY(3px); }
    85%  { transform: translateY(-2px);}
    100% { transform: translateY(0);   }
}
#bbt-top-btn.bbt-top-bounce {
    animation: bbt-bounce .65s cubic-bezier(.36,.07,.19,.97) both;
}

/* ============================================================
   NAVIGATION TOGGLE (Mobile Hamburger)
   ============================================================ */
#nav-cats-toggle {
    display: none;
}

/* Desktop: Kategorien zentriert wrappend */
.site-category-bar .nav-categories {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
}

/* Mobile: Toggle Button + Klapp-Animation */
@media (max-width: 768px) {
    #nav-cats-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,.2);
        border: 1.5px solid rgba(255,255,255,.5);
        color: #262524;
        font-size: 12px;
        font-weight: 700;
        padding: 5px 14px;
        border-radius: 20px;
        cursor: pointer;
        margin: 4px auto 6px;
        text-transform: uppercase;
        letter-spacing: .5px;
        transition: background .15s;
    }
    #nav-cats-toggle:hover { background: rgba(255,255,255,.35); }

    .site-category-bar .nav-categories {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }
    .site-category-bar.nav-open .nav-categories {
        max-height: 600px;
    }
    .site-category-bar .nav-cat-card {
        min-width: 72px;
        max-width: 82px;
    }
}

/* ============================================================
   HEADER-GRÖSSEN-KORREKTUREN
   ============================================================ */

/* Logo größer */
.header-logo { height: 64px; }
@media (max-width: 768px) { .header-logo { height: 46px; } }
@media (max-width: 480px) { .header-logo { height: 38px; } }

/* Suchfeld + Buttons einheitlich 42px */
.header-search-input,
.header-search-btn,
.header-model-select {
    height: 42px !important;
}
.header-search-btn { padding: 0 18px; font-size: 13px; }

/* Action-Buttons identische Höhe wie Suchfeld */
.header-action-btn {
    height: 42px;
    min-width: 42px;
    padding: 0 10px;
    flex-direction: row;
    gap: 6px;
}
.header-action-label { font-size: 11px; }

/* ============================================================
   DESIGN-ÜBERARBEITUNG — Homogene Farblinie + Layout-Fixes
   ============================================================ */

/* --- Header: Quadratische Action-Buttons, einheitliche Höhe --- */
.site-header-inner {
    padding: 12px 0;
    align-items: center;
}
.header-actions {
    gap: 8px;
}
.header-action-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 12px !important;
    padding: 0 !important;
    flex-direction: column;
    gap: 2px;
    background: #F2BA52;
    border: 2px solid transparent !important;
    color: #262524 !important;
    font-size: 0; /* Icons only, label hidden */
    position: relative;
    overflow: visible;
}
.header-action-btn svg { width: 22px; height: 22px; }
.header-action-btn:hover,
.header-action-btn--active {
    background: #262524 !important;
    border-color: #262524 !important;
}
.header-action-btn:hover svg,
.header-action-btn--active svg {
    fill: #F2A649;
}
.header-action-label { display: none; }

/* Logo gleiche Höhe wie Action-Button */
.header-logo { height: 48px; }
@media (max-width: 768px) { .header-logo { height: 40px; } }
@media (max-width: 480px) { .header-logo { height: 34px; } }

/* Sucheingabe-Höhe angleichen */
.header-search-input,
.header-search-btn,
.header-model-select {
    height: 48px !important;
}
.header-search-input {
    font-size: 14px;
    padding: 0 16px;
}
.header-search-btn {
    font-size: 13.5px;
    font-weight: 700;
    padding: 0 22px !important;
    background: #F2A649;
    border-color: #F2A649;
    color: #262524;
}
.header-search-btn:hover { background: #e09040 !important; border-color: #e09040 !important; }

/* Modus-Tabs Farblinie */
.search-mode-tab.active {
    background: #F2A649;
    border-color: #F2A649;
    color: #262524;
}
.search-mode-tab {
    background: #fff;
    border-color: #e0ddd8;
    color: #666;
}

/* --- Cart Badge: perfekter Kreis mit zentrierter Zahl --- */
.header-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border-radius: 50% !important;
    background: #ef4444;
    color: #fff;
    font-size: 10px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 1 !important;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    letter-spacing: 0;
    z-index: 2;
}
.header-cart-badge:empty { display: none !important; }

/* --- Navigation Cards: Bild als Vollhintergrund + Overlay --- */
.nav-cat-card {
    position: relative !important;
    overflow: hidden !important;
    background: none !important;
    min-width: 96px;
    max-width: 110px;
    height: 78px;
    display: block !important;
    flex-direction: unset !important;
    align-items: unset !important;
    padding: 0 !important;
    flex-shrink: 0;
    border-radius: 10px !important;
    border: 2px solid rgba(255,255,255,.35) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
}
.nav-cat-card:hover {
    border-color: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.25) !important;
    transform: translateY(-2px);
}
.nav-cat-card--active {
    border-color: #fff !important;
    outline: 2px solid #262524;
    outline-offset: 1px;
}

/* Bild füllt die gesamte Karte */
.nav-cat-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px !important;
    margin: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #c49a28 !important; /* Amber-Fallback */
    transition: transform .4s cubic-bezier(.25,.46,.45,.94) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}
.nav-cat-card:hover .nav-cat-img {
    transform: scale(1.12) !important;
}

/* Kategoriename als Overlay unten */
.nav-cat-name {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: unset !important;
    background: linear-gradient(to top, rgba(38,37,36,.88) 0%, rgba(38,37,36,.3) 60%, transparent 100%) !important;
    color: #fff !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    line-height: 1.25 !important;
    padding: 10px 5px 5px !important;
    text-align: center !important;
    max-width: 100% !important;
    hyphens: auto;
    word-break: break-word;
    text-shadow: 0 1px 3px rgba(0,0,0,.4);
    z-index: 2;
}

/* Fallback-Icon: größer und heller */
.nav-cat-img svg {
    opacity: .75 !important;
    width: 30px !important;
    height: 30px !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}

/* Mobile: etwas kompaktere Karten */
@media (max-width: 576px) {
    .nav-cat-card { min-width: 80px; max-width: 92px; height: 66px; }
    .nav-cat-name { font-size: 8.5px !important; }
    .nav-cat-img svg { width: 24px !important; height: 24px !important; }
}
@media (max-width: 400px) {
    .nav-cat-card { min-width: 70px; max-width: 80px; height: 58px; }
}

/* --- Back-to-Top: Echte untere rechte Ecke --- */
#bbt-top-btn {
    bottom: 20px !important;
    right: 18px !important;
}

/* --- Farb-Homogenität: Buttons, Links, Akzente --- */
.btn-dark,
.btn-dark:focus {
    background: #262524 !important;
    border-color: #262524 !important;
    color: #fff !important;
}
.btn-dark:hover {
    background: #F2A649 !important;
    border-color: #F2A649 !important;
    color: #262524 !important;
}
.btn-warning {
    background: #F2A649 !important;
    border-color: #F2A649 !important;
    color: #262524 !important;
}
.text-warning { color: #F2A649 !important; }
.bg-warning    { background-color: #F2A649 !important; }

/* ============================================================
   FINALE CSS-BEREINIGUNG
   ============================================================ */

/* Überschreibe alte `header a` Regeln — neue Elemente brauchen eigene Farben */
.site-header a,
.site-header a:hover {
    color: inherit;
    text-decoration: none;
}
.site-category-bar a,
.site-category-bar a:hover {
    color: inherit;
    text-decoration: none;
}

/* Sorge dass Bootstrap-Navbar-Links weiß bleiben */
nav a { color: #fff !important; }

/* Alte .navigation .wrapper Regel entfernen (Breite wird nicht mehr gesetzt) */
.navigation .wrapper { width: auto !important; text-align: center; }

/* --- site-header: Link-Farben korrekt --- */
.header-search-hint a,
.search-hint-example {
    color: #F2A649 !important;
}

/* ============================================================
   BBT HEADER — Logo links, rechts: Aktionen + Suche + Menü
   ============================================================ */

.site-header {
    background: #fff;
    border-bottom: 2px solid #F2BA52;
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 2px 12px rgba(38,37,36,.1);
}

.bbt-header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* Logo */
.bbt-logo-link { flex-shrink: 0; line-height: 0; }
.bbt-logo { height: 56px; width: auto; display: block; }

/* Rechte Seite wächst */
.bbt-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
}

/* Action-Buttons: Warenkorb + Login */
.bbt-header-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.bbt-action-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0ede8;
    border: 2px solid transparent;
    text-decoration: none !important;
    color: #262524;
    position: relative;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}
.bbt-action-btn:hover {
    background: #F2A649;
    border-color: #F2A649;
    color: #262524 !important;
}
.bbt-action-btn--active {
    background: #F2A649 !important;
    border-color: #F2A649 !important;
}

/* Cart Badge */
.header-cart-badge {
    position: absolute;
    top: -5px; right: -5px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
    padding: 0;
    z-index: 2;
}
.header-cart-badge:empty { display: none; }

/* Suchfeld */
.bbt-header-search {
    flex: 1;
    min-width: 0;
    max-width: 480px;
}
.bbt-search-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 5px;
}
.bbt-stab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 14px;
    border: 1.5px solid #ddd;
    background: #f9f9f6;
    font-size: 11px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    transition: all .12s;
    white-space: nowrap;
}
.bbt-stab.active { background: #262524; border-color: #262524; color: #F2A649; }
.bbt-stab:hover:not(.active) { border-color: #F2A649; color: #262524; }

.bbt-search-form {
    display: flex;
    border: 2px solid #e0ddd8;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.bbt-search-form:focus-within {
    border-color: #F2A649;
    box-shadow: 0 0 0 3px rgba(242,166,73,.15);
}
.bbt-search-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 9px 12px;
    font-size: 13.5px;
    background: transparent;
    min-width: 0;
    color: #262524;
}
.bbt-search-input::placeholder { color: #aaa; }

.bbt-model-form { gap: 0; }
.bbt-model-select {
    flex: 1;
    border: none;
    border-right: 1px solid #e0ddd8;
    outline: none;
    padding: 0 10px;
    font-size: 12.5px;
    background: #fff;
    min-width: 0;
    color: #262524;
}
.bbt-model-select:disabled { background: #f8f8f5; color: #aaa; }

.bbt-search-submit {
    width: 44px;
    background: #F2A649;
    border: none;
    color: #262524;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.bbt-search-submit:hover { background: #d4913f; }

.bbt-search-hints {
    font-size: 11px;
    color: #bbb;
    margin-top: 3px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.search-hint-example {
    color: #F2A649 !important;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Menü-Button (Hamburger) */
.bbt-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: #262524;
    border: none;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    color: #F2A649;
    transition: background .15s;
    flex-shrink: 0;
}
.bbt-menu-btn:hover { background: #F2A649; color: #262524; }
.bbt-menu-btn:hover .bbt-burger span { background: #262524; }

.bbt-burger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 22px;
}
.bbt-burger span {
    display: block;
    height: 2.5px;
    background: #F2A649;
    border-radius: 2px;
    transition: background .15s;
}
.bbt-menu-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* Mobile Header */
@media (max-width: 768px) {
    .bbt-header-inner { padding: 8px 14px; gap: 10px; flex-wrap: wrap; }
    .bbt-logo { height: 42px; }
    .bbt-header-right { flex-wrap: wrap; gap: 8px; }
    .bbt-header-search { order: 10; flex: 0 0 100%; max-width: 100%; }
    .bbt-search-hints { display: none; }
    .bbt-search-tabs { gap: 3px; }
    .bbt-stab { padding: 3px 8px; font-size: 10.5px; }
}
@media (max-width: 480px) {
    .bbt-logo { height: 34px; }
    .bbt-action-btn { width: 38px; height: 38px; }
    .bbt-menu-btn { padding: 6px 10px; }
    .bbt-menu-label { display: none; }
}

/* ============================================================
   MEGA-MENÜ
   ============================================================ */

.megaMenu {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    pointer-events: none;
}
.megaMenu.isOpen {
    visibility: visible;
    pointer-events: auto;
}

/* Hintergrund-Overlay mit Muster */
.megaMenu__bg {
    position: absolute;
    inset: 0;
    background: rgba(22,21,20,.97);
    cursor: pointer;
}
.megaMenu__grid-pattern {
    display: block;
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(242,166,73,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(242,166,73,.04) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Öffnen-Animation */
.megaMenu__bg,
.megaMenu__head,
.megaMenu__inner {
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .3s ease, transform .3s ease;
}
.megaMenu.isOpen .megaMenu__bg,
.megaMenu.isOpen .megaMenu__head,
.megaMenu.isOpen .megaMenu__inner {
    opacity: 1;
    transform: translateY(0);
}
.megaMenu.isOpen .megaMenu__head { transition-delay: .05s; }
.megaMenu.isOpen .megaMenu__inner { transition-delay: .1s; }

/* Menü-Kopf */
.megaMenu__head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 32px;
    border-bottom: 1px solid rgba(242,166,73,.15);
}
.megaMenu__brand img { height: 44px; width: auto; filter: brightness(1.2); }
.megaMenu__close {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 2px solid rgba(242,166,73,.3);
    background: transparent;
    color: #F2A649;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s;
}
.megaMenu__close svg { width: 20px; height: 20px; }
.megaMenu__close:hover { background: rgba(242,166,73,.15); border-color: #F2A649; }

/* Innenbereich */
.megaMenu__inner {
    position: relative;
    z-index: 2;
    flex: 1;
    overflow-y: auto;
    padding: 28px 32px 20px;
    display: flex;
    flex-direction: column;
}

/* Kachel-Grid */
.megaMenu__grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    flex: 1;
}
@media (max-width: 900px) { .megaMenu__grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .megaMenu__grid-cards { grid-template-columns: 1fr; gap: 10px; } }

/* Kachel */
.menuTile {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 22px 20px 18px;
    border-radius: 14px;
    background: rgba(38,37,36,.9);
    border: 1.5px solid rgba(242,166,73,.15);
    text-decoration: none !important;
    color: #fff;
    overflow: hidden;
    transition: border-color .2s, transform .2s, background .2s;
    animation: tileIn .4s cubic-bezier(.25,.46,.45,.94) calc(var(--idx, 1) * 40ms) both;
}
@keyframes tileIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.menuTile:hover {
    border-color: #F2A649;
    background: rgba(48,46,44,.95);
    transform: translateY(-3px);
}
.menuTile:hover .menuTile__go { color: #F2A649; }
.menuTile:hover .menuTile__go svg { transform: translateX(4px); }

/* Kategorie-Bild als subtiler Hintergrund */
.menuTile__img-bg {
    position: absolute;
    inset: 0;
    background-image: var(--tile-bg);
    background-size: cover;
    background-position: center;
    opacity: .08;
    transition: opacity .3s;
}
.menuTile:hover .menuTile__img-bg { opacity: .14; }

.menuTile__num {
    font-size: 11px;
    font-weight: 800;
    color: rgba(242,166,73,.4);
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    font-family: monospace;
}
.menuTile__icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(242,166,73,.1);
    border-radius: 10px;
    margin-bottom: 12px;
    color: #F2A649;
    flex-shrink: 0;
}
.menuTile__icon svg { width: 22px; height: 22px; fill: currentColor; }
.menuTile h3 {
    font-size: 15px;
    font-weight: 700;
    color: #F2A649;
    margin: 0 0 6px;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
}
.menuTile p {
    font-size: 12px;
    color: rgba(255,255,255,.55);
    margin: 0 0 auto;
    line-height: 1.5;
    flex: 1;
}
.menuTile__go {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(255,255,255,.4);
    margin-top: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: color .15s;
}
.menuTile__go svg {
    width: 14px; height: 14px;
    stroke: currentColor;
    transition: transform .2s;
}

/* Menü-Fuß */
.megaMenu__foot {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid rgba(242,166,73,.12);
}
.megaMenu__link {
    font-size: 12px;
    color: rgba(255,255,255,.4) !important;
    text-decoration: none !important;
    transition: color .15s;
}
.megaMenu__link:hover { color: #F2A649 !important; }
.megaMenu__phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.7);
    margin-left: auto;
}

/* --- Alte Header-Stile deaktivieren (werden durch BBT-Header ersetzt) --- */
.site-category-bar,
.site-category-bar .nav-categories,
#site-category-bar,
#nav-cats-toggle,
.header-logo-wrap,
.header-logo,
.header-search-hero,
.search-mode-tabs,
.search-mode-tab,
.header-search-input-group,
.header-search-icon,
.header-search-input,
.header-search-btn,
.header-model-select,
.header-actions,
.header-action-btn,
.header-action-label,
.site-header-inner {
    /* Alte Implementierung — durch neue BBT-Header-Klassen ersetzt */
    display: none !important;
}

/* Die neuen BBT-Klassen sind dominant */
.bbt-header-inner { display: flex !important; }
.bbt-header-right { display: flex !important; }
.bbt-header-actions { display: flex !important; }
.bbt-action-btn { display: flex !important; }
.bbt-header-search { display: block !important; }
.bbt-search-form { display: flex !important; }
.bbt-search-panel { display: block !important; }
.bbt-search-panel.d-none { display: none !important; }
.bbt-menu-btn { display: flex !important; }

/* ============================================================
   BBT HEADER v3 — Logo zentriert, Suche links, Aktionen rechts
   ============================================================ */

.site-header {
    background: #fff;
    border-bottom: 3px solid #F2BA52;
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 2px 16px rgba(38,37,36,.1);
}
.bbt-hdr {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 12px 28px;
    max-width: 1440px;
    margin: 0 auto;
}

/* --- LINKS: Suchbereich --- */
.bbt-hdr__search { min-width: 0; }

.bbt-search-modes {
    display: flex;
    gap: 6px;
    margin-bottom: 6px;
}
.bbt-smode {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1.5px solid #e0ddd8;
    background: #f9f9f6;
    font-size: 11.5px;
    font-weight: 600;
    color: #888;
    cursor: pointer;
    white-space: nowrap;
    transition: all .13s;
}
.bbt-smode.active { background: #262524; border-color: #262524; color: #F2A649; }
.bbt-smode:hover:not(.active) { border-color: #F2A649; color: #262524; }

.bbt-spanel {}
.bbt-sform {
    display: flex;
    border: 2px solid #e0ddd8;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.bbt-sform:focus-within {
    border-color: #F2A649;
    box-shadow: 0 0 0 3px rgba(242,166,73,.12);
}
.bbt-sinput {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 14px;
    font-size: 13.5px;
    background: transparent;
    min-width: 0;
    color: #262524;
}
.bbt-sinput::placeholder { color: #bbb; }
.bbt-sform--model { gap: 0; }
.bbt-mselect {
    flex: 1;
    border: none;
    border-right: 1px solid #e8e4de;
    outline: none;
    padding: 0 10px;
    font-size: 13px;
    background: #fff;
    min-width: 0;
    color: #262524;
}
.bbt-mselect:disabled { background: #f8f8f5; color: #bbb; }
.bbt-sbtn {
    width: 46px;
    background: #F2A649;
    border: none;
    color: #262524;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.bbt-sbtn:hover { background: #d4913f; }
.bbt-shints {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: 11px;
    color: #ccc;
}

/* --- MITTE: Logo + CTA --- */
.bbt-hdr__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.bbt-hdr__logo-link { line-height: 0; }
.bbt-hdr__logo { height: 64px; width: auto; display: block; }

/* CTA-Button "Finde jetzt das richtige Teil" */
.bbt-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #262524;
    color: #F2A649;
    border: none;
    border-radius: 24px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s, transform .15s;
    box-shadow: 0 3px 12px rgba(38,37,36,.2);
}
.bbt-cta-btn:hover {
    background: #F2A649;
    color: #262524;
    transform: translateY(-1px);
}
.bbt-cta-btn svg { transition: transform .2s; }
.bbt-cta-btn:hover svg:last-child { transform: translateY(2px); }

/* --- RECHTS: Aktionen --- */
.bbt-hdr__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-shrink: 0;
}
.bbt-act-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 54px;
    padding: 8px 4px;
    border-radius: 12px;
    text-decoration: none !important;
    color: #262524;
    background: #f0ede8;
    border: 2px solid transparent;
    transition: background .15s, border-color .15s;
    position: relative;
}
.bbt-act-btn:hover {
    background: #F2A649;
    border-color: #F2A649;
    color: #262524 !important;
}
.bbt-act-btn--on { background: #F2A649; border-color: #F2A649; }
.bbt-act-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: inherit;
}
/* Cart Badge */
.header-cart-badge {
    position: absolute;
    top: -5px; right: -5px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
    padding: 0;
    z-index: 2;
}
.header-cart-badge:empty { display: none; }

/* --- Mobile --- */
@media (max-width: 900px) {
    .bbt-hdr {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 10px 16px;
    }
    .bbt-hdr__search { grid-column: 1 / -1; grid-row: 2; }
    .bbt-hdr__center { grid-column: 1; grid-row: 1; align-items: flex-start; flex-direction: row; gap: 10px; }
    .bbt-hdr__logo { height: 44px; }
    .bbt-cta-btn { font-size: 12px; padding: 7px 14px; }
    .bbt-hdr__actions { grid-column: 2; grid-row: 1; }
    .bbt-shints { display: none; }
}
@media (max-width: 480px) {
    .bbt-hdr { padding: 8px 12px; gap: 8px; }
    .bbt-hdr__logo { height: 36px; }
    .bbt-cta-btn { font-size: 11px; padding: 6px 10px; }
    .bbt-cta-btn svg:first-child { display: none; }
    .bbt-act-label { display: none; }
    .bbt-act-btn { width: 42px; padding: 6px 4px; }
}

/* ============================================================
   CONTACT POPOVER — Mitte unten, runder Trigger-Button
   ============================================================ */

/* Trigger-Button */
#bbt-contact-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #262524;
    border: none;
    cursor: pointer;
    z-index: 1100;
    box-shadow: 0 3px 14px rgba(38,37,36,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, transform .15s, box-shadow .2s;
    color: #F2A649;
}
#bbt-contact-btn:hover {
    background: #F2A649;
    color: #262524;
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 5px 20px rgba(242,166,73,.4);
}
#bbt-contact-btn.is-open {
    background: #F2A649;
    color: #262524;
}

/* Popover-Panel */
.contactPopover {
    position: fixed;
    bottom: 82px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    width: min(380px, calc(100vw - 24px));
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(38,37,36,.2);
    border: 1.5px solid rgba(242,166,73,.2);
    z-index: 1099;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    overflow: hidden;
}
.contactPopover.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Popover Kopf */
.contactPopover__head {
    padding: 20px 22px 14px;
    background: linear-gradient(135deg, #262524 0%, #3a3836 100%);
    color: #fff;
}
.contactPopover__badge {
    display: inline-block;
    background: rgba(242,166,73,.2);
    color: #F2A649;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 8px;
}
.contactPopover__head h3 {
    font-size: 16px;
    color: #fff !important;
    margin: 0 0 4px;
    text-transform: none;
}
.contactPopover__head p {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    margin: 0;
}

/* Options Grid */
.contactPopover__grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.contactOption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    text-decoration: none !important;
    color: #262524;
    border-bottom: 1px solid #f0ede8;
    transition: background .12s;
}
.contactOption:last-child { border-bottom: none; }
.contactOption:hover { background: #fafaf6; }
.contactOption__icon {
    width: 38px; height: 38px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.contactOption__icon svg { width: 18px; height: 18px; }
.contactOption--phone   .contactOption__icon { background: #262524; }
.contactOption--whatsapp .contactOption__icon { background: #25D366; }
.contactOption--email   .contactOption__icon { background: #F2A649; }
.contactOption--form    .contactOption__icon { background: #8B7355; }
.contactOption__body { flex: 1; }
.contactOption__body strong { display: block; font-size: 13.5px; font-weight: 700; }
.contactOption__body small { font-size: 11.5px; color: #888; }
.contactOption__arrow {
    font-size: 16px;
    color: #ccc;
    transition: transform .15s, color .15s;
}
.contactOption:hover .contactOption__arrow { transform: translateX(4px); color: #F2A649; }

/* Fuß */
.contactPopover__foot {
    padding: 10px 18px;
    font-size: 11px;
    color: #aaa;
    text-align: center;
    background: #f9f9f6;
    border-top: 1px solid #f0ede8;
}

/* --- Alten WA-Button deaktivieren --- */
#bbt-wa-btn, #bbt-wa-consent, #bbt-wa-consent-box { display: none !important; }

/* --- Back-to-Top: rechts unten, Platz für Contact-Button --- */
#bbt-top-btn { bottom: 20px !important; right: 18px !important; }

/* ============================================================
   MEGA-MENÜ STREIFEN — dunkler Trigger direkt unter dem Header
   ============================================================ */
.bbt-mega-strip {
    background: #262524;
    border-bottom: 2px solid rgba(242,166,73,.2);
    cursor: pointer;
    user-select: none;
    transition: background .15s;
    position: relative;
    z-index: 490;
}
.bbt-mega-strip:hover,
.bbt-mega-strip.is-open {
    background: #1a1918;
}
.bbt-mega-strip:hover .bbt-mega-strip__chevron,
.bbt-mega-strip.is-open .bbt-mega-strip__chevron {
    transform: rotate(180deg);
}

.bbt-mega-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    flex-wrap: wrap;
    max-width: 1440px;
    margin: 0 auto;
}
.bbt-mega-strip__inner svg:first-child {
    color: #F2A649;
    flex-shrink: 0;
}
.bbt-mega-strip__text {
    color: #fff;
    font-weight: 700;
    letter-spacing: .1px;
}
.bbt-mega-strip__divider {
    color: rgba(255,255,255,.25);
    font-weight: 300;
}
.bbt-mega-strip__cats {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 11.5px;
    font-weight: 500;
    color: rgba(242,166,73,.7);
}
.bbt-mega-strip__cats span:not(.bbt-strip-dot) {
    transition: color .12s;
}
.bbt-mega-strip:hover .bbt-mega-strip__cats span:not(.bbt-strip-dot) {
    color: #F2A649;
}
.bbt-strip-dot {
    color: rgba(255,255,255,.2);
    font-size: 10px;
}
.bbt-mega-strip__chevron {
    color: #F2A649;
    flex-shrink: 0;
    transition: transform .25s cubic-bezier(.25,.46,.45,.94);
}

/* CTA-Button im Header nicht mehr nötig */
.bbt-cta-btn { display: none !important; }

@media (max-width: 600px) {
    .bbt-mega-strip__divider,
    .bbt-mega-strip__cats { display: none; }
    .bbt-mega-strip__inner { gap: 8px; padding: 9px 16px; }
    .bbt-mega-strip__text { font-size: 12.5px; }
}

/* ============================================================
   TOPBAR: kein Border-bottom
   ============================================================ */
#topbar { border-bottom: none !important; }

/* ============================================================
   WEISSER STICKY HEADER (.sh)
   ============================================================ */
.sh {
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 1px 0 #e8e4de;
}
.sh__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 20px;
    padding: 14px 28px 10px;
    max-width: 1440px;
    margin: 0 auto;
}

/* Logo */
.sh__logo img { height: 60px; width: auto; display: block; }

/* Suche */
.sh__search { min-width: 0; }
.sh__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    border-bottom: 1.5px solid #eeebe6;
    padding-bottom: 0;
}
.sh__tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #aaa;
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.sh__tab:hover { color: #262524; }
.sh__tab--active { color: #262524; border-bottom-color: #F2A649; }

/* Suchformular */
.sh__form {
    display: flex;
    border: 2px solid #e0ddd8;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.sh__form:focus-within {
    border-color: #F2A649;
    box-shadow: 0 0 0 3px rgba(242,166,73,.12);
}
.sh__input {
    flex: 1;
    border: none;
    outline: none;
    padding: 11px 16px;
    font-size: 14px;
    background: transparent;
    min-width: 0;
    color: #262524;
}
.sh__input::placeholder { color: #bbb; }
.sh__form--model { gap: 0; }
.sh__select {
    flex: 1;
    border: none;
    border-right: 1.5px solid #e0ddd8;
    outline: none;
    padding: 0 12px;
    font-size: 13px;
    background: #fff;
    min-width: 0;
    color: #262524;
}
.sh__select:disabled { background: #f8f8f5; color: #bbb; }
.sh__btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 18px;
    background: #F2A649;
    border: none;
    color: #262524;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
    flex-shrink: 0;
}
.sh__btn:hover { background: #d4913f; }
.sh__btn svg { flex-shrink: 0; }
.sh__hints {
    font-size: 11px;
    color: #bbb;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sh__hint {
    color: #F2A649;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .12s;
}
.sh__hint:hover { color: #d4913f; }

/* Aktionen */
.sh__actions { display: flex; gap: 8px; align-items: flex-start; }
.sh__act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 58px;
    padding: 8px 4px;
    border-radius: 10px;
    text-decoration: none !important;
    color: #262524;
    background: #f9f8f5;
    border: 1.5px solid transparent;
    transition: background .15s, border-color .15s;
    position: relative;
    flex-shrink: 0;
}
.sh__act:hover { background: #F2A649; border-color: #F2A649; color: #262524 !important; }
.sh__act--on   { background: #F2A649; border-color: #F2A649; }
.sh__act-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.header-cart-badge {
    position: absolute;
    top: -5px; right: -5px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
    z-index: 2;
}
.header-cart-badge:empty { display: none; }

/* ============================================================
   DUNKEL-STREIFEN: Kategorie-Trigger (.sh-strip)
   ============================================================ */
.sh-strip {
    background: #262524;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 490;
    border-bottom: 1px solid rgba(255,255,255,.06);
    transition: background .15s;
}
.sh-strip:hover, .sh-strip--open { background: #1a1918; }
.sh-strip__inner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 28px;
    max-width: 1440px;
    margin: 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.8);
}
.sh-strip__inner > svg:first-child { color: #F2A649; flex-shrink: 0; }
.sh-strip__label { color: #fff; font-weight: 700; white-space: nowrap; }
.sh-strip__cats {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(242,166,73,.65);
    font-size: 11.5px;
    font-weight: 500;
    flex-wrap: nowrap;
    overflow: hidden;
}
.sh-strip__dot { color: rgba(255,255,255,.2); font-size: 10px; }
.sh-strip__chev {
    color: #F2A649;
    flex-shrink: 0;
    margin-left: auto;
    transition: transform .25s ease;
}
.sh-strip--open .sh-strip__chev { transform: rotate(180deg); }
@media (max-width: 600px) { .sh-strip__cats { display: none; } }

/* ============================================================
   MEGA-MENÜ: Weiß mit farbigen Kacheln (.mm)
   ============================================================ */
.mm {
    position: fixed;
    inset: 0;
    z-index: 1500;
    pointer-events: none;
    visibility: hidden;
}
.mm--open { pointer-events: auto; visibility: visible; }

/* Backdrop */
.mm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(38,37,36,.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .3s ease;
}
.mm--open .mm__backdrop { opacity: 1; }

/* Panel (scrollbares weißes Sheet von oben) */
.mm__panel {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: #fff;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 8px 40px rgba(38,37,36,.18);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.25,.46,.45,.94);
}
.mm--open .mm__panel { transform: translateY(0); }

/* Menü-Kopf */
.mm__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 28px;
    border-bottom: 1.5px solid #f0ede8;
    flex-shrink: 0;
}
.mm__head-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.mm__head-logo img { height: 32px; width: auto; opacity: .85; }
.mm__close {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid #e0ddd8;
    background: #fff;
    color: #888;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.mm__close:hover { background: #262524; color: #F2A649; border-color: #262524; }

/* Kachel-Grid */
.mm__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 20px 28px;
    overflow-y: auto;
    flex: 1;
}
@media (max-width: 800px) { .mm__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .mm__grid { grid-template-columns: 1fr; gap: 8px; padding: 14px 16px; } }

/* Kachel */
.mm__tile {
    display: flex;
    flex-direction: column;
    padding: 18px 16px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--tile-border, #e0ddd8);
    background: var(--tile-bg, #fafafa);
    text-decoration: none !important;
    color: #262524;
    position: relative;
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
    animation: mmTileIn .3s cubic-bezier(.25,.46,.45,.94) calc(var(--idx, 0) * 35ms) both;
}
@keyframes mmTileIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mm__tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(38,37,36,.12);
}
.mm__tile-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .06;
    transition: opacity .25s;
}
.mm__tile:hover .mm__tile-img { opacity: .12; }
.mm__tile-num {
    font-size: 10px;
    font-weight: 800;
    color: var(--tile-num, #ccc);
    letter-spacing: 1.5px;
    font-family: monospace;
    margin-bottom: 8px;
}
.mm__tile-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(255,255,255,.7);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    color: var(--tile-icon, #888);
    border: 1px solid rgba(0,0,0,.06);
}
.mm__tile-icon svg { width: 20px; height: 20px; }
.mm__tile-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #262524;
    margin-bottom: 4px;
    line-height: 1.2;
}
.mm__tile-desc {
    display: block;
    font-size: 11.5px;
    color: #888;
    line-height: 1.4;
    flex: 1;
    margin-bottom: 10px;
}
.mm__tile-go {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--tile-icon, #888);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-top: auto;
    transition: gap .15s;
}
.mm__tile:hover .mm__tile-go { gap: 7px; }
.mm__tile-go svg { transition: transform .15s; }
.mm__tile:hover .mm__tile-go svg { transform: translateX(3px); }

/* Menü-Fuß */
.mm__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 28px;
    border-top: 1.5px solid #f0ede8;
    flex-shrink: 0;
}
.mm__foot a {
    font-size: 11.5px;
    color: #aaa !important;
    text-decoration: none !important;
    transition: color .12s;
}
.mm__foot a:hover { color: #F2A649 !important; }
.mm__foot-phone {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 700;
    color: #262524;
    margin-left: auto;
}

/* ============================================================
   FLOATING BUTTONS — alle im Back-to-Top-Stil (weiß + Border)
   ============================================================ */

/* Kontakt-Button */
#bbt-contact-btn {
    background: #fff !important;
    border: 2px solid #e0ddd8 !important;
    color: #262524 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.1) !important;
}
#bbt-contact-btn:hover, #bbt-contact-btn.is-open {
    background: #fff !important;
    border-color: #F2A649 !important;
    color: #F2A649 !important;
    box-shadow: 0 3px 14px rgba(242,166,73,.25) !important;
}
#bbt-contact-btn:hover { transform: translateX(-50%) scale(1.08) !important; }

/* Compliance Guardian — alter Override entfernt, neuer weiter unten */

/* Mobile Header */
@media (max-width: 768px) {
    .sh__inner {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 8px;
        padding: 10px 14px 8px;
    }
    .sh__search { grid-column: 1 / -1; }
    .sh__logo img { height: 40px; }
    .sh__actions { justify-self: end; }
    .sh__btn span { display: none; }
    .sh__btn { padding: 0 14px; }
    .sh__hints { display: none; }
    .sh-strip__inner { padding: 8px 14px; }
    .mm__head { padding: 14px 16px; }
    .mm__foot { padding: 10px 16px; gap: 10px; }
    .mm__foot-phone { display: none; }
}
@media (max-width: 480px) {
    .sh__logo img { height: 32px; }
    .sh__act { width: 46px; }
    .sh__act-label { display: none; }
    .sh__tab span { display: none; }
}

/* Alte BBT-Header-Klassen vollständig deaktiviert */
.bbt-hdr, .bbt-hdr__search, .bbt-hdr__center, .bbt-hdr__actions,
.bbt-smode, .bbt-sform, .bbt-sinput, .bbt-sbtn, .bbt-spanel, .bbt-mselect,
.bbt-act-btn, .bbt-act-label, .bbt-mega-strip, .site-header,
.site-header-inner, .header-search-hero, .search-mode-tabs, .bbt-cta-btn,
.bbt-header-inner, .bbt-header-right, .bbt-header-search, .bbt-header-actions,
.bbt-search-modes, .bbt-stab, .bbt-menu-btn, .bbt-burger,
.megaMenu, .megaMenu__bg, .menuTile { display: revert !important; }

/* Alte .sh/.sh-strip nicht mehr im DOM — deaktivieren */
.sh { display: none !important; }
.sh-strip { display: none !important; }

/* ============================================================
   FLAT HEADER v2 — hdr-util · hdr-main · hdr-nav · mm
   Flat-Design: border-radius 0 überall, kein box-shadow (außer
   Floating), klare Farbblöcke (#F2A649 · #262524 · #fff)
   ============================================================ */

/* ---- Box-Sizing-Reset für alle neuen Header-Elemente ---- */
.hdr-util, .hdr-util *,
.hdr-main, .hdr-main *,
.hdr-nav, .hdr-nav *,
.mm__sheet, .mm__sheet * { box-sizing: border-box; }

/* ---- UTILITY BAR (amber, 42px) ---- */
.hdr-util { background: #F2A649; width: 100%; z-index: 1200; }
.hdr-util__inner {
    max-width: 1400px; margin: 0 auto; padding: 0 28px;
    height: 42px; display: flex; align-items: center;
    justify-content: space-between; gap: 12px;
}
.hdr-util__left,
.hdr-util__right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hdr-util__sep   { color: rgba(38,37,36,.35); font-size: 11px; }
.hdr-util__usp   { font-size: 11.5px; font-weight: 600; color: #262524; white-space: nowrap; }
.hdr-util__phone {
    display: flex; align-items: center; gap: 4px;
    font-size: 11.5px; font-weight: 700;
    color: #262524 !important; text-decoration: none !important;
    white-space: nowrap; transition: color .15s;
}
.hdr-util__phone:hover { color: #fff !important; }

/* B2B/B2C Switch */
.bbt-ctype-switch { display: flex; background: rgba(38,37,36,.12); padding: 2px; }
.bbt-ctype-btn {
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border: none; background: transparent; color: rgba(38,37,36,.7);
    cursor: pointer; line-height: 1; transition: background .15s, color .15s;
    white-space: nowrap; border-radius: 0 !important;
}
.bbt-ctype-btn--active { background: #262524; color: #F2A649; }
.bbt-ctype-btn:not(.bbt-ctype-btn--active):hover { background: rgba(38,37,36,.22); color: #262524; }

/* Trust Stars */
.hdr-trust { display: flex; align-items: center; gap: 4px; }
.hdr-trust__stars { display: flex; align-items: center; gap: 1px; color: #262524; }
.hdr-trust__score { font-size: 11.5px; font-weight: 700; color: #262524; }
.hdr-trust__count { font-size: 10.5px; color: rgba(38,37,36,.6); }

/* ---- MAIN HEADER (white, sticky, 100px) ---- */
.hdr-main {
    background: #fff;
    position: sticky; top: 0; z-index: 1100;
    box-shadow: 0 1px 0 #e8e4de;
}
.hdr-main__inner {
    max-width: 1400px; margin: 0 auto; padding: 0 28px;
    height: 100px; display: flex; align-items: center; gap: 28px;
}
.hdr-main__logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none !important; }
.hdr-main__logo img { height: 64px; width: auto; display: block; }

/* Search column */
.hdr-main__search {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; justify-content: center; gap: 0;
}

/* Search tabs */
.hdr-stabs { display: flex; margin-bottom: 6px; gap: 0; }
.hdr-stab {
    display: flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 600;
    padding: 3px 12px 3px 0;
    background: none; border: none;
    color: #aaa; cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    white-space: nowrap; border-radius: 0 !important;
}
.hdr-stab--on { color: #262524; border-bottom-color: #F2A649; }
.hdr-stab:hover:not(.hdr-stab--on) { color: #555; }

/* Search panel + form */
.hdr-spanel { width: 100%; }
.hdr-sform {
    display: flex; align-items: stretch; height: 44px;
    border: 1.5px solid #ddd; background: #fafafa;
    transition: border-color .15s; border-radius: 0 !important;
}
.hdr-sform:focus-within { border-color: #F2A649; background: #fff; }
.hdr-sinput {
    flex: 1; min-width: 0; border: none; background: transparent;
    padding: 0 16px; font-size: 15px; color: #262524; outline: none;
    border-radius: 0 !important;
}
.hdr-sinput::placeholder { color: #bbb; }
.hdr-sbtn {
    display: flex; align-items: center; gap: 7px;
    padding: 0 22px; background: #F2A649;
    border: none; color: #262524;
    font-size: 14px; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: background .15s; flex-shrink: 0;
    border-radius: 0 !important;
}
.hdr-sbtn:hover { background: #e5983c; }

/* Model selects */
.hdr-sform--model .hdr-msel {
    flex: 1; border: none; background: transparent;
    padding: 0 10px; font-size: 13px; color: #262524;
    outline: none; cursor: pointer; min-width: 0;
    border-radius: 0 !important;
}
.hdr-sform--model .hdr-msel + .hdr-msel { border-left: 1px solid #ddd; }
.hdr-sform--model .hdr-msel:disabled { color: #bbb; }

/* Hint chips */
.hdr-hints { display: flex; align-items: center; gap: 6px; margin-top: 7px; flex-wrap: nowrap; overflow: hidden; }
.hdr-hint {
    padding: 3px 10px; background: #f0ede8; color: #666;
    font-size: 11.5px; cursor: pointer; flex-shrink: 0;
    transition: background .12s, color .12s; white-space: nowrap;
    border-radius: 0 !important;
}
.hdr-hint:hover { background: #F2A649; color: #262524; }

/* Action buttons (Warenkorb / Login) */
.hdr-main__acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.hdr-act {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 12px; color: #262524 !important;
    text-decoration: none !important; transition: background .15s;
    position: relative; border-radius: 0 !important;
}
.hdr-act:hover { background: #f5f2ee; }
.hdr-act--on   { background: #f5f2ee; }
.hdr-act__icon { position: relative; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }
.hdr-act__label { font-size: 10.5px; font-weight: 600; color: #666; white-space: nowrap; }
.hdr-act .header-cart-badge {
    position: absolute; top: -5px; right: -8px;
    background: #F2A649; color: #262524;
    font-size: 10px; font-weight: 800;
    min-width: 16px; height: 16px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0 !important; padding: 0 3px; line-height: 1;
}

/* ---- NAV STRIP (dark #262524, 48px, sticky under main) ---- */
.hdr-nav { background: #262524; position: sticky; top: 100px; z-index: 1090; }
.hdr-nav__inner {
    max-width: 1400px; margin: 0 auto; padding: 0 28px;
    height: 48px; display: flex; align-items: center;
}

/* Alle-Kategorien Trigger */
.hdr-nav__all {
    display: flex; align-items: center; gap: 8px;
    height: 100%; padding: 0 16px;
    background: #F2A649; border: none; color: #262524;
    font-size: 13px; font-weight: 700; cursor: pointer;
    white-space: nowrap; transition: background .15s; flex-shrink: 0;
    border-radius: 0 !important;
}
.hdr-nav__all:hover,
.hdr-nav__all--open { background: #e5983c; }
.mm-chev { transition: transform .25s ease; margin-left: 2px; }

/* Quick-Links */
.hdr-nav__links { display: flex; align-items: center; overflow: hidden; flex: 1; }
.hdr-nav__link {
    display: flex; align-items: center; height: 48px; padding: 0 14px;
    font-size: 12.5px; font-weight: 500;
    color: rgba(255,255,255,.78) !important; text-decoration: none !important;
    white-space: nowrap; transition: background .12s, color .12s;
}
.hdr-nav__link:hover { background: rgba(255,255,255,.08); color: #fff !important; }

/* ---- MEGA-MENÜ (new sheet structure) ---- */
/* Override/extend the existing .mm base (position: fixed etc.) */
.mm {
    position: fixed !important; inset: 0 !important; z-index: 1500 !important;
    pointer-events: none !important; visibility: hidden !important;
    display: block !important;
}
.mm--open { pointer-events: auto !important; visibility: visible !important; }

/* Backdrop */
.mm__backdrop {
    position: absolute !important; inset: 0 !important;
    background: rgba(38,37,36,.55) !important; opacity: 0 !important;
    transition: opacity .3s ease !important;
}
.mm--open .mm__backdrop { opacity: 1 !important; }

/* Sheet (replaces old .mm__panel — same animation) */
.mm__sheet {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    background: #fff !important; max-height: 88vh !important;
    display: flex !important; flex-direction: column !important;
    transform: translateY(-100%) !important;
    transition: transform .32s cubic-bezier(.25,.46,.45,.94) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
}
.mm--open .mm__sheet { transform: translateY(0) !important; }

/* Top bar (dark) */
.mm__top {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 28px !important; background: #262524 !important; flex-shrink: 0 !important;
}
.mm__top strong { font-size: 12px !important; font-weight: 700 !important; color: #F2A649 !important; text-transform: uppercase !important; letter-spacing: .8px !important; }
.mm__x {
    width: 30px !important; height: 30px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.18) !important;
    color: #fff !important; cursor: pointer !important;
    transition: background .15s !important; border-radius: 0 !important;
}
.mm__x:hover { background: rgba(242,166,73,.25) !important; color: #F2A649 !important; }

/* Tile grid (overrides old mm__grid) — max. 4 Spalten, helles Layout */
.mm__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important; padding: 24px 28px !important;
    overflow-y: auto !important; flex: 1 !important;
    background: #fff !important;
}

/* Tiles (mm__item — helle Kacheln, Line-Icon, dezenter Hover) */
.mm__item {
    display: flex !important; flex-direction: column !important;
    align-items: center !important; justify-content: center !important;
    gap: 12px !important; padding: 22px 14px !important;
    text-decoration: none !important;
    background: #fafafa !important; color: #262524 !important;
    font-weight: 600 !important; font-size: 13px !important;
    text-align: center !important; position: relative !important;
    overflow: hidden !important; min-height: 118px !important;
    border: 1px solid #ececec !important; border-radius: 6px !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease !important;
}
.mm__item:hover {
    background: #fff !important;
    border-color: #F2A649 !important;
    color: #F2A649 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.06) !important;
    z-index: 1 !important;
    filter: none !important;
}
.mm__item-icon {
    width: 40px !important; height: 40px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    color: #F2A649 !important; opacity: 1 !important;
    position: relative !important; z-index: 1 !important;
}
.mm__item-icon svg { width: 30px !important; height: 30px !important; stroke-width: 1.6 !important; }
.mm__item-img {
    position: absolute !important; inset: 0 !important;
    background-size: cover !important; background-position: center !important;
    opacity: .06 !important;
}
.mm__item-name {
    font-size: 13px !important; font-weight: 600 !important; color: inherit !important;
    line-height: 1.3 !important; text-shadow: none !important;
    position: relative !important; z-index: 1 !important;
}

/* Footer (overrides old mm__foot) */
.mm__foot {
    display: flex !important; align-items: center !important;
    gap: 16px !important; flex-wrap: wrap !important;
    padding: 10px 28px !important; background: #f5f2ee !important;
    flex-shrink: 0 !important; border-top: none !important;
}
.mm__foot a { font-size: 11px !important; color: #888 !important; text-decoration: none !important; transition: color .12s !important; }
.mm__foot a:hover { color: #F2A649 !important; }
.mm__foot-r { margin-left: auto !important; font-size: 12px !important; font-weight: 700 !important; color: #262524 !important; }

/* ---- B2B/B2C Preisanzeige ---- */
body.is-b2b .price-gross { display: none !important; }
body.is-b2b .price-net   { display: block !important; }
body.is-b2c .price-net   { display: none !important; }
body.is-b2c .price-gross { display: block !important; }
.price-mode-hint { font-size: 10.5px; color: #888; }

/* ---- Mobile Breakpoints (neuer Header) ---- */
@media (max-width: 1100px) {
    .hdr-nav__links { display: none; }
}
@media (max-width: 1024px) {
    .mm__grid { grid-template-columns: repeat(3, 1fr) !important; padding: 20px !important; }
}
@media (max-width: 768px) {
    .hdr-util__inner { padding: 0 16px; gap: 8px; height: 38px; }
    .hdr-trust__count { display: none; }
    .hdr-main { top: 0; }
    .hdr-main__inner { padding: 0 16px; height: 70px; gap: 12px; }
    .hdr-main__logo img { height: 44px; }
    .hdr-act__label { display: none; }
    .hdr-act { padding: 6px 8px; }
    .hdr-stabs { display: none; }
    .hdr-sbtn { padding: 0 12px; font-size: 12px; }
    .hdr-hints { display: none; }
    .hdr-nav { top: 70px; }
    .hdr-nav__inner { padding: 0 14px; }
    .mm__top { padding: 10px 16px !important; }
    .mm__foot { padding: 8px 16px !important; gap: 10px !important; }
    .mm__foot-r { display: none !important; }
    .mm__item { min-height: 100px !important; padding: 16px 10px !important; }
    .mm__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding: 16px !important; }
}
@media (max-width: 480px) {
    .hdr-util { display: none; }
    .hdr-main__inner { height: 58px; }
    .hdr-main__logo img { height: 34px; }
    .hdr-nav { top: 58px; }
    .hdr-nav__all { font-size: 12px; padding: 0 12px; }
}

/* ============================================================
   HOMEPAGE HERO — Amber-Gradient, Wave-Bottom (2025-05)
   ============================================================ */
.page-hero {
    background: linear-gradient(130deg, #F9B95A 0%, #F2A649 40%, #E07C20 100%);
    position: relative;
    padding: 64px 0 110px;
    overflow: hidden;
}
/* subtle diagonal texture */
.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        rgba(255,255,255,.04) 0px,
        rgba(255,255,255,.04) 1px,
        transparent 1px,
        transparent 28px
    );
    pointer-events: none;
}
.page-hero__inner {
    max-width: 1200px; margin: 0 auto; padding: 0 clamp(40px, 8%, 120px);
    display: grid; grid-template-columns: 1fr 1fr;
    align-items: center; gap: 48px; position: relative; z-index: 1;
}
.page-hero__eyebrow {
    font-size: 12.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.2px;
    color: rgba(38,37,36,.6); margin-bottom: 14px;
}
.page-hero__h1 {
    font-size: clamp(26px, 3.6vw, 42px); font-weight: 900;
    color: #fff; line-height: 1.1; margin-bottom: 14px;
    text-shadow: 0 2px 12px rgba(38,37,36,.18);
}
.page-hero__sub {
    font-size: 15px; color: rgba(38,37,36,.72);
    line-height: 1.55; margin-bottom: 22px; max-width: 500px;
}
.page-hero__btns { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.page-hero__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; font-size: 15px; font-weight: 700;
    text-decoration: none !important; transition: background .15s, border-color .15s, color .15s;
    border-radius: 0 !important; white-space: nowrap;
}
.page-hero__btn--primary {
    background: #262524; color: #F2A649 !important;
    border: 2px solid #262524;
}
.page-hero__btn--primary:hover { background: #111; border-color: #111; }
.page-hero__btn--outline {
    background: rgba(255,255,255,.18); color: #262524 !important;
    border: 2px solid rgba(38,37,36,.45);
}
.page-hero__btn--outline:hover { background: rgba(255,255,255,.32); }
.page-hero__img {
    display: flex; align-items: flex-end; justify-content: center;
    position: relative; min-height: 280px;
}
.page-hero__bagger {
    max-height: 260px; width: auto; max-width: 100%;
    animation: heroBaggerIn .9s cubic-bezier(.22,.61,.36,1) .15s both;
    position: relative; z-index: 1;
}
@keyframes heroBaggerIn {
    from { opacity: 0; transform: translateX(50px) translateY(12px) scale(.95); }
    to   { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
}
/* Wave */
.page-hero__wave {
    position: absolute; bottom: -1px; left: 0; right: 0;
    height: 100px; line-height: 0; z-index: 2;
}
.page-hero__wave svg { width: 100%; height: 100%; display: block; }

/* Responsive hero */
@media (max-width: 900px) {
    .page-hero__inner { grid-template-columns: 1fr; gap: 0; }
    .page-hero { padding: 48px 0 100px; }
    .page-hero__img { min-height: 200px; margin-top: 24px; }
    .page-hero__bagger { max-height: 260px; }
    .page-hero__sub br { display: none; }
}
@media (max-width: 600px) {
    .page-hero { padding: 36px 0 90px; }
    .page-hero__inner { padding: 0 18px; }
    .page-hero__btn { padding: 12px 20px; font-size: 14px; }
    .page-hero__bagger { max-height: 200px; }
}

/* ============================================================
   SUBPAGES — Header-Anpassungen
   ============================================================ */

/* Logo größer */
.hdr-main__logo img { height: 72px; }

/* Mehr Luft im weißen Header */
.hdr-main { padding: 0; }
.hdr-main__inner { height: 110px; padding: 0 32px; gap: 32px; }

/* Sticky-Offset für Nav-Strip korrigieren */
.hdr-nav { top: 110px; }

/* Kategorien zentrieren */
.hdr-nav__links { justify-content: center; }

/* Hint-Chips komplett weg (PHP auch bereinigt) */
.hdr-hints { display: none !important; }

/* Nav-Strip-Links höhe korrigieren */
.hdr-nav__link { height: 48px; }

/* Responsive: Mobile-Korrekturen für die neue Höhe */
@media (max-width: 768px) {
    .hdr-main__inner { height: 70px; padding: 0 16px; gap: 12px; }
    .hdr-main__logo img { height: 44px; }
    .hdr-nav { top: 70px; }
}
@media (max-width: 480px) {
    .hdr-main__inner { height: 58px; }
    .hdr-main__logo img { height: 34px; }
    .hdr-nav { top: 58px; }
}

/* ============================================================
   HEADER INLINE MODE TOGGLE + FIXES (2025-05)
   ============================================================ */

/* Mode-Toggle-Buttons (vor dem Suchfeld) */
.hdr-mode-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 0 14px; height: 100%;
    background: none; border: none; border-right: 1px solid #ddd;
    font-size: 11.5px; font-weight: 700; color: #aaa;
    cursor: pointer; white-space: nowrap; flex-shrink: 0;
    transition: background .12s, color .12s; border-radius: 0 !important;
}
.hdr-mode-btn--on { background: #262524; color: #F2A649; border-right-color: #262524; }
.hdr-mode-btn:hover:not(.hdr-mode-btn--on) { background: #f5f2ee; color: #262524; }

/* Trenner zwischen Buttons und Eingabefeld */
.hdr-sform-sep { display: none; } /* Kein extra Trenner nötig, Buttons haben border-right */

/* Modell-Selects passen sich in die Form ein */
.hdr-msel--model {
    flex: 1; min-width: 0; border: none;
    border-right: 1px solid #ddd !important;
    padding: 0 12px; font-size: 13.5px; color: #262524;
    background: transparent; outline: none; cursor: pointer;
    height: 100%; border-radius: 0 !important;
}
.hdr-msel--model:disabled { color: #bbb; }
.hdr-msel--model:last-of-type { border-right: none !important; }

/* Logo größer */
.hdr-main__logo img { height: 80px; }

/* Mehr Luft im weißen Header: 3em oben + unten */
.hdr-main__inner { height: auto; min-height: 0; padding: 3em 32px; gap: 32px; }
.hdr-nav { top: 176px; } /* = 80px Logo + 2 × 3em (48px) Padding */

/* Such-Tabs (alt) ausblenden — neue Mode-Buttons übernehmen */
.hdr-stabs { display: none !important; }
.hdr-spanel { display: block; }

/* Sterne in hellem Gold statt Dunkelbraun */
.hdr-trust__stars { color: #FFD060; }

/* Hero-Placeholder-SVG (zeigen wenn kein Bild) */
.page-hero__placeholder { display: block; width: 100%; max-width: 360px; animation: heroBaggerIn .9s cubic-bezier(.22,.61,.36,1) .15s both; }
.page-hero__bagger.hero-img-missing { display: none; }
.page-hero__bagger:not(.hero-img-missing) + .page-hero__placeholder { display: none; }

/* Mobile: angepasste Sticky-Offsets */
@media (max-width: 768px) {
    .hdr-main__inner { height: 72px; }
    .hdr-main__logo img { height: 46px; }
    .hdr-nav { top: 72px; }
    .hdr-mode-btn { font-size: 0; gap: 0; padding: 0 10px; } /* nur Icon auf Mobil */
    .hdr-mode-btn svg { width: 14px; height: 14px; }
}
@media (max-width: 480px) {
    .hdr-main__inner { height: 58px; }
    .hdr-main__logo img { height: 34px; }
    .hdr-nav { top: 58px; }
}

/* ============================================================
   HERO — Text von links + Bagger von rechts
   ============================================================ */
@keyframes heroTextIn {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0); }
}
.page-hero__text {
    animation: heroTextIn .85s cubic-bezier(.22,.61,.36,1) both;
}
.page-hero__eyebrow { animation-delay: 0s; }
.page-hero__h1      { animation-delay: .1s; }
.page-hero__sub     { animation-delay: .2s; }
.page-hero__btns    { animation-delay: .3s; }

/* Placeholder SVG (sichtbar wenn kein PNG) */
.page-hero__placeholder {
    width: 100%; max-width: 400px;
    filter: drop-shadow(0 20px 40px rgba(38,37,36,.25));
    animation: heroBaggerIn .9s cubic-bezier(.22,.61,.36,1) .15s both;
}
.page-hero__bagger:not(.hero-img-missing) { display: block; }
.page-hero__bagger.hero-img-missing { display: none; }

/* ============================================================
   HERO-SLIDER — Fade-Übergang, Dots, Arrows (2025-05)
   ============================================================ */
.page-hero__slide {
    width: 100%;
}
/* Mehrere Slides: Grid-Stack, höchster Slide bestimmt Höhe */
.page-hero--has-slider {
    position: relative;
    padding: 0; /* Slides bringen ihr eigenes Padding mit */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.page-hero--has-slider .page-hero__slide {
    grid-column: 1;
    grid-row: 1;
    box-sizing: border-box;
    padding: 60px 0 130px; /* oben Eyebrow-Luft, unten Wave + Dots */
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
}
.page-hero--has-slider .page-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}
.page-hero--has-slider .page-hero__inner {
    width: 100%;
}
/* Eingangsanimationen NUR im aktiven Slide */
.page-hero--has-slider .page-hero__slide:not(.is-active) .page-hero__text,
.page-hero--has-slider .page-hero__slide:not(.is-active) .page-hero__bagger,
.page-hero--has-slider .page-hero__slide:not(.is-active) .page-hero__placeholder {
    animation: none;
}
@media (max-width: 900px) {
    .page-hero--has-slider .page-hero__slide { padding: 50px 0 140px; align-items: flex-start; }
}
@media (max-width: 600px) {
    .page-hero--has-slider .page-hero__slide { padding: 40px 0 120px; }
}

/* Pfeile */
.page-hero__arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 5;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.85); color: #262524;
    border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(38,37,36,.18);
    transition: background .15s, transform .15s;
}
.page-hero__arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.page-hero__arrow--prev { left: 16px; }
.page-hero__arrow--next { right: 16px; }

/* Dots */
.page-hero__dots {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    bottom: 86px; /* über dem Wave */
    z-index: 5;
    display: flex; gap: 10px;
}
.page-hero__dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.55); border: none;
    cursor: pointer; padding: 0;
    transition: background .15s, transform .15s, width .25s;
}
.page-hero__dot:hover { background: rgba(255,255,255,.85); }
.page-hero__dot.is-active {
    background: #262524;
    width: 26px; border-radius: 5px;
}

@media (max-width: 900px) {
    .page-hero__arrow { width: 36px; height: 36px; }
    .page-hero__arrow--prev { left: 8px; }
    .page-hero__arrow--next { right: 8px; }
    .page-hero__dots { bottom: 78px; }
}
@media (max-width: 600px) {
    .page-hero__arrow { display: none; }
    .page-hero__dots { bottom: 68px; }
}
.page-hero__bagger:not(.hero-img-missing) ~ .page-hero__placeholder { display: none; }

/* ============================================================
   HERO — größer, zentriert, kein Gap zur Nav (2025-05)
   ============================================================ */

/* Gap zwischen Nav-Strip und Hero entfernen */
#content:has(.page-hero:first-child) { padding-top: 0 !important; }
.page-hero { margin-top: 0; }

/* Für Browser ohne :has() Support (Fallback) */
.page-hero { margin-top: -1em; }

/* Hero vertikal zentriert, mehr Höhe */
.page-hero {
    padding: 80px 0 130px;
    min-height: clamp(460px, 62vh, 760px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.page-hero__inner {
    align-items: center;
    min-height: unset;
}

/* Bagger-Bild größer */
.page-hero__bagger {
    max-height: 480px;
}
.page-hero__placeholder {
    max-width: 460px;
}

/* Mobile Hero */
@media (max-width: 900px) {
    .page-hero { padding: 56px 0 120px; min-height: auto; }
    .page-hero__bagger { max-height: 300px; }
    .page-hero__placeholder { max-width: 320px; }
}
@media (max-width: 600px) {
    .page-hero { padding: 40px 0 100px; }
    .page-hero__bagger { max-height: 220px; }
}

/* ============================================================
   COMPLIANCE GUARDIAN — runder Icon-Button, kein Label-Text
   Nur den Toggle-Button (btn-mode-*) anpassen, NICHT die
   Sprach-Buttons (lang-btn) oder Modal-Buttons
   ============================================================ */
body [class*="-btn-mode-default"],
body [class*="-btn-mode-compact"] {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    border: 2px solid #e0ddd8 !important;
    background: #fff !important;
    color: #262524 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.1) !important;
    transition: background .15s, border-color .15s, color .15s, transform .15s, box-shadow .2s !important;
}
body [class*="-btn-mode-default"]:hover,
body [class*="-btn-mode-compact"]:hover {
    background: #fff !important;
    border-color: #F2A649 !important;
    color: #F2A649 !important;
    box-shadow: 0 3px 14px rgba(242,166,73,.25) !important;
    transform: scale(1.08) !important;
}
body [class*="-btn-mode-default"] span,
body [class*="-btn-mode-compact"] span { display: none !important; }
body [class*="-btn-mode-default"] svg,
body [class*="-btn-mode-compact"] svg {
    width: 22px !important;
    height: 22px !important;
    color: #262524 !important;
    stroke: #262524 !important;
    fill: #262524 !important;
}
body [class*="-btn-mode-default"]:hover svg,
body [class*="-btn-mode-compact"]:hover svg {
    color: #F2A649 !important;
    stroke: #F2A649 !important;
    fill: #F2A649 !important;
}

/* ============================================================
   BAGGER-LOADER — globale Ladeanimation
   ============================================================ */
#bbt-loader {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(38,37,36,.72);
    backdrop-filter: blur(4px);
    display: none; align-items: center; justify-content: center;
    pointer-events: none;
}
#bbt-loader.is-active { display: flex; pointer-events: auto; }
.bbt-loader__box {
    display: flex; flex-direction: column; align-items: center;
    padding: 32px 40px;
    background: #fff;
    max-width: 240px; text-align: center;
}
.bbt-loader__box .bbt-boxes { margin-bottom: 18px; }
.bbt-loader__text { font-size: 13px; font-weight: 600; color: #262524; margin: 0; }

/* ============================================================
   404 — robuste Hover-Links ohne inline JS
   ============================================================ */
.cat-pill {
    display: inline-block;
    padding: 7px 14px; background: #f0ede8; color: #262524;
    font-size: 13px; font-weight: 600; text-decoration: none;
    transition: background .12s;
}
.cat-pill:hover { background: #F2A649; color: #262524; }

/* ============================================================
   PREIS B2B / B2C — ein Preis sichtbar je nach Kundenstatus
   ============================================================ */

/* Produktkarte: einheitlicher Preis-Block */
.bbt-price-wrap { text-align: center; margin-top: 8px; }
.bbt-price {
    font-size: 1.25rem; font-weight: 800;
    color: #262524; margin-bottom: 2px;
}
.bbt-price-label {
    font-size: 11.5px; color: #888;
    margin: 0; line-height: 1.4;
}
.bbt-price-label a { color: #888 !important; text-decoration: none !important; }
.bbt-price-label a:hover { color: #F2A649 !important; }

/* Produktdetail: B2C zeigt Brutto-Block, B2B zeigt Netto-Block */
body.is-b2c .bbt-price-b2b-block { display: none !important; }
body.is-b2b .bbt-price-b2c-block { display: none !important; }

/* Default (kein Body-Class gesetzt): Brutto anzeigen */
.bbt-price-b2b-block { display: none; }
.bbt-price-b2c-block { display: block; }

/* Body-Class gesetzt: korrekte Sichtbarkeit */
body.is-b2c .bbt-price-b2c-block { display: block !important; }
body.is-b2b .bbt-price-b2b-block { display: block !important; }

/* Alte price-gross/price-net Klassen (Kompatibilität) */
body.is-b2b .price-gross { display: none !important; }
body.is-b2b .price-net   { display: block !important; }
body.is-b2c .price-net   { display: none !important; }
body.is-b2c .price-gross { display: block !important; }

/* ============================================================
   KUNDENGRUPPEN — Badges + Preis-Rabatt-Anzeige
   ============================================================ */
.bbt-discount-badge {
    display: inline-block;
    background: #22c55e; color: #fff;
    font-size: 10.5px; font-weight: 800;
    padding: 2px 7px; border-radius: 0;
    margin-bottom: 4px; letter-spacing: .3px;
}
.bbt-price-wrap { position: relative; }

/* Gruppen-Badge im Kundenkonto / Account */
.kg-badge {
    display: inline-block;
    padding: 2px 9px; font-size: 11px; font-weight: 700; color: #fff;
    letter-spacing: .3px;
}

/* Admin Kundengruppen-Tab */
#kg-list .border { transition: border-color .15s; cursor: default; }

/* Hero-Bild als Link (CTA1) */
.page-hero__img-link {
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    line-height: 0;
    cursor: pointer;
    text-decoration: none;
    max-width: 100%;
}
.page-hero__img-link .page-hero__bagger,
.page-hero__img-link .page-hero__placeholder {
    transition: transform .3s ease, filter .3s ease;
}
.page-hero__img-link:hover .page-hero__bagger,
.page-hero__img-link:hover .page-hero__placeholder {
    transform: translateY(-4px);
    filter: drop-shadow(0 28px 56px rgba(38,37,36,.38));
}

/* ============================================================
   HERO-SLIDER — FINAL OVERRIDES (müssen nach allen anderen
   .page-hero / .page-hero__bagger Regeln stehen)
   ============================================================ */
.page-hero.page-hero--has-slider {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    flex-direction: initial;
    justify-content: initial;
    padding: 0;
    min-height: 0;
}
.page-hero--has-slider .page-hero__slide {
    grid-column: 1;
    grid-row: 1;
    box-sizing: border-box;
    padding: 60px 0 130px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s ease;
    pointer-events: none;
    display: flex;
    align-items: center;
    width: 100%;
}
.page-hero--has-slider .page-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}
/* Slider: Bilder hart auf moderate Größe limitieren — egal welches Format */
.page-hero--has-slider .page-hero__img {
    min-height: 0;
    max-height: 320px;
    overflow: hidden;
}
.page-hero--has-slider .page-hero__bagger {
    max-height: 300px;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.page-hero--has-slider .page-hero__placeholder {
    max-width: 360px;
    max-height: 300px;
}
/* Eingangsanimationen nur im aktiven Slide */
.page-hero--has-slider .page-hero__slide:not(.is-active) .page-hero__text,
.page-hero--has-slider .page-hero__slide:not(.is-active) .page-hero__bagger,
.page-hero--has-slider .page-hero__slide:not(.is-active) .page-hero__placeholder {
    animation: none;
}
@media (max-width: 900px) {
    .page-hero--has-slider .page-hero__slide {
        padding: 50px 0 140px;
        align-items: flex-start;
    }
    .page-hero--has-slider .page-hero__img { max-height: 240px; }
    .page-hero--has-slider .page-hero__bagger { max-height: 220px; }
}
@media (max-width: 600px) {
    .page-hero--has-slider .page-hero__slide { padding: 40px 0 120px; }
    .page-hero--has-slider .page-hero__img { max-height: 200px; }
    .page-hero--has-slider .page-hero__bagger { max-height: 180px; }
}

/* Bootstrap-Select: offenes Aufklappmenü immer über Header/Topbar legen */
.bootstrap-select .dropdown-menu.show {
	z-index: 100002;
}

/* ============================================================
   HERO — SPLIT/DIAGONAL REDESIGN (2026-06-14)
   Links Textbereich, rechts Vollbild. Trennkante diagonal
   von links unten nach rechts oben. Gerader unterer Abschluss
   (Wave entfernt). Muss NACH allen anderen .page-hero-Regeln
   stehen, damit die Overrides greifen.
   ============================================================ */

/* Wave/Wölbung raus – gerade Unterkante */
.page-hero__wave { display: none !important; }

/* Section: keine Extra-Höhe/Padding mehr, Höhe kommt vom Slide */
.page-hero,
.page-hero.page-hero--has-slider {
    padding: 0 !important;
    min-height: 0 !important;
    overflow: hidden;
    margin-top: 0;
}

/* Slide = Bühne mit Positionskontext + fester Höhe */
.page-hero__slide,
.page-hero--has-slider .page-hero__slide {
    position: relative;
    width: 100%;
    min-height: clamp(420px, 56vh, 640px);
    padding: 0 !important;
    display: flex;
    align-items: center;
}

/* Textspalte links, über der Bild-Ebene */
.page-hero__inner,
.page-hero--has-slider .page-hero__inner {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0 0 clamp(20px, 5vw, 80px) !important;
}
.page-hero__text {
    max-width: min(360px, 30vw);   /* schmaler -> 1/3-Spalte links */
    padding: 48px 0;
}

/* Vollbild rechts mit diagonaler Trennkante (links unten -> rechts oben) */
.page-hero__media {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    width: 66%;   /* 1:2-Aufteilung - Bild = 2/3, Textspalte links = 1/3 */
    z-index: 1;
    /* Fallback-Panel hinter freigestellten/transparenten PNGs */
    background: linear-gradient(135deg, #E07C20 0%, #c9690f 100%);
    /* Kante: oben rechts eingerückt (28%), unten bei 0
       -> verläuft von links-unten nach rechts-oben */
    -webkit-clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
    overflow: hidden;
    animation: heroMediaIn .7s ease both;
}
@keyframes heroMediaIn { from { opacity: 0; } to { opacity: 1; } }

/* Bild füllt die Ebene komplett (Vollbild) */
.page-hero__media .page-hero__img-link {
    display: block;
    width: 100%; height: 100%;
    max-width: none;
    align-items: stretch;
    line-height: 0;
}
.page-hero__media .page-hero__bagger,
.page-hero--has-slider .page-hero__media .page-hero__bagger {
    display: block;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
    object-fit: cover;
    object-position: center;
    filter: none !important;
    animation: none;
}
.page-hero__media .page-hero__placeholder,
.page-hero--has-slider .page-hero__media .page-hero__placeholder {
    display: block;
    width: 100%; height: 100%;
    max-width: none; max-height: none;
}
/* Kein Hover-Versatz/-Schatten mehr auf dem Vollbild */
.page-hero__media .page-hero__img-link:hover .page-hero__bagger,
.page-hero__media .page-hero__img-link:hover .page-hero__placeholder {
    transform: none;
    filter: none;
}

/* Dots: kein Wave mehr -> näher an den unteren Rand */
.page-hero__dots { bottom: 18px !important; }

/* ---------- Mobil: stapeln, keine Diagonale ---------- */
@media (max-width: 900px) {
    .page-hero__slide,
    .page-hero--has-slider .page-hero__slide {
        display: block;
        min-height: 0;
    }
    .page-hero__inner,
    .page-hero--has-slider .page-hero__inner {
        padding: 0 !important;
        max-width: none;
    }
    .page-hero__text {
        max-width: none;
        padding: 40px 20px 32px;
        text-align: center;          /* mobil: alles mittig */
        margin: 0 auto;
    }
    .page-hero__btns {
        justify-content: center;     /* CTA-Buttons mittig */
    }
    .page-hero__media {
        position: relative;
        width: 100%;
        height: clamp(190px, 42vw, 280px);
        -webkit-clip-path: none;
        clip-path: none;
    }
    .page-hero__dots { bottom: 10px !important; }
}

/* ═══════════ ZENTRALE BAGGER-MODELL-AUSWAHL (FAB + Modal + Compat-Badge) ═══════════ */
#bbt-model-fab {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 230px;
    padding: 9px 16px 9px 12px;
    border: none;
    border-radius: 999px;
    background: #262524;
    color: #F2A649;
    cursor: pointer;
    box-shadow: 0 3px 14px rgba(38,37,36,.35);
    transition: background .15s, transform .15s, box-shadow .2s, color .15s;
}
#bbt-model-fab:hover { background: #F2A649; color: #262524; transform: translateX(-50%) scale(1.04); box-shadow: 0 5px 20px rgba(242,166,73,.4); }
#bbt-model-fab.is-set { background: #F2A649; color: #262524; }
#bbt-model-fab.is-set:hover { background: #262524; color: #F2A649; }
.bbt-model-fab__icon { flex: 0 0 auto; }
.bbt-model-fab__text { display: flex; flex-direction: column; line-height: 1.1; text-align: left; overflow: hidden; }
.bbt-model-fab__hint { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
.bbt-model-fab__name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bbt-model-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.bbt-model-modal[hidden] { display: none; }
.bbt-model-modal__backdrop { position: absolute; inset: 0; background: rgba(38,37,36,.55); }
.bbt-model-modal__box {
    position: relative;
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 16px 50px rgba(38,37,36,.3);
    padding: 22px 24px 24px;
}
.bbt-model-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bbt-model-modal__head h3 { margin: 0; font-size: 20px; }
.bbt-model-modal__x { border: none; background: transparent; color: #777; cursor: pointer; padding: 4px; line-height: 0; border-radius: 8px; }
.bbt-model-modal__x:hover { background: #f2f2f2; color: #262524; }
.bbt-model-modal__lead { font-size: 13px; color: #666; margin: 0 0 16px; }
.bbt-model-modal__label { display: block; font-size: 12px; font-weight: 600; color: #444; margin: 12px 0 5px; }
.bbt-model-modal__select { width: 100%; padding: 10px 12px; border: 1px solid #d6d2cc; border-radius: 9px; font-size: 14px; background: #fff; }
.bbt-model-modal__select:disabled { background: #f4f3f1; color: #999; }
.bbt-model-modal__check { display: flex; align-items: center; gap: 8px; margin: 16px 0 4px; font-size: 14px; cursor: pointer; }
.bbt-model-modal__check input { width: 16px; height: 16px; }
.bbt-model-modal__actions { display: flex; gap: 10px; margin-top: 20px; }
.bbt-model-modal__reset { flex: 0 0 auto; padding: 11px 16px; border: 1px solid #d6d2cc; background: #fff; border-radius: 10px; cursor: pointer; font-size: 14px; color: #555; }
.bbt-model-modal__reset:hover { background: #f4f3f1; }
.bbt-model-modal__apply { flex: 1 1 auto; padding: 11px 16px; border: none; background: #F2A649; color: #262524; font-weight: 700; border-radius: 10px; cursor: pointer; font-size: 14px; }
.bbt-model-modal__apply:hover { background: #e0962f; }

/* Sanfter Willkommens-Hinweis */
.bbt-model-hint { position: fixed; inset: 0; z-index: 1900; display: flex; align-items: center; justify-content: center; }
.bbt-model-hint[hidden] { display: none; }
.bbt-model-hint__backdrop { position: absolute; inset: 0; background: rgba(38,37,36,.28); opacity: 0; transition: opacity .35s ease; }
.bbt-model-hint.is-in .bbt-model-hint__backdrop { opacity: 1; }
.bbt-model-hint__box {
    position: relative;
    width: min(380px, calc(100vw - 32px));
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(38,37,36,.28);
    padding: 28px 26px 24px;
    text-align: center;
    transform: translateY(18px) scale(.97);
    opacity: 0;
    transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .38s ease;
}
.bbt-model-hint.is-in .bbt-model-hint__box { transform: translateY(0) scale(1); opacity: 1; }
.bbt-model-hint__x { position: absolute; top: 12px; right: 12px; border: none; background: transparent; color: #aaa; cursor: pointer; padding: 4px; line-height: 0; border-radius: 8px; }
.bbt-model-hint__x:hover { background: #f2f2f2; color: #262524; }
.bbt-model-hint__icon { width: 64px; height: 64px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fdf1df; color: #d6932c; }
.bbt-model-hint__box h3 { margin: 0 0 8px; font-size: 19px; }
.bbt-model-hint__box p { margin: 0 0 20px; font-size: 14px; color: #666; line-height: 1.5; }
.bbt-model-hint__actions { display: flex; gap: 10px; justify-content: center; }
.bbt-model-hint__later { flex: 0 0 auto; padding: 11px 18px; border: 1px solid #d6d2cc; background: #fff; border-radius: 10px; cursor: pointer; font-size: 14px; color: #555; }
.bbt-model-hint__later:hover { background: #f4f3f1; }
.bbt-model-hint__go { flex: 1 1 auto; padding: 11px 18px; border: none; background: #F2A649; color: #262524; font-weight: 700; border-radius: 10px; cursor: pointer; font-size: 14px; }
.bbt-model-hint__go:hover { background: #e0962f; }

/* Compat-Markierung auf Produktkarten */
.category-product { position: relative; }
.category-product.is-compatible .shadow { box-shadow: 0 0 0 2px #28a745, 0 .5rem 1rem rgba(0,0,0,.15) !important; }
.bbt-compat-badge { position: absolute; top: 10px; left: 10px; z-index: 3; }
.bbt-compat-badge .badge { font-size: 11px; padding: 6px 9px; }

@media (max-width: 575px) {
    #bbt-model-fab { top: 10px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%); max-width: 180px; }
    #bbt-model-fab:hover { transform: translateX(-50%) scale(1.04); }
}

a.hdr-trust { text-decoration: none; cursor: pointer; }
a.hdr-trust:hover .hdr-trust__score { text-decoration: underline; }
a.hdr-trust .hdr-trust__count { color: rgba(38,37,36,.6); }