/* ---------------------------------------------------------------------------
   VEYCA – nachgebautes Bedienpanel

   Alle Masse stammen vom echten Gerät: Designauflösung 1560 × 720 px (13:6),
   Raster 5 × 305 px auf 2 × 305 px mit 1 px Fuge, Leiste oben 55 px, unten
   54 px, Lautstärkebalken 30 px am rechten Rand. Die Farben sind ebenfalls die
   des Geräts. Das Panel wird als 1560 × 720 grosse Fläche gebaut und per
   transform: scale() in den Display-Ausschnitt des Fotos gesetzt – dadurch
   stimmen Schriftgrössen und Fugen bei jeder Darstellungsgrösse.
   --------------------------------------------------------------------------- */

.panel {
  position: absolute; inset: 0;
  overflow: hidden;
  background: var(--panel-bg);
  container-type: inline-size;
}
.panel__stage {
  position: absolute; left: 0; top: 0;
  width: 1560px; height: 720px;
  transform-origin: 0 0;
  transform: scale(var(--scale, 1));
  background: var(--panel-bg);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  user-select: none; -webkit-user-select: none;
}

/* --- Gruppenleisten --------------------------------------------------------- */
.panel__bar {
  position: absolute; left: 0; width: 1560px;
  background: var(--panel-bar); z-index: 6;
}
.panel__bar--top    { top: 0;    height: 55px; border-bottom: 1px solid var(--panel-line); }
.panel__bar--bottom { bottom: 0; height: 54px; border-top: 1px solid var(--panel-line); }
.panel__group {
  position: absolute; top: 50%; transform: translateY(-50%);
  padding: 8px 18px;
  font-size: 30px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}

/* --- Kachelraster ----------------------------------------------------------- */
.panel__grid {
  position: absolute; left: 0; top: 55px;
  display: grid;
  grid-template-columns: repeat(5, 305px);
  grid-template-rows: repeat(2, 305px);
  gap: 1px; width: 1529px; height: 611px;
}
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 0; margin: 0;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--panel-tile); color: #fff;
  transition: background 140ms linear, color 140ms linear;
  -webkit-tap-highlight-color: transparent;
}
.tile[data-on='true'] { background: var(--panel-active); color: var(--panel-ink-on); }
.tile:active { transform: scale(.96); }
.tile:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.tile--power { background: var(--panel-tile); }
.tile--standby { background: var(--panel-standby); }

.tile__label { font-size: 68px; font-weight: 600; line-height: 1.02; text-align: center; }
.tile__caption { font-size: 32px; font-weight: 600; }
.tile__icon {
  width: 120px; height: 120px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.tile__icon--power {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220 -960 960 960%22 width=%2224px%22 fill=%22%23e3e3e3%22%3E%3Cpath d=%22M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-84 31.5-156.5T197-763l56 56q-44 44-68.5 102T160-480q0 134 93 227t227 93q134 0 227-93t93-227q0-67-24.5-125T707-707l56-56q54 54 85.5 126.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-360v-440h80v440h-80Z%22/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220 -960 960 960%22 width=%2224px%22 fill=%22%23e3e3e3%22%3E%3Cpath d=%22M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-84 31.5-156.5T197-763l56 56q-44 44-68.5 102T160-480q0 134 93 227t227 93q134 0 227-93t93-227q0-67-24.5-125T707-707l56-56q54 54 85.5 126.5T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm-40-360v-440h80v440h-80Z%22/%3E%3C/svg%3E");
}
.tile__icon--freeze {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220 -960 960 960%22 width=%2224px%22 fill=%22%23e3e3e3%22%3E%3Cpath d=%22M440-246 337-145q-11 11-27.5 11T282-146q-12-11-12-27.5t12-28.5l158-158v-80h-80L201-281q-11 11-27.5 11T145-282q-11-11-11-27.5t11-27.5l101-103H119q-17 0-28-11.5T80-480q0-17 11.5-28.5T120-520h126L145-622q-11-11-11-27.5t12-28.5q11-11 27.5-11t28.5 11l158 158h80v-80L281-758q-11-11-11-27.5t12-28.5q11-11 27.5-11t27.5 11l103 100v-126q0-17 11.5-28.5T480-880q17 0 28.5 11.5T520-840v126l102-100q11-11 27.5-11t28.5 11q11 12 11 28.5T678-758L520-600v80h80l158-158q11-11 27.5-11t28.5 12q11 11 11 27.5T814-622L714-520h126q17 0 28.5 11.5T880-480q0 17-11.5 28.5T840-440H714l100 103q11 11 11 27.5T814-282q-12 12-28.5 12T758-282L600-440h-80v80l158 159q11 11 11 27.5T677-145q-11 11-27.5 11T622-145L520-246v127q0 17-11.5 28T480-80q-17 0-28.5-11.5T440-120v-126Z%22/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220 -960 960 960%22 width=%2224px%22 fill=%22%23e3e3e3%22%3E%3Cpath d=%22M440-246 337-145q-11 11-27.5 11T282-146q-12-11-12-27.5t12-28.5l158-158v-80h-80L201-281q-11 11-27.5 11T145-282q-11-11-11-27.5t11-27.5l101-103H119q-17 0-28-11.5T80-480q0-17 11.5-28.5T120-520h126L145-622q-11-11-11-27.5t12-28.5q11-11 27.5-11t28.5 11l158 158h80v-80L281-758q-11-11-11-27.5t12-28.5q11-11 27.5-11t27.5 11l103 100v-126q0-17 11.5-28.5T480-880q17 0 28.5 11.5T520-840v126l102-100q11-11 27.5-11t28.5 11q11 12 11 28.5T678-758L520-600v80h80l158-158q11-11 27.5-11t28.5 12q11 11 11 27.5T814-622L714-520h126q17 0 28.5 11.5T880-480q0 17-11.5 28.5T840-440H714l100 103q11 11 11 27.5T814-282q-12 12-28.5 12T758-282L600-440h-80v80l158 159q11 11 11 27.5T677-145q-11 11-27.5 11T622-145L520-246v127q0 17-11.5 28T480-80q-17 0-28.5-11.5T440-120v-126Z%22/%3E%3C/svg%3E");
}
.tile__icon--picturemute {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220 -960 960 960%22 width=%2224px%22 fill=%22%23e3e3e3%22%3E%3Cpath d=%22m853-221-53-53v-486H314l-80-80h566q33 0 56.5 23.5T880-760v480q0 18-6.5 32.5T853-221ZM127-833l73 73h-40v480h406L28-820l56-56L876-84l-56 56-172-172h-8v80H320v-80H160q-33 0-56.5-23.5T80-280v-480q0-37 23.5-55l23.5-18Zm237 351Zm195-33Z%22/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 height=%2224px%22 viewBox=%220 -960 960 960%22 width=%2224px%22 fill=%22%23e3e3e3%22%3E%3Cpath d=%22m853-221-53-53v-486H314l-80-80h566q33 0 56.5 23.5T880-760v480q0 18-6.5 32.5T853-221ZM127-833l73 73h-40v480h406L28-820l56-56L876-84l-56 56-172-172h-8v80H320v-80H160q-33 0-56.5-23.5T80-280v-480q0-37 23.5-55l23.5-18Zm237 351Zm195-33Z%22/%3E%3C/svg%3E");
}

/* --- Lautstärke ------------------------------------------------------------- */
.panel__vol {
  position: absolute; right: 0; top: 55px; bottom: 54px; width: 30px;
  background: #000; z-index: 7; overflow: hidden;
}
.panel__vol i {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #fff; height: 0; transition: height 200ms ease;
}
.panel__vol.is-muted i {
  height: 100% !important; background: var(--panel-standby);
  animation: vol-blink 1s steps(1) infinite;
}
@keyframes vol-blink { 50% { opacity: .25; } }

/* Unsichtbare Logo-Fläche oben rechts, wie auf dem Gerät: öffnet die Systeminfo */
.panel__logo {
  position: absolute; right: 30px; top: 0; width: 120px; height: 55px;
  background: none; border: 0; cursor: pointer; z-index: 8;
}
.panel__logo:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* --- Dialoge ----------------------------------------------------------------- */
.panel__modal {
  position: absolute; inset: 0; z-index: 9;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .72);
}
.panel__modal.is-open { display: flex; }
/* Rundungen, Schatten und Schaltflächenfarben wie im Original
   (static/css/styles.css: .modal-content 20px, .modal-button 16px). */
.panel__card {
  width: 1180px; max-width: 92%;
  padding: 70px 80px;
  background: #353941; border: 0; border-radius: 20px; text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.panel__card h3 { font-size: 52px; font-weight: 700; margin-bottom: 26px; color: #fff; }
.panel__card p { font-size: 28px; color: #9ca3af; }
.panel__card-actions { display: flex; gap: 40px; justify-content: center; margin-top: 54px; }
.panel__card button {
  padding: 28px 90px; font-size: 28px; font-weight: 600;
  border: 0; border-radius: 16px; background: #2b2e31; color: #fff; cursor: pointer;
}
.panel__card button.is-primary { background: #dc2626; }
.panel__card button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.panel__spinner {
  width: 120px; height: 120px; margin: 0 auto 40px;
  border: 6px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.panel__info { text-align: left; }
.panel__info dl { display: grid; grid-template-columns: auto 1fr; gap: 16px 44px; margin-top: 34px; }
.panel__info dt { font-size: 24px; color: #9ca3af; }
.panel__info dd { font-size: 24px; color: #fff; margin: 0; text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .panel__spinner, .panel__vol.is-muted i { animation: none; }
}

/* --- Einbettung ins Frontfoto ------------------------------------------------ */
/* Die Glasöffnung im Foto misst x 2930–4468 px, y 155–870 px von 5994 × 1635.
   Das Panel sitzt bewusst ETWAS KLEINER darin: 28 px Rand seitlich, 15.5 px oben
   und unten. So liegt es innerhalb des Glases statt auf dem Rahmen, und die
   Abmessungen treffen genau das Seitenverhältnis 2.167 des echten Panels:
     1482 / 684 px  →  49.35 % / 10.43 % / 24.72 % / 41.83 %
   Der Radius entspricht der Eckenrundung der Öffnung (rund 33 px).            */
.demo { margin: 0; }
.demo__frame { position: relative; }
.demo__photo { width: 100%; height: auto; }
.demo__screen {
  position: absolute;
  left: 49.35%; top: 10.43%; width: 24.72%; height: 41.83%;
  overflow: hidden; background: #000;
  border-radius: 2% / 4.4%;
}

/* Der Drehregler im Foto: Mitte 78.71 % / 31.22 %, Durchmesser 3.65 % der Breite */
.demo__knob {
  position: absolute;
  left: 78.71%; top: 31.22%; width: 3.9%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%; border: 0; background: transparent;
  cursor: grab; touch-action: none;
}
.demo__knob:active { cursor: grabbing; }
.demo__knob::after {
  content: ''; position: absolute; inset: -18%;
  border: 1px solid transparent; border-radius: 50%;
  transition: border-color var(--dur-1) var(--ease);
}
.demo__knob:hover::after, .demo__knob:focus-visible::after { border-color: var(--line-bright); }
.demo__knob:focus-visible { outline: none; }
.demo__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.demo__note { font-size: var(--step-small); color: var(--ink-3); }
.demo__note strong {
  color: var(--ink); font-weight: 600; letter-spacing: var(--track-wide);
  text-transform: uppercase; font-size: .72rem; margin-right: .4em;
}
.demo__tools { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }
.demo__vol {
  font-size: var(--step-small); color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 10ch;
}

.tile__label { white-space: pre-line; }


/* --- Panel in voller Breite (schmale Bildschirme) ---------------------------- */
.demo__wide { display: none; }

@media (max-width: 760px) {
  .demo__wide {
    display: block; position: relative;
    width: 100%; aspect-ratio: 1560 / 720;
    margin-top: var(--s-4);
    border: 1px solid var(--line);
  }
  /* Das Panel im Foto bleibt als Spiegelbild sichtbar, nimmt aber keine
     Eingaben mehr an - es wäre bei dieser Grösse nicht treffbar. */
  .demo__screen { pointer-events: none; }
  .demo__knob { width: 7%; }
  .demo__bar { gap: var(--s-3); }
  /* Nebeneinander lief die letzte Schaltfläche über den Rand hinaus. */
  .demo__tools { margin-left: 0; flex-wrap: wrap; width: 100%; }
  .demo__vol { min-width: 0; width: 100%; }
}