fipguide · MoritzWeber0 · Jul 1, 2026
diff --git a/assets/js/bookingFilters.js b/assets/js/bookingFilters.js
@@ -0,0 +1,42 @@
+function initBookingFilters() {
+  const filterGroups = document.querySelectorAll(".o-booking-filters");
+
+  filterGroups.forEach((group) => {
+    const chips = group.querySelectorAll(".a-booking-filter-chip");
+    const bookings = group.parentElement.querySelectorAll(
+      ".o-expander--booking",
+    );
+
+    chips.forEach((chip) => {
+      chip.addEventListener("click", () => {
+        const isPressed = chip.getAttribute("aria-pressed") === "true";
+        chip.setAttribute("aria-pressed", String(!isPressed));
+        applyFilters(group, bookings);
+      });
+    });
+  });
+}
+
+function applyFilters(group, bookings) {
+  const activeFilters = [];
+  group.querySelectorAll(".a-booking-filter-chip").forEach((chip) => {
+    if (chip.getAttribute("aria-pressed") === "true") {
+      activeFilters.push(chip.dataset.filter);
+    }
+  });
+
+  bookings.forEach((booking) => {
+    if (activeFilters.length === 0) {
+      booking.hidden = false;
+      return;
+    }
+
+    const matches = activeFilters.every((filter) => {
+      return booking.getAttribute(`data-booking-${filter}`) === "true";
+    });
+
+    booking.hidden = !matches;
+  });
+}
+
+document.addEventListener("DOMContentLoaded", initBookingFilters);
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -11,3 +11,4 @@ import "./expander.js";
 import "./dialog.js";
 import "./fipValidityComparison.js";
 import "./search.js";
+import "./bookingFilters.js";
diff --git a/assets/sass/bookingFilters.scss b/assets/sass/bookingFilters.scss
@@ -0,0 +1,50 @@
+.o-booking-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.8rem;
+  margin-bottom: 1.5rem;
+}
+
+.a-booking-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.6rem 1.2rem;
+  border-radius: var(--border-radius-l);
+  border: var(--border-visible);
+  background-color: transparent;
+  color: var(--color-body);
+  font-family: var(--font-family);
+  font-size: 1.4rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--bg-neutral);
+  }
+
+  &:focus-visible {
+    outline: var(--outline-focus-indicator) solid 2px;
+    outline-offset: 2px;
+  }
+
+  &[aria-pressed="true"] {
+    background-color: var(--link-default);
+    border-color: var(--link-default);
+    color: #ffffff;
+
+    &:hover {
+      background-color: var(--link-hovered);
+      border-color: var(--link-hovered);
+    }
+  }
+
+  > .a-icon {
+    font-size: 1.6rem;
+  }
+}
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -26,3 +26,4 @@
 @import "dialog.scss";
 @import "fip-validity.scss";
 @import "404.scss";
+@import "bookingFilters.scss";
diff --git a/content/operator/bdz/index.de.md b/content/operator/bdz/index.de.md
@@ -97,6 +97,11 @@ Regionalbahnen im innerbulgarischen Verkehr mit Halt an meist allen Stationen, d
 
 ## Ticket- und Reservierungskauf
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Vor Ort
 
 {{% booking id="bdz-ticket-office" /%}}

diff --git a/content/operator/bdz/index.en.md b/content/operator/bdz/index.en.md
@@ -97,6 +97,11 @@ Regional trains in domestic traffic stopping at most stations, often running mor
 
 ## Ticket and Reservation Purchase
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### On-Site
 
 {{% booking id="bdz-ticket-office" /%}}

diff --git a/content/operator/bdz/index.fr.md b/content/operator/bdz/index.fr.md
@@ -111,6 +111,11 @@ Les prix de réservation pour les couchettes ou voitures-lits sont plus élevés
 
 ## Achat de billets et réservations
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### En gare
 
 {{% booking id="bdz-ticket-office" /%}}

diff --git a/content/operator/bls/index.de.md b/content/operator/bls/index.de.md
@@ -101,6 +101,11 @@ FIP ist auf den Schiffen der BLS auf dem Thunersee und Brienzersee gültig.
 
 ## Ticket- und Reservierungskauf
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="sbb-website"/%}}

diff --git a/content/operator/bls/index.en.md b/content/operator/bls/index.en.md
@@ -101,6 +101,11 @@ FIP is valid on BLS ships on Lake Thun and Lake Brienz.
 
 ## Ticket and Reservation Purchase
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="sbb-website"/%}}

diff --git a/content/operator/bls/index.fr.md b/content/operator/bls/index.fr.md
@@ -101,6 +101,11 @@ Le FIP est valable sur les bateaux de la BLS sur le lac de Thoune et le lac de B
 
 ## Achat de billets et réservations
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### En ligne
 
 {{% booking id="sbb-website"/%}}

diff --git a/content/operator/cd/index.de.md b/content/operator/cd/index.de.md
@@ -231,6 +231,11 @@ Ein Ticket (Reservierung verpflichtend) muss spätestens 15 Minuten vor Abfahrt
 
 ## Ticket- und Reservierungskauf
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="cd-website" /%}}

diff --git a/content/operator/cd/index.en.md b/content/operator/cd/index.en.md
@@ -231,6 +231,11 @@ A ticket (reservation mandatory) must be purchased at the latest 15 minutes befo
 
 ## Ticket and Reservation Purchase
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="cd-website" /%}}

diff --git a/content/operator/cd/index.fr.md b/content/operator/cd/index.fr.md
@@ -231,6 +231,11 @@ Un billet (réservation obligatoire) doit être acheté au plus tard 15 minutes
 
 ## Achat de billets et réservations
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### En ligne
 
 {{% booking id="cd-website" /%}}

diff --git a/content/operator/cfl/index.de.md b/content/operator/cfl/index.de.md
@@ -93,6 +93,11 @@ Die Standseilbahn verbindet die Bahnhaltestelle Pfaffenthal-Kirchberg mit der Um
 
 ## Ticket- und Reservierungskauf
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 Der Ticketkauf ist nur für die erste Klasse relevant.
 
 {{% highlight tip %}}

diff --git a/content/operator/cfl/index.en.md b/content/operator/cfl/index.en.md
@@ -93,6 +93,11 @@ The funicular connects the Pfaffenthal-Kirchberg railway stop with the interchan
 
 ## Ticket and Reservation Purchase
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 Ticket purchase is only relevant for first class.
 
 {{% highlight tip %}}

diff --git a/content/operator/cfl/index.fr.md b/content/operator/cfl/index.fr.md
@@ -92,6 +92,11 @@ Le funiculaire relie la halte ferroviaire Pfaffenthal-Kirchberg à la plateforme
 
 ## Achat de billets et réservations
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 L’achat de billets n’est pertinent que pour la première classe.
 
 {{% highlight tip %}}

diff --git a/content/operator/cfr/index.de.md b/content/operator/cfr/index.de.md
@@ -138,6 +138,11 @@ Eine Reservierung ist für einige Züge erforderlich, diese sind mit _R_ gekennz
 
 ## Ticket- und Reservierungskauf
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="db-website"

diff --git a/content/operator/cfr/index.en.md b/content/operator/cfr/index.en.md
@@ -138,6 +138,11 @@ A reservation is required for some trains, indicated by an _R_.
 
 ## Ticket and Reservation Purchase
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="db-website"

diff --git a/content/operator/cfr/index.fr.md b/content/operator/cfr/index.fr.md
@@ -138,6 +138,11 @@ Une réservation est nécessaire pour certains trains, indiqués par un _R_.
 
 ## Achat de billets et réservations
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### En ligne
 
 {{% booking id="db-website"

diff --git a/content/operator/cie/index.de.md b/content/operator/cie/index.de.md
@@ -115,6 +115,12 @@ FIP ist auf Busverbindungen von Dublin Bus nicht gültig.
 
 ## Ticket- und Reservierungskauf
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+  fip_75=true
+%}}
+
 ### Online
 
 FIP 50 / FIP 75 Tickets sind online nicht buchbar.

diff --git a/content/operator/cie/index.en.md b/content/operator/cie/index.en.md
@@ -115,6 +115,12 @@ FIP is not valid on Dublin Bus bus services.
 
 ## Ticket and Reservation Purchase
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+  fip_75=true
+%}}
+
 ### Online
 
 FIP 50 / FIP 75 Tickets cannot be booked online.

diff --git a/content/operator/cie/index.fr.md b/content/operator/cie/index.fr.md
@@ -115,6 +115,12 @@ Le FIP n’est pas valable sur les liaisons en bus de Dublin Bus.
 
 ## Achat de billets et réservations
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+  fip_75=true
+%}}
+
 ### En ligne
 
 Les Billets FIP 50 / FIP 75 ne peuvent pas être réservés en ligne.

diff --git a/content/operator/db/index.de.md b/content/operator/db/index.de.md
@@ -267,6 +267,11 @@ FIP-Vergünstigungen gelten nicht in Bussen. In Bussen des Schienenersatzverkehr
 
 ## Ticket- und Reservierungskauf
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="db-website" /%}}

diff --git a/content/operator/db/index.en.md b/content/operator/db/index.en.md
@@ -267,6 +267,11 @@ FIP discounts do not apply on buses. On rail replacement buses, FIP discounts ap
 
 ## Ticket and Reservation Purchase
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="db-website" /%}}

diff --git a/content/operator/db/index.fr.md b/content/operator/db/index.fr.md
@@ -267,6 +267,11 @@ Les réductions FIP ne sont pas valables dans les bus. Dans les bus de remplacem
 
 ## Achat de billets et réservations
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### En ligne
 
 {{% booking id="db-website" /%}}

diff --git a/content/operator/dsb/index.de.md b/content/operator/dsb/index.de.md
@@ -104,6 +104,11 @@ Die S-Bahn Kopenhagen wird ebenfalls von der DSB betrieben und kann daher auch m
 
 ## Ticket- und Reservierungskauf
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="dsb-website"

diff --git a/content/operator/dsb/index.en.md b/content/operator/dsb/index.en.md
@@ -104,6 +104,11 @@ The Copenhagen S-train is also operated by DSB and can therefore be used with FI
 
 ## Ticket and Reservation Purchase
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### Online
 
 {{% booking id="dsb-website"

diff --git a/content/operator/dsb/index.fr.md b/content/operator/dsb/index.fr.md
@@ -104,6 +104,11 @@ Le réseau S-tog de Copenhague est également exploité par DSB. Trains fréquen
 
 ## Achat de billets et réservations
 
+{{% booking-filters
+  reservations=true
+  fip_50=true
+%}}
+
 ### En ligne
 
 {{% booking id="dsb-website"