*{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,sans-serif;background:#eef0f4;color:#222;height:100vh;display:flex;flex-direction:column}
.hidden{display:none!important}
.bar{display:flex;gap:12px;align-items:center;padding:8px 16px;background:#1f2533;color:#fff}.logo{font-weight:600}.logo b{color:#7aa2ff}.sub{opacity:.6;font-size:13px}#who{margin-left:auto;font-weight:600}
button{font:inherit;border:1px solid #c5cad6;background:#fff;border-radius:8px;padding:6px 14px;cursor:pointer;letter-spacing:.03em}button:hover{background:#f2f5ff;border-color:#7aa2ff}
.primary{background:#3355ff;color:#fff;border-color:#3355ff}.primary:hover{background:#2443d8}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 20px #0001}.narrow{max-width:380px;margin:60px auto;display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#555}input,textarea,select{font:inherit;padding:8px;border:1px solid #c5cad6;border-radius:8px}input[type=color]{height:38px;padding:2px}
.err{color:#c0392b;min-height:1em;margin:0}
#lobby{flex:1;display:flex;flex-direction:column;padding:16px;gap:12px;min-height:0}
.toolbar{display:flex;justify-content:space-between;align-items:center}.switch{display:flex;gap:10px;align-items:center;font-size:18px}.switch span{min-width:110px;text-align:center}
.cat span{color:#3355ff;font-size:18px}
.rooms{flex:1;background:#fff;border-radius:12px;margin:0;padding:8px 0;overflow:auto;list-style:none;counter-reset:r;box-shadow:0 2px 10px #0001}
.rooms li{display:grid;grid-template-columns:40px 300px 1fr 60px;gap:12px;padding:10px 16px;cursor:pointer;counter-increment:r;align-items:center}
.rooms li::before{content:counter(r);color:#3355ff;text-align:right}.rooms li:hover{background:#f2f5ff}.rooms .n{color:#3355ff;font-weight:600}.rooms .d{color:#888;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rooms .u{color:#666;font-size:13px}
.rooms .empty{display:block;color:#999;text-align:center;cursor:default}.rooms .empty::before{content:none}
#room{flex:1;position:relative;overflow:hidden;min-height:0}
#bg{position:absolute;inset:0;background:#cfd8e3 center/cover;opacity:.55}
.panel{position:absolute;border-radius:10px}.glass{background:#ffffffb3;backdrop-filter:blur(4px);border:1px solid #fff8}
#cams{top:10px;left:10px;background:#f4f5f8e6;min-width:180px;max-width:60%;box-shadow:0 2px 10px #0002;z-index:2}
.ptitle{font-size:12px;padding:4px 8px;display:flex;justify-content:space-between;color:#555}.ptitle span{cursor:pointer}
#camGrid{display:flex;gap:6px;padding:6px;flex-wrap:wrap}.cam{width:112px;text-align:center;font-size:11px;color:#777;cursor:pointer}.cam video,.cam .ph{width:112px;height:84px;background:#000;border-radius:6px;object-fit:cover;display:block}.cam .ph{background:#dde1ea}
#chat{left:10px;right:230px;top:130px;bottom:64px;overflow:auto;padding:10px;font-size:15px}#chat p{margin:2px 0}#chat .sys{color:#888;font-style:italic;font-size:13px}#chat .t{color:#999;font-size:11px;margin-right:6px}

#bottom{position:absolute;left:10px;right:10px;bottom:10px;display:flex;gap:8px}#sendForm{flex:1}#msg{width:100%;height:44px;background:#fffe}
#icons{display:flex;gap:4px}#icons button{width:44px;height:44px;padding:0;font-size:20px}#icons .off{opacity:.4;text-decoration:line-through}#icons .on{background:#d7f5d7;border-color:#3a3}
.exit{background:#1d8a3a!important;color:#ff0!important;font-size:12px!important;font-weight:800}
#smileys{position:absolute;bottom:52px;right:0;background:#fff;border-radius:10px;padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;box-shadow:0 4px 20px #0003}#smileys span{font-size:22px;cursor:pointer;padding:2px}
dialog{border:none;border-radius:12px;padding:24px;min-width:340px}dialog form{display:flex;flex-direction:column;gap:10px}menu{display:flex;justify-content:flex-end;gap:8px;padding:0}#bigVid{width:min(80vw,960px);background:#000;border-radius:8px}

#topic{left:10px;right:230px;top:146px;height:26px;padding:3px 10px;font-size:13px;color:#444;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#topic:empty{display:none}
#radioBar{right:10px;bottom:64px;width:210px;display:flex;align-items:center;gap:6px;padding:4px 6px;z-index:2}#radioBar button{padding:2px 8px}#radioName{flex:1;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#radioVol{width:50px;padding:0}

#chat .botmsg{color:#6c3483}.cmds{padding-left:18px;margin:4px 0}.cmds li{margin:2px 0}dialog{max-width:620px}

img.smiley{height:28px;width:auto;max-width:56px;vertical-align:middle;image-rendering:auto}
#smileys img.smiley{cursor:pointer;padding:2px;justify-self:center}#smileys img.smiley:hover,#smileys span:hover{background:#eef}
#smileys .sep{grid-column:1/-1;font-size:12px;color:#666;border-top:1px solid #ddd;margin-top:4px;padding-top:4px}

/* ---- Konten, Profile, PN, Abzeichen ---- */
nav{margin-left:auto;display:flex;gap:6px;align-items:center}nav button{background:#2c3446;color:#fff;border-color:#3d4760;padding:4px 10px;position:relative}nav button:hover{background:#3d4760}
#who{cursor:pointer;display:flex;align-items:center;gap:4px;margin:0 6px;font-weight:600}
.cnt{position:absolute;top:-6px;right:-6px;background:#e0245e;color:#fff;font-style:normal;font-size:11px;border-radius:9px;padding:0 5px;min-width:18px;text-align:center}
li .cnt{position:static;margin-left:auto}
.tabs{display:flex;gap:6px}.tabs button{flex:1}.tabs .on{background:#3355ff;color:#fff}
#auth form{display:flex;flex-direction:column;gap:12px}
.chk{flex-direction:row;align-items:center;gap:8px;color:#333}.chk input{width:auto}
.hint,.muted{color:#888;font-size:13px}
.badge{font-size:13px;margin-right:2px}
.nick{cursor:pointer;font-weight:600}.nick:hover{text-decoration:underline}
.glow{text-shadow:0 0 6px var(--c),0 0 12px var(--c);animation:glow 2.5s ease-in-out infinite alternate}
@keyframes glow{from{text-shadow:0 0 3px var(--c)}to{text-shadow:0 0 8px var(--c),0 0 16px var(--c)}}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;vertical-align:middle;flex:none}
.avatar.sm{width:22px;height:22px;font-size:12px;margin-right:4px}.avatar.big{width:96px;height:96px;font-size:40px;border:3px solid #fff;box-shadow:0 2px 8px #0003}
#users li{display:flex;align-items:center;gap:2px}#users li.ignored{opacity:.4}
dialog.wide{width:min(760px,95vw);max-width:760px}
.cover{height:150px;border-radius:10px;background:linear-gradient(135deg,#3355ff,#8e44ad) center/cover}
.phead{display:flex;gap:16px;align-items:flex-end;margin-top:-48px;padding:0 16px}.phead h2{margin:0 0 4px}
.actions{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}
.info{border-collapse:collapse;margin:8px 0}.info th{text-align:left;color:#777;font-weight:500;padding:2px 16px 2px 0}
.about{white-space:pre-wrap;background:#f6f7fb;padding:10px;border-radius:8px}.links{margin:8px 0}
.flist{display:flex;flex-wrap:wrap;gap:8px}.fchip{display:inline-flex;align-items:center;background:#f2f4fa;border-radius:14px;padding:2px 8px 2px 2px}
.gb{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto}.gbe{display:flex;gap:8px;background:#f6f7fb;border-radius:8px;padding:6px 8px}.gbe>div{flex:1}
.x{float:right;border:none;background:none;color:#c0392b;padding:0 4px}
.row{display:flex;gap:6px}.row input{flex:1}
.on{color:#1d8a3a}
.plain{list-style:none;padding:0;margin:4px 0}.plain li{display:flex;align-items:center;gap:6px;padding:4px 0}
.pm{display:grid;grid-template-columns:200px 1fr;gap:12px;height:420px}#pmList{overflow:auto;border-right:1px solid #eee;padding-right:8px}#pmList li{cursor:pointer;padding:6px;border-radius:6px}#pmList li.sel,#pmList li:hover{background:#eef2ff}
.pmMain{display:flex;flex-direction:column;min-height:0}.pmMain h3{margin:0 0 8px}#pmMsgs{flex:1;overflow:auto;background:#f6f7fb;border-radius:8px;padding:8px}#pmMsgs p{margin:3px 0}#pmMsgs .mine{text-align:right}#pmMsgs small{color:#999}
#pmForm{display:flex;gap:6px;margin-top:6px}#pmText{flex:1}
.imgs{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}.imgs>div{display:flex;flex-direction:column;gap:6px;align-items:flex-start}.coverWrap{align-items:stretch!important}
.btnlike{display:inline-block;border:1px solid #c5cad6;border-radius:8px;padding:4px 10px;cursor:pointer;color:#222;font-size:13px}.btnlike:hover{background:#f2f5ff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}fieldset{border:1px solid #dde;border-radius:8px}
details{margin-top:10px}summary{cursor:pointer;font-weight:600}
.pbadge{background:#ffd54a;color:#5a4300;border-radius:6px;padding:0 5px;font-size:11px;font-weight:700}
.danger{background:#c0392b;color:#fff;border-color:#c0392b}
#camBtn.wait{background:#fff3c4;border-color:#d4a400}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1f2533;color:#fff;padding:10px 18px;border-radius:10px;z-index:99;box-shadow:0 4px 20px #0005}

/* ===== Update 4: größere Schrift, Cam-Freigaben, Mobil ===== */
html{-webkit-text-size-adjust:100%;font-size:16px}
body{height:100vh;height:100dvh;font-size:16px;overflow:hidden}
.view{overflow:auto}#room{overflow:hidden}
.bar{padding:8px 16px;font-size:17px;flex-wrap:wrap}.logo{font-size:20px}
button{min-height:40px}
.mOnly{display:none!important}
#usersPanel{right:10px;top:10px;bottom:70px;width:260px;display:flex;flex-direction:column;z-index:3}

#usersPanel .ptitle{font-size:15px;padding:8px 10px 4px}
#users{margin:0;padding:4px 6px 8px;list-style:none;overflow:auto;flex:1}
#users li{display:flex;align-items:center;gap:6px;padding:6px;border-radius:8px;font-size:16px;font-weight:700;white-space:nowrap;min-height:44px}
#users li:hover{background:#ffffff99}
#users li .nick{overflow:hidden;text-overflow:ellipsis;min-width:0}
#users .avatar.sm{width:32px;height:32px;font-size:15px}
#users .badge{font-size:16px}
.camIco{margin-left:auto;min-height:36px;min-width:40px;padding:0 6px;font-size:18px;border-radius:8px;background:#fff;flex:none}
.camIco.ok{background:#d7f5d7;border-color:#3a3}.camIco.pend{background:#fff3c4;border-color:#d4a400}
#cams{max-width:calc(100% - 300px)}
#cams .ptitle{font-size:15px;padding:6px 10px;color:#333}#camsToggle{font-size:22px;line-height:1;padding:0 6px}
#camGrid{gap:8px;padding:8px;max-height:45vh;overflow:auto}
.cam{width:168px;font-size:15px;font-weight:700;color:#333}
.cam video,.cam .ph{width:168px;height:126px;border-radius:8px}
.cam .cn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:3px 2px}
.cam .lock{display:flex;align-items:center;justify-content:center;background:#2c3446;color:#fff;font-size:16px}
.cam.locked:hover .lock{background:#3d4760}
#chat{right:280px;bottom:70px;font-size:16px;line-height:1.45}#chat .sys{font-size:14px}#chat .t{font-size:12px}
#topic{right:280px;font-size:16px;height:34px;padding:6px 12px;top:auto}
#radioBar{width:260px;bottom:70px;font-size:15px}#radioName{font-size:15px}#radioVol{width:70px}
#msg{height:50px;font-size:17px;padding:8px 12px}
#icons button{width:50px;height:50px;font-size:22px}
.exit{font-size:13px!important}
#bigVid{width:min(90vw,960px);max-height:75vh}
#camReqDlg{min-width:0;width:min(420px,92vw)}#camReqDlg p{font-size:18px;display:flex;align-items:center;gap:8px}#camReqDlg menu button{min-height:48px;padding:0 22px;font-size:17px}
dialog{max-width:min(620px,96vw);max-height:92dvh;overflow:auto}
/* Topic/Chat-Position abhängig von Cam-Panel-Höhe: Cams oben, Topic + Chat darunter im Flex-Fluss (Desktop) */
#room{display:grid;grid-template-columns:1fr 270px;grid-template-rows:auto auto 1fr auto auto;gap:8px;padding:10px}
#room>.panel,#room>#bottom{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:none;min-width:0}
#bg{grid-area:1/1/-1/-1;position:absolute}
#cams{grid-column:1;grid-row:1;justify-self:start;max-width:100%}
#topic{grid-column:1;grid-row:2;height:auto}
#chat{grid-column:1;grid-row:3;min-height:0}
#usersPanel{grid-column:2;grid-row:1/4;min-height:0}
#radioBar{grid-column:2;grid-row:4}
#bottom{grid-column:1/-1;grid-row:5;display:flex;gap:8px;align-items:center}

#smileys{bottom:60px;max-width:calc(100vw - 20px);grid-template-columns:repeat(auto-fill,minmax(40px,1fr));width:380px;max-height:50vh;overflow:auto}#smileys span{font-size:26px;text-align:center}
.rooms li{grid-template-columns:40px minmax(120px,300px) 1fr 60px;font-size:16px}
@media (max-width:760px){
  .mOnly{display:inline-flex!important;align-items:center;justify-content:center}
  .bar{padding:6px 8px;gap:6px}.sub{display:none}.logo{font-size:17px}
  nav{gap:4px;flex-wrap:wrap;justify-content:flex-end}nav button{padding:4px 8px;min-width:40px;min-height:40px}
  #who .nick{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .narrow{margin:12px;max-width:none;padding:18px}
  input,select,textarea{font-size:16px;min-height:44px}input[type=checkbox]{min-height:0;width:22px;height:22px}
  #lobby{padding:8px}.toolbar{flex-wrap:wrap;gap:8px}.switch span{min-width:80px}
  .rooms li{grid-template-columns:28px 1fr auto;grid-template-areas:"x n u" "x d d";gap:2px 8px;padding:12px}
  .rooms li::before{grid-area:x}.rooms .n{grid-area:n}.rooms .d{grid-area:d;white-space:normal}.rooms .u{grid-area:u}
  #room{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto auto;padding:6px;gap:6px;height:100%}
  #cams{grid-column:1;grid-row:1;justify-self:stretch}
  #camGrid{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-height:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .cam{width:132px;flex:none;scroll-snap-align:start}.cam video,.cam .ph{width:132px;height:99px}
  #topic{grid-row:2}#chat{grid-row:3;font-size:16px}
  #radioBar{grid-column:1;grid-row:4}
  #bottom{grid-row:5;flex-wrap:wrap;padding-bottom:env(safe-area-inset-bottom)}
  #sendForm{flex:1 1 100%;order:-1}#icons{flex:1;justify-content:space-between;flex-wrap:nowrap}
  #icons button{width:auto;flex:1;min-width:0;height:48px;font-size:21px}
  #usersPanel{position:fixed!important;top:0!important;right:0!important;bottom:0!important;width:min(86vw,340px)!important;z-index:50;border-radius:0;background:#f7f8fbf5;
    transform:translateX(105%);transition:transform .25s;box-shadow:-4px 0 20px #0003;padding-top:env(safe-area-inset-top)}
  #room.showUsers #usersPanel{transform:none}
  #room.showUsers::after{content:"";position:fixed;inset:0;background:#0005;z-index:40}
  #users li{min-height:52px;font-size:17px}
  #smileys{position:fixed;left:6px;right:6px;bottom:120px;width:auto}
  dialog{padding:16px;min-width:0;width:96vw}dialog.wide{width:96vw}
  .pm{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:70dvh}#pmList{border-right:none;border-bottom:1px solid #eee;max-height:120px;padding:0}
  .grid2,.imgs{grid-template-columns:1fr}.phead{flex-wrap:wrap}
  menu{flex-wrap:wrap}menu button{flex:1}
}
@media (max-width:760px) and (orientation:landscape) and (max-height:500px){
  #room{grid-template-columns:200px 1fr;grid-template-rows:auto 1fr auto auto}
  #cams{grid-column:1;grid-row:1/4;overflow:auto}#camGrid{flex-direction:column;overflow-y:auto;overflow-x:hidden;max-height:calc(100dvh - 130px)}
  .cam{width:170px}.cam video,.cam .ph{width:170px;height:96px}
  #topic{grid-column:2;grid-row:1}#chat{grid-column:2;grid-row:2}#radioBar{grid-column:2;grid-row:3}#bottom{grid-column:1/-1;grid-row:4;flex-wrap:nowrap}
  #sendForm{flex:1;order:0}#icons{flex:none}#icons button{width:44px;flex:none;height:44px}
  .bar{padding:2px 8px}
}

/* ===== Update 5: Premium-Nick-Effekte (nur CSS, GPU-freundlich: background-position/opacity/filter) ===== */
.nick.fx{--g:linear-gradient(90deg,var(--c),#fff,var(--c));background:var(--g);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;font-weight:800;animation:fxSlide 3s linear infinite;text-shadow:none}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){.nick.fx{color:var(--c)!important;-webkit-text-fill-color:currentColor}}
@keyframes fxSlide{to{background-position:200% center}}
.fx-regenbogen{--g:linear-gradient(90deg,#ff3b3b,#ff9f1a,#ffe11a,#2ecc40,#1aa3ff,#9b59ff,#ff3b3b)!important}
.fx-glitzer{--g:linear-gradient(110deg,var(--c) 0 40%,#fff 48%,#fff9c4 50%,var(--c) 58% 100%)!important;animation-duration:2.2s!important;filter:drop-shadow(0 0 2px #fff8)}
.fx-glow{--g:linear-gradient(90deg,var(--c),var(--c))!important;animation:fxPulse 1.8s ease-in-out infinite alternate!important}
@keyframes fxPulse{from{filter:drop-shadow(0 0 1px var(--c))}to{filter:drop-shadow(0 0 7px var(--c)) brightness(1.25)}}
.fx-neon{--g:linear-gradient(90deg,#39ff14,#00f0ff,#39ff14)!important;animation:fxSlide 3s linear infinite,fxFlicker 4s steps(1) infinite!important;filter:drop-shadow(0 0 4px #00f0ffaa)}
@keyframes fxFlicker{0%,18%,22%,62%,64%,100%{opacity:1}20%,63%{opacity:.45}}
.fx-feuer{--g:linear-gradient(0deg,#ff2a00,#ff8c00,#ffd500,#ff8c00,#ff2a00)!important;background-size:auto 300%!important;animation:fxRise 1.4s linear infinite!important;filter:drop-shadow(0 0 3px #ff6a00aa)}
@keyframes fxRise{to{background-position:center -300%}}
.fx-eis{--g:linear-gradient(100deg,#bff3ff,#5bc8ff,#ffffff,#8fe3ff,#bff3ff)!important;filter:drop-shadow(0 0 2px #5bc8ff)}
.fx-galaxy{--g:linear-gradient(90deg,#3a0ca3,#7209b7,#f72585,#4cc9f0,#3a0ca3)!important;animation-duration:5s!important}
.fx-gold{--g:linear-gradient(100deg,#8a6b12,#ffd700,#fff4b0,#d4a017,#8a6b12)!important;animation-duration:2.6s!important;filter:drop-shadow(0 0 1px #b8860b)}
.fx-candy{--g:linear-gradient(90deg,#ff7eb9,#ffd1e8,#7afcff,#feff9c,#ff7eb9)!important}
.fx-welle{--g:linear-gradient(90deg,var(--c),#7aa2ff,var(--c))!important;display:inline-block;animation:fxSlide 3s linear infinite,fxWave 2s ease-in-out infinite!important}
@keyframes fxWave{0%,100%{transform:translateY(0) skewX(0)}25%{transform:translateY(-2px) skewX(-6deg)}75%{transform:translateY(1px) skewX(6deg)}}
.fx-matrix{--g:linear-gradient(180deg,#003b00,#00ff41,#008f11,#00ff41,#003b00)!important;background-size:auto 300%!important;animation:fxRise 2.5s linear infinite!important;font-family:ui-monospace,Consolas,monospace}
.fx-sunset{--g:linear-gradient(90deg,#ff512f,#f09819,#dd2476,#ff512f)!important}
.fx-custom{--g:linear-gradient(90deg,var(--f1),var(--f2),var(--f1))!important}
/* dunkle Verläufe auf hellem Grund lesbar halten */
.fx-galaxy,.fx-matrix{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)}
@media (prefers-reduced-motion:reduce){.nick.fx,.nick.glow{animation:none!important;transform:none!important}}
.fxBox{display:flex;flex-direction:column;gap:8px}.fxPreviewRow{font-size:15px;padding:10px;background:#f6f7fb;border-radius:8px}#fxPreview{font-size:22px}
.fxGallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.fxCard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;min-height:72px;background:#fff;border-radius:10px;letter-spacing:0}
.fxCard .fxPrev{font-size:18px;max-width:100%;overflow:hidden;white-space:nowrap}.fxCard small{font-size:13px;color:#555}
.fxCard.sel{border:2px solid #3355ff;background:#eef2ff}.fxCard.locked{opacity:.5;filter:grayscale(.7);cursor:not-allowed}
.fxCard .nick{pointer-events:none}
@media (max-width:760px){.fxGallery{grid-template-columns:repeat(2,1fr)}}

/* Privatfenster + Premium-Nav */
.navA{display:inline-flex;align-items:center;justify-content:center;background:#2c3446;color:#ffd54a;border:1px solid #3d4760;border-radius:8px;padding:4px 10px;min-height:40px;text-decoration:none;font-size:18px}.navA:hover{background:#3d4760}
#pmFloats{position:fixed;inset:0;pointer-events:none;z-index:80}
.pmFloat{pointer-events:auto;position:fixed;width:min(360px,94vw);height:min(420px,70dvh);background:#fff;border-radius:12px;box-shadow:0 8px 32px #0005;display:flex;flex-direction:column;overflow:hidden;border:1px solid #c5cad6}
.pmFloat.min{height:44px}.pmFloat.min .pmBody,.pmFloat.min .pmSend,.pmFloat.min .pmErr{display:none}
.pmHead{display:flex;align-items:center;gap:4px;padding:6px 8px;background:#1f2533;color:#fff;cursor:default;flex:none}
.pmTitle{flex:1;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmHead button{min-height:32px;min-width:32px;padding:0 6px;background:#2c3446;color:#fff;border-color:#3d4760}
.pmBody{flex:1;overflow:auto;padding:8px;background:#f6f7fb;font-size:15px}.pmBody p{margin:3px 0}.pmBody .mine{text-align:right}
.pmSend{display:flex;gap:6px;padding:8px;flex:none}.pmIn{flex:1;min-height:44px;font-size:16px}
.pmErr{margin:0 8px 6px;min-height:1em}
@media (max-width:760px){.pmFloat{width:100vw;height:min(55dvh,420px);left:0!important;right:0!important;bottom:0!important;border-radius:12px 12px 0 0}}

/* Update 6: Radio-Leiste hat einen fest reservierten Platz – Starten/Stoppen verschiebt nichts */
#radioBar{height:44px;min-height:44px;box-sizing:border-box}
#radioBar.hidden{display:flex!important;visibility:hidden;pointer-events:none}

/* Update 6: eigene Räume */
.rooms li .o{font-size:13px;color:#667;white-space:nowrap}.rooms li.inactive{opacity:.6}
.kickIco{background:none;border:none;cursor:pointer;font-size:16px;padding:0 2px;margin-left:auto}.kickIco+.camIco{margin-left:0}
#roomSetDlg fieldset{border:1px solid #dde;border-radius:8px;display:flex;flex-direction:column;gap:8px;padding:10px}
.row2{display:flex;gap:8px;flex-wrap:wrap}.row2 label{flex:1;min-width:140px}.cmdToggles{display:inline-flex;flex-wrap:wrap;gap:4px 12px}.cmdToggles .chk{display:inline-flex;gap:4px;align-items:center}
.note{background:#fff7d6;border-radius:8px;padding:8px}.small{font-size:13px}
.rooms li{grid-template-columns:40px minmax(120px,300px) 1fr auto 60px}
@media (max-width:760px){.rooms li{grid-template-columns:28px 1fr auto;grid-template-areas:"x n u" "x d d" "x o o"}.rooms .o{grid-area:o}}

/* Update 7: grafische Raum-Banner in der Raumliste */
.rooms li.rcard{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-height:132px;margin:10px 12px;padding:14px 18px;border-radius:14px;
  background-size:cover;background-position:center;color:#fff;box-shadow:0 4px 14px #0003;transition:transform .15s,box-shadow .15s;overflow:hidden}
.rooms li.rcard::before{content:none}.rooms li.rcard:hover{background-color:transparent;transform:translateY(-2px);box-shadow:0 8px 22px #0004}
.rcard .rtop{display:flex;align-items:flex-start;gap:12px}.rcard .n{color:#fff;font-size:22px;font-weight:800;text-shadow:0 2px 6px #000a;flex:1;min-width:0;overflow-wrap:anywhere}
.rcard .rcnt{display:flex;gap:8px;flex-shrink:0}.rcard .rcnt>span{background:#0007;border-radius:20px;padding:3px 10px;font-size:14px;color:#fff;white-space:nowrap}
.rcard .d{color:#eef;font-size:15px;text-shadow:0 1px 4px #000a;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard .rfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between}
.rcard .o{color:#dde;font-size:13px;text-shadow:0 1px 3px #000a}
.rcard .rr{display:flex;align-items:center;gap:8px;background:#0008;border-radius:20px;padding:4px 12px;font-size:14px;max-width:min(520px,100%);min-width:0}
.rcard .rtxt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.rcard .rtxt.off{opacity:.7}
.rcard.playing .rr{background:linear-gradient(90deg,#8e44adcc,#3355ffcc)}
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:16px;flex-shrink:0}.eq i{width:3px;height:30%;background:#fff;border-radius:2px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.4s}.eq i:nth-child(3){animation-delay:-.7s}.eq i:nth-child(4){animation-delay:-.2s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
@media (prefers-reduced-motion:reduce){.eq i{animation:none;height:70%}}
.rooms li.rcard.inactive{opacity:.6}
.bannerPrev{height:70px;border-radius:10px;background-size:cover;background-position:center}
@media (max-width:760px){
  .rooms li.rcard{display:flex;margin:8px 4px;padding:12px;min-height:118px}
  .rcard .n{font-size:18px}.rcard .d{font-size:14px}.rcard .rcnt>span{font-size:13px;padding:2px 8px}
  .rcard .rfoot{flex-direction:column;align-items:flex-start;gap:6px}.rcard .rr{max-width:100%}
}
.rooms li.rcard{align-items:stretch;text-align:left}.rooms li.rcard .o{color:#e6e8f5;font-size:13px;text-shadow:0 1px 3px #000c;white-space:normal}

/* Update 8: WEBMEE-Branding */
.logo{display:inline-flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.5px}
.logoIcon{width:32px;height:32px;border-radius:8px;display:block}.logo .wm b{background:linear-gradient(90deg,#ff4fd8,#ff8a00);-webkit-background-clip:text;background-clip:text;color:transparent}
.authLogo{display:block;width:min(340px,90%);margin:0 auto 14px;background:#1f2533;border-radius:14px;padding:6px 10px}
@media (max-width:760px){.logoIcon{width:28px;height:28px}}

/* Update 10: Ausweis-Prüfung */
.idBox{grid-column:1/-1;background:#f4f6fc;border-radius:10px;padding:8px 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.idStatus{padding:8px 12px;border-radius:10px;background:#f4f6fc}.idStatus.s-pending{background:#fff7d6}.idStatus.s-verified,.idStatus.s-approved{background:#e3f7e8}.idStatus.s-rejected{background:#fde8e8}
.idq{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}.idq .it{background:#fff;border-radius:12px;padding:12px;box-shadow:0 2px 8px #0001}
.idq .imgs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.idq .imgs a{flex:1;min-width:90px}.idq .imgs img{width:100%;height:110px;object-fit:cover;border-radius:8px;background:#eee;display:block}

/* Update 12: Autoplay-Hinweis */
#radioUnmute{background:linear-gradient(90deg,#7c4dff,#ff4fa3);color:#fff;border:0;border-radius:14px;padding:4px 12px;font-weight:700;cursor:pointer;white-space:nowrap;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.7}}