/* HTG-Connect: Suchseite (Paket S2). Theme-neutral, kein JS fuer das
 * Layout selbst noetig - reines CSS.
 *
 * Auftrag Punkt 8: Maske und (einklappbare) Filterleiste auf grossen
 * Bildschirmen in EINER Zeile, mobil gestapelt, CLS = 0. Technik:
 * ".htgc-filter-wrap" (von HTGC_Grid_Renderer erzeugt, siehe dort) bekommt
 * per "display:contents" seine eigene Box entzogen - seine Kinder
 * (".htgc-filter-bar", ".htgc-grid", ...) werden dadurch zu direkten
 * Flex-Kindern von ".htgc-such-seite" und lassen sich dort frei neben der
 * Maske anordnen, OHNE die abgenommene Grid-/Filter-HTML-Struktur selbst
 * anfassen zu muessen (Auftrag: "keine Aenderungen ueber das Noetige
 * hinaus"). Unterhalb der Breite bleibt die normale Dokumentreihenfolge
 * (Maske, dann Filterleiste+Grid) unangetastet - "mobil gestapelt" ergibt
 * sich dadurch von selbst, ohne eigene Mobil-Regeln. Da alle beteiligten
 * Elemente bereits serverseitig mit fester Groesse gerendert werden (kein
 * Nachladen, das die Hoehe nachtraeglich aendert), ist keine zusaetzliche
 * Platzreservierung fuer CLS = 0 noetig.
 *
 * Nachbesserung (Katrins Abnahme-Test-Rueckmeldung, 20.07.2026): die reine
 * Nebeneinanderstellung wirkte wie zwei zufaellig benachbarte, unabhaengige
 * Bauteile (Maske ohne eigenen Hintergrund, Filterleiste mit eigenem grauen
 * Kasten) statt EINEM zusammengehoerigen Streifen - ausserdem wirkten die
 * beiden "Personen"-Bedienelemente (Masken-Eingabefeld vs. Filter-Stepper)
 * dadurch wie eine Dopplung. Fix: beide bekommen dieselbe Hintergrundfarbe/
 * denselben Randradius (nur an den AUSSENkanten des gemeinsamen Streifens),
 * dazwischen eine duenne Trennlinie statt eines Randradius auf beiden
 * Innenseiten - macht aus zwei Kaesten optisch EINEN durchgehenden Streifen
 * mit einer klar erkennbaren, aber ruhigen Innen-Trennung. */

@media (min-width: 700px) {
	.htgc-such-seite {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 0;
	}

	.htgc-such-seite > .htgc-filter-wrap {
		display: contents;
	}

	/* Alles zunaechst auf volle Breite/eigene Zeile (order 3) - danach
	 * gezielt die zwei Kopfzeilen-Elemente herausheben. Robust gegenueber
	 * spaeteren Ergaenzungen im Grid-Renderer: neue Elemente landen ohne
	 * weiteres Zutun automatisch in der Zeile darunter. */
	.htgc-such-seite > *,
	.htgc-such-seite > .htgc-filter-wrap > * {
		flex-basis: 100%;
		order: 3;
	}

	.htgc-such-seite > .htgc-ziel-suche-wrap {
		flex: 1 1 420px;
		order: 1;
		margin: 0 0 16px;
		box-sizing: border-box;
		background: #f7f6f2;
		padding: 12px 14px;
		border-radius: 8px 0 0 8px;
		border-right: 1px solid #e0ded4;
		display: flex;
		align-items: center;
	}

	.htgc-such-seite > .htgc-ziel-suche-wrap .htgc-ziel-suche-form {
		width: 100%;
	}

	.htgc-such-seite > .htgc-filter-wrap > .htgc-filter-bar {
		flex: 0 1 auto;
		order: 2;
		margin: 0 0 16px;
		border-radius: 0 8px 8px 0;
	}
}


/* "Meinten Sie"-Auswahlliste (Auftrag Punkt 3): ersetzt das Grid bei
 * Mehrdeutigkeit durch echte, klickbare Links - funktioniert ohne
 * JavaScript (normale <a>-Elemente). */
.htgc-such-auswahl {
	margin: 0 0 24px;
}

.htgc-such-auswahl-intro {
	font-weight: 600;
	margin: 0 0 0.6em;
}

.htgc-such-auswahl-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 480px;
}

.htgc-such-auswahl-eintrag a {
	display: block;
	padding: 10px 16px;
	background: #f7f6f2;
	border: 1px solid #e2e0d8;
	border-radius: 6px;
	color: #1a1a1a;
	text-decoration: none;
}

.htgc-such-auswahl-eintrag a:hover,
.htgc-such-auswahl-eintrag a:focus {
	border-color: #FFCC00;
	background: #fff8e5;
}

.htgc-such-auswahl-hinweis {
	margin: 12px 0 0;
	font-size: 0.9em;
	color: #555;
}