fipguide · therobrob · Mar 6, 2025 · Mar 6, 2025 · Mar 6, 2025 · Mar 6, 2025
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
@@ -11,6 +11,7 @@ body {
   --bg-accent2: #DABA00;
   --color-onDark: #FFFFFF;
   --color-onLight: #000000;
+  --color-table-border: #5B5B5B;
   --border-radius-s: .4rem;
   --border-radius-m: .8rem;
   --border-radius-l: 1.2rem;

diff --git a/assets/sass/content.scss b/assets/sass/content.scss
@@ -1,4 +1,29 @@
 .updateDate {
     font-size: 1.3rem;
     margin-bottom: 1.6rem;
+}
+
+code {
+    font-size: inherit;
+    font-weight: 700;
+    color: var(--color-onLight);
+    background-color: var(--bg-accent);
+    padding: .2rem .8rem;
+    border-radius: var(--border-radius-s);
+}
+
+table {
+    margin-bottom: .6rem;
+}
+
+tr {
+    border-bottom: .1rem solid var(--color-table-border);
+}
+
+th, td {
+    padding: .6rem 2rem .6rem 0;
+}
+
+.footnote-backref {
+    padding: 1rem;
 }
diff --git a/assets/sass/expander.scss b/assets/sass/expander.scss
@@ -0,0 +1,54 @@
+summary {
+  display: flex;
+
+  &:hover,
+  &:focus {
+    font-weight: 700;
+    text-decoration: underline;
+  }
+}
+
+details {
+  position: relative;
+  padding: 1.2rem;
+  background-color: var(--bg-neutral);
+  border-radius: var(--border-radius-m);
+  margin-bottom: 1.2rem;
+}
+
+details[open] > summary {
+  margin-bottom: 0.5rem;
+}
+
+details > summary {
+  list-style-type: none;
+}
+
+details > div,
+summary {
+  margin-left: 3.2rem;
+}
+
+details > summary::-webkit-details-marker {
+  display: none;
+}
+
+summary::before {
+  content: '\e145' / '';
+  font-family: "material icons round";
+  font-weight: normal;
+  width: 2.4rem;
+  height: 2.4rem;
+  margin-right: .8rem;
+  text-decoration: none;
+  position: absolute;
+  left: 1.2rem;
+}
+
+details[open] > summary::before {
+  content: '\e15b' / '';
+}
+
+details[open] > summary {
+  font-weight: 700;
+}
diff --git a/assets/sass/fonts.scss b/assets/sass/fonts.scss
@@ -3,13 +3,15 @@
   font-style: normal;
   font-weight: 100 700;
   src: url(/fonts/Roboto-VariableFont_wdth,wght.ttf) format('woff2');
+  font-display: swap;
 }
 
 @font-face {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 100 700;
   src: url(/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf) format('woff2');
+  font-display: swap;
 }
 
 body {

diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -10,4 +10,5 @@
 @import "content.scss";
 @import "textHighlight.scss";
 @import "headings.scss";
-@import "form.scss";
+@import "form.scss";
+@import "expander.scss";
diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss
@@ -1,10 +1,15 @@
 #header {
-  position: sticky;
+  position: fixed;
+  width: 100%;
   top: 0;
   box-shadow: 0 .4rem 1rem 0 rgba(0,0,0,.1);
 }
 
 .o-header {
+  background-color: #fff;
+}
+
+.o-header__wrapper {
   display: flex;
   justify-content: space-between;
 
@@ -70,6 +75,7 @@
 
   img {
     width: 5rem;
+    height: 4.7rem;
   }
 }
 

diff --git a/assets/sass/stage.scss b/assets/sass/stage.scss
@@ -1,7 +1,3 @@
-.o-stage {
-    margin-bottom: 4rem;
-}
-
 .o-stage > picture {
     width: 100%;
     max-width: 1320px;

diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
@@ -38,11 +38,17 @@ a.m-teaser {
   }
 }
 
-header {
-  background-color: #fff;
+//space for fixed header
+main > .o-stage {
+  margin-top: 5.3rem;
+}
+
+//space for fixed header
+main > .container:first-child {
+  margin-top: 9.3rem;
 }
 
-main > .container:not(.o-stage) {
+main > .container {
   margin-top: 4rem;
   background-color: var(--bg-default);
   border-radius: var(--border-radius-l);
@@ -55,28 +61,8 @@ main > .container:not(.o-stage) {
 
 img {
   width: 100%;
-  height: auto;
-}
-
-details {
-  position: relative;
-  overflow: hidden;
-  padding: 5px;
-}
-
-details[open] summary ~ * {
-  animation: slideDown 0.5s ease-in-out;
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  height: 100%;
+  border-radius: var(--border-radius-m);
 }
 
 p {

diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss
@@ -14,9 +14,7 @@
 }
 
 .m-teaser img {
-    width: 100%;
     aspect-ratio: 16/9;
-    border-radius: var(--border-radius-l);
 }
 
 .m-teaser__dateline {

diff --git a/content/contact.de.html b/content/contact.de.html
@@ -14,7 +14,7 @@
     </div>
 
     <div class="row">
-        <label for="email">Email:</label>
+        <label for="email">E-Mail-Adresse:</label>
         <input type="email" id="email" name="email" required>
     </div>
 
@@ -24,7 +24,7 @@
     </div>
 
     <div class="row">
-        <input type="submit" value="Senden">
+        <input type="submit" value="Absenden">
     </div>
 </form>
 

diff --git a/content/contact.en.html b/content/contact.en.html
@@ -3,7 +3,7 @@
 ---
 
 <form action="https://api.web3forms.com/submit" method="POST" class="m-form container">
-    <input type="hidden" name="access_key" value="29293094-c9cc-48b7-9ff6-31b42534e211">
+    <input type="hidden" name="access_key" value="0a8dc059-6054-425e-8a5c-d8ba490cd5f7">
     <input type="hidden" name="from_name" value="FIPGuide">
     <input type="hidden" name="subject" value="New Message from FIPGuide">
     <input type="hidden" name="redirect" value='{{< ref "success" >}}'>
@@ -28,4 +28,4 @@
     </div>
 </form>
 
-Or write us an email: <a href="mailto:nextstop@fipguide.org">nextstop@fipguide.org</a>
+Or write us an email: <a href="mailto:nextstop@fipguide.org">nextstop@fipguide.org</a>
diff --git a/content/operator/sncb/index.de.md b/content/operator/sncb/index.de.md
@@ -25,7 +25,7 @@ FIP-Freifahrtscheine und FIP 50 Tickets sind auf Verbindungen der SNCB gültig.
 
 Innerhalb Belgiens ist bei der SNCB keine Reservierung erforderlich und in vielen Zügen auch nicht möglich. Beim grenzüberschreitenden ICE nach Deutschland ist eine Reservierung möglich und war beispielsweise im Sommer 2024 auch verpflichtend (nur bei grenzüberschreitenden Reisen).
 
-{{< expander "InterCity Express (ICE)" >}}
+{{< expander "InterCity Express (ICE)" category >}}
 **Beschreibung:**  
 Hochgeschwindigkeitszüge der Deutschen Bahn, die in Belgien von der SNCB übernommen werden. Sie verkehren zwischen Brüssel (Midi) und Deutschland (Köln / Frankfurt am Main), können jedoch auch innerhalb Belgiens zwischen Bruxelles Midi und Liège-Guillemins mit FIP Fahrscheinen ohne Aufschlag genutzt werden.  
 **Reservierung möglich:** ja  
@@ -35,47 +35,47 @@ Hochgeschwindigkeitszüge der Deutschen Bahn, die in Belgien von der SNCB übern
 5,20 € (2. Klasse)
 {{< /expander >}}
 
-{{< expander "InterCity (IC)" >}}
+{{< expander "InterCity (IC)" category >}}
 **Beschreibung:**  
 Anders als in anderen Ländern keine wirklichen Fernzüge, sondern eher schnelle Regionalzüge mit wenigen Halten.  
 **Reservierung möglich:** nein  
 **Reservierungspflicht:** nein  
 **Kosten für Reservierung:** -
 {{< /expander >}}
 
-{{< expander "Train local oder Lokale trein (L)" >}}
+{{< expander "Train local oder Lokale trein (L)" category >}}
 **Beschreibung:**  
 Regionalbahnen mit Halt an meist allen Stationen, in den Verbindungsauskünften oft auch einfach als "R" für Regionalzug zu finden.  
 **Reservierung möglich:** nein  
 **Reservierungspflicht:** nein  
 **Kosten für Reservierung:** -
 {{< /expander >}}
 
-{{< expander "Train S oder S-Trein (S)" >}}
+{{< expander "Train S oder S-Trein (S)" category >}}
 **Beschreibung:**  
 Eine S-Bahn in den Großräumen Antwerpen, Brüssel, Charleroi, Gent oder Lüttich. Sie verbinden die großen Städte mit den Vororten und halten meist überall. Anders als in anderen Ländern zeichnen sich die S-Bahnen hier nicht durch dichtere Takte als bei anderen Zugkategorien aus. In der Verbindungsauskunft werden auch diese manchmal als "R" für Regionalzug zusammengefasst.  
 **Reservierung möglich:** nein  
 **Reservierungspflicht:** nein  
 **Kosten für Reservierung:** -
 {{< /expander >}}
 
-{{< expander "Train d’heure de pointe oder Piekuurtrein (P)" >}}
+{{< expander "Train d’heure de pointe oder Piekuurtrein (P)" category >}}
 **Beschreibung:**  
 Zusätzliche Züge zu den Hauptverkehrszeiten montags bis freitags morgens sowie am späten Nachmittag, in den Verbindungsauskünften oft auch einfach als "R" für Regionalzug zu finden.  
 **Reservierung möglich:** nein  
 **Reservierungspflicht:** nein  
 **Kosten für Reservierung:** -
 {{< /expander >}}
 
-{{< expander "Express (E/EXP/EXTRA)" >}}
+{{< expander "Express (E/EXP/EXTRA)" category >}}
 **Beschreibung:**  
 Zusätzliche Züge bei hohem Verkehrsaufkommen, vor allem in den Sommermonaten zur belgischen Küste.  
 **Reservierung möglich:** nein  
 **Reservierungspflicht:** nein  
 **Kosten für Reservierung:** -
 {{< /expander >}}
 
-{{< expander "Tourist (T)" >}}
+{{< expander "Tourist (T)" category >}}
 **Beschreibung:**  
 Zusätzliche Züge zu bestimmten touristischen Zielen, oft auch einfach als "R" für Regionalzug zu finden.  
 **Reservierung möglich:** nein  
@@ -159,7 +159,9 @@ Auf Verbindungen von und zum Flughafen Brüssel Zaventem muss für den FIP Freif
 
 ## Erfahrungen
 
+{{< highlight inofficial "1. Klasse" >}}
 Die 1. Klasse in den Zügen der SNCB / NMBS wird oft auch mit 2. Klasse Tickets benutzt. Auch ist die 1. Klasse meist nicht viel komfortabler als die 2. Klasse. Anders als in anderen Ländern lohnt sich daher ein Kauf von 1. Klasse Tickets, um hier mehr Platz und Ruhe zu haben, nur bedingt.
+{{< /highlight >}}
 
 ## Quellen
 

diff --git a/content/operator/sncb/index.en.md b/content/operator/sncb/index.en.md
@@ -25,7 +25,7 @@ FIP vouchers and FIP 50 tickets are valid on SNCB connections. For cross-border
 
 Within Belgium, no reservation is required for SNCB and in many trains, it is not possible. For the cross-border ICE to Germany, a reservation is possible and was mandatory in summer 2024 (only for cross-border journeys).
 
-{{< expander "InterCity Express (ICE)" >}}
+{{< expander "InterCity Express (ICE)" category >}}
 **Description:**  
 High-speed trains of Deutsche Bahn, operated by SNCB in Belgium. They run between Brussels (Midi) and Germany (Cologne / Frankfurt am Main), but can also be used with FIP tickets without surcharge within Belgium between Brussels Midi and Liège-Guillemins.  
 **Reservation possible:** yes  
@@ -35,47 +35,47 @@ High-speed trains of Deutsche Bahn, operated by SNCB in Belgium. They run betwee
 5.20 € (2nd class)
 {{< /expander >}}
 
-{{< expander "InterCity (IC)" >}}
+{{< expander "InterCity (IC)" category >}}
 **Description:**  
 Unlike in other countries, these are not real long-distance trains, but rather fast regional trains with few stops.  
 **Reservation possible:** no  
 **Reservation required:** no  
 **Cost of reservation:** -
 {{< /expander >}}
 
-{{< expander "Train local or Lokale trein (L)" >}}
+{{< expander "Train local or Lokale trein (L)" category >}}
 **Description:**  
 Regional trains stopping at most stations, often simply referred to as "R" for regional train in connection information.  
 **Reservation possible:** no  
 **Reservation required:** no  
 **Cost of reservation:** -
 {{< /expander >}}
 
-{{< expander "Train S or S-Trein (S)" >}}
+{{< expander "Train S or S-Trein (S)" category >}}
 **Description:**  
 A suburban train in the metropolitan areas of Antwerp, Brussels, Charleroi, Ghent, or Liège. They connect the major cities with the suburbs and usually stop everywhere. Unlike in other countries, the S-trains here do not have denser schedules than other train categories. In the connection information, these are sometimes also summarized as "R" for regional train.  
 **Reservation possible:** no  
 **Reservation required:** no  
 **Cost of reservation:** -
 {{< /expander >}}
 
-{{< expander "Train d’heure de pointe or Piekuurtrein (P)" >}}
+{{< expander "Train d’heure de pointe or Piekuurtrein (P)" category >}}
 **Description:**  
 Additional trains during peak hours from Monday to Friday mornings and late afternoons, often simply referred to as "R" for regional train in connection information.  
 **Reservation possible:** no  
 **Reservation required:** no  
 **Cost of reservation:** -
 {{< /expander >}}
 
-{{< expander "Express (E/EXP/EXTRA)" >}}
+{{< expander "Express (E/EXP/EXTRA)" category >}}
 **Description:**  
 Additional trains during high traffic periods, especially in the summer months to the Belgian coast.  
 **Reservation possible:** no  
 **Reservation required:** no  
 **Cost of reservation:** -
 {{< /expander >}}
 
-{{< expander "Tourist (T)" >}}
+{{< expander "Tourist (T)" category >}}
 **Description:**  
 Additional trains to certain tourist destinations, often simply referred to as "R" for regional train.  
 **Reservation possible:** no  
@@ -156,7 +156,9 @@ For connections to and from Brussels Zaventem Airport, a surcharge must be paid
 
 ## Experiences
 
-The 1st class in SNCB / NMBS trains is often used with 2nd class tickets. Also, the 1st class is usually not much more comfortable than the 2nd class. Unlike in other countries, buying 1st class tickets to have more space and quiet is only worthwhile to a limited extent.
+{{< highlight inofficial "First class" >}}
+The first class in SNCB / NMBS trains is often used with second class tickets. Also, the 1st class is usually not much more comfortable than the second class. Unlike in other countries, buying first class tickets to have more space and quiet is only worthwhile to a limited extent.
+{{< /highlight >}}
 
 ## Sources