/* Zingerle Audio — Modular web instrument. Uses the ZA design tokens,
   so Sunlight Mode works without extra rules where possible. */

/* Auf grossen Bildschirmen darf das Rack die ganze Breite nehmen
   (Toms Wunsch 25.08.2026) - sonst steht rechts nur Leere. */
@media (min-width: 1280px) {
  .za-page-modular .zam-stage { max-width: min(2400px, calc(100vw - 48px)); }
}
.zam-stage {
  max-width: var(--za-max-w, 1180px);
  margin: 0 auto;
  padding: var(--za-sp-6, 32px) var(--za-sp-4, 16px) var(--za-sp-7, 48px);
  position: relative;
}

.zam-intro { max-width: 720px; margin: 0 auto var(--za-sp-5, 24px); text-align: center; }
.zam-intro h1 {
  font-family: var(--za-font-display);
  font-size: var(--za-fs-2xl);
  letter-spacing: var(--za-track-h1);
  color: var(--za-text);
  margin: 0 0 var(--za-sp-2, 8px);
}
.zam-intro p { color: var(--za-text-muted); font-size: var(--za-fs-sm); line-height: 1.6; margin: 0; }

.zam-credit {
  max-width: 720px;
  margin: var(--za-sp-5, 24px) auto 0;
  text-align: center;
  font-size: var(--za-fs-xs);
  color: var(--za-text-faint);
  line-height: 1.6;
}
.zam-credit a { color: var(--za-accent-text); text-decoration: none; }
.zam-credit a:hover { text-decoration: underline; }

/* ---- rack ---- */

#za-rack {
  position: relative;
  --zam-cable-channel: 30px;
}

/* ---- Zingerle-Gehaeuse (Fotos, 25.08.2026) -------------------------
   Nussbaumwangen links und rechts, oben das Bedienband (darin sitzt die
   PATCH-Leiste), unten das Abschlussband, an den Ecken Messingwinkel.
   Das Rack selbst hat darin keinen eigenen Rahmen mehr. */
.zam-case {
  position: relative;
  padding: 0 26px;
  background:
    url("kabel/gh-wange-links.png") no-repeat left top / 26px 100%,
    url("kabel/gh-wange-rechts.png") no-repeat right top / 26px 100%,
    #0b0907;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}
.zam-case-foot {
  height: 34px;
  background: url("kabel/gh-band-unten.png") repeat-x center center;
  background-size: auto 100%;
}
/* Die Messingecken sind genau so breit wie die Wange (26 px), damit sie
   nicht auf das Bedienband ragen - Toms Befund "das Menue sitzt nicht
   richtig drauf" kam genau daher. */
.zam-case-ecke {
  position: absolute; z-index: 3;
  width: 26px; height: 29px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.zam-case-ecke-lo { left: 0; top: 0; background-image: url("kabel/gh-ecke-lo.png"); }
.zam-case-ecke-ro { right: 0; top: 0; background-image: url("kabel/gh-ecke-ro.png"); }
.zam-case-ecke-lu { left: 0; bottom: 0; background-image: url("kabel/gh-ecke-lu.png"); }
.zam-case-ecke-ru { right: 0; bottom: 0; background-image: url("kabel/gh-ecke-ru.png"); }

.zam-rack {
  border: 0;
  border-radius: 0;
  background: var(--za-surface-1);
  overflow: hidden;
  scrollbar-width: thin;
  scrollbar-color: #3a3128 #0b0907;
}
/* Die helle Standard-Bildlaufleiste passte nicht ins Holzgehaeuse. */
.zam-rack::-webkit-scrollbar { height: 8px; }
.zam-rack::-webkit-scrollbar-track { background: #0b0907; }
.zam-rack::-webkit-scrollbar-thumb { background: #3a3128; border-radius: 4px; }
.zam-rack::-webkit-scrollbar-thumb:hover { background: #59493a; }

/* Der Rackboden waechst mit jeder automatisch erzeugten Modulreihe. Die
   30-px-Kanaele entsprechen im 15-px-HP-Raster genau 2 HP. Seiten- und
   Querkanal sind echte, messbare Elemente: die Kabelgeometrie benutzt ihre
   wirklichen Mittellinien auch bei horizontalem Scrollen. */
.zam-rack-bed {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
  padding-inline: var(--zam-cable-channel);
  background: #080706;
}
.zam-cable-channel {
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent 22%, rgba(0,0,0,0.44) 78%, rgba(255,255,255,0.025)),
    repeating-linear-gradient(90deg, #151310 0 9px, #0c0a08 9px 10px);
  box-shadow:
    inset 0 4px 7px rgba(0,0,0,0.78),
    inset 0 -3px 5px rgba(0,0,0,0.72),
    inset 0 0 0 1px rgba(176,151,114,0.13);
}
.zam-cable-channel-row {
  position: relative;
  z-index: 0;
  height: var(--zam-cable-channel);
  min-height: var(--zam-cable-channel);
  width: calc(100% + var(--zam-cable-channel) + var(--zam-cable-channel));
  margin-inline: calc(0px - var(--zam-cable-channel));
  border-block: 1px solid rgba(0,0,0,0.86);
}
.zam-cable-channel-side {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: var(--zam-cable-channel);
  background:
    linear-gradient(90deg, rgba(255,255,255,0.04), transparent 24%, rgba(0,0,0,0.48) 76%, rgba(255,255,255,0.025)),
    repeating-linear-gradient(180deg, #151310 0 9px, #0c0a08 9px 10px);
  box-shadow:
    inset 4px 0 7px rgba(0,0,0,0.78),
    inset -3px 0 5px rgba(0,0,0,0.72),
    inset 0 0 0 1px rgba(176,151,114,0.13);
}
.zam-cable-channel-left { left: 0; }
.zam-cable-channel-right { right: 0; }

/* Montageschiene und Busplatine sind Fotos (Higgsfield, 25.08.2026),
   waagrecht nahtlos gekachelt. Die frueher gezeichneten Schrauben sind
   raus - sie stecken jetzt im Bild. */
.zam-rail {
  height: 22px;
  background: url("kabel/rack-schiene.png") repeat-x center center;
  background-size: auto 100%;
  border-bottom: 1px solid rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
}
.zam-rail-bottom { border-bottom: 0; border-top: 1px solid rgba(0,0,0,0.6); }
.zam-screw { display: none; }

/* Jede Etage traegt ihre eigenen Schraubschienen - oben und unten, und
   zwar HINTER den Modulen, genau auf Hoehe der Modulschrauben (wie im
   echten Rack, Ansage Tom 25.08.2026). Dazwischen die Busplatine.
   Die Module decken das ab; sichtbar bleibt es in den freien Feldern. */
.zam-panels {
  position: relative;
  z-index: 1;
  display: flex; align-items: stretch;
  background:
    url("kabel/rack-schiene.png") repeat-x left top,
    url("kabel/rack-schiene.png") repeat-x left bottom,
    url("kabel/rack-anschluss.png") repeat-x center center,
    var(--za-surface-1);
  /* Ein einzelner Anschluss als Kachel, 60 px breit = genau 4 HP im
     Modulraster (Toms Ansage: ein Element kacheln, kein Breitbild).
     Das Bild selbst ist zusaetzlich auf die Haelfte abgedunkelt - es ist
     ein unbeleuchteter Innenraum, kein Schaukasten. */
  background-size: auto 22px, auto 22px, auto 100%, auto;
}

.zam-module {
  padding: var(--za-sp-4, 16px) var(--za-sp-4, 16px) var(--za-sp-5, 24px);
  border-right: 1px solid var(--za-line);
  display: flex; flex-direction: column; gap: var(--za-sp-4, 16px);
}
.zam-module:last-child { border-right: 0; }
.zam-module-voice { flex: 1 1 auto; }
.zam-module-fx { width: 168px; flex: 0 0 auto; align-items: center; }

.zam-mod-head { display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; width: 100%; }
.zam-mod-name {
  font-family: var(--za-font-display);
  font-weight: 600;
  font-size: var(--za-fs-sm);
  letter-spacing: var(--za-track-label);
  color: var(--za-accent);
}
.zam-mod-sub {
  font-family: var(--za-font-mono);
  font-size: 7.5px;
  letter-spacing: 0.1em;
  color: var(--za-text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.zam-module-fx .zam-mod-head { align-items: center; text-align: center; }

/* display + stepper */
.zam-display-row { display: flex; gap: 4px; align-items: stretch; width: 100%; max-width: 240px; }
.zam-display {
  flex: 1;
  display: flex; align-items: center; gap: 6px;
  background: var(--za-bg);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  padding: 4px 7px;
  font-family: var(--za-font-mono);
  min-height: 34px;
  min-width: 0;
  overflow: hidden;
}
.zam-disp-num { color: var(--za-text-faint); font-size: 9px; }
.zam-disp-name { color: var(--za-accent-bright); font-size: 10px; letter-spacing: 0.05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zam-display[data-group="perc"] .zam-disp-name { color: var(--za-warn); }
.zam-display[data-group="noise"] .zam-disp-name { color: var(--za-info); }
.zam-display[data-group="synth"] .zam-disp-name { color: var(--za-ok); }
.zam-step {
  width: 26px; min-height: 34px; flex: 0 0 auto;
  background: var(--za-surface-2);
  color: var(--za-text-muted);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--za-dur-fast) var(--za-ease);
}
.zam-step:hover { color: var(--za-accent); border-color: var(--za-accent-soft); }

/* knobs */
.zam-knob-row { display: flex; gap: 8px 10px; justify-content: center; flex-wrap: wrap; }
.zam-knob-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--za-sp-4, 16px); justify-items: center; }
.zam-knob-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.zam-knob {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--za-surface-3), var(--za-surface-2) 70%);
  border: 2px solid var(--za-line-strong);
  position: relative;
  cursor: ns-resize;
  touch-action: none;
  transition: border-color var(--za-dur-fast) var(--za-ease), box-shadow var(--za-dur-fast) var(--za-ease);
}
.zam-knob:hover, .zam-knob:focus-visible {
  border-color: var(--za-accent-soft);
  box-shadow: 0 0 0 4px var(--za-accent-glow);
  outline: none;
}
.zam-knob::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  background: var(--za-surface-1);
  border: 1px solid var(--za-line);
}
.zam-knob-dot {
  position: absolute; inset: 0;
  transform: rotate(var(--rot, 0deg));
}
.zam-knob-dot::after {
  content: ""; position: absolute;
  left: 50%; top: 5px;
  width: 3px; height: 10px; margin-left: -1.5px;
  border-radius: 2px;
  background: var(--za-accent);
}
.zam-knob-big .zam-knob { width: 52px; height: 52px; }
.zam-knob-big .zam-knob::before { inset: 7px; }
.zam-knob-big .zam-knob-dot::after { top: 6px; height: 13px; }

.zam-knob-label {
  font-family: var(--za-font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  color: var(--za-text-faint);
}

/* switch */
.zam-switch-row { display: flex; flex-direction: column; align-items: center; gap: 3px; justify-content: center; }
.zam-switch-label { font-family: var(--za-font-mono); font-size: 8px; letter-spacing: 0.14em; color: var(--za-text-faint); }
.zam-switch {
  display: inline-flex;
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  overflow: hidden;
  cursor: pointer;
}
.zam-sw-opt {
  padding: 5px 7px;
  font-family: var(--za-font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--za-text-faint);
  background: var(--za-surface-2);
}
.zam-sw-opt.on { background: var(--za-accent); color: var(--za-accent-ink); }

/* meter + LED */
.zam-meter {
  width: 10px; flex: 1 1 60px; min-height: 60px;
  background: var(--za-bg);
  border: 1px solid var(--za-line);
  border-radius: 3px;
  position: relative; overflow: hidden;
}
.zam-meter i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(to top, var(--za-ok), var(--za-accent), var(--za-danger));
  transition: height 60ms linear;
}
.zam-led-row { display: flex; align-items: center; gap: 8px; }
.zam-led {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--za-accent);
  box-shadow: 0 0 8px var(--za-accent-glow);
  opacity: 0.25;
}
.zam-led-label { font-family: var(--za-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--za-text-faint); }

/* ---- keyboard ---- */

.zam-kbd-wrap { margin-top: var(--za-sp-5, 24px); }
.zam-kbd-bar {
  display: flex; align-items: center; gap: var(--za-sp-3, 12px);
  margin-bottom: var(--za-sp-3, 12px);
  flex-wrap: wrap;
}
.zam-oct {
  min-height: 40px; padding: 0 14px;
  background: var(--za-surface-2);
  color: var(--za-text-muted);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  font-family: var(--za-font-mono);
  font-size: 11px; letter-spacing: 0.1em;
  cursor: pointer;
}
.zam-oct:hover { color: var(--za-accent); border-color: var(--za-accent-soft); }
.zam-oct-disp, .zam-midi {
  font-family: var(--za-font-mono);
  font-size: 11px;
  color: var(--za-text-faint);
  letter-spacing: 0.08em;
}
.zam-midi { margin-left: auto; }

.zam-piano {
  display: flex;
  height: 148px;
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  overflow: hidden;
  background: var(--za-surface-1);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.zam-key-white {
  flex: 1;
  position: relative;
  background: #f3ead6;
  border-right: 1px solid rgba(0,0,0,0.35);
  border-radius: 0 0 3px 3px;
  cursor: pointer;
}
html[data-theme="sunlight"] .zam-key-white { background: #ffffff; }
.zam-key-white.down { background: var(--za-accent-bright); }
.zam-key-black {
  position: absolute;
  right: -19%; top: 0; width: 38%; height: 60%;
  background: #14110c;
  border: 1px solid rgba(0,0,0,0.6);
  border-radius: 0 0 3px 3px;
  z-index: 2;
  cursor: pointer;
}
html[data-theme="sunlight"] .zam-key-black { background: #2a2a2a; }
.zam-key-black.down { background: var(--za-accent); }
.zam-key-label {
  position: absolute; bottom: 6px; left: 0; right: 0;
  text-align: center;
  font-family: var(--za-font-mono);
  font-size: 9px;
  color: rgba(0,0,0,0.45);
  pointer-events: none;
}
.zam-hint {
  margin: var(--za-sp-3, 12px) 0 0;
  font-size: var(--za-fs-xs);
  color: var(--za-text-faint);
  line-height: 1.6;
}

/* ---- start overlay ---- */

.zam-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--za-sp-4, 16px);
  background: color-mix(in srgb, var(--za-bg) 72%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 5;
  border-radius: var(--za-radius-lg, 6px);
  opacity: 1;
  transition: opacity 320ms var(--za-ease);
}
.zam-overlay-hidden { opacity: 0; pointer-events: none; }
.zam-start-prompt {
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  margin: 0; padding: 10px 16px;
  color: var(--za-text-muted);
  background: rgba(8,7,6,.82);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  font-family: var(--za-font-mono);
  font-size: var(--za-fs-xs);
  letter-spacing: .05em;
  text-align: center;
}
.zam-start-prompt strong { color: var(--za-accent-bright); letter-spacing: .16em; }
.zam-start-error {
  color: var(--za-danger);
  font-size: var(--za-fs-sm);
  max-width: 480px;
  text-align: center;
  background: var(--za-surface-1);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  padding: 10px 16px;
}

/* ---- brushed metal front panel ----------------------------------------
   Procedurally generated (SVG feTurbulence stretched horizontally = the
   brushing direction), no external texture, no license question, and it
   re-tints itself for Sunlight Mode: dark warm-anodized aluminium in the
   dark theme, light brushed aluminium in sunlight. The streak layer is a
   tiny inline SVG (alpha-only noise) over a token-based base colour. */

.zam-module {
  position: relative;
  background:
    /* top light falloff + lower shading, like light from above */
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.075),
      rgba(255, 255, 255, 0.02) 22%,
      rgba(0, 0, 0, 0.04) 68%,
      rgba(0, 0, 0, 0.14)),
    /* horizontal brushing: light streaks */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1400'%20height='420'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004%200.55'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%201%200%200%200%200%201%200%200%200%200%201%200.55%200%200%200%20-0.17'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='420'%20filter='url(%23f)'/%3E%3C/svg%3E"),
    /* base metal tone from the ZA tokens, faint horizontal sheen */
    linear-gradient(90deg,
      color-mix(in srgb, var(--za-surface-2) 86%, #8f8474 14%),
      color-mix(in srgb, var(--za-surface-3) 84%, #8f8474 16%) 52%,
      color-mix(in srgb, var(--za-surface-2) 88%, #8f8474 12%));
  /* bevelled panel edge */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    inset 1px 0 0 rgba(255, 255, 255, 0.045),
    inset -1px 0 0 rgba(0, 0, 0, 0.30);
}

html[data-theme="sunlight"] .zam-module {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.65),
      rgba(255, 255, 255, 0.18) 24%,
      rgba(0, 0, 0, 0.02) 70%,
      rgba(0, 0, 0, 0.08)),
    /* dark streaks read better on light metal */
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1400'%20height='420'%3E%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004%200.55'%20numOctaves='4'%20seed='11'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200%200%200%200%200%200%200%200%200%200%200%200.4%200%200%200%20-0.13'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='420'%20filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, #dce0e4, #edf0f2 52%, #dadee2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(0, 0, 0, 0.12);
}

/* rack rails as extruded aluminium */
/* Der gezeichnete Verlauf ist raus - die Schiene ist jetzt ein Foto
   (siehe oben bei .zam-rail). */
.zam-rail {
  background: url("kabel/rack-schiene.png") repeat-x center center;
  background-size: auto 100%;
}

/* Die Schienenschrauben stecken im Foto - nur die Eckschrauben der
   Module bleiben als Element. */
.zam-screw { display: none !important; }
.zam-mscrew {
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%,
    color-mix(in srgb, var(--za-surface-3) 45%, #9aa0a6 55%),
    color-mix(in srgb, var(--za-surface-2) 70%, #565b60 30%) 62%,
    color-mix(in srgb, var(--za-bg) 72%, #303336 28%));
  border: 0;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.28),
    inset 0 -1px 1px rgba(0, 0, 0, 0.55),
    0 0 0 2px rgba(0, 0, 0, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  pointer-events: none;
}
.zam-screw::after,
.zam-mscrew::after {
  content: ""; position: absolute; left: 1px; right: 1px; top: 50%;
  height: 1.5px; margin-top: -0.75px; border-radius: 1px;
  background: rgba(0, 0, 0, 0.55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
  transform: rotate(38deg);
}
.zam-mscrew { position: absolute; z-index: 1; }
/* Die Modulschrauben gehoeren auf die Schienen, nicht daneben
   (Ansage Tom, 25.08.2026). Die Schiene ist 22 px hoch und liegt
   ausserhalb des Moduls, darum negative Werte. */
.zam-mscrew-tl { top: 6px; left: 8px; }
.zam-mscrew-tr { top: 6px; right: 8px; }
.zam-mscrew-bl { bottom: 6px; left: 8px; }
.zam-mscrew-br { bottom: 6px; right: 8px; }
/* Die Modulschrauben sind seit 25.08.2026 die Messingschraube aus dem
   Schienenfoto (aus dem Higgsfield-Bild ausgeschnitten). Der gezeichnete
   Kreis und der Schlitzstrich sind damit hinfaellig. */
.zam-mscrew {
  background: url("kabel/schraube-messing.png") center / contain no-repeat !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.6));
}
.zam-mscrew::after { display: none !important; }
/* Leicht verschiedene Drehwinkel, wie von Hand eingedreht. */
.zam-mscrew-tl { transform: rotate(-24deg); }
.zam-mscrew-tr { transform: rotate(12deg); }
.zam-mscrew-bl { transform: rotate(63deg); }
.zam-mscrew-br { transform: rotate(-51deg); }

html[data-theme="sunlight"] .zam-screw {
  background: radial-gradient(circle at 35% 28%, #fdfdfd, #c9ced3 62%, #9aa0a6);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 0 -1px 1px rgba(0, 0, 0, 0.30),
    0 0 0 2px rgba(0, 0, 0, 0.14),
    0 1px 0 rgba(255, 255, 255, 0.7);
}
html[data-theme="sunlight"] .zam-screw::after,
html[data-theme="sunlight"] .zam-mscrew::after {
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* labels engraved into the plate instead of printed on it */
.zam-mod-sub,
.zam-knob-label,
.zam-switch-label,
.zam-led-label {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07),
    0 -1px 0 rgba(0, 0, 0, 0.5);
}
.zam-mod-name {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 -1px 1px rgba(0, 0, 0, 0.55);
}
html[data-theme="sunlight"] .zam-mod-sub,
html[data-theme="sunlight"] .zam-knob-label,
html[data-theme="sunlight"] .zam-switch-label,
html[data-theme="sunlight"] .zam-led-label,
html[data-theme="sunlight"] .zam-mod-name {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85),
    0 -1px 0 rgba(0, 0, 0, 0.18);
}

/* ---- responsive ---- */

@media (max-width: 880px) {
  .zam-piano { height: 120px; }
  .zam-key-label { display: none; }
  .zam-hint { display: none; }
  .zam-midi { margin-left: 0; }
}

/* =======================================================================
   Stage: full modular system — preset bar, patch matrix, module slots.
   ======================================================================= */

/* ---- Eurorack HP sizing: 1 HP = var(--zam-hp). Modules carry their real
   hardware width (--hp); every row uses the visible rack width and overflow
   starts the next row. The rack begins with at least two rows. */
#za-rack { --zam-hp: 15px; }
.zam-rack { overflow-x: auto; }
.zam-panels {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-width: max-content;
  min-height: var(--zam-3he, 380px);
}
.zam-module {
  flex: 0 0 auto;
  width: calc(var(--hp, 10) * var(--zam-hp));
  min-width: 0;
  padding: 30px 6px 26px;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--za-line);
}
.zam-module-voice, .zam-module-fx, .zam-module-lfo, .zam-module-keys, .zam-module-out { width: calc(var(--hp, 10) * var(--zam-hp)); flex: 0 0 auto; align-items: center; }
.zam-keys-note {
  margin: 0; max-width: 170px;
  font-size: var(--za-fs-xs); color: var(--za-text-faint); line-height: 1.5;
  text-align: center;
}

/* move/remove tools, tucked under the top rail */
.zam-mod-head { position: relative; }
.zam-mod-tools {
  position: absolute; top: -26px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 4px;
  opacity: 0.45;
  transition: opacity var(--za-dur-fast) var(--za-ease);
}
.zam-module:hover .zam-mod-tools, .zam-module:focus-within .zam-mod-tools { opacity: 1; }
.zam-mod-move, .zam-mod-remove {
  width: 20px; height: 20px; line-height: 16px;
  background: var(--za-surface-2);
  color: var(--za-text-faint);
  border: 1px solid var(--za-line-strong);
  border-radius: 50%;
  font-size: 9px;
  padding: 0;
  cursor: pointer;
  transition: all var(--za-dur-fast) var(--za-ease);
}
.zam-mod-remove { font-size: 12px; }
.zam-mod-move:hover { color: var(--za-accent); border-color: var(--za-accent-soft); }
.zam-mod-remove:hover { color: var(--za-danger); border-color: var(--za-danger); }

/* "+ MODUL" slot: an empty rack space */
.zam-module-add {
  width: calc(var(--hp, 6) * var(--zam-hp));
  justify-content: center;
  flex: 0 0 auto;
  align-items: center; justify-content: center;
  background: var(--za-bg) !important;
  box-shadow: inset 0 0 0 1px var(--za-line), inset 0 6px 18px rgba(0,0,0,0.35) !important;
}
html[data-theme="sunlight"] .zam-module-add {
  box-shadow: inset 0 0 0 1px var(--za-line), inset 0 6px 18px rgba(0,0,0,0.10) !important;
}
.zam-add-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--za-surface-2);
  color: var(--za-accent);
  border: 1px dashed var(--za-line-strong);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  transition: all var(--za-dur-fast) var(--za-ease);
}
.zam-add-btn:hover { border-color: var(--za-accent); box-shadow: 0 0 0 4px var(--za-accent-glow); }
.zam-add-label { font-family: var(--za-font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--za-text-faint); }
.zam-add-chooser { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.zam-add-opt {
  padding: 8px 10px;
  background: var(--za-surface-2);
  color: var(--za-text-muted);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  font-family: var(--za-font-mono);
  font-size: 10px; letter-spacing: 0.06em;
  cursor: pointer;
  text-align: left;
}
.zam-add-opt:hover { color: var(--za-accent); border-color: var(--za-accent-soft); }

/* ---- preset bar ---- */
/* Sitzt seit 25.08.2026 im oberen Band des Gehaeuses. */
.zam-presetbar {
  display: flex; align-items: center; gap: var(--za-sp-2, 8px);
  justify-content: center;
  margin-bottom: 0;
  flex-wrap: wrap;
  min-height: 65px;
  padding: var(--zam-band-pad-top, 17px) 18px var(--zam-band-pad-bottom, 14px);
  background: url("kabel/gh-band-oben.png") repeat-x center center;
  background-size: auto 100%;
}
.zam-presetbar .zam-cpu { margin-left: 0; margin-right: 0; }
.zam-presetbar.zam-preset-wrapped { justify-content: center; }
.zam-presetbar.zam-preset-wrapped .zam-cpu { margin-left: 0; margin-right: 0; }
/* Auf dem silbernen Band muss die Beschriftung dunkel sein. */
.zam-preset-label {
  font-family: var(--za-font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: #2a241d;
}

/* PATCH-Leiste: Display, Menue, Verlauf und Loeschaktionen stehen jeweils in
   eigenen Modulrahmen; der Kabelschalter bleibt ebenfalls separat. */
.zam-preset-row { width: auto; max-width: 300px; min-width: 220px; gap: 3px; }
/* Innen 26 px, damit alles in den 34-px-Rahmen passt.
   Das Display bekommt hier KEINEN eigenen Rahmen: sonst steht ein Rahmen
   im Rahmen und sitzt schief (Toms Befund). za-rack-vcv.css setzt seine
   Werte mit !important, darum hier ebenfalls. */
#za-rack .zam-preset-row { align-items: center; }
#za-rack .zam-preset-row .zam-step {
  min-height: 26px !important; height: 26px !important;
  width: 24px; flex: 0 0 auto;
}
#za-rack .zam-preset-row .zam-display {
  min-height: 26px !important; height: 26px !important;
  border: 0 !important;
  border-radius: 2px !important;
  background: #000 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.9) !important;
  padding: 0 8px !important;
}
/* Das Rack-Presetdisplay verwendet seine beiden vorhandenen Textfelder jetzt
   als echte Menuezeilen. Farben, Schrift und Displayrahmen bleiben dieselben. */
#za-rack .zam-preset-row .zam-preset-display {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  min-width: 121px;
  row-gap: 0;
  text-align: left;
}
#za-rack .zam-preset-display .zam-preset-line {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#za-rack .zam-preset-display .zam-preset-line-top,
#za-rack .zam-preset-display .zam-preset-line-bottom { line-height: 12px; }
/* Rahmen wie das Menue in der Kopfzeile - fuer Display, Knopfgruppen und
   die CPU-Anzeige. Das 34-px-Aussenmass plus Ring wird durch die oben
   berechnete Bandpolsterung vollstaendig zwischen den beiden Rillen gehalten. */
.zam-preset-row,
.zam-preset-urwrap,
.zam-preset-cab,
.zam-presetbar .zam-cpu {
  box-sizing: border-box;
  height: 34px;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(180deg,
      #050505 0%, #5c5c5c 6%, #2a2a2a 16%,
      #101010 40%, #080808 66%, #3f3f3f 90%, #060606 100%) border-box;
  box-shadow:
    0 0 0 2px #14110e,
    inset 0 2px 5px rgba(0,0,0,.95),
    inset 0 0 0 1px rgba(0,0,0,.9);
}
/* za-rack-vcv.css setzt #za-rack .zam-display-row auf 38 px - das gilt
   fuer die Module, nicht fuer die Leiste. Hier gleich hoch wie der Rest. */
#za-rack .zam-display-row.zam-preset-row { height: 34px; }
.zam-preset-urwrap { display: flex; gap: 4px; flex: 0 0 auto; }
.zam-preset-ur { min-height: 26px; height: 26px; padding: 0 10px; font-size: 9px; letter-spacing: 0.06em; }
/* Verfuegbarkeit zeigt allein die vorhandene Tasterbeleuchtung: dunkel ist
   nicht verfuegbar, .on ist verfuegbar. Die Bediensemantik bleibt disabled. */
#za-rack .zam-preset-ur:disabled { opacity: 1; cursor: default; }
.zam-preset-cab { padding: 0 14px; font-size: 9px; letter-spacing: 0.08em; flex: 0 0 auto; }
.zam-preset-cab.on {
  color: #ffcf7a;
  text-shadow: 0 0 5px rgba(255,170,60,.95), 0 0 12px rgba(255,140,30,.55);
  box-shadow:
    0 0 0 2px #14110e,
    inset 0 2px 5px rgba(0,0,0,.95),
    inset 0 0 10px rgba(240,198,116,0.22);
}
/* CPU ist jetzt ein Display, kein Text auf dem Blech. */
.zam-presetbar .zam-cpu {
  margin-left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 9px;
  font-family: var(--za-font-mono);
  font-size: 9px; letter-spacing: 0.12em;
  color: var(--za-text-faint);
  white-space: nowrap;
}
.zam-presetbar .zam-cpu i {
  display: block; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--za-ok, #6ec07a), var(--za-accent, #c8a662));
  min-width: 2px;
}
.zam-presetbar .zam-cpu b { color: var(--za-accent-bright, #ffcf7a); font-weight: 400; }
.zam-presetbar .zam-cpu.zam-cpu-warn b { color: var(--za-warn, #e0a33a); }
@media (max-width: 640px) {
  .zam-preset-row { min-width: 0; flex: 1 1 160px; }
  .zam-presetbar .zam-cpu { margin-left: 0; }
}
.zam-preset-select {
  min-height: 36px; padding: 0 10px;
  background: var(--za-surface-2);
  color: var(--za-text);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  font-family: var(--za-font-mono);
  font-size: 11px;
  max-width: 260px;
}
.zam-preset-btn {
  min-height: 36px; padding: 0 12px;
  background: var(--za-surface-2);
  color: var(--za-text-muted);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  font-family: var(--za-font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  cursor: pointer;
}
.zam-preset-btn:hover { color: var(--za-accent); border-color: var(--za-accent-soft); }

/* ---- patch matrix ---- */
.zam-matrix-wrap {
  margin-top: var(--za-sp-4, 16px);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius-lg, 6px);
  background: var(--za-surface-1);
  overflow: hidden;
}
.zam-matrix-head {
  display: flex; align-items: baseline; gap: var(--za-sp-3, 12px); flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--za-line);
  background: var(--za-surface-2);
}
.zam-matrix-title {
  font-family: var(--za-font-display);
  font-weight: 600; font-size: var(--za-fs-sm);
  letter-spacing: var(--za-track-label);
  color: var(--za-accent);
}
.zam-matrix-legend { font-family: var(--za-font-mono); font-size: 10px; color: var(--za-text-faint); letter-spacing: 0.05em; }
.zam-lg { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: baseline; }
.zam-lg-audio { background: var(--za-accent); }
.zam-lg-cv { background: var(--za-info); }

.zam-matrix-scroll { overflow-x: auto; padding: 6px 10px 12px; }
.zam-matrix { border-collapse: collapse; margin: 0 auto; }
.zam-matrix th, .zam-matrix td { padding: 2px; }
.zam-mx-corner {
  font-family: var(--za-font-mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--za-text-faint); text-align: right; padding-right: 8px; white-space: nowrap;
}
.zam-mx-col { vertical-align: bottom; }
.zam-mx-collabel {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--za-font-mono); font-size: 9px; letter-spacing: 0.06em;
  color: var(--za-text-faint);
  line-height: 1.35;
  max-height: 110px;
  white-space: nowrap;
}
.zam-mx-collabel b, .zam-mx-row b { color: var(--za-text-muted); font-weight: 600; }
.zam-mx-row {
  font-family: var(--za-font-mono); font-size: 9px; letter-spacing: 0.06em;
  color: var(--za-text-faint); text-align: right; padding-right: 8px; white-space: nowrap;
}
.zam-mx-cell {
  width: 26px; height: 26px;
  border-radius: 5px;
  border: 1px solid var(--za-line);
  background: var(--za-bg);
  cursor: pointer;
  position: relative;
  padding: 0;
  touch-action: none;
  transition: border-color var(--za-dur-fast) var(--za-ease);
}
.zam-mx-cell:hover, .zam-mx-cell:focus-visible { border-color: var(--za-accent-soft); outline: none; }
.zam-mx-cell.zam-mx-self { background: var(--za-surface-1); }
.zam-mx-cell::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  transform: scale(0);
  transition: transform var(--za-dur-fast) var(--za-ease);
}
.zam-mx-cell.zam-mx-audio::after { background: var(--za-accent); box-shadow: 0 0 8px var(--za-accent-glow); }
.zam-mx-cell.zam-mx-cv::after { background: var(--za-info); box-shadow: 0 0 8px color-mix(in srgb, var(--za-info) 45%, transparent); }
.zam-mx-cell.on { border-color: var(--za-line-strong); }
.zam-mx-cell.on::after { transform: scale(var(--g, 1)); }

@media (max-width: 880px) {
  .zam-mx-cell { width: 26px; height: 26px; }
}


/* =======================================================================
   Stage 2: HP rack rows, module chooser, matrix tabs, CPU badge.
   ======================================================================= */

/* keys note fits narrow panels */
.zam-keys-note {
  margin: 0; max-width: 100%;
  font-size: 8px; color: var(--za-text-faint); line-height: 1.45;
  text-align: center;
}
.zam-origin {
  margin-top: auto;
  font-family: var(--za-font-mono);
  font-size: 6.5px; letter-spacing: 0.08em;
  color: var(--za-text-faint);
  opacity: 0.75;
  text-align: center;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 6-HP modules: compact head, but the full designation stays visible */
.zam-narrow .zam-mod-sub { display: block; }
.zam-narrow .zam-mod-name { font-size: 11px; letter-spacing: 0.12em; }
.zam-narrow { padding-left: 3px; padding-right: 3px; }
.zam-narrow .zam-mscrew-tl, .zam-narrow .zam-mscrew-bl { left: 3px; }
.zam-narrow .zam-mscrew-tr, .zam-narrow .zam-mscrew-br { right: 3px; }

/* collapsible rarely-used knobs */
.zam-more { width: 100%; text-align: center; }
.zam-more summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--za-font-mono);
  font-size: 8px; letter-spacing: 0.2em;
  color: var(--za-text-faint);
  padding: 3px 0;
  border-top: 1px dashed var(--za-line);
}
.zam-more summary::-webkit-details-marker { display: none; }
.zam-more summary::after { content: " ▾"; }
.zam-more[open] summary::after { content: " ▴"; }
.zam-more:hover summary { color: var(--za-accent); }
.zam-more > .zam-knob-row { margin-top: 8px; }

/* LADDER (frueher STUFEN) segment grid */
.zam-seg-grid { display: flex; gap: 4px; justify-content: center; width: 100%; }
.zam-seg-col {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 4px 1px;
  border-radius: 4px;
  transition: opacity var(--za-dur-fast) var(--za-ease);
}
.zam-seg-col.zam-seg-off { opacity: 0.22; pointer-events: none; }
.zam-seg-type {
  min-width: 26px; padding: 3px 2px;
  background: var(--za-surface-2);
  color: var(--za-text-muted);
  border: 1px solid var(--za-line-strong);
  border-radius: 3px;
  font-family: var(--za-font-mono);
  font-size: 7px; letter-spacing: 0.08em;
  cursor: pointer;
}
.zam-seg-type:hover { color: var(--za-accent); border-color: var(--za-accent-soft); }
.zam-seg-col .zam-knob { width: 26px; height: 26px; }
.zam-seg-col .zam-knob::before { inset: 4px; }
.zam-seg-col .zam-knob-dot::after { top: 3px; height: 7px; width: 2px; margin-left: -1px; }
.zam-seg-col .zam-knob-label { font-size: 7px; }

/* module chooser overlay */
.zam-chooser {
  position: absolute; inset: 8% 10%;
  overflow-y: auto;
  z-index: 6;
  background: color-mix(in srgb, var(--za-bg) 94%, transparent);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius-lg, 6px);
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.zam-rack { position: relative; }
.zam-chooser-group {
  font-family: var(--za-font-mono);
  font-size: 9px; letter-spacing: 0.2em;
  color: var(--za-accent);
  margin-top: 8px;
}
.zam-chooser .zam-add-opt { display: flex; gap: 8px; align-items: baseline; font-size: 10px; }
.zam-chooser .zam-add-opt b { color: var(--za-text); letter-spacing: 0.08em; }
.zam-chooser .zam-add-opt i { margin-left: auto; font-style: normal; color: var(--za-text-faint); }
.zam-chooser .zam-add-opt:disabled { opacity: 0.35; cursor: not-allowed; }
.zam-chooser-close { text-align: center; justify-content: center; margin-top: 10px; }

/* CPU badge */
.zam-cpu {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--za-font-mono);
  font-size: 9px; letter-spacing: 0.1em;
  color: var(--za-text-faint);
}
.zam-cpu i {
  display: inline-block; height: 5px; border-radius: 3px;
  background: var(--za-ok);
  min-width: 2px; max-width: 70px;
}
.zam-cpu b { color: var(--za-text-muted); font-weight: 600; }
.zam-cpu-warn i { background: var(--za-warn); }
.zam-cpu-warn b { color: var(--za-warn); }

/* matrix tabs + filters */
.zam-mx-tabs { display: inline-flex; gap: 4px; }
.zam-mx-tab {
  padding: 4px 10px;
  background: var(--za-surface-1);
  color: var(--za-text-faint);
  border: 1px solid var(--za-line-strong);
  border-radius: 999px;
  font-family: var(--za-font-mono);
  font-size: 9px; letter-spacing: 0.12em;
  cursor: pointer;
  transition: all var(--za-dur-fast) var(--za-ease);
}
.zam-mx-tab:hover { color: var(--za-accent); border-color: var(--za-accent-soft); }
.zam-mx-tab.on { background: var(--za-accent); color: var(--za-accent-ink); border-color: var(--za-accent); }
.zam-mx-used.on { background: var(--za-info); border-color: var(--za-info); }
.zam-mx-empty {
  margin: 0; padding: 16px;
  font-size: var(--za-fs-xs); color: var(--za-text-faint);
  text-align: center;
}

/* grouped + sticky matrix headers */
.zam-matrix-scroll { max-height: 70vh; overflow: auto; position: relative; }
.zam-matrix thead th { position: sticky; top: 0; background: var(--za-surface-1); z-index: 2; }
.zam-matrix thead .zam-mx-grouprow th { top: 0; }
.zam-matrix tbody th { position: sticky; left: 0; background: var(--za-surface-1); z-index: 1; }
.zam-matrix thead th.zam-mx-corner { left: 0; z-index: 3; }
.zam-mx-group {
  font-family: var(--za-font-mono);
  font-size: 8px; letter-spacing: 0.14em;
  color: var(--za-text-muted);
  border-bottom: 1px solid var(--za-line);
  padding: 3px 2px !important;
  white-space: nowrap;
}
.zam-mx-cont { opacity: 0.4; }

/* dense mode for big racks */
.zam-matrix-dense .zam-mx-cell { width: 20px; height: 20px; border-radius: 4px; }
.zam-matrix-dense .zam-mx-cell::after { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.zam-matrix-dense .zam-mx-collabel { font-size: 8px; max-height: 84px; }
.zam-matrix-dense th.zam-mx-row { font-size: 8px; }

/* mobile: slightly larger HP so knobs stay usable, rack scrolls */
@media (max-width: 880px) {
  #za-rack { --zam-hp: 13px; }
  .zam-module { border-right: 1px solid var(--za-line); }
  .zam-chooser { inset: 4%; }
}


/* narrow panels: switches stack vertically instead of overflowing */
.zam-narrow .zam-switch { flex-direction: column; }
.zam-narrow .zam-sw-opt { padding: 4px 10px; text-align: center; }
.zam-switch { max-width: 100%; }

/* LADDER: keep six columns inside 14 HP */
.zam-seg-grid { gap: 2px; }
.zam-seg-col { gap: 5px; padding: 3px 0; }
.zam-seg-col .zam-knob { width: 22px; height: 22px; }
.zam-seg-col .zam-knob::before { inset: 3px; }
.zam-seg-type { min-width: 24px; }

/* ---- transport & aufnahme (additiv, v7) ---- */
.zam-transportbar {
  display: flex; align-items: center; gap: var(--za-sp-2, 8px);
  margin-bottom: var(--za-sp-3, 12px);
  flex-wrap: wrap;
}
.zam-tr-btn {
  min-height: 36px; padding: 0 14px;
  background: var(--za-surface-2);
  color: var(--za-text-muted);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  font-family: var(--za-font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  cursor: pointer;
}
.zam-tr-btn:hover { color: var(--za-accent); border-color: var(--za-accent-soft); }
.zam-tr-run.on { color: var(--za-text); }
.zam-tr-rec.on { color: #fff; background: #080808; border-color: #c8a662; }
.zam-tr-rec.on:hover { color: #fff; }
.zam-tr-rec:disabled { opacity: 0.45; cursor: default; }
.zam-tr-bpm {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--za-font-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--za-text-faint);
}
.zam-tr-bpm input {
  width: 64px; min-height: 36px; padding: 0 8px;
  background: var(--za-surface-2); color: var(--za-text);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  font-family: var(--za-font-mono); font-size: 11px;
}
.zam-tr-beat {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--za-accent, #d42);
  opacity: 0.25; transition: opacity 0.05s linear;
}
.zam-tr-time { font-family: var(--za-font-mono); font-size: 11px; color: var(--za-text-muted); min-width: 52px; }
.zam-tr-state { font-family: var(--za-font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--za-text-faint); }

.zam-take-wrap {
  margin-top: var(--za-sp-4, 16px);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius-lg, 6px);
  background: var(--za-surface-1);
  padding: 14px;
}
.zam-take-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.zam-take-title { font-family: var(--za-font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--za-text); }
.zam-take-meta { font-family: var(--za-font-mono); font-size: 10px; color: var(--za-text-faint); }
.zam-take-wrap audio { width: 100%; max-width: 520px; display: block; margin: 6px 0 10px; }
.zam-take-note, .zam-take-credit { font-size: 12px; color: var(--za-text-muted); margin: 6px 0; }
.zam-take-credit { font-family: var(--za-font-mono); font-size: 11px; color: var(--za-text); }
.zam-take-status { font-size: 12px; color: var(--za-warn, #c90); margin: 6px 0; min-height: 1em; }
.zam-take-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }

/* ---- Stage 3: STENCIL (frueher RAHMEN) keyframe panel + voice focus (additiv) ---- */
.zam-kf { margin: 8px 6px 4px; }
.zam-kf-line {
  position: relative; height: 22px; border-radius: 3px;
  background: var(--za-surface-2, rgba(0,0,0,0.25));
  border: 1px solid var(--za-line-strong);
  overflow: hidden;
}
.zam-kf-dot {
  position: absolute; top: 3px; bottom: 3px; width: 3px; margin-left: -1px;
  background: var(--za-accent); border-radius: 1px; opacity: 0.9;
}
.zam-kf-cur {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: var(--za-info, #6ac); opacity: 0.9;
}
.zam-kf-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.zam-kf-btn { white-space: nowrap; }
.zam-kf-btn:disabled { opacity: 0.4; cursor: default; }
.zam-kf-count {
  font-family: var(--za-font-mono); font-size: 10px;
  color: var(--za-text-faint); margin-left: auto;
}
.zam-module-voice.zam-vfocus { box-shadow: inset 0 0 0 1px var(--za-accent-soft, rgba(255,180,60,0.45)); }
.zam-module-voice.zam-vfocus .zam-mod-name::after {
  content: ' ◂▸'; color: var(--za-accent); font-size: 9px; letter-spacing: 0;
}


/* ---- Buchsenfeld: verkabeln direkt am Modul (v12) ------------------- */

.zam-jacks {
  margin-top: auto;
  width: 100%;
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 8px;
  border-top: 1px dashed var(--za-line);
}
.zam-jackrow {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 1px 3px; justify-content: center;
}
.zam-jacks-tag {
  font-family: var(--za-font-mono); font-size: 8px; letter-spacing: 0.12em;
  color: var(--za-text-faint); align-self: center; min-width: 22px; text-align: right;
  margin-right: 2px;
}
.zam-jack {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 4px 2px 2px; margin: 0;
  cursor: pointer; min-width: 32px;
  transition: opacity .15s ease;
}
.zam-jack-hole {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--za-bg);
  border: 2px solid var(--za-line-strong);
  box-shadow: inset 0 0 0 3px var(--za-surface-1);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease, background .12s ease;
}
.zam-jack-audio .zam-jack-hole { border-color: color-mix(in srgb, var(--za-accent) 60%, var(--za-line-strong)); }
.zam-jack-cv .zam-jack-hole { border-color: color-mix(in srgb, var(--za-info) 60%, var(--za-line-strong)); }
.zam-jack-lab {
  font-family: var(--za-font-mono); font-size: 8px; letter-spacing: 0.05em;
  color: var(--za-text-faint); white-space: nowrap; max-width: 52px;
  overflow: hidden; text-overflow: ellipsis;
}
.zam-jack.on .zam-jack-hole { box-shadow: inset 0 0 0 4px var(--za-bg); }
.zam-jack-audio.on .zam-jack-hole { background: var(--za-accent); box-shadow: inset 0 0 0 4px var(--za-bg), 0 0 6px var(--za-accent-glow); }
.zam-jack-cv.on .zam-jack-hole { background: var(--za-info); box-shadow: inset 0 0 0 4px var(--za-bg), 0 0 6px color-mix(in srgb, var(--za-info) 45%, transparent); }
.zam-jack.on .zam-jack-lab { color: var(--za-text-muted); }
.zam-jack-n {
  position: absolute; top: 0; right: 1px;
  font-family: var(--za-font-mono); font-size: 8px; color: var(--za-text-muted);
  pointer-events: none;
}
.zam-jack:focus-visible { outline: 1px solid var(--za-accent-soft); border-radius: 4px; }
.zam-jack:hover .zam-jack-hole { transform: scale(1.12); }

/* Patch-Modus: Gewaehltes leuchtet, passende Ziele treten vor,
   alles Unpassende tritt sichtbar zurueck. */
#za-rack.zam-patching .zam-jack { opacity: 0.22; }
#za-rack.zam-patching .zam-jack.zam-armed,
#za-rack.zam-patching .zam-jack.zam-target { opacity: 1; }
#za-rack.zam-patching .zam-jack.zam-target:not(.zam-best) { opacity: 0.55; }
.zam-jack.zam-armed .zam-jack-hole {
  transform: scale(1.3);
  border-color: var(--za-accent-bright);
  box-shadow: inset 0 0 0 3px var(--za-surface-1), 0 0 12px var(--za-accent-glow);
}
.zam-jack.zam-armed .zam-jack-lab { color: var(--za-accent-bright); }
.zam-jack.zam-linked .zam-jack-lab { color: var(--za-accent-bright); }
@keyframes zam-jack-pulse {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--za-surface-1), 0 0 3px var(--za-accent-glow); }
  50% { box-shadow: inset 0 0 0 3px var(--za-surface-1), 0 0 12px var(--za-accent-glow); }
}
.zam-jack.zam-best .zam-jack-hole { animation: zam-jack-pulse 1.2s ease-in-out infinite; }
.zam-jack.zam-flash .zam-jack-hole { transform: scale(1.45); }
@media (prefers-reduced-motion: reduce) {
  .zam-jack.zam-best .zam-jack-hole { animation: none; box-shadow: inset 0 0 0 3px var(--za-surface-1), 0 0 10px var(--za-accent-glow); }
}

/* Popover an der gewaehlten Buchse */
.zam-patchpop {
  position: absolute; z-index: 60; width: 260px;
  background: var(--za-surface-2);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius-lg, 6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.zam-pp-head { display: flex; align-items: center; gap: 8px; }
.zam-pp-head b {
  font-family: var(--za-font-display); font-size: var(--za-fs-sm);
  color: var(--za-accent); letter-spacing: 0.04em; flex: 1 1 auto;
}
.zam-pp-dir {
  font-family: var(--za-font-mono); font-size: 8px; letter-spacing: 0.1em;
  color: var(--za-text-faint); border: 1px solid var(--za-line); border-radius: 3px;
  padding: 1px 4px;
}
.zam-pp-done {
  font-family: var(--za-font-mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--za-text-muted); background: var(--za-surface-3);
  border: 1px solid var(--za-line-strong); border-radius: var(--za-radius, 4px);
  padding: 3px 7px; cursor: pointer;
}
.zam-pp-done:hover { color: var(--za-text); border-color: var(--za-accent-soft); }
.zam-pp-conn { display: flex; align-items: center; gap: 6px; }
.zam-pp-name {
  font-family: var(--za-font-mono); font-size: 10px; color: var(--za-text-muted);
  flex: 0 1 auto; min-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zam-pp-gain { flex: 1 1 auto; min-width: 50px; accent-color: var(--za-accent); height: 14px; }
.zam-pp-x {
  background: none; border: 1px solid var(--za-line-strong); border-radius: 3px;
  color: var(--za-text-muted); font-size: 12px; line-height: 1; padding: 2px 6px; cursor: pointer;
}
.zam-pp-x:hover { color: var(--za-warn); border-color: var(--za-warn); }
.zam-pp-subhead {
  font-family: var(--za-font-mono); font-size: 8px; letter-spacing: 0.12em;
  color: var(--za-text-faint); margin-top: 2px;
}
.zam-pp-sug {
  text-align: left;
  font-family: var(--za-font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--za-text); background: var(--za-surface-3);
  border: 1px solid var(--za-line-strong); border-radius: var(--za-radius, 4px);
  padding: 5px 8px; cursor: pointer;
}
.zam-pp-sug:hover { border-color: var(--za-accent-soft); color: var(--za-accent-bright); }
.zam-pp-hint { font-size: 9px; color: var(--za-text-faint); line-height: 1.5; margin: 0; }

/* Matrix-Titel als Auf/Zu-Umschalter */
.zam-mx-toggle { background: none; border: 0; padding: 0; cursor: pointer; }
.zam-mx-toggle:hover { color: var(--za-accent-bright); }

@media (max-width: 640px) {
  .zam-jack { min-width: 36px; padding: 5px 3px 3px; }
  .zam-jack-hole { width: 18px; height: 18px; }
  .zam-patchpop { width: min(260px, calc(100vw - 40px)); }
}

/* ------------------------------------------------- Taktexport (v=13) */
/* Rein angehaengt: Leiste unter dem Transport — Takte, Variante,      */
/* Checkboxen, RENDERN, Fortschritt. Nichts Bestehendes veraendert.    */
.zam-exportbar {
  display: flex; align-items: center; gap: var(--za-sp-2, 8px);
  margin-bottom: var(--za-sp-3, 12px);
  flex-wrap: wrap;
}
/* Ausgebaute Leiste soll auch keinen Platz mehr brauchen. */
.zam-exportbar[hidden] { display: none; }
.zam-x-field input { width: 72px; }
.zam-x-variant { width: 84px; }
.zam-x-dice { padding: 0 10px; }
.zam-x-check {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--za-font-mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--za-text-muted);
  cursor: pointer; user-select: none;
}
.zam-x-check input { accent-color: var(--za-accent, #d42); }
.zam-x-go { color: var(--za-text); }
.zam-x-go:disabled { opacity: 0.5; cursor: default; }
.zam-x-prog {
  position: relative; width: 140px; height: 8px;
  background: var(--za-surface-2);
  border: 1px solid var(--za-line-strong);
  border-radius: 4px; overflow: hidden;
}
.zam-x-prog i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--za-accent, #d42);
  transition: width 0.15s linear;
}
.zam-x-state { flex-basis: 100%; }
.zam-take-hint { color: var(--za-text-muted); }

/* ---- Patchkabel (v14): echte Kabel ueber dem Rack ------------------- */
/* Die Ebene liegt IM Scroll-Inhalt des Racks: Scrollen kostet kein
   Neuzeichnen. Unter dem Start-Overlay (z 5) und dem Chooser (z 6). */
.zam-cables {
  position: absolute; left: 0; top: 0;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
/* Der glatte PVC-Kabelkoerper liegt auf einem Canvas direkt unter der
   SVG-Ebene. Dort bleiben Trefferflaechen und die Steckeraufsichten. */
.zam-cablecanvas {
  position: absolute; left: 0; top: 0;
  z-index: 3;
  pointer-events: none;
}
.zam-cable { --cab: #f4c84a; transition: opacity .15s ease; }
.zam-cabshadow {
  fill: none; stroke: rgba(0,0,0,0.42); stroke-width: 7.6;
  stroke-linecap: round;
}
html[data-theme="sunlight"] .zam-cabshadow { stroke: rgba(0,0,0,0.20); }
.zam-cabvis {
  fill: none; stroke: var(--cab); stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-width .12s ease;
}
/* Kabelkoerper und Schatten kommen im gesetzten Zustand vom Canvas. Die
   SVG-Pfade bleiben Geometrie- und Trefferquelle; beim Ziehen zeigen sie
   denselben physisch skalierten Durchmesser direkt als Vorschau. */
.zam-cable:not(.zam-cabdrag) .zam-cabvis,
.zam-cable:not(.zam-cabdrag) .zam-cabshadow { stroke: none; }
.zam-cabplug {
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.72));
}
.zam-cabplug-boot { fill: var(--cab); stroke: rgba(0,0,0,0.72); stroke-width: 1; }
.zam-cabplug-rib { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 1; }
.zam-cabplug-metal { fill: #b9bbb7; stroke: #35383a; stroke-width: 0.9; }
.zam-cabplug-core { fill: #181a1c; stroke: rgba(255,255,255,0.18); stroke-width: 0.45; }
.zam-cabhit {
  fill: none; stroke: transparent; stroke-width: 14;
  pointer-events: stroke; cursor: pointer;
}
/* Hervorheben statt verstecken: betroffene Kabel vor, Rest zurueck. */
.zam-cables.zam-cabdim .zam-cable { opacity: 0.13; }
.zam-cables.zam-cabdim .zam-cable.zam-cabhot,
.zam-cables.zam-cabdim .zam-cable.zam-cabsel { opacity: 1; }
.zam-cable.zam-cabhot .zam-cabvis,
.zam-cable.zam-cabsel .zam-cabvis {
  stroke-width: 6.8;
  filter: drop-shadow(0 0 4px var(--cab));
}
.zam-cable.zam-cabsel .zam-cabplug { filter: drop-shadow(0 0 3px var(--cab)); }
/* Im Patch-Modus stoeren Kabel nicht: nicht klickbar, nur die der
   gewaehlten Buchse bleiben sichtbar vorn. */
#za-rack.zam-patching .zam-cabhit { pointer-events: none; }
#za-rack.zam-patching .zam-cables .zam-cable { opacity: 0.13; }
#za-rack.zam-patching .zam-cables .zam-cable.zam-cabhot { opacity: 0.95; }

/* Die globale Kurzbeschriftung ist breiter als ihr 38-px-Knopf und war
   auf Telefonbreite das einzige Element ausserhalb des Viewports. */
@media (max-width: 620px) {
  .za-page-modular header.site .sunlight-toggle .theme-label-short { display: none; }
  .za-page-modular header.site .sunlight-toggle::before {
    content: '\2600';
    font-size: 17px;
    line-height: 1;
  }
}
/* Namensschild am Kabel (Hover) */
.zam-cabtip {
  position: absolute; z-index: 61;
  background: var(--za-surface-2);
  border: 1px solid var(--za-line-strong);
  border-radius: 4px;
  padding: 3px 8px;
  font-family: var(--za-font-mono); font-size: 10px;
  color: var(--za-text);
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.zam-cabtip[hidden] { display: none; }
/* Kabel-Popover: TRENNEN als Wortknopf statt nur x */
.zam-cablepop .zam-pp-x { width: auto; padding: 0 8px; font-size: 9px; letter-spacing: 0.08em; }
/* KABEL-Schalter in der Preset-Leiste */
.zam-cab-toggle { opacity: 0.7; }
.zam-cab-toggle.on { opacity: 1; color: var(--za-accent); border-color: var(--za-accent-soft, var(--za-line-strong)); }

/* --- MIDI-Kanalwahl am BENCH-Modul (frueher TASTEN) (v=17): kompakte Anzeige im 6-HP-Panel.
   Schmalere Pfeile, kein Nummernfeld, Anzeige zentriert — "K 16" muss in
   die ~40 px passen, die das 6-HP-Panel der Anzeige laesst. --- */
.zam-module-keys .zam-display-row { max-width: 132px; margin: 0 auto; }
.zam-module-keys .zam-step { width: 18px; }
.zam-module-keys .zam-display { padding: 4px 3px; gap: 0; justify-content: center; }
.zam-module-keys .zam-disp-num { display: none; }
.zam-module-keys .zam-disp-name { font-size: 9px; letter-spacing: 0.02em; text-align: center; }

/* ===================================================================
   Umbau (js v=17 / css v=18): 1176-Knoepfe, BENCH-Schaltzentrale (frueher PULT),
   Kabel ziehen, Undo. Alles nur angehaengt.
   =================================================================== */

/* --- Schaltflaechen im Stil eines 1176-Kompressors: schwarze, leicht
   gewoelbte Druckknoepfe mit Metallfase und gravierter heller Schrift.
   Bewusst dunkel in BEIDEN Themes — echte Hardware-Knoepfe wechseln
   ihre Farbe auch nicht mit dem Sonnenlicht. --- */
.zam-preset-btn, .zam-tr-btn, .zam-1176 {
  appearance: none; -webkit-appearance: none;
  position: relative;
  background: linear-gradient(180deg, #33333a 0%, #1b1b1f 45%, #0e0e10 100%);
  border: 1px solid #000;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -2px 3px rgba(0,0,0,0.55),
    0 1px 0 rgba(255,255,255,0.07),
    0 2px 3px rgba(0,0,0,0.45);
  color: #e8dfc9;
  font-family: var(--za-font-mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.75);
  padding: 7px 10px 6px;
  cursor: pointer;
  transition: box-shadow var(--za-dur-fast) var(--za-ease), transform var(--za-dur-fast) var(--za-ease), color var(--za-dur-fast) var(--za-ease);
}
.zam-preset-btn:hover, .zam-tr-btn:hover, .zam-1176:hover {
  color: #fff2d6; border-color: #000;
}
.zam-preset-btn:active, .zam-tr-btn:active, .zam-1176:active,
.zam-preset-btn.on, .zam-tr-btn.on, .zam-1176.on {
  transform: translateY(1px);
  background: linear-gradient(180deg, #17171a 0%, #101013 55%, #0a0a0b 100%);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.75),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 1px 0 rgba(255,255,255,0.05);
}
/* Bei aktiven Rasttastern leuchtet nur die Schrift. Der Taster bleibt dunkel
   und bekommt keinen bernsteinfarbenen Lichtrand. */
.zam-tr-btn.on, .zam-1176.on {
  color: #f0c674;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,0.75),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 1px 0 rgba(255,255,255,0.05);
}
.zam-preset-btn:disabled, .zam-tr-btn:disabled, .zam-1176:disabled {
  opacity: 0.4; cursor: default; transform: none;
}
.zam-preset-btn:focus-visible, .zam-tr-btn:focus-visible, .zam-1176:focus-visible {
  outline: 1px solid var(--za-accent-soft); outline-offset: 1px;
}

/* Rueckgaengig/Wiederholen in der Preset-Leiste */
.zam-undo-btn { padding-left: 8px; padding-right: 8px; }

/* --- BENCH (frueher PULT): Schaltzentrale im fest verschraubten Modul --- */
.zam-pult {
  display: flex; flex-direction: column; gap: 8px;
  align-items: stretch; width: 100%; max-width: 120px;
  margin: 0 auto;
}
.zam-pult-run { min-height: 34px; font-size: 11px; }
.zam-pult-bpm {
  display: flex; align-items: center; gap: 6px;
  background: var(--za-bg);
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius, 4px);
  padding: 3px 7px;
  min-height: 30px;
}
.zam-pult-bpm input {
  width: 44px; flex: 1 1 auto; min-width: 0;
  background: transparent; border: 0; color: var(--za-accent-bright);
  font-family: var(--za-font-mono); font-size: 12px;
  text-align: right;
}
.zam-pult-bpm input:focus { outline: none; }
.zam-pult-bpmlab {
  font-family: var(--za-font-mono); font-size: 8px;
  letter-spacing: 0.1em; color: var(--za-text-faint);
}
.zam-pult .zam-tr-beat {
  flex: 0 0 auto;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--za-accent);
  opacity: 0.25;
  box-shadow: 0 0 6px var(--za-accent-glow, rgba(240,198,116,0.4));
}
.zam-pult-cab { opacity: 0.85; }
.zam-pult-cab.on { opacity: 1; }

/* --- Kabel ziehen --- */
.zam-jack { touch-action: none; }   /* Ziehen statt Scrollen auf Touch */
.zam-cables .zam-cabhit { touch-action: none; }
.zam-cabdrag { pointer-events: none; }
.zam-cabdrag .zam-cabvis { stroke-opacity: 0.95; }
.zam-cabdrag .zam-cabshadow { stroke-opacity: 0.35; }
.zam-jack.zam-drophot .zam-jack-hole {
  transform: scale(1.45);
  box-shadow: inset 0 0 0 3px var(--za-surface-1), 0 0 12px var(--za-accent-glow, rgba(240,198,116,0.5));
}
#za-rack.zam-patching .zam-jack.zam-drophot { opacity: 1; }

/* BENCH ist jetzt 8 HP — die kompakte Kanalanzeige von v=17 gilt weiter. */

/* Fix (v=19): das globale input-Padding der Seite (14px 16px) quetschte
   die BPM-Zahl aus dem Feld — hier explizit zuruecksetzen, Spinner aus. */
.zam-pult-bpm input {
  padding: 0; margin: 0; height: auto; line-height: 1.2;
  box-shadow: none; border-radius: 0;
  -moz-appearance: textfield; appearance: textfield;
}
.zam-pult-bpm input::-webkit-inner-spin-button,
.zam-pult-bpm input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --- Aufraeumen (v=22): INSTRUCTIONS-Ausklappmenue, Undo/Redo im BENCH,
   sichtbare Download-Knoepfe, Kabel-Schalter mit Klartext. Rein
   angehaengt, nichts Bestehendes veraendert. --- */

/* Ausklappmenue unter der Klaviatur: nimmt alles Erklaerende auf. */
.zam-instructions {
  margin: var(--za-sp-3, 12px) 0 0;
  border: 1px solid var(--za-line-strong);
  border-radius: var(--za-radius-lg, 6px);
  background: var(--za-surface-1);
}
.zam-instructions > summary {
  cursor: pointer; list-style: none;
  padding: 10px 14px;
  font-family: var(--za-font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--za-text-muted);
  user-select: none;
}
.zam-instructions > summary::-webkit-details-marker { display: none; }
.zam-instructions > summary::before { content: "\25b8  "; color: var(--za-accent); }
.zam-instructions[open] > summary::before { content: "\25be  "; }
.zam-instructions > summary:hover { color: var(--za-accent); }
.zam-instr-body { padding: 0 14px 14px; }
.zam-instr-body h4 {
  margin: 14px 0 4px;
  font-family: var(--za-font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--za-accent);
  text-transform: uppercase;
}
.zam-instr-body p {
  margin: 0;
  font-size: var(--za-fs-xs);
  color: var(--za-text-faint);
  line-height: 1.6;
}
.zam-instr-body a { color: var(--za-text-muted); }

/* Undo/Redo im BENCH: zwei halbe 1176-Knoepfe nebeneinander. */
.zam-pult-undo { display: flex; gap: 6px; }
.zam-pult-undo .zam-pult-ur {
  flex: 1 1 0; min-width: 0;
  padding-left: 2px; padding-right: 2px;
  font-size: 9px; letter-spacing: 0.06em;
}
/* Kabel-Schalter traegt jetzt Klartext (HIDE/SHOW CABLES). */
.zam-pult-cab { font-size: 9px; letter-spacing: 0.08em; padding-left: 2px; padding-right: 2px; }

/* Download-Knoepfe: auf einen Blick als Download erkennbar. */
.zam-dl-btn {
  background: var(--za-accent);
  color: var(--za-accent-ink, #14100a);
  border-color: var(--za-accent);
  font-weight: 600; font-size: 11px; letter-spacing: 0.08em;
  min-height: 42px; padding: 0 18px;
  display: inline-flex; align-items: center;
  text-decoration: none;
}
.zam-dl-btn:hover {
  color: var(--za-accent-ink, #14100a);
  border-color: var(--za-accent);
  filter: brightness(1.1);
}

/* Credits/Lizenz auf der Seite: eingeklappt, aber immer erreichbar. */
.zam-credit-details { margin-top: var(--za-sp-3, 12px); }
.zam-credit-details > summary {
  cursor: pointer; list-style: none;
  font-family: var(--za-font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--za-text-faint);
  user-select: none;
}
.zam-credit-details > summary::-webkit-details-marker { display: none; }
.zam-credit-details > summary::before { content: "\25b8 "; }
.zam-credit-details[open] > summary::before { content: "\25be "; }
.zam-credit-details > summary:hover { color: var(--za-text-muted); }

/* ---------------------------------------------- Etappe Sequenzer (v23) */

/* RATCHET: 8 Schrittspalten — Notenname ueber dem Miniregler, darunter
   der Gate-Knopf (ON/TIE/OFF). Lauflicht via .zam-seq-cur vom Worklet. */
.zam-seq-grid {
  display: flex;
  flex-wrap: wrap;            /* 2 Reihen à 4 Schritte — passt in 20 HP */
  gap: 4px 2px;
  justify-content: center;
  width: 100%;
}
.zam-seq-col { flex: 0 0 calc(25% - 4px); min-width: 0; padding: 2px 0; }
.zam-seq-note {
  font-size: 8px;
  letter-spacing: 0.06em;
  color: var(--za-text-muted);
  font-variant-numeric: tabular-nums;
  min-height: 10px;
}
.zam-seq-gate { min-width: 26px; font-size: 7px; opacity: 0.55; }
.zam-seq-gate.zam-seq-on { opacity: 1; color: var(--za-accent); border-color: var(--za-accent-soft); }
.zam-seq-col.zam-seq-cur { background: rgba(255, 176, 80, 0.12); background: color-mix(in srgb, var(--za-accent) 14%, transparent); border-radius: 4px; }
.zam-seq-col.zam-seq-cur .zam-seq-note { color: var(--za-accent); }

/* Modulauswahl: Kopfzeile mit Titel und ✕ zum Schliessen. */
.zam-chooser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.zam-chooser-title {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--za-text-muted);
}
.zam-chooser-x {
  border: 1px solid var(--za-line);
  background: transparent;
  color: var(--za-text-muted);
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.zam-chooser-x:hover { color: var(--za-accent); border-color: var(--za-accent-soft); }

/* Module per Maus verschieben: greifbares Panel, Geistbild waehrend des
   Zugs, senkrechter Balken an der Einfuegestelle. */
.zam-grabbable { cursor: grab; }
.zam-grabbable .zam-knob, .zam-grabbable .zam-jack, .zam-grabbable button,
.zam-grabbable input, .zam-grabbable select { cursor: auto; }
.zam-grabbable .zam-knob { cursor: ns-resize; }
body.zam-moddragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.zam-moddragging * { cursor: grabbing !important; }
.zam-modghost { opacity: 0.45; outline: 1px dashed var(--za-accent-soft); }
.zam-dropbar {
  position: absolute;
  width: 3px;
  background: var(--za-accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--za-accent-soft);
  pointer-events: none;
  z-index: 40;
}

/* BENCH: MIDI-Quelle + ARM-Schalter unter Undo/Redo. */
.zam-pult-midisrc {
  width: 100%;
  background: var(--za-bg, #101014);
  color: var(--za-text-muted);
  border: 1px solid var(--za-line);
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.06em;
  padding: 4px 2px;
  max-width: 132px;
}
.zam-pult-midisrc:disabled { opacity: 0.4; }
.zam-pult-arm { font-size: 9px; letter-spacing: 0.08em; opacity: 0.85; }
.zam-pult-arm.on { opacity: 1; }

/* --- Etappe Clock-Sync + Touch-Verschieben (css v=25) ------------------- */
/* CLK INT/EXT im BENCH sind zwei echte, gegenseitig verriegelte Taster. */
.zam-pult-sync-group { display: flex; width: 100%; gap: 2px; }
.zam-pult-sync-option {
  flex: 1 1 50%; min-width: 0; min-height: 26px; height: 26px;
  padding: 0 4px; font-size: 9px; letter-spacing: 0.08em; opacity: 0.85;
}
.zam-pult-sync-option.on { opacity: 1; }
/* Touch: der lange Druck aufs Panel darf keine iOS-Sprechblase oder
   Textauswahl anwerfen; Eingabefelder bleiben unberuehrt (eigene Elemente). */
.zam-module { -webkit-touch-callout: none; }
/* Aufgenommenes Modul (Halten auf Touch): deutlich sichtbarer Rahmen als
   Rueckmeldung "haengt jetzt am Finger" — zusaetzlich zum Ghost-Zustand. */
.zam-modheld {
  box-shadow: 0 0 0 2px var(--za-accent, #f0c674), 0 8px 20px rgba(0, 0, 0, 0.45);
}


/* ------------------------------------------------- Mobil (v=26) */
/* Kabel-Fix: das seitenweite `img, svg { max-width: 100% }` aus
   style.css klemmte die Kabel-Ebene auf die sichtbare Rackbreite,
   sobald der Rackinhalt breiter war als das Rack (jedes Handy, jedes
   schmale Fenster). Der viewBox-Massstab skalierte dann alle Kabel auf
   Rackbreite/Inhaltsbreite (~50 % am Handy) und zentrierte sie
   vertikal (preserveAspectRatio "meet") — die Kabel sassen sichtbar
   neben den Buchsen. Am Desktop passte der Inhalt in die Breite,
   darum fiel es dort nie auf. */
.zam-cables { max-width: none; }