/* Technicomp Suche — Editorial-Stil, ausschließlich über die --tc-* Tokens. */

.tcs { position: relative; width: 100%; font-family: var(--tc-font-body); color: var(--tc-ink); }
.tcs *, .tcs *::before, .tcs *::after { box-sizing: border-box; }
.tcs [hidden] { display: none !important; }
.tcs__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Feld ---------- */
.tcs__form {
	display: flex; align-items: center; gap: var(--tc-space-2);
	height: 42px; margin: 0; padding: 0 var(--tc-space-3);
	background: var(--tc-bg); border: 1px solid var(--tc-line); border-radius: var(--tc-radius-md);
	transition: border-color var(--tc-transition-fast), background var(--tc-transition-fast), box-shadow var(--tc-transition-fast);
}
.tcs__form:hover { border-color: var(--tc-ink-muted); }
.tcs__form:focus-within { background: var(--tc-surface); border-color: var(--tc-accent); box-shadow: 0 0 0 3px var(--tc-accent-soft); }
.tcs__icon { flex: none; color: var(--tc-ink-muted); }
.tcs .tcs__input {
	flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0;
	border: 0; outline: 0; background: transparent; box-shadow: none; color: var(--tc-ink);
	-webkit-appearance: none; appearance: none; font-family: var(--tc-font-body); font-size: var(--tc-size-body); line-height: var(--tc-lh-body); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__input::placeholder { color: var(--tc-ink-muted); opacity: 1; }
.tcs__input::-webkit-search-cancel-button, .tcs__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.tcs__clear, .tcs__back, .tcs__rm {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	margin: 0; padding: 0; border: 0; background: none; color: var(--tc-ink-muted); cursor: pointer; border-radius: var(--tc-radius-sm);
}
.tcs__clear { width: 28px; height: 28px; }
.tcs__clear:hover, .tcs__back:hover, .tcs__rm:hover { color: var(--tc-ink); background: var(--tc-soft); }
.tcs__clear:focus-visible, .tcs__back:focus-visible, .tcs__rm:focus-visible { outline: 2px solid var(--tc-accent); outline-offset: 1px; }
.tcs__kbd, .tcs__keys kbd {
	flex: none; padding: 2px 6px; border: 1px solid var(--tc-line); border-radius: var(--tc-radius-sm);
	background: var(--tc-surface); color: var(--tc-ink-muted); font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__form:focus-within .tcs__kbd, .tcs__clear:not([hidden]) ~ .tcs__kbd { display: none; }

/* ---------- Panel ---------- */
.tcs__panel {
	position: absolute; z-index: 20; top: calc(100% + 8px); left: 0;
	width: max(100%, min(860px, calc(100vw - 2 * var(--tc-space-6))));
	max-height: min(640px, calc(100vh - 160px)); overflow-y: auto; overscroll-behavior: contain;
	padding: var(--tc-space-4);
	background: var(--tc-surface); border: 1px solid var(--tc-line); border-radius: var(--tc-radius-md);
	box-shadow: var(--tc-shadow-xl);
	animation: tcs-in 140ms ease-out;
}
@keyframes tcs-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tcs__panel { animation: none; } }

/* #brx-header ist sticky mit z-index 998 und bildet eine eigene Ebene: der Abdunkler muss DARUNTER liegen,
   sonst fängt er jeden Klick auf das Panel ab. Die Suchzeile rückt über die Navigationszeile. */
.tcs-backdrop {
	position: fixed; inset: 0; z-index: 997; background: rgba(26, 23, 19, 0.28);
	opacity: 0; transition: opacity 160ms ease;
}
.tcs-backdrop.is-on { opacity: 1; }
#brx-header .brxe-section:has(.tcs.is-open) { position: relative; z-index: 1100; }

.tcs__cols { display: block; }
.tcs__cols--split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--tc-space-6); }
.tcs__group + .tcs__group { margin-top: var(--tc-space-5); }
.tcs__kicker {
	margin: 0 0 var(--tc-space-2); padding: 0 var(--tc-space-2); color: var(--tc-ink-muted); font-family: var(--tc-font-body); font-size: var(--tc-size-body); line-height: var(--tc-lh-body); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--tc-ink); }

.tcs a.tcs__opt { display: flex; align-items: center; gap: var(--tc-space-3); color: var(--tc-ink); text-decoration: none; border-radius: var(--tc-radius-md); cursor: pointer; }
.tcs a.tcs__opt:hover, .tcs a.tcs__opt.is-active { background: var(--tc-bg); }
.tcs a.tcs__opt.is-active { box-shadow: inset 2px 0 0 var(--tc-accent); }
.tcs mark { background: none; color: inherit; font-weight: 700; }

/* Kategorien, Marken, Verlauf */
.tcs__term { justify-content: space-between; min-height: 38px; padding: var(--tc-space-2); font-family: var(--tc-font-body); font-size: var(--tc-size-ui); line-height: var(--tc-lh-ui); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__tlabel { min-width: 0; }
.tcs__tsub { color: var(--tc-ink-muted); font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__tcount { flex: none; color: var(--tc-ink-muted); font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__recent { display: flex; align-items: center; gap: var(--tc-space-1); }
.tcs__recent .tcs__opt { flex: 1; min-width: 0; }
.tcs__rm { width: 32px; height: 32px; font-family: var(--tc-font-body); font-size: var(--tc-size-body); line-height: var(--tc-lh-body); font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Produkte */
.tcs__prod { padding: var(--tc-space-2); }
.tcs__thumb {
	flex: none; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;
	background: var(--tc-bg); border: 1px solid var(--tc-line); border-radius: var(--tc-radius-sm); overflow: hidden;
}
.tcs__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tcs__pbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tcs__pmeta, .tcs__psku { color: var(--tc-ink-muted);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__psku { font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.tcs__ptitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--tc-font-body); font-size: var(--tc-size-ui); line-height: var(--tc-lh-ui); font-weight: 600; letter-spacing: 0; text-transform: none; }
.tcs__pside { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.tcs__price { white-space: nowrap; font-family: var(--tc-font-body); font-size: var(--tc-size-ui); line-height: var(--tc-lh-ui); font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.tcs__price del { margin-right: 6px; color: var(--tc-ink-muted); font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__price ins { text-decoration: none; color: var(--tc-accent); }
.tcs__stock { display: inline-flex; align-items: center; gap: 6px; color: var(--tc-ink-muted); white-space: nowrap; font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tc-neutral-400); }
.tcs__stock--1 { color: var(--tc-stock-ok); }
.tcs__stock--1::before { background: var(--tc-stock-ok); }
.tcs__stock--2::before { background: var(--tc-warning); }

/* Fuß */
.tcs a.tcs__all {
	justify-content: center; gap: var(--tc-space-2); margin-top: var(--tc-space-3); padding: var(--tc-space-3);
	border: 1px solid var(--tc-line); font-family: var(--tc-font-body); font-size: var(--tc-size-ui); line-height: var(--tc-lh-ui); font-weight: 600; letter-spacing: 0; text-transform: none; }
.tcs a.tcs__all:hover, .tcs a.tcs__all.is-active { background: var(--tc-ink); border-color: var(--tc-ink); color: #fff; box-shadow: none; }
.tcs__foot {
	display: flex; justify-content: space-between; align-items: center; gap: var(--tc-space-4);
	margin-top: var(--tc-space-3); padding: var(--tc-space-3) var(--tc-space-2) 0; border-top: 1px solid var(--tc-line); color: var(--tc-ink-muted); font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__keys kbd { margin: 0 2px; }
.tcs__hint, .tcs__none { padding: var(--tc-space-4) var(--tc-space-2); color: var(--tc-ink-muted); font-family: var(--tc-font-body); font-size: var(--tc-size-ui); line-height: var(--tc-lh-ui); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs__none { margin-bottom: var(--tc-space-2); border-bottom: 1px solid var(--tc-line); }
.tcs__none strong { display: block; margin-bottom: var(--tc-space-2); color: var(--tc-ink); font-family: var(--tc-font-display); font-size: var(--tc-size-title); line-height: var(--tc-lh-title); font-weight: 600; letter-spacing: 0; text-transform: none; }
.tcs__none p { margin: 0; line-height: 1.55; }
.tcs__none a { color: var(--tc-accent); white-space: nowrap; }

/* ---------- Mobil: Vollbild ---------- */
html.tcs-lock, html.tcs-lock body { overflow: hidden; }
.tcs--modal {
	position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column;
	width: auto; background: var(--tc-surface);
}
.tcs--modal .tcs__form {
	flex: none; height: 56px; padding: 0 var(--tc-space-3) 0 var(--tc-space-2);
	border: 0; border-bottom: 1px solid var(--tc-line); border-radius: 0; background: var(--tc-surface); box-shadow: none;
}
.tcs--modal .tcs__form:focus-within { box-shadow: none; border-color: var(--tc-line); }
.tcs--modal .tcs__icon, .tcs--modal .tcs__kbd, .tcs--modal .tcs__keys { display: none; }
.tcs--modal .tcs__back { width: 40px; height: 40px; color: var(--tc-ink); }
.tcs--modal .tcs__clear { width: 40px; height: 40px; }
/* 16px verhindert das automatische Hineinzoomen von iOS beim Fokussieren. */
.tcs--modal .tcs__input { font-size: 16px; }
.tcs--modal .tcs__panel {
	position: static; flex: 1; width: auto; max-height: none;
	padding: var(--tc-space-4) var(--tc-space-3) calc(var(--tc-space-6) + env(safe-area-inset-bottom));
	border: 0; border-radius: 0; box-shadow: none; animation: none;
}
.tcs--modal .tcs__cols--split { display: flex; flex-direction: column-reverse; gap: var(--tc-space-5); }
.tcs--modal .tcs__prod { padding: var(--tc-space-3) var(--tc-space-1); border-bottom: 1px solid var(--tc-line); border-radius: 0; }
.tcs--modal .tcs__term { min-height: 44px; }
.tcs--modal .tcs__foot { justify-content: center; }

@media (max-width: 991px) {
	.tcs__kbd { display: none; }
	.tcs__cols--split { grid-template-columns: 200px minmax(0, 1fr); gap: var(--tc-space-4); }
}

/* ---------- Mobil (≤ 767 px, Vollbild-Overlay): Trefferzeile „Suche Mobil A" ----------
   Bild 56 px | Kicker = Hersteller (neutral) · Titel (bis 2 Zeilen, volle Restbreite) · Preis, Streichpreis, Lager in EINER Zeile. */
.tcs--modal .tcs__prod { align-items: flex-start; }
.tcs--modal .tcs__pbody { gap: 2px; }
.tcs--modal .tcs__pmeta { color: var(--tc-ink-muted); font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs--modal .tcs__ptitle { font-family: var(--tc-font-body); font-size: var(--tc-size-ui); line-height: var(--tc-lh-ui); font-weight: 600; letter-spacing: 0; text-transform: none; }
.tcs--modal .tcs__psku { font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }
.tcs--modal .tcs__pline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--tc-space-2); }
.tcs--modal .tcs__pline .tcs__price {
	display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 6px; font-family: var(--tc-font-body); font-size: var(--tc-size-ui); line-height: var(--tc-lh-ui); font-weight: 600; letter-spacing: 0; text-transform: none; }
.tcs--modal .tcs__pline .tcs__price del { margin-right: 0; }
.tcs--modal .tcs__pline .tcs__stock { margin-left: auto; font-family: var(--tc-font-body); font-size: var(--tc-size-meta); line-height: var(--tc-lh-meta); font-weight: 400; letter-spacing: 0; text-transform: none; }