fipguide · MoritzWeber0 · Oct 14, 2025 · Oct 12, 2025 · Oct 12, 2025 · Oct 12, 2025
diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss
@@ -32,15 +32,16 @@ html {
   --border-radius-s: 0.4rem;
   --border-radius-m: 0.8rem;
   --border-radius-l: 1.6rem;
-  --pagefind-ui-border-radius: var(--border-radius-l);
-  --pagefind-ui-border: #000;
+  --pagefind-ui-border-radius: var(--border-radius-l) !important;
+  --pagefind-ui-border: #000 !important;
   --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
   --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
   --highlight-color-tip: #c4f2ff;
   --highlight-color-inofficial: #f0f3f5;
   --highlight-color-important: #ffe3d9;
   --border: 0.1rem solid transparent;
   --pagefind-ui-font: roboto, Arial, Helvetica, sans-serif;
+  --outline-focus-indicator: #257fa8;
 }
 
 html[data-theme="dark"] {
@@ -64,4 +65,5 @@ html[data-theme="dark"] {
   --highlight-color-inofficial: #2a2d30;
   --highlight-color-important: #4a2a1a;
   --border: 0.1rem solid #3d444d;
+  --outline-focus-indicator: #2e9acb;
 }
diff --git a/assets/sass/anchorlink.scss b/assets/sass/anchorlink.scss
@@ -53,14 +53,18 @@
   color: var(--link-default);
   border: none;
   background-color: transparent;
-  transition: all 0.3s ease;
+  transition:
+    background-color 0.3s ease,
+    opacity 0.3s ease;
 
   &:hover,
   &:focus {
     background-color: var(--bg-neutral);
     opacity: 1;
   }
 
+  @include focus-indicator(0.2rem);
+
   @media print {
     display: none;
   }

diff --git a/assets/sass/button.scss b/assets/sass/button.scss
@@ -3,7 +3,7 @@
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
-  border: 2px solid var(--link-default);
+  border: 0.2rem solid var(--link-default);
   border-radius: var(--border-radius-m);
   font-size: 1.5rem;
   cursor: pointer;
@@ -18,4 +18,6 @@
   &:focus {
     background: rgba($link-hovered, 0.15);
   }
+
+  @include focus-indicator(0.2rem);
 }
diff --git a/assets/sass/contentNavigation.scss b/assets/sass/contentNavigation.scss
@@ -23,6 +23,10 @@
       margin-bottom: 0;
     }
   }
+
+  li {
+    margin-bottom: 0.3rem;
+  }
 }
 
 .o-aside__header {
@@ -34,6 +38,9 @@
   display: flex;
   align-items: flex-start;
   gap: 0.4rem;
+  width: fit-content;
+
+  @include focus-indicator(0.1rem);
 }
 
 .o-aside__backlink-text {

diff --git a/assets/sass/dropdown.scss b/assets/sass/dropdown.scss
@@ -16,7 +16,7 @@
   &:hover,
   &:focus {
     color: var(--link-hovered);
-    transition: all 0.3s ease;
+    transition: color 0.3s ease;
 
     & > :not(.material-symbols-rounded) {
       text-decoration: underline;

diff --git a/assets/sass/expander.scss b/assets/sass/expander.scss
@@ -8,6 +8,8 @@
   gap: 0.5rem;
   align-items: center;
   transition: background 0.3s ease;
+  justify-content: space-between;
+  border-radius: var(--border-radius-m);
 
   &:not(.o-expander__summary--booking) {
     font-weight: 700;
@@ -19,10 +21,11 @@
       text-decoration: underline;
     }
 
-    border-radius: var(--border-radius-m);
     background: rgba($link-hovered, 0.15);
   }
 
+  @include focus-indicator(0.2rem);
+
   &--booking {
     &:hover,
     &:focus {
@@ -53,7 +56,6 @@ details {
   background-color: var(--bg-neutral);
   border-radius: var(--border-radius-m);
   margin-bottom: 1.2rem;
-  border: var(--border);
 
   table {
     width: 100%;
@@ -65,10 +67,6 @@ details > summary {
   list-style-type: none;
 }
 
-.details-screen > .o-expander__summary {
-  padding-right: 3.2rem;
-}
-
 details > div {
   overflow-x: auto;
 }
@@ -77,19 +75,18 @@ details > summary::-webkit-details-marker {
   display: none;
 }
 
-.details-screen > .o-expander__summary::before {
-  content: "keyboard_arrow_down";
-  position: absolute;
-  right: 1.2rem;
-  font-size: 2.4rem;
-  align-self: center;
-  @extend .material-symbols-rounded;
+.o-expander__summary > span {
+  transition: transform 0.2s;
+}
+
+.o-expander__summary > div {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 }
 
-.details-screen[open] > .o-expander__summary::before {
-  content: "keyboard_arrow_up";
-  font-size: 2.4rem;
-  @extend .material-symbols-rounded;
+.details-screen[open] > .o-expander__summary > span {
+  transform: rotate(180deg);
 }
 
 details[open] > .o-expander__summary:not(.o-expander__summary--booking) {

diff --git a/assets/sass/form.scss b/assets/sass/form.scss
@@ -28,6 +28,8 @@
     @media (min-width: #{$breakpoint-md}) {
       width: 50%;
     }
+
+    @include focus-indicator(0.2rem);
   }
 }
 

diff --git a/assets/sass/interactiveMap.scss b/assets/sass/interactiveMap.scss
@@ -67,11 +67,14 @@
     align-items: center;
     justify-content: center;
     font-size: 3rem;
-    transition: all 0.2s ease;
+    transition: background-color 0.2s ease;
 
-    &:hover {
+    &:hover,
+    &:focus {
       background-color: var(--link-hovered);
     }
+
+    @include focus-indicator(0.2rem);
   }
 
   &__legend {

diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss
@@ -194,6 +194,7 @@ menu > li > menu {
   align-items: center;
   white-space: nowrap;
   line-height: 1;
+  border-radius: var(--border-radius-m);
 
   &:hover,
   &:focus {

diff --git a/assets/sass/search.scss b/assets/sass/search.scss
@@ -16,10 +16,7 @@
     border: var(--border);
     box-shadow: var(--box-shadow);
 
-    &:focus {
-      outline: 0.2rem solid orange;
-      outline-offset: 0.1rem;
-    }
+    @include focus-indicator(0.2rem);
 
     &::placeholder {
       opacity: 0.7;
@@ -48,22 +45,17 @@
     padding: 0 1rem 1rem 1rem;
     overscroll-behavior: contain;
     height: 35rem;
+    top: 0.4rem;
     overflow-y: scroll;
     position: relative;
-    top: -0.7rem;
-    border-left: var(--pagefind-ui-border-width) solid var(--pagefind-ui-border);
-    border-right: var(--pagefind-ui-border-width) solid
-      var(--pagefind-ui-border);
-    border-bottom: var(--pagefind-ui-border-width) solid
-      var(--pagefind-ui-border);
-    border-bottom-left-radius: var(--pagefind-ui-border-radius);
-    border-bottom-right-radius: var(--pagefind-ui-border-radius);
+    border-radius: var(--pagefind-ui-border-radius);
     z-index: 3;
   }
 
   .pagefind-ui__result-link {
     color: var(--link-default);
     text-decoration: underline;
+    border-radius: var(--border-radius-s);
 
     &:hover,
     &:focus {
@@ -76,10 +68,8 @@
     color: var(--link-hovered);
   }
 
-  .pagefind-ui__result-link:focus {
-    outline: 0.2rem solid orange;
-    outline-offset: 0.1rem;
-    border-radius: var(--border-radius-s);
+  .pagefind-ui__result-link {
+    @include focus-indicator(0.2rem);
   }
 
   .pagefind-ui__result-link::before {
@@ -92,11 +82,14 @@
   }
 
   .pagefind-ui__button {
-    background-color: var(--bg-accent);
+    border: 0.2rem solid var(--link-default);
+    border-radius: var(--border-radius-m);
+    background: transparent;
+    color: var(--body-color);
 
     &:hover,
     &:focus {
-      background-color: var(--bg-accent2);
+      background: rgba($link-hovered, 0.15);
     }
   }
 }

diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss
@@ -40,20 +40,35 @@ ol {
   }
 }
 
+@mixin focus-indicator($offset) {
+  &:focus,
+  &:focus-visible {
+    outline: var(--outline-focus-indicator) solid 0.2rem;
+    outline-offset: $offset;
+  }
+}
+
 button {
   font-size: 1.8rem;
+  border-radius: var(--border-radius-s);
+  @include focus-indicator(0.2rem);
 }
 
 a {
   color: var(--link-default);
-  transition: all 0.3s ease;
+  transition:
+    color 0.3s ease,
+    background-color 0.3s ease;
   text-underline-offset: 0.2rem;
+  border-radius: var(--border-radius-s);
 
   &:hover,
   &:focus {
     color: var(--link-hovered);
   }
 
+  @include focus-indicator(0.2rem);
+
   @media print {
     text-decoration: none;
     color: var(--bs-body-color);

diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss
@@ -21,6 +21,8 @@
     }
   }
 
+  @include focus-indicator(0.3rem);
+
   .material-symbols-rounded {
     font-size: 2.4rem;
     margin-top: 1rem;

diff --git a/content/operator/euskotren/index.de.md b/content/operator/euskotren/index.de.md
@@ -26,7 +26,7 @@ Das Personal vor Ort in den Euskotren Kundenzentren stellt dir gegen Vorlage des
 Das Ticket wird auch für Angehörige mit eigenem FIP-Ausweis ausgestellt. Es ist inklusive des Ausstellungstages für 7 Tage gültig und du kannst es für das gesamte Euskotren-Netz mit Ausnahme von Regionalbuslinien und der Museumsbahn nutzen.
 Du nutzt das "Euskotren FIP Ticket", um die Bahnsteinbarrieren zu passieren. Nach Ablauf kannst du das Ticket mehrfach pro Jahr neu ausstellen lassen. Die sonst übliche Limitierung bei FIP Freifahrtscheinen wendet Euskotren nicht an.
 
-<br style="clear:both" />
+<br style="clear:both" aria-hidden="true" />
 
 {{% highlight tip %}}
 Einige Zugbetreiber stellen auch Freifahrtscheine für Euskotren aus. Nach unserem Stand haben diese keinen Nutzen, die Bahnsteigbarrieren können damit nicht passiert werden. Stattdessen empfehlen wir, das Ticket vor Ort ausstellen zu lassen.

diff --git a/content/operator/euskotren/index.en.md b/content/operator/euskotren/index.en.md
@@ -26,7 +26,7 @@ The staff at Euskotren customer centers will issue you a special "Euskotren FIP
 The ticket is also issued for relatives with their own FIP card. It is valid for 7 days including the day of issue and you can use it for the entire Euskotren network except for regional bus lines and the museum railway.
 You use the "Euskotren FIP Ticket" to pass through platform barriers. After expiry, you can have the ticket reissued multiple times per year. Euskotren does not apply the usual limitation for FIP Coupons.
 
-<br style="clear:both" />
+<br style="clear:both" aria-hidden="true" />
 
 {{% highlight tip %}}
 Some train operators also issue FIP Coupones for Euskotren. According to our information, these have no use, as platform barriers cannot be passed with them. Instead, we recommend having the ticket issued on site.

diff --git a/content/operator/euskotren/index.fr.md b/content/operator/euskotren/index.fr.md
@@ -26,7 +26,7 @@ Le personnel des centres clients Euskotren vous délivre un "Euskotren FIP Ticke
 Le billet est également délivré aux accompagnants avec leur propre carte FIP. Il est valable 7 jours y compris le jour d'émission et vous pouvez l'utiliser pour l'ensemble du réseau Euskotren à l'exception des lignes de bus régionales et du train musée.
 Vous utilisez l'"Euskotren FIP Ticket" pour passer les barrières de quai. Après expiration, vous pouvez faire renouveler le billet plusieurs fois par an. Euskotren n'applique pas la limitation habituelle pour les Coupons FIP.
 
-<br style="clear:both" />
+<br style="clear:both" aria-hidden="true" />
 
 {{% highlight tip %}}
 Certains opérateurs ferroviaires délivrent également des titres de transport gratuits pour Euskotren. Selon nos informations, ceux-ci n'ont aucune utilité, les barrières de quai ne peuvent pas être franchies avec. Nous recommandons plutôt de faire délivrer le billet sur place.

diff --git a/i18n/de.yaml b/i18n/de.yaml
@@ -16,6 +16,7 @@ booking:
   visit-booking-website: Zur Buchungsseite
 contentNavigation:
   button: Inhaltsübersicht öffnen und schließen
+  relatedCountries: Länder, in den der Betreibers aktiv ist
   title: Inhaltsübersicht
 countries:
   overview: Länder mit FIP Akzeptanz
@@ -30,8 +31,8 @@ country:
   other: Länder
 editPage: Seite bearbeiten
 footer-love:
-  aria-label: Made with love in Europa
-  text: Made with ♥️ in Europa
+  aria-label: Made with love in Europe
+  text: Made with ♥️ in Europe
 general: Übergreifendes
 highlight:
   important: Wichtige Information
@@ -74,7 +75,9 @@ related-countries: Verwandte Länder
 related-news: Verwandte News
 related-operators: Verwandte Betreiber
 reportError: Melde ein Fehler
-search-placeholder: Suche
+search:
+  label: Durchsuche alle Seiteninhalte
+  placeholder: Suche
 skipToContent: Zum Inhalt springen
 support:
   text: >-
@@ -88,7 +91,9 @@ theme:
   switch-to-dark: Zu dunklem Modus wechseln
   switch-to-light: Zu hellem Modus wechseln
 toc_name: Inhalt
-updateDate: Zuletzt aktualisiert
+updateDate:
+  aria-label: Öffne die Commit-Verlauf der Seite
+  label: Zuletzt aktualisiert
 wip: >-
   An dieser Seite wird noch gearbeitet und Inhalte können unvollständig sein.
   Wir freuen uns, wenn du zur Verbesserung dieser Seite beträgst. [Mehr
-Original file line number
+Diff line change
@@ Expand Up / @@ -28,6 +28,8 @@ @@
         @media (min-width: #{$breakpoint-md}) {
           width: 50%;
         }
+        @include focus-indicator(0.2rem);
       }
     }
@@ Expand Down @@