/* BrikoScout Händlerband – ruhige, von Hand bedienbare Leiste (Pfeile, Wischen), kein Laufband.
   Breite und Außenabstände entsprechen exakt der Kopfzeile (.bs-nav-preview-top):
   width min(1760px, 100%), Padding 24px / 14px (≤1180px) / 12px (kleine Breiten). */
/* Produktseiten: die Customizer-Regel ".single-product aside { display:none }" (gedacht fuer Sidebars)
   erfasst auch dieses <aside>. Hoehere Spezifitaet stellt den Blockfluss des Bandes wieder her. */
.single-product aside.bs-hb {
	display: block !important; /* Customizer-Regel ist ebenfalls !important */
}

.bs-hb {
	--bs-hb-logo-h: 30px;
	--bs-hb-logo-w: 124px;
	--bs-hb-square-h: 44px;
	--bs-hb-gap: 26px;
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	background: #fff;
	border-bottom: 1px solid rgba(8, 35, 19, .09);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	color: #102016;
}
.bs-hb__inner {
	width: min(1760px, 100%);
	margin: 0 auto;
	padding: 9px 24px 0;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 14px;
	box-sizing: border-box;
}
.bs-hb__inner--notice {
	display: block;
	padding: 2px 24px 7px;
}
.bs-hb__title {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2f7f3d;
	white-space: nowrap;
	margin-right: 10px;
}
.bs-hb__arrow {
	appearance: none;
	-webkit-appearance: none;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(8, 35, 19, .14);
	background: #fff;
	color: #1d3a27;
	font: inherit;
	font-size: 22px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.bs-hb__arrow span { position: relative; top: -1px; }
.bs-hb__arrow:hover:not(:disabled),
.bs-hb__arrow:focus-visible { background: #f3faef; border-color: rgba(47, 127, 61, .45); }
.bs-hb__arrow:focus-visible { outline: 2px solid #2f7f3d; outline-offset: 2px; }
.bs-hb__arrow:disabled { opacity: .28; cursor: default; }
.bs-hb:not(.bs-hb--scrollable) .bs-hb__arrow { visibility: hidden; }
.bs-hb__viewport {
	position: relative;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.bs-hb__viewport::-webkit-scrollbar { display: none; }
.bs-hb__viewport:focus-visible { outline: 2px solid #2f7f3d; outline-offset: 2px; }
.bs-hb__track {
	display: flex;
	align-items: center;
	justify-content: space-between; /* passt alles hinein: gleichmaessig ueber die Breite verteilen */
	gap: var(--bs-hb-gap);
	width: max-content;
	min-width: 100%;
	padding: 0 24px;
	box-sizing: border-box;
}
.bs-hb__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: calc(var(--bs-hb-square-h) + 4px);
	width: auto;            /* Breite = Logo, keine festen Kaesten mit Leerraum */
	max-width: var(--bs-hb-logo-w);
	flex: 0 0 auto;
	scroll-snap-align: start;
	text-decoration: none;
	color: inherit;
	border-radius: 8px;
	transition: transform .18s ease;
}
.bs-hb__item:hover,
.bs-hb__item:focus-visible { transform: translateY(-1px); }
.bs-hb__item:focus-visible { outline: 2px solid #2f7f3d; outline-offset: 2px; }
.bs-hb__item--hidden { display: none !important; } /* Logo nicht ladbar: Eintrag belegt keinen Platz */
.bs-hb__item--square { max-width: calc(var(--bs-hb-square-h) + 16px); }
.bs-hb__logo {
	display: block;
	width: auto;
	height: auto;
	max-height: var(--bs-hb-logo-h);
	max-width: var(--bs-hb-logo-w);
	object-fit: contain;
}
.bs-hb__item--square .bs-hb__logo { max-height: var(--bs-hb-square-h); max-width: var(--bs-hb-square-h); }
.bs-hb__name {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #1d3a27;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: var(--bs-hb-logo-w);
}
.bs-hb__notice {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.4;
	color: #7a8880;
}
@media (max-width: 1180px) {
	.bs-hb__inner { padding-left: 14px; padding-right: 14px; }
	.bs-hb__inner--notice { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 760px) {
	/* Mobil kompakt (02.10.2026): eine Logozeile mit Pfeilen, darunter Bezeichnung und
	   Partnerhinweis in einer kleinen Zeile - keine leere zweite Zeile, keine grossen Abstaende. */
	.bs-hb { --bs-hb-logo-h: 22px; --bs-hb-logo-w: 88px; --bs-hb-square-h: 30px; --bs-hb-gap: 14px; }
	.bs-hb__inner { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto; padding: 5px 8px 0; row-gap: 0; column-gap: 4px; }
	.bs-hb__inner--notice { display: block; padding: 1px 12px 4px; }
	.bs-hb__title { display: none; } /* Bezeichnung wandert in die Hinweiszeile */
	.bs-hb__arrow--prev { grid-column: 1; grid-row: 1; }
	.bs-hb__viewport { grid-column: 2; grid-row: 1; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%); }
	.bs-hb__arrow--next { grid-column: 3; grid-row: 1; }
	.bs-hb__arrow { width: 26px; height: 26px; font-size: 17px; }
	.bs-hb__track { padding: 0 6px; }
	.bs-hb__item { height: calc(var(--bs-hb-square-h) + 2px); }
	/* Feinkorrektur: Hinweis deutlich kleiner, ruhig dunkelgrau; Bezeichnung bleibt gruen. */
	.bs-hb__notice { font-size: 9px; line-height: 1.25; color: #2b3330; letter-spacing: 0; }
	.bs-hb__notice::before { content: "Händler bei BrikoScout · "; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #2f7f3d; font-size: 9.5px; }
}
}

/* Ohne Tracking-Zustimmung: Logo sichtbar, nicht klickbar (kein href), Klick oeffnet Cookie-Einstellungen */
.bs-hb--noconsent .bs-hb__item--link { cursor: pointer; }
.bs-hb__item--link[aria-disabled="true"] .bs-hb__logo { opacity: .92; }

/* ---- Produktbrowser-Overlay ("Produkte entdecken", Snippet 131) -------------------------------------------
   Das Overlay ist position:fixed (z-index 999998 Desktop / 2147483000 <=1180px) und deckte das Band ab.
   Bei geoeffnetem Browser wird das Band fixiert und ueber das Overlay gelegt; das Overlay beginnt darunter.
   Hoehe/Top liefert das Band-Skript (--bs-hb-h, --bs-hb-top). Ohne geoeffneten Browser keine Wirkung. */
body.bs-browser-open aside.bs-hb {
	position: fixed !important;
	left: 0;
	right: 0;
	top: var(--bs-hb-top, 0px);
	z-index: 2147483001;
}
@media (min-width: 1181px) {
	body.bs-browser-open .bs-product-browser {
		top: calc(var(--bs-hb-top, 0px) + var(--bs-hb-h, 0px)) !important;
	}
}
@media (max-width: 1180px) {
	body.bs-browser-open .bs-product-browser {
		top: var(--bs-hb-h, 0px) !important;
		height: calc(100vh - var(--bs-hb-h, 0px)) !important;
		height: calc(100dvh - var(--bs-hb-h, 0px)) !important;
		min-height: 0 !important;
		max-height: none !important;
	}
}