diff --git a/src/components/grw-map/grw-map.scss b/src/components/grw-map/grw-map.scss
index fc49b543..d5687eea 100644
--- a/src/components/grw-map/grw-map.scss
+++ b/src/components/grw-map/grw-map.scss
@@ -342,7 +342,8 @@
 }
 
 .point-reference-icon {
-  background-color: #ff0000;
+  color: var(--reference-point-color);
+  background-color: var(--reference-point-background-color);
   border: 1px solid #ffffff;
   border-radius: 50%;
   display: flex;
@@ -351,7 +352,6 @@
   width: 100%;
   height: 100%;
   font-size: 24px;
-  color: #ffffff;
 }
 
 .leaflet-popup {
diff --git a/src/components/grw-trek-detail/grw-trek-detail.scss b/src/components/grw-trek-detail/grw-trek-detail.scss
index cf6a39ef..77a5a647 100644
--- a/src/components/grw-trek-detail/grw-trek-detail.scss
+++ b/src/components/grw-trek-detail/grw-trek-detail.scss
@@ -407,6 +407,8 @@ grw-trek-detail {
         }
       }
       li:before {
+        color: var(--reference-point-color);
+        background: var(--reference-point-background-color);
         position: absolute;
         display: flex;
         align-items: center;
@@ -414,11 +416,9 @@ grw-trek-detail {
         content: counter(referencePoint);
         width: 24px;
         height: 24px;
-        background: #f04141;
         border-radius: 12px;
         font-weight: bold;
         font-size: 0.8em;
-        color: white;
         margin-left: -36px;
         top: calc(50% - 12px);
       }
diff --git a/src/components/grw-trek-detail/grw-trek-detail.tsx b/src/components/grw-trek-detail/grw-trek-detail.tsx
index 93c3b72b..7d7a31a8 100644
--- a/src/components/grw-trek-detail/grw-trek-detail.tsx
+++ b/src/components/grw-trek-detail/grw-trek-detail.tsx
@@ -1213,19 +1213,20 @@ export class GrwTrekDetail {
                 </button>
               )}
               <div part="links-container" class="links-container">
-                <a href={`${this.currentTrek.gpx}`} target="_blank" rel="noopener noreferrer">
+                <a part="download-gpx-button" href={`${this.currentTrek.gpx}`} target="_blank" rel="noopener noreferrer">
                   <span part="icon" class=" icon" innerHTML={DownloadIcon}></span>
                   <span part="label" class="label">
                     GPX
                   </span>
                 </a>
-                <a href={`${this.currentTrek.kml}`} target="_blank" rel="noopener noreferrer">
+                <a part="download-kml-button" href={`${this.currentTrek.kml}`} target="_blank" rel="noopener noreferrer">
                   <span part="icon" class="icon" innerHTML={DownloadIcon}></span>
                   <span part="label" class="label">
                     KML
                   </span>
                 </a>
                 <a
+                  part="download-pdf-button"
                   href={`${this.currentTrek.pdf}${state.portalsFromProviders && state.portalsFromProviders.length === 1 ? '?portal=' + state.portalsFromProviders[0] : ''}`}
                   target="_blank"
                   rel="noopener noreferrer"
diff --git a/src/global/global.scss b/src/global/global.scss
index 53c0c0cb..e8c12f4f 100644
--- a/src/global/global.scss
+++ b/src/global/global.scss
@@ -107,4 +107,7 @@ $path: '/latest/dist/geotrek-rando-widget';
   --elevation-3: 0px 5px 5px -3px rgb(var(---color-shadow-rgb) / 0.2), 0px 8px 10px 1px rgb(var(--color-shadow-rgb) / 0.14), 0px 3px 14px 2px rgb(var(--color-shadow-rgb) / 0.12);
   --elevation-4: 0px 5px 5px -3px rgb(var(--color-shadow-rgb) / 0.2), 0px 8px 10px 1px rgb(var(--color-shadow-rgb) / 0.14), 0px 3px 14px 2px rgb(var(--color-shadow-rgb) / 0.12);
   --elevation-5: 0px 8px 10px -6px rgb(var(--color-shadow-rgb) / 0.2), 0px 16px 24px 2px rgb(var(--color-shadow-rgb) / 0.14), 0px 6px 30px 5px rgb(var(--color-shadow-rgb) / 0.12);
+
+  --reference-point-color: #ffffff;
+  --reference-point-background-color: #f04141;
 }