/* SYNTH — Entscheidungsraum-Synthesizer. Dunkel, technisch, Kanäle wie ein Pult. */
.sy{ font-family:system-ui,-apple-system,sans-serif; color:#e4e0ea; background:#151119;
  border:1px solid #2d2735; border-radius:12px; padding:14px; margin:8px 0; }
.sy-kopf{ border-bottom:1px solid #2d2735; padding-bottom:12px; margin-bottom:12px; }
.sy-titel{ font:700 12px system-ui; letter-spacing:.14em; text-transform:uppercase; color:#b99bcb; margin-bottom:10px; }
.sy-presets{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:12px; }
.sy-lab{ font:600 11px system-ui; color:#8a8496; }
.sy-preset{ font:600 11px system-ui; border:1px solid #3a3348; background:#1c1922; color:#c8c2d4;
  border-radius:16px; padding:5px 11px; cursor:pointer; }
.sy-preset:hover{ border-color:#b99bcb; color:#fff; }

/* globale Regler */
.sy-reg{ margin:8px 0; }
.sy-reg label{ display:flex; justify-content:space-between; font:600 11px system-ui; color:#a49cb0; margin-bottom:3px; }
.sy-reg .sy-val{ font-family:ui-monospace,monospace; color:#b99bcb; }
.sy-reg input[type=range]{ width:100%; accent-color:#b99bcb; height:22px; }
.sy-reg-h input[type=range]{ accent-color:#c8ad83; }   /* Zeitfenster = andere Farbe */
.sy-reg-h label{ color:#c8ad83; }

/* eine Spur pro Anker */
.sy-spuren{ display:flex; flex-direction:column; gap:8px; }
.sy-leer{ color:#8a8496; font-size:12px; font-style:italic; padding:14px; text-align:center; }
.sy-spur{ border:1px solid #2d2735; border-radius:9px; padding:9px 11px; background:#1a1622; }
.sy-spur.aus{ opacity:.45; }
.sy-spur.rf{ border-color:#8a5a2a; }
.sy-spur-kopf{ display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.sy-an{ border:1px solid #3a3348; background:none; color:#8a8496; border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:11px; }
.sy-an.on{ color:#6dbb92; border-color:#6dbb92; }
.sy-nm{ font-size:13px; color:#e4e0ea; }
.sy-rf{ font:600 10px system-ui; color:#e0a35a; margin-left:auto; }
.sy-slider input[type=range]{ width:100%; accent-color:#6dbb92; height:26px; }
.sy-spur.rf .sy-slider input[type=range]{ accent-color:#e0a35a; }
.sy-anzeigen{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.sy-chip{ display:inline-flex; gap:5px; align-items:baseline; font:600 10px ui-monospace,monospace;
  background:#221d2c; border:1px solid #2d2735; border-radius:5px; padding:3px 7px; }
.sy-chip .k{ color:#8a8496; } .sy-chip .v{ color:#e4e0ea; }
.sy-anzeigen.sy-drin .sy-chip{ border-color:#6dbb92; }
.sy-puls{ animation:syp .25s ease; }
@keyframes syp{ 0%{ transform:scale(1) } 50%{ transform:scale(1.03) } 100%{ transform:scale(1) } }

/* Ergebnis */
.sy-ergebnis{ margin-top:14px; padding-top:12px; border-top:1px solid #2d2735; }
.sy-erg-kopf b{ color:#b99bcb; } .sy-erg-d{ color:#6dbb92; } .sy-erg-st{ color:#8a8496; font:600 10px ui-monospace,monospace; }
.sy-erg-liste{ margin:8px 0; display:flex; flex-direction:column; gap:3px; }
.sy-erg-zeile{ display:flex; align-items:baseline; gap:8px; font-size:12px; }
.sy-erg-zeile .n{ color:#8a8496; font-family:ui-monospace,monospace; }
.sy-erg-zeile .nm{ color:#e4e0ea; flex:1; }
.sy-erg-zeile .c{ color:#c8ad83; font-family:ui-monospace,monospace; }
.sy-erg-zeile .be{ color:#8a8496; font:10px ui-monospace,monospace; }
.sy-method{ font-size:10px; color:#8a8496; line-height:1.45; margin-top:8px; }
.sy-fuss{ font:600 10px ui-monospace,monospace; color:#6dbb92; margin-top:8px; min-height:14px; }

/* Varianten-Vergleich */
.sy-fussleiste{ margin-top:14px; padding-top:12px; border-top:1px solid #2d2735; }
.sy-vbtn{ font:600 12px system-ui; border:1px solid #b99bcb; background:#221d2c; color:#b99bcb;
  border-radius:8px; padding:9px 15px; cursor:pointer; }
.sy-vbtn:hover{ background:#b99bcb; color:#151119; }
.sy-var-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-top:12px; }
.sy-var{ border:1px solid #2d2735; border-radius:9px; padding:10px; background:#1a1622; }
.sy-var-t{ font:700 12px system-ui; color:#e4e0ea; margin-bottom:8px; }
.sy-var-m{ display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.sy-var-z{ display:flex; justify-content:space-between; font:600 11px ui-monospace,monospace; color:#a49cb0; }
.sy-var-z .v{ color:#e4e0ea; }
.sy-var-z.best .v{ color:#6dbb92; }
.sy-var-pos{ display:flex; flex-wrap:wrap; gap:4px; }
.sy-var-p{ font:10px system-ui; background:#221d2c; border:1px solid #2d2735; border-radius:4px; padding:2px 6px; color:#8a8496;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sy-stop{ font:600 11px system-ui; color:#c8892b; margin:6px 0 0; padding:6px 9px;
  background:rgba(200,137,43,.08); border:1px solid rgba(200,137,43,.28); border-radius:7px; }
.sy-null{ font:600 11.5px system-ui; color:#6b6577; margin:8px 0; padding:9px 11px;
  background:rgba(108,76,224,.06); border:1px solid rgba(108,76,224,.22); border-radius:8px; line-height:1.5; }