feat(hud): Dreier-Konsole mit Finimeter und Tiefenmesser

Statt zweier Zahlenfelder jetzt zwei Zeigerinstrumente links und rechts vom
Luft-Ring - wie eine echte Tauchkonsole. Der Ring bleibt in der Mitte, weil die
Restzeit die Zahl ist, auf die es ankommt.

- Finimeter 0-300 bar, roter Bereich = Reserve unter reservePressure
- Tiefenmesser 0-depthDialMax, roter Bereich = Tiefengrenze des Atemgases. Der
  faengt bei Pressluft bei 45 m an und bei Trimix erst bei 100 m - der
  Gefahrenbereich haengt also an der getragenen Flasche. Gibt es real nicht,
  hilft im Spiel aber sofort beim Einschaetzen
- Skalenzahlen bewusst weggelassen: bei 96 px kollidieren sie mit allem und
  liest ohnehin niemand. Zeiger zeigt die Tendenz, die Zahl in der Uhr den Wert
- Zeiger und Wert faerben sich rot, sobald der rote Bereich erreicht ist

Beim Bauen gefunden: CSS transform-origin auf dem Zeiger wird zusaetzlich zum
rotate(winkel 50 50) im Attribut angewendet, der Drehpunkt wandert dadurch
doppelt und der Zeiger landet ausserhalb der Uhr. transform-origin ist raus.

README-Renderings auf die Konsole umgebaut.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

nui/style.css

@@ -8,7 +8,8 @@
     --text: #e2e8f0;
     --muted: #94a3b8;
     --panel: rgba(9, 18, 28, 0.72);
-    --ring: 327; /* 2 * PI * 52, Umfang des Gauge-Kreises */
+    --dial-face: #0b1622;
+    --ring: 327; /* 2 * PI * 52, Umfang des Luft-Rings */
 }
 
 * {
@@ -24,9 +25,9 @@ body {
     user-select: none;
 }
 
-/* Grid statt Flex: so sitzen Tiefe, Ring und Druck garantiert auf einer
-   gemeinsamen Mittelachse, und die Lampen-Leiste hängt in einer zweiten Zeile
-   mittig unter dem Ring - ohne Ausgleichs-Margins. */
+/* Dreier-Konsole: Finimeter, Luft, Tiefenmesser nebeneinander, Lampe darunter.
+   Grid statt Flex, damit die drei Instrumente auf einer Mittelachse sitzen und
+   die Lampen-Leiste ohne Ausgleichs-Margins in Zeile 2 haengt. */
 #hud {
     position: absolute;
     left: 50%;
@@ -37,9 +38,9 @@ body {
     grid-template-rows: auto auto;
     align-items: center;
     justify-items: center;
-    column-gap: 22px;
-    row-gap: 8px;
-    padding: 14px 22px;
+    column-gap: 20px;
+    row-gap: 6px;
+    padding: 14px 20px;
     border-radius: 16px;
     background: var(--panel);
     border: 1px solid rgba(148, 163, 184, 0.18);
@@ -54,7 +55,119 @@ body {
     pointer-events: none;
 }
 
-/* --- Luft-Gauge --- */
+.caption {
+    font-size: 9px;
+    font-weight: 600;
+    letter-spacing: 1.4px;
+    color: var(--muted);
+    text-transform: uppercase;
+}
+
+/* --- Zeigerinstrumente --- */
+
+.dial {
+    grid-row: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 5px;
+}
+
+#pressure { grid-column: 1; }
+#depth { grid-column: 3; }
+
+.dial-face {
+    position: relative;
+    width: 96px;
+    height: 96px;
+}
+
+.dial-face svg {
+    width: 100%;
+    height: 100%;
+}
+
+.dial .face {
+    fill: var(--dial-face);
+    stroke: rgba(148, 163, 184, 0.25);
+    stroke-width: 1.5;
+}
+
+/* Skalenzahlen gibt es bewusst nicht: bei dieser Groesse liest die niemand.
+   Der Zeiger zeigt die Tendenz, die Zahl in der Mitte den genauen Wert. */
+.dial .ticks line {
+    stroke: #cbd5e1;
+    stroke-opacity: 0.4;
+    stroke-width: 1;
+}
+
+.dial .ticks line.major {
+    stroke-opacity: 0.85;
+    stroke-width: 1.6;
+}
+
+.dial .zone {
+    fill: none;
+    stroke: var(--danger);
+    stroke-width: 3.5;
+    stroke-opacity: 0.9;
+}
+
+.dial .needle line {
+    stroke: var(--text);
+    stroke-width: 2.6;
+    stroke-linecap: round;
+    transition: stroke 260ms ease;
+}
+
+.dial .needle circle {
+    fill: var(--text);
+    transition: fill 260ms ease;
+}
+
+/* Kein transform-origin hier: das rotate(winkel 50 50) im transform-Attribut
+   bringt den Drehpunkt schon mit. Beides zusammen verschiebt den Zeiger aus der
+   Uhr heraus - CSS rechnet die Origin nochmal obendrauf. */
+.dial .needle {
+    transition: transform 260ms ease-out;
+}
+
+.dial-value {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 2px;
+    /* In den offenen unteren Teil der Skala, damit die Zahl nicht am
+       Zeiger-Drehpunkt klebt - wie das Sichtfenster eines echten Instruments. */
+    padding-top: 36px;
+    font-size: 16px;
+    font-weight: 700;
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+    transition: color 260ms ease;
+}
+
+.unit {
+    font-size: 10px;
+    font-weight: 500;
+    color: var(--muted);
+}
+
+/* Zeiger und Wert faerben sich, sobald der rote Bereich erreicht ist. */
+#pressure.alert .needle line,
+#depth.alert .needle line { stroke: var(--danger); }
+#pressure.alert .needle circle,
+#depth.alert .needle circle { fill: var(--danger); }
+#pressure.alert .dial-value,
+#depth.alert .dial-value { color: var(--danger); }
+
+#depth.deep .dial-value { color: var(--warn); }
+#depth.deep .needle line { stroke: var(--warn); }
+#depth.deep .needle circle { fill: var(--warn); }
+
+/* --- Luft-Ring --- */
 
 .gauge {
     position: relative;
@@ -105,56 +218,7 @@ body {
     line-height: 1;
 }
 
-.caption {
-    font-size: 9px;
-    font-weight: 600;
-    letter-spacing: 1.4px;
-    color: var(--muted);
-    text-transform: uppercase;
-}
-
-/* --- Tiefe + Lampe --- */
-
-.readout {
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    min-width: 84px;
-    grid-row: 1;
-}
-
-/* Tiefe spiegelt den Druck: Werte zeigen jeweils zum Ring hin. */
-.readout--right {
-    align-items: flex-end;
-    grid-column: 1;
-    justify-self: end;
-}
-
-.readout--right .value {
-    justify-content: flex-end;
-}
-
-#pressure {
-    grid-column: 3;
-    justify-self: start;
-}
-
-.value {
-    display: flex;
-    align-items: baseline;
-    gap: 3px;
-    font-size: 26px;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    line-height: 1;
-    transition: color 260ms ease;
-}
-
-.unit {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--muted);
-}
+/* --- Lampe --- */
 
 .lamp {
     grid-column: 2;
@@ -179,16 +243,14 @@ body {
     fill: currentColor;
 }
 
-.lamp.hidden {
-    display: none;
-}
+.lamp.hidden { display: none; }
 
 .lamp.on {
     background: var(--accent-dim);
     color: var(--accent);
 }
 
-/* --- Warnzustaende --- */
+/* --- Warnzustaende der Restluft --- */
 
 #hud.warn .gauge-fill { stroke: var(--warn); }
 #hud.warn #air-value { color: var(--warn); }
@@ -197,16 +259,8 @@ body {
 #hud.danger #air-value { color: var(--danger); }
 #hud.danger .gauge { animation: pulse 1s ease-in-out infinite; }
 
-#hud.deep #depth-value { color: var(--warn); }
-
-/* Tiefengrenze des Atemgases überschritten - Tiefenrausch läuft. */
-#hud.overlimit #depth-value {
-    color: var(--danger);
-    animation: pulse 1s ease-in-out infinite;
-}
-
-/* Reservedruck: in der Tauchpraxis die Schwelle zum Aufstieg. */
-#pressure.reserve .value { color: var(--danger); }
+/* Tiefengrenze des Atemgases ueberschritten - Tiefenrausch laeuft. */
+#hud.overlimit #depth .dial-face { animation: pulse 1s ease-in-out infinite; }
 
 @keyframes pulse {
     0%, 100% { opacity: 1; }