/*
 * Licht: Knopf, Lichtansicht, Buehnenbild und Einrichtung.
 * Gemeinsam fuer Capo Live (live.css) und den Bandbereich (bandbereich.css):
 * die Farben kommen aus deren Variablen, unter eigenen Namen.
 */
:root{
  --l-text: var(--text, #F4EFE7);
  --l-muted: var(--muted, var(--text-muted, #9A92A8));
  --l-surface-2: var(--surface-2, #1E1A28);
  --l-border: var(--border, #2C2539);
  --l-accent: var(--accent, var(--amber, #FFB238));
  --l-kuehl: var(--kuehl, var(--teal, #5FA8D3));
  --l-kuehl-hell: var(--kuehl-hell, var(--teal-strong, #9BD4F5));
  --l-bad: var(--bad, var(--danger, #F87171));
  --l-warn: var(--warn, var(--amber, #FBBF24));
}
.licht-haken{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px;padding:10px;
  border:1px solid var(--l-border);border-radius:9px;font-size:14px;line-height:1.4;cursor:pointer;}
.licht-haken input{width:20px;height:20px;flex:none;margin:1px 0 0;}
.licht-haken small{display:block;color:var(--l-muted);font-size:12px;margin-top:3px;}

.tb-btn.licht-btn{max-width:11em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tb-btn.licht-hand{border-color:var(--l-kuehl);color:var(--l-kuehl-hell);}
.tb-btn.licht-aus{border-color:var(--l-bad);color:var(--l-bad);}
.ovl-box.licht-box{max-width:760px;}
.licht-kopf{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.licht-kopf h2{margin:0;}
.licht-zu{background:var(--l-surface-2);border:1px solid var(--l-border);border-radius:9px;
  width:40px;height:40px;font-size:16px;flex:none;}
.licht-buehne{background:#08060c;border:1px solid var(--l-border);border-radius:12px;padding:6px;margin-bottom:10px;}
.licht-buehne svg{display:block;width:100%;height:auto;}
.licht-lampe{stroke:#3a3346;stroke-width:1.5;}
.licht-lampe.an{stroke:rgba(255,255,255,.45);filter:drop-shadow(0 0 6px currentColor);}
.licht-stange{fill:#3a3346;}
/* Derby: Kuppel und Strahlen, die im Motortempo ueber die Buehne schwenken */
.licht-strahl{fill:transparent;fill-opacity:.32;transition:fill .15s;}
.licht-derby.blitz .licht-strahl{fill-opacity:.85;}
.licht-faecher{transform-box:view-box;animation:licht-schwenk 4s ease-in-out infinite alternate;}
.licht-derby.blitz .licht-faecher{animation:licht-schwenk 4s ease-in-out infinite alternate,licht-flacker .12s steps(2) infinite;}
@keyframes licht-schwenk{from{transform:rotate(-24deg);}to{transform:rotate(24deg);}}
@keyframes licht-flacker{50%{opacity:.15;}}
.licht-kuppel{fill:#2a2433;stroke:#4a4258;stroke-width:1.5;}
.licht-derby-kopf.an .licht-kuppel{fill:#5a4f6e;stroke:rgba(255,255,255,.5);filter:drop-shadow(0 0 5px rgba(255,255,255,.5));}
@media (prefers-reduced-motion: reduce){
  .licht-faecher,.licht-derby.blitz .licht-faecher{animation:none;}
}
.licht-text{fill:var(--l-muted);font-size:9px;text-anchor:middle;}
.licht-publikum{fill:#4a4258;letter-spacing:.2em;text-transform:uppercase;font-size:8px;}
.licht-stand{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline;font-size:16px;}
.licht-grund{color:var(--l-muted);font-size:13px;margin-left:6px;}
.licht-tempo{font-variant-numeric:tabular-nums;}
.licht-master{font-size:13px;color:var(--l-muted);margin:6px 0 12px !important;}
.licht-weg{color:var(--l-bad);}
.licht-hinweis{font-size:12px !important;}
.licht-warnung{color:var(--l-warn) !important;font-size:13px !important;margin-top:10px !important;}
.licht-reihe{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.licht-knopf{flex:1 1 0;min-width:7em;background:var(--l-surface-2);border:1px solid var(--l-border);color:var(--l-text);
  border-radius:11px;padding:12px 10px;font-size:15px;font-weight:600;touch-action:none;user-select:none;}
.licht-knopf.an{border-color:var(--l-accent);color:var(--l-accent);}
.licht-knopf.licht-blackout.an{background:rgba(248,113,113,.15);border-color:var(--l-bad);color:var(--l-bad);}
.licht-knopf.licht-strobe.an{background:#fff;color:#000;}
.licht-stimmungen{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:10px;}
.licht-stimmung{background:var(--l-surface-2);border:1px solid var(--l-border);color:var(--l-text);border-radius:11px;
  padding:10px;font-size:15px;font-weight:600;text-align:left;display:flex;flex-direction:column;gap:6px;}
.licht-stimmung.an{border-color:var(--l-accent);box-shadow:0 0 0 1px var(--l-accent) inset;}
.licht-farben{display:flex;gap:3px;}
.licht-farben i{flex:1;height:8px;border-radius:3px;}
.licht-h3{font-size:15px;margin:18px 0 8px;color:var(--l-accent);}
.licht-unter{font-size:12px !important;text-transform:uppercase;letter-spacing:.06em;margin:12px 0 4px !important;}
.licht-feld{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;}
.licht-feld > span:first-child{flex:1;color:var(--l-muted);}
.licht-feld input:not([type=checkbox]):not([type=color]):not([type=range]),.licht-feld select,
.licht-geraet input,.licht-geraet select{background:var(--l-surface-2);border:1px solid var(--l-border);color:var(--l-text);
  border-radius:8px;padding:8px 9px;font-size:14px;min-width:0;}
.licht-feld input[type=range]{flex:1;}
.licht-geraete{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.licht-geraet{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px;border:1px solid var(--l-border);border-radius:10px;}
.licht-geraet > input[data-g-feld="name"]{flex:1 1 9em;}
.licht-geraet select{flex:2 1 14em;}
.licht-geraet label{font-size:12px;color:var(--l-muted);display:flex;align-items:center;gap:5px;}
.licht-geraet label input{width:5.5em;}
.licht-weg-knopf{background:none;border:1px solid var(--l-border);color:var(--l-muted);border-radius:8px;width:34px;height:34px;flex:none;}
.licht-stimmung-edit{border:1px solid var(--l-border);border-radius:10px;padding:10px;margin-bottom:8px;}
.licht-stimmung-edit .licht-feld > input[data-s-feld="name"]{flex:1;font-weight:600;}
.licht-farbwahl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.licht-farbwahl input[type=color]{width:36px;height:30px;border:1px solid var(--l-border);border-radius:6px;background:none;padding:0;}
.licht-mini{background:var(--l-surface-2);border:1px solid var(--l-border);color:var(--l-text);border-radius:7px;width:30px;height:30px;}
.licht-monitor{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:4px;}
.licht-kanal{position:relative;background:var(--l-surface-2);border-radius:6px;padding:4px 5px 14px;font-size:11px;
  color:var(--l-muted);font-variant-numeric:tabular-nums;overflow:hidden;}
.licht-kanal b{display:block;color:var(--l-text);font-size:13px;}
.licht-kanal b::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:calc(var(--w) * 100%);background:var(--l-accent);}
.licht-kanal i{position:absolute;right:4px;top:3px;font-style:normal;font-size:9px;color:var(--l-kuehl);max-width:70%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Rueckfrage nach dem Abgleich */
.licht-rueck .ovl-btn{display:block;width:100%;margin:0 0 8px;}
.licht-rueck .ovl-btn[disabled]{opacity:.6;}
.licht-rueck-warnung{color:var(--l-warn) !important;}

/* Nicht aufgebaut / Lampen je Stimmung */
.licht-fehlt{opacity:.15;}
.licht-da{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--l-muted);}
.licht-da input{width:18px;height:18px;margin:0;}
.licht-lampen-wahl{margin-top:6px;border-top:1px solid var(--l-border);padding-top:6px;}
.licht-lampen-wahl summary{cursor:pointer;font-size:14px;color:var(--l-muted);padding:4px 0;}
.licht-lampen-wahl summary span{color:var(--l-text);margin-left:6px;}
.licht-lampen-wahl .licht-feld i{font-style:normal;color:var(--l-muted);font-size:12px;}
.licht-lampen-wahl input[type=color]{width:42px;height:32px;padding:0;border:1px solid var(--l-border);border-radius:6px;background:none;}

/* Pult: Tempo der Bassdrum, Mitschnitt */
.licht-pult{margin-top:12px;padding:10px;border:1px solid var(--l-border);border-radius:10px;}
.licht-pult p{margin:0 0 8px;font-size:13px;color:var(--l-muted);line-height:1.4;}
.licht-pult p b{color:var(--l-text);}
.licht-pult .licht-knopf{width:100%;}

/* Feste Farbe / aus je Lampe bzw. Kopf */
.licht-rollen{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:2px;}
.licht-rolle{display:flex;align-items:center;gap:6px;}
.licht-rolle small{color:var(--l-muted);font-size:12px;white-space:nowrap;}
.licht-geraet .licht-rolle select{flex:none;font-size:13px;padding:4px 6px;}
.licht-rolle input[type=color]{width:34px;height:28px;padding:0;border:1px solid var(--l-border);border-radius:6px;background:none;}
.licht-kopf-folge > span:first-child{padding-left:12px;}
.licht-geraet .licht-da input{width:18px;}

/* 3D-Ansicht */
.licht-buehne.licht-3d{position:relative;padding:0;overflow:hidden;}
.licht-buehne.licht-3d canvas{display:block;width:100%;height:auto;cursor:grab;border-radius:11px;}
.licht-3d-lade{padding:40px 10px;text-align:center;color:var(--l-muted);font-size:13px;}
.licht-3d-knopf{position:absolute;top:8px;right:8px;background:rgba(20,18,28,.75);color:#eee;border:1px solid rgba(255,255,255,.18);
  border-radius:8px;padding:5px 10px;font:inherit;font-size:12px;cursor:pointer;}
.licht-ansicht-wahl{display:flex;gap:6px;margin-bottom:8px;}
.licht-ort{white-space:nowrap;}
.licht-geraet .licht-ort select{flex:none;max-width:12em;font-size:13px;padding:4px 6px;}
.licht-3d-schalter{flex:none;min-width:0;padding:6px 12px;margin-left:auto;}

/* ---------- Effekt-Baukasten ---------- */
.licht-bau{margin-top:6px;border-top:1px solid var(--l-border);padding-top:6px;}
.licht-bau summary{cursor:pointer;font-size:14px;color:var(--l-muted);padding:4px 0;}
.licht-bau summary span{color:var(--l-text);margin-left:6px;}
.licht-bau .licht-feld b{font-weight:600;color:var(--l-text);}
.licht-bau input[type=range]{flex:1;min-width:120px;}

/* ---------- Sofort-Knoepfe ---------- */
.licht-unter{margin:4px 0 6px;font-size:13px;color:var(--l-muted);}
.licht-solo{align-items:center;}
.licht-knopf.licht-klein{padding:6px 10px;font-size:14px;}
.licht-knopf.blitz{background:#fff;color:#111;}
.licht-dunst{text-anchor:start;fill:#9fd3ff;}
.licht-nebel-zeiten{gap:14px;flex-wrap:wrap;}
.licht-nebel-zeiten input{width:64px;}
/* Zeitdiagramm Dunst */
.licht-nebel-diagramm{margin:2px 0 12px;}
.licht-nebel-diagramm svg{display:block;width:100%;max-width:420px;height:auto;}
.licht-nd-spur{fill:var(--l-border);}
.licht-nd-dunst{fill:#9fd3ff;}
.licht-nd-luefter{fill:var(--l-kuehl);}
.licht-nd-name{fill:var(--l-muted);font-size:10px;}
.licht-nd-zahl{fill:var(--l-muted);font-size:9px;text-anchor:middle;}
.licht-nd-achse{stroke:var(--l-muted);stroke-width:1;}
.licht-nd-satz{margin:2px 0 0;font-size:12px;color:var(--l-muted);}