:root {
  --glow: rgba(120, 170, 255, 0.65);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6vw;
  background: #1b1d22;
  color: #e7e9ee;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

#main_frame {

  position: absolute;;
  top: 7%;
  left: 1%;
  width: 98%;
  height: 86%;
  border: 1px solid #e7e9ee;
  border-radius: 0.8vw;
  padding: 2vw;
  z-index: -100;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6vw;
}

.app__title {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.14vw;
  text-transform: uppercase;
  font-size: 1.4vw;
  color: #aab2c5;
}

/* ---------- MIDI-Auswahl (oben rechts) ---------- */

.midi-bar {
  position: fixed;
  top: 1.1vw;
  right: 1.25vw;
  display: flex;
  align-items: center;
  gap: 0.55vw;
  font-size: 0.85vw;
  color: #8a92a6;
}

.midi-bar__label {
  text-transform: uppercase;
  letter-spacing: 0.07vw;
}

.midi-select,
.synth-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0.4vw 2vw 0.4vw 0.7vw;
  font: inherit;
  font-size: 0.85vw;
  color: #d5d9e2;
  background-color: #23262e;
  border: 1px solid #363a45;
  border-radius: 0.4vw;
  cursor: pointer;
  /* eigener Dropdown-Pfeil (SVG als Data-URI) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a92a6' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7vw center;
  transition: border-color 0.12s ease;
}

.midi-select { max-width: 15vw; }

/* Instrument-Dropdown gelb */
.instrument-select-row .synth-select {
  color: #ffd700;
}

.midi-select:hover,
.synth-select:hover { border-color: #4a4f5c; }

.midi-select:focus,
.synth-select:focus {
  outline: none;
  border-color: var(--glow);
}

.midi-select:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ---------- Style-Kombifeld (Suche + Trefferliste) ---------- */

.style-combo {
  position: relative;
  width: 18vw;
}

/* Erbt das Aussehen von .synth-select, ersetzt aber den Auswahlpfeil rechts
   durch eine Lupe links und macht daraus wieder ein echtes Textfeld. */
.style-combo__input {
  width: 100%;
  cursor: text;
  padding: 0.4vw 0.7vw 0.4vw 1.9vw;
  color: #42a5f5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='5' cy='5' r='3.4' stroke='%238a92a6' stroke-width='1.3' fill='none'/%3E%3Cpath d='M7.7 7.7L11 11' stroke='%238a92a6' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-position: left 0.6vw center;
}

.style-combo__input::placeholder { color: #6f7787; }

.style-combo__list[hidden] { display: none; }

.style-combo__list {
  position: absolute;
  top: calc(100% + 0.3vw);
  left: 0;
  z-index: 40;
  width: 24vw;
  max-width: 60vw;
  max-height: 42vh;
  overflow-y: auto;
  padding: 0.25vw;
  background: #1c1f26;
  border: 1px solid #3a3f4b;
  border-radius: 0.4vw;
  box-shadow: 0 0.6vw 1.6vw rgba(0, 0, 0, 0.45);
}

.style-combo__cat {
  position: sticky;
  top: 0;
  padding: 0.35vw 0.5vw 0.2vw;
  font-size: 0.66vw;
  text-transform: uppercase;
  letter-spacing: 0.08vw;
  color: #7d879b;
  background: #1c1f26;
}

.style-combo__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6vw;
  padding: 0.32vw 0.5vw;
  border-radius: 0.3vw;
  font-size: 0.8vw;
  color: #d5d9e2;
  cursor: pointer;
}

.style-combo__item:hover { background: #262b36; }
.style-combo__item.is-active { background: #33507a; color: #eaf2ff; }

.style-combo__name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.style-combo__meta {
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68vw;
  color: #7d879b;
}

.style-combo__item.is-active .style-combo__meta { color: #b9c8e4; }

.style-combo__note {
  padding: 0.4vw 0.5vw;
  font-size: 0.72vw;
  color: #7d879b;
}

/* ---------- Presets ("Soundsets": Style + OTS + Klangzustand) ---------- */

.soundset-save {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  border: 1px solid #3a4a6b;
  border-radius: 0.35vw;
  background: #26304a;
  color: #cfe0ff;
  font: inherit;
  font-size: 0.78vw;
  padding: 0.4vw 0;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.soundset-save:hover { border-color: var(--glow); background: #2c3a5c; color: #eaf2ff; }

.soundset-list {
  display: flex;
  flex-direction: column;
  gap: 0.3vw;
  width: 16vw;
  /* In vw statt vh, wie der Rest der Zeile: die Liste steht nicht als
     schwebendes Overlay (wie .style-combo__list/.song-instruments-panel),
     sondern normal im Fluss der Gruppe – bei .synth-row { align-items:
     stretch } zieht ein vh-Wert sonst die ganze Zeile (Instrument/Styles/
     MIDI-Datei) mit hoch, sobald mehrere Soundsets gespeichert sind. Knapp
     4 Einträge sichtbar, Rest per Scrollbalken. */
  max-height: 10vw;
  overflow-y: auto;
}

/* Dezente, dunkle Scrollbar */
.soundset-list::-webkit-scrollbar {
  width: 0.4vw;
}

.soundset-list::-webkit-scrollbar-track {
  background: transparent;
}

.soundset-list::-webkit-scrollbar-thumb {
  background: #3a3f4b;
  border-radius: 0.2vw;
}

.soundset-list::-webkit-scrollbar-thumb:hover {
  background: #4a4f5c;
}

.soundset-empty {
  font-size: 0.72vw;
  color: #7d879b;
}

.soundset-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4vw;
  padding: 0.3vw 0.4vw;
  border-radius: 0.35vw;
  background: #23262e;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.soundset-item:hover { background: #2a2e37; }

.soundset-item__info {
  display: flex;
  flex-direction: column;
  min-width: 0;   /* Kinder dürfen unter ihre Inhaltsbreite schrumpfen (für ellipsis) */
}

.soundset-item__name {
  font-size: 0.78vw;
  color: #d5d9e2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soundset-item__meta {
  font-size: 0.66vw;
  color: #7d879b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.soundset-item__rename {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 0.78vw;
  color: #d5d9e2;
  background: #14161b;
  border: 1px solid var(--glow);
  border-radius: 0.25vw;
  padding: 0.1vw 0.3vw;
}

.soundset-item__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.15vw;
}

.soundset-item__icon {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 0.25vw;
  background: transparent;
  color: #8a92a6;
  font-size: 0.68vw;
  line-height: 1;
  padding: 0.2vw 0.35vw;
  cursor: pointer;
}

.soundset-item__icon:hover { border-color: #4a4f5c; background: #2f333c; color: #d5d9e2; }

.soundset-item__icon--del.is-armed {
  border-color: #c96a6a;
  background: #3a2426;
  color: #ffb3b3;
  font-size: 0.62vw;
}

/* ---------- Bedienleiste über der Klaviatur ---------- */

/* Eine Zeile, bündig mit der Tastatur (90vw): links die Gruppen
   Sync | Intro | Main | Ending | OTS | Stop, rechts der gegriffene Akkord und
   der Titel – den rückt initStyleSectionsPanel aus der Seitenmitte in diese
   Zeile, damit die Leiste die volle Breite über den Tasten bekommt.
   Fills haben bewusst keinen Knopf (siehe STYLE_BAR_GROUPS in main.js). */
.section-bar {
  width: 90vw;
  display: flex;
  align-items: flex-end;
  gap: 1.9vw;
  padding-bottom: 0.55vw;
  border-bottom: 1px solid #47262c;
}

.section-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3vw;
}

.section-group__label {
  font-size: 0.62vw;
  text-transform: uppercase;
  letter-spacing: 0.09vw;
  color: #8a92a6;
  white-space: nowrap;
}

.section-group__btns { display: flex; gap: 0.35vw; }

/* Knopf: dunkle Kappe, oben ein LED-Streifen, darunter der Buchstabe. Die LED
   ist im Ruhezustand dunkel und leuchtet ausschließlich über die
   Zustandsklassen weiter unten – die Farbe hängt also am Zustand, nicht am
   Knopf. */
.sec-btn {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28vw;
  width: 2.3vw;
  height: 2.7vw;
  padding: 0.34vw 0 0;
  border: 1px solid #40454f;
  border-radius: 0.28vw;
  background: linear-gradient(#3c414b, #2c313a);
  color: #9aa3b4;
  font: inherit;
  font-size: 0.72vw;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.sec-btn:hover:not(:disabled) {
  border-color: #5a616e;
  background: linear-gradient(#474d59, #343a44);
  color: #dfe4ed;
}

/* Beim Drücken den Verlauf umdrehen – der Knopf wirkt eingedrückt. */
.sec-btn:active:not(:disabled) { background: linear-gradient(#2c313a, #3c414b); }
.sec-btn:disabled { opacity: 0.32; cursor: default; }
.sec-btn.is-active { border-color: #6e7686; color: #eef2f8; }

.sec-btn__led {
  width: 1.25vw;
  height: 0.3vw;
  border-radius: 0.08vw;
  background: #23262e;
  box-shadow: inset 0 0.05vw 0.1vw rgba(0, 0, 0, 0.65);
  transition: background-color 0.1s ease, box-shadow 0.1s ease;
}

.sec-btn__cap { font-variant-numeric: tabular-nums; }

/* Leuchtfarben je Gruppe: Sync/Intro grün, Main blau, Ending orange,
   Auto-Harmonics violett (wie das Tonart-Label daneben), Play Chords türkis. */
.sec-btn[data-kind="sync"].is-active  .sec-btn__led,
.sec-btn[data-kind="intro"].is-active .sec-btn__led { background: #3ddc84; box-shadow: 0 0 0.45vw #3ddc84; }
.sec-btn[data-kind="main"].is-active   .sec-btn__led { background: #4cc9f0; box-shadow: 0 0 0.45vw #4cc9f0; }
.sec-btn[data-kind="ending"].is-active .sec-btn__led { background: #ff9f43; box-shadow: 0 0 0.45vw #ff9f43; }
.sec-btn[data-kind="harm"].is-active   .sec-btn__led { background: #c792ea; box-shadow: 0 0 0.45vw #c792ea; }
.sec-btn[data-kind="chords"].is-active .sec-btn__led { background: #2dd4bf; box-shadow: 0 0 0.45vw #2dd4bf; }

/* Vorgemerkt (greift erst zum nächsten Taktstrich) blinkt bernstein, das
   scharfe Sync-Main pulsiert grün. Beide brauchen ein [data-kind] im Selektor,
   sonst gewönnen die Farbregeln oben über die höhere Spezifität. */
.sec-btn[data-kind].is-pending .sec-btn__led { animation: sec-led-blink 0.55s steps(1, end) infinite; }
.sec-btn[data-kind].is-armed   .sec-btn__led { animation: sec-led-arm 1.1s ease-in-out infinite; }

@keyframes sec-led-blink {
  0%, 49%   { background: #e0b75f; box-shadow: 0 0 0.45vw #e0b75f; }
  50%, 100% { background: #23262e; box-shadow: none; }
}

@keyframes sec-led-arm {
  0%, 100% { background: #23262e; box-shadow: none; }
  50%      { background: #3ddc84; box-shadow: 0 0 0.45vw #3ddc84; }
}

/* Stopp trägt keine LED, sondern das übliche Quadrat. */
.sec-btn--stop {
  justify-content: center;
  padding: 0;
  gap: 0;
}

.sec-btn__square {
  width: 0.85vw;
  height: 0.85vw;
  border-radius: 0.12vw;
  background: #c2c8d4;
  transition: background-color 0.12s ease;
}

.sec-btn--stop:hover:not(:disabled) .sec-btn__square { background: #ffffff; }

/* Tonart neben dem Auto-Harmonics-Schalter. Feste Mindestbreite, damit die
   Leiste nicht springt, wenn sie erscheint oder wieder verschwindet. Bewusst
   nur hellgrau, nicht in der Akkordfarbe (section-bar__chord) – sie soll
   nicht mit dem gerade gespielten Akkord konkurrieren. */
.section-bar__key {
  min-width: 2.1vw;
  margin-left: 0.35vw;   /* etwas Luft zum Schalter, sonst klebt sie daran */
  align-self: center;
  font-size: 0.95vw;
  font-weight: 600;
  letter-spacing: 0.04vw;
  color: #c2c8d4;
  white-space: nowrap;
}

/* OTS: runde Knöpfe mit Nummer. Hier leuchtet keine LED – bei anliegender
   Registrierung wird der GANZE Knopf heller (so gewünscht). */
.ots-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 2.3vw;
  height: 2.3vw;
  border-radius: 50%;
  border: 1px solid #40454f;
  background: linear-gradient(#3c414b, #2c313a);
  color: #9aa3b4;
  font: inherit;
  font-size: 0.8vw;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.ots-btn:hover:not(:disabled) {
  border-color: #5a616e;
  background: linear-gradient(#474d59, #343a44);
  color: #dfe4ed;
}

.ots-btn:disabled { opacity: 0.32; cursor: default; }

.ots-btn.is-active {
  border-color: #9db3d6;
  background: linear-gradient(#aab6c9, #7d8a9f);
  color: #12151a;
  box-shadow: 0 0 0.55vw rgba(157, 179, 214, 0.5);
}

.section-bar__spacer { flex: 1 1 auto; }

/* Gegriffener Akkord – dasselbe Blau wie sonst im Player. Feste Mindestbreite,
   damit der Titel daneben nicht wandert, wenn der Name kürzer wird. */
.section-bar__chord {
  min-width: 4vw;
  text-align: right;
  font-size: 1vw;
  font-weight: 600;
  letter-spacing: 0.04vw;
  color: #78aaff;
}

.section-bar .app__title { align-self: flex-end; }

/* ---------- Werkzeugleiste (oben links) ---------- */

.tools-bar {
  position: fixed;
  top: 1.1vw;
  left: 1.25vw;
  display: flex;
  align-items: center;
  gap: 1.25vw;
  font-size: 0.85vw;
  color: #8a92a6;
}

.tools-bar__check {
  display: flex;
  align-items: center;
  gap: 0.55vw;
  cursor: pointer;
  user-select: none;
}

/* Soundfont-Auswahl, rechts neben den Checkboxen. Begrenzte Breite, weil
   manche Soundfont-Namen sehr lang sind ("Timbres Of Heaven GM_GS_XG_SFX
   V 3.4 Final") und die Leiste sonst quer über den Bildschirm liefe. */
.tools-bar__field {
  display: flex;
  align-items: center;
  gap: 0.55vw;
  user-select: none;
}

.tools-bar__label {
  text-transform: uppercase;
  letter-spacing: 0.07vw;
}

.tools-bar__field .synth-select { max-width: 17vw; }

/* Eigene Checkbox: leere Box, im Zustand „an" ein kleines graues Quadrat */
.tools-bar__check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1vw;
  height: 1vw;
  margin: 0;
  border: 1px solid #4a4f5c;
  border-radius: 0.2vw;
  background: #23262e;
  cursor: pointer;
  position: relative;
  transition: border-color 0.12s ease;
}

.tools-bar__check input:hover { border-color: #5a616f; }

.tools-bar__check input:checked::after {
  content: '';
  position: absolute;
  inset: 0.22vw;           /* kleines Quadrat mittig in der Box */
  border-radius: 1px;
  background: #c2c8d4;     /* grau, nicht blau */
}

.tools-bar__check input:focus-visible {
  outline: 2px solid #4a4f5c;
  outline-offset: 1px;
}

/* ---------- Bedienpanel (über dem Titel) ---------- */

.synth-panel {
  width: 90vw;               /* bündig mit dem Keyboard */
  display: flex;
  flex-direction: column;    /* zwei gestapelte Reihen */
  gap: 1vw;
}

.synth-row {
  display: flex;
  flex-wrap: wrap;           /* bei schmalen Fenstern umbrechen */
  align-items: stretch;      /* Gruppen einer Reihe gleich hoch */
  gap: 1vw;
}

.ctrl-group {
  position: relative;   /* Anker für evtl. absolut positionierte Overlays */
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
  padding: 0.7vw 0.9vw;
  background: #21242b;
  border: 1px solid #2f333c;
  border-radius: 0.5vw;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

/* Drag & Drop einer lokalen .mid-Datei auf die "MIDI-Datei"-Gruppe (siehe
   midiFileGroup in main.js). */
.ctrl-group.is-dragover {
  border-color: var(--glow);
  background: #262b36;
}

.ctrl-group__title {
  font-size: 0.72vw;
  text-transform: uppercase;
  letter-spacing: 0.1vw;
  color: #7d879b;
}

/* Wrapper für vertikal gestapelte Gruppen (Instrument + Styles) */
.ctrl-group-stack {
  display: flex;
  flex-direction: column;
  gap: 0.5vw;
}

/* Utility zum Ein-/Ausblenden von Bausteinen (z. B. Song-Instrumente-Panel).
   !important, weil generische Utility-Klasse: muss jede spätere
   Komponentenregel mit eigenem `display` (z. B. .song-instruments-panel)
   unabhängig von der Reihenfolge im Stylesheet übersteuern. */
.is-hidden { display: none !important; }

.instrument-status {
  font-size: 0.72vw;
  color: #7d879b;
}

/* Zeile aus Lade-LED + Dropdown: .ctrl-group selbst ist eine Spalte, ohne
   diese Zeile stünde die LED über statt neben dem Dropdown (siehe
   instrumentGroup in main.js). */
.instrument-select-row {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

/* Pulsiert, solange initSoundfont() läuft; erlischt bei Erfolg UND bei
   endgültigem Fehlschlag (kein Sinn, für etwas zu pulsieren, das nie fertig
   wird – siehe instrumentGroup). Dasselbe Blau wie sonst im Player. */
.instrument-led {
  flex: 0 0 auto;
  width: 0.55vw;
  height: 0.55vw;
  border-radius: 50%;
  background: #78aaff;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.instrument-led.is-loading {
  opacity: 1;
  animation: instrument-led-pulse 1.1s ease-in-out infinite;
}

@keyframes instrument-led-pulse {
  0%, 100% { opacity: 0.35; box-shadow: none; }
  50% { opacity: 1; box-shadow: 0 0 0.5vw var(--glow); }
}

/* Warnhinweis beim Versuch, während des Ladens zu spielen oder eine
   MIDI-Datei zu starten (siehe showSoundfontLoadingNotice in main.js).
   Dezent (kein Vollbild-Overlay, kein Blocking-Modal) aber deutlich genug,
   um nicht übersehen zu werden: fest positioniert, eigener Rahmenton. */
.sf-loading-notice {
  position: fixed;
  left: 50%;
  bottom: 3vw;
  transform: translate(-50%, 0.6vw);
  z-index: 100;
  max-width: 26vw;
  padding: 0.7vw 1.1vw;
  background: #21242b;
  border: 1px solid #6b7488;
  border-left: 0.25vw solid #78aaff;
  border-radius: 0.4vw;
  box-shadow: 0 0.4vw 1.6vw rgba(0, 0, 0, 0.6);
  color: #e7e9ee;
  font-size: 0.85vw;
  line-height: 1.4;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.sf-loading-notice.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Start/Pause/Stopp der MIDI-Datei-Wiedergabe */
.midi-transport {
  display: flex;
  gap: 0.4vw;
}

.midi-transport button {
  appearance: none;
  -webkit-appearance: none;
  flex: 1;
  border: 1px solid #363a45;
  border-radius: 0.35vw;
  background: #23262e;
  color: #d5d9e2;
  font: inherit;
  font-size: 0.95vw;
  line-height: 1;
  padding: 0.3vw 0;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}

.midi-transport button:hover { border-color: #4a4f5c; background: #2a2e37; }

/* Aktiver Zustand (Start = läuft gerade, Pause = pausiert): leuchtet bläulich,
   passend zum --glow-Ton, der auch bei Fokus/Ausrichtung verwendet wird. */
.midi-transport button.is-active {
  background: #3a5480;
  border-color: var(--glow);
  color: #eaf2ff;
  box-shadow: 0 0 0.5vw rgba(120, 170, 255, 0.55);
}

.midi-transport button.is-active:hover { background: #40608f; }

/* Fortschrittsanzeige der MIDI-Datei-Wiedergabe */
.midi-progress {
  height: 0.45vw;
  border-radius: 0.2vw;
  background: #15171c;
  border: 1px solid #363a45;
  overflow: hidden;
}

.midi-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #4a72b0, var(--glow));
}

/* Mixer: Lautstärke je Instrument/Kanal – ursprünglich für die MIDI-Datei-
   Wiedergabe gebaut, jetzt von stylesGroup() für die Style-Begleitung
   wiederverwendet (siehe songInstrumentsControl in main.js). Der Button sitzt
   neben der Infozeile (.style-status-row), das Panel hängt als großes,
   schließbares Overlay unter der GANZEN Styles-Box: position:absolute auf
   .ctrl-group selbst als Anker (siehe dort), damit es beim Öffnen über den
   darunterliegenden Elementen schwebt statt sie zu verschieben. */
.style-status-row {
  display: flex;
  flex-wrap: wrap;   /* lange Infozeile (Kanäle/Sections/BPM/Takt) darf umbrechen statt zu überlaufen */
  align-items: center;
  justify-content: space-between;
  gap: 0.3vw 0.5vw;
}

.style-mixer-btn { flex: 0 0 auto; }

.song-instruments-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #363a45;
  border-radius: 0.3vw;
  background: #23262e;
  color: #8a92a6;
  font: inherit;
  font-size: 0.7vw;
  line-height: 1;
  padding: 0.25vw 0.6vw;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.song-instruments-btn:hover:not(:disabled) { border-color: #4a4f5c; background: #2a2e37; color: #d5d9e2; }
.song-instruments-btn:disabled { opacity: 0.4; cursor: default; }

/* Bleibt offen, bis der ×-Button gedrückt wird (siehe songInstrumentsControl):
   Mischpult zum Mitarbeiten, kein flüchtiges Menü. Zwei Spalten, damit auch
   ein Style mit allen 16 Kanälen ohne Scrollen hineinpasst. "Großes Overlay"
   auf Wunsch: deutlich mehr Platz als ein normales Dropdown-Panel. */
.song-instruments-panel {
  position: absolute;
  top: calc(100% + 0.35vw);
  left: 0;
  z-index: 45;
  width: min(90vw, 38vw);
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15vw;
  padding: 0.6vw;
  /* Heller Rand + etwas hellerer Grund + kräftigerer Schatten: Mit den Werten
     der Regler-Gruppen (#21242b/#2f333c) ging das Panel optisch in den
     Gruppen unter, über denen es schwebt. */
  background: #272b34;
  border: 1px solid #6b7488;
  border-radius: 0.4vw;
  box-shadow: 0 0.4vw 1.6vw rgba(0, 0, 0, 0.6);
}

.song-instruments-panel__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.1vw 0.9vw;
}

.song-instruments-panel__empty {
  font-size: 0.75vw;
  color: #7d879b;
  padding: 0.3vw;
}

.song-instruments-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.3vw 0.3vw;
  margin-bottom: 0.2vw;
  border-bottom: 1px solid #3c424f;
}

.song-instruments-panel__title {
  font-size: 0.72vw;
  text-transform: uppercase;
  letter-spacing: 0.1vw;
  color: #7d879b;
}

.song-instruments-panel__close {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  color: #8a92a6;
  font-size: 1vw;
  line-height: 1;
  padding: 0 0.2vw;
  cursor: pointer;
}

.song-instruments-panel__close:hover { color: #d5d9e2; }

/* Eine Zeile je Kanal: Instrumentenname oben, darunter Lautstärke-Regler +
   Prozentwert. Zweizeilig, weil die Namen (z. B. "Acoustic Guitar (steel)")
   neben einem Regler sonst fast durchweg abgeschnitten würden. */
.song-instruments__row {
  display: flex;
  flex-direction: column;
  gap: 0.05vw;
  font-size: 0.78vw;
  color: #d5d9e2;
  padding: 0.2vw 0.3vw;
  border-radius: 0.25vw;
  user-select: none;
}

.song-instruments__row:hover { background: #333945; }   /* auf dem helleren Panelgrund sichtbar */

.song-instruments__head {
  display: flex;
  align-items: center;
  gap: 0.35vw;
  min-width: 0;   /* sonst sprengt der Name das Raster, statt zu kürzen */
}

.song-instruments__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Aktivitätspunkt: leuchtet auf, sobald auf diesem Kanal Töne einsetzen
   (siehe flashChannelActivity in main.js). Aufblenden ohne Übergang – das
   Flackern soll auf den Punkt kommen –, Ausblenden weich. */
.song-instruments__dot {
  width: 0.5vw;
  height: 0.5vw;
  flex-shrink: 0;
  border-radius: 50%;
  background: #333a48;
  transition: background-color 0.22s ease, box-shadow 0.22s ease;
}

.song-instruments__dot.is-lit {
  background: #78aaff;
  box-shadow: 0 0 0.45vw var(--glow);
  transition: none;
}

.song-instruments__ctl {
  display: flex;
  align-items: center;
  gap: 0.4vw;
}

.song-instruments__val {
  width: 2.4vw;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.7vw;
  color: #aab2c5;
  font-variant-numeric: tabular-nums;   /* Zahlen springen nicht in der Breite */
}

/* Optik der Regler kommt von .slider input[type="range"] (siehe unten, gleiche
   Regeln); die dortige feste Breite wird direkt danach überschrieben, weil die
   Regler hier das Panel ausfüllen sollen. */

/* Slider: Label | Regler | Wert */
.slider {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  font-size: 0.72vw;
  color: #aab2c5;
}

.slider__label { width: 2.9vw; }

.slider__val {
  width: 3.4vw;
  text-align: right;
  white-space: nowrap;                  /* "18000 Hz" nicht umbrechen */
  color: #d5d9e2;
  font-variant-numeric: tabular-nums;   /* Zahlen springen nicht in der Breite */
}

/* Range-Input im dunklen, grauen Stil (kein Blau). Gilt auch für die
   Instrumenten-Regler im Song-Instrumente-Panel (siehe oben). */
.slider input[type="range"],
.song-instruments__row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 7vw;
  height: 0.9vw;
  background: transparent;
  cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-runnable-track,
.song-instruments__row input[type="range"]::-webkit-slider-runnable-track {
  height: 0.25vw;
  background: #3a3f4a;
  border-radius: 0.2vw;
}
.slider input[type="range"]::-moz-range-track,
.song-instruments__row input[type="range"]::-moz-range-track {
  height: 0.25vw;
  background: #3a3f4a;
  border-radius: 0.2vw;
}
.slider input[type="range"]::-webkit-slider-thumb,
.song-instruments__row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.8vw;
  height: 0.8vw;
  margin-top: -0.28vw;             /* Daumen auf der Schiene zentrieren */
  background: #c2c8d4;
  border-radius: 50%;
}
.slider input[type="range"]::-moz-range-thumb,
.song-instruments__row input[type="range"]::-moz-range-thumb {
  width: 0.8vw;
  height: 0.8vw;
  border: none;
  background: #c2c8d4;
  border-radius: 50%;
}

/* Muss NACH der 7vw-Breite oben stehen (gleiche Spezifität, letzte Regel
   gewinnt): im Song-Instrumente-Panel füllt der Regler die Zeile aus. */
.song-instruments__row input[type="range"] {
  width: auto;
  flex: 1;
  min-width: 0;
}

/* ---------- Akkord-Anzeige (unter dem Keyboard) ---------- */

.chord-display {
  min-height: 2.2vw;        /* Platz für den blauen Akkord neben SOUNDFOX */
  height: auto;             /* größer, wenn Song-Row sichtbar ist */
  /* Feste Breite (wie die Tastatur): .app zentriert seine Kinder, ohne
     definierte Breite würde die lange Akkordfolge des Songstreifens sonst die
     ganze Seite auseinanderziehen, statt abgeschnitten zu werden. */
  width: 90vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;         /* nichts kann sprengen */
  font-size: 2.0vw;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.07vw;
  color: #cef8e2;
}

/* Songzeile: Tonart-Label (fest, ganz links) + der waagerechte Streifen mit
   der Akkordfolge (scrollt daneben), an derselben Stelle wie die Anzeige der
   selbst gegriffenen Akkorde (siehe initChords in main.js). */
.chord-song-row {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.9vw;
}

/* Tonart des geladenen Songs. Blendet während der Wiedergabe aus (siehe
   setMidiState in main.js) – dann trägt die Akkordfolge selbst schon die
   Information, das Label wäre nur zusätzliche Ablenkung. Feste Mindestbreite,
   damit der Streifen daneben beim Songwechsel nicht je nach Tonart-Textlänge
   (z. B. "C" vs. "C#m") minimal hin- und herspringt. */
.chord-key {
  flex: 0 0 auto;
  min-width: 2.6vw;
  font-size: 1.15vw;
  line-height: 1;
  font-weight: 700;
  /* Dasselbe Blau wie sonst im Player (Start/Pause-Leuchten, Fortschritts-
     balken, Aktivitätspunkte, siehe --glow) – deckend statt transparent,
     damit es als fette Schrift kräftig genug steht. */
  color: #78aaff;
  opacity: 1;
  transition: opacity 0.4s ease;
}

.chord-key.is-faded { opacity: 0; }

/* Der aktuelle Akkord wird mittig gehalten, rechts davon stehen die
   kommenden, links die vergangenen. */
.chord-strip {
  position: relative;        /* Bezug für offsetLeft beim Mitscrollen */
  flex: 1 1 auto;
  min-width: 0;              /* als Flex-Kind sonst nicht unter die Inhaltsbreite schrumpfbar */
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.5vw;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;     /* die Position steuert die Wiedergabe, nicht die Maus */
  padding: 0 50%;            /* erster/letzter Akkord können bis in die Mitte rücken */
}

.chord-strip::-webkit-scrollbar { display: none; }

.chord-strip__item {
  flex: 0 0 auto;
  font-size: 1.15vw;
  line-height: 1;
  padding: 0.25vw 0.55vw;
  border-radius: 0.3vw;
  color: #79839a;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.chord-strip__item.is-past { color: #4d5566; }

.chord-strip__item.is-current {
  color: #0f1216;
  background: #cef8e2;
  transform: scale(1.25);
  font-weight: 500;
}

/* ---------- Tastatur ---------- */

.piano {
  /* Alle Tasten-Maße leiten sich von der weißen Tastenbreite ab. Diese ist so
     bemessen, dass die gesamte Tastatur genau 90vw (90 % der Fensterbreite)
     einnimmt. --white-count setzt main.js passend zur Tastenzahl. */
  --white-count: 36;                        /* Fallback, falls JS nicht läuft (C1..C6) */
  --wkw: calc(90vw / var(--white-count));   /* Breite weiße Taste */
  --wkh: calc(var(--wkw) * 4.6);            /* Höhe  weiße Taste */
  --bkw: calc(var(--wkw) * 0.62);           /* Breite schwarze Taste */
  --bkh: calc(var(--wkw) * 2.8);            /* Höhe  schwarze Taste */
  --pad: calc(var(--wkw) * 0.2);            /* oberer Innenrahmen */

  position: relative;
  display: flex;
  width: 90vw;
  padding: var(--pad) 0 0;
  /* Schmaler dunkelroter Streifen oben = Filzrand eines hochwertigen Pianos,
     darunter der dunkle Korpus. Streifen ist halb so hoch wie der Rahmen. */
  background: linear-gradient(#6f1420 calc(var(--pad) / 2), #0e0f13 calc(var(--pad) / 2));
  border-radius: 0.7vw;
  box-shadow: 0 1.2vw 2.8vw rgba(0, 0, 0, 0.5);
}

.key {
  touch-action: none;      /* verhindert Scrollen/Zoom beim Tippen */
  user-select: none;
  cursor: pointer;
  transition: box-shadow 0.08s ease, background 0.08s ease;
  /* Tonnamen-Label unten mittig ausrichten */
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.key--white {
  flex: 0 0 var(--wkw);
  width: var(--wkw);
  height: var(--wkh);
  background: linear-gradient(#ffffff, #f1f2f4);
  border: 1px solid #cfd2d8;
  border-radius: 0 0 0.4vw 0.4vw;
}

.key--black {
  position: absolute;
  top: var(--pad);         /* == oberer Innenrahmen der .piano */
  width: var(--bkw);
  height: var(--bkh);
  background: linear-gradient(#3a3d44, #16171b);
  border: 1px solid #000;
  border-radius: 0 0 0.35vw 0.35vw;
  box-shadow: 0 0.3vw 0.4vw rgba(0, 0, 0, 0.6);
  z-index: 2;
}

/* Dezentes Aufleuchten beim Drücken */
.key--white.is-active {
  background: linear-gradient(#eef4ff, #d8e6ff);
  box-shadow: 0 0 1vw 0.15vw var(--glow);
}

.key--black.is-active {
  background: linear-gradient(#4a5a7d, #223350);
  box-shadow: 0 0 1vw 0.15vw var(--glow);
}

/* ---------- Tonnamen auf den Tasten ---------- */

.key__label {
  display: none;            /* Standard: aus – per Checkbox einblendbar */
  pointer-events: none;
  text-align: center;
  line-height: 1.15;
  font-size: calc(var(--wkw) * 0.3);   /* skaliert mit der Tastenbreite */
}

.key--white .key__label {
  color: #9a9aa2;           /* dezentes Grau auf Weiß */
  padding-bottom: calc(var(--wkw) * 0.26);
}

.key--black .key__label {
  color: #c2c8d4;           /* helleres Grau auf Schwarz */
  font-size: calc(var(--wkw) * 0.26);
  padding-bottom: calc(var(--wkw) * 0.16);
}

.key--black .key__label span {
  display: block;           /* ♯ und ♭ untereinander */
}

/* Eingeblendet, solange die Checkbox aktiv ist */
.piano.is-labeled .key__label {
  display: block;
}

#fmlogo {
  position: fixed;
  bottom: 1.5vw;
  right: 1.5vw;
  width: 5vw;
  height: auto;
  opacity: 1.0;
  transition: opacity 0.2s ease;
}