/* Baustein 3 „Eine Suche, die eingrenzt“ (assets/neu/suche-eingrenzen.js). Klassen am <html>: neu-eg immer, neu-eg-<teil> je Teil */

/* Löschknopf im Filterfenster: ruhig statt rot (Zusage aus Baustein 2; Text kommt aus suche-zaehler.js, Klasse aus inc/html.php:829).
   Das Rot setzt styles.css mit !important (fhc :2494, tfh :2521), deshalb hier ebenso */
.neu-eg #header-search-modal .header-search-delete {
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid transparent !important;
	color: #495057 !important;
	text-decoration: underline;
	box-shadow: none !important;
}
.neu-eg #header-search-modal .header-search-delete:hover,
.neu-eg #header-search-modal .header-search-delete:focus {
	background-color: #f1f3f5 !important;
	border-color: #ced4da !important;
	color: #212529 !important;
}

/* ---- Marken: in der Hinweiszeile von filter-hinweis.js, Hellblau #def2f8 ---- */
.neu-eg-marken .neu-filter-hinweis .neu-marken {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-right: 1rem;
}
.neu-marken-titel {
	color: #212529;
	font-weight: 600;
	margin: .1875rem .5rem .1875rem 0;
}
.neu-marke {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	margin: .1875rem .5rem .1875rem 0;
	padding: .25rem .625rem .25rem .75rem;
	border: 1px solid #5b7f95;
	border-radius: 18px;
	background: #fff;
	color: #212529;
	font-size: .875rem;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}
.neu-marke:hover {
	border-color: #0b6fa4;
	background: #f4fafd;
}
.neu-marke:focus {
	outline: 2px solid #0b6fa4;
	outline-offset: 2px;
}
.neu-marke:focus:not(:focus-visible) {
	outline: 0;
}
.neu-marke-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-left: .375rem;
	color: #495057;
}
.neu-marke-x svg {
	display: block;
}
.neu-marke:hover .neu-marke-x {
	color: #212529;
}

/* ---- Filterblatt am Handy (unter 768px, darüber unverändert) ---- */
.neu-blatt-pfeil {
	display: none;
}
@media (max-width: 767.98px) {
	.neu-marke {
		min-height: 44px;
	}

	.neu-eg-blatt #header-search-modal {
		padding-right: 0 !important;
	}
	.neu-eg-blatt #header-search-modal .modal-dialog {
		margin: 0;
		width: 100%;
		max-width: none;
		height: 100%;
		height: 100vh;
		height: 100dvh;
		max-height: none;
	}
	.neu-eg-blatt #header-search-modal .modal-content {
		height: 100%;
		max-height: none;
		border: 0;
		border-radius: 0;
	}
	.neu-eg-blatt #header-search-modal .modal-body {
		flex: 1 1 auto;
		max-height: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
	}
	/* Erklärtexte aus der Verwaltung kleiner */
	.neu-eg-blatt #header-search-modal .modal-body p:not(.h3) {
		font-size: .8125rem;
		line-height: 1.35;
	}
	/* Fuß: großer Zählknopf, ruhiges Zurücksetzen daneben */
	.neu-eg-blatt #header-search-modal .modal-footer {
		flex-wrap: nowrap;
		padding: .625rem 1rem;
		padding-bottom: calc(.625rem + env(safe-area-inset-bottom, 0px));
	}
	.neu-eg-blatt #header-search-modal .modal-footer .header-search-submit {
		flex: 1 1 auto;
		min-height: 48px;
		font-size: 1rem;
		font-weight: 600;
	}
	.neu-eg-blatt #header-search-modal .modal-footer .header-search-delete {
		flex: 0 1 auto;
		min-height: 44px;
		white-space: normal;
		line-height: 1.2;
	}
	/* Abschnitte zum Aufklappen: Themen, Angebote, Orte */
	.neu-eg-blatt #header-search-modal .neu-blatt-kopf {
		display: flex;
		justify-content: space-between;
		align-items: center;
		min-height: 44px;
		margin-bottom: 0;
		cursor: pointer;
		-webkit-user-select: none;
		user-select: none;
	}
	.neu-eg-blatt #header-search-modal .neu-blatt-auf {
		margin-bottom: .5rem;
	}
	.neu-eg-blatt #header-search-modal .neu-blatt-pfeil {
		display: inline-block;
		font-size: 1rem;
		transition: transform .15s;
	}
	.neu-eg-blatt #header-search-modal .neu-blatt-auf .neu-blatt-pfeil {
		transform: rotate(180deg);
	}
	.neu-eg-blatt #header-search-modal .neu-blatt-zu {
		display: none !important;
	}
}
/* Kurze Häkchen zweispaltig (Art, Lage, Ausstattung, Angebote, Orte), Themen bleiben einspaltig */
@media (max-width: 575.98px) {
	.neu-eg-blatt #header-search-modal .neu-blatt-zwei > .col-12 {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* ---- Gestaltungsregel 2.7: Suchleiste und Jahresübersicht mit 8 px (öffnet etwas) ---- */
.neu-eg #header-search .btn-search {
	border-radius: 8px !important;
}
.neu-eg #header-search .btn-group > .btn-search:not(:last-child) {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.neu-eg #header-search .btn-group > .btn-search:not(:first-child) {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.neu-eg #neu-jahr-knopf {
	border-radius: 8px !important;
}

/* ---- Schnellfilter-Reihe (Auswahl: ganz rund, blau wenn aktiv) ---- */
.neu-sf-huelle {
	position: relative;
}
.neu-sf-reihe {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.neu-sf {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 31px;
	margin: 0;
	padding: 0 11px;
	border: 1px solid #9fb6c4;
	border-radius: 18px;
	background: #fff;
	color: #212529;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}
.neu-sf:hover {
	border-color: #0b6fa4;
}
.neu-sf.an {
	background: #0b6fa4;
	border-color: #0b6fa4;
	color: #fff;
}
.neu-sf:focus-visible,
.neu-sf-wahl:focus-visible,
.neu-stufe:focus-visible {
	outline: 2px solid #0b6fa4;
	outline-offset: 2px;
}
/* Rahmen aus dem Grundgerüst (Bootstrap) nur bei Tastatur, nicht nach Maus oder Finger */
.neu-sf:focus:not(:focus-visible),
.neu-sf-wahl:focus:not(:focus-visible),
.neu-stufe:focus:not(:focus-visible) {
	outline: 0;
}
.neu-sf-pfeil {
	font-size: 9px;
	margin-left: 2px;
}
/* Umschalter Pool | Privatpool: ein Stück, Trennstrich zeigt „eins von beiden“ */
.neu-sf-seg {
	flex: 0 0 auto;
	display: inline-flex;
	border: 1px solid #9fb6c4;
	border-radius: 18px;
	overflow: hidden;
	background: #fff;
}
.neu-sf-seg .neu-sf {
	border: 0;
	border-radius: 0;
	height: 29px;
}
.neu-sf-seg .neu-sf + .neu-sf {
	border-left: 1px solid #9fb6c4;
}
.neu-sf-seg .neu-sf:focus-visible {
	outline-offset: -3px;
}
/* Auswahl zum Aufklappen (Schlafzimmer, Preis) */
.neu-sf-menue {
	position: absolute;
	z-index: 1040;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 360px;
	padding: 10px;
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 10px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
	text-align: left;
}
.neu-sf-wahl,
.neu-stufe {
	min-height: 40px;
	min-width: 56px;
	padding: 0 14px;
	border: 1px solid #9fb6c4;
	border-radius: 20px;
	background: #fff;
	color: #212529;
	font-size: 15px;
	white-space: nowrap;
	cursor: pointer;
}
.neu-sf-wahl.an,
.neu-stufe.an {
	background: #0b6fa4;
	border-color: #0b6fa4;
	color: #fff;
}
/* Rechner: eine zweite Zeile unter der Suchleiste */
.neu-sf-leiste > .neu-sf-huelle {
	margin: 10px 0 2px;
}
.row.neu-sf-leiste > .neu-sf-huelle {
	flex: 0 0 100%;
	order: 5;
}

/* ---- Preis im Filterfenster: Stufen und „Eigener Betrag“ ---- */
.neu-stufen-text {
	margin: 0 0 6px;
	color: #495057;
}
/* Höchstens zwei Zeilen: drei Spalten in natürlicher Breite, „Eigener Betrag“ unten rechts (René 09.11., Manfred im Telefonat).
   Breiteste Zeile: Deutsch rund 335 px, Englisch rund 370 px; Handys rücken enger zusammen, Schrift bleibt ab 14 px. */
.neu-stufen {
	display: grid;
	grid-template-columns: repeat(3, max-content);
	justify-items: start;
	grid-gap: 8px;
	gap: 8px;
	margin: 4px 0 12px;
}
@media (max-width: 399.98px) {
	.neu-stufen {
		gap: 6px;
	}
	.neu-stufen .neu-stufe {
		padding: 0 8px;
		font-size: 14px;
	}
}
@media (max-width: 359.98px) {
	.neu-stufen {
		gap: 5px;
	}
	.neu-stufen .neu-stufe {
		min-width: 0;
		padding: 0 6px;
	}
	/* Englisch ist auf sehr schmalen Handys zu lang für zwei Zeilen: dort wie bisher umbrechen statt überstehen */
	:lang(en) .neu-stufen {
		display: flex;
		flex-wrap: wrap;
	}
}
/* Mit „ab … €“ (Schalter preis_ab) sieben Knöpfe: vier Spalten, „Eigener Betrag“ über zwei, damit es bei zwei Zeilen bleibt.
   In drei Spalten stünde „Eigener Betrag“ allein links in Zeile drei und machte die erste Spalte breit (Lücke nach „bis 75 €“) */
.neu-stufen.neu-stufen-mit-ab {
	grid-template-columns: repeat(4, max-content);
}
.neu-stufen.neu-stufen-mit-ab .neu-stufe-eigen {
	grid-column: span 2;
}
/* Englisch („up to €100“) passt nicht in vier Spalten: drei Spalten, „Custom amount“ allein darunter (gemessen 12.11., preis_ab_zeilen.mjs) */
:lang(en) .neu-stufen.neu-stufen-mit-ab {
	grid-template-columns: repeat(3, max-content);
}
:lang(en) .neu-stufen.neu-stufen-mit-ab .neu-stufe-eigen {
	grid-column: 1 / -1;
}
.neu-stufen-felder.neu-zu {
	display: none !important;
}

/* ---- Handy: Reisezeit und Gäste groß, darunter Filter, Reihe zum Wischen, Sortieren ---- */
@media (max-width: 767.98px) {
	.neu-eg-schnell .neu-sf-leiste {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
		margin-left: 0;
		margin-right: 0;
		text-align: left;
	}
	.neu-eg-schnell .neu-sf-leiste > #reisezeit,
	.neu-eg-schnell .neu-sf-leiste > .neu-sf-gaeste {
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
		margin: 0 !important;
	}
	.neu-eg-schnell .neu-sf-leiste > .neu-sf-gaeste {
		display: block !important;
	}
	.neu-eg-schnell .neu-sf-leiste > #reisezeit,
	.neu-eg-schnell .neu-sf-gaeste #search-person {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 46px;
		margin: 0 !important;
		padding: 8px 12px;
		background: #fff;
		border: 1px solid #adb5bd;
		font-size: 16px;
		text-align: left;
	}
	.neu-eg-schnell .neu-sf-leiste > .d-block.w-100 {
		display: none !important;
	}
	.neu-eg-schnell .neu-sf-leiste > #search-filter {
		order: 2;
		height: 36px;
		margin: 0 !important;
		padding: 0 12px;
		font-size: 14px;
	}
	.neu-eg-schnell .neu-sf-leiste > .neu-sf-huelle {
		order: 3;
		flex: 1 1 0;
		min-width: 0;
		margin: 0;
	}
	.neu-eg-schnell .neu-sf-leiste > .neu-sf-sort {
		order: 4;
		display: block !important;
	}
	.neu-eg-schnell .neu-sf-sort #header-sort {
		height: 36px;
		margin: 0 !important;
	}
	.neu-eg-schnell .neu-sf-leiste > #start-submit {
		order: 5;
		flex: 1 1 100%;
		height: 44px;
		margin: 0 !important;
		font-size: 16px;
	}
	.neu-sf-reihe {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding: 2px 28px 2px 0;
	}
	.neu-sf-reihe::-webkit-scrollbar {
		display: none;
	}
	/* Weiches Auslaufen rechts, unabhängig von der Hintergrundfarbe */
	.neu-sf-mehr .neu-sf-reihe {
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
	}
	.neu-sf {
		height: 36px;
		padding: 0 13px;
		font-size: 14px;
	}
	.neu-sf-seg .neu-sf {
		height: 34px;
	}
	.neu-sf-menue {
		left: 0;
		right: 0;
		max-width: none;
	}
}

/* ---- Ein Kasten aus Leiste und Filterzeile, am Handy volles Band (Entwurf E, René 06.11.) ---- */
/* Filterzeile hängt unter der Leiste, halb so kräftig; Farben setzt kastenFarbe() aus der Leiste (FHC und TFH verschieden) */
.neu-eg-liste.neu-eg-marken #content > .neu-filter-hinweis {
	margin-top: -11px;
	border: var(--neu-band-rand, 1px solid #d1edf6);
	border-radius: 0;
	background-color: var(--neu-band-hell, #def2f8);
	color: #212529;
	justify-content: flex-start !important;
}
.neu-eg-liste.neu-eg-marken .neu-filter-hinweis .neu-marken {
	display: contents;
}
.neu-eg-liste.neu-eg-marken .neu-filter-hinweis > .alert-link {
	margin-left: auto;
}
.neu-kurz,
.neu-sort-link {
	display: none;
}
.neu-regler {
	vertical-align: -2px;
	margin-right: 2px;
}
@media (max-width: 767.98px) {
	/* #content schneidet sonst mit overflow-x: hidden ab (FHC am Rahmen, TFH an der Kachelkante); flow-root hält die Floats */
	html.neu-eg-liste body {
		overflow-x: clip;
	}
	.neu-eg-liste #content {
		overflow: visible !important;
		display: flow-root;
	}
	.neu-eg-liste.neu-eg-schnell #content > #header-search.neu-sf-leiste {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding: 14px 16px !important;
		border: 0 !important;
	}
	.neu-eg-liste.neu-eg-schnell #content > #header-search.neu-sf-leiste > * {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	/* Sortieren verlässt die Leiste: Knopf unsichtbar, Hülle aus dem Fluss, das Fenster bleibt erreichbar */
	.neu-eg-liste.neu-eg-schnell #header-search.neu-sf-leiste > .neu-sf-sort {
		position: absolute !important;
		width: 0;
		height: 0;
		overflow: visible;
	}
	.neu-eg-liste.neu-eg-schnell #header-search.neu-sf-leiste .neu-sf-sort #header-sort {
		display: none !important;
	}
	.neu-eg-liste.neu-eg-schnell .neu-sort-link {
		display: inline;
		float: right;
		margin-left: 12px;
		color: #212529;
		text-decoration: underline;
		white-space: nowrap;
	}
	.neu-sort-link .fa {
		margin-right: 4px;
		color: #495057;
	}
	.neu-eg-liste.neu-eg-marken #content > .neu-filter-hinweis {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-top: -10px;
		border: 0;
		padding: 8px 16px !important;
	}
	.neu-eg-liste.neu-eg-marken .neu-filter-hinweis .neu-marke {
		min-height: 34px;
		margin: 3px 6px 3px 0;
		padding: .125rem .5rem .125rem .625rem;
		font-size: 14px;
	}
	.neu-eg-liste.neu-eg-marken .neu-filter-hinweis .neu-marken-titel {
		font-size: 14px;
		margin-right: .375rem;
	}
	.neu-eg-liste.neu-eg-marken .neu-filter-hinweis > .alert-link {
		font-size: 14px;
		margin-top: 3px;
		margin-bottom: 3px;
	}
	/* Ab zwei Marken: „Ihre Filter“ und „Alle löschen“ in einer Kopfzeile, die Marken darunter (René 07.11.) */
	.neu-eg-liste.neu-eg-marken #content > .neu-filter-hinweis.neu-mit-kopf {
		flex-wrap: wrap !important;
		row-gap: 0;
	}
	.neu-eg-liste.neu-eg-marken .neu-filter-hinweis.neu-mit-kopf .neu-marken-titel {
		order: -3;
		flex: 1 1 auto;
		margin-bottom: 6px;
	}
	.neu-eg-liste.neu-eg-marken .neu-filter-hinweis.neu-mit-kopf > .alert-link {
		order: -2;
		margin-left: auto !important;
		margin-bottom: 6px;
	}
	.neu-eg-liste.neu-eg-marken .neu-filter-hinweis.neu-mit-kopf::after {
		content: '';
		order: -1;
		flex-basis: 100%;
		height: 0;
	}
	.neu-eg-liste .neu-lang {
		display: none;
	}
	.neu-eg-liste .neu-kurz {
		display: inline;
	}
}

/* Satz zum Studio unter der Schlafzimmer-Auswahl (Teil studio, 10.11.), leise wie die Überschrift im Preis-Menü */
.neu-sf-menue-fuss {
	flex: 0 0 100%;
	margin: -2px 0 0 2px;
	color: #495057;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
	white-space: normal;
}

/* Überschrift im Preis-Menü der Schnellfilter (P1, René 06.11.) */
.neu-sf-menue-kopf {
	flex: 0 0 100%;
	margin: 0 0 -2px 2px;
	color: #495057;
	font-size: 13px;
	line-height: 1.3;
	text-align: left;
}

/* Startseite am Handy: Suchkasten über die volle Breite wie die Listenseiten, ohne die doppelten Innenabstände (S1, René 06.11.) */
@media (max-width: 767.98px) {
	.neu-eg-schnell #start-suchbox {
		width: 100vw;
		max-width: none;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		border-left: 0 !important;
		border-right: 0 !important;
		border-radius: 0 !important;
		padding: 14px 16px !important;
	}
	.neu-eg-schnell #start-suchbox > #header-search {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.neu-eg-schnell #start-suchbox .neu-sf-leiste {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
}

/* Filterfenster in drei Spalten (filter-breit.css): Platz für zwei Zeilen Preisstufen (René 09.11.). Steht hier und nicht in
   filter-breit.css, weil das Fenster schon für alle live ist, die Stufen aber erst in der Vorschau. Ab 1280 px bis 1240 px
   breit, keine Spalte schmaler als bisher; ältere Browser ohne min() bleiben bei 1140 px. Die erste Spalte nicht schmaler,
   sonst stoßen „Ferienwohnung“ und „Ferienhaus“ zusammen. Breiteste Stufenzeile: Deutsch rund 325 px, Englisch rund 355 px */
@media (min-width: 1200px) {
	#header-search-modal.neu-filter-breit .modal-dialog {
		max-width: 1140px;
		max-width: min(1240px, calc(100vw - 40px));
	}
	#header-search-modal.neu-filter-breit .neu-fspalte:nth-child(2) {
		flex-grow: 1.2;
	}
	#header-search-modal.neu-filter-breit .neu-fspalte:last-child {
		flex-grow: 1.2;
	}
	#header-search-modal.neu-filter-breit .neu-stufen {
		grid-gap: 6px;
		gap: 6px;
	}
	#header-search-modal.neu-filter-breit .neu-stufen .neu-stufe {
		padding: 0 12px;
	}
}
/* Vier Spalten mit „ab … €“: bei 1200 px füllen sie die Spalte genau (360 px), andere Schriften könnten überstehen; etwas Luft */
@media (min-width: 1200px) and (max-width: 1279.98px) {
	#header-search-modal.neu-filter-breit .neu-stufen.neu-stufen-mit-ab .neu-stufe {
		padding: 0 10px;
	}
}