/* Rackformat nach VCV-Vorbild. 22.08.2026. VCV Rack: 1 HP = 15 px, ein 3-HE-Modul ist 380 px hoch. Die Breite stimmt hier schon (--zam-hp: 15px). Nur die Hoehe war frei und wuchs mit dem Inhalt (gemessen: 633 px). Diese Datei aendert nichts am Original — sie wird danach geladen und ueberschreibt nur die Masse. Weglassen = alter Zustand. */ #za-rack { --zam-hp: 15px; --zam-3he: 380px; /* Modulhoehe wie VCV */ } /* --- Grundmass --- */ #za-rack .zam-module, #za-rack .zam-module-add { height: var(--zam-3he); min-height: var(--zam-3he); max-height: var(--zam-3he); padding: 14px 4px 7px; gap: 2px; overflow: hidden; } /* --- Kopfzeile --- */ #za-rack .zam-mod-head { margin-bottom: 2px; } #za-rack .zam-mod-head h3, #za-rack .zam-mod-title { font-size: 11px; letter-spacing: .08em; } #za-rack .zam-mod-sub { font-size: 7px; letter-spacing: .06em; } #za-rack .zam-narrow .zam-mod-sub { letter-spacing: 0; } /* --- Regler --- */ #za-rack .zam-knob { width: 26px; height: 26px; } #za-rack .zam-knob-dot::after { top: 3px; height: 7px; width: 2px; margin-left: -1px; } #za-rack .zam-knob-big .zam-knob { width: 32px; height: 32px; } #za-rack .zam-knob-big .zam-knob-dot::after { top: 4px; height: 9px; } #za-rack .zam-knob-label, #za-rack .zam-ctl-label { font-size: 7px; letter-spacing: .04em; } /* --- Displays: alle auf die Hoehe des RATCHET-Displays (Ansage Tom) --- */ #za-rack .zam-display, #za-rack .zam-display-row, #za-rack .zam-scope { height: 38px; } /* --- Schalter, Knoepfe, Felder --- */ #za-rack .zam-btn, #za-rack .zam-seg, #za-rack .zam-select { min-height: 18px; height: 18px; padding: 0 6px; font-size: 8px; } /* --- Schieber --- */ #za-rack .zam-slider { min-height: 34px; width: 7px; } /* --- Buchsen --- */ #za-rack .zam-jack { width: 13px; height: 13px; } #za-rack .zam-jack-label { font-size: 6px; } /* --- Fliesstext im Modul (Hinweise) --- */ #za-rack .zam-keys-note, #za-rack .zam-mod-note, #za-rack .zam-dsp-credit { font-size: 6px; line-height: 1.3; max-width: 100%; } /* Werkzeugleiste oben nicht in die Hoehe rechnen */ #za-rack .zam-mod-tools { top: -14px; } /* --- Nachtrag: Feinschliff, damit nichts unten herausragt --- */ /* Buchsenzeile sitzt immer am unteren Rand, wie bei echter Hardware */ #za-rack .zam-jacks { margin-top: auto; padding-top: 4px; } /* Der lange Bedienhinweis im Modul kostet die meiste Hoehe. Er steht unveraendert unter INSTRUCTIONS, hier nur ausgeblendet. */ #za-rack .zam-keys-note { display: none; } /* Der DSP-/Lizenzhinweis (Mutable, MIT) BLEIBT sichtbar - Lizenzpflicht. */ #za-rack .zam-origin { font-size: 6px; line-height: 1.25; margin: 1px 0; } /* Sequencer-Raster: das hoechste Element im Rack */ #za-rack .zam-seq-grid { gap: 2px; } #za-rack .zam-seq-col { gap: 1px; } #za-rack .zam-seq-note { font-size: 7px; } #za-rack .zam-seq-grid .zam-knob { width: 20px; height: 20px; } #za-rack .zam-seq-grid .zam-knob-label { font-size: 6px; } #za-rack .zam-seq-gate { min-height: 12px; height: 12px; font-size: 7px; } /* Schalterzeilen und Pult */ #za-rack .zam-switch-row { gap: 3px; } #za-rack .zam-pult { gap: 3px; } #za-rack .zam-more { font-size: 7px; } /* Schrauben an die Ecken des neuen Formats */ #za-rack .zam-mscrew { width: 10px; height: 10px; } /* --- Nachtrag 2: RATCHET (Sequencer) war als einziges noch 53 px zu hoch --- */ /* (Sondermass fuer den Sequencer entfaellt - alle Displays sind jetzt gleich) */ #za-rack .zam-seq-grid .zam-knob { width: 17px; height: 17px; } #za-rack .zam-seq-grid .zam-knob-dot::after { top: 2px; height: 5px; } #za-rack .zam-seq-gate { min-height: 10px; height: 10px; font-size: 6px; } #za-rack .zam-seq-note { font-size: 6px; line-height: 1.1; } #za-rack .zam-module-lfo .zam-knob-row-small .zam-knob { width: 20px; height: 20px; } /* --- Nachtrag 3: letzte 17 px beim Sequencer --- */ #za-rack .zam-module-lfo { padding-top: 12px; padding-bottom: 6px; gap: 2px; } #za-rack .zam-module-lfo .zam-switch-row { gap: 2px; } #za-rack .zam-module-lfo .zam-seg-type, #za-rack .zam-module-lfo .zam-btn { min-height: 14px; height: 14px; font-size: 7px; } #za-rack .zam-module-lfo .zam-seq-grid { gap: 1px; } /* --- Nachtrag 4: die letzten 8 px --- */ #za-rack .zam-module-lfo .zam-mod-head { margin-bottom: 0; } #za-rack .zam-module-lfo .zam-jacks { padding-top: 2px; } /* --- BENCH: Schalter HIDE CABLES raus (Ansage Tom, 22.08.2026) --- Nur ausgeblendet, nicht aus dem Code entfernt. Die Funktion bleibt erhalten und laesst sich jederzeit zurueckholen: diese Regel loeschen. */ #za-rack .zam-pult-cab { display: none; } /* UNDO / REDO im BENCH ebenfalls raus (Ansage Tom, 22.08.2026). Auch hier nur ausgeblendet; Tastenkuerzel bleiben unberuehrt. */ #za-rack .zam-pult-undo { display: none; } /* --- Panelplatte: schwarze Higgsfield-Flaeche statt der gezeichneten --- Quelle: P14 01_INPUT\panels\zerlegt\panel-breit-zuschnitt.png (Higgsfield-Lauf 21.08., von Tom freigegeben, siehe ASSET-HERKUNFT.md). Hier nur der reine Flaechenausschnitt ohne Buchsen und Schrauben. */ #za-rack .zam-module, #za-rack .zam-module-add { background-image: linear-gradient(rgba(0,0,0,.19), rgba(0,0,0,.19)), url('za-panel-schwarz.png') !important; /* Die Originaltextur ist warm getoent. Luminosity ueber neutralem Schwarz behaelt nur ihre Materialstruktur und entfernt den braunen Farbstich. */ background-blend-mode: normal, luminosity !important; background-size: cover !important; background-position: center top !important; background-repeat: no-repeat !important; background-color: #000 !important; border-right: 1px solid rgba(0,0,0,.75); } /* Schmale Module bekommen den senkrechten Streifen, damit die Maserung nicht gequetscht wirkt */ #za-rack .zam-module-out, #za-rack .zam-module[style*="--hp: 4"], #za-rack .zam-module[style*="--hp: 6"] { background-image: linear-gradient(rgba(0,0,0,.19), rgba(0,0,0,.19)), url('za-panel-schwarz-schmal.png') !important; } /* Die Panelbilder bleiben in beiden Seitenthemes dunkel. Darum bekommen nur die aufgedruckten Panellegenden feste helle Druckfarben; Displays, LEDs, Taster und Regler bleiben von dieser Kontrastkorrektur unberuehrt. */ #za-rack .zam-module .zam-mod-name { color: #f0c674; text-shadow: 0 1px 1px rgba(0,0,0,.95); } #za-rack .zam-module .zam-mod-sub, #za-rack .zam-module .zam-knob-label, #za-rack .zam-module .zam-ctl-label, #za-rack .zam-module .zam-switch-label, #za-rack .zam-module .zam-led-label, #za-rack .zam-module .zam-jacks-tag, #za-rack .zam-module .zam-jack-lab, #za-rack .zam-module .zam-origin, #za-rack .zam-module .zam-seq-note, #za-rack .zam-module .zam-kf-count, #za-rack .zam-module .zam-pult-bpmlab, #za-rack .zam-module .zam-more > summary, #za-rack .zam-module-add .zam-add-label { color: #d8cfbc !important; text-shadow: 0 1px 1px rgba(0,0,0,.95); } #za-rack .zam-module .zam-origin { opacity: 1; flex: 0 0 auto; } #za-rack .zam-module .zam-jack.on .zam-jack-lab, #za-rack .zam-module .zam-jack-n { color: #e8dfc9 !important; } #za-rack .zam-module .zam-jack.zam-armed .zam-jack-lab, #za-rack .zam-module .zam-jack.zam-linked .zam-jack-lab, #za-rack .zam-module .zam-seq-col.zam-seq-cur .zam-seq-note, #za-rack .zam-module-voice.zam-vfocus .zam-mod-name::after { color: #ffcf7a !important; } /* --- Logische Buchsenverteilung fuer das gesamte Rack ----------------- IN steht links, OUT rechts. Jede Richtungsgruppe erhaelt Breite nach ihrer Portzahl; bei genuegend Platz bleibt sie einreihig, sonst bricht sie nur innerhalb ihrer eigenen Gruppe geordnet um. */ #za-rack .zam-jacks { flex-direction: row; justify-content: center; align-items: flex-end; gap: 4px; } #za-rack .zam-jackrow { flex: var(--zam-port-count, 1) 1 0; min-width: 22px; width: auto; display: grid; grid-template-columns: repeat(var(--zam-port-columns, 1), minmax(0, 1fr)); align-content: end; align-items: start; gap: 1px 2px; } #za-rack .zam-jacks-tag { grid-column: 1 / -1; min-width: 0; width: 100%; margin: 0; text-align: center; } #za-rack .zam-jack { min-width: 0; width: 100%; padding: 2px 0; } #za-rack .zam-jack-lab { max-width: 100%; font-size: 6px; line-height: 1.1; letter-spacing: .02em; } /* HINGE hat keine anderen Bedienelemente: dort duerfen die Buchsen die Panelhoehe sinnvoll nutzen. IN und OUT bleiben als zwei klare Spalten. */ #za-rack .za-m-hinge > .zam-jacks { flex: 1 1 auto; align-items: stretch; } #za-rack .za-m-hinge .zam-jackrow { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 2px; padding-bottom: 10px; box-sizing: border-box; } #za-rack .za-m-hinge .zam-jack { flex: 0 0 auto; } /* Mehrere Schalter bleiben fuer normale Module strukturell unveraendert. Nur die beiden nachweislich hoehenkritischen Module nutzen ein Raster: RATCHET zwei Funktionen nebeneinander; TUMBLER drei logische Paare. */ #za-rack .zam-switch-grid { display: contents; } #za-rack .za-m-ratchet > .zam-switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: 100%; } #za-rack .za-m-tumbler > .zam-switch-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(0, .65fr); grid-template-rows: repeat(2, auto); grid-auto-flow: column; gap: 2px 4px; width: 100%; } #za-rack :is(.za-m-ratchet, .za-m-tumbler) .zam-switch-grid .zam-switch-row, #za-rack :is(.za-m-ratchet, .za-m-tumbler) .zam-switch-grid .zam-switch { min-width: 0; width: 100%; } /* DAMPER und TUMBLER behalten auch einreihig mindestens 22 px je Port. TUMBLER nutzt dabei wieder die tatsaechlichen IN-/OUT-Portzahlen 4/7 aus --zam-port-count statt eigener, davon abweichender Gewichte. */ #za-rack :is(.za-m-damper, .za-m-tumbler) .zam-jackrow { column-gap: 1px; } #za-rack .za-m-tumbler .zam-sw-opt { flex: 1 1 0; min-width: 0; padding: 4px 2px; font-size: 7px; letter-spacing: .04em; text-align: center; } /* DOCK: zehn runde Pegel-LEDs statt eines gefuellten Balkens. Die Reihenfolge laeuft durch column-reverse sichtbar von unten (gruen) nach oben (rot). */ #za-rack .zam-meter.zam-meter-chain { width: 18px; min-height: 120px; max-height: 160px; flex: 1 1 120px; display: flex; flex-direction: column-reverse; align-items: center; justify-content: space-evenly; padding: 5px 3px; overflow: visible; border: 1px solid rgba(0,0,0,.9); border-radius: 8px; background: #070706; box-shadow: inset 0 1px 4px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.05); } #za-rack .zam-meter-chain .zam-meter-led { width: 8px; height: 8px; flex: 0 0 8px; border: 1px solid rgba(0,0,0,.85); border-radius: 50%; opacity: .24; background: #58b866; box-shadow: inset 0 1px 2px rgba(255,255,255,.18), inset 0 -1px 2px rgba(0,0,0,.8); transition: opacity 45ms linear, box-shadow 45ms linear; } #za-rack .zam-meter-chain .zam-meter-led-amber { background: #d89a35; } #za-rack .zam-meter-chain .zam-meter-led-red { background: #c94a3f; } #za-rack .zam-meter-chain .zam-meter-led.on { opacity: 1; box-shadow: inset 0 1px 2px rgba(255,255,255,.35), 0 0 5px rgba(88,184,102,.85), 0 0 10px rgba(88,184,102,.35); } #za-rack .zam-meter-chain .zam-meter-led-amber.on { box-shadow: inset 0 1px 2px rgba(255,255,255,.35), 0 0 5px rgba(216,154,53,.9), 0 0 10px rgba(216,154,53,.38); } #za-rack .zam-meter-chain .zam-meter-led-red.on { box-shadow: inset 0 1px 2px rgba(255,255,255,.35), 0 0 5px rgba(201,74,63,.95), 0 0 10px rgba(201,74,63,.42); } #za-rack .zam-meter-label { flex: 0 0 auto; } /* STENCILs sechs CURVE-Optionen bleiben ohne den bisherigen 1-px-Ueberlauf vollstaendig innerhalb der 18-HP-Frontplatte. */ #za-rack .za-m-stencil .zam-sw-opt { padding-inline: 6.5px; } /* --- Buchsen aus dem Stencil-Bestand (Ansage Tom, 22.08.2026) --- Quelle: 02_ARBEIT\vcv-rack\vcv\ZA-Werkstatt\res\components\Stencil, Dateien stencil-in1/out1/frame-in-port-emission-*.png, hier auf den sichtbaren Ring zugeschnitten und quadratisch abgelegt. Audio-Buchsen bekommen den goldenen Ring, CV-Buchsen den silbernen. */ #za-rack .zam-jack { width: auto; height: auto; } #za-rack .zam-jack-hole { width: 15px; height: 15px; background-image: url('buchsen/buchse-gold.png'); background-size: contain; background-position: center; background-repeat: no-repeat; background-color: transparent; border: 0; box-shadow: none; border-radius: 50%; filter: brightness(1.05); } #za-rack .zam-jack-cv .zam-jack-hole { background-image: url('buchsen/buchse-silber.png'); } /* Belegte Buchse leuchtet, wie im Stencil-Vorbild */ #za-rack .zam-jack.on .zam-jack-hole { filter: brightness(1.25); } #za-rack .zam-jack:hover .zam-jack-hole { filter: brightness(1.5); } /* Gewaehltes Modul (Klick auf die Frontplatte) - Backspace entfernt es */ #za-rack .zam-module.za-gewaehlt { outline: 1px solid var(--za-accent-soft, rgba(200,166,98,.32)); outline-offset: -1px; box-shadow: inset 0 0 12px var(--za-accent-glow, rgba(200,166,98,.16)); } /* Jedes Modul verteilt seine sichtbaren Gruppen ueber die volle Panelhoehe. Das gilt auch fuer weitere Instanzen wie CAM 2. Dichte Module behalten ihre Mindestabstaende; nur tatsaechlich freier Raum wird verteilt. */ #za-rack .zam-module:not(.zam-module-add) { justify-content: space-between; } #za-rack .zam-module:not(.zam-module-add) > .zam-jacks { margin-top: 0; } /* Bei den nachweislich besonders leeren Panels (zuvor 72 bis 160 px zusammenhaengender Leerraum) wachsen die wenigen Bediengruppen zusaetzlich in den freien Bereich hinein. */ #za-rack :is(.za-m-vault, .za-m-cam, .za-m-forge, .za-m-damper, .za-m-funnel, .za-m-plane, .za-m-clamp, .za-m-rasp) > :is(.zam-knob-row, .zam-switch-row) { flex: 1 1 0; align-content: space-evenly; align-items: center; justify-content: center; } /* BENCH nutzt die freie Hoehe innerhalb seines Bedienpults: BPM, PLAY, CLOCK, MIDI-Quelle und ARM stehen gleichmaessig zwischen Kopf und Kanalanzeige. Die Buchsen bleiben unveraendert am unteren Panelrand. */ #za-rack .za-m-bench > .zam-pult { flex: 1 1 0; justify-content: space-between; } /* Die primaere Anzeige jedes Moduls wird zur Laufzeit an der gemessenen RATCHET-Oberkante ausgerichtet. `translate` bleibt getrennt von den mechanischen `transform`-Zustaenden der Pfeiltaster. */ #za-rack .za-primary-display { translate: 0 var(--za-primary-display-shift, 0px); } /* --- Druckknoepfe im REF-B-Stil (Ansage Tom, 22.08.2026) --- Gilt fuer alle Schalter im Rack: SIN/TRI/SAW, PLUCK/GATE, FWD/REV/ PONG/RND, 1/16-1/8-1/4, LIN/EXP, die Pult-Knoepfe usw. Die Taste behaelt IMMER dieselbe Farbe. Gedrueckt wird nur die Schrift beleuchtet - wie die LED hinter dem Text bei echter Hardware. */ #za-rack .zam-seg-type, #za-rack .zam-1176, #za-rack .zam-btn, #za-rack .zam-seg, #za-rack .zam-oct, #za-rack .zam-step { background-image: url('bauteile/taster.png') !important; background-size: 100% 100% !important; background-repeat: no-repeat !important; background-color: #14110f !important; border: 1px solid rgba(0,0,0,.8) !important; border-radius: 3px; color: #9a6d3a; /* mattes Kupfer, LED aus */ text-shadow: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08), 0 3px 4px rgba(0,0,0,.72); transition: transform .04s linear, color .08s linear, text-shadow .08s linear; } /* gedrueckt: nur die Schrift leuchtet, die Taste bleibt wie sie ist */ #za-rack .zam-seg-type.on, #za-rack .zam-seg-type.zam-seq-on, #za-rack .zam-seg-type.is-active, #za-rack .zam-seg-type[aria-pressed="true"], #za-rack .zam-1176.on, #za-rack .zam-btn.on, #za-rack .zam-seg.on, #za-rack .zam-oct.on, #za-rack .zam-step.on, #za-rack .zam-step.is-active { color: #ffcf7a !important; text-shadow: 0 0 5px rgba(255,170,60,.95), 0 0 12px rgba(255,140,30,.55); } /* beim Ueberfahren nur ein leichtes Anglimmen, kein Farbwechsel */ #za-rack .zam-seg-type:hover, #za-rack .zam-1176:hover, #za-rack .zam-btn:hover, #za-rack .zam-seg:hover, #za-rack .zam-oct:hover { color: #c89055; } /* Beim Druecken faehrt die Taste aus ihrer erhabenen -1-px-Ruhelage klar nach innen. Die spaetere Hardware-Regel setzt dazu Licht und Innenschatten. */ #za-rack .zam-seg-type:active, #za-rack .zam-1176:active, #za-rack .zam-btn:active, #za-rack .zam-seg:active, #za-rack .zam-step:active { transform: translateY(1px); } /* UNDO/REDO: .on bedeutet nur "verfuegbar" und schaltet das Textlicht ein. Mechanisch bleibt der Taster draussen und sinkt nur waehrend des echten Pointer- oder Tastaturdrucks ein. Dasselbe gilt fuer alle Displaypfeile. */ #za-rack .zam-preset-ur.on { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08), 0 3px 4px rgba(0,0,0,.72); } #za-rack .zam-preset-ur:not(:disabled):active, #za-rack .zam-preset-ur.zam-key-active, #za-rack .zam-preset-ur.zam-pointer-active, #za-rack .zam-display-row .zam-step:not(:disabled):active, #za-rack .zam-display-row .zam-step.zam-key-active, #za-rack .zam-display-row .zam-step.zam-pointer-active { transform: translateY(1px); color: #ffcf7a !important; text-shadow: 0 0 5px rgba(255,170,60,.95), 0 0 12px rgba(255,140,30,.55) !important; box-shadow: inset 0 3px 5px rgba(0,0,0,.92), inset 0 -1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(0,0,0,.85); } /* Nachtrag: Die Wahlschalter (FWD/REV/PONG/RND, PLUCK/GATE, 1/16-1/8-1/4, LIN/EXP, SIN/TRI/SAW ...) sind SPANs mit der Klasse .zam-sw-opt und werden im Original gold hinterlegt. Auch hier gilt: Taste bleibt schwarz, nur die Schrift leuchtet. */ #za-rack .zam-sw-opt { background: url('bauteile/taster.png') center/100% 100% no-repeat, #14110f !important; border: 1px solid rgba(0,0,0,.8) !important; border-radius: 3px; color: #9a6d3a !important; text-shadow: none; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.08), 0 3px 4px rgba(0,0,0,.72); transition: transform .04s linear, color .08s linear, text-shadow .08s linear; } #za-rack .zam-sw-opt.on { color: #ffcf7a !important; text-shadow: 0 0 5px rgba(255,170,60,.95), 0 0 12px rgba(255,140,30,.55); } #za-rack .zam-sw-opt:hover { color: #c89055 !important; } #za-rack .zam-switch { background: transparent !important; border: 0 !important; gap: 2px; } /* Dauerhaft offene MORE-Klappe: das Wort MORE faellt weg, der Inhalt steht direkt da (Ansage Tom, SAWDUST). */ #za-rack details.zam-more.za-immer-offen > summary { display: none; } #za-rack details.zam-more.za-immer-offen { margin: 0; } /* --- Rahmen um die Displays (Ansage Tom mit Bildvorlage, 23.08.2026) --- Aufbau wie an der Frontplatte: aussen ein dunkler Ring, dann eine Champagner-Fase mit Glanzkanten, innen das schwarze Feld. Gemacht mit zwei Hintergrundflaechen (padding-box / border-box), deshalb ohne ein einziges Bild. */ #za-rack .zam-display, #za-rack .zam-scope { 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 !important; border: 2px solid transparent !important; border-radius: 4px !important; 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) !important; } #za-rack .zam-display .zam-disp-name, #za-rack .zam-display .zam-disp-num { position: relative; z-index: 1; } /* --- BENCH-Knoepfe wie die LATHE-Schalter (Ansage Tom, 23.08.2026) --- Vorher: PLAY 11 px / Strichstaerke 600, die uebrigen 9 px / 600. LATHE liegt bei 9 px / 400 / Sperrung 0,9 px. Jetzt gleich. */ #za-rack .zam-1176 { font-size: 9px !important; font-weight: 400 !important; letter-spacing: 0.9px !important; color: #9a6d3a !important; text-shadow: none !important; } #za-rack .zam-1176.on { color: #ffcf7a !important; text-shadow: 0 0 5px rgba(255,170,60,.95), 0 0 12px rgba(255,140,30,.55) !important; } #za-rack .zam-1176:hover { color: #c89055 !important; } /* --- BENCH: Transportknopf und echter Takt-Wechselschalter --- */ /* (1) Es steht immer PLAY - matt bei Pause, leuchtend im Lauf */ #za-rack .zam-pult-run { font-size: 0 !important; } #za-rack .zam-pult-run::after { content: "\25B6 PLAY"; font-family: var(--za-font-mono); font-size: 9px; font-weight: 400; letter-spacing: 0.9px; color: inherit; } /* (2) Zwei reale Taster: genau die gewaehlte Quelle bleibt eingedrueckt. */ #za-rack .zam-pult-sync-group { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; width: 100%; } #za-rack .zam-pult-sync-option { min-width: 0; min-height: 26px !important; height: 26px !important; padding: 0 3px !important; white-space: nowrap; } /* --- BPM-Feld bekommt denselben Rahmen wie die Displays (Ansage Tom, 23.08.2026) --- */ #za-rack .zam-pult-bpm { 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 !important; border: 2px solid transparent !important; border-radius: 4px !important; box-shadow: 0 0 0 2px #14110e, inset 0 2px 5px rgba(0,0,0,.95) !important; } #za-rack .zam-pult-bpm input { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #d8b876 !important; } #za-rack .zam-pult-bpm .zam-pult-bpmlab { color: #9a6d3a !important; } /* --- Luft um die gerahmten Displays (Ansage Tom, 23.08.2026) --- Der Ring liegt ausserhalb der Box: 2 px oben, unten, links, rechts. Deshalb mehr Abstand in der Zeile und etwas weniger Polster innen. */ #za-rack .zam-display-row { gap: 8px !important; margin: 2px 0 4px !important; } #za-rack .zam-display { padding: 2px 6px !important; } #za-rack .zam-display-row .zam-step { margin: 0 !important; } #za-rack .zam-pult-bpm { margin: 3px 0 !important; } #za-rack .zam-module { gap: 4px !important; } #za-rack .zam-knob-row { margin-top: 2px !important; } /* --- Kein Lichtwechsel beim Ueberfahren (Ansage Tom, 23.08.2026) --- Die Zustaende :hover und :focus bekommen dieselben Werte wie der Ruhezustand. Was leuchtet, entscheidet allein der Schaltzustand. */ #za-rack .zam-seg-type:hover, #za-rack .zam-1176:hover, #za-rack .zam-btn:hover, #za-rack .zam-seg:hover, #za-rack .zam-oct:hover, #za-rack .zam-step:hover, #za-rack .zam-sw-opt:hover, #za-rack .zam-preset-btn:hover, #za-rack .zam-tr-btn:hover, #za-rack .zam-add-btn:hover, #za-rack .zam-mod-remove:hover { color: #9a6d3a !important; text-shadow: none !important; border-color: rgba(0,0,0,.8) !important; filter: none !important; } #za-rack .zam-seg-type.on:hover, #za-rack .zam-seg-type.zam-seq-on:hover, #za-rack .zam-1176.on:hover, #za-rack .zam-btn.on:hover, #za-rack .zam-seg.on:hover, #za-rack .zam-oct.on:hover, #za-rack .zam-step.on:hover, #za-rack .zam-sw-opt.on:hover { color: #ffcf7a !important; text-shadow: 0 0 5px rgba(255,170,60,.95), 0 0 12px rgba(255,140,30,.55) !important; } /* Hardware-Grundregel: Ein rastender aktiver Taster sitzt innen und nur seine Beschriftungs-LED leuchtet. Momenttaster leuchten und sinken ausschliesslich waehrend des echten Pointer- oder Tastaturdrucks ein. */ #za-rack .zam-1176.on:not(.zam-preset-ur), #za-rack .zam-seg-type.on, #za-rack .zam-seg-type.zam-seq-on, #za-rack .zam-seg-type.is-active, #za-rack .zam-seg-type[aria-pressed="true"], #za-rack .zam-btn.on, #za-rack .zam-seg.on, #za-rack .zam-oct.on, #za-rack .zam-sw-opt.on { transform: translateY(1px); color: #ffcf7a !important; text-shadow: 0 0 5px rgba(255,170,60,.95), 0 0 12px rgba(255,140,30,.55) !important; box-shadow: inset 0 3px 5px rgba(0,0,0,.92), inset 0 -1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(0,0,0,.85) !important; } #za-rack .zam-1176:not(.zam-preset-ur):not(:disabled):active, #za-rack .zam-preset-ur:not(:disabled):active, #za-rack .zam-preset-ur.zam-key-active, #za-rack .zam-preset-ur.zam-pointer-active, #za-rack .zam-step:not(:disabled):active, #za-rack .zam-step.zam-key-active, #za-rack .zam-step.zam-pointer-active, #za-rack .zam-seg-type:not(:disabled):active, #za-rack .zam-seg-type.zam-key-active, #za-rack .zam-seg-type.zam-pointer-active, #za-rack .zam-oct:not(:disabled):active, #za-rack .zam-oct.zam-key-active, #za-rack .zam-oct.zam-pointer-active, #za-rack .zam-btn:not(:disabled):active, #za-rack .zam-seg:not(:disabled):active, #za-rack .zam-sw-opt:active { transform: translateY(1px); color: #ffcf7a !important; text-shadow: 0 0 5px rgba(255,170,60,.95), 0 0 12px rgba(255,140,30,.55) !important; box-shadow: inset 0 3px 5px rgba(0,0,0,.92), inset 0 -1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(0,0,0,.85) !important; } #za-rack .zam-pult-arm:not(.on) { transform: translateY(-1px); color: #9a6d3a !important; text-shadow: none !important; border-color: rgba(0,0,0,.8) !important; } #za-rack .zam-pult-sync-option:focus-visible { outline-color: #6d4e29; } /* Buchsen und Regler ebenfalls ruhig halten */ #za-rack .zam-jack:hover .zam-jack-hole { filter: brightness(1.05) !important; } #za-rack .zam-jack.on:hover .zam-jack-hole { filter: brightness(1.25) !important; } #za-rack .zam-knob:hover { filter: none !important; } /* --- HAMMER: Regler gross und untereinander (Ansage Tom, 23.08.2026) --- Die Modulkennung za-m-hammer setzt za-rack-vcv.js an jedem Modul. Damit laesst sich jeder Modultyp einzeln ansprechen, ohne das Original anzufassen. */ #za-rack .za-m-hammer .zam-knob-row, #za-rack .za-m-hammer .zam-knob-row-small { flex-direction: column !important; align-items: center !important; gap: 4px !important; width: 100% !important; } #za-rack .za-m-hammer .zam-knob-unit { /* Beschriftung oben, Regler mittig darunter */ flex-direction: column-reverse !important; align-items: center !important; justify-content: center !important; gap: 2px !important; width: 100%; } #za-rack .za-m-hammer .zam-knob { width: 34px !important; height: 34px !important; } #za-rack .za-m-hammer .zam-knob-dot::after { top: 4px !important; height: 10px !important; width: 2px !important; margin-left: -1px !important; } #za-rack .za-m-hammer .zam-knob-label { font-size: 8px !important; text-align: center; width: 100%; } /* --- LADDER: LED ueber jedem Regler (Ansage Tom, 23.08.2026) --- Das Original blendet abgeschaltete Stufen auf 22 % Deckkraft ab. Hier bleibt alles voll sichtbar; ob eine Stufe laeuft, zeigt ausschliesslich die kleine Lampe ueber dem Regler. */ #za-rack .za-m-ladder .zam-seg-col, #za-rack .za-m-ladder .zam-seg-col.zam-seg-off { opacity: 1 !important; } #za-rack .za-m-ladder .zam-knob-unit { position: relative; display: flex !important; flex-direction: column !important; align-items: center !important; padding-top: 9px; } #za-rack .za-m-ladder .zam-knob-unit::before { content: ""; position: absolute; top: 0; left: 50%; margin-left: -3px; width: 6px; height: 6px; border-radius: 50%; background: #241a0d; box-shadow: inset 0 1px 2px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6); transition: background .1s linear, box-shadow .1s linear; } /* Stufe laeuft: Lampe an */ #za-rack .za-m-ladder .zam-seg-col:not(.zam-seg-off) .zam-knob-unit::before { background: #ffc266; box-shadow: 0 0 4px rgba(255,170,60,.95), 0 0 9px rgba(255,140,30,.6), inset 0 0 2px rgba(255,255,255,.5); } /* --- POWER am Rack + gemeinsame ZACommon-Startsequenz (26.08.2026) --- */ #za-rack .zam-power { box-sizing: border-box; position: relative; z-index: 7; flex: 0 0 52px; width: 52px; height: 34px; display: grid; grid-template-rows: 8px 1fr; gap: 2px; align-items: center; padding: 3px 5px 4px; color: #79552e; background: linear-gradient(#080706, #14110e) padding-box, linear-gradient(180deg, #4c4b47 0%, #0a0908 42%, #383632 100%) border-box; border: 2px solid transparent; border-radius: 4px; box-shadow: 0 0 0 2px #14110e, inset 0 1px 2px rgba(255,255,255,.12), inset 0 -2px 4px rgba(0,0,0,.95); cursor: pointer; } #za-rack .zam-power-label { font: 600 6px/1 var(--za-font-mono); letter-spacing: .16em; text-align: center; } #za-rack .zam-power-rocker { position: relative; min-height: 16px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #020202; border-radius: 2px; background: linear-gradient(180deg, #24211d, #090807 70%); box-shadow: inset 0 2px 4px rgba(0,0,0,.95), 0 1px 0 rgba(255,255,255,.11); } #za-rack .zam-power-rocker::after { content: ""; position: absolute; inset: 1px 50% 1px 1px; border-radius: 1px; background: linear-gradient(180deg, #34302a, #12100e 58%, #050505); box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 1px 0 2px rgba(0,0,0,.8); transition: transform .09s linear; } #za-rack .zam-power-rocker i { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; font: 600 7px/1 var(--za-font-mono); font-style: normal; color: #75512a; text-shadow: none; } #za-rack .zam-power.on .zam-power-rocker::after { transform: translateX(100%); } #za-rack .zam-power:not(.on) .zam-power-rocker i:first-child, #za-rack .zam-power.on .zam-power-rocker i:last-child { color: #ffcf7a; text-shadow: 0 0 4px rgba(255,170,60,.95), 0 0 9px rgba(255,140,30,.55); } #za-rack .zam-power.on .zam-power-label { color: #ffcf7a; text-shadow: 0 0 5px rgba(255,170,60,.8); } #za-rack .zam-power:disabled { opacity: 1; cursor: wait; } /* LEARN-Laufschrift: Nur ueberbreite Erklaerungen werden per JS bewegt. 14 mm/s entsprechen der bestaetigten Panelgeschwindigkeit; die Endlagen bleiben in jedem Zyklus lesbar stehen. */ #za-rack .zam-learn-row { width: 300px; flex: 0 1 300px; } #za-rack .zam-learn-display .zam-disp-num { flex: 0 0 auto; } #za-rack .zam-learn-marquee { flex: 1 1 auto; min-width: 0; overflow: hidden; } #za-rack .zam-learn-marquee .zam-disp-name { display: inline-block; max-width: none; overflow: visible; text-overflow: clip; vertical-align: top; will-change: transform; } #za-rack .zam-learn-marquee .zam-disp-name.zam-learn-marquee-running { animation: zam-learn-display-marquee var(--zam-learn-marquee-duration) linear infinite; } @keyframes zam-learn-display-marquee { 0%, 15% { transform: translateX(0); } 50%, 100% { transform: translateX(var(--zam-learn-marquee-distance)); } } @media (prefers-reduced-motion: reduce) { #za-rack .zam-learn-marquee .zam-disp-name { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; transform: none !important; animation: none !important; } } /* Das kanonische horizontale Website-Logo ist vom 3-s-Lichtlauf entkoppelt: Es erscheint sofort vollstaendig und liegt exakt 5 s ueber dem unveraenderten Displayinhalt. Auch nach einem Rack-Rebuild greift die Klasse fuer neue Displays automatisch. */ #za-rack .zam-case .zam-display { position: relative; isolation: isolate; } #za-rack.zam-audio-logo .zam-case .zam-display:not(.zam-learn-display) > * { visibility: hidden !important; } #za-rack.zam-audio-logo .zam-case .zam-display:not(.zam-learn-display)::after { content: ""; position: absolute; inset: 2px 4px; z-index: 20; visibility: visible; background: #000 url('../logo.svg') center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(200,166,98,.42)); opacity: 1; pointer-events: none; } /* Beim Regler-Hover zeigt immer das obere Patchdisplay Modul, Regler und normierten Wert. Moduldisplays behalten ihren eigenen Inhalt. Touch behaelt die Auswahl bis zum naechsten Regler oder Tipp ausserhalb. */ #za-rack .zam-display .zam-param-readout { display: none; position: absolute; inset: 2px 4px; z-index: 15; min-width: 0; align-items: center; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; background: #000; pointer-events: none; } #za-rack:not(.zam-audio-logo) .zam-display.zam-param-readout-active > :not(.zam-param-readout) { visibility: hidden !important; } #za-rack:not(.zam-audio-logo) .zam-display.zam-param-readout-active .zam-param-readout { display: grid; } #za-rack .zam-param-readout-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d8b876; font: 400 7px/1.1 var(--za-font-mono); letter-spacing: .04em; } #za-rack .zam-param-readout-value { color: #ffcf7a; font: 400 10px/1 var(--za-font-mono); text-shadow: 0 0 4px rgba(255,170,60,.45); } /* Nur die Lichtquellen werden temporaer von dunkel nach hell und wieder dunkel gefahren. Knoepfe behalten Bild, Rahmen, Lage und Schaltzustand. */ #za-rack .zam-boot-wave { --za-boot-alpha: 0; } #za-rack.zam-audio-booting .zam-case button.zam-boot-wave, #za-rack.zam-audio-booting .zam-case .zam-sw-opt.zam-boot-wave { color: rgb( calc(58 + var(--za-boot-alpha) * 197) calc(40 + var(--za-boot-alpha) * 167) calc(23 + var(--za-boot-alpha) * 99) ) !important; text-shadow: 0 0 calc(var(--za-boot-alpha) * 5px) rgb(255 170 60 / var(--za-boot-alpha)), 0 0 calc(var(--za-boot-alpha) * 12px) rgb(255 140 30 / calc(var(--za-boot-alpha) * .7)) !important; } #za-rack .zam-led.zam-boot-wave, #za-rack .zam-tr-beat.zam-boot-wave { background: rgb( calc(36 + var(--za-boot-alpha) * 219) calc(26 + var(--za-boot-alpha) * 168) calc(13 + var(--za-boot-alpha) * 89) ) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.95), 0 0 calc(var(--za-boot-alpha) * 5px) rgb(255 170 60 / var(--za-boot-alpha)), 0 0 calc(var(--za-boot-alpha) * 10px) rgb(255 140 30 / calc(var(--za-boot-alpha) * .65)) !important; opacity: 1 !important; } #za-rack .za-m-ladder .zam-knob-unit.zam-boot-wave::before { background: rgb( calc(36 + var(--za-boot-alpha) * 219) calc(26 + var(--za-boot-alpha) * 168) calc(13 + var(--za-boot-alpha) * 89) ) !important; box-shadow: inset 0 1px 2px rgba(0,0,0,.95), 0 0 calc(var(--za-boot-alpha) * 5px) rgb(255 170 60 / var(--za-boot-alpha)), 0 0 calc(var(--za-boot-alpha) * 10px) rgb(255 140 30 / calc(var(--za-boot-alpha) * .65)) !important; } /* --- Vier eigenstaendige Workshop-Module (26.08.2026) ----------------- Nur modulspezifische Masse: die globale 38-px-Displayvorgabe bleibt fuer alle bestehenden Module unveraendert. Canvas zeigt ausschliesslich echte geladene Audiodaten, Worklet-Meterdaten oder den gewaehlten SUB-Datensatz. */ #za-rack .zam-module.zam-module-workshop { gap: 3px !important; padding-inline: 4px; justify-content: flex-start; } #za-rack .zam-module.zam-module-workshop > .zam-jacks { margin-top: auto; } #za-rack .zam-module-workshop .zam-workshop-display-row, #za-rack .zam-module-duck .zam-workshop-display-row { width: 100%; max-width: none; margin: 1px 0 !important; } #za-rack .zam-module-veneer .zam-workshop-display-row { height: 62px; } #za-rack .zam-module-sub .zam-workshop-display-row { height: 62px; } #za-rack .zam-module-noise .zam-workshop-display-row { height: 62px; } #za-rack .zam-module-filter2 .zam-workshop-display-row { height: 62px; } #za-rack .zam-module-duck .zam-workshop-display-row { height: 62px; min-height: 62px; flex: 0 0 62px; } #za-rack .zam-module-workshop .zam-workshop-display, #za-rack .zam-module-duck .zam-workshop-display { position: relative; width: 100%; height: 100%; min-height: 0; padding: 0 !important; overflow: hidden; } #za-rack .zam-module-duck .zam-workshop-display { padding: 2px 17px 2px 6px !important; } #za-rack .zam-module-duck .zam-workshop-display-row .zam-step { align-self: center; height: 38px; min-height: 38px; } #za-rack .za-m-pump { gap: 3px !important; } #za-rack .za-m-pump > .zam-switch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, auto); gap: 2px 4px; width: 100%; flex: 0 0 auto; } #za-rack .za-m-pump > .zam-switch-grid .zam-switch-row { min-width: 0; gap: 1px; } #za-rack .za-m-pump > .zam-switch-grid .zam-switch { width: 100%; min-width: 0; } #za-rack .za-m-pump > .zam-switch-grid .zam-sw-opt { flex: 1 1 0; min-width: 0; padding: 3px 1px; font-size: 7px; letter-spacing: .02em; text-align: center; } #za-rack .zam-workshop-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; } #za-rack .zam-workshop-status { position: absolute; z-index: 2; left: 4px; right: 3px; bottom: 3px; overflow: hidden; color: #d8b876; font: 400 6px/1.15 var(--za-font-mono); letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px #000; pointer-events: none; } #za-rack .zam-workshop-status.is-error { color: #e58b72; } #za-rack .zam-workshop-display.is-drop { outline: 1px solid #ffcf7a; outline-offset: -4px; } #za-rack .zam-workshop-load { display: flex; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 17px; } #za-rack .zam-workshop-load .zam-select, #za-rack .zam-workshop-load .zam-seg-type { min-width: 0; height: 17px; min-height: 17px; padding: 0 5px; font-size: 7px; } #za-rack .zam-workshop-file { flex: 1 1 auto; } #za-rack .zam-workshop-frame { flex: 0 0 58px; } #za-rack .zam-workshop-enums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 2px 3px; width: 100%; } #za-rack .zam-workshop-enum { display: flex; min-width: 0; flex-direction: column; gap: 1px; } #za-rack .zam-workshop-enum-wide { grid-column: span 2; } #za-rack .zam-workshop-enum .zam-ctl-label { overflow: hidden; font-size: 6px; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; } #za-rack .zam-workshop-select { width: 100%; min-width: 0; height: 17px; min-height: 17px; padding: 0 2px; font-size: 7px; text-overflow: ellipsis; } #za-rack .zam-module-sub .zam-workshop-enums { grid-template-columns: minmax(0, 1fr); } #za-rack .zam-module-sub .zam-workshop-enum-wide, #za-rack .zam-module-noise .zam-workshop-enum-wide, #za-rack .zam-module-filter2 .zam-workshop-enum-wide { grid-column: auto; } #za-rack .zam-module-noise .zam-workshop-enums, #za-rack .zam-module-filter2 .zam-workshop-enums { grid-template-columns: repeat(2, minmax(0, 1fr)); } #za-rack .zam-module-workshop .zam-knob-row-small { display: grid !important; width: 100%; gap: 2px 3px !important; margin: 0 !important; justify-items: center; } #za-rack .zam-module-veneer .zam-knob-row-small { grid-template-columns: repeat(8, minmax(0, 1fr)); } #za-rack .zam-module-sub .zam-knob-row-small { grid-template-columns: repeat(2, minmax(0, 1fr)); } #za-rack .zam-module-noise .zam-knob-row-small, #za-rack .zam-module-filter2 .zam-knob-row-small { grid-template-columns: repeat(4, minmax(0, 1fr)); } #za-rack .zam-module-workshop .zam-knob-unit { min-width: 0; gap: 1px; } #za-rack .zam-module-workshop .zam-knob { width: 23px; height: 23px; } #za-rack .zam-module-workshop .zam-knob-dot::after { top: 3px; height: 6px; } #za-rack .zam-module-workshop .zam-knob-label { max-width: 100%; overflow: hidden; font-size: 6px; letter-spacing: 0; line-height: 1.05; text-align: center; text-overflow: ellipsis; white-space: nowrap; } #za-rack .zam-module-workshop .zam-switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; width: 100%; } #za-rack .zam-module-workshop .zam-switch-row { min-width: 0; gap: 1px; } #za-rack .zam-module-workshop .zam-switch-label { font-size: 6px; } #za-rack .zam-module-workshop .zam-sw-opt { padding: 3px 5px; font-size: 7px; } #za-rack .zam-module-filter2 .zam-workshop-na { opacity: .58; } #za-rack .zam-module-filter2 .zam-jackrow { column-gap: 1px; } /* --- Ruhigeres Tastenlicht + groessere Bedienbeschriftungen (29.08.2026) --- Aktive Taster verwenden dieselbe Goldhelligkeit wie die Displays und keinen Lichtschein. Lage und mechanische Schatten der Taster bleiben unveraendert. Die Startwelle behaelt waehrend .zam-audio-booting ihre eigene Lichtkurve. */ #za-rack:not(.zam-audio-booting) :is( .zam-seg-type.on, .zam-seg-type.zam-seq-on, .zam-seg-type.is-active, .zam-seg-type[aria-pressed="true"], .zam-1176.on, .zam-btn.on, .zam-seg.on, .zam-oct.on, .zam-step.on, .zam-step.is-active, .zam-sw-opt.on, .zam-preset-btn.on, .zam-tr-btn.on, .zam-preset-cab.on ), #za-rack:not(.zam-audio-booting) :is( .zam-1176:not(:disabled):active, .zam-1176.zam-key-active, .zam-1176.zam-pointer-active, .zam-step:not(:disabled):active, .zam-step.zam-key-active, .zam-step.zam-pointer-active, .zam-seg-type:not(:disabled):active, .zam-seg-type.zam-key-active, .zam-seg-type.zam-pointer-active, .zam-oct:not(:disabled):active, .zam-oct.zam-key-active, .zam-oct.zam-pointer-active, .zam-btn:not(:disabled):active, .zam-btn.zam-key-active, .zam-btn.zam-pointer-active, .zam-seg:not(:disabled):active, .zam-seg.zam-key-active, .zam-seg.zam-pointer-active, .zam-preset-btn:not(:disabled):active, .zam-tr-btn:not(:disabled):active, .zam-sw-opt:active ) { color: var(--za-accent-bright, #d8b876) !important; text-shadow: none !important; } #za-rack .zam-power:not(.on) .zam-power-rocker i:first-child, #za-rack .zam-power.on .zam-power-rocker i:last-child, #za-rack .zam-power.on .zam-power-label { color: var(--za-accent-bright, #d8b876); text-shadow: none; } /* Alle kleinen Beschriftungen an Reglern, Schaltern und Buchsen wachsen auf die naechste gut lesbare Stufe. MORE-Inhalte verwenden dieselben Regeln. */ #za-rack .zam-knob-label, #za-rack .zam-ctl-label { font-size: 8px !important; } #za-rack .zam-switch-label, #za-rack .zam-jacks-tag, #za-rack .zam-more > summary { font-size: 9px !important; } #za-rack .zam-jack-label, #za-rack .zam-jack-lab, #za-rack .zam-seq-note, #za-rack .zam-power-label { font-size: 7px !important; } #za-rack .zam-pult-bpmlab { font-size: 9px !important; } #za-rack .zam-seg-type, #za-rack .za-m-tumbler .zam-sw-opt, #za-rack .zam-module-workshop .zam-sw-opt, #za-rack .zam-workshop-load :is(.zam-select, .zam-seg-type), #za-rack .zam-workshop-select, #za-rack .zam-power-rocker i { font-size: 8px !important; } /* Die groesseren Labels brauchen in vier dichten Modulen bei geoeffnetem MORE die vorhandenen Zwischenraeume. Bedienelemente und Panelhoehe bleiben gleich; nur die vertikale Verteilung wird fuer den offenen Zustand enger. */ #za-rack .za-m-mitre:has(> details.zam-more[open]) { gap: 2px !important; } #za-rack .za-m-bellows:has(> details.zam-more[open]), #za-rack .za-m-tumbler:has(> details.zam-more[open]), #za-rack .za-m-stencil:has(> details.zam-more[open]) { gap: 0 !important; } #za-rack .za-m-bellows:has(> details.zam-more[open]) .zam-knob-row { margin-top: 0 !important; } #za-rack :is(.za-m-bellows, .za-m-tumbler) > details.zam-more[open] > summary { padding-block: 2px; } #za-rack .za-m-tumbler > details.zam-more[open] > .zam-knob-row { margin-top: 0 !important; } /* ====================================================================== Foto-Regler mit LED-Ring, 02.09.2026, Auftrag Tom ("ersetze alle regler durch diesen und das led aussen rum zeigt die stellung des reglers an") Zwei Ebenen aus dem Foto regler-led-ring-roh.png, erzeugt mit 01_INPUT\designs\2026-09-02_regler-led-ring\werkzeug\regler_ebenen.py: bauteile/regler-aus.png Kappe, Kontaktschatten und der Lichtleiter im ausgeschalteten Zustand (dunkle Bronze) bauteile/regler-an.png dieselben Fotopunkte, aber leuchtend; wird per Kegelmaske nur bis zur Reglerstellung sichtbar gemacht Warum die Box die Kappe ist: die Kastenmasse der Regler (26/32/23/20/ 17/34 px) legen ueberall das Rasterband fest. Wuerde die Box den ganzen Leuchtring umfassen, muesste jedes dieser Masse geaendert werden und das Modulraster kippt. Darum bleibt .zam-knob genau so gross wie die schwarze Kappe im Foto (300 von 512 Punkten der Ebene) und beide Ebenen ragen mit inset -35,333 % darueber hinaus. Der Ring liegt damit ausserhalb der Box; er faengt keine Mausereignisse ab (pointer-events: none) und schiebt nichts weg. Gemessen im Foto (Mitte 518,60/534,30): Kappe aussen r = 369 Lichtleiter r = 378 bis 476 Lichthof bis r = 488 Bogen 211,0 Grad im Uhrzeigersinn ueber 12 Uhr bis 148,5 Grad, Weite 297,5 Grad (Luecke unten 62,5 Grad). za-modular.js setzt --rot auf (-135 + wert*270) Grad. Der Bogen ist breiter als diese 270 Grad, daher der Faktor 297,5/270 = 1,10185. ====================================================================== */ @property --bogen { syntax: ''; inherits: false; initial-value: 0deg; } /* Die alte CSS-Zeichnung faellt weg: kein Verlauf, kein Rahmen, kein Schlagschatten. Die Box bleibt an ihrem Platz und behaelt ihre Groesse. */ #za-rack .zam-knob { background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible; } /* AUS-Ebene: liegt immer da, zeigt Kappe und unbeleuchteten Lichtleiter. */ #za-rack .zam-knob::before { content: ""; position: absolute; inset: -35.333%; background: url('bauteile/regler-aus.png') center / 100% 100% no-repeat; border: 0; border-radius: 0; pointer-events: none; } /* AN-Ebene: dieselbe Lage, aber nur bis zur aktuellen Stellung sichtbar. Die Kegelmaske beginnt am Bogenanfang und oeffnet sich im Uhrzeigersinn um --bogen. Die 2 Grad hinter der Kante machen den Uebergang weich. */ #za-rack .zam-knob-dot { position: absolute; inset: -35.333%; background: url('bauteile/regler-an.png') center / 100% 100% no-repeat; transform: none; pointer-events: none; --bogen: calc((var(--rot, 0deg) + 135deg) * 1.10185); -webkit-mask: conic-gradient(from 211deg, #000 0deg, #000 var(--bogen), transparent calc(var(--bogen) + 2deg)); mask: conic-gradient(from 211deg, #000 0deg, #000 var(--bogen), transparent calc(var(--bogen) + 2deg)); transition: --bogen 60ms linear; } /* Der alte Zeigerstrich verschwindet. Die bisherigen ::after-Regeln (Zeilen 33, 35, 95, 732, 1171) bleiben stehen, wirken aber nicht mehr. */ #za-rack .zam-knob-dot::after { display: none; } /* Maus und Tastatur: kein Rahmen, kein Schein um die Box. Stattdessen wird das Licht selbst etwas heller. */ #za-rack .zam-knob:hover .zam-knob-dot, #za-rack .zam-knob:focus-visible .zam-knob-dot { filter: brightness(1.15); } #za-rack .zam-knob:focus-visible { outline: none; box-shadow: none !important; } /* Ende Foto-Regler mit LED-Ring */ /* ====================================================================== Platznutzung, 02.09.2026, Auftrag Tom ("der platz ist bei vielen modulen generell sehr schlecht genutzt. schau dass du freie flaechen auf den modulen besser nutzt. vllt auch alles etwas uebersichtlicher gestaltest") Dieser Abschnitt ersetzt die beiden Abschnitte "LADDER-Verkleinerung" und "Ring-Abstaende" vom selben Tag. Ihre Masse stehen weiter unten als Sonderfaelle derselben Regel. Der Foto-Regler darueber bleibt unveraendert: Kappe = Box, Ring 0,145 x Kappe daraus hervor. Grundgedanke: eine einzige Masszahl je Reglergruppe, --za-kappe. Alle Abstaende werden daraus gerechnet, damit der Lichtring immer mindestens 2 px Luft behaelt, egal wie gross die Kappe ist: Ring ragt Kappe x 0,145 ueber die Box hinaus senkrecht Kappe x 0,145 + 2,5 px Regler zu eigener Schrift waagrecht Kappe x 0,29 + 3 px Ring zu Nachbarring Wird eine Kappe geaendert, wandern die Abstaende automatisch mit. ====================================================================== */ #za-rack .zam-module { --za-kappe: 26px; } #za-rack .zam-module .zam-knob-row .zam-knob { width: var(--za-kappe) !important; height: var(--za-kappe) !important; } #za-rack .zam-module .zam-knob-row .zam-knob-unit { gap: calc(var(--za-kappe) * 0.145 + 2.5px) !important; } #za-rack .zam-module .zam-knob-row { column-gap: calc(var(--za-kappe) * 0.29 + 3px) !important; row-gap: calc(var(--za-kappe) * 0.145 + 3px) !important; } /* --- Reihen fuellen die freie Hoehe ----------------------------------- Bisher blieb der uebrige Platz als ein zusammenhaengender leerer Streifen stehen (bei FILTER 68 px, bei NOISE 48 px direkt ueber der Buchsenreihe). Jetzt wachsen die Reglerreihen in diesen Platz hinein und verteilen ihn gleichmaessig um die Regler herum. flex-grow statt flex: 1 1 0 - so kann keine Reihe unter ihre Inhaltshoehe gedrueckt werden und dichte Module bleiben unveraendert. */ #za-rack .zam-module:not(.zam-module-add) > .zam-knob-row { flex-grow: 1; align-content: space-evenly; align-items: center; } /* Werkstattmodule hielten ihre Gruppen oben zusammen und schoben die Buchsen mit margin-top: auto nach unten - daher der leere Streifen. Jetzt liegen die Gruppen gleichmaessig zwischen Kopf und Buchsen. */ #za-rack .zam-module.zam-module-workshop { justify-content: space-between; } #za-rack .zam-module.zam-module-workshop > .zam-jacks { margin-top: 0 !important; } /* --- Standardmodule: obere Reihe gross, untere Reihe mittel ----------- Bisher 32 px und 26 px. Die freie Hoehe traegt in fast allen Modulen eine Stufe mehr; die Ringluft rechnet sich oben automatisch mit. */ #za-rack .zam-module > .zam-knob-row:not(.zam-knob-row-small) { --za-kappe: 36px; } #za-rack .zam-module > .zam-knob-row.zam-knob-row-small { --za-kappe: 30px; } /* MIXER 8: acht Kanalregler brachen bisher als 7 + 1 um - eine Reihe mit sieben Reglern und ein einzelner Regler darunter. Als Raster mit vier Spalten stehen sie als 4 + 4 untereinander. */ #za-rack .za-m-mixer > .zam-knob-row.zam-knob-row-small { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; /* Volle Breite: das Modul zentriert seine Zeilen (align-items: center), sonst waere das Raster nur so breit wie sein Inhalt - vier Spalten zu 30 px, Mittenabstand 34 px, Ring 38,7 px, also 4,7 px Ueberschneidung. Mit 100 % sind es 62,5 und 66,5 px. */ width: 100%; } /* --- Werkstattmodule: Kappe nach Spaltenbreite ----------------------- Die vier Module haben ein festes Spaltenraster. Die groesste Kappe ist die, deren Ring noch 2 px Luft zum Nachbarn laesst - begrenzt durch die Hoehe, die im Modul tatsaechlich frei ist: VENEER 18 HP, 8 Spalten -> 29,3 px Raster -> 20 px (randvoll) SUB 8 HP, 2 Spalten -> 58,0 px Raster -> 22 px (Hoehe begrenzt) NOISE 12 HP, 4 Spalten -> 44,0 px Raster -> 28 px Kappe FILTER 18 HP, 4 Spalten -> 66,5 px Raster -> 34 px (Hoehe begrenzt) */ #za-rack .zam-module-workshop.za-m-veneer > .zam-knob-row.zam-knob-row-small { --za-kappe: 20px; } #za-rack .zam-module-workshop.za-m-sub > .zam-knob-row.zam-knob-row-small { --za-kappe: 22px; } #za-rack .zam-module-workshop.za-m-noise > .zam-knob-row.zam-knob-row-small { --za-kappe: 28px; } #za-rack .zam-module-workshop.za-m-filter > .zam-knob-row.zam-knob-row-small { --za-kappe: 34px; } /* VENEER hat acht schmale Spalten: dort bleibt die Schrift bei 8 px, sonst wird jede zweite Beschriftung abgeschnitten. */ #za-rack .za-m-veneer .zam-knob-label { font-size: 8px !important; } /* --- HAMMER: P1 bis P4 untereinander, Beschriftung oben -------------- Vier Regler in einer Spalte. Weil die Beschriftung hier UEBER dem Regler steht, braucht der Ring seine 2 px nach oben statt nach unten; damit sind 30 px das Maximum. Die im Auftrag genannten 36 px liefen 44 px ueber (gemessen), 32 px noch 24 px. */ #za-rack .za-m-hammer > .zam-knob-row.zam-knob-row-small { --za-kappe: 30px; } #za-rack .za-m-hammer { gap: 3px !important; } /* --- Sequencer (RATCHET): Raster bleibt, nur die beiden freien Regler ueber dem Raster. 26 px liefen 9 px ueber, 22 px noch 1 px. */ #za-rack .za-m-ratchet > .zam-knob-row.zam-knob-row-small { --za-kappe: 20px; } #za-rack .za-m-ratchet > .zam-jacks { padding-top: 2px !important; } #za-rack .zam-seq-grid .zam-knob-label { font-size: 7px !important; } /* --- LADDER: sechs Spalten je Reihe -------------------------------- Spaltenbreite folgt der Kappe. 23 px Kappe = 29,7 px Ring, Raster 25 + 9 = 34 px, also 4,3 px Luft. Sechs Spalten brauchen damit 6 x 25 + 5 x 9 = 195 px und passen in die 202 px des Moduls. */ #za-rack .za-m-ladder .zam-seg-col { --za-kappe: 23px; } #za-rack .za-m-ladder .zam-seg-col .zam-knob { width: var(--za-kappe) !important; height: var(--za-kappe) !important; } #za-rack .za-m-ladder .zam-seg-col .zam-knob-unit { gap: calc(var(--za-kappe) * 0.145 + 2.5px) !important; } #za-rack .za-m-ladder .zam-seg-grid { gap: 9px !important; } /* --- Dichte Module: nichts vergroessern, sondern Luft sparen --------- BELLOWS, MITRE, PUMP, STENCIL und TUMBLER sind bei geoeffnetem MORE schon voll (gemessen 6 bis 48 px Ueberlauf). Dort bleiben die Kappen auf ihrem bisherigen Mass und die Beschriftung auf 8 px; gewonnen wird nur an Trennlinie, Herkunftszeile und Buchsenabstand. */ #za-rack :is(.za-m-bellows, .za-m-mitre, .za-m-pump, .za-m-stencil) > .zam-knob-row:not(.zam-knob-row-small) { --za-kappe: 32px; } #za-rack :is(.za-m-mitre, .za-m-pump, .za-m-stencil) > .zam-knob-row.zam-knob-row-small { --za-kappe: 26px; } #za-rack .za-m-bellows > .zam-knob-row.zam-knob-row-small { --za-kappe: 20px; } #za-rack .za-m-tumbler > .zam-knob-row.zam-knob-row-small { --za-kappe: 20px; } /* TUMBLER: Hauptreihe und MORE-Reihe stehen weiter unten (Nachbesserung 4), weil dort die Anzeige mit hineinspielt. */ #za-rack :is(.za-m-bellows, .za-m-mitre, .za-m-pump, .za-m-stencil, .za-m-tumbler) :is(.zam-knob-label, .zam-ctl-label) { font-size: 8px !important; } #za-rack :is(.za-m-bellows, .za-m-mitre, .za-m-pump, .za-m-stencil, .za-m-tumbler) :is(.zam-switch-label, .zam-jacks-tag, .zam-more > summary) { font-size: 9px !important; } #za-rack :is(.za-m-bellows, .za-m-mitre, .za-m-pump, .za-m-stencil, .za-m-tumbler) > details.zam-more > summary { padding-block: 1px !important; } #za-rack :is(.za-m-bellows, .za-m-mitre, .za-m-pump, .za-m-stencil, .za-m-tumbler) > .zam-origin { margin: 0 !important; } #za-rack :is(.za-m-bellows, .za-m-mitre, .za-m-pump, .za-m-stencil, .za-m-tumbler) > .zam-jacks { padding-top: 2px !important; } /* --- Beschriftung eine Stufe groesser ------------------------------- Der Kapitaelchen-Look (Schmalschrift, gesperrt, Grossbuchstaben) bleibt; nur der Schriftgrad waechst: Reglerbeschriftung 8 -> 9 px, Gruppenbeschriftung (IN/OUT, MORE, Schalter) 9 -> 10 px. Die Beschriftung AN DEN BUCHSEN bleibt bei 7 px. Gemessen: mit 8 px wird die Buchsenzeile so breit, dass za-rack-vcv.js die schmalen Module um 2 HP verbreitert (CLAMP, PLANE, FUNNEL 6 -> 8 HP). Die Modulbreite darf sich durch eine Schriftgroesse nicht aendern. */ #za-rack .zam-knob-label, #za-rack .zam-ctl-label { font-size: 9px !important; } #za-rack .zam-switch-label, #za-rack .zam-jacks-tag, #za-rack .zam-more > summary { font-size: 10px !important; } /* Die MORE-Trennlinie ist zugleich die Gruppentrennung: etwas mehr Luft darueber und darunter, damit die Gruppen auseinanderfallen. */ #za-rack .zam-module:not(.zam-module-add) > details.zam-more > summary { padding-block: 4px; } /* --- Nachbesserung nach dem ersten Messlauf -------------------------- */ /* ANVIL: sechs Regler in einer Zeile bei 16 HP. Mit 30 px Kappe brach die Zeile um (+65 px, 58 px Ueberlauf). Mit 26 px bleibt sie ganz: 6 x 26 + 5 x 10,5 = 209 px in 232 px Innenbreite. */ #za-rack .za-m-anvil > .zam-knob-row.zam-knob-row-small { --za-kappe: 26px; } /* BELLOWS: die MORE-Regler standen ueber .zam-module-lfo auf 20 px. Ohne diese Zeile springen sie auf das Standardmass und blaehen das ohnehin volle Modul weiter auf. */ #za-rack .za-m-bellows details.zam-more > .zam-knob-row { --za-kappe: 20px; } /* DOCK: Reglerzeile und Pegelkette teilen sich sonst die freie Hoehe, die Kette (das Hauptbild des Moduls) wurde dabei 9 px kuerzer. Der einzelne Regler bekommt deshalb keinen Zuwachs. */ #za-rack .za-m-dock > .zam-knob-row { flex-grow: 0; } /* Werkstattmodule: die Wellenanzeige darf nicht zusammengedrueckt werden, wenn darunter etwas waechst - genau das war vorher der Fall (VENEER 62 -> 51 px schon im Ausgangsstand, dann 30 px). */ #za-rack :is(.zam-module-workshop, .zam-module-duck) > .zam-workshop-display-row { flex-shrink: 0; } /* --- Nachbesserung 2: die Modulbreite darf sich nicht aendern -------- Gemessen: die Lichtring-Ebene ist 1,7067 x so breit wie die Kappe (300 von 512 Bildpunkten), auch wenn davon nur 1,29 x sichtbar ist. Ragt diese Ebene seitlich aus dem Modul, verbreitert za-rack-vcv.js das Modul in Zweierschritten. Deshalb zwei Gegenmassnahmen: 1. In den Rasterreihen macht der abgeleitete Spaltenabstand die Spalten schmal. Das Raster selbst haelt die Ringe schon weit genug auseinander, also reicht dort ein fester kleiner Abstand - und die Spalten werden breit genug fuer eine groessere Kappe. */ #za-rack :is(.zam-module-workshop, .za-m-mixer) > .zam-knob-row.zam-knob-row-small { column-gap: 4px !important; } /* (Deshalb steht NOISE oben auf 28 px und nicht auf 30 px: die Ebene misst dort 28 x 1,7067 = 47,8 px und passt damit noch in Spalte plus Randabstand. Mit 30 px wurde das Modul 2 HP breiter.) */ /* 2. Schmale Module (6 HP) mit zwei Reglern nebeneinander: dort ist bei 26 px Schluss. CLAMP, PLANE und FUNNEL wurden mit 30 px 2 HP breiter. LEVER hat je Zeile nur einen Regler und bleibt deshalb bei 30 px. */ #za-rack .zam-narrow > .zam-knob-row.zam-knob-row-small { --za-kappe: 26px; } #za-rack .za-m-lever > .zam-knob-row.zam-knob-row-small { --za-kappe: 30px; } /* PUMP lief schon vor dieser Aenderung 48 px ueber, sobald MORE offen ist. Zwischenraeume auf 2 px, MORE-Regler kleiner. */ #za-rack .za-m-pump { gap: 2px !important; } #za-rack .za-m-pump details.zam-more > .zam-knob-row { --za-kappe: 22px; } #za-rack :is(.za-m-bellows, .za-m-stencil) > .zam-jacks { padding-top: 0 !important; } /* --- Nachbesserung 3: Zeilenhoehe der Reglerbeschriftung ------------- Die Beschriftung ist ein einzelnes Wort in Grossbuchstaben, stand aber in einer 1,77fachen Zeile (bei 8 px also 14,2 px hoch). 1,15 reicht dafuer und gibt je Reglerzeile rund 5 px frei - genau der Platz, den die groesseren Kappen brauchen. */ #za-rack .zam-knob-label { line-height: 1.15 !important; } /* PUMP: letzter Rest des Ueberlaufs. Kappen eine Stufe kleiner, Schalterraster enger. */ #za-rack .za-m-pump > .zam-knob-row:not(.zam-knob-row-small) { --za-kappe: 30px; /* Achtung: Zeile 616 setzt margin-top: 2px !important auf jede Reglerzeile. Ohne !important wirkt hier nichts. Der MIX-Ring stand mit 2 px nur 1,3 px unter der Anzeige, mit 4 px sind es 3,3 px. */ margin-top: 4px !important; } #za-rack .za-m-pump > .zam-knob-row.zam-knob-row-small { --za-kappe: 24px; } #za-rack .za-m-pump > .zam-switch-grid { gap: 1px 3px !important; } /* Die sechs Schalter bleiben in zwei Reihen zu dritt. Ein Versuch mit einer Reihe zu sechst haette 34 px Hoehe gespart, aber die Spalten sind dann nur 51 px breit: LENGTH mit seinen vier Stufen wurde unleserlich. Stattdessen geht die Anzeige auf 34 px herunter, also etwa das Rack-Standardmass der uebrigen Module. */ #za-rack .za-m-pump .zam-workshop-display-row { height: 34px; min-height: 34px; flex: 0 0 34px; } /* CLAMP: vier Regler standen bei 6 HP zu zweit nebeneinander; mit der groesseren Beschriftung ruecken sie so weit auseinander, dass die Ringebene seitlich herausragt und das Modul auf 8 HP waechst. Untereinander (wie bei LEVER und HAMMER) bleibt das Modul 6 HP breit und die Kappe kann auf 30 px. Die Zeile ist 235 px hoch, vier Regler brauchen 206 px. */ #za-rack .za-m-clamp > .zam-knob-row.zam-knob-row-small { flex-direction: column; --za-kappe: 30px; } /* Letzte zwei Restueberlaeufe (1 px bei SUB, 2 px bei VENEER): beide Module sind randvoll, gespart wird an den Auswahlfeldern. */ #za-rack .zam-module-veneer .zam-workshop-enums { row-gap: 0 !important; } /* --- Nachbesserung 4: Ergebnis des Ueberschneidungslaufs ------------- Der Messlauf ueber alle 30 Modultypen (167 Regler) hat drei Stellen gefunden, an denen der Lichtring seine 2 px verliert. */ /* (MIXER: die volle Rasterbreite steht oben bei der Rasterregel.) */ /* TUMBLER ist der schwierigste Fall: za-modular.js schiebt die Hauptanzeige zur Laufzeit 3,1 px nach unten (--za-primary-display- shift, Ausrichtung an RATCHET). Sie ragt damit ueber ihren Layoutkasten hinaus in den Ring von RATE und SPREAD (gemessen -1,0 px). Ohne Eingriff in das Skript bleibt nur eine kleinere Kappe: 22 px statt 26 px, damit der Ring 4,4 px weniger nach oben ragt. Ein groesserer Abstand haette nicht geholfen - das Modul ist randvoll. Die MORE-Regler gehen dafuer von 22 auf 20 px. */ #za-rack .za-m-tumbler > .zam-knob-row:not(.zam-knob-row-small) { --za-kappe: 22px; } #za-rack .za-m-tumbler details.zam-more > .zam-knob-row { --za-kappe: 20px; } #za-rack .za-m-tumbler > .zam-switch-grid { gap: 1px 3px !important; } #za-rack .za-m-tumbler > .zam-jacks { padding-top: 0 !important; } /* VENEER, SUB und PUMP: der Ring ragt nach oben in das Auswahlfeld bzw. in die Anzeige darueber. Der Abstand ueber der Reglerzeile waechst um genau diesen Betrag, die Anzeige gibt ihn ab. */ #za-rack :is(.zam-module-veneer, .zam-module-sub) > .zam-knob-row.zam-knob-row-small { margin-top: 3px !important; } #za-rack .zam-module-veneer .zam-workshop-display-row { height: 35px; } #za-rack .zam-module-sub .zam-workshop-display-row { height: 42px; } /* (PUMP: Abstand, Schalterreihe und Anzeigehoehe stehen oben.) */ /* Nach dem letzten Messlauf: 0 Ueberschneidungen, 0 Ueberlauf, eine einzige enge Stelle - ANVIL FLOW steht 1,0 px vor dem Modulrand (Ring zu Nachbarring 7,3 px, zur Beschriftung 2,5 px). Ueber den Rand ragt nichts; ein groesserer Randabstand ginge nur ueber eine kleinere Kappe oder eine breitere Frontplatte. */ /* Ende Platznutzung */ /* --- DOCK Limiter, 02.09.2026 --------------------------------------- Neu am DOCK: der zweite Regler LIMIT und eine Lampe darueber. Der Regler ist der gewoehnliche Foto-Regler des Racks, gezeichnet wird nichts. Die Lampe ist reines Licht: dunkle Fassung (::before) und darueber ein bernsteinfarbener Leuchtpunkt (::after), dessen Deckkraft als --za-lim (0..1) aus za-modular.js kommt - genau die Bauart der Stufenlampen am LADDER. */ #za-rack .za-m-dock .zam-lim-lamp { position: relative; padding-top: 8px; } #za-rack .za-m-dock .zam-lim-lamp::before, #za-rack .za-m-dock .zam-lim-lamp::after { content: ""; position: absolute; top: 0; left: 50%; margin-left: -3px; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; } #za-rack .za-m-dock .zam-lim-lamp::before { background: #241a0d; box-shadow: inset 0 1px 2px rgba(0,0,0,.95), 0 0 0 1px rgba(0,0,0,.6); } #za-rack .za-m-dock .zam-lim-lamp::after { background: #e2c482; opacity: var(--za-lim, 0); box-shadow: 0 0 4px rgba(226,196,130,.95), 0 0 9px rgba(226,196,130,.55), inset 0 0 2px rgba(255,255,255,.5); transition: opacity 70ms linear; } /* Die Pegelkette gibt dem zweiten Regler die noetige Hoehe ab. Sie darf dabei kuerzer werden, behaelt aber alle zehn Stufen: 10 x 8 px + 2 x 5 px Polster + 2 x 1 px Rand = 92 px, deshalb 100 px als Untergrenze. */ #za-rack .za-m-dock .zam-meter.zam-meter-chain { min-height: 100px; flex-basis: 100px; } /* Ende DOCK Limiter */ /* --- GAUGE Analyzer, 02.09.2026 -------------------------------------- Neues Rack-Modul GAUGE (14 HP). Gezeichnet wird nichts: der Rahmen ist der vorhandene Displayrahmen des Racks, SPEED und SLOPE sind die vorhandenen Fototasten, RESET ist die vorhandene .zam-seg-type-Taste. Neu ist allein der Inhalt der Anzeige - Licht auf dunklem Glas, amber #e2c482 in IBM Plex Mono, wie bei allen anderen Anzeigen im Rack. */ #za-rack .za-m-gauge, #za-rack .zam-module-gauge { gap: 3px !important; padding-inline: 4px; justify-content: flex-start; overflow: hidden; } #za-rack .zam-module-gauge > .zam-jacks { margin-top: auto; } /* Das Anzeigefeld. Die Hoehe wird hier gesetzt, weil die allgemeine Displayregel weiter oben alle Anzeigen auf 38 px stellt. Nachtrag 02.09.2026 (Ansage Tom: Module sollen ihre Flaeche nutzen): Das Feld hat keine feste Hoehe mehr, sondern nimmt als einziges wachsendes Element den ganzen freien Raum des Panels auf. Vorher blieben zwischen Anzeige und Tastenreihe rund 37 px leer. Zwei Dinge sind dabei zu beachten: 1. 'flex: 1 1 156px' - die alten 156 px bleiben die Untergrenze, alles darueber ist der Raum, der vorher leer war. 2. Der untere Abstand rechnet die Laufzeit-Verschiebung heraus. za-rack-vcv.js richtet jede Hauptanzeige per 'translate' an der RATCHET-Oberkante aus (--za-primary-display-shift); der Layoutkasten bleibt dabei stehen, das Bild wandert. Ohne Ausgleich waere die sichtbare Unterkante genau um diesen Betrag zu hoch. Mit 'calc(9px + shift)' liegen unter der SICHTBAREN Unterkante immer 9 px + 3 px Modulabstand = 12 px, gleich wie stark verschoben wird. Der obere Abstand ist von 16 px auf 2 px herunter: die 16 px waren Vorhalt fuer eben diese Verschiebung und kosteten nur Hoehe. */ #za-rack .zam-module-gauge .zam-gauge-row { width: 100%; max-width: none; height: auto; min-height: 156px; flex: 1 1 156px; gap: 0 !important; margin: 2px 0 calc(9px + var(--za-primary-display-shift, 0px)) !important; } #za-rack .zam-module-gauge .zam-gauge-display { position: relative; width: 100%; height: auto; align-self: stretch; min-height: 0; padding: 0 !important; overflow: hidden; } #za-rack .zam-gauge-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; } /* Die beiden Zahlenzeilen liegen unten im Glas, ueber dem Canvas. Der Canvas laesst dafuer 21 px frei (GAUGE_TEXT_H in za-modular.js). */ #za-rack .zam-gauge-line { position: absolute; z-index: 2; left: 3px; right: 3px; overflow: hidden; color: #e2c482; font-family: var(--za-font-mono); font-weight: 400; letter-spacing: 0; white-space: nowrap; text-overflow: clip; text-shadow: 0 0 4px rgba(226,196,130,.35); pointer-events: none; } #za-rack .zam-gauge-line1 { bottom: 11px; font-size: 7.6px; line-height: 10px; } #za-rack .zam-gauge-line2 { bottom: 1px; font-size: 6.2px; line-height: 10px; } /* SPEED und SLOPE nebeneinander, wie die Schalterraster der Werkstatt. */ #za-rack .zam-module-gauge > .zam-switch-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 6px; width: 100%; flex: 0 0 auto; } #za-rack .zam-module-gauge > .zam-switch-grid .zam-switch-row { min-width: 0; gap: 1px; } #za-rack .zam-module-gauge > .zam-switch-grid .zam-switch { width: 100%; min-width: 0; } #za-rack .zam-module-gauge > .zam-switch-grid .zam-sw-opt { flex: 1 1 0; min-width: 0; padding: 3px 1px; font-size: 7px; letter-spacing: .02em; text-align: center; } #za-rack .zam-module-gauge .zam-switch-label { font-size: 6px; } /* RESET: die vorhandene Fototaste, mittig unter den beiden Schaltern. Die Abstaende stehen hier fest, seit die Anzeige den freien Raum aufnimmt: 5 px + 3 px Modulabstand = 8 px von SPEED/SLOPE herunter (RESET gehoert zur selben Tastengruppe, deshalb enger), und 7 px + 3 px = 10 px bis zur Buchsenzeile - dasselbe Mass wie vorher. */ #za-rack .zam-gauge-tools { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 5px; margin-bottom: 7px; flex: 0 0 auto; } #za-rack .zam-gauge-tools .zam-gauge-reset { min-width: 62px; height: 15px; min-height: 15px; padding: 0 8px; font-size: 7px; } /* Der Hinweistext des Moduls bleibt aus - die Anzeige spricht fuer sich. */ #za-rack .zam-module-gauge .zam-keys-note { display: none; } /* Ende GAUGE Analyzer */ /* ====================================================================== PUMP Umbau, 02.09.2026, Ansage Tom ("pump kann man auch besser machen, die vier dreh knoepfe nebeneinander, dafuer die taster darunter in 3 reihen statt 2, und das display wieder in der alten groesse. passe die drehknoepfe evtl in der groesse an") Gezeichnet wird nichts. Die Regler sind die vorhandenen Foto-Regler (Ring 0,145 x Kappe ueber die Box hinaus), die Taster die vorhandenen Fototasten. Geaendert sind nur Anordnung, Groessen und Abstaende. Drei Aenderungen: 1. Vier Regler in EINER Reihe. Die Zuordnung kommt aus za-modular.js (alle vier mit big: true), hier steht nur noch das Mass. 2. Die sechs Schaltergruppen als 2 Spalten x 3 Reihen: LENGTH + TRIGGER / LOOP + BAND / ANTI-CLICK + POWER. 3. Die Anzeige zurueck auf 62 px, den Stand vor dem Platznutzungs- Durchgang von heute frueh. Dieser Abschnitt steht am Ende der Datei und ueberschreibt damit die PUMP-Zeilen des Abschnitts "Platznutzung" weiter oben. ====================================================================== */ /* 1. Die vier Regler nebeneinander ------------------------------------ Modulbreite 330 px. Vier Kappen zu C plus drei Spaltenabstaende (0,29 C + 3 px) ergeben 4,87 C + 9 px; bei 36 px sind das 184 px in 330 px Frontplatte. Der Ringabstand ist damit gebaut, nicht geschaetzt: Spaltenabstand minus zweimal Ringueberstand (0,145 C) = genau 3 px. */ #za-rack .za-m-pump > .zam-knob-row:not(.zam-knob-row-small) { --za-kappe: 36px; /* Zeile 616 setzt margin-top: 2px !important auf jede Reglerzeile; ohne !important wirkt hier nichts. Bei 36 px Kappe ragt der Ring 5,22 px ueber die Reglerbox nach oben. Mit den bisherigen 4 px stand er bei geoeffnetem MORE nur 0,1 px unter der Anzeige (gemessen), weil die Reihe dann genau auf Inhaltshoehe zusammengeht. 6 px ergeben 2,1 px Luft. */ margin-top: 6px !important; } /* 2. Schaltergruppen als 2 x 3 ---------------------------------------- Das Raster oben (Zeile 1045) stand auf 3 Spalten x 2 Reihen. Mit zwei Spalten werden die Gruppen 161 statt 105 px breit; die Tasten duerfen dadurch breiter werden, die Beschriftung bleibt bei 9 px. Die Fuellrichtung ist die Reihenfolge aus za-modular.js, also LENGTH + TRIGGER / LOOP + BAND / ANTI-CLICK + POWER. */ #za-rack .za-m-pump > .zam-switch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); gap: 0 6px !important; } /* 3. Anzeige zurueck auf 62 px ---------------------------------------- Der Platznutzungs-Durchgang hatte sie auf 34 px gedrueckt, um die zwei Schalterreihen unterzubringen. Mit einer Reglerreihe statt zwei ist der Platz wieder da. */ #za-rack .za-m-pump .zam-workshop-display-row { height: 62px; min-height: 62px; flex: 0 0 62px; } /* 4. Hoehenausgleich -------------------------------------------------- Gerechnet: die dritte Schalterreihe kostet 34,6 px, die Anzeige 28 px; die eingesparte zweite Reglerreihe bringt 46,6 px. Bleiben 16 px Ueberlauf bei geoeffnetem MORE (gemessen 16 px bei 1440, 15 px bei 390), dazu 2 px fuer die Ringluft unter der Anzeige. Geholt werden die 18 px in der vorgegebenen Reihenfolge - erst Abstaende, und die haben gereicht; Reglerkappe und Tastenhoehe bleiben unberuehrt. */ /* a) Zeilenhoehe der Schaltergruppen-Beschriftung, groesster Posten. Die Beschriftung ist ein Wort in Grossbuchstaben, stand aber in einer 1,6fachen Zeile (bei 9 px also 14,4 px). 1,15 reicht dafuer und spart 4 px je Reihe, bei drei Reihen 12 px. Der Schriftgrad bleibt bei 9 px. Dasselbe Mittel wie bei der Reglerbeschriftung weiter oben ("Nachbesserung 3"). */ #za-rack .za-m-pump .zam-switch-label { line-height: 1.15 !important; } /* b) Beschriftung und Tasten einer Gruppe ruecken zusammen: 3 px. */ #za-rack .za-m-pump > .zam-switch-grid .zam-switch-row { gap: 0 !important; } /* c) MORE: die Trennlinie ohne Polster (2 px) und die beiden MORE-Regler eine Stufe kleiner, 22 -> 20 px (2,3 px). */ #za-rack .za-m-pump > details.zam-more > summary { padding-block: 0 !important; } #za-rack .za-m-pump details.zam-more > .zam-knob-row { --za-kappe: 20px; } /* d) Buchsenzeile ohne oberes Polster (2 px), wie bei BELLOWS und STENCIL weiter oben. */ #za-rack .za-m-pump > .zam-jacks { padding-top: 0 !important; } /* Ende PUMP Umbau */