/* Gerät: Gehäuse, Lünette, feste Mitte, Tasten, Display-Rahmen, Pfeile auf der Lünette */

/* Bühne und Gerät ------------------------------------------------------------ */
.stage { display: grid; gap: 12px; justify-items: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.rig { padding-block: 6px 2px; }
.device {
  --w: min(62vw, 262px);
  --w: clamp(188px, min(62vw, calc((100svh - 250px) / 2.62)), 262px);
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 2.62);
  --c-1: var(--hell-1); --c-2: var(--hell-2); --c-3: var(--hell-3);
  --c-ka: var(--hell-knurl-a); --c-kb: var(--hell-knurl-b);
  --c-m1: var(--hell-metal-1); --c-m2: var(--hell-metal-2); --c-m3: var(--hell-metal-3);
  --c-key: var(--hell-key); --c-glyph: var(--hell-glyph);
  --c-mark: rgba(22, 24, 26, 0.4); --c-mark-on: rgba(22, 24, 26, 0.92);
  --c-engrave: rgba(36, 40, 44, 0.42); --c-engrave-hi: rgba(255, 255, 255, 0.6);
}
.device[data-finish="dunkel"] {
  --c-1: var(--dunkel-1); --c-2: var(--dunkel-2); --c-3: var(--dunkel-3);
  --c-ka: var(--dunkel-knurl-a); --c-kb: var(--dunkel-knurl-b);
  --c-m1: var(--dunkel-metal-1); --c-m2: var(--dunkel-metal-2); --c-m3: var(--dunkel-metal-3);
  --c-key: var(--dunkel-key); --c-glyph: var(--dunkel-glyph);
  --c-mark: rgba(230, 232, 229, 0.4); --c-mark-on: rgba(244, 245, 242, 0.95);
  --c-engrave: rgba(16, 18, 20, 0.5); --c-engrave-hi: rgba(255, 255, 255, 0.14);
}
@media (max-width: 919.98px) {
  /* Unter dem klebenden Modell bleibt Platz für Lünette, Tasten und Display */
  .device { --w: clamp(180px, min(62vw, calc((70svh - 56px) / 1.89)), 262px); }
}
.body {
  position: absolute;
  inset: 0;
  border-radius: 50% / 19%;
  background: linear-gradient(162deg, var(--c-1) 0%, var(--c-2) 48%, var(--c-3) 100%);
  box-shadow: 0 34px 44px -26px var(--shadow), 0 2px 3px rgba(0, 0, 0, 0.18),
              inset 0 1.5px 0 rgba(255, 255, 255, 0.28), inset 0 -3px 8px rgba(0, 0, 0, 0.16);
}
.led {
  position: absolute;
  top: 2.4%;
  left: 50%;
  width: calc(var(--w) * 0.032);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  transition: background 0.12s, box-shadow 0.12s;
}
.led.on { background: var(--led-mic); box-shadow: 0 0 calc(var(--w) * 0.05) calc(var(--w) * 0.016) color-mix(in srgb, var(--led-mic) 55%, transparent); }
.mic { position: absolute; top: 2.75%; left: 38%; width: calc(var(--w) * 0.014); aspect-ratio: 1; border-radius: 50%; background: rgba(0, 0, 0, 0.55); }

.disc {
  position: absolute;
  left: 50%;
  top: 5.4%;
  width: 78%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  touch-action: none;
  cursor: grab;
}
.disc:active { cursor: grabbing; }
.disc::before {
  content: "";
  position: absolute;
  inset: -2.6%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.38), 0 1px 0 rgba(255, 255, 255, 0.22);
}
.disc:focus-visible { outline-offset: 7px; border-radius: 50%; }
.disc-tilt { position: absolute; inset: 0; border-radius: 50%; transition: transform 0.09s ease-out; }
.disc-tilt.t-hoch { transform: perspective(520px) rotateX(9deg); }
.disc-tilt.t-runter { transform: perspective(520px) rotateX(-9deg); }
.disc-tilt.t-links { transform: perspective(520px) rotateY(-9deg); }
.disc-tilt.t-rechts { transform: perspective(520px) rotateY(9deg); }
.disc-tilt.t-mitte { transform: scale(0.975); }
.disc-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--c-ka) 0deg 2deg, var(--c-kb) 2deg 4deg); /* 90 Rillen, ohne Naht */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  will-change: transform;
}
/* Feststehende Mitte (eigene Taste), der Ring drumherum dreht (B-25) */
.disc-cap {
  position: absolute;
  inset: 17%;
  z-index: 1;
  border-radius: 50%;
  transition: transform 0.08s ease-out;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0 1px, rgba(0, 0, 0, 0.035) 1px 2.5px),
    radial-gradient(circle at 50% 36%, var(--c-m1) 0%, var(--c-m2) 64%, var(--c-m3) 100%);
  box-shadow: 0 0 0 calc(var(--w) * 0.007) rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 -2px 5px rgba(0, 0, 0, 0.12);
}
.disc-cap.down { transform: scale(0.965); }

.keys {
  position: absolute;
  left: 50%;
  top: 37.6%;
  width: 78%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  row-gap: calc(var(--w) * 0.05);
}
.key {
  width: calc(var(--w) * 0.185);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c-key) 82%, white) 0%, var(--c-key) 70%);
  color: var(--c-glyph);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 3px rgba(0, 0, 0, 0.38), 0 0 0 calc(var(--w) * 0.008) rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: none;
  transition: transform 0.06s, box-shadow 0.06s;
}
.key svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.key.is-down { transform: scale(0.94); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3); }
.key:focus-visible { outline-offset: 3px; border-radius: 50%; }
.device[data-layout="tasten"] .keys { top: 36.4%; grid-template-columns: repeat(6, 1fr); }
.device[data-layout="tasten"] .k1 { grid-column: 1 / 3; }
.device[data-layout="tasten"] .k2 { grid-column: 3 / 5; }
.device[data-layout="tasten"] .k3 { grid-column: 5 / 7; }
.device[data-layout="tasten"] .k4 { grid-column: 2 / 4; }
.device[data-layout="tasten"] .k5 { grid-column: 4 / 6; }
/* Eine Reihe unter der Lünette: drei Tasten (rund 9,7 mm) mit gleichen Abständen. Die Reihe ist so breit
   wie die Lünette, die Lücken (rund 5,9 mm) sind etwa so groß wie der Abstand zum Rand (rund 5,7 mm) */
.device[data-layout="reihe"] .keys {
  --k: calc(var(--w) * 0.185); --g: calc(var(--w) * 0.1125);
  top: 37%; width: max-content;
  grid-template-columns: var(--k) var(--g) var(--k) var(--g) var(--k);
}
.device[data-layout="reihe"] .k1 { grid-column: 1; }
.device[data-layout="reihe"] .k2 { grid-column: 3; }
.device[data-layout="reihe"] .k3 { grid-column: 5; }

.screen {
  position: absolute;
  left: 50%;
  top: 48.2%;
  width: 78%;
  height: 41%;
  transform: translateX(-50%);
  border-radius: calc(var(--w) * 0.07);
  background: var(--scr-bg);
  box-shadow: 0 0 0 calc(var(--w) * 0.012) rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  overflow: hidden;
  container-type: size;
  touch-action: none;
  cursor: ew-resize;
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}
.device[data-layout="tasten"] .screen { top: 55.8%; width: 70%; height: 33.4%; }
/* 2,4-Zoll-Panel, aktive Fläche 36,7 × 49,0 mm */
.device[data-layout="reihe"] .screen { top: 47.4%; width: 70.2%; height: 35.8%; }
.screen.night .scr { opacity: 0.58; }

/* Bedienhinweis (vorläufig, B-30): auf der festen Mitte OK und, kleiner, Raum (lang drücken). */
.cap-ok {
  position: absolute; left: 50%; top: 41%; transform: translate(-50%, -50%);
  font: 600 calc(var(--w) * 0.05)/1 var(--font-ui); letter-spacing: 0.14em; padding-left: 0.14em;
  color: var(--c-engrave); text-shadow: 0 1px 0 var(--c-engrave-hi); pointer-events: none;
}
.cap-room {
  position: absolute; left: 50%; top: 66%; width: calc(var(--w) * 0.05); height: calc(var(--w) * 0.05); transform: translate(-50%, -50%);
  fill: none; stroke: var(--c-engrave); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 1px 0 var(--c-engrave-hi)); pointer-events: none;
}
/* Links und rechts auf der Lünette (vorläufig, welcher Weg am besten ist, ist offen; B-47, Nutzer, 2026-10-08):
   Pfeile auf dem festen Gehäuse neben dem Ring, ton in ton wie die Gravur der Mitte */
.navhint {
  position: absolute; top: calc(5.4% + var(--w) * 0.39); width: calc(var(--w) * 0.075); height: calc(var(--w) * 0.075); transform: translate(-50%, -50%);
  fill: none; stroke: var(--c-engrave); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 var(--c-engrave-hi)); pointer-events: none; transition: stroke 0.12s ease-out;
}
.navhint.l { left: 5.6%; }
.navhint.r { left: 94.4%; }
.navhint.hit { stroke: var(--c-mark-on); }
.side-key {
  position: absolute;
  right: calc(var(--w) * -0.024);
  top: 16.5%;
  width: calc(var(--w) * 0.034);
  height: 12%;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--c-3), var(--c-1));
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  touch-action: none;
}
.side-key::before { content: ""; position: absolute; inset: -8px -16px -8px -10px; }
.side-key.is-down { transform: translateX(-1.5px); }
.side-key:focus-visible { outline-offset: 4px; border-radius: 99px; }