/* Chip – Pillenförmiger Schalter für Themen- und Filterauswahl.
   Vorher lagen zwei Fassungen da: „.chip“ im Ratgeber (brauner Rahmen, 12 px,
   aktiv in Rot) und „.filter__chip“ auf der Kategorieseite (beige Fläche,
   10 px, kein Rahmen). Zwei Radien für dieselbe Pille, zwei Zustände für
   dieselbe Aussage „das ist ausgewählt“.

   Rot bleibt der Notification-Bar, dem Preis und der Aktion vorbehalten –
   eine Auswahl ist kein Alarm. Ausgewählt heißt darum Dunkelbraun, dieselbe
   Farbe wie der Primary Button. */

.chip {
	display: inline-flex;
	gap: var(--ffg-space-1-5);
	flex: 0 0 auto;
	align-items: center;
	min-height: var(--ffg-tap);
	padding: var(--ffg-space-1-5) var(--ffg-space-4);
	border: 0.09375rem solid var(--ffg-brown-logo);
	border-radius: var(--ffg-radius-pill);
	background: var(--ffg-white);
	color: var(--ffg-brown-text);
	font-size: var(--ffg-size-sm);
	font-weight: 700;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip:hover {
	border-color: var(--ffg-brown-dark);
	color: var(--ffg-brown-dark);
}

.chip[aria-pressed="true"],
.chip--selected {
	border-color: var(--ffg-brown-dark);
	background: var(--ffg-brown-dark);
	color: var(--ffg-white);
}

.chip[aria-pressed="true"]:hover,
.chip--selected:hover {
	background: var(--ffg-brown-dark-hover);
	border-color: var(--ffg-brown-dark-hover);
	color: var(--ffg-white);
}

/* Reihe von Chips. Auf dem Handy schiebt sie sich seitlich weg, statt zwei
   Zeilen zu belegen; die Bildlaufleiste bleibt unsichtbar. */
.chips {
	display: flex;
	gap: var(--ffg-space-2);
	overflow-x: auto;
	padding-bottom: var(--ffg-space-1);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.chips::-webkit-scrollbar {
	display: none;
}

/* Umbrechende Reihe – die gesetzten Filter über der Trefferliste stehen
   untereinander, statt aus dem Bild zu laufen. */
.chips--wrap {
	overflow: visible;
	flex-wrap: wrap;
	padding-bottom: 0;
}

/* Gesetzter Filter mit Löschknopf. Kompakter als der Themenschalter, weil
   mehrere davon nebeneinander stehen – die 44 Pixel Trefferfläche holt sich
   der Löschknopf über ein unsichtbares Feld um sein Kreuz. */
.chip--applied {
	gap: var(--ffg-space-2);
	min-height: 2rem;
	padding: var(--ffg-space-1) var(--ffg-space-1) var(--ffg-space-1) var(--ffg-space-3);
	font-size: var(--ffg-size-sm);
}

.chip__remove {
	position: relative;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border-radius: 50%;
	color: inherit;
	font-size: var(--ffg-size-base);
	line-height: 1;
}

.chip__remove::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ffg-tap);
	height: var(--ffg-tap);
	transform: translate(-50%, -50%);
}

.chip__remove:hover {
	background: rgb(255 255 255 / 20%);
}