feat: add formatAsHeading function to format tag names in TripChecklist

frontend/src/pages/TripChecklist.tsx

@@ -108,6 +108,13 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
     a.tag.name.localeCompare(b.tag.name)
   );
 
+  function formatAsHeading(str: string) {
+    if (!str) return "";
+    // Replace hyphens with spaces and capitalize first letter
+    const withSpaces = str.replace(/-/g, " ");
+    return withSpaces.charAt(0).toUpperCase() + withSpaces.slice(1);
+  }
+
   return (
     <div>
       {/* Trip-Titel und Zeitraum */}
@@ -242,9 +249,9 @@ export default function TripChecklist({ trips }: { trips: any[] }) {
         {sortedTagGroups.map(({ tag, items }) => (
           <React.Fragment key={tag.id}>
             <li className="mt-4 mb-1 font-semibold text-gray-700 flex items-center gap-2">
-              <span className="text-xs bg-gray-200 text-gray-700 rounded px-2 py-0.5">
-                #{tag.name}
-              </span>
+              <h3 className="text-m text-gray-700 px-2 py-0.5 m-0 font-semibold">
+                {formatAsHeading(tag.name)}
+              </h3>
             </li>
             {items.map((item) => (
               <li