diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_components.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_components.scss
index 8f95ef24..767353bd 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_components.scss
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/_components.scss
@@ -10,4 +10,5 @@
     @import "components/misc";
     @import "components/searchbar";
     @import "components/teaser";
+    @import "components/travelinfo";
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_travelinfo.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_travelinfo.scss
new file mode 100644
index 00000000..b0bfdff5
--- /dev/null
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_travelinfo.scss
@@ -0,0 +1,19 @@
+.travel-info-box {
+    @apply flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-white px-8 lg:px-0 py-8;
+}
+
+.travel-info-box-title {
+    @apply lg:w-1/4 flex flex-col space-y-4 pb-8 lg:pb-0 lg:px-8;
+}
+
+.travel-info-box-title__inner {
+    @apply text-2xl lg:text-4xl text-white uppercase font-bold;
+}
+
+.travel-info-box-content {
+    @apply lg:w-3/4 pt-8 lg:pt-0 lg:px-8 text-white;
+}
+
+.travel-info-box a {
+    color: inherit !important;
+}
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Travelinfo.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Travelinfo.html
index 5dd3cf9e..41507507 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Travelinfo.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Travelinfo.html
@@ -123,28 +123,28 @@
         <div id="goodtoknow" class="bg-ep-primary-bg">
             <div class="container">
                 <f:if condition="{travelInfo.additionalInfo}">
-                    <div class="flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-white bg-[#B48F1D] px-8 lg:px-0 py-8">
+                    <div class="travel-info-box bg-[#B48F1D]">
                         <div class="lg:w-1/4 flex flex-col space-y-4 pb-8 lg:pb-0 lg:px-8">
-                            <div class="w-32 h-32 xl:w-16 xl:h-16 text-[#F9C700]">
+                            <div class="travel-info-box-title text-[#F9C700]">
                                 <f:render section="Icon" arguments="{icon: 'chat'}"/>
                             </div>
-                            <div class="text-2xl lg:text-4xl text-white uppercase font-bold">
+                            <div class="travel-info-box-title__inner">
                                 Weitere Infos
                             </div>
                         </div>
-                        <div class="lg:w-3/4 pt-8 lg:pt-0 lg:px-8 text-white" data-rte-content>
+                        <div class="travel-info-box-content" data-rte-content>
                             {travelInfo.additionalInfo -> f:format.html()}
                         </div>
                     </div>
                 </f:if>
                 <f:if condition="{travelInfo.importantPhoneNumbers}">
-                    <div class="flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-white bg-[#F8C62F] px-8 lg:px-0 py-8">
-                        <div class="lg:w-1/4 flex flex-col space-y-4 pb-8 lg:pb-0 lg:px-8">
-                            <div class="text-2xl lg:text-4xl text-white uppercase font-bold">
+                    <div class="travel-info-box bg-[#F8C62F]">
+                        <div class="travel-info-box-title">
+                            <div class="travel-info-box-title__inner">
                                 Wichtige Telefon&shy;nummern
                             </div>
                         </div>
-                        <div class="lg:w-3/4 pt-8 lg:pt-0 lg:px-8 text-white" data-rte-content>
+                        <div class="travel-info-box-content" data-rte-content>
                             <f:if condition="{travelData.guide}">
                                 <p>
                                     <strong>Busbegleitung / Reiseleitung</strong>
@@ -157,13 +157,13 @@
                     </div>
                 </f:if>
                 <f:if condition="{travelInfo.importantLinks}">
-                    <div class="flex flex-col lg:flex-row divide-y lg:divide-y-0 lg:divide-x divide-white bg-[#18527B] px-8 lg:px-0 py-8">
-                        <div class="lg:w-1/4 flex flex-col space-y-4 pb-8 lg:pb-0 lg:px-8">
-                            <div class="text-2xl lg:text-4xl text-white uppercase font-bold">
+                    <div class="travel-info-box bg-[#18527B]">
+                        <div class="travel-info-box-title">
+                            <div class="travel-info-box-title__inner">
                                 Wichtige Links vor Ort
                             </div>
                         </div>
-                        <div class="lg:w-3/4 pt-8 lg:pt-0 lg:px-8 text-white" data-rte-content>
+                        <div class="travel-info-box-content" data-rte-content>
                             {travelInfo.importantLinks -> f:format.html()}
                         </div>
                     </div>