update

frontend/src/components/NamensWahl.vue

@@ -107,7 +107,21 @@ onUnmounted(() => {
            darunter die Erfahrungsleiste, die am Kreis hängt -->
       <template v-if="meins">
         <span class="kreis" :class="{ puls: feuerwerk }">
-          {{ meins.level }}
+          <svg width="34" height="34" viewBox="0 0 34 34" aria-hidden="true">
+            <circle cx="17" cy="17" r="16" fill="#6e1418" stroke="rgba(255, 255, 255, 0.45)" stroke-width="1" />
+            <text
+              x="17"
+              y="17"
+              text-anchor="middle"
+              dominant-baseline="central"
+              :font-size="meins.level >= 100 ? 12 : 15"
+              font-weight="700"
+              fill="#f3d9db"
+              text-rendering="geometricPrecision"
+            >
+              {{ meins.level }}
+            </text>
+          </svg>
           <span v-if="feuerwerk" class="feuerwerk" aria-hidden="true">
             <span v-for="i in 12" :key="i" class="funke" :style="{ '--winkel': `${i * 30}deg` }"></span>
           </span>
@@ -198,20 +212,18 @@ onUnmounted(() => {
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  width: 2.1rem;
+  width: 34px;
-  height: 2.1rem;
+  height: 34px;
-  padding-top: 0.1em;
+  /* Farben zeichnet das SVG. Der Ring in Hintergrundfarbe hält die
-  color: #f3d9db;
+     Leiste einen Pixel vom Kreis weg. */
-  font-size: 0.95rem;
-  font-weight: 700;
-  /* Wie die kleinen Badges: Weinrot mit hellem Rand. Der Ring in
-     Hintergrundfarbe hält die Leiste einen Pixel vom Kreis weg. */
-  background: #6e1418;
-  border: 1px solid rgba(255, 255, 255, 0.45);
   border-radius: 50%;
   box-shadow: 0 0 0 1px var(--bg);
 }
 
+.kreis svg {
+  display: block;
+}
+
 /* Rechts vom Kreis: der Name oben, die Leiste darunter */
 .rechts {
   display: flex;

frontend/src/components/PersonName.vue

@@ -16,7 +16,24 @@ const stufe = computed(() => props.level ?? levelVon(props.name))
 
 <template>
   <span class="person">
-    <span v-if="stufe" class="lvl">{{ stufe }}</span>{{ name || 'Anonym' }}
+    <!-- Als SVG: die Ziffer sitzt auf der geometrischen Mitte, fest
+         18 px auf ganzen Pixeln -->
+    <svg v-if="stufe" class="lvl" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
+      <circle cx="9" cy="9" r="8.5" fill="#6e1418" stroke="rgba(255, 255, 255, 0.45)" stroke-width="1" />
+      <text
+        x="9"
+        y="9"
+        text-anchor="middle"
+        dominant-baseline="central"
+        :font-size="stufe >= 100 ? 7.5 : 10"
+        font-weight="700"
+        fill="#f3d9db"
+        text-rendering="geometricPrecision"
+      >
+        {{ stufe }}
+      </text>
+    </svg>
+    {{ name || 'Anonym' }}
   </span>
 </template>
 
@@ -29,26 +46,10 @@ const stufe = computed(() => props.level ?? levelVon(props.name))
   white-space: nowrap;
 }
 
-/* Ein Kreis, auch bei zweistelligen Zahlen — dann etwas enger gesetzt */
+/* Weinrot statt Signalrot, mit hellem Rand für den Kontrast zum Grund —
+   die Farben stehen im SVG selbst */
 .lvl {
-  display: inline-flex;
+  display: block;
-  align-items: center;
+  flex-shrink: 0;
-  justify-content: center;
-  width: 1.65em;
-  height: 1.65em;
-  /* Ziffern haben keine Unterlänge — rechnerisch mittig sitzen sie
-     optisch zu hoch. Ein Hauch Luft oben gleicht das aus. */
-  padding-top: 0.12em;
-  color: #f3d9db;
-  font-size: 0.68em;
-  font-weight: 700;
-  letter-spacing: -0.03em;
-  line-height: 1;
-  /* Weinrot statt Signalrot: in Listen mit vielen Namen bleibt es ruhig */
-  background: #6e1418;
-  /* Der helle Rand hebt den Kreis vom dunklen Grund ab (3:1), die
-     Fläche darf ruhig bleiben */
-  border: 1px solid rgba(255, 255, 255, 0.45);
-  border-radius: 50%;
 }
 </style>