/* tsf Live Search 1.0.0
 * Farben: ausschließlich die Elementor-Globalfarben von tsfct.de
 * Schriftgrößen: wie Elementor-Kit (Desktop vw, Mobil ≤ 767px in px)
 */

@property --tsfls-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

.tsfls {
	/* Farben (Elementor Global Colors mit Fallback) */
	--p: var(--e-global-color-primary, #00C185);
	--w: var(--e-global-color-secondary, #FFFFFF);
	--t: var(--e-global-color-text, #1D2F49);
	--a: var(--e-global-color-accent, #F0F5F7);

	/* abgeleitet – nur Mischungen der vier Farben */
	--muted: color-mix(in srgb, var(--t) 68%, var(--w));
	--placeholder: color-mix(in srgb, var(--t) 38%, transparent);
	--line: color-mix(in srgb, var(--t) 10%, var(--w));
	--tint: color-mix(in srgb, var(--p) 14%, var(--w));
	--mark: color-mix(in srgb, var(--p) 28%, transparent);
	--surface: var(--w);                              /* Feld, Overlay, Chips */
	--hover: color-mix(in srgb, var(--t) 6%, var(--w));
	--field-text: var(--t);
	--on-p: var(--t);                                 /* Schrift/Icons auf Grün */
	--shade: var(--t);                                /* Basis für Schatten (immer dunkel) */
	--shadow: 0 1.6em 3.2em -1.4em color-mix(in srgb, var(--shade) 40%, transparent);

	/* Schriftgrößen wie Website */
	--fs-body: 1vw;     /* Fließtext / Buttons */
	--fs-input: 1.5vw;  /* H4 */
	--fs-title: 2vw;    /* H3 */

	--ease: cubic-bezier(.2, .8, .2, 1);

	position: relative;
	color: var(--t);
	font-family: inherit;
	font-size: var(--fs-body);
	line-height: 1.5;
	text-align: left;
}

@media (max-width: 767px) {
	.tsfls {
		--fs-body: 16px;
		--fs-input: 22px;
		--fs-title: 22px;
	}
}

/* Dark Mode der Website (html.darkmode): Die Website tauscht die vier Elementor-Farben selbst.
   Hier nur die Rollen, die nicht 1:1 mittauschen: Schrift auf Grün und Schatten bleiben dunkel. */
html.darkmode .tsfls,
body.darkmode .tsfls {
	--on-p: var(--a);
	--shade: var(--a);
	--shadow: 0 1.6em 3.2em -1.2em color-mix(in srgb, var(--shade) 80%, transparent);
	--tint: color-mix(in srgb, var(--p) 22%, var(--w));
	--mark: color-mix(in srgb, var(--p) 40%, transparent);
}
/* Erzwingen ohne Website-Dark-Mode (Vorschau/Tests): class="tsfls--dark" */
.tsfls.tsfls--dark {
	--e-global-color-secondary: #1D2F49;
	--e-global-color-text: #F0F5F7;
	--e-global-color-accent: #111A34;
	--w: #1D2F49; --t: #F0F5F7; --a: #111A34;
	--on-p: var(--a);
	--shade: var(--a);
	--shadow: 0 1.6em 3.2em -1.2em color-mix(in srgb, var(--shade) 80%, transparent);
	--tint: color-mix(in srgb, var(--p) 22%, var(--w));
	--muted: color-mix(in srgb, var(--t) 68%, var(--w));
	--placeholder: color-mix(in srgb, var(--t) 38%, transparent);
	--line: color-mix(in srgb, var(--t) 10%, var(--w));
	--hover: color-mix(in srgb, var(--t) 6%, var(--w));
	--surface: var(--w);
	--field-text: var(--t);
	color: var(--t);
}

.tsfls *, .tsfls *::before, .tsfls *::after { box-sizing: border-box; }

.tsfls__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Breite: Desktop per Shortcode einstellbar (width="…", Standard 60 %), Mobil 100 % */
.tsfls__box,
.tsfls__chips,
.tsfls__title {
	width: var(--tsfls-width, 60%);
	max-width: 100%;
}
.tsfls--center .tsfls__box,
.tsfls--center .tsfls__chips,
.tsfls--center .tsfls__title { margin-inline: auto; }
.tsfls--center .tsfls__title,
.tsfls--center .tsfls__chips { text-align: center; }

@media (max-width: 767px) {
	.tsfls__box, .tsfls__chips, .tsfls__title { width: 100%; }
}

.tsfls__title {
	margin: 0 auto .6em;
	font-size: var(--fs-title);
	font-weight: bold;
	line-height: 1.15em;
	letter-spacing: -.01em;
}

/* ------------------------------------------------------------------
 * Suchfeld mit animiertem Verlaufsring
 * ---------------------------------------------------------------- */

.tsfls__box {
	position: relative;
	isolation: isolate;
	z-index: 20;
	font-size: var(--fs-input);
}
.tsfls.is-open .tsfls__box { z-index: 60; }

/* weicher Lichtschein hinter dem Feld */
.tsfls__box::before {
	content: "";
	position: absolute;
	inset: -40% -8%;
	z-index: -1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--p) 30%, transparent), transparent 75%);
	filter: blur(1.2em);
	opacity: .55;
	pointer-events: none;
	animation: tsfls-breathe 5.5s ease-in-out infinite;
}

.tsfls__ring {
	position: relative;
	padding: .14em;
	border-radius: 100px;
	background:
		conic-gradient(from var(--tsfls-angle),
			var(--p) 0deg, var(--a) 70deg, var(--w) 140deg,
			var(--p) 200deg, var(--a) 270deg, var(--p) 360deg);
	box-shadow: var(--shadow);
	animation: tsfls-spin 7s linear infinite;
	transition: box-shadow .35s var(--ease), transform .35s var(--ease);
}
.tsfls__ring:focus-within,
.tsfls.is-open .tsfls__ring {
	animation-duration: 2.6s;
	box-shadow:
		var(--shadow),
		0 0 0 .35em color-mix(in srgb, var(--p) 22%, transparent);
	transform: translateY(-2px);
}

.tsfls__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: .5em;
	min-height: 3.4em;
	padding: .35em .45em;
	border-radius: 100px;
	background: var(--surface);
}

.tsfls__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.5em;
	height: 2.5em;
	border-radius: 50%;
	background: var(--p);
	color: #FFFFFF;
	transition: transform .35s var(--ease);
}
.tsfls__icon svg { width: 48%; height: 48%; }
.tsfls__ring:focus-within .tsfls__icon { transform: rotate(-12deg) scale(1.06); }

.tsfls .tsfls__input,
.tsfls .tsfls__input:focus,
.tsfls .tsfls__input:hover {
	flex: 1;
	min-width: 0;
	height: 2.2em;
	margin: 0 !important;
	padding: 0 .1em !important;
	border: 0 !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--field-text) !important;
	font-family: inherit;
	font-size: 1em !important;
	font-weight: 500;
	line-height: 1.2;
	-webkit-appearance: none;
	appearance: none;
}
.tsfls__input::placeholder { color: var(--placeholder); opacity: 1; }
.tsfls__input::-webkit-search-cancel-button,
.tsfls__input::-webkit-search-decoration { display: none; }

/* animierter Platzhalter */
.tsfls__typer {
	position: absolute;
	left: 3.45em;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	overflow: hidden;
	color: var(--placeholder);
	white-space: nowrap;
	text-overflow: ellipsis;
	pointer-events: none;
}
.tsfls__typer[hidden] { display: none; }
.tsfls__typer b { color: var(--field-text); font-weight: bold; }
.tsfls__caret {
	display: inline-block;
	width: .09em;
	height: 1.05em;
	margin-left: .06em;
	vertical-align: -.15em;
	background: var(--p);
	animation: tsfls-blink 1s steps(1) infinite;
}

/* Trefferzahl im Feld */
.tsfls__count {
	flex: none;
	padding: .35em .9em;
	border-radius: 100px;
	background: var(--tint);
	color: var(--field-text);
	font-size: max(.6em, 12px);
	font-weight: bold;
	white-space: nowrap;
}
.tsfls__count[hidden] { display: none; }
.tsfls__count.is-pop { animation: tsfls-pop .45s var(--ease); }

/* Löschen-Button – setzt Kit-Buttonstile zurück */
.tsfls .tsfls__clear,
.tsfls .tsfls__clear:hover,
.tsfls .tsfls__clear:focus {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.2em;
	height: 2.2em;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--muted);
	font-size: 1em;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, transform .3s var(--ease);
}
.tsfls .tsfls__clear:hover { background: var(--hover); color: var(--field-text); transform: rotate(90deg); }
.tsfls .tsfls__clear:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.tsfls__clear svg { width: 50%; height: 50%; }
.tsfls__clear[hidden] { display: none !important; }

/* ------------------------------------------------------------------
 * Ergebnis-Overlay
 * ---------------------------------------------------------------- */

.tsfls__results {
	position: absolute;
	top: calc(100% + .7em);
	left: 0;
	right: 0;
	max-height: min(70vh, 40em);
	overflow: auto;
	overscroll-behavior: contain;
	padding: .6em;
	border: 1px solid var(--line);
	border-radius: 1.4em;
	background: var(--surface);
	box-shadow: var(--shadow), 0 .4em 1em -.6em color-mix(in srgb, var(--shade) 30%, transparent);
	font-size: var(--fs-body);
	transform-origin: top center;
	animation: tsfls-drop .4s var(--ease);
}
.tsfls__results[hidden] { display: none; }

.tsfls__heading {
	margin: .4em .9em .6em;
	color: var(--muted);
	font-size: 1em;
	font-weight: bold;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.tsfls__heading[hidden] { display: none; }

.tsfls .tsfls__list,
.tsfls .tsfls__chip-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.tsfls__list li {
	margin: 0;
	animation: tsfls-rise .45s var(--ease) both;
	animation-delay: calc(var(--i, 0) * 45ms);
}

.tsfls a.tsfls__row {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1em;
	padding: .9em 1em .9em 1.2em;
	border-radius: 1em;
	color: inherit;
	text-decoration: none;
	transition: background .2s ease;
}
.tsfls a.tsfls__row::before {
	content: "";
	position: absolute;
	left: .4em;
	top: 22%;
	bottom: 22%;
	width: .25em;
	border-radius: 100px;
	background: var(--p);
	transform: scaleY(0);
	transition: transform .3s var(--ease);
}
.tsfls a.tsfls__row:hover,
.tsfls a.tsfls__row[aria-selected="true"] { background: var(--hover); color: inherit; }
.tsfls a.tsfls__row:hover::before,
.tsfls a.tsfls__row[aria-selected="true"]::before { transform: scaleY(1); }
.tsfls a.tsfls__row:focus-visible { outline: 2px solid var(--p); outline-offset: -2px; }

.tsfls__row-body { flex: 1; min-width: 0; display: grid; gap: .2em; }
.tsfls__row-top { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .7em; }
.tsfls__row-title { font-weight: bold; line-height: 1.3; }
.tsfls__row-title mark {
	padding: 0 .08em;
	border-radius: .2em;
	background: var(--mark);
	color: inherit;
}
.tsfls__badge {
	padding: .15em .7em;
	border-radius: 100px;
	background: var(--tint);
	font-size: .8em;
	font-weight: bold;
	line-height: 1.5;
	white-space: nowrap;
}
.tsfls__row-desc { color: var(--muted); line-height: 1.45; }
.tsfls__row-via { color: var(--muted); font-size: .85em; font-style: italic; }

.tsfls__arrow {
	flex: none;
	display: grid;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	border-radius: 50%;
	border: .15em solid var(--line);
	color: var(--muted);
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .35s var(--ease);
}
.tsfls__arrow svg { width: 50%; height: 50%; }
.tsfls a.tsfls__row:hover .tsfls__arrow,
.tsfls a.tsfls__row[aria-selected="true"] .tsfls__arrow {
	border-color: var(--p);
	background: var(--p);
	color: var(--on-p);
	transform: translateX(.25em);
}

/* Keine Treffer */
.tsfls__empty {
	padding: 1.4em 1.4em 1.5em;
	text-align: center;
	animation: tsfls-rise .45s var(--ease) both;
}
.tsfls__empty[hidden] { display: none; }
.tsfls__empty p { margin: 0 0 .2em; color: var(--muted); }
.tsfls__empty .tsfls__empty-title { color: inherit; font-weight: bold; }
.tsfls__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; margin-top: 1em; }
.tsfls a.tsfls__btn {
	display: inline-flex;
	align-items: center;
	padding: .5em 1.2em;
	border: .2em solid var(--p);
	border-radius: 100px;
	background: var(--p);
	color: var(--on-p);
	font-weight: bold;
	text-decoration: none;
	transition: transform .25s var(--ease), background .2s ease;
}
.tsfls a.tsfls__btn:hover { transform: translateY(-2px); color: var(--on-p); }
.tsfls a.tsfls__btn--ghost { background: transparent; color: inherit; }
.tsfls a.tsfls__btn--ghost:hover { background: var(--p); color: var(--on-p); }

/* ------------------------------------------------------------------
 * Themen-Chips (ohne Eingabe)
 * ---------------------------------------------------------------- */

.tsfls__chips {
	position: relative;
	z-index: 1;
	margin-top: 1.6em;
	transition: opacity .3s ease, filter .3s ease;
}
/* Overlay offen → Chips treten zurück */
.tsfls.is-open .tsfls__chips {
	opacity: 0;
	filter: blur(2px);
	pointer-events: none;
}
.tsfls__chips .tsfls__heading { margin: 0 0 .8em; }

.tsfls .tsfls__chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: .6em;
}
.tsfls--center .tsfls__chip-list { justify-content: center; }
.tsfls__chip-list li { margin: 0; }

.tsfls a.tsfls__chip {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .5em 1em;
	border: .2em solid var(--w);
	border-radius: 100px;
	background: var(--w);
	color: var(--t);
	font-weight: bold;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 .5em 1.2em -.8em color-mix(in srgb, var(--shade) 40%, transparent);
	transition: background .25s ease, border-color .25s ease, color .25s ease, transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tsfls a.tsfls__chip::before {
	content: "";
	flex: none;
	width: .5em;
	height: .5em;
	border-radius: 50%;
	background: var(--p);
	transition: background .25s ease, transform .35s var(--ease);
}
.tsfls a.tsfls__chip:hover,
.tsfls a.tsfls__chip:focus-visible {
	border-color: var(--p);
	background: var(--p);
	color: var(--on-p);
	transform: translateY(-3px);
	box-shadow: 0 .9em 1.6em -.8em color-mix(in srgb, var(--p) 70%, transparent);
	outline: 0;
}
.tsfls a.tsfls__chip:hover::before,
.tsfls a.tsfls__chip:focus-visible::before { background: var(--w); transform: scale(1.3); }


/* ------------------------------------------------------------------
 * Einblenden beim Scrollen (nur mit JS)
 * ---------------------------------------------------------------- */

.tsfls.is-ready .tsfls__box,
.tsfls.is-ready .tsfls__title {
	opacity: 0;
	transform: translateY(1.2em) scale(.97);
	transition: opacity .8s var(--ease), transform .9s var(--ease);
}
.tsfls.is-ready .tsfls__chip-list li {
	opacity: 0;
	transform: translateY(.8em) scale(.9);
	transition: opacity .5s var(--ease), transform .6s var(--ease);
	transition-delay: calc(.35s + var(--i, 0) * 70ms);
}
.tsfls.is-ready .tsfls__chips .tsfls__heading {
	opacity: 0;
	transition: opacity .6s ease .3s;
}
.tsfls.is-visible .tsfls__box,
.tsfls.is-visible .tsfls__title,
.tsfls.is-visible .tsfls__chip-list li,
.tsfls.is-visible .tsfls__chips .tsfls__heading {
	opacity: 1;
	transform: none;
}

/* ------------------------------------------------------------------
 * Animationen
 * ---------------------------------------------------------------- */

@keyframes tsfls-spin { to { --tsfls-angle: 360deg; } }
@keyframes tsfls-breathe { 0%, 100% { opacity: .35; transform: scale(.96); } 50% { opacity: .7; transform: scale(1.03); } }
@keyframes tsfls-blink { 50% { opacity: 0; } }
@keyframes tsfls-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tsfls-drop { from { opacity: 0; transform: translateY(-.6em) scale(.98); } }
@keyframes tsfls-rise { from { opacity: 0; transform: translateY(.7em); } }

@media (max-width: 767px) {
	.tsfls__field { min-height: 2.9em; padding: .3em; gap: .35em; }
	.tsfls__icon { width: 2.1em; height: 2.1em; }
	.tsfls__typer { left: 2.75em; }
	.tsfls__pre { display: none; }

	/* Chips kompakt: einzeilig, max. 4 */
	.tsfls__chips { margin-top: 1.2em; }
	.tsfls .tsfls__chip-list { gap: .5em; }
	.tsfls__chip-list li { max-width: 100%; }
	.tsfls__chip-list li:nth-child(n+5) { display: none; }
	.tsfls a.tsfls__chip {
		max-width: 100%;
		padding: .45em .9em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.tsfls__count { display: none !important; }
	.tsfls a.tsfls__row { padding: .8em .7em .8em 1em; gap: .7em; }
	.tsfls__arrow { width: 2em; height: 2em; }
	.tsfls__row-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
	.tsfls__results { max-height: 65vh; }
}

@media (prefers-reduced-motion: reduce) {
	.tsfls *, .tsfls *::before, .tsfls *::after {
		animation: none !important;
		transition: none !important;
	}
	.tsfls.is-ready .tsfls__box,
	.tsfls.is-ready .tsfls__title,
	.tsfls.is-ready .tsfls__chip-list li,
	.tsfls.is-ready .tsfls__chips .tsfls__heading { opacity: 1; transform: none; }
}