layout: 320 px ohne Ueberstand, Schubladen in voller Breite, Doppelklick-Sperre greift sofort

Befunde aus der Sichtpruefung (Attrappe des Backends, 320/768/1024/1440 px):
- Zaehlwerk: Das "H" ragte bei 320 px 30 px ueber sein Feld. Ziffern skalieren jetzt
  mit der Feldbreite (Container-Einheiten), am PC bleibt es bei 38 x 56 px.
- Flugplan und Update-Verlauf: Der Text bekam schmal nur ~50 px und lief in den Zustand.
  Schmales Feld: Zeit und Zustand oben, Text darunter (nach Feldbreite, nicht Bildschirm).
- Update-Zeilen am Handy: Name und Version stiessen aneinander ("BetriebssystemUbuntu"),
  die Version steht jetzt darunter; scheitert die Pruefung, heisst sie "unbekannt" statt "-".
- Schubladen (Modell-Suche, Dienste, Einstellungen, Protokoll) waren am Handy nur 75 %
  und am PC hoechstens 384 px breit - die shadcn-Grundklassen schlugen die eigenen.
- Doppelklick: Die Sperre beim Installieren haengt jetzt an einem Ref und greift sofort
  (vorher starteten zwei Klicks im selben Takt zwei Downloads); die Ja-Knoepfe von
  "Alles aktualisieren" und "Auftrag abbrechen" ignorieren den zweiten Klick.
- Balken eines abgebrochenen Downloads grau statt cyan.

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

frontend/src/components/cockpit/Zaehlwerk.tsx

@@ -1,8 +1,11 @@
 import { laufzeit } from "@/lib/zeit"
 
+// Alle Maße hängen an der Schriftgröße der Zeile (em), und die wächst mit der Breite des Feldes
+// (cqw): So passt „TT T SS H“ auch in die schmale Hälfte eines 320-px-Handys, und am PC bleibt
+// es bei den alten 38 × 56 px je Ziffer.
 function Ziffer({ z }: { z: string }) {
   return (
-    <span className="ziffern inline-flex h-14 w-[38px] items-center justify-center rounded-md border border-[#2a3036] bg-[#0b0d0f] text-[32px] font-medium">
+    <span className="ziffern inline-flex h-[1.75em] w-[1.1875em] shrink-0 items-center justify-center rounded-md border border-[#2a3036] bg-[#0b0d0f] font-medium">
       {z}
     </span>
   )
@@ -15,14 +18,19 @@ export function Zaehlwerk({ sekunden }: { sekunden: number | null | undefined })
   const std = String(lz?.[1] ?? 0).padStart(2, "0")
   const text = lz ? `Laufzeit ohne Neustart: ${lz[0]} Tage, ${lz[1]} Stunden` : "Laufzeit unbekannt"
   return (
-    <figure className="m-0 flex min-w-0 flex-col items-center justify-end gap-1">
-      <div aria-label={text} role="img" className="flex h-[150px] max-w-full items-center gap-1.5 pb-5">
+    <figure className="@container m-0 flex min-w-0 flex-col items-center justify-end gap-1">
+      {/* Höhe wie die Rundinstrumente daneben (200 × 150, also ¾ der Breite). */}
+      <div
+        aria-label={text}
+        role="img"
+        className="flex h-[min(75cqw,150px)] items-center gap-[0.1875em] pb-[min(10cqw,20px)] text-[length:clamp(14px,14.5cqw,32px)]"
+      >
         <Ziffer z={lz ? tage[0] : "–"} />
         <Ziffer z={lz ? tage[1] : "–"} />
-        <span className="schild mr-2 ml-0.5 text-lg font-bold text-text-3">T</span>
+        <span className="schild mr-[0.444em] ml-[0.111em] text-[0.5625em] font-bold text-text-3">T</span>
         <Ziffer z={lz ? std[0] : "–"} />
         <Ziffer z={lz ? std[1] : "–"} />
-        <span className="schild ml-0.5 text-lg font-bold text-text-3">H</span>
+        <span className="schild ml-[0.111em] text-[0.5625em] font-bold text-text-3">H</span>
       </div>
       <figcaption className="schild text-[15px] text-text-3">Ohne Neustart</figcaption>
     </figure>