/* =====================================================================
   Scharifi Suche – Treffer-Darstellung, Such-Popup, Header-Platz
   Farben aus dem Elementor-Designsystem (Kit): Navy #1B2A41 (Accent 1),
   Gold #AF8A49 (Accent 4), Creme #F4EFE8 (Accent 3), Linie #0000001A (Accent 7)
   ===================================================================== */

:root {
	--sch-navy: #1b2a41;
	--sch-gold: #af8a49;
	--sch-creme: #f4efe8;
	--sch-grau: #5b6272;
	--sch-linie: rgba(27, 42, 65, .12);
	--sch-ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* ---- Treffer (gemeinsam) ------------------------------------------ */
.sch-treffer {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	width: 100%;
	text-align: left;
}

.sch-treffer__typ {
	color: var(--sch-gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.sch-treffer__titel {
	color: var(--sch-navy);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	transition: color .15s ease;
}

.sch-treffer__text {
	color: var(--sch-grau);
	font-size: 13.5px;
	line-height: 1.5;
}

.sch-treffer__mark {
	background: transparent;
	border-bottom: 2px solid rgba(175, 138, 73, .55);
	color: inherit;
	font-weight: 700;
	padding: 0;
}

/* ---- Such-Popup (1495 + Übersetzungen): schwebende Karte ------------ */
.elementor-popup-modal .dialog-message {
	overflow: visible !important;
}

/* Öffnen: kräftiges ease-out, kurz (Elementor: fadeIn 200 ms ease) */
.elementor-popup-modal .dialog-widget-content {
	animation-duration: 180ms !important;
	animation-timing-function: var(--sch-ease-out) !important;
}

/* Innere Karte: alle vier Ecken rund (Elementor-Container hatte nur oben Radius) */
.elementor-popup-modal .elementor-element-1804b66 {
	border-radius: 24px !important;
	box-shadow: 0 24px 60px rgba(27, 42, 65, .18);
}

/* Leichter Blur hinter der Suchkarte. Nur Popups mit Suchwidget – Kontakt-, Termin- und
   Sidebar-Popup bleiben unberührt. */
.elementor-popup-modal:has(.elementor-widget-search) {
	background: rgba(27, 42, 65, .12) !important;
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* Suchfeld füllt die Karte (Elementor-Vorgabe „initial" hielt es bei 460 px). Kein Umbruch:
   mobil rutschte das Schließen-X sonst in eine zweite Zeile (390 px: y=88 statt 28). */
.elementor-popup-modal .elementor-element-1804b66 {
	flex-wrap: nowrap !important;
	gap: 10px !important;
}

.elementor-popup-modal .elementor-widget-search {
	flex: 1 1 0% !important;
	max-width: none !important;
	min-width: 0;
	width: auto !important;
}

.elementor-popup-modal .elementor-element-456c5e9 {
	flex: 0 0 auto !important;
}

/* Vorschläge unter dem leeren Suchfeld (per JS angehängt) */
.sch-suche-vorschlaege {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.sch-suche-vorschlaege[hidden] {
	display: none;
}

.sch-suche-vorschlag {
	background: #fff;
	border: 1px solid var(--sch-linie);
	border-radius: 999px;
	color: var(--sch-navy) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	padding: 8px 14px;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
	white-space: nowrap;
}

.sch-suche-vorschlag:focus,
.sch-suche-vorschlag:focus-visible {
	background: var(--sch-creme);
	border-color: var(--sch-navy);
	outline: none;
}

@media (hover: hover) and (pointer: fine) {
	.sch-suche-vorschlag:hover {
		background: var(--sch-creme);
		border-color: var(--sch-navy);
	}
}

@media (max-width: 767px) {
	.sch-suche-vorschlag {
		padding: 7px 12px;
	}
}

/* Fokus im Suchfeld: Rahmen statt Outline-Ring */
.elementor-popup-modal .e-search-input:focus,
.elementor-popup-modal .e-search-input:focus-visible {
	border-color: var(--sch-navy) !important;
	box-shadow: 0 0 0 3px rgba(27, 42, 65, .08);
	outline: none;
}

/* Trefferliste: nur sichtbar, wenn sie Inhalt hat (sonst blieb ein leerer Streifen) */
.elementor-popup-modal .elementor-widget-search .e-search-results-container {
	background: transparent;
	border: 0;
	padding: 0;
}

.elementor-popup-modal .elementor-widget-search .e-search-results-container:has(.e-loop-item, .e-search-nothing-found-message, .e-loop-nothing-found-message) {
	background: #fff !important;
	border: 1px solid var(--sch-linie);
	border-radius: 16px;
	box-shadow: 0 18px 48px rgba(27, 42, 65, .16);
	max-height: 400px;               /* ≈ 4 Treffer, Rest scrollt in der Liste */
	overflow: auto;
	overscroll-behavior: contain;
	padding: 4px 0;
}

@media (max-width: 767px) {
	.elementor-popup-modal .elementor-widget-search .e-search-results-container:has(.e-loop-item, .e-search-nothing-found-message, .e-loop-nothing-found-message) {
		max-height: calc(100dvh - 150px);
	}
}

/* Treffer-Zeile */
.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile {
	background: transparent !important;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	padding: 14px 16px !important;
	transition: background-color .15s ease, transform 120ms var(--sch-ease-out);
}

.e-search-results-list .e-loop-item:last-child .e-con.sch-treffer-zeile {
	border-bottom-width: 0 !important;
}

/* Tastaturfokus: Zeile hinterlegen statt Ring */
.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile:focus,
.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile:focus-visible {
	background-color: var(--sch-creme) !important;
	outline: none;
}

.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile:focus .sch-treffer__titel,
.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile:active .sch-treffer__titel {
	color: var(--sch-gold);
}

.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile:active {
	transform: scale(.98);
}

@media (hover: hover) and (pointer: fine) {
	.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile:hover {
		background-color: var(--sch-creme) !important;
	}
	.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile:hover .sch-treffer__titel {
		color: var(--sch-gold);
	}
}

/* Gestaffeltes Erscheinen der Treffer (nur beim Aufbau, blockiert nichts) */
.e-search-results-list .e-loop-item {
	animation: sch-treffer-rein 200ms var(--sch-ease-out) both;
}
.e-search-results-list .e-loop-item:nth-child(2) { animation-delay: 30ms; }
.e-search-results-list .e-loop-item:nth-child(3) { animation-delay: 60ms; }
.e-search-results-list .e-loop-item:nth-child(4) { animation-delay: 90ms; }
.e-search-results-list .e-loop-item:nth-child(5) { animation-delay: 120ms; }
.e-search-results-list .e-loop-item:nth-child(n+6) { animation-delay: 150ms; }

@keyframes sch-treffer-rein {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* „Alle Ergebnisse anzeigen" (per JS angehängt) */
.sch-suche-alle {
	align-items: center;
	border-top: 1px solid var(--sch-linie);
	color: var(--sch-navy) !important;
	display: flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	margin: 4px 0 0;
	padding: 14px 16px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.sch-suche-alle:focus-visible,
.sch-suche-alle:hover {
	background-color: var(--sch-creme);
	outline: none;
}

.sch-suche-alle i {
	font-size: 12px;
}

/* ---- Ergebnisseite (Loop-Item 9555) -------------------------------- */
.e-con.sch-treffer-karte {
	text-decoration: none;
	transition: transform .18s var(--sch-ease-out), box-shadow .18s ease, border-color .18s ease;
}

.e-con.sch-treffer-karte:focus-visible {
	border-color: var(--sch-navy) !important;
	outline: none;
}

.e-con.sch-treffer-karte:active {
	transform: scale(.98);
}

@media (hover: hover) and (pointer: fine) {
	.e-con.sch-treffer-karte:hover {
		border-color: var(--sch-navy) !important;
		box-shadow: 0 14px 34px rgba(27, 42, 65, .08);
		transform: translateY(-2px);
	}
	.e-con.sch-treffer-karte:hover .sch-treffer__mehr i {
		background: var(--sch-gold);
	}
}

.sch-treffer--karte {
	gap: 8px;
	min-height: 100%;
}

.sch-treffer--karte .sch-treffer__titel {
	font-size: 19px;
}

.sch-treffer--karte .sch-treffer__text {
	font-size: 14.5px;
}

.sch-treffer__mehr {
	align-items: center;
	color: var(--sch-navy);
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
}

.sch-treffer__mehr i {
	background: var(--sch-navy);
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	transition: background-color .15s ease;
	width: 28px;
}

/* Leerer Zustand auf der Ergebnisseite: Vorschläge (per PHP angehängt) */
.sch-suche-leer {
	margin: 8px auto 0;
	max-width: 560px;
	text-align: center;
}

.sch-suche-leer__hinweis {
	color: var(--sch-grau);
	font-size: 15px;
	margin: 0 0 14px;
}

.sch-suche-leer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sch-suche-leer__links a {
	background: #fff;
	border: 1px solid var(--sch-linie);
	border-radius: 999px;
	color: var(--sch-navy) !important;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 18px;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}

.sch-suche-leer__links a:hover,
.sch-suche-leer__links a:focus-visible {
	background: var(--sch-creme);
	border-color: var(--sch-navy);
	outline: none;
}

/* ---- Bewegung reduzieren ------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.e-search-results-list .e-loop-item {
		animation: none;
	}
	.e-con.sch-treffer-karte,
	.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile {
		transition: none;
	}
	.e-con.sch-treffer-karte:hover,
	.e-con.sch-treffer-karte:active,
	.e-search-results-list .e-loop-item .e-con.sch-treffer-zeile:active {
		transform: none;
	}
}

/* ---- Header: Platz für das Such-Icon auf schmalen Desktops --------------
   Der Home-Header hat feste Spaltenbreiten (Logo 15 % / Menü 62 % / rechts 23 %).
   Zwischen 1025 und 1200 px reicht die rechte Spalte mit Sprache + Suche +
   „Für Gäste" nicht; das Menü hat dort ~130 px Luft. Verschiebung 8 %
   (geprüft 1025/1100/1200/1366 px). Subpage-Header ist nicht betroffen.
   ----------------------------------------------------------------------- */
.elementor-location-header .elementor-element-ea690ca .elementor-button {
	white-space: nowrap;
}

@media (min-width: 1025px) and (max-width: 1200px) {
	.elementor-location-header .elementor-element-2f3439c {
		--width: 54% !important;
		width: 54% !important;
	}
	.elementor-location-header .elementor-element-9b8e423 {
		--width: 31% !important;
		width: 31% !important;
		gap: 14px !important;
	}
}