/* Bediengeräte. Jedes Gerät hat eine feste Entwurfsgröße (siehe terminal.js) und wird per transform an den Platz angepasst. */
.devwrap { width: 100%; position: relative; }
.devscale { transform-origin: top left; position: absolute; left: 0; top: 0; }
.dev { position: relative; color: #e8eef2; user-select: none; -webkit-user-select: none; touch-action: manipulation; font-family: Arial, "Segoe UI", sans-serif; }
.dev button { font-family: inherit; cursor: pointer; padding: 0; }
.dev .gi { width: 1.15em; height: 1.15em; display: block; margin: 0 auto; }
.devbar { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.devbar select { width: auto; min-width: 250px; }
.funk2 { display: grid; grid-template-columns: minmax(0, 820px) minmax(320px, 1fr); gap: 26px; align-items: start; }
.funkleft { min-width: 0; }
@media (max-width: 1320px) { .funk2 { grid-template-columns: 1fr; } }
a.btn { text-decoration: none; }
.pttbar { width: 100%; margin-top: 14px; border: 0; border-radius: 16px; min-height: 76px; cursor: pointer; background: linear-gradient(180deg, #343a43, #16181c); color: #eef0f4; font-weight: 800; letter-spacing: .22em; font-size: 15px; box-shadow: 0 5px 0 #000, inset 0 1px 0 rgba(255, 255, 255, .12); touch-action: none; }
.pttbar small { display: block; letter-spacing: .08em; font-weight: 600; font-size: 11px; color: #9aa3b3; margin-top: 4px; }
.pttbar.down { transform: translateY(4px); box-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #c42b36, #8a1820); }
.pttbar.down small { color: #ffd0d3; }
.pttbar[disabled] { opacity: .45; cursor: not-allowed; }
.devhint { text-align: center; margin-top: 10px; font-size: 12px; color: var(--dim); }
button.holding::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .38); transform-origin: left; animation: holdfill 1.2s linear forwards; border-radius: inherit; pointer-events: none; }
@keyframes holdfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes blink { 50% { opacity: .2; } }
.em-act { animation: blink .7s infinite; }

/* ---------- 1) Zugfunk-Bedienteil ---------- */
.mora { width: 860px; height: 420px; background: linear-gradient(180deg, #14171b 0%, #090a0c 100%); border: 3px solid #1d2126; border-radius: 12px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6), inset 0 0 0 2px #2b3037, inset 0 2px 6px rgba(255, 255, 255, .05); }
.mora::before { content: "gsmR  mm"; position: absolute; left: 140px; bottom: 16px; font: italic 600 15px Arial; color: #3b4047; letter-spacing: .06em; }
.mk { position: absolute; background: radial-gradient(circle at 50% 30%, #0a1311, #040605); border: 2.5px solid #7ff0cf; color: #b7fbe8; border-radius: 8px; font-size: 24px; font-weight: 500; display: grid; place-items: center; box-shadow: 0 0 12px rgba(127, 240, 207, .38), inset 0 0 12px rgba(127, 240, 207, .16); overflow: hidden; }
.mk:active { background: #123c31; }
.mk .gi { width: 28px; height: 28px; }
.mk.dg { font-size: 22px; }
.mo-em { position: absolute; background: transparent; border: 0; }
.mo-em svg { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(255, 90, 43, .8)); }
.mora .mo-lcd { position: absolute; background: linear-gradient(180deg, #2a46e6, #1330c4); border: 4px solid #070d44; border-radius: 4px; box-shadow: 0 0 34px rgba(50, 90, 255, .6), inset 0 0 36px rgba(0, 0, 50, .5); color: #f2f7ff; overflow: hidden; font-family: "Arial Narrow", "Segoe UI", Arial, sans-serif; }
.mora .mo-lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255, 255, 255, .13), transparent 38%); }
.mo-icons { position: absolute; left: 0; top: 0; bottom: 56px; width: 54px; border-right: 2px solid #b9cdff; display: grid; grid-template-rows: repeat(4, 1fr); }
.mo-icons span { display: grid; place-items: center; border-bottom: 2px solid #b9cdff; color: #fff; } .mo-icons span:last-child { border-bottom: 0; }
.mo-icons .gi { width: 26px; height: 26px; }
.mo-time { position: absolute; left: 66px; top: 8px; font-size: 26px; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.mo-title { position: absolute; left: 212px; top: 10px; width: 196px; height: 28px; background: #f6f9ff; color: #1330c4; text-align: center; font-weight: 600; font-size: 20px; line-height: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 4px; }
.mo-info { position: absolute; right: 8px; top: 8px; width: 98px; }
.mo-i { height: 24px; line-height: 22px; font-size: 14px; text-align: right; color: #fff; border-bottom: 2px solid #b9cdff; margin-bottom: 4px; font-weight: 600; overflow: hidden; white-space: nowrap; }
.mo-text { position: absolute; left: 66px; top: 84px; width: 200px; font-size: 25px; line-height: 30px; font-weight: 500; }
.mo-text.tx { color: #ffc3c8; } .mo-text.rx { color: #aaffd9; } .mo-text.em { color: #ffe27a; } .mo-text.off { color: #b6c5f2; } .mo-text.busy { color: #ffe9a8; }
.mo-box { position: absolute; left: 284px; top: 52px; width: 118px; height: 122px; background: #f6f9ff; color: #1330c4; text-align: center; }
.mo-bars { display: flex; justify-content: space-between; padding: 12px 12px 4px; } .mo-bars i { width: 7px; height: 34px; background: #1330c4; }
.mo-box b { display: block; font-size: 42px; line-height: 52px; letter-spacing: .02em; font-weight: 600; }
.mo-box.rxs { background: #aaffd9; } .mo-box.txs { background: #ffc3c8; } .mo-box.ems { background: #ffe27a; animation: blink .8s infinite; }
.mo-soft { position: absolute; left: 54px; right: 0; bottom: 0; height: 56px; border-top: 2px solid #b9cdff; display: grid; grid-template-columns: repeat(10, 1fr); }
.mo-soft button { background: transparent; border: 0; border-right: 1px solid #6e8ce6; color: #fff; font-size: 14px; font-weight: 600; display: grid; place-items: center; position: relative; }
.mo-soft button:last-child { border-right: 0; } .mo-soft button.act { background: #f6f9ff; color: #1330c4; } .mo-soft button.ring { background: #43d98e; color: #052d1c; }
.mo-soft .gi { width: 24px; height: 24px; } .mo-soft sup { position: absolute; right: 4px; top: 4px; font-size: 12px; }

/* ---------- Konsolen (Modular und Integrated) ---------- */
.modular, .integrated { background: linear-gradient(155deg, #1b1d21 0%, #0c0d0f 100%); border: 2px solid #272a30; border-radius: 8px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.modular { width: 460px; height: 470px; } .integrated { width: 640px; height: 520px; }
.screw { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e1e4e8, #858a92 60%, #4d5157); box-shadow: 0 1px 2px #000; } .screw::after { content: ""; position: absolute; left: 4px; right: 4px; top: 9px; height: 2px; background: #3a3d42; transform: rotate(35deg); }
.tel-status { position: absolute; display: flex; justify-content: space-between; font-size: 11px; color: #b8bdc5; letter-spacing: .08em; }
.tel-status i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2f3338; margin-right: 5px; vertical-align: middle; border: 1px solid #000; } .tel-status i.on { background: #3ddc97; box-shadow: 0 0 7px #3ddc97; }
.tel-status span:nth-child(3) i.on { background: #ff4a55; box-shadow: 0 0 7px #ff4a55; }
.lcdg { position: absolute; background: linear-gradient(180deg, #b4c3a2, #a2b190); color: #1b2418; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 15px; font-weight: 600; border: 4px solid #07080a; border-radius: 4px; box-shadow: inset 0 0 18px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .08); overflow: hidden; line-height: 1.5; padding: 6px 8px; }
.lcdg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px); }
.lcdg div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lcdg .inv { background: #1b2418; color: #b4c3a2; padding: 0 5px; margin: 1px -5px; }
.tk { position: absolute; background: linear-gradient(180deg, #2a2d33, #131518); border: 1px solid #3c4048; border-radius: 8px; color: #f3f5f8; font-weight: 700; font-size: 21px; display: grid; place-items: center; align-content: center; box-shadow: 0 3px 0 #000, inset 0 1px 0 rgba(255, 255, 255, .09); line-height: 1; }
.tk:active { transform: translateY(3px); box-shadow: 0 0 0 #000; }
.tk.s { font-size: 15px; } .tk.g { color: #3ddc97; } .tk.r { color: #ff5a64; } .tk.ic .gi { width: 28px; height: 28px; }
.tk small { display: block; font-size: 9px; font-weight: 600; color: #9ca3ad; margin-top: 4px; letter-spacing: .06em; }
.tk .gi { width: 22px; height: 22px; }
.hazard { position: absolute; background: linear-gradient(180deg, #ff2f3d, #c2101f); border: 2px solid #ff8a92; border-radius: 8px; display: grid; place-items: center; box-shadow: 0 0 16px rgba(255, 40, 55, .5), inset 0 0 0 2px #7a0b14; overflow: hidden; }
.hazard svg { width: 54%; height: 54%; }
.hazard.stripes { background: repeating-linear-gradient(135deg, #dc1f2c 0 10px, #fff 10px 20px); border: 2px solid #fff; }
.hazard.stripes span { background: #dc1f2c; color: #fff; font-weight: 900; font-size: 14px; letter-spacing: .12em; padding: 4px 10px; border-radius: 3px; }
.speaker { position: absolute; border-radius: 14px; background: radial-gradient(circle, #050506 0 1.6px, transparent 2.2px) 0 0/11px 11px, #111214; border: 1px solid #2d3036; }
.handset { position: absolute; }
.hs-body { position: absolute; left: 30px; top: 0; width: 74px; height: 350px; background: linear-gradient(90deg, #08080a, #2d3035 46%, #08080a); border-radius: 36px 36px 42px 42px; box-shadow: 0 10px 22px #000; border: 1px solid #3d4047; }
.hs-ear { position: absolute; left: 44px; top: 26px; width: 46px; height: 80px; border-radius: 18px; z-index: 1; background: radial-gradient(circle, #000 0 1.4px, transparent 2px) 0 0/8px 8px, #16171a; }
.hs-mic { position: absolute; left: 46px; top: 290px; width: 42px; height: 44px; border-radius: 14px; z-index: 1; background: radial-gradient(circle, #000 0 1.2px, transparent 1.8px) 0 0/7px 7px, #16171a; }
.hs-ptt { position: absolute; left: 22px; top: 130px; width: 34px; height: 130px; z-index: 2; background: linear-gradient(90deg, #0e0f11, #3a3d43); border: 1px solid #4d5158; border-radius: 12px; color: #b0b6bf; font-size: 10px; letter-spacing: .18em; writing-mode: vertical-rl; box-shadow: 0 3px 8px #000; }
.hs-ptt.down { background: linear-gradient(90deg, #8a1820, #c42b36); color: #fff; }
.cord { position: absolute; left: 0; top: 340px; width: 130px; height: 120px; overflow: visible; }

/* ---------- RCC-3000 ---------- */
.rcc { width: 640px; height: 440px; background: linear-gradient(160deg, #17191d, #08090b); border: 2px solid #2a2d33; border-radius: 16px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.rcc .scr { position: absolute; background: linear-gradient(180deg, #eef3f8, #dfe7ef); border-radius: 6px; color: #17304a; overflow: hidden; box-shadow: inset 0 0 0 3px #000, 0 0 0 1px #3a3e45; font-family: "Segoe UI", Arial, sans-serif; }
.rcc .strip { height: 28px; background: linear-gradient(180deg, #d4deea, #c3cfde); border-bottom: 1px solid #a5b4c6; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; font-size: 13px; font-weight: 600; color: #2c4561; }
.rcc .sl { display: flex; align-items: center; gap: 6px; } .rcc .sl .gi { width: 16px; height: 16px; }
.rcc .tile { position: absolute; background: linear-gradient(180deg, #3a93ff, #1767d6); color: #fff; border: 1px solid #0d4eaa; border-radius: 8px; display: grid; place-items: center; align-content: center; gap: 2px; font-size: 11px; font-weight: 600; text-align: center; line-height: 1.1; box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .3); }
.rcc .tile .gi { width: 22px; height: 22px; } .rcc .tile:active { filter: brightness(.88); transform: translateY(1px); }
.rcc .tile.grp { font-size: 14px; } .rcc .tile.grp[disabled] { background: linear-gradient(180deg, #cdd8e5, #bcc9d9); border-color: #a5b4c6; color: #8294a8; box-shadow: none; cursor: default; }
.rcc .tile.act { background: linear-gradient(180deg, #ffd45e, #f2a900); color: #3a2800; border-color: #b57e00; }
.rcc .tile.num { background: linear-gradient(180deg, #fbfdff, #dde6ef); color: #17304a; border-color: #aab8c9; font-size: 18px; font-weight: 700; }
.rcc .tile.gr { background: linear-gradient(180deg, #34c985, #1c9a5d); border-color: #137a49; font-size: 13px; } .rcc .tile.rd { background: linear-gradient(180deg, #ec4651, #b71b27); border-color: #85101a; font-size: 13px; }
.rcc .big { position: absolute; background: #fff; border: 1px solid #aebccd; border-radius: 8px; padding: 10px 14px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .08); }
.rcc .gname { font-size: 23px; font-weight: 800; color: #0d3b78; line-height: 1.1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rcc .gl2 { font-size: 13px; color: #4a627b; margin-top: 4px; }
.rcc .gst { position: absolute; left: 12px; right: 12px; bottom: 10px; text-align: center; padding: 7px; font-weight: 800; letter-spacing: .1em; font-size: 14px; border-radius: 5px; background: #dbe9fb; color: #124a97; }
.rcc .gst.tx { background: #ffd6da; color: #b0121e; } .rcc .gst.rx { background: #cff5e2; color: #0b7a4a; } .rcc .gst.em { background: #e22531; color: #fff; animation: blink .7s infinite; } .rcc .gst.off { background: #e4e9ee; color: #7a8794; } .rcc .gst.busy { background: #ffe9b8; color: #8a5a00; }
.rcc .redtile { position: absolute; background: linear-gradient(180deg, #f5343f, #bf111d); border: 2px solid #ff8a92; border-radius: 8px; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #7a0b14; overflow: hidden; }
.rcc .redtile svg { width: 38px; height: 38px; }
.rcc .hw { position: absolute; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffbd6b, #e0680a); border: 1px solid #7a3300; box-shadow: 0 0 10px rgba(255, 140, 30, .7); overflow: hidden; }
.rcc .pled { position: absolute; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 8px #3ddc97; }

/* ---------- Analoges Zugfunkgerät ---------- */
.analog { width: 420px; height: 440px; background: linear-gradient(160deg, #23262b 0%, #101215 100%); border: 2px solid #30343a; border-radius: 14px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .07); }
.an-label { position: absolute; text-align: center; font-size: 12px; letter-spacing: .34em; color: #9aa1ac; font-weight: 700; }
.an-leds { position: absolute; display: flex; justify-content: space-around; font-size: 11px; color: #b8bdc5; letter-spacing: .08em; }
.an-leds i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2f3338; margin-right: 5px; border: 1px solid #000; } .an-leds i.on { background: #3ddc97; box-shadow: 0 0 7px #3ddc97; } .an-leds i.tx.on { background: #ff4a55; box-shadow: 0 0 7px #ff4a55; }
.an-lcd { position: absolute; background: linear-gradient(180deg, #17120a, #0c0905); border: 4px solid #050403; border-radius: 6px; color: #ffb338; text-align: center; box-shadow: inset 0 0 24px rgba(0, 0, 0, .8), 0 0 0 1px #2c2f35; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; text-shadow: 0 0 10px rgba(255, 170, 40, .6); }
.an-lcd small { display: block; font-size: 11px; letter-spacing: .3em; margin-top: 6px; opacity: .8; }
.an-ch { font-size: 52px; font-weight: 700; line-height: 1.05; letter-spacing: .06em; }
.an-nm { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 10px; }
.an-st { font-size: 11px; letter-spacing: .2em; opacity: .75; margin-top: 2px; }
.knob { position: absolute; border-radius: 50%; border: 0; background: conic-gradient(from 0deg, #3b3f46, #1a1c20, #3b3f46, #1a1c20, #3b3f46); box-shadow: 0 8px 18px #000, inset 0 0 0 6px #121316, inset 0 0 0 8px #2b2e34; --rot: 0deg; }
.knob .kn-mark { position: absolute; left: 50%; top: 12px; width: 5px; height: 28px; margin-left: -2.5px; border-radius: 3px; background: #ffb338; transform-origin: 50% 42px; transform: rotate(var(--rot)); transition: transform .25s; box-shadow: 0 0 6px rgba(255, 179, 56, .7); }
.kn-label { position: absolute; text-align: center; font-size: 10px; letter-spacing: .2em; color: #8d949f; font-weight: 700; }
.an-hint { position: absolute; text-align: center; font-size: 11px; color: #6c737e; }
.an-ptt { position: absolute; border: 0; border-radius: 12px; background: linear-gradient(180deg, #353a42, #1b1d21); color: #eef0f4; font-weight: 800; letter-spacing: .18em; font-size: 13px; box-shadow: 0 4px 0 #000, inset 0 1px 0 rgba(255, 255, 255, .12); touch-action: none; }
.an-ptt.down { transform: translateY(3px); box-shadow: 0 1px 0 #000; background: linear-gradient(180deg, #c42b36, #8a1820); }

/* ---------- Stellwerks-Telefon ---------- */
.phone { width: 540px; height: 470px; background: linear-gradient(160deg, #1e2025 0%, #0b0c0e 100%); border: 2px solid #2a2d33; border-radius: 12px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.phone .hs { position: absolute; border: 0; background: transparent; }
.phone .hs::before { content: ""; position: absolute; left: 22px; top: 0; width: 84px; height: 250px; border-radius: 40px 40px 46px 46px; background: linear-gradient(90deg, #08080a, #2f3238 48%, #08080a); box-shadow: 0 10px 22px #000; border: 1px solid #3d4047; transition: transform .2s; }
.phone .hs.lifted::before { transform: translate(-8px, -10px) rotate(-8deg); box-shadow: 0 0 0 2px #3ddc97, 0 14px 26px #000; }
.phone .hs.ringing::before { animation: shake .3s infinite; box-shadow: 0 0 0 2px #ffb338, 0 10px 22px #000; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.ph-ear, .ph-mic { position: absolute; left: 46px; width: 36px; height: 56px; border-radius: 14px; z-index: 1; background: radial-gradient(circle, #000 0 1.3px, transparent 1.9px) 0 0/7px 7px, #17181b; }
.ph-ear { top: 22px; } .ph-mic { top: 176px; height: 50px; }
.ph-grip { position: absolute; left: 44px; top: 96px; width: 40px; height: 70px; border-radius: 12px; z-index: 1; background: repeating-linear-gradient(0deg, #1a1b1e 0 4px, #232529 4px 8px); }
.phone .tel-status { right: auto; }