:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0d1117;--surface:#161b22;--surface-2:#1c2129;--border:#30363d;--text:#e6edf3;--text-muted:#8b949e;--accent:#8b5cf6;--accent-hover:#7c3aed;--danger:#f85149;--ok:#3fb950;--info:#2f81f7;--info-hover:#2570e0;--pastell-orange:#eab27a;--pastell-orange-bg:#eab27a24;--pastell-gruen:#93d7a5;--pastell-gruen-bg:#93d7a524;--pastell-rot:#ef9b96;--pastell-rot-bg:#ef9b9624;--pastell-blau:#9cc3f0;--pastell-blau-bg:#9cc3f024;--raum-1:.25rem;--raum-2:.5rem;--raum-3:.75rem;--raum-4:1rem;--raum-5:1.5rem;--raum-6:2rem;--knopf-hoehe:2.5rem;--fokus-schleier:#8b5cf673;--spur-leer:#ffffff29;--leiste-breite:35rem;--regler-breite:140px}*{box-sizing:border-box}body{background:var(--bg);max-width:860px;color:var(--text);margin:2.5rem auto;padding:0 1.25rem 3rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}body:not(.in-room) .room-only,body.in-room .lobby-only{display:none}body.in-room{max-width:none;padding-left:2rem;padding-right:2rem}h1{letter-spacing:-.01em;margin-bottom:.25rem;font-size:1.4rem;font-weight:700}h1 #room-name-lobby{color:var(--text-muted);font-weight:500}.subtitle{color:var(--text-muted);margin-bottom:1.75rem;font-size:.9rem}.subtitle a{color:var(--accent)}.subtitle a:hover{color:var(--accent-hover)}.card{background:var(--surface);border:1px solid var(--border);padding:var(--raum-4);margin-bottom:var(--raum-5);border-radius:12px}.hinweis{color:var(--text);border:1px solid;border-radius:8px;margin-top:1rem;padding:.75rem 1rem;font-size:.9rem;line-height:1.45;display:none}.hinweis.visible{display:block}.hinweis.warnung{border-color:var(--pastell-orange);background:var(--pastell-orange-bg)}.hinweis.entwarnung{border-color:var(--pastell-gruen);background:var(--pastell-gruen-bg)}.hinweis.fehler{border-color:var(--pastell-rot);background:var(--pastell-rot-bg)}.hinweis.info{border-color:var(--pastell-blau);background:var(--pastell-blau-bg)}label{color:var(--text-muted);margin-top:.75rem;font-size:.85rem;font-weight:600;display:block}label:first-child{margin-top:0}input{background:var(--surface-2);border:1px solid var(--border);width:100%;color:var(--text);border-radius:8px;margin-top:.35rem;padding:.6rem .7rem;font-size:.95rem}input::placeholder{color:var(--text-muted)}input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #8b5cf640}input[readonly]{color:var(--text-muted);cursor:default}input[type=range]{--fuellung:50%;appearance:none;cursor:pointer;background:0 0;border:none;border-radius:0;width:100%;height:1.25rem;margin:0;padding:0}input[type=range]:focus{box-shadow:none;border:none;outline:none}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) 0 var(--fuellung), var(--spur-leer) var(--fuellung) 100%);border-radius:999px;height:6px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--text);border:none;border-radius:50%;width:16px;height:16px;margin-top:-5px;transition:transform .12s,box-shadow .12s;box-shadow:0 1px 3px #0000008c}input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.1)}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--fokus-schleier)}input[type=range]::-moz-range-track{background:var(--spur-leer);border-radius:999px;height:6px}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:999px;height:6px}input[type=range]::-moz-range-thumb{background:var(--text);border:none;border-radius:50%;width:16px;height:16px;box-shadow:0 1px 3px #0000008c}input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--fokus-schleier)}button{cursor:pointer;background:var(--accent);color:#fff;border:none;border-radius:8px;margin-top:1rem;padding:.65rem 1.3rem;font-size:.95rem;font-weight:600;transition:background .15s}button:hover:not(:disabled){background:var(--accent-hover)}button:disabled{cursor:not-allowed;opacity:.4}button+button{margin-left:.6rem}button.secondary{background:var(--surface-2);border:1px solid var(--border)}button.secondary:hover:not(:disabled){background:var(--surface)}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.input-row{align-items:flex-end;gap:.6rem;display:flex}.input-row>div{flex:1}.input-row button{white-space:nowrap;margin-top:.35rem}.level-meter{background:var(--spur-leer);border-radius:999px;height:8px;overflow:hidden}.level-meter-bar{background:var(--pastell-gruen);width:0%;height:100%;transition:width 50ms linear,background .1s}.level-meter-bar.zone-yellow,.level-meter-bar.zone-orange{background:var(--pastell-orange)}.level-meter-bar.zone-red{background:var(--pastell-rot)}video{background:#000;border-radius:10px;width:100%;display:block}.video-grid{grid-template-columns:repeat(auto-fit, minmax(min(var(--tile-size,320px), 100%), var(--tile-size,320px)));gap:1rem;width:100%;margin-top:1rem;display:grid}body.in-room .video-grid{justify-content:center}body:not(.in-room) .video-grid{grid-template-columns:minmax(0,1fr)}#remote-videos{display:contents}.video-tile{flex-direction:column;display:flex}body.in-room .video-tile{max-width:var(--tile-size,320px);cursor:pointer}body.in-room .video-tile:hover{outline:1px solid var(--border)}.video-tile video{aspect-ratio:16/9;object-fit:cover;background:#000;border-radius:10px;width:100%}.video-tile.pinned{order:-1;grid-column:1/-1}body.in-room .video-tile.pinned{max-width:none}body.in-room .video-grid:has(.video-tile.pinned){grid-template-columns:repeat(auto-fit, minmax(min(var(--tile-size,320px), 100%), 1fr))}.video-tile.pinned video{aspect-ratio:auto;object-fit:contain;max-height:70vh}.preview-frame{position:relative}.camera-warning{text-align:center;color:#fff;border:1px solid var(--pastell-orange);background:#000000b8;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;padding:1rem;font-size:.95rem;font-weight:600;display:flex;position:absolute;inset:0}.camera-warning[hidden]{display:none}#camera-retry-btn{width:auto;padding:.4rem .9rem;font-size:.9rem}#camera-retry-btn[hidden]{display:none}.remote-label{color:var(--text);order:2;align-items:center;gap:.45rem;margin-top:.45rem;font-size:.9rem;font-weight:600;display:flex}body:not(.in-room) #own-label{display:none}.status-dot{background:var(--pastell-gruen);border-radius:50%;flex-shrink:0;width:9px;height:9px}.status-dot.stalled{background:var(--pastell-rot)}.status-dot.slow-upload{background:var(--pastell-orange)}body[data-role=guest] [data-host-only],#participant-status{display:none}#interrupt-banner{border:1px solid var(--pastell-rot);background:var(--pastell-rot-bg);color:var(--text);border-radius:8px;margin-bottom:1rem;padding:.75rem 1rem;font-size:.9rem;line-height:1.45;display:none}#interrupt-banner.visible{display:block}#interrupt-banner.recovered{border-color:var(--pastell-gruen);background:var(--pastell-gruen-bg)}#interrupt-banner.info{border-color:var(--pastell-blau);background:var(--pastell-blau-bg)}#upload-backlog-banner{margin-bottom:1rem}#countdown{z-index:10;gap:.75rem;display:none;position:fixed;top:1.5rem;left:50%;transform:translate(-50%)}.countdown-circle{background:var(--surface-2);border:1px solid var(--border);width:48px;height:48px;color:var(--text-muted);opacity:.4;border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:700;transition:opacity .15s,transform .15s,background .15s,color .15s;display:flex;box-shadow:0 8px 24px #0006}.countdown-circle.active{opacity:1;background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.15)}.countdown-circle[data-step=rec]{font-size:.75rem}.countdown-circle[data-step=rec].active{background:var(--danger);border-color:var(--danger)}#monitoring-bar,#files-card,#status-card{max-width:var(--leiste-breite);margin-left:auto;margin-right:auto}.monitoring-row{align-items:center;gap:var(--raum-3);grid-template-columns:minmax(0,1fr);display:grid}.room-display{text-align:center;justify-content:center}.record-group,.bar-actions{justify-content:center}.aktions-zeile{justify-content:center;align-items:center;gap:var(--raum-5);flex-wrap:nowrap;min-width:0;display:flex}.room-display{align-items:baseline;gap:var(--raum-2);min-width:0;font-size:1.05rem;display:flex}.participant-name-display{color:var(--text);text-overflow:ellipsis;white-space:nowrap;flex-shrink:1;min-width:0;font-weight:700;overflow:hidden}.participant-name-display:empty{display:none}[data-debug-toggle]{-webkit-user-select:none;user-select:none}.room-name-display{color:var(--text-muted);text-overflow:ellipsis;white-space:nowrap;flex-shrink:4;min-width:0;font-size:.9rem;font-weight:500;overflow:hidden}.record-group{align-items:center;gap:var(--raum-3);flex-shrink:0;display:flex}.host-controls{align-items:center;gap:var(--raum-2);display:flex}.host-controls button,.monitoring-row>button{margin-top:0}.record-status{align-items:center;gap:var(--raum-2);height:var(--knopf-hoehe);padding:0 var(--raum-3);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;flex-shrink:0;display:inline-flex}.record-status:has(.record-lamp.active){border-color:var(--pastell-rot);background:var(--pastell-rot-bg)}.bar-actions{justify-content:flex-end;align-items:center;gap:var(--raum-2);flex-wrap:nowrap;flex-shrink:0;display:flex}.bar-actions button+button{margin-left:0}.leisten-knopf{height:var(--knopf-hoehe);align-items:center;gap:var(--raum-2);padding:0 var(--raum-3);white-space:nowrap;margin-top:0;font-size:.85rem;display:inline-flex}.leisten-knopf svg{flex-shrink:0}.settings-gear{color:var(--text)}.settings-gear:hover:not(:disabled){background:var(--surface);border-color:var(--accent);color:var(--text)}.einstellungen{column-gap:var(--raum-5);row-gap:var(--raum-4);margin-top:var(--raum-4);padding-top:var(--raum-4);border-top:1px solid var(--border);grid-template-columns:minmax(0,2fr) minmax(min-content,1fr);display:grid}.regler{gap:var(--raum-2);flex-direction:column;min-width:0;display:flex}.regler-kopf{align-items:baseline;gap:var(--raum-2);min-height:1.1rem;display:flex}.regler-kopf label{flex-shrink:0;margin:0}.regler input[type=range]{width:var(--regler-breite);max-width:100%;margin-top:auto;margin-right:auto}.regler-wert{color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:.8rem;font-weight:600}.record-lamp{border:2px solid var(--border);background:0 0;border-radius:50%;flex-shrink:0;width:12px;height:12px}.record-lamp.active{background:var(--danger);border-color:var(--danger);animation:1.4s ease-in-out infinite record-pulse}@keyframes record-pulse{0%,to{box-shadow:0 0 5px var(--danger)}50%{box-shadow:0 0 14px 2px var(--danger)}}.icon-btn{background:var(--surface-2);border:1px solid var(--border);width:2.1rem;height:2.1rem;color:var(--text-muted);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;margin-top:0;padding:0;display:inline-flex}.icon-btn:hover:not(:disabled){background:var(--surface);color:var(--text)}#files-title{color:var(--text-muted);margin-bottom:.6rem}.file-row{justify-content:space-between;align-items:center;gap:.8rem;padding:.35rem 0;display:flex}.file-row+.file-row{border-top:1px solid var(--border)}.file-row a{display:inline-flex}.record-toggle-btn{background:var(--danger);border:1px solid var(--danger);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:3rem;height:3rem;padding:0;display:inline-flex}.record-toggle-btn:hover:not(:disabled){background:#d13c37;border-color:#d13c37}.record-toggle-btn.recording{border:1px solid var(--text-muted);background:0 0}.record-toggle-btn.recording:hover:not(:disabled){border-color:var(--text);background:#ffffff14}.recording-clock{font-variant-numeric:tabular-nums;color:var(--text-muted);text-align:center;flex-shrink:0;min-width:3.1rem;font-size:1rem;font-weight:600}.recording-clock.active{color:var(--text)}.workspace-logo-zeile{margin-top:calc(-1 * var(--raum-2));margin-bottom:var(--raum-5);justify-content:center;display:none}.workspace-logo-zeile.hat-logo{display:flex}#workspace-logo{object-fit:contain;opacity:.9;width:auto;max-width:min(260px,60vw);height:auto;max-height:40px}#settings-backdrop{z-index:19;background:#0000008c;display:none;position:fixed;inset:0}#settings-backdrop.visible{display:block}body.in-room #device-settings{z-index:20;width:360px;max-width:calc(100vw - 3rem);display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 16px 48px #0009}body.in-room #device-settings.visible{display:block}body.in-room #device-settings .input-row{flex-direction:column;align-items:stretch;gap:.6rem}select{background:var(--surface-2);border:1px solid var(--border);width:100%;color:var(--text);border-radius:8px;margin-top:.35rem;padding:.6rem .7rem;font-size:.95rem}select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #8b5cf640}#apply-device-btn{background:var(--ok);color:#fff;border:none;width:100%;display:block}#apply-device-btn:hover:not(:disabled){background:#2ea043}#upload-success-banner{text-align:center;border-radius:10px;margin-bottom:1rem;padding:1.1rem 1.25rem;font-size:1.15rem;font-weight:700}.banner-progress{background:#ffffff40;border-radius:999px;height:4px;margin-top:.6rem;overflow:hidden}.banner-progress[hidden]{display:none}.banner-progress-fill{background:var(--pastell-gruen);border-radius:999px;width:0%;height:100%;transition:width .3s}.banner-progress-label{opacity:.9;margin-top:.35rem;font-size:.85rem;font-weight:600;display:block}.banner-progress-label[hidden],#status-card{display:none}body.debug #status-card{display:block}#status{white-space:pre-wrap;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;max-height:3.2rem;margin:0;padding:.5rem .75rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;overflow-y:auto}.join-error .join-error-detail{color:var(--text-muted);word-break:break-word;margin-top:.5rem;font-size:.8rem;display:block}@media (width<=900px){body{margin:1.25rem auto}body.in-room{padding-left:1rem;padding-right:1rem}}@media (width<=640px){.video-grid{grid-template-columns:1fr}body.in-room .video-grid:has(.video-tile.pinned){grid-template-columns:1fr}.regler-fenster{display:none}.einstellungen{grid-template-columns:minmax(0,1fr)}.aktions-zeile{gap:var(--raum-3);flex-wrap:wrap}.bar-actions{flex-wrap:wrap}body.in-room .video-tile{max-width:none}input,select,button{font-size:16px}#join-btn{width:100%}.countdown-circle{width:40px;height:40px}#workspace-logo{max-height:30px}input[type=range]{font-size:inherit}}#messkasten{display:none}body.debug #messkasten{z-index:9999;color:#d7e3f4;background:#0c1018eb;border-radius:10px;max-width:min(420px,100vw - 24px);max-height:min(60vh,520px);padding:10px 12px;font-size:11px;line-height:1.35;display:block;position:fixed;bottom:12px;right:12px;overflow:auto;box-shadow:0 6px 24px #00000073}#messkasten-titel{margin-bottom:4px;font-weight:600}#messkasten-werte{white-space:pre-wrap;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}#messkasten-knoepfe{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}#messkasten-knoepfe button{color:inherit;cursor:pointer;background:#ffffff14;border:1px solid #d7e3f459;border-radius:6px;padding:6px 10px;font-size:12px}#messkasten-hinweis{opacity:.8;margin-top:6px}