/* melowee-design tokens v0.3.7 · erzeugt 2026-10-23 · NICHT von Hand aendern · widgets */
/* melowee widgets — Komponentenschicht (Richtung A „Milchglas“). Quelle: tools/widgets.src.css
   Nutzt NUR --mw-* aus tokens.css. Thema: <html data-theme="dunkel"> (Vorgabe, Geraete) oder "hell" (Web, learn).
   Formen tragen Bedeutung: Zustand nie nur per Farbe (REGELN Regel 5). */

/* ---------- Thema: Grund, Tinte, Rollen ---------- */
:root, [data-theme="dunkel"] {
  --mw-grund: var(--mw-farbe-grund-dunkel);
  --mw-tinte: var(--mw-farbe-tinte_dunkel-stark);
  --mw-tinte-2: var(--mw-farbe-tinte_dunkel-normal);
  --mw-tinte-3: var(--mw-farbe-tinte_dunkel-gedaempft);
  --mw-akzent: var(--mw-farbe-rolle-dunkel-akzent);
  --mw-akzent-tinte: #15131a;
  --mw-ok: var(--mw-farbe-rolle-dunkel-ok);
  --mw-warnung: var(--mw-farbe-rolle-dunkel-warnung);
  --mw-fehler: var(--mw-farbe-rolle-dunkel-fehler);
  --mw-unbekannt: var(--mw-farbe-rolle-dunkel-unbekannt);
  --mw-panel: rgba(255,255,255,0.06);
  --mw-panel-rand: rgba(255,255,255,0.12);
  --mw-panel-schatten: 0 18px 40px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.10);
  --mw-bahn: rgba(255,255,255,0.12);
  --mw-kappe: rgba(255,255,255,0.07);
  --mw-kappe-rand: rgba(255,255,255,0.16);
  --mw-btn: rgba(255,255,255,0.08);
  --mw-btn-rand: rgba(255,255,255,0.18);
  --mw-glow: 0 0 6px var(--mw-akzent);
  --mw-blur: 18px;
}
[data-theme="hell"] {
  --mw-grund: var(--mw-farbe-grund-hell);
  --mw-tinte: var(--mw-farbe-tinte-stark);
  --mw-tinte-2: var(--mw-farbe-tinte-normal);
  --mw-tinte-3: var(--mw-farbe-tinte-gedaempft);
  --mw-akzent: var(--mw-farbe-rolle-hell-akzent);
  --mw-akzent-tinte: #ffffff;
  --mw-ok: var(--mw-farbe-rolle-hell-ok);
  --mw-warnung: var(--mw-farbe-rolle-hell-warnung);
  --mw-fehler: var(--mw-farbe-rolle-hell-fehler);
  --mw-unbekannt: var(--mw-farbe-rolle-hell-unbekannt);
  --mw-panel: rgba(255,255,255,0.55);
  --mw-panel-rand: rgba(255,255,255,0.9);
  --mw-panel-schatten: 0 18px 44px rgba(38,35,46,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
  --mw-bahn: rgba(38,35,46,0.12);
  --mw-kappe: rgba(255,255,255,0.7);
  --mw-kappe-rand: rgba(38,35,46,0.14);
  --mw-btn: rgba(255,255,255,0.7);
  --mw-btn-rand: rgba(38,35,46,0.16);
  --mw-glow: none;
  --mw-blur: 22px;
}
/* Rueckfall ohne backdrop-filter (eingebettete Browser, LVGL-Vorlage): Panels werden deckend */
[data-glas="aus"] { --mw-panel: rgba(30,28,38,0.92); --mw-blur: 0px; }
[data-theme="hell"][data-glas="aus"] { --mw-panel: rgba(255,255,255,0.92); }

/* ---------- Grundlagen ----------
   ⚠️ `class="mw"` am Body ist NICHT additiv: es setzt Grund, Tinte, Schrift (15px/1.5). Die VARIABLEN kommen schon
   mit data-theme auf <html>, ohne .mw — wer nur Tokens will, laesst .mw weg (thync 2989). */
.mw { background: var(--mw-grund); color: var(--mw-tinte); font-family: var(--mw-schrift-text); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.mw *, .mw *::before, .mw *::after { box-sizing: border-box; }
.mw :focus-visible { outline: 2px solid var(--mw-akzent); outline-offset: 2px; }
.mw-titel { font-family: var(--mw-schrift-titel); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; text-wrap: balance; }
/* Ohne geladene Webschrift (Geraete) fallen titel und text auf system-ui: der Titel unterscheidet sich dann durch Gewicht 800 + engere Laufweite + Groesse — das ist gewollt (Regel 13). */
.mw-label { font-family: var(--mw-schrift-text); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mw-tinte-3); }
.mw-wert  { font-family: var(--mw-schrift-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--mw-tinte); }
.mw-wert--unbekannt { color: var(--mw-unbekannt); }
.mw-mono  { font-family: var(--mw-schrift-mono); font-size: 12px; color: var(--mw-tinte-3); }
.mw-version::after { content: "tokens " attr(data-mw-version); font-family: var(--mw-schrift-mono); font-size: 11px; color: var(--mw-tinte-3); }

/* ---------- Panel / Kachel / Callout ---------- */
.mw-panel { border-radius: var(--mw-radius-gross); background: var(--mw-panel); border: 1px solid var(--mw-panel-rand); box-shadow: var(--mw-panel-schatten); backdrop-filter: blur(var(--mw-blur)); -webkit-backdrop-filter: blur(var(--mw-blur)); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.mw-panel__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mw-panel__titel { font-family: var(--mw-schrift-mono); font-size: 12px; font-weight: 600; color: var(--mw-akzent); }
.mw-kachel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--mw-radius-gross); background: var(--mw-panel); border: 1px solid var(--mw-panel-rand); text-decoration: none; color: var(--mw-tinte); }
.mw-kachel__icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--mw-radius-mittel); background: var(--mw-btn); border: 1px solid var(--mw-btn-rand); color: var(--mw-akzent); }
.mw-callout { border-left: 3px solid var(--mw-akzent); }
.mw-callout--ok { border-left-color: var(--mw-ok); } .mw-callout--warnung { border-left-color: var(--mw-warnung); }

/* ---------- Button ---------- */
.mw-btn { font-family: var(--mw-schrift-text); font-size: 14px; font-weight: 700; min-height: var(--mw-mass-touch_min); padding: 0 20px; border-radius: var(--mw-radius-voll); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--mw-btn-rand); background: var(--mw-btn); color: var(--mw-tinte); }
.mw-btn--primaer { background: var(--mw-akzent); color: var(--mw-akzent-tinte); border-color: var(--mw-akzent); }
.mw-btn--leise   { background: transparent; border-color: transparent; color: var(--mw-tinte-2); }
.mw-btn--gefahr  { background: transparent; color: var(--mw-fehler); border-color: var(--mw-fehler); }
.mw-btn--pulse   { width: 64px; height: 64px; padding: 0; justify-content: center; border: 2px solid var(--mw-akzent); box-shadow: var(--mw-glow); }
.mw-btn--pulse::before { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--mw-akzent); }
.mw-btn:disabled { opacity: 0.45; cursor: default; }
/* dicht: fuer Werkzeugflaechen am MONITOR (thync 2992: 27 Knoepfe, Karte +112 px). Gleiche Form, 32 px statt 44.
   Nur unter [data-dichte="dicht"] wirksam, am Handy nie — die Seite setzt das Attribut nach Pointer-Art (pointer: fine). */
[data-dichte="dicht"] .mw-btn, .mw-btn--dicht { min-height: 32px; padding: 0 12px; font-size: 13px; }
[data-dichte="dicht"] .mw-toggle { width: 44px; height: 24px; } [data-dichte="dicht"] .mw-toggle::after { width: 18px; height: 18px; top: 2px; left: 2px; } [data-dichte="dicht"] .mw-toggle[aria-checked="true"]::after { left: 23px; }
[data-dichte="dicht"] .mw-pille { padding: 3px 9px 3px 7px; font-size: 11px; }
@media (pointer: coarse) { [data-dichte="dicht"] .mw-btn { min-height: var(--mw-mass-touch_min); } } /* Finger schlaegt dicht */
.mw-btn svg { width: 18px; height: 18px; }

/* ---------- Pille (Status): Form + Wort + Farbe ---------- */
.mw-pille { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 9px; border-radius: var(--mw-radius-voll); border: 1px solid var(--mw-tinte-3); background: var(--mw-btn); font-size: 12px; font-weight: 700; color: var(--mw-tinte); white-space: nowrap; align-self: flex-start; }
.mw-pille::before { content: ""; width: 10px; height: 10px; flex: none; }
.mw-pille--ok        { border-color: var(--mw-ok); }        .mw-pille--ok::before        { border-radius: 50%; background: var(--mw-ok); }
.mw-pille--warnung   { border-color: var(--mw-warnung); }   .mw-pille--warnung::before   { background: var(--mw-warnung); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mw-pille--fehler    { border-color: var(--mw-fehler); }    .mw-pille--fehler::before    { background: linear-gradient(45deg, transparent 40%, var(--mw-fehler) 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, var(--mw-fehler) 40% 60%, transparent 60%); }
.mw-pille--unbekannt { border-color: var(--mw-unbekannt); border-style: dashed; } .mw-pille--unbekannt::before { border-radius: 50%; border: 1.5px dashed var(--mw-unbekannt); }
.mw-pille--neutral::before { border-radius: 2px; border: 1.5px solid var(--mw-tinte-3); }

/* ---------- Toggle (role=switch, aria-checked) ---------- */
.mw-toggle { position: relative; width: 56px; height: 30px; border-radius: var(--mw-radius-voll); border: 1px solid var(--mw-kappe-rand); background: var(--mw-bahn); cursor: pointer; padding: 0; }
.mw-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--mw-tinte); transition: left var(--mw-dauer-schnell); }
.mw-toggle::before { content: ""; position: absolute; top: 9px; left: 11px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--mw-tinte-3); opacity: 0.9; } /* aus: Ring */
.mw-toggle[aria-checked="true"] { background: var(--mw-akzent); border-color: var(--mw-akzent); box-shadow: var(--mw-glow); }
.mw-toggle[aria-checked="true"]::after { left: 29px; background: #ffffff; }
.mw-toggle[aria-checked="true"]::before { left: 39px; top: 8px; width: 2px; height: 12px; border: 0; border-radius: 1px; background: var(--mw-akzent); } /* an: Strich */

/* ---------- Tabs / Segment / Stepper ---------- */
.mw-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--mw-radius-voll); background: var(--mw-btn); border: 1px solid var(--mw-btn-rand); }
.mw-tab { font-size: 13px; font-weight: 700; min-height: 36px; padding: 0 16px; border: 0; border-radius: var(--mw-radius-voll); background: transparent; color: var(--mw-tinte-2); cursor: pointer; }
.mw-tab[aria-selected="true"] { background: var(--mw-akzent); color: var(--mw-akzent-tinte); }
.mw-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.mw-seg__btn { font-family: var(--mw-schrift-mono); font-size: 12px; font-weight: 600; min-height: 36px; padding: 0 12px; border: 1px solid var(--mw-btn-rand); border-radius: var(--mw-radius-mittel); background: var(--mw-btn); color: var(--mw-tinte-2); cursor: pointer; }
.mw-seg__btn[aria-pressed="true"] { background: var(--mw-akzent); color: var(--mw-akzent-tinte); border-color: var(--mw-akzent); }
.mw-stepper { display: inline-flex; align-items: center; gap: 6px; }
.mw-stepper__btn { width: 40px; height: 40px; border-radius: var(--mw-radius-mittel); border: 1px solid var(--mw-btn-rand); background: var(--mw-btn); color: var(--mw-tinte); font-family: var(--mw-schrift-mono); font-size: 16px; cursor: pointer; }
.mw-stepper__wert { min-width: 44px; text-align: center; }

/* ---------- Select (nominale Listen; ordinale Werte → .mw-stepper) ---------- */
.mw-select { appearance: none; -webkit-appearance: none; min-height: var(--mw-mass-touch_min); padding: 0 40px 0 14px; border-radius: var(--mw-radius-mittel); border: 1px solid var(--mw-btn-rand); background: var(--mw-btn); color: var(--mw-tinte); font-family: var(--mw-schrift-text); font-size: 14px; font-weight: 700; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--mw-tinte-3) 50%), linear-gradient(135deg, var(--mw-tinte-3) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.mw-select option { background: var(--mw-grund); color: var(--mw-tinte); }
.mw-select:disabled { opacity: 0.45; cursor: default; }

/* ---------- Slider (input type=range) ---------- */
.mw-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; }
.mw-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--mw-bahn); }
.mw-slider::-moz-range-track { height: 6px; border-radius: 99px; background: var(--mw-bahn); }
.mw-slider::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--mw-akzent); }
.mw-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -6px; border-radius: 50%; background: var(--mw-tinte); border: 1px solid var(--mw-kappe-rand); box-shadow: var(--mw-glow); }
.mw-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--mw-tinte); border: 1px solid var(--mw-kappe-rand); }

/* ---------- Knob / XY (SVG via widgets.js) ---------- */
.mw-knob { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; touch-action: none; user-select: none; }
.mw-knob--gesperrt { opacity: 0.45; }
.mw-knob__bahn { stroke: var(--mw-bahn); fill: none; stroke-linecap: round; }
.mw-knob__wert { stroke: var(--mw-akzent); fill: none; stroke-linecap: round; filter: drop-shadow(var(--mw-glow)); }
.mw-knob__kappe { fill: var(--mw-kappe); stroke: var(--mw-kappe-rand); }
.mw-knob__zeiger { stroke: var(--mw-tinte); stroke-linecap: round; }
.mw-knob[data-greift] svg { border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--mw-akzent) 35%, transparent); }
.mw-xy { position: relative; width: 148px; height: 148px; border-radius: var(--mw-radius-mittel); border: 1px solid var(--mw-panel-rand); background: var(--mw-kappe); background-image: linear-gradient(var(--mw-bahn) 1px, transparent 1px), linear-gradient(90deg, var(--mw-bahn) 1px, transparent 1px); background-size: 37px 37px; overflow: hidden; touch-action: none; }
.mw-xy__punkt { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--mw-akzent); border: 2px solid var(--mw-grund); box-shadow: var(--mw-glow); }

/* ---------- Meter / Lampen / Fortschritt (nur lesbar) ---------- */
.mw-meter { position: relative; height: 10px; border-radius: 99px; background: var(--mw-bahn); }
.mw-meter__fuell { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--mw-akzent); opacity: 0.35; }
.mw-meter__zeiger { position: absolute; top: -3px; width: 3px; height: 16px; margin-left: -1px; border-radius: 2px; background: var(--mw-akzent); }
.mw-meter--unbekannt { background: transparent; border: 1px dashed var(--mw-unbekannt); }
.mw-lampen { display: flex; gap: 10px; }
.mw-lampe { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--mw-schrift-mono); font-size: 10px; color: var(--mw-tinte-3); }
.mw-lampe::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--mw-bahn); border: 1px solid var(--mw-kappe-rand); transition: background 125ms; }
.mw-lampe--an { color: var(--mw-tinte); font-weight: 700; }
.mw-lampe--an::before { background: var(--mw-ok); border-color: var(--mw-ok); box-shadow: 0 0 8px var(--mw-ok); }
.mw-lampe--unbekannt::before { background: transparent; border: 1px dashed var(--mw-unbekannt); }
.mw-fortschritt { height: 8px; border-radius: 99px; background: var(--mw-bahn); overflow: hidden; }
.mw-fortschritt__fuell { height: 100%; background: var(--mw-akzent); }

/* ---------- Zeitachse (stage 3136, thync Sequencer): Bahn + Abspielkopf + Taktmarken; Spulen = Klick/Ziehen; data-zustand folgt = nur lesen ---------- */
.mw-zeitachse { position: relative; height: 44px; border-radius: var(--mw-radius-mittel); background: var(--mw-kappe); border: 1px solid var(--mw-panel-rand); overflow: hidden; touch-action: none; user-select: none; cursor: pointer; }
.mw-zeitachse__takte { position: absolute; inset: 0; pointer-events: none; }
.mw-zeitachse__takt { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--mw-bahn); }
.mw-zeitachse__takt--schwer { background: var(--mw-tinte-3); opacity: 0.6; }
.mw-zeitachse__nr { position: absolute; top: 3px; margin-left: 4px; font-family: var(--mw-schrift-mono); font-size: 9px; color: var(--mw-tinte-3); }
.mw-zeitachse__bereich { position: absolute; top: 0; bottom: 0; background: var(--mw-akzent); opacity: 0.12; pointer-events: none; }
.mw-zeitachse__ereignis { position: absolute; bottom: 8px; height: 10px; min-width: 3px; border-radius: 2px; background: var(--mw-farbe-signal-pitch); opacity: 0.8; pointer-events: none; }
.mw-zeitachse__gespielt { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mw-akzent); opacity: 0.18; pointer-events: none; }
.mw-zeitachse__kopf { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1px; background: var(--mw-akzent); box-shadow: 0 0 6px var(--mw-akzent); pointer-events: none; }
.mw-zeitachse__kopf::after { content: ""; position: absolute; top: -1px; left: -5px; border: 6px solid transparent; border-top: 7px solid var(--mw-akzent); }
.mw-zeitachse__zeit { position: absolute; right: 8px; bottom: 4px; font-family: var(--mw-schrift-mono); font-size: 11px; color: var(--mw-tinte-2); pointer-events: none; }
.mw-zeitachse[data-zustand="folgt"] { cursor: default; }
.mw-zeitachse[data-zustand="folgt"] .mw-zeitachse__zeit::before { content: "folgt · "; color: var(--mw-tinte-3); }
.mw-zeitachse[data-zustand="unbekannt"] { background: transparent; border-style: dashed; border-color: var(--mw-unbekannt); cursor: default; }
.mw-zeitachse:focus-visible { outline: 2px solid var(--mw-akzent); outline-offset: 2px; }

/* ---------- Zonen (thync 3140 / Widerruf 3147): Anzahl kommt vom Geraet (GET /api/udp/info), nie als Zahl im Code; 0 = alle, 1..n = Gruppenbit ---------- */
.mw-zonen { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.mw-zone { min-height: var(--mw-mass-touch_min); border-radius: var(--mw-radius-mittel); border: 1px solid var(--mw-btn-rand); background: var(--mw-btn); color: var(--mw-tinte-2); font-family: var(--mw-schrift-mono); font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.mw-zone[aria-pressed="true"] { background: var(--mw-akzent); border-color: var(--mw-akzent); color: var(--mw-akzent-tinte); }
.mw-zone[aria-pressed="true"]::before { content: "●"; font-size: 8px; }
.mw-zone--alle { grid-column: span 2; font-family: var(--mw-schrift-text); }
.mw-zonen[data-zustand="unbekannt"] .mw-zone { border-style: dashed; border-color: var(--mw-unbekannt); color: var(--mw-tinte-3); cursor: default; }
.mw-zonen[data-zustand="wirkungslos"] .mw-zone { opacity: 0.55; }

/* ---------- Matrixvorschau (thync: Roehre/Panel 8x32, Stern, Thepter-Ring): LED-Farben sind NUTZINHALT (Regel 12), die Huelle ist Vokabular ---------- */
.mw-matrix { display: inline-grid; gap: 2px; padding: 6px; border-radius: var(--mw-radius-mittel); background: var(--mw-kappe); border: 1px solid var(--mw-panel-rand); }
.mw-matrix__led { width: 8px; height: 8px; border-radius: 2px; background: var(--mw-bahn); }
.mw-matrix--rund .mw-matrix__led { border-radius: 50%; }
.mw-matrix--gross .mw-matrix__led { width: 12px; height: 12px; }
.mw-matrix[data-zustand="unbekannt"] { background: transparent; border-style: dashed; border-color: var(--mw-unbekannt); }
.mw-matrix[data-zustand="unbekannt"] .mw-matrix__led { background: transparent; border: 1px dashed var(--mw-unbekannt); width: 6px; height: 6px; }
.mw-matrix[data-zustand="aus"] .mw-matrix__led { opacity: 0.35; }

/* ---------- Zusammenstellung: Reihe mit Label oben/Wert ---------- */
.mw-feld { display: flex; flex-direction: column; gap: 8px; }
.mw-feld__kopf { display: flex; justify-content: space-between; align-items: baseline; }
.mw-zeile { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
.mw-gruppe { display: flex; flex-direction: column; gap: 6px; }
.mw-gruppe__kopf { display: flex; align-items: center; gap: 8px; }
.mw-gruppe__kopf::after { content: ""; flex: 1; height: 1px; background: var(--mw-bahn); }

/* ---------- Node-Graph: Port (Form = Klasse, hohl = Eingang) + Kabel ---------- */
.mw-port { display: inline-block; width: 12px; height: 12px; --c: var(--mw-tinte-3); }
.mw-port--audio { --c: var(--mw-farbe-signal-audio); border-radius: 50%; background: var(--c); }
.mw-port--mod   { --c: var(--mw-farbe-signal-mod);   background: var(--c); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.mw-port--gate  { --c: var(--mw-farbe-signal-gate);  background: var(--c); border-radius: 2px; }
.mw-port--pitch { --c: var(--mw-farbe-signal-pitch); background: var(--c); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mw-port--param { --c: var(--mw-farbe-signal-param); border-radius: 50%; border: 2px solid var(--c); background: transparent; }
.mw-port--eingang { background: var(--mw-grund); box-shadow: inset 0 0 0 2px var(--c); }
.mw-port--eingang.mw-port--mod, .mw-port--eingang.mw-port--pitch { background: var(--c); } /* clip-path kann keinen Rand — hohl als innerer Punkt per Pseudo nicht moeglich: Eingang bleibt gefuellt, aber kleiner */
.mw-port--eingang.mw-port--mod, .mw-port--eingang.mw-port--pitch { width: 9px; height: 9px; }
.mw-kabel--audio { stroke: var(--mw-farbe-signal-audio); stroke-width: 3; }
.mw-kabel--mod   { stroke: var(--mw-farbe-signal-mod);   stroke-width: 2; }
.mw-kabel--gate  { stroke: var(--mw-farbe-signal-gate);  stroke-width: 2; }
.mw-kabel--pitch { stroke: var(--mw-farbe-signal-pitch); stroke-width: 2; }
.mw-kabel--falsch { stroke: var(--mw-fehler); stroke-width: 2; stroke-dasharray: 6 5; }
.mw-kabel { fill: none; stroke-linecap: round; }

/* ---------- Touch am Monitor ---------- */
[data-touch="monitor"] .mw-btn { min-height: var(--mw-mass-touch_monitor); }
[data-touch="monitor"] .mw-toggle { width: 64px; height: 34px; }
@media (prefers-reduced-motion: reduce) { .mw * { transition: none !important; } }