/* Regieraum, Oberfläche. Theme dark und gold nach MyFramework V3.
   Struktur über 1px-Linien, flache Flächen, eine Schrift. */

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  src: url('../vendor/fonts/roboto-mono.woff2') format('woff2');
}

:root {
  --gray-0: #1C1C1E; --gray-1: #232326; --gray-2: #2C2C30; --gray-3: #38383D;
  --gray-4: #4A4A50; --gray-5: #6E6E76; --gray-6: #9A9AA1; --gray-7: #C7C7CC;
  --gray-8: #F2F2F3;
  --accent-9: #E4B123; --accent-hover: #EFC04A; --accent-active: #C99610;
  --accent-muted: #3A331A; --accent-border: #6B551D;
  --success-9: #4E9B6B; --warning-9: #D68A3C; --danger-9: #C4554A;
  --surface-app: var(--gray-0); --surface-raised: var(--gray-1);
  --surface-overlay: #19191B;
  --border-subtle: var(--gray-3); --border-strong: var(--gray-4);
  --text-primary: var(--gray-8); --text-secondary: var(--gray-7);
  --text-muted: var(--gray-6); --text-on-accent: #1C1C1E;
  --focus-ring: var(--accent-9);
  --mono: 'Roboto Mono', ui-monospace, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--mono);
  background: var(--surface-app);
  color: var(--text-primary);
  font-size: 12px; line-height: 1.5;
  display: flex; flex-direction: column;
  min-width: 1280px;
}
::selection { background: var(--accent-muted); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------- Kopfzeile ---------- */

.kopf {
  display: flex; align-items: center; gap: 12px; height: 52px; flex: 0 0 52px;
  padding: 0 14px; border-bottom: 1px solid var(--border-subtle);
}
.marke { display: flex; align-items: center; gap: 9px; }
.marke .q { width: 10px; height: 10px; background: var(--accent-9); }
.marke .n { font-weight: 700; font-size: 13px; letter-spacing: 0.16em; }
#projekt-titel {
  font: inherit; color: var(--text-secondary); background: transparent;
  border: 1px solid transparent; border-radius: 5px; padding: 4px 8px; width: 240px;
}
#projekt-titel:hover { border-color: var(--border-subtle); }
#projekt-titel:focus { border-color: var(--accent-border); outline: none; color: var(--text-primary); }
.kopf .dehner { flex: 1; }

.tbtn {
  width: 36px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: 6px;
  color: var(--text-secondary); font-size: 11px;
}
.tbtn:hover { background: var(--gray-2); }
.tbtn.rec { color: var(--danger-9); }
.tbtn.rec.aktiv { background: var(--danger-9); color: var(--gray-8); border-color: var(--danger-9); }
.tgrp { display: flex; gap: 6px; }

.zeitfeld {
  display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px;
  border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--surface-overlay);
}
.zeitfeld .takt { color: var(--accent-9); font-weight: 500; }
.zeitfeld .strich { color: var(--gray-4); }

.haupt-knopf {
  height: 30px; padding: 0 16px; display: inline-flex; align-items: center;
  background: var(--accent-9); color: var(--text-on-accent); font-weight: 500;
  border-radius: 6px; font-size: 12px;
}
.haupt-knopf:hover { background: var(--accent-hover); }
.haupt-knopf:active { background: var(--accent-active); transform: scale(0.98); }
.haupt-knopf:disabled { opacity: 0.5; cursor: default; }

.neben-knopf {
  height: 30px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); border-radius: 6px; font-size: 11px;
}
.neben-knopf:hover { background: var(--gray-2); }
.neben-knopf:disabled { opacity: 0.45; cursor: default; }

/* ---------- Hauptfläche ---------- */

.haupt { display: flex; flex: 1 1 auto; min-height: 0; }
.bild-zone {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  border-right: 1px solid var(--border-subtle); background: var(--surface-overlay); padding: 12px;
}
body.pult-links .haupt { flex-direction: row-reverse; }
body.pult-links .bild-zone { border-right: 0; border-left: 1px solid var(--border-subtle); }

.schirm {
  position: relative; width: 100%; max-height: calc(100% - 26px);
  aspect-ratio: 16 / 9; background: #101013;
  border: 1px solid var(--border-subtle); overflow: hidden; align-self: center;
}
.schirm canvas { width: 100%; height: 100%; display: block; }
.bild-unter { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--text-muted); }
.bild-unter button { color: var(--text-muted); text-decoration: underline; }
.bild-unter button:hover { color: var(--text-secondary); }

/* ---------- Mischpult ---------- */

.pult { display: flex; flex: 0 0 auto; }
.zug {
  width: 236px; border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; background: var(--surface-app);
  overflow-y: auto;
}
.zug.schmal { width: 172px; }
.zug:last-child { border-right: 0; }
.zug-kopf {
  padding: 9px 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); flex: 0 0 auto;
}

.modul { border-bottom: 1px solid var(--border-subtle); padding: 6px 12px 8px; flex: 0 0 auto; }
.modul.zieht { opacity: 0.4; }
.modul.ablage { box-shadow: inset 0 2px 0 var(--accent-9); }
.mod-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; cursor: grab; }
.mod-kopf .name { font-size: 10px; letter-spacing: 0.12em; color: var(--text-muted); font-weight: 500; }
.mod-kopf .re { margin-left: auto; font-size: 9px; color: var(--text-muted); }
.mod-kopf .griffpunkte { color: var(--gray-4); font-size: 10px; letter-spacing: -1px; }

.led {
  min-width: 26px; height: 15px; border-radius: 3px; border: 1px solid var(--border-strong);
  background: var(--surface-raised); display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em;
  padding: 0 3px; cursor: pointer; user-select: none;
}
.led.an { background: var(--accent-9); border-color: var(--accent-9); color: var(--text-on-accent); }

.knopfreihe { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.knopf {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 48px;
  cursor: ns-resize; user-select: none; touch-action: none;
}
.knopf[data-klein] { width: 42px; }
.knopf .lbl { font-size: 8px; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; white-space: nowrap; }
.knopf .wert { font-size: 10px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.knopf-teller { fill: var(--gray-2); stroke: var(--border-strong); stroke-width: 1; }
.knopf-schiene { fill: none; stroke: var(--gray-3); stroke-width: 2.5; stroke-linecap: round; }
.knopf-wert { fill: none; stroke: var(--accent-9); stroke-width: 2.5; stroke-linecap: round; }
.knopf-zeiger { stroke: var(--gray-8); stroke-width: 2; stroke-linecap: round; }

.lernt { border-radius: 6px; outline: 2px solid var(--accent-9); outline-offset: 2px; animation: lernen 1.1s ease-in-out infinite; }
@keyframes lernen { 0%, 100% { outline-color: var(--accent-9); } 50% { outline-color: var(--accent-border); } }
@media (prefers-reduced-motion: reduce) { .lernt { animation: none; } }

.mini-taster {
  font-size: 9px; letter-spacing: 0.06em; padding: 4px 8px; border-radius: 4px;
  border: 1px solid var(--border-subtle); background: var(--surface-raised); color: var(--text-secondary);
}
.mini-taster:hover { background: var(--gray-2); }
.mini-taster.aktiv { border-color: var(--accent-border); background: var(--accent-muted); color: var(--accent-9); }
.voreinst { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }

.datei-box {
  border: 1px solid var(--border-subtle); border-radius: 6px; background: var(--surface-overlay);
  padding: 8px 10px; font-size: 10px; cursor: pointer; display: block;
}
.datei-box:hover { border-color: var(--border-strong); }
.datei-box .dn { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-box .di { color: var(--text-muted); margin-top: 3px; }
.datei-box .di b { color: var(--accent-9); font-weight: 500; }
.datei-box input { display: none; }

.lufs-zahl { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lufs-zahl small { font-size: 10px; font-weight: 400; color: var(--text-muted); display: block; letter-spacing: 0.08em; }
.ziel-zeile { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 6px; }

.hinweis-klein { color: var(--text-muted); font-size: 9px; line-height: 1.5; }

/* ---------- Fader-Zone ---------- */

.fader-zone {
  margin-top: auto; padding: 10px 12px 12px; display: flex; gap: 10px; align-items: flex-end;
  flex: 0 0 auto; position: sticky; bottom: 0; background: var(--surface-app);
  border-top: 1px solid var(--border-subtle);
}
.fader { position: relative; height: 148px; width: 46px; cursor: ns-resize; touch-action: none; user-select: none; }
.fader .schiene { position: absolute; left: 15px; top: 4px; bottom: 4px; width: 3px; background: var(--gray-3); border-radius: 2px; }
.fader .griff {
  position: absolute; left: 2px; width: 30px; height: 13px; border-radius: 3px;
  background: var(--gray-2); border: 1px solid var(--border-strong);
}
.fader .griff::after { content: ''; position: absolute; left: 4px; right: 4px; top: 5px; height: 2px; background: var(--accent-9); border-radius: 1px; }
.fader .skala { position: absolute; left: 37px; top: 0; bottom: 0; font-size: 8px; color: var(--gray-5); }
.fader .skala span { position: absolute; transform: translateY(-50%); }

.meter { position: relative; width: 7px; height: 148px; border: 1px solid var(--border-subtle); border-radius: 3px; overflow: hidden; background: var(--surface-overlay); }
.meter .farbe { position: absolute; inset: 0; background: linear-gradient(to top, var(--success-9) 0 62%, var(--warning-9) 62% 84%, var(--danger-9) 84% 100%); }
.meter .deckel { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--surface-overlay); }

.fz-spalte { display: flex; flex-direction: column; gap: 6px; }
.fz-btn {
  width: 28px; height: 22px; border-radius: 4px; border: 1px solid var(--border-subtle);
  background: var(--surface-raised); color: var(--text-muted); font-size: 9px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.fz-btn:hover { background: var(--gray-2); }
.fz-btn.aktiv { background: var(--accent-muted); border-color: var(--accent-border); color: var(--accent-9); }

/* ---------- Zeitleiste ---------- */

.zeitleiste { position: relative; border-top: 1px solid var(--border-subtle); flex: 0 0 auto; }
body.zeit-oben .zeitleiste { order: -1; border-top: 0; border-bottom: 1px solid var(--border-subtle); }
.zl-zeile { display: grid; grid-template-columns: 88px 1fr; border-bottom: 1px solid var(--border-subtle); }
.zl-zeile:last-child { border-bottom: 0; }
.zl-label {
  font-size: 9px; letter-spacing: 0.12em; color: var(--text-muted); text-transform: uppercase;
  display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--border-subtle);
}
.zl-lineal { height: 26px; position: relative; }
.zl-lineal .tick { position: absolute; bottom: 0; width: 1px; height: 7px; background: var(--gray-3); }
.zl-lineal .tick.haupt { height: 11px; background: var(--gray-4); }
.zl-lineal .tnr { position: absolute; bottom: 10px; font-size: 8px; color: var(--gray-5); transform: translateX(3px); }
#lineal-hinweis { position: absolute; right: 10px; top: 4px; font-size: 9px; color: var(--text-muted); }
.zl-spur { position: relative; }
.zl-spur canvas { display: block; width: 100%; }
.zl-szenen { height: 30px; position: relative; }
.marke-r {
  position: absolute; top: 50%; transform: translate(-50%, -50%) rotate(45deg);
  width: 9px; height: 9px; background: var(--accent-9); border-radius: 1px;
}
.marke-t { position: absolute; top: 50%; transform: translateY(-50%); font-size: 9px; color: var(--text-secondary); margin-left: 10px; white-space: nowrap; }
.abspielkopf { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--accent-9); z-index: 3; pointer-events: none; }
.abspielkopf::before {
  content: ''; position: absolute; top: 0; left: -4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--accent-9);
}

/* ---------- Leiste unten ---------- */

.leiste {
  display: flex; align-items: center; gap: 16px; height: 42px; flex: 0 0 42px;
  padding: 0 14px; border-top: 1px solid var(--border-subtle); font-size: 11px; color: var(--text-muted);
}
.lr { display: flex; align-items: center; gap: 6px; }
.lr .k { font-size: 9px; }
.hmeter { position: relative; width: 110px; height: 8px; border: 1px solid var(--border-subtle); border-radius: 3px; overflow: hidden; background: var(--surface-overlay); }
.hmeter .farbe { position: absolute; inset: 0; background: linear-gradient(to right, var(--success-9) 0 62%, var(--warning-9) 62% 84%, var(--danger-9) 84% 100%); }
.hmeter .deckel { position: absolute; top: 0; bottom: 0; right: 0; width: 100%; background: var(--surface-overlay); }
.leiste b { color: var(--text-primary); font-weight: 500; }
.ab-taster {
  height: 26px; padding: 0 12px; border-radius: 5px; border: 1px solid var(--border-subtle);
  background: var(--surface-raised); color: var(--text-secondary); font-size: 10px; letter-spacing: 0.06em;
  user-select: none;
}
.ab-taster.aktiv { border-color: var(--accent-border); background: var(--accent-muted); color: var(--accent-9); }
.leiste .rechts { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 10px; }
.leiste .punkt { color: var(--success-9); }

/* ---------- Meldung und Dialoge ---------- */

#meldung {
  position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%) translateY(8px);
  background: var(--surface-overlay); border: 1px solid var(--accent-border); color: var(--text-secondary);
  padding: 8px 14px; border-radius: 6px; font-size: 11px; max-width: 640px;
  opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms; z-index: 40;
}
#meldung.sichtbar { opacity: 1; transform: translateX(-50%) translateY(0); }

.dialog {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(16, 16, 19, 0.6); z-index: 50;
}
.dialog.offen { display: flex; }
.dialog .karte {
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 20px 22px; width: 520px; max-width: 92vw;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.dialog h2 { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.dialog p { color: var(--text-muted); font-size: 11px; margin-bottom: 10px; }
.dialog textarea {
  width: 100%; min-height: 160px; background: var(--surface-overlay); color: var(--text-primary);
  border: 1px solid var(--border-subtle); border-radius: 6px; padding: 10px; font: inherit; font-size: 12px;
  resize: vertical;
}
.dialog .reihe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.dialog .zeile { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-subtle); }
.dialog .zeile:last-of-type { border-bottom: 0; }

/* ---------- EQ-Kurve ---------- */

#eq-kurve { display: block; margin-bottom: 6px; }
.eq-null { stroke: var(--gray-3); stroke-width: 1; }
.eq-pfad { stroke: var(--accent-9); stroke-width: 1.8; fill: none; }

/* ---------- Selbsttest ---------- */

#selbsttest {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  background: var(--surface-overlay); border: 1px solid var(--border-strong); border-radius: 8px;
  padding: 16px 20px; z-index: 60; font-size: 12px; min-width: 560px;
}
#selbsttest h3 { margin-bottom: 8px; font-size: 13px; }
#selbsttest .gut { color: var(--success-9); padding: 2px 0; }
#selbsttest .schlecht { color: var(--danger-9); padding: 2px 0; }

/* ---------- Schmale Fenster: Pult unter die Bühne ---------- */

@media (max-width: 1279px) {
  body { min-width: 720px; }
  .haupt { flex-direction: column; overflow-y: auto; }
  body.pult-links .haupt { flex-direction: column-reverse; }
  .bild-zone { border-right: 0; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
  body.pult-links .bild-zone { border-left: 0; }
  .schirm { max-width: 720px; }
  .pult { border-bottom: 1px solid var(--border-subtle); }
  .zug { flex: 1 1 0; min-width: 172px; overflow-y: visible; }
  .fader-zone { position: static; border-top: 0; }
}