fix: 1:1 prototype port – exact hms-* CSS, real logo, all components from app.js

frontend/components/HmsLogo.vue

@@ -1,68 +1,10 @@
 <template>
-  <svg
-    width="40"
-    height="40"
-    viewBox="0 0 40 40"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-label="HMS Licht & Ton Logo"
-  >
-    <rect
-      x="1"
-      y="1"
-      width="38"
-      height="38"
-      rx="4"
-      :stroke="accentColor"
-      stroke-width="2"
-      fill="#1a1a1a"
-    />
-    <text
-      x="20"
-      y="16"
-      text-anchor="middle"
-      fill="#ffffff"
-      font-family="Inter, sans-serif"
-      font-size="11"
-      font-weight="800"
-    >HMS</text>
-    <path
-      d="M8 22 L12 26 L8 30"
-      :stroke="accentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      fill="none"
-    />
-    <path
-      d="M14 22 L18 26 L14 30"
-      :stroke="accentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      fill="none"
-    />
-    <path
-      d="M20 22 L24 26 L20 30"
-      :stroke="accentColor"
-      stroke-width="1.5"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      fill="none"
-    />
-    <text
-      x="20"
-      y="36"
-      text-anchor="middle"
-      fill="#d4d4d4"
-      font-family="Inter, sans-serif"
-      font-size="5"
-      font-weight="500"
-    >LICHT &amp; TON</text>
+  <svg class="hms-logo-svg" viewBox="0 0 200 200" :style="`height:${size}px;width:auto`" aria-label="HMS Licht & Ton Logo" role="img">
+    <path fill="currentColor" d="M166.266,172.872h-37.687v-60.718H74.226v60.718H36.539V26.956h37.687v56.335h54.354V26.956h37.687V172.872z" />
+    <rect x="23.598" y="15.343" fill="none" stroke="#EC6925" stroke-width="15.1525" stroke-miterlimit="10" width="155.612" height="168.874" />
   </svg>
 </template>
 
 <script setup lang="ts">
-const accentColor: string = "#EC6925";
+withDefaults(defineProps<{ size?: number }>(), { size: 40 })
 </script>