From f008625711785660767f313e35df253b04c6ffa8 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Tue, 9 Sep 2025 22:50:05 +0200
Subject: [PATCH 1/3] feat: Add hover effects and consistent styles for
 expanders

---
 assets/sass/expander.scss        | 32 ++++++++++++++++++++++++--------
 layouts/partials/booking.html    |  2 ++
 layouts/shortcodes/expander.html |  8 ++++----
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/assets/sass/expander.scss b/assets/sass/expander.scss
index 4f9862fa..532ba4d8 100644
--- a/assets/sass/expander.scss
+++ b/assets/sass/expander.scss
@@ -1,15 +1,25 @@
+.o-expander > hr {
+  margin-top: 0;
+}
+
 .o-expander__summary {
   display: flex;
-
+  padding: 1.2rem;
   gap: 0.5rem;
   align-items: center;
 
+  &:not(.o-expander__summary--booking) {
+    font-weight: 700;
+  }
+
   &:hover,
   &:focus {
     .o-expander__summary-text {
-      font-weight: 700;
       text-decoration: underline;
     }
+
+    border-radius: var(--border-radius-m);
+    background: rgba($link-hovered, 0.15);
   }
 
   &--booking {
@@ -22,29 +32,35 @@
   }
 }
 
+.details-screen[open] > .o-expander__summary {
+  &:hover,
+  &:focus {
+    border-radius: var(--border-radius-m) var(--border-radius-m) 0 0;
+  }
+}
+
+.o-expander__content {
+  padding: 0 1.2rem 1.2rem 1.2rem;
+}
+
 .details-print {
   display: none;
 }
 
 details {
   position: relative;
-  padding: 1.2rem;
   background-color: var(--bg-neutral);
   border-radius: var(--border-radius-m);
   margin-bottom: 1.2rem;
   border: var(--border);
 }
 
-details[open] > .o-expander__summary {
-  margin-bottom: 0.5rem;
-}
-
 details > summary {
   list-style-type: none;
 }
 
 .details-screen > .o-expander__summary {
-  margin-right: 3.2rem;
+  padding-right: 3.2rem;
 }
 
 details > div {
diff --git a/layouts/partials/booking.html b/layouts/partials/booking.html
index c5f3abdc..a27d0300 100644
--- a/layouts/partials/booking.html
+++ b/layouts/partials/booking.html
@@ -34,6 +34,7 @@
     </div>
 </summary>
 <hr aria-hidden="true">
+<div class="o-expander__content">
 {{- if .info -}}
 <div class="o-booking__info">
     {{- .info | .original_page.RenderString  -}}
@@ -54,3 +55,4 @@
 </div>
 
 {{ partial "booking-links" .page }}
+</div>
diff --git a/layouts/shortcodes/expander.html b/layouts/shortcodes/expander.html
index d8956e64..3f6ff69e 100644
--- a/layouts/shortcodes/expander.html
+++ b/layouts/shortcodes/expander.html
@@ -6,8 +6,8 @@
     {{- partial "icon" (index $iconMapping $param) -}}
     <span class="o-expander__summary-text">{{ (.Get 0) }}</span>
 </summary>
-<div>
-    <hr aria-hidden="true">
+<hr aria-hidden="true">
+<div class="o-expander__content">
     {{ .Inner }}
 </div>
 </details>
@@ -21,8 +21,8 @@
 <summary class="o-expander__summary">
     <span class="o-expander__summary-text">{{ (.Get 0) }}</span>
 </summary>
-<div>
-    <hr aria-hidden="true">
+<hr aria-hidden="true">
+<div class="o-expander__content">
     {{ .Inner }}
 </div>
 </details>

From f4db2636d5aaea84d7615dd920cebd782d4152fb Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Thu, 11 Sep 2025 08:35:12 +0200
Subject: [PATCH 2/3] feat: Move expander padding to content

---
 assets/sass/expander.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/sass/expander.scss b/assets/sass/expander.scss
index 532ba4d8..2dc99107 100644
--- a/assets/sass/expander.scss
+++ b/assets/sass/expander.scss
@@ -1,5 +1,5 @@
 .o-expander > hr {
-  margin-top: 0;
+  margin: 0;
 }
 
 .o-expander__summary {
@@ -40,7 +40,7 @@
 }
 
 .o-expander__content {
-  padding: 0 1.2rem 1.2rem 1.2rem;
+  padding: 1.2rem;
 }
 
 .details-print {

From 8ba9410e59467c5a7eeccf9dbc724324aaabe63e Mon Sep 17 00:00:00 2001
From: Robert Schuster <robert.r.schuster@deutschebahn.com>
Date: Thu, 11 Sep 2025 15:44:53 +0200
Subject: [PATCH 3/3] feat: add transition for bg on hover

---
 assets/sass/expander.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/sass/expander.scss b/assets/sass/expander.scss
index 2dc99107..d3a3669f 100644
--- a/assets/sass/expander.scss
+++ b/assets/sass/expander.scss
@@ -7,6 +7,7 @@
   padding: 1.2rem;
   gap: 0.5rem;
   align-items: center;
+  transition: background .3s ease;
 
   &:not(.o-expander__summary--booking) {
     font-weight: 700;