:root{--bg:#0f141b;--card:#171e29;--card2:#1d2635;--line:#263146;--tx:#e8edf5;--mut:#8d9bb0;--amb:#ffb020;--grn:#35d07f;--red:#ff5a4f;--blu:#4da3ff;--r:12px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;overscroll-behavior:none}
body{user-select:none;-webkit-user-select:none;touch-action:manipulation}
button{font:inherit;color:inherit;border:1px solid var(--line);background:var(--card2);border-radius:10px;min-height:44px;padding:0 14px;cursor:pointer}
button:active{filter:brightness(1.25)}
button:disabled{opacity:.4}
button.primary{background:var(--amb);border-color:var(--amb);color:#201400;font-weight:700}
button.danger{background:var(--red);border-color:var(--red);color:#fff;font-weight:800;letter-spacing:.06em}
input,select,textarea{font:inherit;color:var(--tx);background:#0c1119;border:1px solid var(--line);border-radius:10px;min-height:44px;padding:0 12px;user-select:text;-webkit-user-select:text}
input[type=range]{padding:0;min-height:36px;accent-color:var(--amb);background:transparent;border:0}
label{display:block;font-size:13px;color:var(--mut);margin:10px 0 4px}
label input,label select{display:block;width:100%;margin-top:4px}
.err{color:var(--red);min-height:1.2em;margin:.6em 0 0}.hint{color:var(--mut);font-size:13px}
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:20px}
#login[hidden],#app[hidden],#editor[hidden],#settings[hidden],#modal[hidden]{display:none}
#lform{width:min(420px,100%);background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px}
#lform h1{margin:0;font:800 30px "Barlow Condensed","Barlow",sans-serif;letter-spacing:.12em}
#lform .sub{margin:4px 0 14px;color:var(--mut)}#lform button{width:100%;margin-top:18px}
/* App */
#app{position:fixed;inset:0;display:grid;grid-template-rows:auto auto 1fr auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
header{display:flex;align-items:center;gap:12px;padding:8px 14px;border-bottom:1px solid var(--line);background:#0b1017}
header .logo{font:800 22px "Barlow Condensed","Barlow",sans-serif;letter-spacing:.12em;white-space:nowrap}
header .addr{font-size:12px;color:var(--mut)}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:4px 12px;min-height:34px;background:var(--card);font-size:14px;white-space:nowrap}
.chip b{font-weight:800}.chip.live{border-color:#2a6b4a}.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--mut)}
.dot.ok{background:var(--grn)}.dot.slow{background:var(--amb)}.dot.off{background:var(--red)}.dot.live{background:var(--red);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.35}}
header .sp{flex:1}
button.chipb{min-height:36px;border-radius:999px;padding:0 12px;font-size:14px}
button.out{border-color:#2a6b4a;color:var(--grn)}button.out.no{border-color:var(--amb);color:var(--amb)}
#banner{display:none;padding:9px 16px;font-weight:600;font-size:15px}
#banner.show{display:block}#banner.slow{background:#4a3708;color:#ffd277}#banner.off{background:#4a1612;color:#ffb0aa}#banner.info{background:#13304a;color:#a9d4ff}
main{display:grid;grid-template-columns:300px 1fr;gap:12px;padding:12px 14px;min-height:0}
aside{display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0;padding-right:2px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.card h3{margin:0 0 8px;font:700 12px "Barlow",sans-serif;letter-spacing:.14em;color:var(--mut)}
.paused{opacity:.55}.paused h3::after{content:" · pausiert wegen Verbindung";color:var(--amb)}
.modes{display:flex;flex-direction:column;gap:6px}
.mode{display:flex;gap:10px;align-items:flex-start;text-align:left;padding:8px 10px;min-height:54px;border-radius:10px}
.mode.on{border-color:var(--amb);background:#2a2110}.mode b{display:block;font-size:15px}.mode span{font-size:12px;color:var(--mut)}
.mode i{width:18px;height:18px;border-radius:50%;border:2px solid var(--mut);flex:none;margin-top:2px}.mode.on i{border-color:var(--amb);background:radial-gradient(var(--amb) 45%,transparent 50%)}
.row{display:flex;align-items:center;gap:8px;margin:6px 0}.row>.grow{flex:1;min-width:0}
.row select{flex:1;min-width:0;max-width:100%;min-height:40px}
.sw{position:relative;width:50px;height:30px;border-radius:999px;background:#2a3446;border:0;padding:0;flex:none;min-height:30px}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#9aa7bb;transition:.15s}
.sw.on{background:#17543a}.sw.on::after{left:23px;background:var(--grn)}
.small{font-size:12px;color:var(--mut)}.next{font-size:13px;color:var(--amb);margin-top:6px}
.right{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}
.tabs{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tab{padding:0 16px;min-height:46px;font-weight:700}.tab.on{background:var(--amb);color:#201400;border-color:var(--amb)}.tab small{opacity:.7;font-weight:600;margin-left:6px}
.tabs .sp{flex:1}
.tgt{display:flex;gap:6px;align-items:center;overflow-x:auto;padding:2px 0}.tgt button{min-height:38px;white-space:nowrap;border-radius:999px;font-size:14px}.tgt button.on{border-color:var(--amb);color:var(--amb)}
.scroll{overflow:auto;min-height:0;padding-right:2px;flex:1}
.group{margin:2px 0 14px}.group>h4{margin:0 0 8px;font:700 12px "Barlow",sans-serif;letter-spacing:.14em;color:var(--mut)}
.pads{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.pad{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;min-height:112px;padding:10px 12px 8px;display:flex;flex-direction:column;justify-content:space-between;text-align:left;overflow:hidden}
.pad.play{border-color:var(--grn);background:#10261d}.pad.armed{border-color:var(--amb)}.pad.wait{opacity:.6}
.pad .nm{font-weight:700;font-size:16px;line-height:1.15;padding-right:34px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pad .sub{font-size:12px;color:var(--mut);margin-top:2px}
.pad svg.wf{width:calc(100% - 84px);height:34px;display:block;margin-top:6px}.pad svg.wf path{fill:#4a5b78}.pad.play svg.wf path{fill:var(--grn)}
.pad .tag{position:absolute;top:8px;right:8px;font-size:11px;background:#233048;color:#b9c6da;border-radius:6px;padding:1px 6px}
.pad .prog{position:absolute;left:0;bottom:0;height:4px;background:var(--grn);width:0}
.pad .ico{position:absolute;right:6px;bottom:6px;display:flex;gap:4px}
.pad .ico button{min-height:34px;min-width:34px;padding:0;border-radius:8px;background:#0c1119;font-size:15px}
.pad .ico button.on{background:var(--amb);color:#201400;border-color:var(--amb)}
.pad .badge{position:absolute;left:10px;bottom:48px;font-size:11px;color:var(--amb);font-weight:700}
.empty{color:var(--mut);padding:18px;border:1px dashed var(--line);border-radius:12px;text-align:center}
.add{min-height:112px;border-style:dashed;color:var(--mut);display:flex;align-items:center;justify-content:center;border-radius:14px;background:transparent}
/* Decks */
.decks{display:grid;grid-template-columns:1fr 1fr;gap:10px}.deck{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.deck h4{margin:0;font:800 13px "Barlow",sans-serif;letter-spacing:.14em;color:var(--mut)}.deck .t{font-weight:700;font-size:17px;margin:4px 0;min-height:22px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.deck svg.wf{width:100%;height:56px}.deck svg.wf path{fill:#4a5b78}.deck .cur{position:relative}.deck .cur i{position:absolute;top:0;bottom:0;width:2px;background:var(--amb);left:0}
.deck .ctl{display:flex;gap:8px;align-items:center;margin-top:6px}.deck .tm{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--mut)}
.xf{display:flex;align-items:center;gap:12px;margin:8px 0}.xf input{flex:1}
.lib{display:flex;flex-direction:column;gap:6px}.lib .it{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:4px 8px 4px 12px;min-height:48px}.lib .it .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}.lib .it button{min-height:38px;padding:0 12px}
/* Fußleiste */
footer{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);background:#0b1017}
.now{flex:1;min-width:0}.now .l{font-size:11px;letter-spacing:.14em;color:var(--mut)}.now .ti{font-weight:800;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now .bar{height:6px;background:#1e2736;border-radius:3px;margin-top:5px;overflow:hidden}.now .bar i{display:block;height:100%;width:0;background:var(--grn)}.now .tm{font-size:12px;color:var(--mut);margin-top:3px}
.vol{display:flex;align-items:center;gap:8px;width:210px}.vol input{flex:1}
footer .big{min-width:150px;min-height:56px;font-size:16px}footer .stop{min-width:120px;min-height:56px;font-size:17px}
button.pend{background:var(--amb);color:#201400;border-color:var(--amb);font-weight:800;animation:pulse 1.2s infinite;min-width:230px}
#toasts{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:50;pointer-events:none}
.toast{background:#1d2a3d;border:1px solid var(--line);border-radius:10px;padding:10px 16px;box-shadow:0 8px 24px #0008}
.toast.err{border-color:var(--red)}.toast.ok{border-color:var(--grn)}
#modal{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:60;padding:16px}.mbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;width:min(460px,100%);max-height:90vh;overflow:auto}
.mbox h3{margin:0 0 10px;font-size:20px}.mbox .btns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
/* Editor */
#editor,#settings{position:fixed;inset:0;background:var(--bg);z-index:40;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#editor .eh{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}#editor .eh h2{margin:0;font-size:20px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#editor .eb{flex:1;overflow:auto;padding:12px 14px;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}
#editor .wide{grid-column:1/3}
#wfc{position:relative;height:250px;background:#0c1119;border:1px solid var(--line);border-radius:12px;touch-action:none;overflow:hidden}
#wfc canvas{position:absolute;inset:0;width:100%;height:100%}
.mk{position:absolute;top:0;bottom:0;width:34px;margin-left:-17px;cursor:ew-resize;touch-action:none}.mk::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:2px;background:var(--c)}.mk span{position:absolute;top:2px;left:50%;transform:translateX(-50%);background:var(--c);color:#10141b;font-size:10px;font-weight:800;padding:1px 5px;border-radius:5px;white-space:nowrap}
.mk.cue span{top:auto;bottom:2px}
.ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;pointer-events:none}
.sl{display:grid;grid-template-columns:130px 1fr 74px;align-items:center;gap:8px;margin:4px 0}.sl .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--amb)}
.cues .c{display:flex;gap:8px;align-items:center;margin:6px 0}.cues .c input[type=text]{flex:1;min-width:0}

@media (max-height:700px){.pad{min-height:96px}}

.mk.edge span{left:auto;right:17px;transform:none}.mk.edge0 span{left:17px;transform:none}

textarea{width:100%;min-height:110px;padding:10px 12px;resize:vertical;line-height:1.35}
.mrow{margin-top:-2px}.mini{min-height:36px;padding:0 10px;font-size:13px;flex:1}
.warn{font-size:12px;color:var(--amb);margin:-2px 0 6px}
.mbox.wide{width:min(640px,100%)}
.pad.add small{display:block;opacity:.7;margin-top:2px}
.vrow{display:flex;gap:8px;align-items:center}.vrow select{flex:1}

#settings .sb{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:12px;max-width:760px;width:100%;margin:0 auto}
#settings .eh{display:flex;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}#settings .eh h2{margin:0;font-size:20px;flex:1}
#settings .stabs{display:flex;gap:6px;padding:10px 14px 0;flex-wrap:wrap}
#settings .stabs .tab{min-height:42px}
#settings .kv{display:grid;grid-template-columns:170px 1fr;gap:6px 12px;font-size:15px}#settings .kv span:nth-child(odd){color:var(--mut)}
#settings .ok{color:var(--grn)}#settings .bad{color:var(--red)}
#settings code,.mbox code{background:#0c1119;border:1px solid var(--line);border-radius:6px;padding:2px 6px;user-select:text;-webkit-user-select:text}
#settings pre{background:#0c1119;border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow:auto;user-select:text;-webkit-user-select:text;margin:6px 0}
#settings .ver{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}#settings .ver .grow{flex:1}
#settings .log{font-size:13px;color:var(--mut)}#settings .log div{padding:3px 0;border-top:1px solid #1d2635}
#settings .stage{border:1px solid var(--amb);background:#2a2110;border-radius:12px;padding:12px}
#settings .wrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
#settings .rng{display:grid;grid-template-columns:1fr 60px;gap:8px;align-items:center}
#restart{position:fixed;inset:0;background:#000d;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:20px}

/* 4.2: Vorwahl, Kategorien, Ziehen & Ablegen */
.pad.armed{border-color:var(--amb);border-width:2px;background:#2a2110;box-shadow:0 0 0 2px rgba(255,176,32,.35),0 0 18px rgba(255,176,32,.25)}
.pad.armed.play{background:#10261d;border-color:var(--grn);box-shadow:none}
.pad .pick{position:absolute;left:10px;top:8px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--amb)}
.pad .badge{left:10px}
.hint.hh{margin:0 0 8px}.catbar{display:flex;gap:10px;align-items:center;margin:0 0 12px;flex-wrap:wrap}
.group>h4 small{opacity:.7;font-weight:600;margin-left:4px}.group.cat>h4{display:flex;align-items:center;gap:8px;color:var(--tx)}
.group.cat{background:#131a25;border:1px solid var(--line);border-radius:14px;padding:8px 10px 10px}
.empty.dz{grid-column:1/-1;border:1px dashed var(--line);border-radius:12px;padding:18px;text-align:center}
.pad[data-drag]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.pad.dragsrc{opacity:.3}.pad.ghost{position:fixed;z-index:90;pointer-events:none;opacity:.92;box-shadow:0 10px 28px rgba(0,0,0,.55);transform:rotate(1.5deg)}
.pad.dropbefore{box-shadow:-6px 0 0 var(--amb)}.group.dropin{outline:2px dashed var(--amb);outline-offset:2px}
body.dragging,body.dragging *{cursor:grabbing!important}
.gsel{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.chk{display:flex;gap:10px;align-items:center;min-height:44px}.chk input{width:24px;height:24px;min-height:0;accent-color:var(--amb)}

/* 4.2: Reiter Ansagen */
.composer textarea{width:100%;min-height:74px;resize:vertical;font:inherit}
.crow{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;margin:8px 0}.crow label{display:block;font-size:13px;color:var(--mut)}.crow select,.crow input:not([type=range]){width:100%}
.crow.btns2{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.crow.btns2 button{min-height:46px}
.composer .gsel{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.nxs{margin:8px 0;padding:8px 10px;background:#0c1119;border:1px solid var(--line);border-radius:10px;font-size:14px}
.alist{display:flex;flex-direction:column;gap:8px}
.arow{position:relative;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 10px;overflow:hidden;min-height:58px}
.arow .anm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}.arow button{min-height:44px}
.arow .prog{position:absolute;left:0;bottom:0;height:4px;background:var(--grn);width:0}.arow.play{border-color:var(--grn);background:#10261d}

/* 4.2: Anpassung an die Fensterbreite (iPad: Split View / Slide Over) und ausblendbare Seitenleiste */
main{grid-template-columns:clamp(240px,27vw,320px) minmax(0,1fr)}
#app.nosb main{grid-template-columns:minmax(0,1fr)}#app.nosb aside{display:none}
.sbback{display:none}
header{flex-wrap:wrap;row-gap:6px}header .logo{min-width:0}
button.modechip{border-color:var(--amb);color:var(--amb)}
@media (max-width:1100px){.vol{width:150px}footer .big{min-width:120px}footer .stop{min-width:100px}header .uname{display:none}.pads{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media (max-width:1100px){header .lbl{display:none}}
@media (max-width:900px){header .hide-s{display:none}header .chipb.out .lbl{display:none}button.pend{min-width:160px}.tab{padding:0 12px}}
@media (max-width:760px){
  main{grid-template-columns:minmax(0,1fr);padding:10px}
  aside{position:fixed;left:0;top:var(--hh,56px);bottom:0;width:min(340px,88vw);z-index:35;background:var(--bg);padding:10px;border-right:1px solid var(--line);box-shadow:8px 0 30px #000a}
  #app:not(.nosb) .sbback{display:block;position:fixed;left:0;right:0;bottom:0;top:var(--hh,56px);background:#0007;z-index:30}
  #app:not(.nosb) aside{z-index:36}
  header .logo{display:none}
  footer{flex-wrap:wrap;gap:8px;padding:8px 10px}.now{flex:1 1 100%;order:-1}.vol{flex:1 1 140px;width:auto}footer .big,footer .stop{min-height:50px;flex:1 1 auto}
  .decks{grid-template-columns:1fr}.crow{grid-template-columns:1fr}
  #editor .eb{grid-template-columns:1fr}#editor .wide{grid-column:auto}
  .sl{grid-template-columns:96px 1fr 62px}
  .pad{min-height:100px}.arow{flex-wrap:wrap}.arow .anm{flex:1 1 100%}
  .mbox{padding:16px}#settings .kv{grid-template-columns:120px 1fr}
}
@media (max-width:480px){.pads{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}.tab small{display:none}.chip{font-size:13px;padding:3px 9px}header{padding:6px 10px;gap:8px}}
.catbar .mini{flex:none}

/* 4.2.1: nichts darf breiter als das Fenster werden (sonst verkleinert Safari die ganze Seite statt umzubrechen) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;width:100%;max-width:100%;overflow-x:hidden}
body{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
#app{width:100%;max-width:100%;overflow:hidden}
#app>*{min-width:0;max-width:100%}
main>*,.right{min-width:0}
.right{overflow:hidden}
header,footer{max-width:100%}
.pads{min-width:0}