/* ==========================================================================
   K´electric B2B-Shop – linke Seitenleiste
   Markup: Scripts/b2bshop/Event_htmlString.script (#slide-out)
   Gleiche Formensprache wie Suchleiste/Menü: ein Grün-Akzent, weiche Flächen,
   aktiver Eintrag mit grünem Balken links.
   ========================================================================== */

#slide-out.side-nav {
	--sb-ink: #1f2933;
	--sb-muted: #5b6b7f;
	--sb-faint: #8a968f;
	--sb-line: #edf0ee;
	--sb-hover: #f4f7f5;
	--sb-active: #eef7ef;
	--sb-green: var(--ke-green, #1fa22e);
	--sb-text-green: #137a1d;
	background: #fff !important;
	border-right: 1px solid #e6e9e7;
	box-shadow: none !important;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#slide-out .sidenav-bg {
	display: none !important;
}
#slide-out > ul {
	scrollbar-width: thin;
	scrollbar-color: #d6ddd8 transparent;
}
#slide-out > ul::-webkit-scrollbar {
	width: 6px;
}
#slide-out > ul::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background: #d6ddd8;
}

/* ---------- Logo: gleiche Höhe wie die Kopfzeile, keine Kante ---------- */
#slide-out .logo-wrapper {
	display: flex;
	align-items: center;
	height: 100px !important;
	padding: 0 24px !important;
	border-bottom: 1px solid var(--sb-line) !important;
}
#slide-out .logo-wrapper a {
	height: auto !important;
	padding: 0 !important;
	line-height: 1 !important;
}
#slide-out .logo-wrapper img {
	max-height: 38px;
	width: auto;
	padding: 0 !important;
}

/* ---------- Hauptnavigation ---------- */
#slide-out .collapsible {
	margin: 0 !important;
	padding: 10px 14px 24px !important;
	border: 0 !important;
	box-shadow: none !important;
}
#slide-out .collapsible > li {
	margin: 2px 0 !important;
}
#slide-out .ke-nav-label {
	margin: 14px 0 4px !important;
	padding: 0 12px;
	color: var(--sb-faint);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.6;
}
#slide-out .collapsible-header {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 12px;
	height: auto !important;
	min-height: 46px;
	margin: 0 !important;
	padding: 7px 12px 7px 8px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: transparent !important;
	color: var(--sb-ink) !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
#slide-out .collapsible-header > i:first-child {
	flex: 0 0 32px;
	width: 32px !important;
	height: 32px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	float: none !important;
	border-radius: 9px;
	background: #f3f5f4;
	color: #6b7a72 !important;
	font-size: 13px !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#slide-out .collapsible-header:hover {
	background: var(--sb-hover) !important;
	color: var(--sb-ink) !important;
}
#slide-out .collapsible-header:hover > i:first-child {
	background: var(--sb-active);
	color: var(--sb-green) !important;
}
#slide-out .collapsible-header.active {
	background: var(--sb-active) !important;
	color: var(--sb-text-green) !important;
	box-shadow: inset 3px 0 0 var(--sb-green);
}
#slide-out .collapsible-header.active > i:first-child {
	background: var(--sb-green);
	color: #fff !important;
	box-shadow: 0 4px 10px -4px rgba(31, 162, 46, 0.6);
}
#slide-out .collapsible-header .rotate-icon {
	position: static !important;
	margin: 0 0 0 auto !important;
	float: none !important;
	color: var(--sb-faint) !important;
	font-size: 12px !important;
	transition: transform 0.2s ease;
}
#slide-out .collapsible-header:focus-visible,
#slide-out .collapsible-body a:focus-visible {
	outline: 2px solid var(--sb-text-green);
	outline-offset: 2px;
}

/* ---------- Kategorien ---------- */
#slide-out .collapsible-body {
	padding: 6px 0 4px !important;
	background: transparent !important;
}
#slide-out .collapsible-body ul {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}
#slide-out .collapsible-body li {
	margin: 1px 0 !important;
}
#slide-out .collapsible-body li.ke-nav-spacer {
	height: 48px;
}
#slide-out .collapsible-body a {
	display: flex !important;
	align-items: center;
	gap: 12px;
	height: auto !important;
	padding: 5px 10px 5px 12px !important;
	border-radius: 10px;
	background: transparent !important;
	color: #3d4a52 !important;
	font-size: 0.85rem !important;
	font-weight: 500;
	line-height: 1.35 !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#slide-out .ke-cat-name {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* Nummer wie auf den Kategorie-Karten: (1), (2), (X) … */
#slide-out .ke-cat-no {
	flex: 0 0 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #f3f5f4;
	color: #4b5a52;
	font-size: 0.78rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background-color 0.15s ease, color 0.15s ease;
}
#slide-out .ke-cat-no-dot::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.5;
}
#slide-out .collapsible-body a:hover {
	background: var(--sb-hover) !important;
	color: var(--sb-ink) !important;
}
#slide-out .collapsible-body a:hover .ke-cat-no {
	background: var(--sb-active);
	color: var(--sb-text-green);
}
#slide-out .collapsible-body a.active {
	background: var(--sb-active) !important;
	color: var(--sb-text-green) !important;
	font-weight: 600;
}
#slide-out .collapsible-body a.active .ke-cat-no {
	background: var(--sb-green);
	color: #fff;
}
/* Unterkategorien der aktiven Kategorie: eingerückt an einer feinen Linie */
#slide-out .collapsible-body a.ke-cat-sub {
	position: relative;
	margin-left: 26px;
	padding: 6px 10px 6px 18px !important;
	color: var(--sb-muted) !important;
	font-size: 0.83rem !important;
}
#slide-out .collapsible-body a.ke-cat-sub::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0;
	bottom: 0;
	width: 1px;
	background: #e3e8e4;
}
#slide-out .collapsible-body a.ke-cat-sub.active::before {
	width: 2px;
	left: 5px;
	background: var(--sb-green);
}

@media (prefers-reduced-motion: reduce) {
	#slide-out * {
		transition: none !important;
	}
}