/* ==========================================================================
   K´electric B2B-Shop – Suchleiste mit Live-Vorschlägen
   Markup: Scripts/b2bshop/Event_htmlString.script (#ke-search, sub renderSuggestions)
   Logik:  /Resources/ke_search.js
   Farben/Radien aus b2b.css (--ke-*), Schrift Open Sans wie im Shop.
   ========================================================================== */

.ke-search {
	--ks-ink: #263238;
	--ks-muted: #5b6b7f;
	--ks-faint: #7d8a83;
	--ks-line: #dfe5e1;
	--ks-line-soft: #eef1ef;
	--ks-hover: #f0f8f1;
	--ks-green: var(--ke-green, #1fa22e);
	--ks-text-green: #137a1d; /* Grün für Text, Kontrast 5,5:1 auf Weiß */
	--ks-ring: rgba(18, 48, 28, 0.10);
	--ks-shadow: 0 24px 48px -16px rgba(18, 48, 28, 0.25), 0 6px 14px -6px rgba(18, 48, 28, 0.10);
	--ks-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	position: relative;
	flex: 1 1 520px;
	min-width: 300px;
	max-width: 760px;
	margin: 0 auto;
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Breadcrumb nimmt nur seinen Platz; die Icons rechts sitzen fest am rechten Rand */
.double-nav .breadcrumb-dn {
	margin-right: 0 !important;
	flex: 0 1 auto;
	min-width: 0;
}
.double-nav .ke-search + .nav {
	flex: 0 0 auto;
	margin-left: auto !important;
	padding-right: 14px;
}

/* ---------- Eingabefeld ---------- */
.ke-search-field {
	position: relative;
	display: flex;
	align-items: center;
	height: 54px;
	padding: 0 5px 0 7px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 0 0 1px var(--ks-ring), 0 1px 2px rgba(18, 48, 28, 0.06), 0 10px 24px -14px rgba(18, 48, 28, 0.22);
	transition: box-shadow 0.22s var(--ks-ease);
}
.ke-search-field:hover {
	box-shadow: 0 0 0 1px rgba(18, 48, 28, 0.18), 0 1px 2px rgba(18, 48, 28, 0.06), 0 12px 28px -14px rgba(18, 48, 28, 0.28);
}
.ke-search-field:focus-within {
	box-shadow: 0 0 0 1px var(--ks-green), 0 0 0 5px rgba(31, 162, 46, 0.14), 0 16px 32px -16px rgba(18, 48, 28, 0.30);
}
.ke-search-icon {
	flex: 0 0 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #eef7ef;
	color: var(--ks-green);
	font-size: 0.95rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.ke-search-field:focus-within .ke-search-icon {
	background: var(--ks-green);
	color: #fff;
}
.ke-search input#ke-search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0;
	padding: 0 12px 0 14px;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	color: var(--ks-ink);
	font-size: 1rem; /* 16px: kein Auto-Zoom auf iOS */
	font-weight: 500;
	letter-spacing: 0.005em;
}
.ke-search input#ke-search-input::placeholder {
	color: var(--ks-faint);
	font-weight: 400;
	opacity: 1;
}
/* wechselnder Hinweistext (per JS); der echte Placeholder bleibt für Screenreader */
.ke-search.has-hint input#ke-search-input::placeholder {
	color: transparent;
}
.ke-search-hint {
	position: absolute;
	left: 61px;
	right: 170px;
	top: 50%;
	overflow: hidden;
	color: var(--ks-faint);
	font-size: 1rem;
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 0.28s ease, transform 0.28s var(--ks-ease);
}
.ke-search-hint.is-out {
	opacity: 0;
	transform: translateY(-110%);
}
.ke-search-hint.is-in {
	opacity: 0;
	transform: translateY(10%);
	transition: none;
}
.ke-search.has-value .ke-search-hint {
	display: none;
}
.ke-search-clear {
	flex: 0 0 32px;
	height: 32px;
	margin-right: 2px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ks-faint);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.ke-search-clear:hover {
	background: #f0f3f1;
	color: var(--ks-ink);
}
.ke-search-clear[hidden] {
	display: none;
}
.ke-search-kbd {
	flex: 0 0 auto;
	margin-right: 8px;
	padding: 0 8px;
	border: 1px solid var(--ks-line);
	border-bottom-width: 2px;
	border-radius: 7px;
	background: #f8faf9;
	color: var(--ks-faint);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.6;
	box-shadow: none;
}
.ke-search-field:focus-within .ke-search-kbd,
.ke-search.has-value .ke-search-kbd {
	display: none;
}
.ke-search-go {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 20px 0 22px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(180deg, #26ad36 0%, #1b9629 100%);
	color: #fff;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 14px -6px rgba(31, 162, 46, 0.65);
	cursor: pointer;
	transition: filter 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.ke-search-go i {
	font-size: 0.8rem;
	transition: transform 0.2s var(--ks-ease);
}
.ke-search-go:hover {
	filter: brightness(1.05);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 18px -8px rgba(31, 162, 46, 0.7);
}
.ke-search-go:hover i {
	transform: translateX(3px);
}
.ke-search-go:active {
	transform: scale(0.97);
}
.ke-search-go:focus-visible,
.ke-search-clear:focus-visible {
	outline: 2px solid var(--ks-text-green);
	outline-offset: 2px;
}

/* ---------- Vorschlagsliste ---------- */
.ke-search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 10px);
	z-index: 1060;
	max-height: min(72vh, 620px);
	overflow-y: auto;
	padding: 8px;
	background: rgba(255, 255, 255, 0.97);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	border: 1px solid rgba(18, 48, 28, 0.08);
	border-radius: 20px;
	box-shadow: var(--ks-shadow);
	animation: ke-sg-in 0.2s var(--ks-ease);
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.ke-search-panel[hidden] {
	display: none;
}
@keyframes ke-sg-in {
	from { opacity: 0; transform: translateY(-6px) scale(0.99); }
	to { opacity: 1; transform: none; }
}
/* dünner Ladebalken, solange eine Anfrage läuft */
.ke-search-panel.is-loading::before {
	content: "";
	position: sticky;
	top: -8px;
	z-index: 1;
	display: block;
	height: 2px;
	margin: -8px -8px 6px;
	background: linear-gradient(90deg, transparent, var(--ks-green), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: ke-sg-bar 0.9s linear infinite;
}
@keyframes ke-sg-bar {
	from { background-position: -40% 0; }
	to { background-position: 140% 0; }
}

.ke-sg-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px 6px;
	color: var(--ks-muted);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

/* Artikel-Zeilen */
.ke-sg-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 12px;
	border-radius: 12px;
	color: var(--ks-ink);
	cursor: pointer;
	transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.ke-sg-opt:hover,
.ke-sg-opt.is-active {
	background: var(--ks-hover);
}
.ke-sg-opt.is-active {
	box-shadow: inset 3px 0 0 var(--ks-green);
}
.ke-sg-thumb {
	flex: 0 0 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
	background: #f5f7f5;
	box-shadow: inset 0 0 0 1px rgba(18, 48, 28, 0.05);
	color: var(--ks-green);
	font-size: 1.1rem;
}
.ke-sg-thumb img {
	max-width: 88%;
	max-height: 88%;
	object-fit: contain;
	mix-blend-mode: multiply;
}
.ke-sg-txt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	line-height: 1.35;
}
.ke-sg-nr,
.ke-sg-sub {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ke-sg-nr {
	font-size: 0.93rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.ke-sg-sub {
	color: var(--ks-muted);
	font-size: 0.83rem;
}
.ke-sg-sub:empty {
	display: none;
}
.ke-search-panel mark {
	padding: 0 1px;
	border-radius: 3px;
	background: rgba(31, 162, 46, 0.14);
	color: #0f5f18;
	font-weight: inherit;
}
.ke-sg-go {
	flex: 0 0 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: var(--ks-green);
	font-size: 0.7rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s var(--ks-ease), background-color 0.15s ease;
}
.ke-sg-opt:hover .ke-sg-go,
.ke-sg-opt.is-active .ke-sg-go {
	opacity: 1;
	transform: none;
	background: #fff;
}

/* Kategorien + Zuletzt gesucht als Chips */
.ke-sg-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 2px 10px 10px;
}
.ke-sg-opt.ke-sg-chip {
	display: inline-flex;
	gap: 7px;
	max-width: 100%;
	padding: 6px 12px;
	border: 1px solid var(--ks-line);
	border-radius: 999px;
	background: #fff;
	font-size: 0.84rem;
	font-weight: 500;
	transition: border-color 0.12s ease, background-color 0.12s ease, transform 0.12s ease;
}
.ke-sg-chip > span {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.ke-sg-chip i {
	color: var(--ks-green);
	font-size: 0.78rem;
}
.ke-sg-chip.ke-sg-recent i {
	color: var(--ks-faint);
}
.ke-sg-opt.ke-sg-chip:hover,
.ke-sg-opt.ke-sg-chip.is-active {
	border-color: var(--ks-green);
	background: var(--ks-hover);
	box-shadow: none;
}
.ke-sg-opt.ke-sg-chip:active {
	transform: scale(0.97);
}

/* "Alle Treffer anzeigen" */
.ke-sg-opt.ke-sg-all {
	justify-content: space-between;
	margin-top: 8px;
	padding: 12px 14px;
	background: #f6f8f6;
	color: var(--ks-text-green);
	font-size: 0.9rem;
	font-weight: 600;
}
.ke-sg-opt.ke-sg-all:hover,
.ke-sg-opt.ke-sg-all.is-active {
	background: #e9f5eb;
}
.ke-sg-all-r {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.ke-sg-count {
	padding: 2px 10px;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(31, 162, 46, 0.25);
	color: var(--ks-text-green);
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
}
.ke-sg-all-r i {
	font-size: 0.8rem;
	transition: transform 0.2s var(--ks-ease);
}
.ke-sg-all:hover .ke-sg-all-r i,
.ke-sg-all.is-active .ke-sg-all-r i {
	transform: translateX(3px);
}

/* Tastatur-Hilfe unten */
.ke-sg-keys {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 8px;
	padding: 8px 12px 2px;
	border-top: 1px solid var(--ks-line-soft);
	color: var(--ks-faint);
	font-size: 0.74rem;
}
.ke-sg-keys kbd {
	display: inline-block;
	min-width: 20px;
	margin-right: 3px;
	padding: 0 5px;
	border: 1px solid var(--ks-line);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: #fff;
	color: var(--ks-muted);
	font-family: inherit;
	font-size: 0.7rem;
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	box-shadow: none;
}
@media (hover: none), (max-width: 993px) {
	.ke-sg-keys {
		display: none;
	}
}

/* Zuletzt gesucht: Verlauf löschen */
.ke-sg-rclear {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ks-muted);
	font-family: inherit;
	font-size: 0.74rem;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}
.ke-sg-rclear:hover {
	color: var(--ks-ink);
}

/* Hinweis / leer / Fehler */
.ke-sg-note {
	padding: 12px 14px;
	color: var(--ks-muted);
	font-size: 0.85rem;
}
.ke-sg-empty {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 12px 14px;
}
.ke-sg-empty .ke-sg-thumb {
	flex-basis: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--ks-faint);
}
.ke-sg-empty strong {
	display: block;
	color: var(--ks-ink);
	font-size: 0.93rem;
	font-weight: 600;
	word-break: break-word;
}
.ke-sg-empty p {
	max-width: 52ch;
	margin: 2px 0 0;
	color: var(--ks-muted);
	font-size: 0.84rem;
	line-height: 1.45;
}
.ke-sg-empty.is-error .ke-sg-thumb {
	background: #fdecea;
	color: #b3261e;
}

/* Skeleton beim ersten Laden */
.ke-sk {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 12px;
}
.ke-sk i,
.ke-sk b,
.ke-sk s {
	display: block;
	border-radius: 6px;
	background: linear-gradient(90deg, #eef1ef 0%, #f8faf9 50%, #eef1ef 100%);
	background-size: 200% 100%;
	animation: ke-sk 1.1s ease-in-out infinite;
}
.ke-sk i { flex: 0 0 52px; height: 52px; border-radius: 10px; }
.ke-sk span { flex: 1; }
.ke-sk b { width: 34%; height: 12px; margin-bottom: 8px; }
.ke-sk s { width: 68%; height: 10px; }
@keyframes ke-sk {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}

/* ---------- Layout ----------
   Einzeilig: Suche mittig zwischen Breadcrumb und den Icons (Icons fest rechts).
   Zweizeilig: Suche als eigene Zeile unter der Kopfzeile.
   Gäste haben rechts viele Einträge -> einzeilig erst ab 1600px.
   Angemeldet (body.ke-loggedin) nur Warenkorb, Menü, Abmelden -> einzeilig schon ab 1200px. */
@media (min-width: 1600px) {
	.double-nav .breadcrumb-dn {
		padding-left: calc(20% + 24px) !important;
		max-width: calc(20% + 24px + 16vw) !important;
		margin-right: 24px !important;
	}
	.double-nav .breadcrumb-dn .breadcrumb {
		flex-wrap: nowrap;
		overflow: hidden;
		white-space: nowrap;
	}
	.double-nav .ke-search + .nav {
		margin-left: 24px !important;
	}
	.ke-search {
		margin: 0 auto;
	}
}
@media (min-width: 1441px) and (max-width: 1599px) {
	body.ke-loggedin .double-nav .breadcrumb-dn {
		padding-left: calc(20% + 24px) !important;
		max-width: calc(20% + 24px + 16vw) !important;
		margin-right: 24px !important;
	}
	body.ke-loggedin .double-nav .breadcrumb-dn .breadcrumb {
		flex-wrap: nowrap;
		overflow: hidden;
		white-space: nowrap;
	}
	body.ke-loggedin .double-nav .ke-search + .nav {
		margin-left: 24px !important;
	}
	body.ke-loggedin .ke-search {
		margin: 0 auto;
	}
}
@media (min-width: 1200px) and (max-width: 1440px) {
	body.ke-loggedin .double-nav .breadcrumb-dn {
		max-width: 40% !important;
		margin-right: 24px !important;
	}
	body.ke-loggedin .double-nav .ke-search + .nav {
		margin-left: 24px !important;
	}
	body.ke-loggedin .ke-search {
		margin: 0 auto;
	}
}
@media (max-width: 1599px) {
	body.fixed-sn:not(.ke-loggedin) .navbar.scrolling-navbar.double-nav {
		height: auto !important;
		min-height: 100px;
		flex-wrap: wrap;
	}
	body.fixed-sn:not(.ke-loggedin) .ke-search {
		order: 5;
		flex: 1 1 100%;
		max-width: 760px;
		min-width: 0;
		margin: 2px auto 14px;
	}
	/* Kundennummer/-name (absolut positioniert) als eigene Zeile darunter */
	body.fixed-sn:not(.ke-loggedin) .double-nav > div[style*="top: 75px"] {
		position: static !important;
		order: 6;
		flex: 1 1 100%;
		padding: 0 30px 8px 0;
	}
	body.fixed-sn:not(.ke-loggedin) main {
		padding-top: calc(5.5rem + 66px) !important;
	}
}
@media (min-width: 1441px) and (max-width: 1599px) {
	/* feste Seitenleiste (20 %) sichtbar: Suche rechts davon ausrichten */
	body.fixed-sn:not(.ke-loggedin) .ke-search {
		margin-left: calc(20% + 24px);
	}
}
@media (max-width: 1199px) {
	body.ke-loggedin .navbar.scrolling-navbar.double-nav {
		height: auto !important;
		min-height: 100px;
		flex-wrap: wrap;
	}
	body.ke-loggedin .ke-search {
		order: 5;
		flex: 1 1 100%;
		max-width: 760px;
		min-width: 0;
		margin: 2px auto 14px;
	}
	body.ke-loggedin .double-nav > div[style*="top: 75px"] {
		position: static !important;
		order: 6;
		flex: 1 1 100%;
		padding: 0 30px 8px 0;
	}
	body.ke-loggedin main {
		padding-top: calc(5.5rem + 66px) !important;
	}
}
@media (max-width: 993px) {
	.ke-search,
	body.fixed-sn:not(.ke-loggedin) .ke-search,
	body.ke-loggedin .ke-search {
		margin: 4px 12px 10px;
		max-width: none;
	}
	.ke-search-kbd {
		display: none;
	}
	.ke-search-field {
		height: 50px;
	}
	.ke-search-icon {
		flex-basis: 36px;
		height: 36px;
	}
	.ke-search-hint {
		left: 55px;
		right: 70px;
	}
	.ke-search-go {
		height: 40px;
		padding: 0 16px;
	}
	.ke-search-go span {
		display: none;
	}
	.ke-search-panel {
		max-height: 65vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ke-search-panel,
	.ke-search-panel.is-loading::before,
	.ke-sk i, .ke-sk b, .ke-sk s {
		animation: none;
	}
	.ke-search-field,
	.ke-search-hint,
	.ke-sg-opt,
	.ke-sg-go,
	.ke-search-go,
	.ke-search-go i,
	.ke-sg-all-r i {
		transition: none;
	}
}

/* unsichtbares Benutzernamen-Feld fürs Browser-Autofill auf der Kontoseite */
.ke-autofill-user {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	clip: rect(0 0 0 0);
}