fix: expander layout rework

Author: lenderom

archetypes/country/index.de.md

@@ -38,7 +38,7 @@ params:
 Nur Grenzpunkte an der Landesgrenze zu anderen Ländern. Diese sollten aufgeführt sein als Land (Bahngesellschaft) und ihre Grenzpunkte.
 -->
 
-{{% expander "Grenzpunkte" %}}
+{{% expander "Grenzpunkte" border %}}
 | Land | Grenzpunkte |
 | --- | --- |
 {{% /expander %}}

archetypes/country/index.en.md

@@ -38,7 +38,7 @@ params:
 Only border points at the national border with other countries. These should be listed as country (railway operator) and their border points.
 -->
 
-{{% expander "Border Points" %}}
+{{% expander "Border Points" border %}}
 | Country | Border Points |
 | --- | --- |
 {{% /expander %}}

assets/sass/_variables.scss

@@ -8,16 +8,27 @@ body {
   --pagefind-ui-scale: 1;
   --pagefind-ui-text: #000;
   --link-default: #BA3D12;
+  --link-default-rgb: 186, 61, 18;
   --link-hovered: #8F2501;
+  --link-hovered-rgb: 143, 37, 1;
   --link-special: #000000;
+  --link-special-rgb: 0, 0, 0;
   --bg-default: #FFFFFF;
+  --bg-default-rgb: 255, 255, 255;
   --bg-neutral: #EBE9E1;
+  --bg-neutral-rgb: 235, 233, 225;
   --bg-accent: #FFD900;
+  --bg-accent-rgb: 255, 217, 0;
   --bg-accent2: #DABA00;
+  --bg-accent2-rgb: 218, 186, 0;
   --bg-accent3: #fff284;
+  --bg-accent3-rgb: 255, 242, 132;
   --color-onDark: #FFFFFF;
+  --color-onDark-rgb: 255, 255, 255;
   --color-onLight: #000000;
+  --color-onLight-rgb: 0, 0, 0;
   --color-table-border: #5B5B5B;
+  --color-table-border-rgb: 91, 91, 91;
   --border-radius-s: .4rem;
   --border-radius-m: .8rem;
   --border-radius-l: 1.2rem;

assets/sass/booking.scss

@@ -1,4 +1,5 @@
 .o-booking__summary {
+    position: relative;
     &:hover,
     &:focus {
         .o-booking__title-text {
@@ -7,6 +8,22 @@
     }
 }
 
+.details-screen > .o-booking__summary::before {
+  content: "keyboard_arrow_down";
+  position: absolute;
+  right: 0;
+  font-size: 2.4rem;
+  top: calc(50% - 1.2rem);
+  @extend .material-symbols-rounded
+}
+
+.details-screen[open] > .o-booking__summary::before {
+  content: "keyboard_arrow_up";
+  font-size: 2.4rem;
+  top: calc(50% - 1.2rem);
+  @extend .material-symbols-rounded
+}
+
 .o-booking__header-content {
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr;
@@ -44,7 +61,7 @@
 
 .o-booking__classes {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
     flex-direction: column;
     > p {
@@ -65,32 +82,32 @@
 .o-booking__title {
     display: flex;
     gap: 0.5rem;
-    align-items: center;
+    align-items: flex-start;
     font-weight: 600;
 }
 
+.o-booking__title-text{
+    line-height: 1.1;
+}
+
 .o-booking__subtitle {
     font-weight: 400;
     font-style: italic;
     font-size: 1.4rem;
 }
 
 .o-booking__meta{
-    text-align: center;
+    text-align: left;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     justify-content: center;
 
     @media (max-width: #{$breakpoint-md}) {
         align-items: start;
     }
 }
 
-.o-booking__open-in-new {
-    margin-top: 1rem;
-}
-
 .o-booking__links {
     margin-top: 1.5rem;
     display: flex;

assets/sass/button.scss

@@ -4,16 +4,14 @@ a.c-button {
     align-items: center;
     gap: 0.4rem;
     border: 2px solid var(--link-default);
-    border-radius: 4px;
+    border-radius: var(--border-radius-m);
     font-size: 1.5rem;
     cursor: pointer;
     text-decoration: none;
     transition: background 0.2s, color 0.2s;
 
     &:hover,
     &:focus {
-        background: var(--link-hovered);
-        border-color: var(--link-hovered);
-        color: #fff;
+        background: rgba(var(--link-hovered-rgb), 0.15);
     }
 }

assets/sass/expander.scss

@@ -1,8 +1,11 @@
 .o-expander__summary {
   display: flex;
 
-  &:hover,
-  &:focus {
+  gap: 0.5rem;
+  align-items: center;
+
+  .o-expander__summary-text:hover,
+  .o-expander__summary-text:focus {
     font-weight: 700;
     text-decoration: underline;
   }
@@ -30,7 +33,7 @@ details > summary {
 
 .details-screen.o-expander > div,
 .details-screen > .o-expander__summary {
-  margin-left: 3.2rem;
+  margin-right: 3.2rem;
 }
 
 details > div {
@@ -46,15 +49,15 @@ details > summary::-webkit-details-marker {
 }
 
 .details-screen > .o-expander__summary::before {
-  content: "add";
+  content: "keyboard_arrow_down";
   position: absolute;
-  left: 1.2rem;
+  right: 1.2rem;
   font-size: 2.4rem;
   @extend .material-symbols-rounded
 }
 
 .details-screen[open] > .o-expander__summary::before {
-  content: "remove";
+  content: "keyboard_arrow_up";
   font-size: 2.4rem;
   @extend .material-symbols-rounded
 }

content/booking/db_ticket_office/index.de.md

@@ -5,11 +5,11 @@ description: "Buchungsinformationen für die Deutsche Bahn Reisezentren."
 
 params:
     classes:
-        first: "€6.90"
-        second: "€5.50"
+        first: "6,90€"
+        second: "5,50€"
     fip_50: true
     reservations: true
-    additional_info_link: "https://www.bahnhof.de/en/service/travel-centre"
+    additional_info_link: "https://www.bahnhof.de/service/reisezentrum"
     type: "onsite"
 ---
 

content/country/belgium/index.de.md

@@ -23,7 +23,7 @@ Belgien verfügt über ein ausgedehntes und dichtes Bahnnetz. Im Gegensatz zu an
 
 ## Anreise und Grenzpunkte
 
-{{% expander "Grenzpunkte" %}}
+{{% expander "Grenzpunkte" border %}}
 | Land | Grenzpunkte |
 | --- | --- |
 | Luxemburg (CFL) | Athus, Gouvy (fr), Sterpenich (fr) |

content/country/belgium/index.en.md

@@ -23,7 +23,7 @@ Belgium has an extensive and dense rail network. Unlike other countries, there i
 
 ## Arrival
 
-{{% expander "Border Points" %}}
+{{% expander "Border Points" border %}}
 | Country | Border Points |
 | --- | --- |
 | Luxembourg (CFL) | Athus, Gouvy (fr), Sterpenich (fr) |

content/country/denmark/index.de.md

@@ -28,7 +28,7 @@ Die Hauptstrecken in Dänemark sind die Nord-Süd-Verbindung Aalborg-Aarhus-Kold
 
 ## Anreise und Grenzpunkte
 
-{{% expander "Grenzpunkte" %}}
+{{% expander "Grenzpunkte" border %}}
 | Land | Grenzpunkte |
 | --- | --- |
 | Deutschland (DB) | Flensburg (Gr), Puttgarden (über Rødby Faerge), Tønder, Warnemünde (über Gedser) |

content/country/denmark/index.en.md

@@ -28,7 +28,7 @@ Trains in Denmark typically run on a regular schedule and are generally punctual
 
 ## Arrival and Border Points
 
-{{% expander "Border Points" %}}
+{{% expander "Border Points" border %}}
 | Country | Border Points |
 | --- | --- |
 | Germany (DB) | Flensburg (Gr), Puttgarden (via Rødby Faerge), Tønder, Warnemünde (via Gedser) |

content/country/netherlands/index.de.md

@@ -30,7 +30,7 @@ Besonders ist in den Niederlanden, dass sich an allen etwas größeren Bahnhöfe
 
 ## Anreise und Grenzpunkte
 
-{{% expander "Grenzpunkte" %}}
+{{% expander "Grenzpunkte" border %}}
 | Land | Grenzpunkte |
 | --- | --- |
 | Deutschland (DB) | Bentheim (Gr), Emmerich (Gr), Herzogenrath (Gr), Venlo (Gr), Weener (Gr) |

content/country/netherlands/index.en.md

@@ -30,7 +30,7 @@ A special feature in the Netherlands is that almost all larger stations have tic
 
 ## Arrival and Border Points
 
-{{% expander "Border Points" %}}
+{{% expander "Border Points" border %}}
 | Country | Border Points |
 | --- | --- |
 | Germany (DB) | Bentheim (Gr), Emmerich (Gr), Herzogenrath (Gr), Venlo (Gr), Weener (Gr) |

content/country/slovakia/index.de.md

@@ -23,7 +23,7 @@ Ein besonderes Highlight ist die Fahrt in der hohen Tatra mit der Tatranská že
 
 ## Anreise und Grenzpunkte
 
-{{% expander "Grenzpunkte" %}}
+{{% expander "Grenzpunkte" border %}}
 | Land | Grenzpunkte |
 | --- | --- |
 | Tschechien (ČD) | Čadca (Gr), Hodonin (Gr), Horní Lideč (Gr), Kúty (Gr), Myjava (Gr), Nemšová (Gr), Skalica na Slovensku (Gr) |

content/country/slovakia/index.en.md

@@ -22,7 +22,7 @@ Slovakia has a dense rail network, which mainly consists of two main routes. One
 
 ## Arrival and Border Points
 
-{{% expander "Border points" %}}
+{{% expander "Border Points" border %}}
 | Country | Border Points |
 | --- | --- |
 | Czechia (ČD) | Čadca (Gr), Hodonin (Gr), Horní Lideč (Gr), Kúty (Gr), Myjava (Gr), Nemšová (Gr), Skalica na Slovensku (Gr) |

content/country/spain/index.de.md

@@ -16,7 +16,7 @@ In Spanien ist die Nutzung von FIP nicht immer einfach, da hier einfach einsteig
 
 ## Anreise und Grenzpunkte
 
-{{% expander "Grenzpunkte" %}}
+{{% expander "Grenzpunkte" border %}}
 | Land | Grenzpunkte |
 | --- | --- |
 | Portugal (CP) | Ayamonte, Badajoz (fr), Barca de Alva (fr), Fuentes de Onoro (fr), Valença (fr), Valencia de Alcántara (fr) |

content/country/spain/index.en.md

@@ -22,7 +22,7 @@ Stations usually have ticket barriers, which require a valid digital or analog t
 
 ## Arrival and Border Points
 
-{{% expander "Border points" %}}
+{{% expander "Border Points" border %}}
 | Country | Border Points |
 | --- | --- |
 | Portugal (CP) | Ayamonte, Badajoz (fr), Barca de Alva (fr), Fuentes de Onoro (fr), Valença (fr), Valencia de Alcántara (fr) |

content/operator/dsb/index.de.md

@@ -27,36 +27,36 @@ FIP Freifahrtscheine und FIP 50 Tickets sind auf Verbindungen der DSB gültig. B
 
 Innerhalb von Dänemark sind Reservierungen möglich, aber nicht verpflichtend. Bei den grenzüberschreitenden Reisen von und nach Deutschland sind die EC-Züge Hamburg - Kopenhagen im Normalfall im Sommer reservierungspflichtig.
 
-{{% expander "InterCityLyn (ICL)" category %}}
+{{% expander "InterCityLyn (ICL)" traincategory category %}}
 **Beschreibung:** \
 InterCityLyn-Züge sind die schnellsten Züge der DSB. Sie verkehren mit bis zu 180 km/h mit wenigen Halten auf den Hauptstrecken durch das Land. So verbinden sie beispielsweise Aalborg, Aarhus und Kopenhagen miteiander. \
 **Reservierung möglich:** ja \
 **Reservierungspflicht:** nein
 {{% /expander %}}
 
-{{% expander "InterCity (IC)" category %}}
+{{% expander "InterCity (IC)" traincategory category %}}
 **Beschreibung:** \
 InterCity-Züge sind ähnlich wie die ICL-Züge, halten jedoch öfter und sind langsamer. Sie verkehren auch grenzüberschreitend ins deutsche Flensburg. \
 **Reservierung möglich:** ja \
 **Reservierungspflicht:** nein
 {{% /expander %}}
 
-{{% expander "EuroCity (EC)" category %}}
+{{% expander "EuroCity (EC)" traincategory category %}}
 **Beschreibung:** \
 EuroCity-Züge verkehren grenzüberschreitend auf der Strecke zwischen Hamburg und Kopenhagen, die aktuell u. a. über Padborg, Kolding und Odense fahren. Sie verkehren Stand 2025 mit ehemaligen IC-Wagen der Deutschen Bahn. Eine Reservierung ist bei einer grenzüberschreitenden Fahrt empfehlenswert, in der Hauptsaison (Sommer) meist auch verpflichtend. \
 **Reservierung möglich:** ja \
 **Reservierungspflicht:** Nur in der Hauptsaison (Sommer)
 {{% /expander %}}
 
-{{% expander "Regionalzug (R) ℹ️" category %}}
+{{% expander "Regionalzug (R) ℹ️" traincategory category %}}
 **Beschreibung:** \
 Regional-Züge stellen den Nahverkehr zwischen verschiedenen Orten sicher. Sie halten außerhalb des S-Bahn-Netzes in Kopenhagen an allen Stationen und sind daher eher langsam. \
 ℹ️ Auch Züge von anderen Anbietern werden als "R" angezeigt, daher unbedingt vorher schauen, ob der Betreiber des Zuges die DSB ist. \
 **Reservierung möglich:** nein \
 **Reservierungspflicht:** nein
 {{% /expander %}}
 
-{{% expander "S-tog (S)" category %}}
+{{% expander "S-tog (S)" traincategory category %}}
 **Beschreibung:** \
 Die S-Bahn Kopenhagen wird ebenfalls von der DSB betrieben und kann daher auch mit FIP-Fahrkarten genutzt werden. Sie verkehrt im dichten Takt mit Halt an allen Stationen und ist mit S-Bahn-Systemen in anderen Ländern gut zu vergleichen. \
 **Reservierung möglich:** nein \

content/operator/dsb/index.en.md

@@ -23,36 +23,36 @@ FIP Coupons and FIP 50 Tickets are valid on DSB connections. For cross-border jo
 ## Train Categories and Reservations
 Within Denmark, reservations are possible but not mandatory. For cross-border journeys to and from Germany, the EC trains Hamburg - Copenhagen are usually reservation-required during the summer.
 
-{{% expander "InterCityLyn (ICL)" category %}}
+{{% expander "InterCityLyn (ICL)" traincategory category %}}
 **Description:** \
 InterCityLyn trains are the fastest trains of DSB. They operate at speeds of up to 180 km/h with few stops on the main routes across the country, connecting cities like Aalborg, Aarhus, and Copenhagen. \
 **Reservation possible:** yes \
 **Reservation mandatory:** no
 {{% /expander %}}
 
-{{% expander "InterCity (IC)" category %}}
+{{% expander "InterCity (IC)" traincategory category %}}
 **Description:** \
 InterCity trains are similar to ICL trains but stop more frequently and are slower. They also operate cross-border to Flensburg, Germany. \
 **Reservation possible:** yes \
 **Reservation mandatory:** no
 {{% /expander %}}
 
-{{% expander "EuroCity (EC)" category %}}
+{{% expander "EuroCity (EC)" traincategory category %}}
 **Description:** \
 EuroCity trains operate cross-border on the route between Hamburg and Copenhagen, currently via Padborg, Kolding, and Odense. As of 2025, they use former IC coaches of Deutsche Bahn. A reservation is recommended for cross-border journeys and usually mandatory during the peak season (summer). \
 **Reservation possible:** yes \
 **Reservation mandatory:**  Only in the peak season (summer)
 {{% /expander %}}
 
-{{% expander "Regional Train (R) ℹ️" category %}}
+{{% expander "Regional Train (R) ℹ️" traincategory category %}}
 **Description:** \
 Regional trains provide local connections between various locations. Outside the S-train network in Copenhagen, they stop at all stations and are therefore slower. \
 ℹ️ Trains from other operators are also displayed as "R," so always check beforehand if the operator is DSB. \
 **Reservation possible:** no \
 **Reservation mandatory:** no
 {{% /expander %}}
 
-{{% expander "S-tog (S)" category %}}
+{{% expander "S-tog (S)" traincategory category %}}
 **Description:** \
 The Copenhagen S-train is also operated by DSB and can therefore be used with FIP tickets. It operates at frequent intervals, stopping at all stations, and is comparable to S-train systems in other countries. \
 **Reservation possible:** no \