/* ---------------------------------------------------------------
   filderguide.de - die Uebersicht aller Betriebe

   Aufbau von oben nach unten in der Reihenfolge, in der Leser
   entscheiden: erst die Branche (ein Klick), dann die Feinauswahl
   (das Formular), dann die Treffer. Die Themen und die Berichte
   stehen unten - sie sind Angebote fuer alle, die nichts Bestimmtes
   gesucht haben.

   Die Betriebskacheln selbst kommen aus firma.css. Hier steht nur,
   was um sie herum liegt.
   --------------------------------------------------------------- */
.fa-guide-kopf {
	margin: 0 0 22px;
}

.fa-guide-titel {
	font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
	font-weight: 800;
	font-size: clamp(23px, 2.6vw, 28px);
	line-height: 1.12;
	letter-spacing: -.015em;
	margin: 0;
}

.fa-guide-einleitung {
	max-width: 62ch;
	margin: 10px 0 0;
	color: var(--fa-text-sekund);
	font-size: 17px;
	line-height: 1.6;
}

/* --- Branchenzeile ---------------------------------------------
   Der schnellste Weg hinein, deshalb steht sie vor dem Formular.
   Ein Klick, kein Absenden.
   --------------------------------------------------------------- */
.fa-guide-branchen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}

.fa-guide-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	border: 1px solid var(--fa-linie);
	border-radius: 100px;
	background: var(--fa-karte);
	color: var(--fa-tinte);
	font-size: 14.5px;
	line-height: 1.2;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.fa-guide-chip:hover,
.fa-guide-chip:focus-visible {
	border-color: var(--fa-tinte);
	color: var(--fa-tinte);
}

/* Gelb markiert den gewaehlten Zustand - Flaeche, nie Schrift. */
.fa-guide-chip--an {
	background: var(--fa-gelb);
	border-color: var(--fa-gelb);
	font-weight: 600;
}

.fa-guide-zahl {
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	color: var(--fa-text-sekund);
}
.fa-guide-chip--an .fa-guide-zahl { color: var(--fa-tinte); }

/* --- Filterleiste ----------------------------------------------
   Zwei Zeilen: die Suche ueber die volle Breite, darunter die vier
   Auswahlfelder und der Knopf. In einer Zeile standen sie, solange
   die Seite 1200 Pixel breit war - neben der Seitenspalte sind es
   840, und dort lief der Knopf aus dem Kasten heraus.
   --------------------------------------------------------------- */
.fa-guide-filter {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
	gap: 12px;
	align-items: end;
	padding: 14px 16px;
	margin: 0 0 14px;
	border: 1px solid var(--fa-linie);
	border-radius: 8px;
	background: var(--fa-karte);
}

.fa-guide-feld--suche { grid-column: 1 / -1; }

.fa-guide-feld {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	min-width: 0;
}

.fa-guide-feld label {
	font-size: 12.5px;
	letter-spacing: .02em;
	color: var(--fa-text-sekund);
}

.fa-guide-feld input,
.fa-guide-feld select {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--fa-linie);
	border-radius: 5px;
	background: var(--fa-papier);
	color: var(--fa-tinte);
	font-size: 15px;
	line-height: 1.3;
	font-family: inherit;
}
.fa-guide-feld input:focus,
.fa-guide-feld select:focus {
	outline: 2px solid var(--fa-tinte);
	outline-offset: 1px;
}

.fa-guide-knoepfe {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.fa-guide-knopf {
	padding: 9px 18px;
	border: 0;
	border-radius: 5px;
	background: var(--fa-tinte);
	color: var(--fa-papier);
	font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.fa-guide-knopf:hover { background: #000; }

.fa-guide-zurueck {
	font-size: 14px;
	color: var(--fa-text-sekund);
	white-space: nowrap;
}

.fa-guide-treffer {
	margin: 0 0 14px;
	color: var(--fa-text-sekund);
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
}

/* --- Themen und Berichte ---------------------------------------
   Getrennt durch eine Linie: Ab hier geht es nicht mehr um die
   Suche, sondern um das, was der Guide sonst noch hat.
   --------------------------------------------------------------- */
.fa-guide-themen {
	margin: 40px 0 0;
	padding-top: 26px;
	border-top: 1px solid var(--fa-linie);
}

.fa-guide-untertitel {
	font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
	font-weight: 800;
	font-size: 21px;
	line-height: 1.2;
	margin: 0 0 14px;
}

.fa-guide-themenreihe {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
}

.fa-guide-thema {
	display: block;
	padding: 15px 16px;
	border: 1px solid var(--fa-linie);
	border-radius: 6px;
	background: var(--fa-karte);
	text-decoration: none;
	color: var(--fa-tinte);
	transition: border-color .15s ease;
}
.fa-guide-thema:hover,
.fa-guide-thema:focus-visible { border-color: var(--fa-tinte); }

.fa-guide-thema-name {
	display: block;
	font-family: "Archivo", "Segoe UI", system-ui, sans-serif;
	font-weight: 700;
	font-size: 16.5px;
}

.fa-guide-thema-text {
	display: block;
	margin-top: 5px;
	color: var(--fa-text-sekund);
	font-size: 14.5px;
	line-height: 1.5;
}

.fa-guide-berichte {
	margin: 22px 0 0;
	font-size: 15px;
}
.fa-guide-berichte a {
	color: var(--fa-tinte);
	text-decoration: none;
	border-bottom: 1px solid var(--fa-linie);
	padding-bottom: 2px;
}
.fa-guide-berichte a:hover { border-bottom-color: var(--fa-tinte); }
.fa-guide-berichte .fa-pfeil { margin-left: 6px; }

/* --- Schmale Schirme -------------------------------------------
   Die Filterleiste wird einspaltig. Der Kasten faellt dabei weg:
   Sechs Felder untereinander in einem Rahmen sehen aus wie ein
   Antrag. Ohne Rahmen ist es eine Liste von Feldern.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
	.fa-guide-filter {
		grid-template-columns: 1fr 1fr;
		padding: 0;
		border: 0;
		background: transparent;
		gap: 10px;
	}

	.fa-guide-feld--suche,
	.fa-guide-knoepfe {
		grid-column: 1 / -1;
	}

	.fa-guide-knopf { flex: 1; }

	/* Die Branchenzeile laeuft seitlich weiter, statt vier Zeilen hoch
	   zu werden. Der Anschnitt am Rand zeigt, dass es weitergeht. */
	.fa-guide-branchen {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-left: calc(var(--fa-rand) * -1);
		margin-right: calc(var(--fa-rand) * -1);
		padding: 0 var(--fa-rand);
	}
	.fa-guide-branchen::-webkit-scrollbar { display: none; }
	.fa-guide-chip { flex: 0 0 auto; }
}

/* --- Beitraege ---------------------------------------------------
   Die Karten kommen aus kampagne.css. Zwei Dinge muessen hier anders
   sein, weil die Seite anders gebaut ist.

   Erstens der Abstand: .fa-abschnitt nimmt dem ersten Abschnitt Linie
   und Luft, weil er auf den Kampagnenseiten direkt unter der
   Einleitung steht. Hier ist der Beitragsblock zwar der erste
   Abschnitt, aber ueber ihm liegen Filterleiste und Kacheln - ohne
   Trennung stiessen sie aneinander.

   Die Spaltenzahl der Vorschauen steht in kampagne.css und gilt fuer
   beide Seiten - sie sind seit dem Wegfall der leeren Seitenspalte auf
   den Kampagnenseiten gleich breit.
   --------------------------------------------------------------- */
/* Zwei Klassen und der Elternteil, weil .fa-abschnitt:first-of-type
   spezifischer ist als eine einzelne Klasse und sonst gewinnt. Die Linie
   blieb dadurch weg, waehrend der Abstand schon stand. */
.fa-seite .fa-abschnitt.fa-guide-lesen {
	margin-top: 40px;
	padding-top: 26px;
	border-top: 1px solid var(--fa-linie);
}

@media (max-width: 767px) {
	.fa-seite .fa-abschnitt.fa-guide-lesen { margin-top: 30px; padding-top: 20px; }
}