:root{--bg:#07111b;--panel:#0d1a27;--panel2:#132438;--line:#20364d;--text:#eef7ff;--muted:#91a9bd;--accent:#42a5ff;--accent2:#7dd3fc;--danger:#ff5f6d;--ok:#3ddc97;--shadow:0 20px 50px rgba(0,0,0,.28)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top,#10283d 0,#07111b 44%,#050b12 100%);color:var(--text)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.landing{display:grid;place-items:center;padding:30px;min-height:100vh}.login-shell{width:min(980px,100%);display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:rgba(8,19,30,.95)}.login-brand{padding:54px;background:linear-gradient(145deg,#0a1930,#163752);display:flex;gap:20px;align-items:flex-start}.radio-logo{width:70px;height:70px;border-radius:20px;background:rgba(66,165,255,.16);display:grid;place-items:center;font-size:34px;border:1px solid rgba(125,211,252,.25)}.login-brand h1{font-size:42px;margin:8px 0 14px}.login-brand p{color:#c0d2e2;line-height:1.6}.eyebrow{font-size:12px;letter-spacing:.18em;color:var(--accent2);font-weight:800}.login-panel{padding:34px;background:#0a1520}.login-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}.tabbtn{border:1px solid var(--line);background:#0d1c2a;color:var(--muted);padding:12px;border-radius:11px;cursor:pointer}.tabbtn.active{background:var(--accent);color:white;border-color:transparent}.authform{display:none;gap:14px}.authform.active{display:grid}.authform label,.form-grid label{display:grid;gap:7px;color:#c0d2e2;font-size:14px}input,select,textarea{width:100%;background:#08131e;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent)}.btn{border:0;border-radius:10px;padding:11px 15px;cursor:pointer;color:white;background:#2a4157}.btn.primary{background:linear-gradient(135deg,#2389e8,#56b4ff)}.btn.danger,.square-btn.danger{background:var(--danger)}.wide{width:100%}.error,.success{padding:11px 13px;border-radius:10px;margin:10px 0}.error{background:#4a2029}.success{background:#153c31}.chat-page{min-height:100vh}.radio-header{height:72px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 20px;background:rgba(5,13,21,.95);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}.header-left,.account,.onair{display:flex;align-items:center;gap:12px}.mini-logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#10283a}.header-left span,.onair small{display:block;color:var(--muted);font-size:11px}.onair{justify-content:center}.dot{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 5px rgba(61,220,151,.12)}.onair strong{display:block;max-width:390px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account{justify-content:flex-end}.role-badge{font-size:11px;padding:5px 8px;border-radius:999px;background:#183755;color:#bfe2ff}.iconlink{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center}.roombar{display:flex;gap:8px;overflow:auto;padding:11px 18px;background:#0a1622;border-bottom:1px solid var(--line)}.room-pill{padding:8px 12px;border-radius:999px;background:#0e1d2b;color:var(--muted);border:1px solid var(--line);white-space:nowrap}.room-pill.active{color:white;background:#16466b;border-color:#2e88c5}.chat-shell{display:grid;grid-template-columns:230px minmax(0,1fr) 280px;gap:14px;padding:14px;min-height:calc(100vh - 120px)}.panel{background:rgba(12,25,38,.97);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow)}.left-panel{padding:12px;height:max-content}.left-panel>a{display:block;padding:10px 11px;border-radius:9px;color:#c5d5e4}.left-panel>a:hover{background:#12293d}.panel-title{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#7fa0ba;font-weight:800;padding:8px 10px}.top-gap{margin-top:10px}.stream-card{padding:10px;background:#08141f;border-radius:10px}.stream-card p{font-size:12px;color:var(--muted)}audio{width:100%;height:34px}.center-panel{display:flex;flex-direction:column;min-width:0;overflow:hidden}.chat-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}.chat-head h2{margin:0 0 3px;font-size:19px}.chat-head span{color:var(--muted);font-size:12px}.chat-actions{display:flex;gap:7px}.square-btn{width:38px;height:38px;border:1px solid var(--line);background:#10273a;color:white;border-radius:9px;cursor:pointer}.chatbox{height:58vh;min-height:420px;overflow:auto;padding:16px;background:linear-gradient(180deg,#08131e,#091620)}.msg{max-width:82%;padding:10px 12px;margin:8px 0;border:1px solid #183047;background:#0f2131;border-radius:12px 12px 12px 3px}.msg.bot{background:#102b3e;border-left:3px solid var(--accent)}.msg.system{opacity:.8;font-style:italic}.meta{font-size:11px;color:#7fa3be;margin-bottom:4px}.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.composer input{flex:1}.composer-help{padding:0 14px 12px;color:var(--muted);font-size:11px}.smiley-panel{padding:10px 12px;border-top:1px solid var(--line);display:flex;gap:7px;flex-wrap:wrap;background:#0a1723}.smiley-panel[hidden]{display:none}.smiley-item{border:1px solid var(--line);background:#0e2030;color:var(--muted);border-radius:8px;padding:5px;display:grid;gap:2px;place-items:center;cursor:pointer;font-size:9px}.smiley-item img{width:30px;height:30px;object-fit:contain}.right-panel{display:grid;align-content:start;gap:14px}.right-panel .panel{padding:10px}.userlist{display:grid;gap:7px;padding:6px}.online-user{padding:9px 10px;border-radius:9px;background:#0a1723;border:1px solid #173047}.online-user:before{content:'●';color:var(--ok);margin-right:8px}.muted{font-size:12px;color:var(--muted)}.video-grid{display:grid;gap:8px}.video-grid video{width:100%;aspect-ratio:16/9;background:#000;border-radius:10px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.content{padding:20px}.topbar{height:64px;background:#0d1528;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px}.brand{font-weight:800}.layout{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 64px)}.sidebar{border-right:1px solid var(--line);padding:18px;background:#0d1528}.sidebar a{display:block;padding:11px 12px;margin:5px 0;border-radius:10px}.sidebar a:hover,.sidebar a.active{background:#182c41}.card{background:rgba(18,26,47,.96);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}.form-grid{display:grid;gap:12px}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid var(--line);text-align:left}.pill{display:inline-block;padding:4px 8px;border-radius:999px;background:#233456;font-size:12px}.small{font-size:12px;color:var(--muted)}@media(max-width:1000px){.chat-shell{grid-template-columns:1fr}.left-panel,.right-panel{display:none}.radio-header{grid-template-columns:1fr auto}.onair{display:none}.chatbox{min-height:55vh}.login-shell{grid-template-columns:1fr}.login-brand{padding:28px}.layout{grid-template-columns:1fr}.sidebar{display:none}.grid{grid-template-columns:1fr}}@media(max-width:620px){.radio-header{padding:0 10px}.role-badge,.account strong{display:none}.chat-shell{padding:7px}.login-brand h1{font-size:30px}.login-tabs{grid-template-columns:1fr}.msg{max-width:95%}}

/* Rollen-/Gruppenbilder */
.online-user{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.online-user .role-badge{width:72px;height:28px;object-fit:contain;flex:0 0 auto}
.online-user small{opacity:.65;font-size:11px;margin-left:auto}
.role-badge-inline{height:20px;max-width:70px;object-fit:contain;vertical-align:middle;margin-right:6px}

.cam-status{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.05);margin-bottom:10px;font-size:.88rem}.cam-status.ok{color:#7ee787}.cam-status.error{color:#ff8b8b}.cam-device-row{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:10px}.cam-device-row label{font-size:.78rem;color:var(--muted,#9aa4b2)}.cam-device-row select{width:100%;margin-top:4px}.cam-controls{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}.video-grid video{background:#05070b;border-radius:12px;width:100%;aspect-ratio:16/9;object-fit:cover}.video-wrap{position:relative}.video-label{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.65);padding:3px 7px;border-radius:6px;font-size:.72rem}