/* DiaWerk Online (dia_1v0) – Farben wie FotoWerk / PC-Programm DiaWerk (AnnoBoy-Farben). created by AnnoBoy 2026 */
:root{
  color-scheme:dark;
  --bg1:#1a0f33;--bg2:#0c2a3f;--feld:#120a2a;--panel:rgba(44,22,92,.5);
  --rand:#8f73ff;--rand2:#5f45c8;--text:#f2f0ff;--hell:#9fd8ff;--leise:#b7a9e6;
  --gold:#ffd166;--orange1:#ffbf3c;--orange2:#ff8a1c;--koralle:#ff5f8f;--tuerkis:#3fe0d0;
  --gruen1:#2ec27e;--gruen2:#12855a;--rot1:#e2435b;--rot2:#9b1830;
  --kopfH:50px;--leisteH:178px;--wbH:28px;--stH:26px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--text:#f2f0ff}}
:root[data-theme="dark"]{--text:#f2f0ff}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:linear-gradient(135deg,var(--bg1),var(--bg2));color:var(--text);font:14px/1.35 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
button,input,select,textarea{font:inherit;color:inherit}
button{background:linear-gradient(#5b3cc4,#3a1f8f);border:1px solid var(--rand);border-radius:9px;padding:7px 10px;color:#fff;font-weight:700;cursor:pointer;
  white-space:nowrap;touch-action:manipulation;transition:filter .12s,transform .06s}
button:hover:not(:disabled){filter:brightness(1.18)}
button:active:not(:disabled){transform:translateY(1px)}
button.an,button[aria-pressed="true"]{background:linear-gradient(var(--orange1),var(--orange2));color:#1d0f3a;border-color:#ffe08a}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,canvas:focus-visible{outline:2px solid var(--orange1);outline-offset:1px}
button.gruen{background:linear-gradient(var(--gruen1),var(--gruen2));border-color:#9af0c4}
button.gold{background:linear-gradient(var(--orange1),var(--orange2));color:#1d0f3a;border-color:#ffe08a}
button.lila{background:linear-gradient(#c04bff,#6a1fd0);border-color:#e3b6ff}
button.blau{background:linear-gradient(#1fb6ff,#0b5fa8);border-color:#a8e2ff}
button.rot{background:linear-gradient(var(--rot1),var(--rot2));border-color:#ffb0bd}
button.klein{padding:5px 9px;font-size:13px}
button.breit{width:100%;margin-top:6px}
input,select,textarea{background:var(--feld);border:1px solid var(--rand2);border-radius:7px;padding:5px 8px;color:#fff;min-width:0}
textarea{width:100%;resize:vertical}
input[type=text]{width:100%}
select option{background:var(--feld);color:#fff}
input[type=checkbox]{accent-color:var(--orange1);width:16px;height:16px;margin:0;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;background:none;border:0;padding:0;height:22px;flex:1 1 auto;min-width:60px}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--koralle),var(--orange1))}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--koralle),var(--orange1))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--gold);border:2px solid #1d0f3a;margin-top:-5px}
input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold);border:2px solid #1d0f3a}

/* ---------- Kopf */
#kopf{height:var(--kopfH);flex:none;display:flex;align-items:center;gap:8px;padding:0 8px;
  background:linear-gradient(90deg,#4a1670,#2a1d7a 45%,#0d4b7a);border-bottom:1px solid #6c4bd6;box-shadow:0 2px 10px #0006;z-index:3}
#marke{display:flex;align-items:center;gap:7px;flex:none}
#marke img{width:32px;height:32px;border-radius:8px;box-shadow:0 0 0 1px #ffffff30}
#marke b{font-size:18px;color:#fff;letter-spacing:.2px}
#marke i{font-style:normal;font-weight:800;font-size:11px;margin-top:6px;background:linear-gradient(90deg,var(--koralle),var(--orange1));-webkit-background-clip:text;background-clip:text;color:transparent}
#menue{display:flex;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
#menue button{background:none;border:0;border-radius:6px;padding:6px 10px;font-weight:600}
#menue button:hover,#menue button.offen{background:var(--orange2);color:#1d0f3a;filter:none}
#kopfRechts{display:flex;align-items:center;gap:6px;flex:none}
#menuePop{position:fixed;z-index:40;background:#22124a;border:1px solid #6c4bd6;border-radius:10px;padding:5px;min-width:270px;box-shadow:0 12px 34px #000a;max-height:calc(100vh - 60px);overflow:auto}
#menuePop button{display:flex;justify-content:space-between;gap:18px;width:100%;background:none;border:0;border-radius:6px;padding:7px 10px;font-weight:500;text-align:left}
#menuePop button:hover:not(:disabled){background:var(--orange2);color:#1d0f3a;filter:none}
#menuePop button kbd{font:12px "Segoe UI",sans-serif;opacity:.7}
#menuePop hr{border:0;border-top:1px solid #6c4bd6;margin:4px 2px}

/* ---------- drei Spalten */
#reihe{flex:1 1 auto;min-height:0;display:flex;gap:8px;padding:8px 8px 4px}
.seite{flex:none;width:272px;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:2px;padding-right:2px}
#rechts{width:286px}
.gruppe{border:1px solid var(--rand2);border-radius:12px;margin:8px 0 2px;padding:8px 9px 9px;background:var(--panel);min-width:0;min-inline-size:0}
.gruppe legend{color:var(--gold);font-weight:800;padding:0 5px;font-size:13.5px}
.zeile{display:flex;align-items:center;gap:8px;margin-top:6px}
.zeile>span{flex:none;width:76px;color:var(--leise);font-size:12.5px}
.zeile select,.zeile input{flex:1 1 auto;width:0;min-width:0}
.regel{display:flex;align-items:center;gap:7px;margin-top:6px}
.regel>span{flex:none;width:76px;color:var(--leise);font-size:12.5px}
.regel em{flex:none;width:44px;text-align:right;font-style:normal;color:var(--hell);font-size:12px}
.haken{display:flex;align-items:center;gap:8px;margin-top:8px;cursor:pointer;font-size:13px}
.haken.klein{margin:0;font-size:12px;color:var(--leise)}
.hinweis{color:var(--hell);font-size:12.5px;margin:6px 2px}
.leise{color:var(--leise);font-size:12.5px}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.segment{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.segment button{padding:6px 4px;font-size:12.5px}

.formate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px}
.formate button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px;white-space:normal;line-height:1.15;font-size:12px;min-height:84px}
.formate button small{font-weight:500;opacity:.85;font-size:11px}
.formate .form{background:#0b0816;border:2px solid #9fd8ff;border-radius:3px;margin-bottom:2px}
.formate button.an .form{border-color:#1d0f3a;background:#fff4}

.musikKarte{border-radius:10px;padding:8px 10px;background:linear-gradient(120deg,#3a1670,#0d4b7a);border:1px solid #8f73ff;margin-bottom:2px}
.musikKarte.leerM{background:#120a2a;border-style:dashed}
.mName{font-weight:800;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mInfo{font-size:12px;color:var(--hell)}

/* ---------- Bühne */
#buehne{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
#rahmen{position:relative;flex:1 1 auto;min-height:0;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center,#22184a 0%,#0b0812 75%);border:1px solid #3d2b7a}
#handy{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 0 0 3px #2b1d5c,0 0 0 5px #8f73ff55,0 20px 50px #000c;background:#000}
#handy.quer{border-radius:10px}
#vorschau{display:block}
#zone{position:absolute;inset:0;pointer-events:none}
#zone i{position:absolute;background:repeating-linear-gradient(45deg,#ff5f8f33 0 8px,#ff5f8f18 8px 16px);border:1px dashed #ff5f8f99}
#zone b{position:absolute;inset:auto;color:#ffd166;font-size:11px}
#grossPlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;font-size:30px;padding:0;
  background:#000a;border:2px solid #ffd166;color:#ffd166;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding-left:6px}
#handy.spielt #grossPlay{opacity:0;pointer-events:none}
#leer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px}
.leerKarte{text-align:center;max-width:470px;padding:28px 26px;border-radius:18px;border:2px dashed #7d62ff;background:linear-gradient(160deg,#2a1757ee,#0d2c48ee);box-shadow:0 20px 50px #0008}
.leerSym{font-size:56px;line-height:1;filter:drop-shadow(0 4px 10px #ff5f8f66)}
.leerKarte h2{margin:10px 0 6px;font-size:23px;background:linear-gradient(90deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.leerKarte p{margin:9px 0}
.leerKarte .formate{display:block;font-size:12px;color:var(--hell)}
#steuer{flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px}
#zeit{font-variant-numeric:tabular-nums;color:var(--hell);font-weight:700;min-width:96px}
#bpm{color:var(--gold);font-size:12.5px;font-weight:700}
#tippLeiste{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;
  background:rgba(26,15,56,.95);border:1px solid #ffd166;z-index:5;white-space:nowrap}
#tippKnopf{font-size:16px;padding:10px 16px}

/* ---------- rechte Seite */
.bildKopf{display:flex;gap:10px;align-items:center;margin:6px 0 2px}
.bildKopf canvas{width:72px;height:72px;border-radius:10px;border:2px solid #ffbf3c;background:#000;flex:none}
.bildKopf b{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bildKopf span{display:block}
.ges{color:var(--tuerkis);font-size:12.5px;font-weight:700}
.fxGalerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.fxGalerie button{padding:3px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;background:#120a2a;border:2px solid #3d2b7a;border-radius:9px}
.fxGalerie button canvas{width:100%;aspect-ratio:1;border-radius:6px;display:block;background:#000}
.fxGalerie button.an{border-color:var(--orange1);background:#2a1757;color:var(--gold)}

/* ---------- Zeitleiste */
#leiste{flex:none;height:var(--leisteH);margin:0 8px 6px;border:1px solid #5f45c8;border-radius:12px;background:rgba(18,10,42,.82);display:flex;flex-direction:column;overflow:hidden}
#leisteKopf{display:flex;align-items:center;gap:10px;padding:5px 8px 3px}
#leisteKopf b{color:var(--gold)}
.rechtsbuendig{margin-left:auto;display:flex;gap:5px}
#spur{flex:1 1 auto;min-height:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;position:relative;touch-action:pan-x}
#spurBild{display:block;height:100%}

#werbung{flex:none;height:var(--wbH);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;text-decoration:none;font-size:13px;white-space:nowrap;overflow:hidden;
  background:linear-gradient(90deg,#ff4fa3,#7b3cff 50%,#19b6ff)}
#statusleiste{flex:none;height:var(--stH);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 10px;background:#0a1630;color:var(--hell);font-size:12.5px}
#status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#signatur{color:var(--gold);font-weight:700;white-space:nowrap}

/* ---------- Dialoge */
#schleier{position:fixed;inset:0;z-index:50;background:#05030ccc;display:flex;align-items:center;justify-content:center;padding:14px}
#karte{width:min(520px,100%);max-height:calc(100vh - 28px);overflow:auto;background:linear-gradient(160deg,#2a1757,#0d2c48);border:1px solid var(--rand);border-radius:16px;padding:16px 18px;box-shadow:0 24px 60px #000c}
#karte h3{margin:0 0 10px;color:var(--gold);font-size:19px}
#karte p{margin:8px 0}
#karte .knoepfe{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;flex-wrap:wrap}
#karte .wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;margin:6px 0}
#karte .wahl button{white-space:normal;line-height:1.2}
#karte label.zeile>span{width:120px}
.lieder{display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto;margin-top:8px;padding-right:2px}
.lied{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;background:#120a2acc;border:1px solid #3d2b7a}
.lied .lt{flex:1 1 auto;min-width:0}
.lied .lt b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lied .lt span{font-size:12px;color:var(--leise)}
.lied.an{border-color:var(--orange1)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chips button{padding:4px 10px;border-radius:20px;font-size:12.5px}
#fortschritt{position:fixed;inset:0;z-index:60;background:#05030cbb;display:flex;align-items:center;justify-content:center;padding:16px}
.fkarte{width:min(420px,100%);background:linear-gradient(160deg,#2a1757,#0d2c48);border:1px solid var(--rand);border-radius:16px;padding:16px 18px;text-align:center}
.fkarte h3{margin:0 0 12px;color:var(--gold)}
.balken{height:14px;border-radius:8px;background:#120a2a;border:1px solid #5f45c8;overflow:hidden}
.balken i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--koralle),var(--orange1));transition:width .15s}
#fText{min-height:20px;color:var(--hell);font-size:13px}
#ablage{position:fixed;inset:0;z-index:70;background:#2a175799;display:flex;align-items:center;justify-content:center;pointer-events:none}
#ablage div{font-size:24px;font-weight:800;padding:26px 34px;border:3px dashed var(--gold);border-radius:20px;background:#1a0f33e6;color:var(--gold)}
#hinweis{position:fixed;left:50%;bottom:calc(var(--wbH) + var(--stH) + 14px);transform:translateX(-50%);z-index:80;background:linear-gradient(90deg,#6e28c8,#1e6edc);
  border:1px solid #b9a4ff;border-radius:10px;padding:9px 14px;font-weight:700;box-shadow:0 10px 30px #000a;max-width:min(560px,92vw);text-align:center}

/* ---------- schmale Bildschirme (Handy) */
.nurSchmal{display:none}
#tabs{flex:none;gap:4px;padding:4px 8px}
#tabs button{flex:1 1 0;padding:7px 4px;font-size:12.5px}
.seiteKopf{align-items:center;justify-content:space-between;padding:4px 2px}
@media (max-width:980px){
  :root{--leisteH:150px}
  .nurSchmal{display:flex}
  #menue{display:none}
  #kopfRechts button span{display:none}
  #kopfRechts button[data-a="video"] span{display:inline}
  #marke i{display:none}
  .seite{position:fixed;left:0;right:0;bottom:0;max-height:66vh;width:auto!important;z-index:30;background:linear-gradient(160deg,#1f1145,#0c2a3f);
    border-top:2px solid var(--rand);border-radius:16px 16px 0 0;padding:6px 12px 14px;box-shadow:0 -14px 40px #000b;transform:translateY(105%);transition:transform .22s}
  .seite.offen{transform:none}
  #reihe{padding:6px 6px 2px}
  #leiste{margin:0 6px 4px}
  #steuer .haken.klein{display:none}
  #signatur{font-size:11px}
}
@media (max-width:480px){
  #werbung{font-size:11px}
  #statusleiste #status{max-width:46vw}
}