docs: vollstaendige README mit HUD-Renderings, Luft-Ring mittig

HUD-Layout symmetrisch: Tiefe links, Luft-Ring mittig, Druck rechts, Lampe
zentriert darunter. Umgestellt auf Grid, damit die drei Werte garantiert auf
einer Mittelachse sitzen und die Lampen-Leiste ohne Ausgleichs-Margins in einer
zweiten Zeile haengt.

README:
- Drei HUD-Renderings (normal, Warnung, kritisch) als SVG. Keine In-Game-Bilder -
  hier laeuft kein GTA -, sondern massstabsgetreu aus denselben Werten wie
  style.css erzeugt, per docs/gen-hud-svg.mjs reproduzierbar
- Vollstaendige Config-Referenz fuer client.lua und shared.lua
- Item-Tabelle mit Laufzeit, Fuelldruck, Gewicht, dazu die Metadata-Keys und
  warum kein decay gesetzt werden darf
- Installation, Bedienung, Exports, Balancing-Hinweis
- Bekannte Unsicherheiten offen benannt

Item-Snippet mit klarem Copy-Paste-Header. Bewusst keine fertige items.lua zum
Ersetzen: die wuerde die restlichen Items des Servers mitloeschen.

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

nui/style.css

@@ -24,15 +24,22 @@ 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. */
 #hud {
     position: absolute;
     left: 50%;
     bottom: 7vh;
     transform: translateX(-50%) translateY(0);
-    display: flex;
+    display: grid;
+    grid-template-columns: auto auto auto;
+    grid-template-rows: auto auto;
     align-items: center;
-    gap: 18px;
-    padding: 14px 22px 14px 14px;
+    justify-items: center;
+    column-gap: 22px;
+    row-gap: 8px;
+    padding: 14px 22px;
     border-radius: 16px;
     background: var(--panel);
     border: 1px solid rgba(148, 163, 184, 0.18);
@@ -53,7 +60,8 @@ body {
     position: relative;
     width: 92px;
     height: 92px;
-    flex-shrink: 0;
+    grid-column: 2;
+    grid-row: 1;
 }
 
 .gauge svg {
@@ -107,22 +115,28 @@ body {
 
 /* --- Tiefe + Lampe --- */
 
-.readouts {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.readout-row {
-    display: flex;
-    gap: 18px;
-}
-
 .readout {
     display: flex;
     flex-direction: column;
     gap: 3px;
-    min-width: 76px;
+    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 {
@@ -143,9 +157,10 @@ body {
 }
 
 .lamp {
+    grid-column: 2;
+    grid-row: 2;
     display: flex;
     align-items: center;
-    align-self: flex-start; /* sonst zieht der Flex-Container die Leiste auf volle Breite */
     gap: 6px;
     padding: 5px 9px;
     border-radius: 8px;