/* Handfunkgerät A: Gehäuse in Einheiten von --u (≈ 1 mm, 61 × 133 mm), skaliert auf den Bildschirm */
.radio.hand-a { --u: min(calc(100dvh / 168), calc(100vw / 78), 5.6px); }
@media (max-width: 700px) { .radio.hand-a { --u: min(calc((100dvh - 44px) / 156), calc(100vw / 74), 5.6px); } }
/* ---------- Gehäuse (nach „Bedienelemente“ im Sepura-Handbuch) ---------- */
.radio.hand-a { position: relative; width: calc(61 * var(--u)); height: calc(133 * var(--u)); margin-top: calc(20 * var(--u)); margin-left: calc(6 * var(--u)); flex: none; }
.hand-a .body { position: absolute; inset: 0; border-radius: calc(7 * var(--u)) calc(7 * var(--u)) calc(13 * var(--u)) calc(13 * var(--u)) / calc(7 * var(--u)) calc(7 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  background: linear-gradient(90deg, #111315 0%, #26292d 6%, #1f2225 50%, #26292d 94%, #111315 100%);
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) #000b, inset 0 calc(.5 * var(--u)) 0 #ffffff12, inset 0 calc(-1 * var(--u)) calc(2 * var(--u)) #0008;
  padding: calc(2.5 * var(--u)) calc(4 * var(--u)) calc(6 * var(--u)); display: flex; flex-direction: column; gap: calc(1.6 * var(--u)); }
/* Oben: Drehknopf links, Notruftaste am Fuß der Antenne, Antenne rechts */
.hand-a .knob { position: absolute; left: calc(13 * var(--u)); top: calc(-11 * var(--u)); width: calc(11 * var(--u)); height: calc(12 * var(--u));
  border-radius: calc(2 * var(--u)) calc(2 * var(--u)) 0 0;
  background: repeating-linear-gradient(90deg, #15171a 0 calc(.7 * var(--u)), #3a3e43 calc(.7 * var(--u)) calc(1.4 * var(--u)));
  box-shadow: inset 0 calc(1 * var(--u)) calc(1 * var(--u)) #ffffff18; cursor: ns-resize; touch-action: none; overflow: hidden; }
.hand-a .knob::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(1.6 * var(--u)); background: #2c3034; }
.hand-a .knob-mark { position: absolute; top: 0; bottom: 0; width: calc(1 * var(--u)); background: #dee2e6; left: calc(8% + var(--vol, 5) * 8%); opacity: .7; transition: left .08s; }
.hand-a .k-notruf { position: absolute; left: calc(29 * var(--u)); top: calc(-2.6 * var(--u)); width: calc(6 * var(--u)); height: calc(3 * var(--u));
  border: 0; border-radius: calc(1 * var(--u)) calc(1 * var(--u)) 0 0; background: linear-gradient(#ffa94d, #e8590c); box-shadow: inset 0 calc(-.5 * var(--u)) 0 #0005; touch-action: none; padding: 0; }
.hand-a .antenna { position: absolute; left: calc(37 * var(--u)); top: calc(-19 * var(--u)); width: calc(9 * var(--u)); height: calc(20 * var(--u));
  border-radius: calc(4.5 * var(--u)) calc(4.5 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u)); background: linear-gradient(90deg, #0b0c0d, #2a2d30 45%, #101112); }
/* Links: Schnellwahltaste DMO/TMO über der langen, gerillten PTT */
.hand-a .side { position: absolute; left: calc(-5 * var(--u)); top: calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(2.5 * var(--u)); align-items: flex-end; }
.hand-a .k-side { width: calc(5 * var(--u)); height: calc(8 * var(--u)); border: 0; border-radius: calc(1.5 * var(--u)) 0 0 calc(1.5 * var(--u)); background: linear-gradient(90deg, #1b1d20, #33373b); touch-action: none; padding: 0; }
.hand-a .k-ptt { width: calc(6 * var(--u)); height: calc(30 * var(--u)); border: 0; border-radius: calc(2.5 * var(--u)) 0 0 calc(2.5 * var(--u)); padding: 0;
  background: repeating-linear-gradient(0deg, #25282c 0 calc(1.6 * var(--u)), #34383d calc(1.6 * var(--u)) calc(2.2 * var(--u))); box-shadow: inset calc(.5 * var(--u)) 0 0 #ffffff10; touch-action: none; }
.hand-a .k-ptt.down, .hand-a .k-side.down, .hand-a .k-oval.down, .hand-a .k-notruf.down { filter: brightness(1.6); }
/* Vorne oben: Mode-Taste | Schriftzug | Taste „verpasste Ereignisse“, LEDs außen */
.hand-a .face-top { display: flex; align-items: center; justify-content: space-between; gap: calc(1.5 * var(--u)); height: calc(5 * var(--u)); padding: 0 calc(.5 * var(--u)); }
.hand-a .brand { flex: 1; text-align: center; font: 700 calc(3 * var(--u))/1 "Arial Rounded MT Bold", "Helvetica Neue", Arial, sans-serif; color: #e9ecef; letter-spacing: -.02em; }
.hand-a .k-oval { width: calc(9 * var(--u)); height: calc(3.2 * var(--u)); border: 0; border-radius: 50%; background: linear-gradient(#55595e, #2a2d31); box-shadow: 0 calc(.4 * var(--u)) 0 #000a; touch-action: none; padding: 0; }
/* Kontexttasten (klein, rund) außen, 4-Wege-Wippe in der Mitte, grün/rot darunter */
.hand-a .nav { display: grid; grid-template-columns: 1fr 2.4fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "cl dp cr" "gr dp rd";
  height: calc(16 * var(--u)); gap: calc(.8 * var(--u)) calc(1.2 * var(--u)); margin-top: calc(.6 * var(--u)); }
.hand-a .ctx { width: calc(6 * var(--u)); height: calc(4 * var(--u)); border-radius: calc(2 * var(--u)); justify-self: center; align-self: center; }
.hand-a .ctx i { width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); border-radius: 50%; background: #adb5bd; opacity: .7; }