/**
 * agenic Komponenten-CSS – Suche-Palette (Cmd+K).
 *
 * Figma-Quelle: `search-palette` (QS · Suche-Palette (Cmd+K), Seite 0.5,
 * Arbeitsstand 21.08.2026 — Regal-Ort/Ebene offen, Entscheidung Vincent folgt).
 * Baut auf: search (681:219), pill (647:1670), search-result-item.
 *
 * Overlay über <dialog>: ::backdrop = Interaction/overlay-scrim +
 * effects/backdrop-blur. Öffnen: duration/s + easing/standard, Lift aus
 * motion/distance/shift. prefers-reduced-motion schaltet alles ab.
 *
 * Kit-Falle beachtet: Grundblöcke aller <button>/<a> auf Doppelklasse
 * (.ag-search-palette .ag-search-palette__…), kein !important.
 */

.ag-search-palette,
.ag-search-palette * {
	box-sizing: border-box; /* nicht vom Theme-Reset abhängen (Pilot-Lehre) */
}

/* Ohne sichtbaren Auslöser (Header-Kopplung): Widget komplett aus dem
   Layoutfluss — als Flex-Kind erzeugte allein der Container-Gap einen
   Leerraum unter dem Header (Befund Vincent 21.08.2026). display:contents
   auf Wrapper, Container und Root; der geschlossene Dialog ist display:none,
   der offene liegt im Top-Layer. Nur im Frontend — im Editor bleibt das
   Widget greifbar. */
body:not(.elementor-editor-active) .elementor-widget-ag_search_palette.ag-search-palette--ohne-trigger,
body:not(.elementor-editor-active) .elementor-widget-ag_search_palette.ag-search-palette--ohne-trigger > .elementor-widget-container,
body:not(.elementor-editor-active) .ag-search-palette--ohne-trigger .ag-search-palette {
	display: contents;
}

.ag-search-palette {
	--ag-search-palette-breite: 640px;                            /* Figma: Set-Breite */
	--ag-search-palette-bg: var(--color-surface-lightest);        /* Figma Surface/lightest */
	--ag-search-palette-radius: var(--radius-m);                  /* Figma Values/radius/m = 16 */
	--ag-search-palette-scrim: var(--color-interaction-overlay-scrim); /* Figma Interaction/overlay-scrim */
	--ag-search-palette-tint: var(--color-interaction-hover-tint);     /* Figma Interaction/hover-tint */
	--ag-search-palette-schatten: 0 8px 24px rgba(24, 24, 30, .08); /* tmp — kein Schatten-Token, Finding F16 (wie tabs-bar-pill) */

	display: inline-block;
	font-family: var(--font-sans);
}

/* ── Auslöser (Lupe im Header oder frei platziert) ─────────────────────── */

.ag-search-palette .ag-search-palette__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-s);                                        /* Figma spacing/s = 8 */
	padding: var(--spacing-s) var(--spacing-ms);                  /* Figma: 8 / 12 */
	background: transparent;
	background-image: none;                                       /* Kit-button setzt Fusion-Verlauf */
	border: var(--field-border-width) solid var(--color-border-hairline); /* Figma Border--subtle */
	border-radius: var(--field-radius-pill);                      /* Figma Form/field-radius--pill */
	color: var(--color-text-standard);
	font-family: var(--font-sans);
	font-size: var(--fs-200);
	font-weight: var(--fw-light);
	cursor: pointer;
}

.ag-search-palette .ag-search-palette__trigger:hover {
	border-color: var(--color-field-border-hover);                /* Figma Form/field-border--hover */
}

.ag-search-palette__trigger-icon {
	display: inline-block;
	width: var(--icon-size-s, 16px);                              /* Figma Icon/size-s */
	height: var(--icon-size-s, 16px);
}

.ag-search-palette__kuerzel {
	font-family: var(--font-mono, "DM Mono", ui-monospace, monospace); /* Figma Code/S */
	font-size: var(--fs-100);
	color: var(--color-text-grey);                                /* Figma Text/grey */
}

/* ── Overlay: Dialog + Scrim ───────────────────────────────────────────── */

.ag-search-palette__dialog {
	width: min(var(--ag-search-palette-breite), 92vw);
	max-width: none;
	max-height: none;
	margin: 12vh auto auto;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

/* Öffnen UND Schließen weich: Transitions mit @starting-style und
   allow-discrete (Feinschliff 21.08., Feedback Vincent — die frühere
   350-ms-Keyframe-Fassung wirkte träge und schloss hart). 150 ms folgt dem
   Interaktions-Grundsatz „nichts über 200 ms" (interaktion.css). Browser
   ohne @starting-style zeigen die Palette schlicht ohne Übergang. */
.ag-search-palette__dialog {
	opacity: 0;
	transform: translateY(calc(-1 * var(--motion-distance-shift, 6px))) scale(.985);
	transition:
		opacity var(--motion-duration-xs) var(--motion-ease-standard),
		transform var(--motion-duration-xs) var(--motion-ease-standard),
		overlay var(--motion-duration-xs) allow-discrete,
		display var(--motion-duration-xs) allow-discrete;
}

.ag-search-palette__dialog[open] {
	opacity: 1;
	transform: none;
}

.ag-search-palette__dialog::backdrop {
	background: var(--ag-search-palette-scrim);
	-webkit-backdrop-filter: blur(var(--effect-backdrop-blur));   /* Figma effects/backdrop-blur = 8 */
	backdrop-filter: blur(var(--effect-backdrop-blur));
	opacity: 0;
	transition:
		opacity var(--motion-duration-xs) var(--motion-ease-standard),
		overlay var(--motion-duration-xs) allow-discrete,
		display var(--motion-duration-xs) allow-discrete;
}

.ag-search-palette__dialog[open]::backdrop {
	opacity: 1;
}

/* Zuklapp-Phase des Morphs: Scrim blendet parallel zum schrumpfenden
   Panel aus (Klasse setzt das JS, solange [open] noch steht) */
.ag-search-palette__dialog[open].is-zu::backdrop {
	opacity: 0;
}

/* Aufklapp-Morph als ANIMATION, nicht Transition: Der Dialog wird per
   showModal im selben Frame erst sichtbar, und Transitions starten auf
   frisch gerenderten Elementen nicht (gemessen 21.08.2026 — computed
   blieb auf der Startmatrix stehen). Keyframes laufen zuverlässig; die
   Startgeometrie liefert das JS als CSS-Variable aus der Lupen-Messung. */
.ag-search-palette__panel.is-morph-hin {
	animation: ag-search-palette-morph var(--motion-duration-s) var(--motion-ease-standard) both;
}

@keyframes ag-search-palette-morph {
	from {
		transform: var(--ag-sp-morph-transform, none);
		border-radius: var(--field-radius-pill);
	}
}

/* Zuklappen symmetrisch — ebenfalls als Animation (gleicher Grund) */
.ag-search-palette__panel.is-morph-zu {
	animation: ag-search-palette-morph-zu var(--motion-duration-s) var(--motion-ease-standard) both;
}

@keyframes ag-search-palette-morph-zu {
	to {
		transform: var(--ag-sp-morph-transform, none);
		border-radius: var(--field-radius-pill);
		opacity: .4;
	}
}

@starting-style {
	.ag-search-palette__dialog[open] {
		opacity: 0;
		transform: translateY(calc(-1 * var(--motion-distance-shift, 6px))) scale(.985);
	}

	.ag-search-palette__dialog[open]::backdrop {
		opacity: 0;
	}
}

/* ── Gestaffelter Einzug (Feedback Vincent 21.08.: „wie im Beispiel") ────
   Kopf sofort, Filter-Pills nacheinander, Trefferzeilen nacheinander, Fuß
   zuletzt. Zeiten aus den Figma-Staggern stagger/s 60 · stagger/m 120;
   Weg aus distance/shift. Läuft bei jedem Öffnen — und die Trefferzeilen
   zusätzlich bei jedem Neu-Rendern der Livesuche, weil frisch eingefügte
   Elemente ihre Animation von selbst starten. */
@keyframes ag-search-palette-rein {
	from {
		opacity: 0;
		transform: translateY(var(--motion-distance-shift, 6px));
	}
}

.ag-search-palette__dialog[open] .ag-search-palette__kopf,
.ag-search-palette__dialog[open] .ag-search-palette__filter-pill,
.ag-search-palette__dialog[open] .ag-search-palette__zahl,
.ag-search-palette__dialog[open] .ag-search-palette__gruppe,
.ag-search-palette__dialog[open] .ag-search-palette__fuss {
	animation: ag-search-palette-rein var(--motion-duration-s) var(--motion-ease-standard) both;
}

.ag-search-palette__dialog[open] .ag-search-palette__filter-pill:nth-child(1) { animation-delay: var(--motion-stagger-s, 60ms); }
.ag-search-palette__dialog[open] .ag-search-palette__filter-pill:nth-child(2) { animation-delay: calc(2 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__dialog[open] .ag-search-palette__filter-pill:nth-child(3) { animation-delay: calc(3 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__dialog[open] .ag-search-palette__filter-pill:nth-child(4) { animation-delay: calc(4 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__dialog[open] .ag-search-palette__zahl { animation-delay: calc(4 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__dialog[open] .ag-search-palette__gruppe { animation-delay: calc(2 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__dialog[open] .ag-search-palette__fuss { animation-delay: calc(2 * var(--motion-stagger-m, 120ms)); }

.ag-search-palette__liste .ag-search-palette__treffer {
	animation: ag-search-palette-rein var(--motion-duration-s) var(--motion-ease-standard) both;
}

.ag-search-palette__liste .ag-search-palette__treffer:nth-child(1) { animation-delay: calc(1 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__liste .ag-search-palette__treffer:nth-child(2) { animation-delay: calc(2 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__liste .ag-search-palette__treffer:nth-child(3) { animation-delay: calc(3 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__liste .ag-search-palette__treffer:nth-child(4) { animation-delay: calc(4 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__liste .ag-search-palette__treffer:nth-child(5) { animation-delay: calc(5 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__liste .ag-search-palette__treffer:nth-child(6) { animation-delay: calc(6 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__liste .ag-search-palette__treffer:nth-child(7) { animation-delay: calc(7 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__liste .ag-search-palette__treffer:nth-child(8) { animation-delay: calc(8 * var(--motion-stagger-s, 60ms)); }
.ag-search-palette__liste .ag-search-palette__treffer:nth-child(n+9) { animation-delay: calc(8 * var(--motion-stagger-s, 60ms)); }

/* ── Panel ─────────────────────────────────────────────────────────────── */

.ag-search-palette__panel {
	display: flex;
	flex-direction: column;
	background: var(--ag-search-palette-bg);
	border-radius: var(--ag-search-palette-radius);
	box-shadow: var(--ag-search-palette-schatten);
	overflow: hidden;
}

/* ── Kopf: Suchfeld ────────────────────────────────────────────────────── */

.ag-search-palette__kopf {
	display: flex;
	align-items: center;
	gap: var(--spacing-ms);                                       /* Figma spacing/ms = 12 */
	padding: var(--spacing-m);                                    /* Figma spacing/m = 16 */
	border-bottom: var(--field-border-width) solid var(--color-border-hairline); /* Figma Border--subtle */
}

.ag-search-palette__feld {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--spacing-ms);
	height: var(--field-height-m);                                /* Figma Form/field-height-m = 48 */
	padding: 0 var(--spacing-s) 0 var(--spacing-ml);              /* Figma search: 20/8 → Leiter s/ml */
	background: var(--color-field-bg);                            /* Figma Form/field-bg */
	border: var(--field-border-width) solid var(--color-field-border);
	border-radius: var(--field-radius-pill);
	transition: border-color var(--motion-duration-xs) var(--motion-ease-standard);
}

.ag-search-palette__feld:focus-within {
	border-color: var(--color-interaction-focus-ring);            /* Figma Form/field-border--focus = Interaction/focus-ring */
	/* Optisch 2px (field-border-width-focus), aber ohne Breitensprung:
	   der innere Ring kommt als Schatten, das Layout bleibt ruhig. */
	box-shadow: inset 0 0 0 var(--field-border-width) var(--color-interaction-focus-ring);
}

.ag-search-palette__feld-icon {
	flex: none;
	width: var(--icon-size-s, 16px);
	height: var(--icon-size-s, 16px);
	color: var(--color-text-grey);                                /* Figma Icon/border */
}

/* Kit-Falle, dritter Fall (nach `a` und `button`): Theme/Kit stylen `input`
   global mit Rahmen, Radius, Padding und Fokus-Optik — das erzeugte ein
   zweites Kästchen IN der Pille (Befund Vincent, 21.08.2026, Screenshot).
   Deshalb Grundblock UND :focus auf Doppelklasse, vollständiger Reset. */
.ag-search-palette .ag-search-palette__input,
.ag-search-palette .ag-search-palette__input:focus,
.ag-search-palette .ag-search-palette__input:focus-visible {
	flex: 1;
	min-width: 0;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	background-image: none;
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	color: var(--color-text-standard);
	font-family: var(--font-sans);
	font-size: var(--fs-300);                                     /* Figma Copy/M */
	font-weight: var(--fw-light);
	line-height: 1.4;
}

.ag-search-palette__input::placeholder {
	color: var(--color-text-placeholder);                         /* Figma Text/placeholder */
}

.ag-search-palette__input::-webkit-search-cancel-button {
	display: none; /* eigene Leeren-Logik, kein Browser-Kreuz */
}

.ag-search-palette .ag-search-palette__schliessen {
	flex: none;
	padding: var(--spacing-xs) var(--spacing-s);
	background: transparent;
	background-image: none;
	border: var(--field-border-width) solid var(--color-border-subtle);
	border-radius: var(--radius-xs);                              /* Figma Values/radius/xs = 8 */
	color: var(--color-text-grey);
	font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
	font-size: var(--fs-100);
	cursor: pointer;
}

/* ── Filterzeile ───────────────────────────────────────────────────────── */

.ag-search-palette__filter {
	display: flex;
	align-items: center;
	gap: var(--spacing-s);
	padding: var(--spacing-s) var(--spacing-m);
	border-bottom: var(--field-border-width) solid var(--color-border-hairline); /* Figma Border--subtle */
}

.ag-search-palette .ag-search-palette__filter-pill {
	padding: var(--spacing-xs) var(--spacing-s);                  /* wie ag-pill */
	background: transparent;
	background-image: none;
	border: 0.5px solid var(--color-border);                      /* Figma Border (wie ag-pill) */
	border-radius: var(--radius-m);
	color: var(--color-text-standard);
	font-family: var(--font-sans);
	font-size: var(--fs-100);
	font-weight: var(--fw-light);
	cursor: pointer;
	transition: background-color var(--motion-duration-xs) var(--motion-ease-standard);
}

/* Aktiver Filter: monochrome Umkehrung (CSS-State, aria-pressed führt) */
.ag-search-palette .ag-search-palette__filter-pill.is-aktiv {
	background: var(--color-text-standard);
	border-color: var(--color-text-standard);
	color: var(--color-text-inverse);
}

.ag-search-palette__zahl {
	margin-left: auto;
	color: var(--color-text-grey);
	font-size: var(--fs-100);
}

/* ── Trefferliste ──────────────────────────────────────────────────────── */

.ag-search-palette__liste {
	margin: 0;
	padding: var(--spacing-s);
	list-style: none;
	max-height: min(50vh, 400px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ag-search-palette__gruppe {
	margin: 0;
	padding: var(--spacing-s) var(--spacing-ms) var(--spacing-xs);
	color: var(--color-text-grey);
	font-size: var(--fs-100);
}

.ag-search-palette__treffer {
	border-radius: var(--radius-xs);
}

.ag-search-palette .ag-search-palette__treffer-link {
	display: flex;
	align-items: center;
	gap: var(--spacing-ms);
	padding: var(--spacing-s) var(--spacing-ms) var(--spacing-s) var(--spacing-s);
	border-radius: inherit;
	color: var(--color-text-standard);
	text-decoration: none;
}

.ag-search-palette .ag-search-palette__treffer-link:hover,
.ag-search-palette .ag-search-palette__treffer-link:focus-visible,
.ag-search-palette .ag-search-palette__treffer-link:visited {
	color: var(--color-text-standard);
}

.ag-search-palette__treffer.is-aktiv,
.ag-search-palette__treffer:hover {
	background: var(--ag-search-palette-tint);                    /* Figma Interaction/hover-tint */
}

/* Badge nutzt das Atom ag-pill (Klassen aus pill.css, Handle ag-pill) */
.ag-search-palette__treffer .ag-pill {
	flex: none;
}

.ag-search-palette__treffer-text {
	flex: 1;
	min-width: 0;
}

.ag-search-palette__titel {
	display: block;
	font-size: var(--fs-200);                                     /* Figma Copy/S */
	font-weight: var(--fw-light);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ag-search-palette__titel mark {
	background: transparent;
	color: var(--color-brand-primary);                            /* Treffer-Hervorhebung */
	font-weight: var(--fw-medium);
}

.ag-search-palette__meta {
	display: block;
	color: var(--color-text-grey);
	font-size: var(--fs-100);                                     /* Figma Copy/XS */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ag-search-palette__kbd {
	flex: none;
	color: var(--color-text-grey);
	font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
	font-size: var(--fs-150);
	opacity: 0;
}

.ag-search-palette__treffer.is-aktiv .ag-search-palette__kbd {
	opacity: 1;
}

/* ── Leer-Zustand ──────────────────────────────────────────────────────── */

.ag-search-palette__leer {
	margin: 0;
	padding: var(--spacing-m);
	color: var(--color-text-grey);
	font-size: var(--fs-200);
}

.ag-search-palette__leer[hidden],
.ag-search-palette__liste[hidden],
.ag-search-palette__gruppe[hidden] {
	display: none;
}

/* ── Fußzeile ──────────────────────────────────────────────────────────── */

.ag-search-palette__fuss {
	display: flex;
	gap: var(--spacing-m);
	padding: var(--spacing-s) var(--spacing-m);
	border-top: var(--field-border-width) solid var(--color-border-hairline); /* Figma Border--subtle */
	color: var(--color-text-grey);
	font-size: var(--fs-100);
}

.ag-search-palette__taste {
	font-family: var(--font-mono, "DM Mono", ui-monospace, monospace);
	font-size: var(--fs-100);
	color: var(--color-text-grey);
}

/* ── Mobil: Vollbild (Breakpoint --bp-md 768, TMP-Festschreibung A5) ───── */

@media (max-width: 767px) {
	.ag-search-palette__dialog {
		width: 100vw;
		height: 100dvh;
		margin: 0;
	}

	.ag-search-palette__panel {
		height: 100%;
		border-radius: 0;
	}

	.ag-search-palette__liste {
		max-height: none;
		flex: 1;
	}

	.ag-search-palette__kuerzel {
		display: none; /* Tastatur-Hinweis ohne Tastatur */
	}
}

/* ── Bewegung reduzieren ───────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.ag-search-palette__dialog,
	.ag-search-palette__dialog::backdrop {
		transition: none;
	}

	.ag-search-palette__dialog[open] .ag-search-palette__kopf,
	.ag-search-palette__dialog[open] .ag-search-palette__filter-pill,
	.ag-search-palette__dialog[open] .ag-search-palette__zahl,
	.ag-search-palette__dialog[open] .ag-search-palette__gruppe,
	.ag-search-palette__dialog[open] .ag-search-palette__fuss,
	.ag-search-palette__liste .ag-search-palette__treffer,
	.ag-search-palette__panel.is-morph-hin,
	.ag-search-palette__panel.is-morph-zu {
		animation: none;
	}

	.ag-search-palette__feld,
	.ag-search-palette .ag-search-palette__filter-pill {
		transition: none;
	}
}