update

frontend/index.html

@@ -758,6 +758,69 @@
             border-color: rgba(255, 255, 255, 0.2);
             box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
         }
+
+        /* ========================================
+           TRANSIT LINE LABELS (S-Bahn, U-Bahn)
+           Munich-style badges
+           ======================================== */
+        .label-transit {
+            font-size: 11px;
+            font-weight: 700;
+            letter-spacing: 0.3px;
+            padding: 4px 8px;
+            border-radius: 4px;
+            background: white;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+            border: 2px solid currentColor;
+            text-shadow: none;
+        }
+
+        /* S-Bahn - Green circle badge style */
+        .label-transit-sbahn {
+            background: #408335;
+            color: white;
+            border: none;
+            border-radius: 50%;
+            width: 24px;
+            height: 24px;
+            padding: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 10px;
+            font-weight: 800;
+        }
+
+        /* U-Bahn - Blue square badge style */
+        .label-transit-ubahn {
+            background: #0065AE;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            padding: 3px 6px;
+            font-size: 10px;
+            font-weight: 800;
+        }
+
+        /* Generic rail - Gray */
+        .label-transit-rail {
+            background: #666;
+            color: white;
+            border: none;
+        }
+
+        /* Dark theme adjustments */
+        [data-theme="dark"] .label-transit {
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+        }
+
+        [data-theme="dark"] .label-transit-sbahn {
+            background: #4a9c3d;
+        }
+
+        [data-theme="dark"] .label-transit-ubahn {
+            background: #1a7bcb;
+        }
     </style>
 
     <!-- ========================================
@@ -1245,8 +1308,8 @@
         }
 
         .icon-btn {
-            width: 24px;
-            height: 24px;
+            width: 32px;
+            height: 32px;
             fill: #333;
             display: flex;
             align-items: center;
@@ -1255,8 +1318,8 @@
             border: none;
             color: var(--text-primary);
             cursor: pointer;
-            padding: 0;
-            font-size: 16px;
+            padding: 6px;
+            font-size: 14px;
             font-weight: 300;
             transition: background var(--transition-fast);
             box-shadow: none;
@@ -1305,8 +1368,8 @@
 
         .compass-inner {
             position: relative;
-            width: 22px;
-            height: 22px;
+            width: 20px;
+            height: 20px;
         }
 
         .compass-needle {
@@ -1314,7 +1377,7 @@
             top: 50%;
             left: 50%;
             width: 2px;
-            height: 16px;
+            height: 14px;
             transform: translate(-50%, -50%);
             background: linear-gradient(to bottom,
                     var(--accent-red) 0%,