/* Handfunkgerät B: robustes Gehäuse mit Gummiecken, Drehknopf und Notruftaste oben, zwei LEDs,
   drei Kontexttasten unter dem Display. Maße in --u (≈ 1 mm). */
.radio.hand-b { --u: min(calc(100dvh / 168), calc(100vw / 80), 5.6px); position: relative; width: calc(64 * var(--u)); height: calc(140 * var(--u)); margin-top: calc(19 * var(--u)); margin-left: calc(6 * var(--u)); flex: none; }
@media (max-width: 700px) { .radio.hand-b { --u: min(calc((100dvh - 44px) / 162), calc(100vw / 76), 5.6px); } }
.hand-b .body { position: absolute; inset: 0; border-radius: calc(9 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: linear-gradient(90deg, #15181b 0%, #2c3237 8%, #23282c 50%, #2c3237 92%, #15181b 100%);
  box-shadow: 0 calc(3 * var(--u)) calc(10 * var(--u)) #000b, inset 0 0 0 calc(.6 * var(--u)) #3e464d;
  padding: calc(3 * var(--u)) calc(4.5 * var(--u)) calc(6 * var(--u)); display: flex; flex-direction: column; gap: calc(1.6 * var(--u)); }
.hand-b .bumper { position: absolute; width: calc(10 * var(--u)); height: calc(10 * var(--u)); background: #3b4033; pointer-events: none; }
.hand-b .bumper.o-l { left: calc(-1 * var(--u)); top: calc(-1 * var(--u)); border-radius: calc(10 * var(--u)) 0 0 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.hand-b .bumper.o-r { right: calc(-1 * var(--u)); top: calc(-1 * var(--u)); border-radius: 0 calc(10 * var(--u)) 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.hand-b .bumper.u-l { left: calc(-1 * var(--u)); bottom: calc(-1 * var(--u)); border-radius: 0 0 0 calc(12 * var(--u)); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.hand-b .bumper.u-r { right: calc(-1 * var(--u)); bottom: calc(-1 * var(--u)); border-radius: 0 0 calc(12 * var(--u)) 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.hand-b .knob { position: absolute; left: calc(10 * var(--u)); top: calc(-12 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 0 0;
  background: repeating-linear-gradient(90deg, #141618 0 calc(.8 * var(--u)), #3b4045 calc(.8 * var(--u)) calc(1.6 * var(--u))); box-shadow: inset 0 calc(1 * var(--u)) calc(1 * var(--u)) #ffffff18; cursor: ns-resize; touch-action: none; overflow: hidden; }
.hand-b .knob::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(2 * var(--u)); background: #2f3438; }
.hand-b .knob-mark { position: absolute; top: 0; bottom: 0; width: calc(1 * var(--u)); background: #ffd43b; left: calc(8% + var(--vol, 5) * 8%); opacity: .8; transition: left .08s; }
.hand-b .antenna { position: absolute; left: calc(37 * var(--u)); top: calc(-20 * var(--u)); width: calc(10 * var(--u)); height: calc(21 * var(--u)); border-radius: calc(5 * var(--u)) calc(5 * var(--u)) calc(1 * var(--u)) calc(1 * var(--u)); background: linear-gradient(90deg, #0b0c0d, #2a2d30 45%, #101112); }
.hand-b .k-notruf { position: absolute; left: calc(26 * var(--u)); top: calc(-3.4 * var(--u)); width: calc(8 * var(--u)); height: calc(3.6 * var(--u)); border: 0; border-radius: calc(1.2 * var(--u)) calc(1.2 * var(--u)) 0 0; background: linear-gradient(#ff6b6b, #c92a2a); box-shadow: inset 0 calc(-.5 * var(--u)) 0 #0005; touch-action: none; padding: 0; }
.hand-b .top-leds { position: absolute; left: calc(50 * var(--u)); top: calc(-2 * var(--u)); display: flex; gap: calc(1.2 * var(--u)); z-index: 1; }
.hand-b .side { position: absolute; left: calc(-5 * var(--u)); top: calc(26 * var(--u)); display: flex; flex-direction: column; gap: calc(2.5 * var(--u)); align-items: flex-end; }
.hand-b .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, #3a3f44); touch-action: none; padding: 0; }
.hand-b .k-ptt { width: calc(6 * var(--u)); height: calc(32 * 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, #3b4033 0 calc(1.6 * var(--u)), #4a5040 calc(1.6 * var(--u)) calc(2.2 * var(--u))); touch-action: none; }
.hand-b .k-ptt.down, .hand-b .k-side.down, .hand-b .k-notruf.down { filter: brightness(1.6); }
.hand-b .kopf { height: calc(4 * var(--u)); display: grid; place-items: center; }
.hand-b .brand { font: 700 calc(2.4 * var(--u))/1 Arial, Helvetica, sans-serif; letter-spacing: .25em; color: #adb5bd; }
.hand-b .bezel { border-radius: calc(1.5 * var(--u)); padding: calc(2 * var(--u)) calc(3 * var(--u)); box-shadow: inset 0 0 0 calc(.4 * var(--u)) #3e464d; }
.hand-b .ctx3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(2.4 * var(--u)); height: calc(5 * var(--u)); padding: 0 calc(1 * var(--u)); }
.hand-b .ctx { height: 100%; border-radius: calc(1.2 * var(--u)); background: linear-gradient(#4a5157, #2b3034); }
.hand-b .ctx.mitte { background: linear-gradient(#5c656c, #353b40); }
.hand-b .nav-b { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(15 * var(--u)); }
.hand-b .dpad { grid-area: auto; width: calc(16 * var(--u)); height: calc(15 * var(--u)); }
.hand-b .pad { gap: calc(1.3 * var(--u)) calc(2.8 * var(--u)); }
.hand-b .num { border-radius: calc(1 * var(--u)); }
/* Display: helles Bild mit dunkelblauer Leiste, orange Auswahl */
.lcd.hand-b { --d-bg: #eef4f7; --d-sb: #1f3a4a; --d-sk: #2b5d78; --d-sel: #e8590c; --d-rand: #2b5d78; --d-kopf: linear-gradient(#f4f8fa, #d5e2ea); --d-stl: #2b5d78; --d-dim: #4f6472; }
.lcd.hand-b .l2 { font-size: 13px; }
.lcd.hand-b .home { padding-top: 6px; gap: 3px; }
.lcd.hand-b .row.grp { font-size: 21px; font-weight: 700; }
.lcd.hand-b .b-status { margin-top: auto; font-size: 12px; color: var(--d-dim); padding-bottom: 2px; }
.lcd.hand-b .sk span { font-size: 12px; }