diff --git a/assets/sass/tag.scss b/assets/sass/tag.scss
index 4d09175f..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;
@@ -16,3 +15,11 @@
     }
   }
 }
+
+.a-tag__text {
+  margin-left: 0.4rem;
+  transition:
+    opacity 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 c87bc553..1b57bb1e 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,28 @@
     }
   }
 }
+
+details.o-expander--train-category:not([open]) {
+  @media (max-width: $breakpoint-md) {
+    .a-tag__text {
+      margin-left: 0;
+      opacity: 0;
+      max-width: 0;
+      overflow: hidden;
+      display: inline-block;
+    }
+  }
+}
+
+details.o-expander--train-category[open] {
+  @media (max-width: $breakpoint-md) {
+    .a-tag__text {
+      opacity: 1;
+      max-width: 20rem;
+    }
+  }
+}
+
 .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>