/* FAQ Chatbot: schmales Suchfeld ([brita_chatbot_suchfeld]), gedacht fuer eine dunkle Kopfzeile.
   Fuellt die Breite des umgebenden Elements; Platzierung legt das Theme oder der Builder fest.
   Farben ueber Custom Properties anpassbar. */

.brita-searchfield, .brita-searchfield * { box-sizing: border-box; }

.brita-searchfield {
	--brita-sf-bg: rgba(40,64,45,.94);
	--brita-sf-bg-focus: #2f4a34;
	--brita-sf-text: #fff;
	--brita-sf-placeholder: rgba(255,255,255,.88);
	--brita-sf-border: rgba(255,255,255,.5);
	--brita-sf-accent: #f4e437;
	display: flex; align-items: center; width: 100%; height: 26px; margin: 0; padding: 0 4px 0 12px;
	background: var(--brita-sf-bg); border: 1px solid var(--brita-sf-border); border-radius: 13px;
	box-shadow: 0 1px 6px rgba(0,0,0,.25);
	transition: background .15s, border-color .15s, box-shadow .15s;
}
.brita-searchfield:focus-within {
	background: var(--brita-sf-bg-focus); border-color: var(--brita-sf-accent);
	box-shadow: 0 0 0 2px rgba(244,228,55,.35);
}
.brita-searchfield .brita-searchfield__label {
	position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.brita-searchfield input.brita-searchfield__input[type="search"] {
	flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; font: inherit; font-size: 13px; line-height: 1;
	color: var(--brita-sf-text); background: transparent; border: 0; border-radius: 0; box-shadow: none; outline: 0;
	-webkit-appearance: none; appearance: none;
}
.brita-searchfield input.brita-searchfield__input[type="search"]::-webkit-search-cancel-button { display: none; }
.brita-searchfield input.brita-searchfield__input::placeholder { color: var(--brita-sf-placeholder); opacity: 1; }
.brita-searchfield .brita-searchfield__button {
	display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; margin: 0; padding: 0;
	color: var(--brita-sf-text); background: transparent; border: 0; border-radius: 50%; box-shadow: none; cursor: pointer;
}
.brita-searchfield .brita-searchfield__button:hover,
.brita-searchfield .brita-searchfield__button:focus-visible {
	color: var(--brita-sf-bg-focus); background: var(--brita-sf-accent); outline: 0;
}
.brita-searchfield .brita-searchfield__button svg { width: 14px; height: 14px; }

@media (max-width: 980px) {
	.brita-searchfield { height: 32px; border-radius: 16px; padding-left: 14px; box-shadow: none; background: var(--brita-sf-bg-mobile, rgba(255,255,255,.12)); }
	.brita-searchfield input.brita-searchfield__input[type="search"] { font-size: 16px; } /* verhindert den Zoom auf iOS */
	.brita-searchfield .brita-searchfield__button { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .brita-searchfield { transition: none; } }
@media (forced-colors: active) {
	.brita-searchfield:focus-within, .brita-searchfield .brita-searchfield__button:focus-visible { outline: 2px solid Highlight; outline-offset: 1px; }
}