From fb174bd89c75f886db3192d0f8ce0cb52c11beb8 Mon Sep 17 00:00:00 2001
From: MoritzWeber <kontakt@moritz-weber.net>
Date: Thu, 20 Nov 2025 18:22:49 +0100
Subject: [PATCH 1/3] feat: Only show icon for expanders on mobile

---
 assets/sass/trainCategory.scss | 11 ++++++++++-
 layouts/partials/tag.html      |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/assets/sass/trainCategory.scss b/assets/sass/trainCategory.scss
index c87bc553..4cb21fe3 100644
--- a/assets/sass/trainCategory.scss
+++ b/assets/sass/trainCategory.scss
@@ -18,7 +18,7 @@
   gap: 0.6rem;
 }
 
-.o-expander__summary--train-category {
+details.o-expander__summary--train-category {
   &:hover,
   &:focus {
     .o-train-category__title-text {
@@ -26,6 +26,15 @@
     }
   }
 }
+
+details.o-expander--train-category:not([open]) {
+  @media (max-width: $breakpoint-md) {
+    .a-tag__text {
+      display: none;
+    }
+  }
+}
+
 .o-train-category__content {
   .m-text-highlight {
     &--important,
diff --git a/layouts/partials/tag.html b/layouts/partials/tag.html
index f0cb4354..c53e1662 100644
--- a/layouts/partials/tag.html
+++ b/layouts/partials/tag.html
@@ -1,4 +1,4 @@
 <span class="a-tag a-tag--{{ .Type }}">
   {{ partial "icon" .Icon }}
-  {{ i18n .Text }}
+  <span class="a-tag__text">{{ i18n .Text }}</span>
 </span>

From 80db615f687e86a14f5cf12a160ebc514cace725 Mon Sep 17 00:00:00 2001
From: MoritzWeber0 <kontakt@moritz-weber.net>
Date: Fri, 21 Nov 2025 22:47:54 +0100
Subject: [PATCH 2/3] feat: Add simple animation

---
 assets/sass/tag.scss           |  6 ++++++
 assets/sass/trainCategory.scss | 18 +++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/assets/sass/tag.scss b/assets/sass/tag.scss
index 4d09175f..4ed0b7f2 100644
--- a/assets/sass/tag.scss
+++ b/assets/sass/tag.scss
@@ -16,3 +16,9 @@
     }
   }
 }
+
+.a-tag__text {
+  transition:
+    opacity 0.3s ease,
+    max-width 0.3s ease;
+}
diff --git a/assets/sass/trainCategory.scss b/assets/sass/trainCategory.scss
index 4cb21fe3..5c040d62 100644
--- a/assets/sass/trainCategory.scss
+++ b/assets/sass/trainCategory.scss
@@ -28,9 +28,25 @@ details.o-expander__summary--train-category {
 }
 
 details.o-expander--train-category:not([open]) {
+  @media (max-width: $breakpoint-md) {
+    .a-tag {
+      gap: 0;
+    }
+
+    .a-tag__text {
+      opacity: 0;
+      max-width: 0;
+      overflow: hidden;
+      display: inline-block;
+    }
+  }
+}
+
+details.o-expander--train-category[open] {
   @media (max-width: $breakpoint-md) {
     .a-tag__text {
-      display: none;
+      opacity: 1;
+      max-width: 20rem;
     }
   }
 }

From 0b2038f813100d84dbe6083294902c4d1b4896ce Mon Sep 17 00:00:00 2001
From: MoritzWeber0 <kontakt@moritz-weber.net>
Date: Sat, 22 Nov 2025 08:38:04 +0100
Subject: [PATCH 3/3] fix: Also animate gap between icon and text

---
 assets/sass/tag.scss           | 5 +++--
 assets/sass/trainCategory.scss | 5 +----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/assets/sass/tag.scss b/assets/sass/tag.scss
index 4ed0b7f2..5dc0d4e9 100644
--- a/assets/sass/tag.scss
+++ b/assets/sass/tag.scss
@@ -1,7 +1,6 @@
 .a-tag {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
   padding: 0.4rem 0.8rem;
   border-radius: var(--border-radius-s);
   font-size: 0.7em;
@@ -18,7 +17,9 @@
 }
 
 .a-tag__text {
+  margin-left: 0.4rem;
   transition:
     opacity 0.3s ease,
-    max-width 0.3s ease;
+    max-width 0.3s ease,
+    margin-left 0.3s ease;
 }
diff --git a/assets/sass/trainCategory.scss b/assets/sass/trainCategory.scss
index 5c040d62..1b57bb1e 100644
--- a/assets/sass/trainCategory.scss
+++ b/assets/sass/trainCategory.scss
@@ -29,11 +29,8 @@ details.o-expander__summary--train-category {
 
 details.o-expander--train-category:not([open]) {
   @media (max-width: $breakpoint-md) {
-    .a-tag {
-      gap: 0;
-    }
-
     .a-tag__text {
+      margin-left: 0;
       opacity: 0;
       max-width: 0;
       overflow: hidden;