/**
 * Der Sportkasten in der Liste und die Filterzeile der Sportseite.
 *
 * Der Kasten steht zwischen Nachrichten und soll nicht wie eine Anzeige
 * aussehen: keine Rahmenlinie rundum, sondern eine kraeftige Oberkante in
 * Fildergelb und der Papierton als Grund. Das ist dasselbe Mittel, das die
 * Kennzeichnungskaesten im Filderguide benutzen - wer es einmal gelernt
 * hat, erkennt es wieder.
 */

.fa-sportkasten {
	margin: 0 0 22px;
	padding: 18px 20px 14px;
	border-top: 4px solid var(--fa-gelb);
	background: var(--fa-papier);
}

.fa-sportkasten-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 10px;
}

.fa-sportkasten-titel {
	margin: 0;
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 800;
	font-size: 21px;
	line-height: 1.2;
	letter-spacing: -.015em;
}

.fa-sportkasten-mehr {
	flex: 0 0 auto;
	color: var(--fa-text-sekund);
	font-size: 14px;
	text-decoration: none;
}

.fa-sportkasten-mehr:hover {
	color: var(--fa-tinte);
}

.fa-sportkasten-mehr .fa-pfeil {
	margin-left: 0.3em;
}

.fa-sportkasten-liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fa-sportkasten-liste li + li {
	border-top: 1px solid var(--fa-linie);
}

.fa-sportkasten-liste a {
	display: block;
	padding: 9px 0;
	color: var(--fa-tinte);
	text-decoration: none;
}

.fa-sportkasten-liste a:hover .fa-sportkasten-titelzeile {
	text-decoration: underline;
}

/* Der Ort steht als Kicker darueber - dieselbe Rolle wie in der
   Beitragsliste, deshalb dieselbe Schrift. */
.fa-sportkasten-ort {
	display: block;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 11px;
	letter-spacing: .09em;
	color: var(--fa-text-sekund);
	margin-bottom: 2px;
}

.fa-sportkasten-titelzeile {
	display: block;
	font-family: Archivo, system-ui, sans-serif;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.25;
	letter-spacing: -.015em;
}

/* --- Die Filterzeile der Sportseite ----------------------------------- */

.fa-sport-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.fa-sport-pille {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
	padding: 7px 14px;
	border: 1px solid var(--fa-linie);
	border-radius: 999px;
	background: var(--fa-karte);
	color: var(--fa-tinte);
	font-size: 15px;
	text-decoration: none;
}

.fa-sport-pille:hover {
	border-color: var(--fa-tinte);
}

.fa-sport-pille.ist-aktiv {
	background: var(--fa-gelb);
	border-color: var(--fa-gelb);
	font-weight: 700;
}

.fa-sport-zahl {
	color: var(--fa-text-sekund);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.fa-sport-pille.ist-aktiv .fa-sport-zahl {
	color: var(--fa-tinte);
}

.fa-sport-blaettern {
	margin-top: 10px;
}

/* Auf dem Telefon nur die Hoehe zuruecknehmen, nicht die Seiten: Der Kasten
   liegt direkt in der Liste und bringt seinen Rand selbst mit - mit padding
   0 stiess die Schrift an den Bildschirmrand. */
@media ( max-width: 560px ) {
	.fa-sportkasten {
		padding: 16px var(--fa-rand) 12px;
	}
}

/* Die zweite Zeile mit den Vereinen steht etwas naeher an der ersten und
   eine Spur kleiner: Der Ort ist die Hauptachse, der Verein die zweite. */
.fa-sport-filter--vereine {
	margin-top: -14px;
	gap: 6px;
}

.fa-sport-filter--vereine .fa-sport-pille {
	padding: 5px 12px;
	font-size: 14px;
}