/* =============================================
   KI-Suche – Sparkle Toggle im Suchfeld (Homepage)
   ============================================= */

/* Sparkle-Button rechts im Suchfeld */
.kz-ai-field-btn {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: none;
	border-radius: 10px;
	background: transparent;
	cursor: pointer;
	transition: background 0.2s;
	z-index: 2;
}

.kz-ai-field-btn svg {
	width: 26px;
	height: 26px;
	fill: #9ca3af;
	transition: fill 0.2s, transform 0.15s;
	pointer-events: none;
}

.kz-ai-field-btn:hover {
	background: rgba(124, 58, 237, 0.08);
}

.kz-ai-field-btn:hover svg {
	fill: #7c3aed;
	transform: scale(1.15);
}

/* Hover-Tooltip (vor dem Klick) */
.kz-ai-field-btn::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 10px);
	right: 0;
	background: #1f1f2e;
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	padding: 7px 11px;
	border-radius: 8px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
	box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

/* Kleines Dreieck */
.kz-ai-field-btn::before {
	content: '';
	position: absolute;
	bottom: calc(100% + 4px);
	right: 12px;
	border: 6px solid transparent;
	border-top-color: #1f1f2e;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.kz-ai-field-btn:hover::after,
.kz-ai-field-btn:hover::before {
	opacity: 1;
	transform: translateY(0);
}

/* Aktiv-Zustand */
.kz-ai-field-btn--active {
	background: rgba(124, 58, 237, 0.1);
	animation: kz-sparkle-in 0.25s ease;
}

.kz-ai-field-btn--active svg {
	fill: #7c3aed;
}

@keyframes kz-sparkle-in {
	0%   { transform: translateY(-50%) scale(1); }
	50%  { transform: translateY(-50%) scale(1.2); }
	100% { transform: translateY(-50%) scale(1); }
}

/* Etwas Platz damit Text nicht hinter Icon verschwindet */
.hp-form__field--search input.hp-field--search {
	padding-right: 54px !important;
}

/* Submit-Button wenn KI aktiv */
.kz-ai-submit--active {
	background: #7c3aed !important;
	border-color: #7c3aed !important;
}

/* =============================================
   KI-Suche – Ergebnisseite (/ki-suche/)
   ============================================= */

.kz-ai-search-page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 16px 48px;
}

.kz-ai-search-page__header {
	margin-bottom: 28px;
}

/* Badge + Zurück-Link in einer Zeile */
.kz-ai-search-top {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}

/* Badge */
.kz-ai-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	background: #ede9fe;
	color: #7c3aed;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 700;
}

.kz-ai-badge svg {
	width: 13px;
	height: 13px;
	fill: #7c3aed;
}


/* Suchfeld auf /ki-suche/ – Button-Farbe + disabled-Zustand */
.kz-ai-search-form .hp-field--submit {
	background: #7c3aed !important;
	border-color: #7c3aed !important;
	color: #fff !important;
}

.kz-ai-search-form .hp-field--submit:hover {
	background: #6d28d9 !important;
	border-color: #6d28d9 !important;
}

.kz-ai-search-form .hp-field--submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* =============================================
   KI-Suche – Gleiche Kartenhöhen im Grid
   ============================================= */

.kz-ai-search-page .hp-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.kz-ai-search-page .hp-grid__item {
	display: flex;
}

.kz-ai-search-page .hp-listing--view-block {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.kz-ai-search-page .hp-listing--view-block .hp-listing__content {
	flex: 1;
}

/* Bild-Container: festes 4:3 Seitenverhältnis → kein Hochformat-Aufblähen */
.kz-ai-search-page .hp-listing__image {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.kz-ai-search-page .hp-listing__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Sektionen ──────────────────────────────────────────────────────────────── */

/* Farbvariablen je Relevanz-Level */
.kz-ai-section--best   { --sec-color: #16a34a; --sec-bg: #f0fdf4; --sec-count-bg: #dcfce7; --sec-count-fg: #15803d; }
.kz-ai-section--good   { --sec-color: #2563eb; --sec-bg: #eff6ff; --sec-count-bg: #dbeafe; --sec-count-fg: #1d4ed8; }
.kz-ai-section--similar{ --sec-color: #9ca3af; --sec-bg: #f9fafb; --sec-count-bg: #f3f4f6; --sec-count-fg: #6b7280; }
.kz-ai-section--single { --sec-color: #7c3aed; --sec-bg: #faf5ff; --sec-count-bg: #ede9fe; --sec-count-fg: #6d28d9; }

.kz-ai-section {
	margin-bottom: 56px;
}

.kz-ai-section__header {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--sec-bg);
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 22px;
}

/* Farbiger Akzentbalken links */
.kz-ai-section__accent {
	width: 4px;
	min-width: 4px;
	height: 36px;
	background: var(--sec-color);
	border-radius: 2px;
}

.kz-ai-section__title-group {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kz-ai-section__label {
	font-size: 15px;
	font-weight: 800;
	color: #111827;
	line-height: 1.2;
}

.kz-ai-section__subtitle {
	font-size: 12px;
	color: #6b7280;
	font-weight: 400;
}

.kz-ai-section__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 26px;
	padding: 0 10px;
	background: var(--sec-count-bg);
	color: var(--sec-count-fg);
	border-radius: 13px;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}

/* ── Match Score Bar ─────────────────────────────────────────────────────────── */

.kz-match-score {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #f3f4f6;
}

.kz-match-score__title {
	font-size: 11px;
	font-weight: 600;
	color: #9ca3af;
	white-space: nowrap;
}

.kz-match-score__track {
	flex: 1;
	height: 5px;
	background: #e5e7eb;
	border-radius: 3px;
	overflow: hidden;
}

.kz-match-score__fill {
	height: 100%;
	border-radius: 3px;
}

.kz-match-score__label {
	font-size: 11px;
	font-weight: 700;
	color: #9ca3af;
	min-width: 34px;
	text-align: right;
}

/* Ergebnis-Info */
.kz-ai-results-info {
	font-size: 14px;
	color: #6b7280;
	margin-bottom: 24px;
}

/* Lade-Spinner */
.kz-ai-loader {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 40px 0;
	font-size: 15px;
	color: #6b7280;
}

.kz-ai-loader__spinner {
	width: 22px;
	height: 22px;
	border: 3px solid #e5e7eb;
	border-top-color: #7c3aed;
	border-radius: 50%;
	animation: kz-spin 0.7s linear infinite;
}

@keyframes kz-spin {
	to { transform: rotate(360deg); }
}

/* Keine Ergebnisse */
.kz-ai-no-results {
	padding: 40px 0;
	font-size: 15px;
	color: #6b7280;
}

/* Fehlermeldung */
.kz-ai-error {
	padding: 16px;
	background: #fef2f2;
	border-left: 4px solid #dc2626;
	border-radius: 6px;
	color: #dc2626;
	font-size: 14px;
}

/* Geocoder / Standort-Suchfeld Hintergrund */
.mapboxgl-ctrl-geocoder {
	background-color: #f5f4d7 !important;
}