/* VIRUS ORFEUS — REPLIKATION 2026 · Raum KATABASIS 3D (eingebettet) · medienwerkstatt006 · alle Regeln unter .kbx */
.kbx{font-family:var(--mono);font-size:13.5px;line-height:1.6;color:var(--papier);background:#000;position:relative;max-width:1680px;margin:0 auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kbx ul{list-style:none;margin:0;padding:0}
.kbx p{margin:0 0 .8em}
.kbx a{color:var(--gelb)}
.kbx{--nacht:#070916;--nacht2:#0b0e22;--line:#1c2144;--line2:#2b3266;--papier:#f0ede2;--dim:#a6acc8;--dim2:#6a7195;--ultra:#1830d2;--ultra2:#3c55ff;--gelb:#f6e226;--rot:#ff4a52;
  --ser:"Cormorant Garamond",Georgia,serif;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace}
.kbx,.kbx *{box-sizing:border-box}
.kbx button{font:inherit;cursor:pointer}
.kbx :focus-visible{outline:2px solid var(--gelb);outline-offset:2px}
.kbx .kb-main{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:calc(100vh - var(--mw4-height,70px) - 60px);background:#000}
@media(max-width:1000px){.kbx .kb-main{grid-template-columns:1fr}}
.kbx .kb-main.nopanel{grid-template-columns:1fr}
.kbx .kb-main.nopanel .kb-panel{display:none}
.kbx .kb-stage{position:relative;overflow:hidden;min-height:56vh;background:#000;touch-action:none}
@media(max-width:1000px){.kbx .kb-stage{height:62vh}}
.kbx .kb-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.kbx .kb-hud{position:absolute;left:14px;right:14px;top:10px;display:flex;justify-content:space-between;gap:10px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);pointer-events:none;z-index:3}
.kbx .kb-hud b{color:var(--gelb);font-weight:400}
.kbx .kb-meter{position:absolute;left:14px;right:14px;bottom:12px;z-index:3;pointer-events:none;font-size:10px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.kbx .kb-meter .bar{position:relative;height:2px;background:var(--line2);margin:16px 0 6px}
.kbx .kb-meter .bar i{position:absolute;top:-8px;width:1px;height:18px;background:var(--dim2)}
.kbx .kb-meter .bar .me{position:absolute;top:-12px;width:3px;height:26px;background:var(--gelb)}
.kbx .kb-meter .bar .eu{position:absolute;top:-6px;width:3px;height:14px;background:var(--papier)}
.kbx .kb-meter .row{display:flex;justify-content:space-between;gap:10px}
.kbx .kb-eury{display:inline-flex;gap:3px;vertical-align:middle}
.kbx .kb-eury i{width:10px;height:10px;border:1px solid var(--papier)}
.kbx .kb-eury i.on{background:var(--papier)}
.kbx #labels{position:absolute;inset:0;pointer-events:none;z-index:2}
.kbx #labels .kblb{position:absolute;transform:translate(-50%,-100%);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap;text-shadow:0 0 4px #000}
.kbx #labels .kblb.on{color:var(--gelb)}
.kbx #labels .kblb.o{color:var(--papier)}
.kbx .kb-title{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;background:radial-gradient(ellipse at center,rgba(7,9,22,.55),rgba(7,9,22,.92))}
.kbx .kb-title.off{display:none}
.kbx .kb-title b{font-family:var(--ser);font-weight:700;font-size:clamp(44px,8vw,120px);letter-spacing:.08em;line-height:.9}
.kbx .kb-title em{font-family:var(--ser);font-style:italic;color:var(--gelb);font-size:clamp(22px,2.6vw,36px);margin:10px 0 18px}
.kbx .kb-title p{max-width:62ch;color:var(--papier);margin:0 0 8px}
.kbx .kb-title .code{color:var(--gelb);letter-spacing:.2em;margin-top:10px}
.kbx .row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.kbx .kb-btn,.kbx .row button{background:transparent;color:var(--papier);border:1px solid var(--line2);padding:8px 12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.kbx .kb-btn:hover,.kbx .row button:hover{border-color:var(--gelb);color:var(--gelb)}
.kbx .row button.go,.kbx .kb-btn.go{background:var(--gelb);color:var(--nacht);border-color:var(--gelb)}
.kbx .row button.go:hover{background:#fff27a}
.kbx .row button:disabled{opacity:.35;cursor:default}
.kbx .kb-toast{position:absolute;left:50%;top:44px;transform:translateX(-50%);z-index:6;background:rgba(7,9,22,.92);border:1px solid var(--gelb);color:var(--papier);padding:10px 16px;max-width:min(80%,640px);font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}
.kbx .kb-toast.on{opacity:1}
.kbx .kb-sub{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);z-index:4;text-align:center;font-family:var(--ser);font-size:clamp(20px,2.4vw,34px);color:var(--papier);opacity:0;transition:opacity .5s;pointer-events:none;text-shadow:0 0 8px #000;max-width:90%}
.kbx .kb-sub small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;color:var(--gelb);text-transform:uppercase}
.kbx .kb-sub.on{opacity:1}
.kbx .kb-look{position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 0 rgba(255,74,82,0);transition:box-shadow .3s}
.kbx .kb-look.on{box-shadow:inset 0 0 0 6px rgba(240,237,226,.6),inset 0 0 120px rgba(240,237,226,.25)}
.kbx .kb-hit{position:absolute;inset:0;z-index:3;pointer-events:none;background:rgba(255,74,82,0);transition:background .2s}
.kbx .kb-hit.on{background:rgba(255,74,82,.25)}
.kbx .kb-end{position:absolute;inset:0;z-index:7;display:none;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:30px;background:rgba(7,9,22,.9)}
.kbx .kb-end.on{display:flex}
.kbx .kb-end h2{font-family:var(--ser);font-size:clamp(34px,5vw,72px);margin:0 0 6px;font-weight:700;letter-spacing:.06em}
.kbx .kb-end p{max-width:60ch;margin:4px 0}
.kbx .kb-end .stat{color:var(--gelb);letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;margin:12px 0}
.kbx .kb-prog{position:absolute;left:0;right:0;bottom:0;height:24px;z-index:8;display:none;background:rgba(7,9,22,.9);border-top:1px solid var(--line2)}
.kbx .kb-prog.on{display:block}
.kbx .kb-prog i{position:absolute;left:0;top:0;bottom:0;background:var(--ultra)}
.kbx .kb-prog span{position:relative;padding:0 10px;line-height:24px;font-size:11px}
.kbx .kb-drop{position:absolute;inset:0;z-index:9;display:none;align-items:center;justify-content:center;background:rgba(24,48,210,.35);border:3px dashed var(--gelb);font-size:16px;letter-spacing:.14em;text-transform:uppercase}
.kbx .kb-drop.on{display:flex}
.kbx .kb-stagebtns{position:absolute;right:12px;top:30px;z-index:6;display:flex;gap:6px}
.kbx .kb-stagebtns button{background:rgba(7,9,22,.8);color:var(--papier);border:1px solid var(--line2);padding:6px 10px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.kbx .kb-touch{position:absolute;left:12px;bottom:58px;z-index:6;display:none;gap:6px;flex-wrap:wrap;max-width:260px}
.kbx .kb-touch button{width:52px;height:44px;background:rgba(7,9,22,.75);color:var(--papier);border:1px solid var(--line2);font-size:16px}
@media(pointer:coarse){.kbx .kb-touch{display:flex}}
.kbx .kb-panel{background:var(--nacht);border-left:1px solid var(--line);display:flex;flex-direction:column;max-height:calc(100vh - var(--mw4-height,70px));overflow:hidden}
@media(max-width:1000px){.kbx .kb-panel{max-height:none;border-left:0;border-top:1px solid var(--line)}}
.kbx .kb-tabs{display:flex;border-bottom:1px solid var(--line)}
.kbx .kb-tabs button{flex:1;background:transparent;border:0;border-right:1px solid var(--line);color:var(--dim);padding:12px 4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.kbx .kb-tabs button[aria-selected=true]{color:var(--gelb);background:rgba(246,226,38,.06)}
.kbx .kb-tab{display:none;padding:16px 18px 30px;overflow:auto}
.kbx .kb-tab.on{display:block}
.kbx .kb-tab h2{font-family:var(--ser);font-size:30px;margin:0 0 6px;font-weight:700;letter-spacing:.04em}
.kbx .kb-tab h3{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gelb);margin:20px 0 8px;font-weight:400}
.kbx .hint{color:var(--dim);font-size:12.5px}
.kbx .dim{color:var(--dim2)}
.kbx kbd{border:1px solid var(--line2);padding:0 4px;font-size:11px;color:var(--papier)}
.kbx .kb-code{display:flex;gap:6px;align-items:center;margin:10px 0}
.kbx .kb-code input{flex:1;background:var(--nacht2);border:1px solid var(--line2);color:var(--gelb);padding:7px 8px;font:inherit;letter-spacing:.12em}
.kbx .kb-code button{background:transparent;border:1px solid var(--line2);color:var(--papier);padding:6px 9px}
.kbx .kb-rings{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.kbx .kb-rings li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.kbx .kb-rings li b{font-family:var(--ser);font-size:20px;color:var(--dim)}
.kbx .kb-rings li.on b,.kbx .kb-rings li.cur b{color:var(--gelb)}
.kbx .kb-rings li.on .st{color:var(--gelb)}
.kbx .kb-rings li.cur{background:rgba(246,226,38,.05)}
.kbx .kb-rings .st{font-size:10.5px;letter-spacing:.12em;color:var(--dim2);text-transform:uppercase}
.kbx .kb-rings .w{display:block;color:var(--dim);font-size:11px}
.kbx .kb-log{list-style:none;padding:0;margin:0;font-size:11.5px;color:var(--dim);max-height:180px;overflow:auto}
.kbx .kb-log li{padding:3px 0;border-bottom:1px solid var(--line)}
.kbx .kb-log b{color:var(--gelb);font-weight:400;margin-right:8px}
.kbx .kb-tab label{display:block;margin:8px 0;font-size:12px;color:var(--dim)}
.kbx .kb-tab select,.kbx .kb-tab input[type=range]{width:100%;background:var(--nacht2);color:var(--papier);border:1px solid var(--line2);padding:5px;font:inherit}
.kbx .kb-tab input[type=file]{font-size:11px;color:var(--dim);width:100%}
.kbx .kb-file{border:1px dashed var(--line2);padding:10px;margin:8px 0}
.kbx .kb-imports{list-style:none;padding:0;margin:6px 0;font-size:11.5px}
.kbx .kb-imports li{display:flex;justify-content:space-between;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}
.kbx .kb-imports button{background:transparent;border:0;color:var(--rot);font-size:11px}
.kbx .kb-check{display:flex!important;gap:8px;align-items:center}
.kbx .busy .kb-panel{pointer-events:none;opacity:.6}
.kbx .kb-meter .row b{color:var(--gelb);font-weight:400}
.kbx .kb-meter #m-ticks{position:absolute;inset:0}
.kbx .kb-meter .row{flex-wrap:wrap}
@media(max-width:700px){.kbx .kb-meter .row span:first-child,.kbx .kb-meter .row span:last-child{display:none}
.kbx .kb-hud{font-size:9.5px}}
.kbx .kb-panel .kb-rings li{cursor:pointer}
.kbx #labels .kblb .dim{color:var(--dim2)}
.kbx .kb-hud span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.kbx .kb-stagebtns{top:34px}
.kbx .kb-sub{font-size:clamp(17px,1.7vw,26px);bottom:70px;max-width:min(90%,820px)}
@media(max-width:1000px){.kbx .kb-title{justify-content:flex-start;overflow:auto;padding:18px 16px}
.kbx .kb-title b{font-size:clamp(40px,11vw,72px)}
.kbx .kb-title em{margin:4px 0 10px}
.kbx .kb-title p{font-size:12px;line-height:1.5}
.kbx .kb-title p.dim{display:none}
.kbx .kb-stagebtns{top:auto;bottom:58px;right:8px}
.kbx .kb-stagebtns button{padding:5px 7px;font-size:9.5px}}
@media(pointer:coarse){.kbx .kb-touch{bottom:58px}
.kbx .kb-stagebtns{bottom:auto;top:30px}}
.kbx .kb-main{min-height:0;height:clamp(480px,calc(100vh - var(--mw4-height,70px) - 210px),860px)}
@media(max-width:1000px){.kbx .kb-main{height:auto}}
.kbx .kb-panel{max-height:clamp(480px,calc(100vh - var(--mw4-height,70px) - 210px),860px)}
@media(max-width:1000px){.kbx .kb-panel{max-height:none}}
.kbx .kb-title b{color:var(--papier)}
.kbx .kb-tab{padding:16px 18px 30px;border:0}
.kbx .kb-main:fullscreen{height:100vh}.kbx .kb-main:fullscreen .kb-panel{max-height:100vh}
.kbx .kb-stage:focus{outline:none}

.kbx .kb-touch{display:none!important}
@media(pointer:coarse){.kbx .kb-main.playing .kb-touch{display:flex!important}}
#kbx{scroll-margin-top:calc(var(--mw4-height,70px) + 120px)}